|
@@ -102,86 +102,66 @@
|
|
|
</section>
|
|
|
|
|
|
<section>
|
|
|
- <h2>Mobile Support</h2>
|
|
|
+ <h2>Touch Optimized</h2>
|
|
|
<p>
|
|
|
- Presentations work on touch devices such as phones and tablets. Simply swipe through your slides.
|
|
|
+ Presentations look great on touch devices, like mobile phones and tablets. Simply swipe through your slides.
|
|
|
</p>
|
|
|
</section>
|
|
|
|
|
|
- <section>
|
|
|
- <h2>Marvelous Unordered List</h2>
|
|
|
- <ul>
|
|
|
- <li>No order here</li>
|
|
|
- <li>Or here</li>
|
|
|
- <li>Or here</li>
|
|
|
- <li>Or here</li>
|
|
|
- </ul>
|
|
|
- </section>
|
|
|
-
|
|
|
- <section>
|
|
|
- <h2>Fantastic Ordered List</h2>
|
|
|
- <ol>
|
|
|
- <li>One is smaller than...</li>
|
|
|
- <li>Two is smaller than...</li>
|
|
|
- <li>Three!</li>
|
|
|
- </ol>
|
|
|
- </section>
|
|
|
-
|
|
|
- <section>
|
|
|
- <h2>Superb Tables</h2>
|
|
|
- <table>
|
|
|
- <thead>
|
|
|
- <tr>
|
|
|
- <th>Item</th>
|
|
|
- <th>Value</th>
|
|
|
- <th>Quantity</th>
|
|
|
- </tr>
|
|
|
- </thead>
|
|
|
- <tbody>
|
|
|
- <tr>
|
|
|
- <td>Apples</td>
|
|
|
- <td>$1</td>
|
|
|
- <td>7</td>
|
|
|
- <tr>
|
|
|
- <tr>
|
|
|
- <td>Lemonade</td>
|
|
|
- <td>$2</td>
|
|
|
- <td>18</td>
|
|
|
- <tr>
|
|
|
- <tr>
|
|
|
- <td>Bread</td>
|
|
|
- <td>$3</td>
|
|
|
- <td>2</td>
|
|
|
- <tr>
|
|
|
- </tbody>
|
|
|
- </table>
|
|
|
- </section>
|
|
|
-
|
|
|
<section data-markdown>
|
|
|
<script type="text/template">
|
|
|
## Markdown support
|
|
|
|
|
|
- For those of you who like that sort of thing. Instructions and a bit more info available [here](https://github.com/hakimel/reveal.js#markdown).
|
|
|
+ Write content using inline or external Markdown.
|
|
|
+ Instructions and more info available in the [readme](https://github.com/hakimel/reveal.js#markdown).
|
|
|
|
|
|
```
|
|
|
<section data-markdown>
|
|
|
## Markdown support
|
|
|
|
|
|
- For those of you who like that sort of thing.
|
|
|
- Instructions and a bit more info available [here](https://github.com/hakimel/reveal.js#markdown).
|
|
|
+ Write content using inline or external Markdown.
|
|
|
+ Instructions and more info available in the [readme](https://github.com/hakimel/reveal.js#markdown).
|
|
|
</section>
|
|
|
```
|
|
|
</script>
|
|
|
</section>
|
|
|
|
|
|
+ <section>
|
|
|
+ <section id="fragments">
|
|
|
+ <h2>Fragments</h2>
|
|
|
+ <p>Hit the next arrow...</p>
|
|
|
+ <p class="fragment">... to step through ...</p>
|
|
|
+ <ol>
|
|
|
+ <li class="fragment"><code>any type</code></li>
|
|
|
+ <li class="fragment"><em>of view</em></li>
|
|
|
+ <li class="fragment"><strong>fragments</strong></li>
|
|
|
+ </ol>
|
|
|
+
|
|
|
+ <aside class="notes">
|
|
|
+ This slide has fragments which are also stepped through in the notes window.
|
|
|
+ </aside>
|
|
|
+ </section>
|
|
|
+ <section>
|
|
|
+ <h2>Fragment Styles</h2>
|
|
|
+ <p>There's a few styles of fragments, like:</p>
|
|
|
+ <p class="fragment grow">grow</p>
|
|
|
+ <p class="fragment shrink">shrink</p>
|
|
|
+ <p class="fragment roll-in">roll-in</p>
|
|
|
+ <p class="fragment fade-out">fade-out</p>
|
|
|
+ <p class="fragment highlight-red">highlight-red</p>
|
|
|
+ <p class="fragment current-visible">current-visible</p>
|
|
|
+ <p class="fragment highlight-current-blue">highlight-current-blue</p>
|
|
|
+ </section>
|
|
|
+ </section>
|
|
|
+
|
|
|
<section id="transitions">
|
|
|
<h2>Transition Styles</h2>
|
|
|
<p>
|
|
|
You can select from different transitions, like: <br>
|
|
|
- <a href="?#/transitions">Default</a> -
|
|
|
<a href="?transition=none#/transitions">None</a> -
|
|
|
<a href="?transition=fade#/transitions">Fade</a> -
|
|
|
<a href="?transition=slide#/transitions">Slide</a> -
|
|
|
+ <a href="?transition=convex#/transitions">Convex</a> -
|
|
|
<a href="?transition=concave#/transitions">Concave</a> -
|
|
|
<a href="?transition=zoom#/transitions">Zoom</a>
|
|
|
</p>
|
|
@@ -202,7 +182,7 @@
|
|
|
</p>
|
|
|
<p>
|
|
|
<small>
|
|
|
- * Theme demos are loaded after the presentation which leads to flicker. In production you should load your theme in the <code><head></code> using a <code><link></code>.
|
|
|
+ * Theme demos are loaded after the presentation which leads to flicker. In production you should load your theme in the <head> using a <link>.
|
|
|
</small>
|
|
|
</p>
|
|
|
</section>
|
|
@@ -212,12 +192,12 @@
|
|
|
<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.
|
|
|
+ apply broader style changes, like switching the page background.
|
|
|
</p>
|
|
|
</section>
|
|
|
|
|
|
<section data-state="customevent">
|
|
|
- <h2>Custom Events</h2>
|
|
|
+ <h2>State Events</h2>
|
|
|
<p>
|
|
|
Additionally custom events can be triggered on a per slide basis by binding to the <code>data-state</code> name.
|
|
|
</p>
|
|
@@ -243,7 +223,7 @@ Reveal.addEventListener( 'customevent', function() {
|
|
|
<pre><code><section data-background="image.png"></code></pre>
|
|
|
</section>
|
|
|
<section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/image-placeholder.png" data-background-repeat="repeat" data-background-size="100px">
|
|
|
- <h2>Repeated Image Backgrounds</h2>
|
|
|
+ <h2>Tile Backgrounds</h2>
|
|
|
<pre><code style="word-wrap: break-word;"><section data-background="image.png" data-background-repeat="repeat" data-background-size="100px"></code></pre>
|
|
|
</section>
|
|
|
</section>
|
|
@@ -258,10 +238,59 @@ Reveal.addEventListener( 'customevent', function() {
|
|
|
<section data-transition="slide" data-background="#8c4738" data-background-transition="zoom">
|
|
|
<h2>Background Transitions</h2>
|
|
|
<p>
|
|
|
- You can override background transitions per slide by using <code>data-background-transition="slide"</code>.
|
|
|
+ You can override background transitions per slide by using <code>data-background-transition="zoom"</code>.
|
|
|
</p>
|
|
|
</section>
|
|
|
|
|
|
+ <section>
|
|
|
+ <h2>Marvelous List</h2>
|
|
|
+ <ul>
|
|
|
+ <li>No order here</li>
|
|
|
+ <li>Or here</li>
|
|
|
+ <li>Or here</li>
|
|
|
+ <li>Or here</li>
|
|
|
+ </ul>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <section>
|
|
|
+ <h2>Fantastic Ordered List</h2>
|
|
|
+ <ol>
|
|
|
+ <li>One is smaller than...</li>
|
|
|
+ <li>Two is smaller than...</li>
|
|
|
+ <li>Three!</li>
|
|
|
+ </ol>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <section>
|
|
|
+ <h2>Superb Tables</h2>
|
|
|
+ <table>
|
|
|
+ <thead>
|
|
|
+ <tr>
|
|
|
+ <th>Item</th>
|
|
|
+ <th>Value</th>
|
|
|
+ <th>Quantity</th>
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody>
|
|
|
+ <tr>
|
|
|
+ <td>Apples</td>
|
|
|
+ <td>$1</td>
|
|
|
+ <td>7</td>
|
|
|
+ <tr>
|
|
|
+ <tr>
|
|
|
+ <td>Lemonade</td>
|
|
|
+ <td>$2</td>
|
|
|
+ <td>18</td>
|
|
|
+ <tr>
|
|
|
+ <tr>
|
|
|
+ <td>Bread</td>
|
|
|
+ <td>$3</td>
|
|
|
+ <td>2</td>
|
|
|
+ <tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ </section>
|
|
|
+
|
|
|
<section>
|
|
|
<h2>Clever Quotes</h2>
|
|
|
<p>
|
|
@@ -303,34 +332,6 @@ function linkify( selector ) {
|
|
|
</p>
|
|
|
</section>
|
|
|
|
|
|
- <section>
|
|
|
- <section id="fragments">
|
|
|
- <h2>Fragmented Views</h2>
|
|
|
- <p>Hit the next arrow...</p>
|
|
|
- <p class="fragment">... to step through ...</p>
|
|
|
- <ol>
|
|
|
- <li class="fragment"><code>any type</code></li>
|
|
|
- <li class="fragment"><em>of view</em></li>
|
|
|
- <li class="fragment"><strong>fragments</strong></li>
|
|
|
- </ol>
|
|
|
-
|
|
|
- <aside class="notes">
|
|
|
- This slide has fragments which are also stepped through in the notes window.
|
|
|
- </aside>
|
|
|
- </section>
|
|
|
- <section>
|
|
|
- <h2>Fragment Styles</h2>
|
|
|
- <p>There's a few styles of fragments, like:</p>
|
|
|
- <p class="fragment grow">grow</p>
|
|
|
- <p class="fragment shrink">shrink</p>
|
|
|
- <p class="fragment roll-in">roll-in</p>
|
|
|
- <p class="fragment fade-out">fade-out</p>
|
|
|
- <p class="fragment highlight-red">highlight-red</p>
|
|
|
- <p class="fragment current-visible">current-visible</p>
|
|
|
- <p class="fragment highlight-current-blue">highlight-current-blue</p>
|
|
|
- </section>
|
|
|
- </section>
|
|
|
-
|
|
|
<section>
|
|
|
<h2>Spectacular image!</h2>
|
|
|
<a href="http://lab.hakim.se/meny/" target="_blank">
|