aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--README.md2
-rw-r--r--index.html108
2 files changed, 59 insertions, 51 deletions
diff --git a/README.md b/README.md
index 703fa07..4c040cf 100644
--- a/README.md
+++ b/README.md
@@ -617,7 +617,7 @@ The framework comes with a few different themes included:
- simple: White background, black text, blue links
- solarized: Cream-colored background, dark green text, blue links
-Each theme is available as a separate stylesheet. To change theme you will need to replace **default** below with your desired theme name in index.html:
+Each theme is available as a separate stylesheet. To change theme you will need to replace **black** below with your desired theme name in index.html:
```html
<link rel="stylesheet" href="css/theme/black.css" id="theme">
diff --git a/index.html b/index.html
index 012ebe6..6a8bd6d 100644
--- a/index.html
+++ b/index.html
@@ -53,10 +53,6 @@
<p>
reveal.js is a framework that enables you to create beautiful presentations using HTML. This demo presentation will tell you more about what you can do with it.
</p>
-
- <aside class="notes">
- Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard).
- </aside>
</section>
<!-- Example of nested vertical slides -->
@@ -185,27 +181,6 @@
</section>
<section>
- <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 page background.
- </p>
- </section>
-
- <section data-state="customevent">
- <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>
- <pre><code class="javascript" data-trim contenteditable style="font-size: 18px;">
-Reveal.addEventListener( 'customevent', function() {
- console.log( '"customevent" has fired' );
-} );
- </code></pre>
- </section>
-
- <section>
<section data-background="#dddddd">
<h2>Slide Backgrounds</h2>
<p>
@@ -248,6 +223,27 @@ Reveal.addEventListener( 'customevent', function() {
</section>
<section>
+ <h2>Pretty Code</h2>
+ <pre><code data-trim contenteditable>
+function linkify( selector ) {
+ if( supports3DTransforms ) {
+
+ var nodes = document.querySelectorAll( selector );
+
+ for( var i = 0, len = nodes.length; i &lt; len; i++ ) {
+ var node = nodes[i];
+
+ if( !node.className ) {
+ node.className += ' roll';
+ }
+ }
+ }
+}
+ </code></pre>
+ <p>Courtesy of <a href="http://softwaremaniacs.org/soft/highlight/en/description/">highlight.js</a>.</p>
+ </section>
+
+ <section>
<h2>Marvelous List</h2>
<ul>
<li>No order here</li>
@@ -309,27 +305,6 @@ Reveal.addEventListener( 'customevent', function() {
</section>
<section>
- <h2>Pretty Code</h2>
- <pre><code data-trim contenteditable>
-function linkify( selector ) {
- if( supports3DTransforms ) {
-
- var nodes = document.querySelectorAll( selector );
-
- for( var i = 0, len = nodes.length; i &lt; len; i++ ) {
- var node = nodes[i];
-
- if( !node.className ) {
- node.className += ' roll';
- }
- }
- }
-}
- </code></pre>
- <p>Courtesy of <a href="http://softwaremaniacs.org/soft/highlight/en/description/">highlight.js</a>.</p>
- </section>
-
- <section>
<h2>Intergalactic Interconnections</h2>
<p>
You can link between slides internally,
@@ -338,10 +313,13 @@ function linkify( selector ) {
</section>
<section>
- <h2>Spectacular image!</h2>
- <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>
+ <h2>Speaker View</h2>
+ <p>There's a <a href="https://github.com/hakimel/reveal.js#speaker-notes">speaker view</a>. It includes a timer, preview of the upcoming slide as well as your speaker notes.</p>
+ <p>Press the <em>S</em> key to try it out.</p>
+
+ <aside class="notes">
+ Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard).
+ </aside>
</section>
<section>
@@ -354,6 +332,27 @@ function linkify( selector ) {
</section>
<section>
+ <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 page background.
+ </p>
+ </section>
+
+ <section data-state="customevent">
+ <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>
+ <pre><code class="javascript" data-trim contenteditable style="font-size: 18px;">
+Reveal.addEventListener( 'customevent', function() {
+ console.log( '"customevent" has fired' );
+} );
+ </code></pre>
+ </section>
+
+ <section>
<h2>Take a Moment</h2>
<p>
Press B or . on your keyboard to pause the presentation. This is helpful when you're on stage and want to take distracting slides off the screen.
@@ -361,6 +360,15 @@ function linkify( selector ) {
</section>
<section>
+ <h2>Much more</h2>
+ <ul>
+ <li>Right-to-left support</li>
+ <li><a href="https://github.com/hakimel/reveal.js#auto-sliding">Auto-progression</a></li>
+ <li><a href="https://github.com/hakimel/reveal.js#parallax-background">Parallax backgrounds</a></li>
+ </ul>
+ </section>
+
+ <section>
<h2>Stellar Links</h2>
<ul>
<li><a href="http://slid.es">Try the online editor</a></li>