aboutsummaryrefslogtreecommitdiff
path: root/index.html
diff options
context:
space:
mode:
authorHakim El Hattab <hakim@squarespace.com>2013-06-04 21:29:32 +0200
committerHakim El Hattab <hakim@squarespace.com>2013-06-04 21:29:32 +0200
commitff35847fc644253a19f4fcc43b05d4afb5960bcc (patch)
tree1b525aaa206cce72af97d8ba94393709c5a51174 /index.html
parent0ce57f1f91d079b027dc250a2827b8ac4d93bd2d (diff)
downloadfosdem-2018-presentation-ff35847fc644253a19f4fcc43b05d4afb5960bcc.tar
fosdem-2018-presentation-ff35847fc644253a19f4fcc43b05d4afb5960bcc.tar.gz
update example deck to use slide backgrounds (#453)
Diffstat (limited to 'index.html')
-rw-r--r--index.html27
1 files changed, 18 insertions, 9 deletions
diff --git a/index.html b/index.html
index 3670474..982cfec 100644
--- a/index.html
+++ b/index.html
@@ -183,25 +183,34 @@
</section>
<section>
- <section data-state="alert">
- <h2>Global State</h2>
+ <h2>Global State</h2>
+ <p>
+ Set <code>data-state="something"</code> on a slide and <code>"something"</code>
+ will be added as a class to the document element when the slide is open. This lets you
+ apply broader style changes, like switching the background.
+ </p>
+ </section>
+
+ <section>
+ <section data-background="#007777">
+ <h2>Slide Backgrounds</h2>
<p>
- Set <code>data-state="something"</code> on a slide and <code>"something"</code>
- will be added as a class to the document element when the slide is open. This lets you
- apply broader style changes, like switching the background.
+ Set <code>data-background="#007777"</code> on a slide to change the full page background to the given color. All CSS color formats are supported.
</p>
<a href="#" class="image navigate-down">
<img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
</a>
</section>
- <section data-state="blackout">
- <h2>"blackout"</h2>
+ <section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/cornify.gif">
+ <h2>Image Backgrounds</h2>
+ <pre><code>&lt;section data-background="image.png"&gt;</code></pre>
<a href="#" class="image navigate-down">
<img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
</a>
</section>
- <section data-state="soothe">
- <h2>"soothe"</h2>
+ <section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/cornify.gif" data-background-repeat="repeat" data-background-size="100px">
+ <h2>Repeated Image Backgrounds</h2>
+ <pre><code style="word-wrap: break-word;">&lt;section data-background="image.png" data-background-repeat="repeat" data-background-size="100px"&gt;</code></pre>
<a href="#" class="image navigate-next">
<img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Up arrow" style="-webkit-transform: rotate(-90deg);">
</a>