diff options
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 92 |
1 files changed, 59 insertions, 33 deletions
@@ -12,23 +12,21 @@ <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> - <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> + <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui"> - <link rel="stylesheet" href="css/reveal.min.css"> + <link rel="stylesheet" href="css/reveal.css"> <link rel="stylesheet" href="css/theme/default.css" id="theme"> <!-- For syntax highlighting --> <link rel="stylesheet" href="lib/css/zenburn.css"> - <!-- If the query includes 'print-pdf', include the PDF print sheet --> + <!-- Include the appropriate print stylesheet --> <script> - if( window.location.search.match( /print-pdf/gi ) ) { - var link = document.createElement( 'link' ); - link.rel = 'stylesheet'; - link.type = 'text/css'; - link.href = 'css/print/pdf.css'; - document.getElementsByTagName( 'head' )[0].appendChild( link ); - } + var link = document.createElement( 'link' ); + link.rel = 'stylesheet'; + link.type = 'text/css'; + link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css'; + document.getElementsByTagName( 'head' )[0].appendChild( link ); </script> <!--[if lt IE 9]> @@ -70,8 +68,8 @@ Slides can be nested inside of other slides, try pressing <a href="#" class="navigate-down">down</a>. </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 href="#" class="navigate-down"> + <img width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow"> </a> </section> <section> @@ -82,14 +80,14 @@ <h2>Basement Level 2</h2> <p>Cornify</p> <a class="test" href="http://cornify.com"> - <img width="280" height="326" src="https://s3.amazonaws.com/hakim-static/reveal-js/cornify.gif" alt="Unicorn"> + <img width="280" height="326" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/cornify.gif" alt="Unicorn"> </a> </section> <section> <h2>Basement Level 3</h2> <p>That's it, time to go back up.</p> - <a href="#/2" class="image"> - <img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Up arrow" style="-webkit-transform: rotate(180deg);"> + <a href="#/2"> + <img width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Up arrow" style="-webkit-transform: rotate(180deg);"> </a> </section> </section> @@ -97,7 +95,7 @@ <section> <h2>Slides</h2> <p> - Not a coder? No problem. There's a fully-featured visual editor for authoring these, try it out at <a href="http://slid.es" target="_blank">http://slid.es</a>. + Not a coder? No problem. There's a fully-featured visual editor for authoring these, try it out at <a href="http://slides.com" target="_blank">http://slides.com</a>. </p> </section> @@ -137,6 +135,36 @@ </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 @@ -158,14 +186,12 @@ <h2>Transition Styles</h2> <p> You can select from different transitions, like: <br> - <a href="?transition=cube#/transitions">Cube</a> - - <a href="?transition=page#/transitions">Page</a> - - <a href="?transition=concave#/transitions">Concave</a> - - <a href="?transition=zoom#/transitions">Zoom</a> - - <a href="?transition=linear#/transitions">Linear</a> - - <a href="?transition=fade#/transitions">Fade</a> - + <a href="?#/transitions">Default</a> - <a href="?transition=none#/transitions">None</a> - - <a href="?#/transitions">Default</a> + <a href="?transition=fade#/transitions">Fade</a> - + <a href="?transition=slide#/transitions">Slide</a> - + <a href="?transition=concave#/transitions">Concave</a> - + <a href="?transition=zoom#/transitions">Zoom</a> </p> </section> @@ -203,7 +229,7 @@ <p> Additionally custom events can be triggered on a per slide basis by binding to the <code>data-state</code> name. </p> - <pre><code data-trim contenteditable style="font-size: 18px; margin-top: 20px;"> + <pre><code class="javascript" data-trim contenteditable style="font-size: 18px;"> Reveal.addEventListener( 'customevent', function() { console.log( '"customevent" has fired' ); } ); @@ -216,8 +242,8 @@ Reveal.addEventListener( 'customevent', function() { <p> 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 href="#" class="navigate-down"> + <img width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow"> </a> </section> <section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png"> @@ -230,14 +256,14 @@ Reveal.addEventListener( 'customevent', function() { </section> </section> - <section data-transition="linear" data-background="#4d7e65" data-background-transition="slide"> + <section data-transition="slide" data-background="#4d7e65" data-background-transition="slide"> <h2>Background Transitions</h2> <p> Pass reveal.js the <code>backgroundTransition: 'slide'</code> config argument to make backgrounds slide rather than fade. </p> </section> - <section data-transition="linear" data-background="#8c4738" data-background-transition="slide"> + <section data-transition="slide" data-background="#8c4738" data-background-transition="slide"> <h2>Background Transition Override</h2> <p> You can override background transitions per slide by using <code>data-background-transition="slide"</code>. @@ -317,8 +343,8 @@ function linkify( selector ) { <section> <h2>Spectacular image!</h2> - <a class="image" href="http://lab.hakim.se/meny/" target="_blank"> - <img width="320" height="299" src="http://s3.amazonaws.com/hakim-static/portfolio/images/meny.png" alt="Meny"> + <a href="http://lab.hakim.se/meny/" target="_blank"> + <img width="320" height="299" data-src="http://s3.amazonaws.com/hakim-static/portfolio/images/meny.png" alt="Meny"> </a> </section> @@ -358,7 +384,7 @@ function linkify( selector ) { </div> <script src="lib/js/head.min.js"></script> - <script src="js/reveal.min.js"></script> + <script src="js/reveal.js"></script> <script> @@ -371,7 +397,7 @@ function linkify( selector ) { center: true, theme: Reveal.getQueryHash().theme, // available themes are in /css/theme - transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/fade/none + transition: Reveal.getQueryHash().transition || 'default', // none/fade/slide/convex/concave/zoom // Parallax scrolling // parallaxBackgroundImage: 'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg', @@ -382,7 +408,7 @@ function linkify( selector ) { { src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } }, { src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }, { src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }, - { src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }, + { src: 'plugin/highlight/highlight.js', async: true, condition: function() { return !!document.querySelector( 'pre code' ); }, callback: function() { hljs.initHighlightingOnLoad(); } }, { src: 'plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } }, { src: 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } } ] |