Allow override of HTML escaping in code blocks

This way, authors can use HTML for special formatting.

.travis.yml

@@ -0,0 +1,5 @@
+language: node_js
+node_js:
+  - 0.8
+before_script:
+  - npm install -g grunt-cli

Gruntfile.js

@@ -0,0 +1,132 @@
+/* global module:false */
+module.exports = function(grunt) {
+
+	// Project configuration
+	grunt.initConfig({
+		pkg: grunt.file.readJSON('package.json'),
+		meta: {
+			banner:
+				'/*!\n' +
+				' * reveal.js <%= pkg.version %> (<%= grunt.template.today("yyyy-mm-dd, HH:MM") %>)\n' +
+				' * http://lab.hakim.se/reveal-js\n' +
+				' * MIT licensed\n' +
+				' *\n' +
+				' * Copyright (C) 2013 Hakim El Hattab, http://hakim.se\n' +
+				' */'
+		},
+
+		// Tests will be added soon
+		qunit: {
+			files: [ 'test/**/*.html' ]
+		},
+
+		uglify: {
+			options: {
+				banner: '<%= meta.banner %>\n'
+			},
+			build: {
+				src: 'js/reveal.js',
+				dest: 'js/reveal.min.js'
+			}
+		},
+
+		cssmin: {
+			compress: {
+				files: {
+					'css/reveal.min.css': [ 'css/reveal.css' ]
+				}
+			}
+		},
+
+		sass: {
+			main: {
+				files: {
+					'css/theme/default.css': 'css/theme/source/default.scss',
+					'css/theme/beige.css': 'css/theme/source/beige.scss',
+					'css/theme/night.css': 'css/theme/source/night.scss',
+					'css/theme/serif.css': 'css/theme/source/serif.scss',
+					'css/theme/simple.css': 'css/theme/source/simple.scss',
+					'css/theme/sky.css': 'css/theme/source/sky.scss',
+					'css/theme/moon.css': 'css/theme/source/moon.scss',
+					'css/theme/solarized.css': 'css/theme/source/solarized.scss'
+				}
+			}
+		},
+
+		jshint: {
+			options: {
+				curly: false,
+				eqeqeq: true,
+				immed: true,
+				latedef: true,
+				newcap: true,
+				noarg: true,
+				sub: true,
+				undef: true,
+				eqnull: true,
+				browser: true,
+				expr: true,
+				globals: {
+					head: false,
+					module: false,
+					console: false
+				}
+			},
+			files: [ 'Gruntfile.js', 'js/reveal.js' ]
+		},
+
+		connect: {
+			server: {
+				options: {
+					port: 8000,
+					base: '.'
+				}
+			}
+		},
+
+		zip: {
+			'reveal-js-presentation.zip': [
+				'index.html',
+				'css/**',
+				'js/**',
+				'lib/**',
+				'images/**',
+				'plugin/**'
+			]
+		},
+
+		watch: {
+			main: {
+				files: [ 'Gruntfile.js', 'js/reveal.js', 'css/reveal.css' ],
+				tasks: 'default'
+			},
+			theme: {
+				files: [ 'css/theme/source/*.scss', 'css/theme/template/*.scss' ],
+				tasks: 'themes'
+			}
+		}
+
+	});
+
+	// Dependencies
+	grunt.loadNpmTasks( 'grunt-contrib-jshint' );
+	grunt.loadNpmTasks( 'grunt-contrib-cssmin' );
+	grunt.loadNpmTasks( 'grunt-contrib-uglify' );
+	grunt.loadNpmTasks( 'grunt-contrib-watch' );
+	grunt.loadNpmTasks( 'grunt-contrib-sass' );
+	grunt.loadNpmTasks( 'grunt-contrib-connect' );
+	grunt.loadNpmTasks( 'grunt-zip' );
+
+	// Default task
+	grunt.registerTask( 'default', [ 'jshint', 'cssmin', 'uglify' ] );
+
+	// Theme task
+	grunt.registerTask( 'themes', [ 'sass' ] );
+
+	// Package presentation to archive
+	grunt.registerTask( 'package', [ 'default', 'zip' ] );
+
+	// Serve presentation locally
+	grunt.registerTask( 'serve', [ 'connect', 'watch' ] );
+
+};

LICENSE

@@ -1,4 +1,4 @@
-Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
+Copyright (C) 2013 Hakim El Hattab, http://hakim.se
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,29 +1,30 @@
-# reveal.js
+# reveal.js [![Build Status](https://travis-ci.org/hakimel/reveal.js.png?branch=master)](https://travis-ci.org/hakimel/reveal.js)
 
 A framework for easily creating beautiful presentations using HTML. [Check out the live demo](http://lab.hakim.se/reveal-js/).
 
 reveal.js comes with a broad range of features including [nested slides](https://github.com/hakimel/reveal.js#markup), [markdown contents](https://github.com/hakimel/reveal.js#markdown), [PDF export](https://github.com/hakimel/reveal.js#pdf-export), [speaker notes](https://github.com/hakimel/reveal.js#speaker-notes) and a [JavaScript API](https://github.com/hakimel/reveal.js#api). It's best viewed in a browser with support for CSS 3D transforms but [fallbacks](https://github.com/hakimel/reveal.js/wiki/Browser-Support) are available to make sure your presentation can still be viewed elsewhere.
 
 
-#### More reading in the Wiki:
+#### More reading::
+- [Installation](#installation): Step-by-step instructions for getting reveal.js running on your computer.
 - [Changelog](https://github.com/hakimel/reveal.js/wiki/Changelog): Up-to-date version history.
 - [Examples](https://github.com/hakimel/reveal.js/wiki/Example-Presentations): Presentations created with reveal.js, add your own!
 - [Browser Support](https://github.com/hakimel/reveal.js/wiki/Browser-Support): Explanation of browser support and fallbacks.
 
-## rvl.io
+## Slides
 
-Slides are written using HTML or markdown but there's also an online editor for those of you who prefer a more traditional user interface. Give it a try at [www.rvl.io](http://www.rvl.io).
+Presentations are written using HTML or markdown but there's also an online editor for those of you who prefer a graphical interface. Give it a try at [http://slid.es](http://slid.es).
 
 
 ## Instructions
 
 ### Markup
 
-Markup heirarchy needs to be ``<div class="reveal"> <div class="slides"> <section>`` where the ``<section>`` represents one slide and can be repeated indefinitely. If you place multiple ``<section>``'s inside of another ``<section>`` they will be shown as vertical slides. The first of the vertical slides is the "root" of the others (at the top), and it will be included in the horizontal sequence. For example:
+Markup hierarchy needs to be ``<div class="reveal"> <div class="slides"> <section>`` where the ``<section>`` represents one slide and can be repeated indefinitely. If you place multiple ``<section>``'s inside of another ``<section>`` they will be shown as vertical slides. The first of the vertical slides is the "root" of the others (at the top), and it will be included in the horizontal sequence. For example:
 
 ```html
 <div class="reveal">
-	<div class="slides"> 
+	<div class="slides">
 		<section>Single Horizontal Slide</section>
 		<section>
 			<section>Vertical Slide 1</section>
@@ -37,18 +38,25 @@ Markup heirarchy needs to be ``<div class="reveal"> <div class="slides"> <sectio
 
 It's possible to write your slides using Markdown. To enable Markdown, add the ```data-markdown``` attribute to your ```<section>``` elements and wrap the contents in a ```<script type="text/template">``` like the example below.
 
-This is based on [data-markdown](https://gist.github.com/1343518) from [Paul Irish](https://github.com/paulirish) which in turn uses [showdown](https://github.com/coreyti/showdown/). This is sensitive to indentation (avoid mixing tabs and spaces) and line breaks (avoid consecutive breaks).
+This is based on [data-markdown](https://gist.github.com/1343518) from [Paul Irish](https://github.com/paulirish) modified to use [marked](https://github.com/chjj/marked) to support [Github Flavoured Markdown](https://help.github.com/articles/github-flavored-markdown). Sensitive to indentation (avoid mixing tabs and spaces) and line breaks (avoid consecutive breaks).
 
 ```html
 <section data-markdown>
 	<script type="text/template">
 		## Page title
-		
+
 		A paragraph with some text and a [link](http://hakim.se).
 	</script>
 </section>
 ```
 
+#### External Markdown
+
+You can write your content as a separate file and have reveal.js load it at runtime. Note the separator arguments which determine how slides are delimited in the external file.
+
+```html
+<section data-markdown="example.md" data-separator="^\n\n\n" data-vertical="^\n\n"></section>
+```
 
 ### Configuration
 
@@ -56,6 +64,7 @@ At the end of your page you need to initialize reveal by running the following c
 
 ```javascript
 Reveal.initialize({
+
 	// Display controls in the bottom right corner
 	controls: true,
 
@@ -71,25 +80,77 @@ Reveal.initialize({
 	// Enable the slide overview mode
 	overview: true,
 
+	// Vertical centering of slides
+	center: true,
+
 	// Loop the presentation
 	loop: false,
 
-	// Number of milliseconds between automatically proceeding to the 
+	// Change the presentation direction to be RTL
+	rtl: false,
+
+	// Number of milliseconds between automatically proceeding to the
 	// next slide, disabled when set to 0, this value can be overwritten
 	// by using a data-autoslide attribute on your slides
 	autoSlide: 0,
 
 	// Enable slide navigation via mouse wheel
-	mouseWheel: true,
+	mouseWheel: false,
 
 	// Apply a 3D roll to links on hover
 	rollingLinks: true,
 
 	// Transition style
-	transition: 'default' // default/cube/page/concave/zoom/linear/none
+	transition: 'default', // default/cube/page/concave/zoom/linear/fade/none
+
+	// Transition speed
+	transitionSpeed: 'default', // default/fast/slow
+
 });
 ```
 
+Note that the new default vertical centering option will break compatibility with slides that were using transitions with backgrounds (`cube` and `page`). To restore the previous behavior, set `center` to `false`.
+
+
+The configuration can be updated after initialization using the ```configure``` method:
+
+```javascript
+// Turn autoSlide off
+Reveal.configure({ autoSlide: 0 });
+
+// Start auto-sliding every 5s
+Reveal.configure({ autoSlide: 5000 });
+```
+
+
+### Presentation Size
+
+All presentations have a normal size, that is the resolution at which they are authored. The framework will automatically scale presentations uniformly based on this size to ensure that everything fits on any given display or viewport.
+
+See below for a list of configuration options related to sizing, including default values:
+
+```javascript
+Reveal.initialize({
+
+	...
+
+	// The "normal" size of the presentation, aspect ratio will be preserved
+	// when the presentation is scaled to fit different resolutions. Can be
+	// specified using percentage units.
+	width: 960,
+	height: 700,
+
+	// Factor of the display size that should remain empty around the content
+	margin: 0.1,
+
+	// Bounds for smallest/largest possible scale to apply to content
+	minScale: 0.2,
+	maxScale: 1.0
+
+});
+```
+
+
 ### Dependencies
 
 Reveal.js doesn't _rely_ on any third party scripts to work but a few optional libraries are included by default. These libraries are loaded as dependencies in the order they appear, for example:
@@ -99,15 +160,22 @@ Reveal.initialize({
 	dependencies: [
 		// Cross-browser shim that fully implements classList - https://github.com/eligrey/classList.js/
 		{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
+
 		// Interpret Markdown in <section> elements
-		{ src: 'plugin/markdown/showdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
+		{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
 		{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
+
 		// Syntax highlight for <code> elements
 		{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
+
 		// Zoom in and out with Alt+click
 		{ src: 'plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
+
 		// Speaker notes
-		{ src: 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }
+		{ src: 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } },
+
+		// Remote control your reveal.js presentation using a touch device
+		{ src: 'plugin/remotes/remotes.js', async: true, condition: function() { return !!document.body.classList; } }
 	]
 });
 ```
@@ -121,11 +189,11 @@ You can add your own extensions using the same syntax. The following properties
 
 ### API
 
-The Reveal class provides a minimal JavaScript API for controlling navigation and reading state:
+The ``Reveal`` class provides a minimal JavaScript API for controlling navigation and reading state:
 
 ```javascript
 // Navigation
-Reveal.slide( indexh, indexv );
+Reveal.slide( indexh, indexv, indexf );
 Reveal.left();
 Reveal.right();
 Reveal.up();
@@ -169,6 +237,8 @@ Reveal.addEventListener( 'ready', function( event ) {
 
 An 'slidechanged' event is fired each time the slide is changed (regardless of state). The event object holds the index values of the current slide as well as a reference to the previous and current slide HTML nodes.
 
+Some libraries, like MathJax (see [#226](https://github.com/hakimel/reveal.js/issues/226#issuecomment-10261609)), get confused by the transforms and display states of slides. Often times, this can be fixed by calling their update or render function from this callback.
+
 ```javascript
 Reveal.addEventListener( 'slidechanged', function( event ) {
 	// event.previousSlide, event.currentSlide, event.indexh, event.indexv
@@ -183,8 +253,33 @@ It's easy to link between slides. The first example below targets the index of a
 <a href="#/2/2">Link</a>
 <a href="#/some-slide">Link</a>
 ```
-### Fullscreen mode
-Just press »F« on your keyboard to show your presentation in fullscreen mode. Press the »ESC« key to exit fullscreen mode.
+
+You can also add relative navigation links, similar to the built in reveal.js controls, by appending one of the following classes on any element. Note that each element is automatically given an ```enabled``` class when it's a valid navigation route based on the current slide.
+
+```html
+<a href="#" class="navigate-left">
+<a href="#" class="navigate-right">
+<a href="#" class="navigate-up">
+<a href="#" class="navigate-down">
+<a href="#" class="navigate-prev"> <!-- Previous vertical or horizontal slide -->
+<a href="#" class="navigate-next"> <!-- Next vertical or horizontal slide -->
+```
+
+### Alternating transitions
+The global presentation transition is set using the ```transition``` config value. You can override the global transition for a specific slide by using the ```data-transition``` attribute:
+
+```html
+<section data-transition="zoom">
+	<h2>This slide will override the presentation transition and zoom!</h2>
+</section>
+
+<section data-transition-speed="fast">
+	<h2>Choose from three transition speeds: default, fast or slow!</h2>
+</section>
+```
+
+Note that this does not work with the page and cube transitions.
+
 
 ### Fragments
 Fragments are used to highlight individual elements on a slide. Every elmement with the class ```fragment``` will be stepped through before moving on to the next slide. Here's an example: http://lab.hakim.se/reveal-js/#/16
@@ -203,6 +298,26 @@ The default fragment style is to start out invisible and fade in. This style can
 </section>
 ```
 
+Multiple fragments can be applied to the same element sequentially by wrapping it, this will fade in the text on the first step and fade it back out on the second.
+
+```html
+<section>
+	<span class="fragment fade-in">
+		<span class="fragment fade-out">I'll fade in, then out</span>
+	</span>
+</section>
+```
+
+The display order of fragments can be controlled using the ```data-fragment-index``` attribute.
+
+```html
+<section>
+	<p class="fragment" data-fragment-index="3">Appears last</p>
+	<p class="fragment" data-fragment-index="1">Appears first</p>
+	<p class="fragment" data-fragment-index="2">Appears second</p>
+</section>
+```
+
 ### Fragment events
 
 When a slide fragment is either shown or hidden reveal.js will dispatch an event.
@@ -216,10 +331,53 @@ Reveal.addEventListener( 'fragmenthidden', function( event ) {
 } );
 ```
 
+### Code syntax highlighting
+
+By default, Reveal is configured with [highlight.js](http://softwaremaniacs.org/soft/highlight/en/) for code syntax highlighting. Below is an example with clojure code that will be syntax highlighted. When the `data-trim` attribute is present surrounding whitespace is automatically removed.
+
+```html
+<section>
+	<pre><code data-trim>
+(def lazy-fib
+  (concat
+   [0 1]
+   ((fn rfib [a b]
+        (lazy-cons (+ a b) (rfib b (+ a b)))) 0 1)))
+	</code></pre>
+</section>
+```
+
+
+### Overview mode
+
+Press "Esc" key to toggle the overview mode on and off. While you're in this mode, you can still navigate between slides,
+as if you were at 1,000 feet above your presentation. The overview mode comes with a few API hooks:
+
+```javascript
+Reveal.addEventListener( 'overviewshown', function( event ) { /* ... */ } );
+Reveal.addEventListener( 'overviewhidden', function( event ) { /* ... */ } );
+
+// Toggle the overview mode programmatically
+Reveal.toggleOverview();
+```
+
+### Fullscreen mode
+Just press »F« on your keyboard to show your presentation in fullscreen mode. Press the »ESC« key to exit fullscreen mode.
+
+
+### Embedded media
+Embedded HTML5 `<video>`/`<audio>` and YouTube iframes are automatically paused when your navigate away from a slide. This can be disabled by decorating your element with a `data-ignore` attribute.
+
+Add `data-autoplay` to your media element if you want it to automatically start playing when the slide is shown:
+
+```html
+<video data-autoplay src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
+```
+
 
 ## PDF Export
 
-Presentations can be exported to PDF via a special print stylesheet. This feature requires that you use [Google Chrome](http://google.com/chrome). 
+Presentations can be exported to PDF via a special print stylesheet. This feature requires that you use [Google Chrome](http://google.com/chrome).
 Here's an example of an exported presentation that's been uploaded to SlideShare: http://www.slideshare.net/hakimel/revealjs-13872948.
 
 1. Open your presentation with [css/print/pdf.css](https://github.com/hakimel/reveal.js/blob/master/css/print/pdf.css) included on the page. The default index HTML lets you add *print-pdf* anywhere in the query to include the stylesheet, for example: [lab.hakim.se/reveal-js?print-pdf](http://lab.hakim.se/reveal-js?print-pdf).
@@ -231,10 +389,29 @@ Here's an example of an exported presentation that's been uploaded to SlideShare
 
 ![Chrome Print Settings](https://s3.amazonaws.com/hakim-static/reveal-js/pdf-print-settings.png)
 
+## Theming
+
+The framework comes with a few different themes included:
+
+- default: Gray background, white text, blue links
+- beige: Beige background, dark text, brown links
+- sky: Blue background, thin white text, blue links
+- night: Black background, thick white text, orange links
+- serif: Cappuccino background, gray text, brown links
+- simple: White background, black 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:
+
+```html
+<link rel="stylesheet" href="css/theme/default.css" id="theme">
+```
+
+If you want to add a theme of your own see the instructions here: [/css/theme/README.md](https://github.com/hakimel/reveal.js/blob/master/css/theme/README.md).
+
 
 ## Speaker Notes
 
-reveal.js comes with a speaker notes plugin which can be used to present per-slide notes in a separate browser window. The notes window also gives you a preview of the next upcoming slide so it may be helpful even if you haven't written any notes. Append ```?notes``` to presentation URL or press the 's' key on your keyboard to open the notes window.
+reveal.js comes with a speaker notes plugin which can be used to present per-slide notes in a separate browser window. The notes window also gives you a preview of the next upcoming slide so it may be helpful even if you haven't written any notes. Press the 's' key on your keyboard to open the notes window.
 
 By default notes are written using standard HTML, see below, but you can add a ```data-markdown``` attribute to the ```<aside>``` to write them using Markdown.
 
@@ -248,13 +425,19 @@ By default notes are written using standard HTML, see below, but you can add a `
 </section>
 ```
 
-## Server Side Speaker Nodes
+## Server Side Speaker Notes
 
-In some cases it can be desirable to run notes on a separate device from the one you're presenting on. The Node.js-based notes plugin lets you do this using the same note definitions as its client side counterpart. Include the requried scripts by adding the following dependencies:
+In some cases it can be desirable to run notes on a separate device from the one you're presenting on. The Node.js-based notes plugin lets you do this using the same note definitions as its client side counterpart. Include the required scripts by adding the following dependencies:
 
-```
-{ src: '/socket.io/socket.io.js', async: true },
-{ src: 'plugin/notes-server/client.js', async: true }
+```javascript
+Reveal.initialize({
+	...
+
+	dependencies: [
+		{ src: 'socket.io/socket.io.js', async: true },
+		{ src: 'plugin/notes-server/client.js', async: true }
+	]
+});
 ```
 
 Then:
@@ -264,15 +447,188 @@ Then:
 3. Run ```node plugin/notes-server```
 
 
-## Folder Structure
+## Multiplexing
+
+The multiplex plugin allows your audience to view the slides of the presentation you are controlling on their own phone, tablet or laptop. As the master presentation navigates the slides, all client presentations will update in real time. See a demo at [http://revealjs.jit.su/](http://revealjs.jit.su).
+
+The multiplex plugin needs the following 3 things to operate:
+
+1. Master presentation that has control
+2. Client presentations that follow the master
+3. Socket.io server to broadcast events from the master to the clients
+
+More details:
+
+#### Master presentation
+Served from a static file server accessible (preferably) only to the presenter. This need only be on your (the presenter's) computer. (It's safer to run the master presentation from your own computer, so if the venue's Internet goes down it doesn't stop the show.) An example would be to execute the following commands in the directory of your master presentation: 
+
+1. ```npm install node-static```
+2. ```static```
+
+If you want to use the speaker notes plugin with you master presentation then make sure you have the speaker notes plugin configured correctly along with the configuration shown below, then execute ```node plugin/notes-server``` in the directory of your master presentation. The configuration below will cause it to connect to the socket.io server as a master, as well as launch your speaker-notes/static-file server.
+
+You can then access your master presentation at ```http://localhost:1947```
+
+Example configuration:
+```javascript
+Reveal.initialize({
+	// other options
+
+	multiplex: {
+		// Example values. Generate your own.
+		secret: '13652805320794272084', // Obtained from the socket.io server. Gives this (the master) control of the presentation
+		id: '1ea875674b17ca76', // Obtained from socket.io server
+		url: 'revealjs.jit.su:80' // Location of socket.io server
+	},
+
+	// Optional libraries used to extend on reveal.js
+	dependencies: [
+		// other deps
+		{ src: '//cdnjs.cloudflare.com/ajax/libs/socket.io/0.9.10/socket.io.min.js', async: true },
+		{ src: 'plugin/multiplex/master.js', async: true },
+
+		// and if you want speaker notes
+		{ src: 'plugin/notes-server/client.js', async: true }
+	]
+});
+```
+
+#### Client presentation
+Served from a publicly accessible static file server. Examples include: GitHub Pages, Amazon S3, Dreamhost, Akamai, etc. The more reliable, the better. Your audience can then access the client presentation via ```http://example.com/path/to/presentation/client/index.html```, with the configuration below causing them to connect to the socket.io server as clients.
+
+Example configuration:
+```javascript
+Reveal.initialize({
+	// other options
+
+	multiplex: {
+		// Example values. Generate your own.
+		secret: null, // null so the clients do not have control of the master presentation
+		id: '1ea875674b17ca76', // id, obtained from socket.io server
+		url: 'revealjs.jit.su:80' // Location of socket.io server
+	},
+
+	// Optional libraries used to extend on reveal.js
+	dependencies: [
+		// other deps
+		{ src: '//cdnjs.cloudflare.com/ajax/libs/socket.io/0.9.10/socket.io.min.js', async: true },
+		{ src: 'plugin/multiplex/client.js', async: true }
+	]
+});
+```
+
+#### Socket.io server
+Server that receives the slideChanged events from the master presentation and broadcasts them out to the connected client presentations. This needs to be publicly accessible. You can run your own socket.io server with the commands:
+
+1. ```npm install```
+2. ```node plugin/multiplex```
+
+Or you use the socket.io server at [http://revealjs.jit.su](http://revealjs.jit.su).
+
+You'll need to generate a unique secret and token pair for your master and client presentations. To do so, visit ```http://example.com/token```, where ```http://example.com``` is the location of your socket.io server. Or if you're going to use the socket.io server at [http://revealjs.jit.su](http://revealjs.jit.su), visit [http://revealjs.jit.su/token](http://revealjs.jit.su/token).
+
+You are very welcome to point your presentations at the Socket.io server running at [http://revealjs.jit.su](http://revealjs.jit.su), but availability and stability are not guaranteed. For anything mission critical I recommend you run your own server. It is simple to deploy to nodejitsu, heroku, your own environment, etc.
+
+##### socket.io server as file static server
+
+The socket.io server can play the role of static file server for your client presentation, as in the example at [http://revealjs.jit.su](http://revealjs.jit.su). (Open [http://revealjs.jit.su](http://revealjs.jit.su) in two browsers. Navigate through the slides on one, and the other will update to match.) 
+
+Example configuration:
+```javascript
+Reveal.initialize({
+	// other options
+
+	multiplex: {
+		// Example values. Generate your own.
+		secret: null, // null so the clients do not have control of the master presentation
+		id: '1ea875674b17ca76', // id, obtained from socket.io server
+		url: 'example.com:80' // Location of your socket.io server
+	},
+
+	// Optional libraries used to extend on reveal.js
+	dependencies: [
+		// other deps
+		{ src: '//cdnjs.cloudflare.com/ajax/libs/socket.io/0.9.10/socket.io.min.js', async: true },
+		{ src: 'plugin/multiplex/client.js', async: true }
+	]
+```
+
+It can also play the role of static file server for your master presentation and client presentations at the same time (as long as you don't want to use speaker notes). (Open [http://revealjs.jit.su](http://revealjs.jit.su) in two browsers. Navigate through the slides on one, and the other will update to match. Navigate through the slides on the second, and the first will update to match.) This is probably not desirable, because you don't want your audience to mess with your slides while you're presenting. ;)
+
+Example configuration:
+```javascript
+Reveal.initialize({
+	// other options
+
+	multiplex: {
+		// Example values. Generate your own.
+		secret: '13652805320794272084', // Obtained from the socket.io server. Gives this (the master) control of the presentation
+		id: '1ea875674b17ca76', // Obtained from socket.io server
+		url: 'example.com:80' // Location of your socket.io server
+	},
+
+	// Optional libraries used to extend on reveal.js
+	dependencies: [
+		// other deps
+		{ src: '//cdnjs.cloudflare.com/ajax/libs/socket.io/0.9.10/socket.io.min.js', async: true },
+		{ src: 'plugin/multiplex/master.js', async: true },
+		{ src: 'plugin/multiplex/client.js', async: true }
+	]
+});
+```
+
+## Installation
+
+The **basic setup** is for authoring presentations only. The **full setup** gives you access to all reveal.js features as well as the development tasks needed to make changes to the source.
+
+### Basic setup
+
+The core of reveal.js is very easy to install. You'll simply need to download a copy of this repository and open the index.html file directly in your browser.g
+
+1. Download a copy of reveal.js from <https://github.com/hakimel/reveal.js/archive/master.zip>
+
+2. Unizp and replace the example contents in index.html with your own
+
+3. Open index.html in a browser to view it
+
+
+### Full setup
+
+Some reveal.js features, like external markdown, require that presentations run from a local web server. The following instructions will set up such a server as well as all of the development tasks needed to make edits to the reveal.js source code.
+
+1. Install [Node.js](http://nodejs.org/)
+
+2. Install [Grunt](http://gruntjs.com/getting-started#installing-the-cli)
+
+4. Clone the reveal.js repository  
+```
+$ git clone git@github.com:hakimel/reveal.js.git
+```
+
+5. Install dependencies  
+```
+$ npm install
+```
+
+6. Serve the presentation and monitor source files for changes  
+```
+$ grunt serve
+```
+
+7. Open <http://localhost:8000> to view your presentation
+
+
+### Folder Structure
 - **css/** Core styles without which the project does not function
 - **js/** Like above but for JavaScript
 - **plugin/** Components that have been developed as extensions to reveal.js
 - **lib/** All other third party assets (JavaScript, CSS, fonts)
 
+
+
 ## License
 
 MIT licensed
 
-Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
+Copyright (C) 2013 Hakim El Hattab, http://hakim.se
 

css/print/paper.css

@@ -2,12 +2,12 @@
    by Rob Glazebrook of CSSnewbie.com
    Last Updated: June 4, 2008
 
-   Feel free (nay, compelled) to edit, append, and 
+   Feel free (nay, compelled) to edit, append, and
    manipulate this file as you see fit. */
 
 
 /* SECTION 1: Set default width, margin, float, and
-   background. This prevents elements from extending 
+   background. This prevents elements from extending
    beyond the edge of the printed page, and prevents
    unnecessary background images from printing */
 body {
@@ -28,11 +28,11 @@ html {
 	overflow: visible;
 }
 
-/* SECTION 2: Remove any elements not needed in print. 
+/* SECTION 2: Remove any elements not needed in print.
    This would include navigation, ads, sidebars, etc. */
-.nestedarrow, 
-.controls, 
-.reveal .progress, 
+.nestedarrow,
+.controls,
+.reveal .progress,
 .reveal.overview,
 .fork-reveal,
 .share-reveal,
@@ -45,7 +45,7 @@ html {
 body, p, td, li, div, a {
 	font-size: 16pt!important;
 	font-family: Georgia, "Times New Roman", Times, serif !important;
-	color: #000; 
+	color: #000;
 }
 
 /* SECTION 4: Set heading font face, sizes, and color.
@@ -71,14 +71,14 @@ h6 { font-size: 18pt !important; font-style: italic; }
 /* SECTION 5: Make hyperlinks more usable.
    Ensure links are underlined, and consider appending
    the URL to the end of the link for usability. */
-a:link, 
+a:link,
 a:visited {
 	color: #000 !important;
 	font-weight: bold;
 	text-decoration: underline;
 }
 /*
-.reveal a:link:after, 
+.reveal a:link:after,
 .reveal a:visited:after {
 	content: " (" attr(href) ") ";
 	color: #222 !important;
@@ -123,9 +123,9 @@ ul, ol, div, p {
 	    -ms-perspective-origin: 50% 50%;
 	        perspective-origin: 50% 50%;
 }
-.reveal .slides>section, 
+.reveal .slides>section,
 .reveal .slides>section>section {
-	
+
 	visibility: visible !important;
 	position: static !important;
 	width: 90% !important;
@@ -152,17 +152,20 @@ ul, ol, div, p {
 	        transform: none !important;
 }
 .reveal section {
-	page-break-after: always !important; 
+	page-break-after: always !important;
 	display: block !important;
 }
-.reveal section.stack {
-	page-break-after: avoid !important; 
-}
 .reveal section .fragment {
 	opacity: 1 !important;
+	visibility: visible !important;
+
+	-webkit-transform: none !important;
+	   -moz-transform: none !important;
+	    -ms-transform: none !important;
+	        transform: none !important;
 }
 .reveal section:last-of-type {
-	page-break-after: avoid !important; 
+	page-break-after: avoid !important;
 }
 .reveal section img {
 	display: block;

css/print/pdf.css

@@ -2,16 +2,17 @@
    by Rob Glazebrook of CSSnewbie.com
    Last Updated: June 4, 2008
 
-   Feel free (nay, compelled) to edit, append, and 
+   Feel free (nay, compelled) to edit, append, and
    manipulate this file as you see fit. */
 
 
 /* SECTION 1: Set default width, margin, float, and
-   background. This prevents elements from extending 
+   background. This prevents elements from extending
    beyond the edge of the printed page, and prevents
    unnecessary background images from printing */
+
 * {
-	-webkit-print-color-adjust: exact; 
+	-webkit-print-color-adjust: exact;
 }
 
 body {
@@ -19,24 +20,27 @@ body {
 	width: auto;
 	height: auto;
 	border: 0;
-	margin: 0 5%;
 	padding: 0;
 	float: none !important;
 	overflow: visible;
-	background-image: none;
 }
 
 html {
-	width: auto;
-	height: auto;
+	width: 100%;
+	height: 100%;
 	overflow: visible;
 }
 
-/* SECTION 2: Remove any elements not needed in print. 
+@page {
+	size: letter landscape;
+	margin: 0;
+}
+
+/* SECTION 2: Remove any elements not needed in print.
    This would include navigation, ads, sidebars, etc. */
-.nestedarrow, 
-.controls, 
-.reveal .progress, 
+.nestedarrow,
+.controls,
+.reveal .progress,
 .reveal.overview,
 .fork-reveal,
 .share-reveal,
@@ -60,7 +64,7 @@ h1,h2,h3,h4,h5,h6 {
 /* SECTION 5: Make hyperlinks more usable.
    Ensure links are underlined, and consider appending
    the URL to the end of the link for usability. */
-a:link, 
+a:link,
 a:visited {
 	font-weight: bold;
 	text-decoration: underline;
@@ -85,6 +89,7 @@ ul, ol, div, p {
 	left: auto;
 	top: auto;
 	margin-left: auto;
+	margin-right: auto;
 	margin-top: auto;
 	padding: auto;
 
@@ -92,6 +97,7 @@ ul, ol, div, p {
 	display: block;
 
 	text-align: center;
+
 	-webkit-perspective: none;
 	   -moz-perspective: none;
 	    -ms-perspective: none;
@@ -102,8 +108,10 @@ ul, ol, div, p {
 	    -ms-perspective-origin: 50% 50%;
 	        perspective-origin: 50% 50%;
 }
-.reveal .slides>section, .reveal .slides>section>section {
-	
+.reveal .slides section {
+
+	page-break-after: always !important;
+
 	visibility: visible !important;
 	position: static !important;
 	width: 100% !important;
@@ -112,8 +120,8 @@ ul, ol, div, p {
 	display: block !important;
 	overflow: visible !important;
 
-	left: 0% !important;
-	top: 0% !important;
+	left: 0 !important;
+	top: 0 !important;
 	margin-left: 0px !important;
 	margin-top: 50px !important;
 	padding: 20px 0px !important;
@@ -130,17 +138,19 @@ ul, ol, div, p {
 	    -ms-transform: none !important;
 	        transform: none !important;
 }
-.reveal section {
-	page-break-after: always !important; 
-	display: block !important;
-}
 .reveal section.stack {
 	margin: 0px !important;
 	padding: 0px !important;
-	page-break-after: avoid !important; 
+	page-break-after: avoid !important;
 }
 .reveal section .fragment {
 	opacity: 1 !important;
+	visibility: visible !important;
+
+	-webkit-transform: none !important;
+	   -moz-transform: none !important;
+	    -ms-transform: none !important;
+	        transform: none !important;
 }
 .reveal img {
 	box-shadow: none;
@@ -149,11 +159,6 @@ ul, ol, div, p {
 	overflow: visible;
 	line-height: 1em;
 }
-
 .reveal small a {
 	font-size: 16pt !important;
 }
-
-pre {
-    font-size: 9pt !important;
-}

css/reveal.css

@@ -5,7 +5,7 @@
  * http://lab.hakim.se/reveal-js
  * MIT licensed
  *
- * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
+ * Copyright (C) 2013 Hakim El Hattab, http://hakim.se
  */
 
 
@@ -48,7 +48,6 @@ html,
 body {
 	width: 100%;
 	height: 100%;
-	min-height: 600px;
 	overflow: hidden;
 }
 
@@ -58,21 +57,29 @@ body {
 }
 
 ::selection {
-	background:#FF5E99;
-	color:#fff;
+	background: #FF5E99;
+	color: #fff;
 	text-shadow: none;
 }
 
-@media screen and (max-width: 900px) {
-	.reveal {
-		font-size: 30px;
-	}
-}
 
 /*********************************************
  * HEADERS
  *********************************************/
 
+.reveal h1,
+.reveal h2,
+.reveal h3,
+.reveal h4,
+.reveal h5,
+.reveal h6 {
+	-webkit-hyphens: auto;
+	   -moz-hyphens: auto;
+	        hyphens: auto;
+
+	word-wrap: break-word;
+}
+
 .reveal h1 { font-size: 3.77em; }
 .reveal h2 { font-size: 2.11em;	}
 .reveal h3 { font-size: 1.55em;	}
@@ -118,6 +125,26 @@ body {
 		        transform: scale( 0.7 );
 	}
 
+.reveal .slides section .fragment.zoom-in {
+	opacity: 0;
+
+	-webkit-transform: scale( 0.1 );
+	   -moz-transform: scale( 0.1 );
+	    -ms-transform: scale( 0.1 );
+	     -o-transform: scale( 0.1 );
+	        transform: scale( 0.1 );
+}
+
+	.reveal .slides section .fragment.zoom-in.visible {
+		opacity: 1;
+
+		-webkit-transform: scale( 1 );
+		   -moz-transform: scale( 1 );
+		    -ms-transform: scale( 1 );
+		     -o-transform: scale( 1 );
+		        transform: scale( 1 );
+	}
+
 .reveal .slides section .fragment.roll-in {
 	opacity: 0;
 
@@ -164,15 +191,23 @@ body {
  * DEFAULT ELEMENT STYLES
  *********************************************/
 
-.reveal .slides section {
-	line-height: 1.2em;
-	font-weight: normal;
+/* Fixes issue in Chrome where italic fonts did not appear when printing to PDF */
+.reveal:after {
+  content: '';
+  font-style: italic;
 }
 
-.reveal img {
-	/* preserve aspect ratio and scale image so it's bound within the section */
-	max-width: 100%;
-	max-height: 100%;
+/* Ensure certain elements are never larger than the slide itself */
+.reveal img,
+.reveal video,
+.reveal iframe {
+	max-width: 95%;
+	max-height: 95%;
+}
+
+/** Prevents layering issues in certain browser/transition combinations */
+.reveal a {
+	position: relative;
 }
 
 .reveal strong,
@@ -238,22 +273,14 @@ body {
 	background: rgba(255, 255, 255, 0.05);
 	box-shadow: 0px 0px 2px rgba(0,0,0,0.2);
 }
-	.reveal blockquote:before {
-		content: '\201C';
-	}
-	.reveal blockquote:after {
-		content: '\201D';
+	.reveal blockquote p:first-child,
+	.reveal blockquote p:last-child {
+		display: inline-block;
 	}
 
 .reveal q {
 	font-style: italic;
 }
-	.reveal q:before {
-		content: '\201C';
-	}
-	.reveal q:after {
-		content: '\201D';
-	}
 
 .reveal pre {
 	display: block;
@@ -270,14 +297,14 @@ body {
 
 	box-shadow: 0px 0px 6px rgba(0,0,0,0.3);
 }
-.reveal pre code {
-	padding: 5px;
-}
-
 .reveal code {
 	font-family: monospace;
+}
+.reveal pre code {
+	padding: 5px;
 	overflow: auto;
 	max-height: 400px;
+	word-wrap: normal;
 }
 
 .reveal table th,
@@ -325,20 +352,22 @@ body {
 
 .reveal .controls div {
 	position: absolute;
-	opacity: 0.1;
-	width: 0; 
-	height: 0; 
+	opacity: 0.05;
+	width: 0;
+	height: 0;
 	border: 12px solid transparent;
 
-	-webkit-transition: opacity 0.2s ease;
-	   -moz-transition: opacity 0.2s ease;
-	    -ms-transition: opacity 0.2s ease;
-	     -o-transition: opacity 0.2s ease;
-	        transition: opacity 0.2s ease;
+	-moz-transform: scale(.9999);
+
+	-webkit-transition: all 0.2s ease;
+	   -moz-transition: all 0.2s ease;
+	    -ms-transition: all 0.2s ease;
+	     -o-transition: all 0.2s ease;
+	        transition: all 0.2s ease;
 }
 
 .reveal .controls div.enabled {
-	opacity: 0.6;
+	opacity: 0.7;
 	cursor: pointer;
 }
 
@@ -346,35 +375,47 @@ body {
 	margin-top: 1px;
 }
 
-.reveal .controls div.left {
-	top: 42px;
+	.reveal .controls div.navigate-left {
+		top: 42px;
 
-	border-right-width: 22px;
-	border-right-color: #eee;
-}
+		border-right-width: 22px;
+		border-right-color: #eee;
+	}
+		.reveal .controls div.navigate-left.fragmented {
+			opacity: 0.3;
+		}
 
-.reveal .controls div.right {
-	left: 74px;
-	top: 42px;
+	.reveal .controls div.navigate-right {
+		left: 74px;
+		top: 42px;
 
-	border-left-width: 22px;
-	border-left-color: #eee;
-}
+		border-left-width: 22px;
+		border-left-color: #eee;
+	}
+		.reveal .controls div.navigate-right.fragmented {
+			opacity: 0.3;
+		}
 
-.reveal .controls div.up {
-	left: 42px;
+	.reveal .controls div.navigate-up {
+		left: 42px;
 
-	border-bottom-width: 22px;
-	border-bottom-color: #eee;
-}
+		border-bottom-width: 22px;
+		border-bottom-color: #eee;
+	}
+		.reveal .controls div.navigate-up.fragmented {
+			opacity: 0.3;
+		}
 
-.reveal .controls div.down {
-	left: 42px;
-	top: 74px;
+	.reveal .controls div.navigate-down {
+		left: 42px;
+		top: 74px;
 
-	border-top-width: 22px;
-	border-top-color: #eee;
-}
+		border-top-width: 22px;
+		border-top-color: #eee;
+	}
+		.reveal .controls div.navigate-down.fragmented {
+			opacity: 0.3;
+		}
 
 
 /*********************************************
@@ -479,6 +520,10 @@ body {
 	top: 0;
 	padding: 0 2px;
 
+	-webkit-backface-visibility: hidden;
+	   -moz-backface-visibility: hidden;
+	        backface-visibility: hidden;
+
 	-webkit-transform-origin: 50% 0%;
 	   -moz-transform-origin: 50% 0%;
 	    -ms-transform-origin: 50% 0%;
@@ -495,18 +540,21 @@ body {
  * SLIDES
  *********************************************/
 
+.reveal {
+	position: relative;
+	width: 100%;
+	height: 100%;
+}
+
 .reveal .slides {
 	position: absolute;
-	max-width: 900px;
-	width: 80%;
-	height: 60%;
+	width: 100%;
+	height: 100%;
 	left: 50%;
 	top: 50%;
-	margin-top: -320px;
-	padding: 20px 0px;
+
 	overflow: visible;
 	z-index: 1;
-
 	text-align: center;
 
 	-webkit-transition: -webkit-perspective .4s ease;
@@ -520,10 +568,10 @@ body {
 	    -ms-perspective: 600px;
 	        perspective: 600px;
 
-	-webkit-perspective-origin: 0% 25%;
-	   -moz-perspective-origin: 0% 25%;
-	    -ms-perspective-origin: 0% 25%;
-	        perspective-origin: 0% 25%;
+	-webkit-perspective-origin: 0px -100px;
+	   -moz-perspective-origin: 0px -100px;
+	    -ms-perspective-origin: 0px -100px;
+	        perspective-origin: 0px -100px;
 }
 
 .reveal .slides>section,
@@ -531,37 +579,97 @@ body {
 	display: none;
 	position: absolute;
 	width: 100%;
-	min-height: 600px;
+	padding: 20px 0px;
 
 	z-index: 10;
+	line-height: 1.2em;
+	font-weight: normal;
 
 	-webkit-transform-style: preserve-3d;
 	   -moz-transform-style: preserve-3d;
 	    -ms-transform-style: preserve-3d;
 	        transform-style: preserve-3d;
 
-	-webkit-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-	   -moz-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-	    -ms-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-	     -o-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-	        transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+	-webkit-transition: -webkit-transform-origin 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
+						-webkit-transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
+						visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
+						opacity 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+	   -moz-transition: -moz-transform-origin 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
+						-moz-transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
+						visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
+						opacity 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+	    -ms-transition: -ms-transform-origin 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
+						-ms-transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
+						visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
+						opacity 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+	     -o-transition: -o-transform-origin 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
+						-o-transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
+						visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
+						opacity 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+	        transition: transform-origin 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
+						transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
+						visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
+						opacity 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
 }
 
-.reveal .slides>section.present {
+/* Global transition speed settings */
+.reveal[data-transition-speed="fast"] .slides section {
+	-webkit-transition-duration: 400ms;
+	   -moz-transition-duration: 400ms;
+	    -ms-transition-duration: 400ms;
+	        transition-duration: 400ms;
+}
+.reveal[data-transition-speed="slow"] .slides section {
+	-webkit-transition-duration: 1200ms;
+	   -moz-transition-duration: 1200ms;
+	    -ms-transition-duration: 1200ms;
+	        transition-duration: 1200ms;
+}
+
+/* Slide-specific transition speed overrides */
+.reveal .slides section[data-transition-speed="fast"] {
+	-webkit-transition-duration: 400ms;
+	   -moz-transition-duration: 400ms;
+	    -ms-transition-duration: 400ms;
+	        transition-duration: 400ms;
+}
+.reveal .slides section[data-transition-speed="slow"] {
+	-webkit-transition-duration: 1200ms;
+	   -moz-transition-duration: 1200ms;
+	    -ms-transition-duration: 1200ms;
+	        transition-duration: 1200ms;
+}
+
+.reveal .slides>section {
+	left: -50%;
+	top: -50%;
+}
+
+.reveal .slides>section.stack {
+	padding-top: 0;
+	padding-bottom: 0;
+}
+
+.reveal .slides>section.present,
+.reveal .slides>section>section.present {
 	display: block;
 	z-index: 11;
 	opacity: 1;
 }
 
-.reveal .slides>section {
-	margin-left: -50%;
+.reveal.center,
+.reveal.center .slides,
+.reveal.center .slides section {
+	min-height: auto !important;
 }
 
 
+
 /*********************************************
  * DEFAULT TRANSITION
  *********************************************/
 
+.reveal .slides>section[data-transition=default].past,
 .reveal .slides>section.past {
 	display: block;
 	opacity: 0;
@@ -571,6 +679,7 @@ body {
 	    -ms-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
 	        transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
 }
+.reveal .slides>section[data-transition=default].future,
 .reveal .slides>section.future {
 	display: block;
 	opacity: 0;
@@ -581,23 +690,25 @@ body {
 	        transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
 }
 
+.reveal .slides>section>section[data-transition=default].past,
 .reveal .slides>section>section.past {
 	display: block;
 	opacity: 0;
 
-	-webkit-transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0);
-	   -moz-transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0);
-	    -ms-transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0);
-	        transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0);
+	-webkit-transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0);
+	   -moz-transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0);
+	    -ms-transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0);
+	        transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0);
 }
+.reveal .slides>section>section[data-transition=default].future,
 .reveal .slides>section>section.future {
 	display: block;
 	opacity: 0;
 
-	-webkit-transform: translate3d(0, 50%, 0) rotateX(-70deg) translate3d(0, 50%, 0);
-	   -moz-transform: translate3d(0, 50%, 0) rotateX(-70deg) translate3d(0, 50%, 0);
-	    -ms-transform: translate3d(0, 50%, 0) rotateX(-70deg) translate3d(0, 50%, 0);
-	        transform: translate3d(0, 50%, 0) rotateX(-70deg) translate3d(0, 50%, 0);
+	-webkit-transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0);
+	   -moz-transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0);
+	    -ms-transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0);
+	        transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0);
 }
 
 
@@ -605,26 +716,30 @@ body {
  * CONCAVE TRANSITION
  *********************************************/
 
+.reveal .slides>section[data-transition=concave].past,
 .reveal.concave  .slides>section.past {
 	-webkit-transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
 	   -moz-transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
 	    -ms-transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
 	        transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
 }
-.reveal.concave  .slides>section.future {
+.reveal .slides>section[data-transition=concave].future,
+.reveal.concave .slides>section.future {
 	-webkit-transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
 	   -moz-transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
 	    -ms-transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
 	        transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
 }
 
-.reveal.concave  .slides>section>section.past {
+.reveal .slides>section>section[data-transition=concave].past,
+.reveal.concave .slides>section>section.past {
 	-webkit-transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
 	   -moz-transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
 	    -ms-transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
 	        transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
 }
-.reveal.concave  .slides>section>section.future {
+.reveal .slides>section>section[data-transition=concave].future,
+.reveal.concave .slides>section>section.future {
 	-webkit-transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
 	   -moz-transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
 	    -ms-transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
@@ -636,15 +751,7 @@ body {
  * ZOOM TRANSITION
  *********************************************/
 
-.reveal.zoom .slides>section,
-.reveal.zoom .slides>section>section {
-	-webkit-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-	   -moz-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-	    -ms-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-	     -o-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-	        transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-}
-
+.reveal .slides>section[data-transition=zoom].past,
 .reveal.zoom .slides>section.past {
 	opacity: 0;
 	visibility: hidden;
@@ -655,6 +762,7 @@ body {
 	     -o-transform: scale(16);
 	        transform: scale(16);
 }
+.reveal .slides>section[data-transition=zoom].future,
 .reveal.zoom .slides>section.future {
 	opacity: 0;
 	visibility: hidden;
@@ -666,6 +774,7 @@ body {
 	        transform: scale(0.2);
 }
 
+.reveal .slides>section>section[data-transition=zoom].past,
 .reveal.zoom .slides>section>section.past {
 	-webkit-transform: translate(0, -150%);
 	   -moz-transform: translate(0, -150%);
@@ -673,6 +782,7 @@ body {
 	     -o-transform: translate(0, -150%);
 	        transform: translate(0, -150%);
 }
+.reveal .slides>section>section[data-transition=zoom].future,
 .reveal.zoom .slides>section>section.future {
 	-webkit-transform: translate(0, 150%);
 	   -moz-transform: translate(0, 150%);
@@ -686,6 +796,14 @@ body {
  * LINEAR TRANSITION
  *********************************************/
 
+.reveal.linear section {
+	-webkit-backface-visibility: hidden;
+	   -moz-backface-visibility: hidden;
+	    -ms-backface-visibility: hidden;
+	        backface-visibility: hidden;
+}
+
+.reveal .slides>section[data-transition=linear].past,
 .reveal.linear .slides>section.past {
 	-webkit-transform: translate(-150%, 0);
 	   -moz-transform: translate(-150%, 0);
@@ -693,6 +811,7 @@ body {
 	     -o-transform: translate(-150%, 0);
 	        transform: translate(-150%, 0);
 }
+.reveal .slides>section[data-transition=linear].future,
 .reveal.linear .slides>section.future {
 	-webkit-transform: translate(150%, 0);
 	   -moz-transform: translate(150%, 0);
@@ -701,6 +820,7 @@ body {
 	        transform: translate(150%, 0);
 }
 
+.reveal .slides>section>section[data-transition=linear].past,
 .reveal.linear .slides>section>section.past {
 	-webkit-transform: translate(0, -150%);
 	   -moz-transform: translate(0, -150%);
@@ -708,6 +828,7 @@ body {
 	     -o-transform: translate(0, -150%);
 	        transform: translate(0, -150%);
 }
+.reveal .slides>section>section[data-transition=linear].future,
 .reveal.linear .slides>section>section.future {
 	-webkit-transform: translate(0, 150%);
 	   -moz-transform: translate(0, 150%);
@@ -722,11 +843,6 @@ body {
  *********************************************/
 
 .reveal.cube .slides {
-	-webkit-perspective-origin: 0% 25%;
-	   -moz-perspective-origin: 0% 25%;
-	    -ms-perspective-origin: 0% 25%;
-	        perspective-origin: 0% 25%;
-
 	-webkit-perspective: 1300px;
 	   -moz-perspective: 1300px;
 	    -ms-perspective: 1300px;
@@ -735,6 +851,7 @@ body {
 
 .reveal.cube .slides section {
 	padding: 30px;
+	min-height: 700px;
 
 	-webkit-backface-visibility: hidden;
 	   -moz-backface-visibility: hidden;
@@ -745,6 +862,9 @@ body {
 	   -moz-box-sizing: border-box;
 	        box-sizing: border-box;
 }
+	.reveal.center.cube .slides section {
+		min-height: auto;
+	}
 	.reveal.cube .slides section:not(.stack):before {
 		content: '';
 		position: absolute;
@@ -843,9 +963,9 @@ body {
 
 .reveal.page .slides {
 	-webkit-perspective-origin: 0% 50%;
- 	   -moz-perspective-origin: 0% 50%;
- 	    -ms-perspective-origin: 0% 50%;
- 	        perspective-origin: 0% 50%;
+	   -moz-perspective-origin: 0% 50%;
+	    -ms-perspective-origin: 0% 50%;
+	        perspective-origin: 0% 50%;
 
 	-webkit-perspective: 3000px;
 	   -moz-perspective: 3000px;
@@ -855,6 +975,7 @@ body {
 
 .reveal.page .slides section {
 	padding: 30px;
+	min-height: 700px;
 
 	-webkit-box-sizing: border-box;
 	   -moz-box-sizing: border-box;
@@ -951,52 +1072,35 @@ body {
 
 
 /*********************************************
- * TILE-FLIP TRANSITION (CSS shader)
+ * FADE TRANSITION
  *********************************************/
 
-.reveal.tileflip .slides section.present {
-	-webkit-transform: none;
-	-webkit-transition-duration: 800ms;
+.reveal .slides section[data-transition=fade],
+.reveal.fade .slides section,
+.reveal.fade .slides>section>section {
+    -webkit-transform: none;
+	   -moz-transform: none;
+	    -ms-transform: none;
+	     -o-transform: none;
+	        transform: none;
 
-	-webkit-filter: custom( url(shaders/tile-flip.vs) mix(url(shaders/tile-flip.fs) multiply source-atop), 10 10 border-box detached, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg),
-		amount 0, randomness 0, flipAxis 0 1 0, tileOutline 1
-	);
+	-webkit-transition: opacity 0.5s;
+	   -moz-transition: opacity 0.5s;
+	    -ms-transition: opacity 0.5s;
+	     -o-transition: opacity 0.5s;
+	        transition: opacity 0.5s;
 }
 
-.reveal.tileflip .slides section.past {
-	-webkit-transform: none;
-	-webkit-transition-duration: 800ms;
 
-	-webkit-filter: custom( url(shaders/tile-flip.vs) mix(url(shaders/tile-flip.fs) multiply source-atop), 10 10 border-box detached, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg),
-		amount 1, randomness 0, flipAxis 0 1 0, tileOutline 1
-	);
-}
-
-.reveal.tileflip .slides section.future {
-	-webkit-transform: none;
-	-webkit-transition-duration: 800ms;
-
-	-webkit-filter: custom( url(shaders/tile-flip.vs) mix(url(shaders/tile-flip.fs) multiply source-atop), 10 10 border-box detached, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg),
-		amount 1, randomness 0, flipAxis 0 1 0, tileOutline 1
-	);
-}
-
-.reveal.tileflip .slides>section>section.present {
-	-webkit-filter: custom( url(shaders/tile-flip.vs) mix(url(shaders/tile-flip.fs) multiply source-atop), 10 10 border-box detached, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg),
-		amount 0, randomness 2, flipAxis 1 0 0, tileOutline 1
-	);
-}
-
-.reveal.tileflip .slides>section>section.past {
-	-webkit-filter: custom( url(shaders/tile-flip.vs) mix(url(shaders/tile-flip.fs) multiply source-atop), 10 10 border-box detached, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg),
-		amount 1, randomness 2, flipAxis 1 0 0, tileOutline 1
-	);
-}
-
-.reveal.tileflip .slides>section>section.future {
-	-webkit-filter: custom( url(shaders/tile-flip.vs) mix(url(shaders/tile-flip.fs) multiply source-atop), 10 10 border-box detached, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg),
-		amount 1, randomness 2, flipAxis 1 0 0, tileOutline 1
-	);
+.reveal.fade.overview .slides section,
+.reveal.fade.overview .slides>section>section,
+.reveal.fade.exit-overview .slides section,
+.reveal.fade.exit-overview .slides>section>section {
+	-webkit-transition: none;
+	   -moz-transition: none;
+	    -ms-transition: none;
+	     -o-transition: none;
+	        transition: none;
 }
 
 
@@ -1004,6 +1108,7 @@ body {
  * NO TRANSITION
  *********************************************/
 
+.reveal .slides section[data-transition=none],
 .reveal.none .slides section {
 	-webkit-transform: none;
 	   -moz-transform: none;
@@ -1024,6 +1129,11 @@ body {
  *********************************************/
 
 .reveal.overview .slides {
+	-webkit-perspective-origin: 0% 0%;
+	   -moz-perspective-origin: 0% 0%;
+	    -ms-perspective-origin: 0% 0%;
+	        perspective-origin: 0% 0%;
+
 	-webkit-perspective: 700px;
 	   -moz-perspective: 700px;
 	    -ms-perspective: 700px;
@@ -1031,8 +1141,7 @@ body {
 }
 
 .reveal.overview .slides section {
-	padding: 20px 0;
-	max-height: 600px;
+	height: 600px;
 	overflow: hidden;
 	opacity: 1!important;
 	visibility: visible!important;
@@ -1053,13 +1162,12 @@ body {
 	.reveal.overview .slides section:hover {
 		background: rgba(0,0,0,0.3);
 	}
-
 	.reveal.overview .slides section.present {
 		background: rgba(0,0,0,0.3);
 	}
 .reveal.overview .slides>section.stack {
-	background: none;
 	padding: 0;
+	background: none;
 	overflow: visible;
 }
 
@@ -1099,20 +1207,50 @@ body {
 	overflow-y: auto;
 }
 
-.no-transforms .slides section {
-	display: block!important;
-	opacity: 1!important;
-	position: relative!important;
+.no-transforms .reveal .slides {
+	position: relative;
+	width: 80%;
+	height: auto !important;
+	top: 0;
+	left: 50%;
+	margin: 0;
+	text-align: center;
+}
+
+.no-transforms .reveal .controls,
+.no-transforms .reveal .progress {
+	display: none !important;
+}
+
+.no-transforms .reveal .slides section {
+	display: block !important;
+	opacity: 1 !important;
+	position: relative !important;
 	height: auto;
 	min-height: auto;
-	margin-bottom: 100px;
+	top: 0;
+	left: -50%;
+	margin: 70px 0;
 
 	-webkit-transform: none;
 	   -moz-transform: none;
 	    -ms-transform: none;
+	     -o-transform: none;
 	        transform: none;
 }
 
+.no-transforms .reveal .slides section section {
+	left: 0;
+}
+
+.no-transition {
+	-webkit-transition: none;
+	   -moz-transition: none;
+	    -ms-transition: none;
+	     -o-transition: none;
+	        transition: none;
+}
+
 
 /*********************************************
  * BACKGROUND STATES
@@ -1139,6 +1277,54 @@ body {
 .blackout .reveal .state-background {
 	background: rgba( 0, 0, 0, 0.6 );
 }
+.whiteout .reveal .state-background {
+	background: rgba( 255, 255, 255, 0.6 );
+}
+.cobalt .reveal .state-background {
+	background: rgba( 22, 152, 213, 0.6 );
+}
+.mint .reveal .state-background {
+	background: rgba( 22, 213, 75, 0.6 );
+}
+.submerge .reveal .state-background {
+	background: rgba( 12, 25, 77, 0.6);
+}
+.lila .reveal .state-background {
+	background: rgba( 180, 50, 140, 0.6 );
+}
+.sunset .reveal .state-background {
+	background: rgba( 255, 122, 0, 0.6 );
+}
+
+
+/*********************************************
+ * RTL SUPPORT
+ *********************************************/
+
+.reveal.rtl .slides,
+.reveal.rtl .slides h1,
+.reveal.rtl .slides h2,
+.reveal.rtl .slides h3,
+.reveal.rtl .slides h4,
+.reveal.rtl .slides h5,
+.reveal.rtl .slides h6 {
+	direction: rtl;
+	font-family: sans-serif;
+}
+
+.reveal.rtl pre,
+.reveal.rtl code {
+	direction: ltr;
+}
+
+.reveal.rtl ol,
+.reveal.rtl ul {
+	text-align: right;
+}
+
+.reveal.rtl .progress span {
+	float: right
+}
 
 
 /*********************************************

css/shaders/tile-flip.fs

@@ -1,64 +0,0 @@
-/*
- * Copyright (c) 2012 Adobe Systems Incorporated. All rights reserved.
- * Copyright (c) 2012 Branislav Ulicny
- * 
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *     http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-precision mediump float;
-
-// Uniform values from CSS
-
-uniform float amount;
-uniform float tileOutline;
-
-// Built-in uniforms
-
-uniform vec2 u_meshSize;
-uniform vec2 u_textureSize;
-
-// Varyings passed in from vertex shader
-
-varying float v_depth;
-varying vec2 v_uv;
-
-// Main
-
-void main()
-{
-	// FIXME: Must swap x and y as a workaround for: 
-	// https://bugs.webkit.org/show_bug.cgi?id=96285
-	vec2 u_meshSize = u_meshSize.yx;
-
-	vec4 c = vec4(1.0);
-
-	// Fade out.
-	c.a = 1.0 - v_depth;
-
-	// Show grid outline.
-	if (tileOutline >= 0.5) {
-		float cell_width = u_textureSize.x / u_meshSize.y;
-		float cell_height = u_textureSize.y / u_meshSize.x;
-		float dd = 1.0;
-
-		if (mod(v_uv.x * u_textureSize.x + dd, cell_width) < 2.0
-			|| mod(v_uv.y * u_textureSize.y + dd, cell_height) < 2.0) {
-			if (amount > 0.0)
-				c.rgb = vec3(1.0 - sqrt(amount));
-		}
-	}
-	css_ColorMatrix = mat4(c.r, 0.0, 0.0, 0.0,
-							0.0, c.g, 0.0, 0.0,
-							0.0, 0.0, c.b, 0.0,
-							0.0, 0.0, 0.0, c.a);
-}

css/shaders/tile-flip.vs

@@ -1,141 +0,0 @@
-/*
- * Copyright (c)2012 Adobe Systems Incorporated. All rights reserved.
- * Copyright (c)2012 Branislav Ulicny
- * 
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *     http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-precision mediump float;
-
-// Built-in attributes
-
-attribute vec4 a_position;
-attribute vec2 a_texCoord;
-attribute vec3 a_triangleCoord;
-
-// Built-in uniforms
-
-uniform mat4 u_projectionMatrix;
-uniform vec2 u_meshSize;
-uniform vec2 u_textureSize;
-
-// Uniform passed in from CSS
-
-uniform mat4 transform;
-uniform float amount;
-uniform float randomness;
-uniform vec3 flipAxis;
-
-// Varyings
-
-varying float v_depth;
-varying vec2 v_uv;
-
-// Constants
-
-const float PI2 = 1.5707963267948966;
-
-// Create perspective matrix
-
-mat4 perspectiveMatrix(float p)
-{
-    float perspective = - 1.0 / p;
-    return mat4(
-		1.0, 0.0, 0.0, 0.0,
-		0.0, 1.0, 0.0, 0.0,
-		0.0, 0.0, 1.0, perspective,
-		0.0, 0.0, 0.0, 1.0
-	);
-}
-
-// Rotate vector
-
-vec3 rotateVectorByQuaternion(vec3 v, vec4 q)
-{
-	vec3 dest = vec3(0.0);
-
-	float x = v.x, y  = v.y, z  = v.z;
-	float qx = q.x, qy = q.y, qz = q.z, qw = q.w;
-
-	// Calculate quaternion * vector.
-
-	float ix =  qw * x + qy * z - qz * y,
-		  iy =  qw * y + qz * x - qx * z,
-		  iz =  qw * z + qx * y - qy * x,
-		  iw = -qx * x - qy * y - qz * z;
-
-	// Calculate result * inverse quaternion.
-
-	dest.x = ix * qw + iw * -qx + iy * -qz - iz * -qy;
-	dest.y = iy * qw + iw * -qy + iz * -qx - ix * -qz;
-	dest.z = iz * qw + iw * -qz + ix * -qy - iy * -qx;
-
-	return dest;
-}
-
-// Convert rotation.
-
-vec4 axisAngleToQuaternion(vec3 axis, float angle)
-{
-	vec4 dest = vec4(0.0);
-
-	float halfAngle = angle / 2.0;
-	float s = sin(halfAngle);
-
-	dest.x = axis.x * s;
-	dest.y = axis.y * s;
-	dest.z = axis.z * s;
-	dest.w = cos(halfAngle);
-
-	return dest;
-}
-
-// Random function based on the tile coordinate.
-// This will return the same value for all the vertices in the same tile (i.e. two triangles).
-
-float random(vec2 scale)
-{
-    // Use the fragment position as a different seed per-pixel.
-    return fract(sin(dot(vec2(a_triangleCoord.x, a_triangleCoord.y), scale)) * 4000.0);
-}
-
-// Main
-
-void main()
-{
-	// FIXME: We must swap x and y as a workaround for: 
-	// https://bugs.webkit.org/show_bug.cgi?id=96285
-	vec2 u_meshSize = u_meshSize.yx;
-
-  	vec4 pos = a_position;
-	float aspect = u_textureSize.x / u_textureSize.y;
-
-	float cx = a_triangleCoord.x / u_meshSize.y - 0.5 + 0.5 / u_meshSize.y;
-	float cy = a_triangleCoord.y / u_meshSize.x - 0.5 + 0.5 / u_meshSize.x;
-
-	vec3 centroid = vec3(cx, cy, 0.0);
-	float r = random(vec2(10.0, 80.0));
-	float rr = mix(0.0, PI2, amount * (1.0 + randomness * r));
-
-	vec4 rotation = vec4(flipAxis, rr);
-	vec4 qRotation = axisAngleToQuaternion(normalize(rotation.xyz), rotation.w);
-
-	vec3 newPosition = rotateVectorByQuaternion((pos.xyz - centroid)* vec3(aspect, 1., 1.0), qRotation) * vec3(1.0 / aspect, 1.0, 1.0) + centroid;
-	pos.xyz = newPosition;
-
-	gl_Position = u_projectionMatrix * transform * pos;
-
-	// Pass varyings to the fragment shader.
-	v_depth = abs(rr)/ PI2;
-	v_uv = a_texCoord;
-}

css/theme/README.md

@@ -1,5 +1,23 @@
-Themes are written using Sass to keep things modular and reduce the need for repeated selectors across files. Find out how to install Sass here http://sass-lang.com/, once Sass is installed run the follwing command to start monitoring the source files for changes.
+## Dependencies
 
-```
-sass --watch css/theme/source/:css/theme --style expanded
-```
+Themes are written using Sass to keep things modular and reduce the need for repeated selectors across files. Make sure that you have the reveal.js development environment including the Grunt dependencies installed before proceding: https://github.com/hakimel/reveal.js#development-environment
+
+
+
+## Creating a Theme
+
+To create your own theme, start by duplicating any ```.scss``` file in [/css/theme/source](https://github.com/hakimel/reveal.js/blob/master/css/theme/source) and adding it to the compilation list in the [Gruntfile](https://github.com/hakimel/reveal.js/blob/master/Gruntfile.js).
+
+Each theme file does four things in the following order:
+
+1. **Include [/css/theme/template/mixins.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/mixins.scss)**
+Shared utility functions.
+
+2. **Include [/css/theme/template/settings.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/settings.scss)**
+Declares a set of custom variables that the template file (step 4) expects. Can be overridden in step 3.
+
+3. **Override**
+This is where you override the default theme. Either by specifying variables (see [settings.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/settings.scss) for reference) or by adding full selectors with hardcoded styles.
+
+4. **Include [/css/theme/template/theme.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/theme.scss)**
+The template theme file which will generate final CSS output based on the currently defined variables.

css/theme/beige.css

@@ -1,7 +1,7 @@
-@import url(http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
+@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
 /**
  * Beige theme for reveal.js.
- * 
+ *
  * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
  */
 @font-face {
@@ -9,8 +9,7 @@
   src: url("../../lib/font/league_gothic-webfont.eot");
   src: url("../../lib/font/league_gothic-webfont.eot?#iefix") format("embedded-opentype"), url("../../lib/font/league_gothic-webfont.woff") format("woff"), url("../../lib/font/league_gothic-webfont.ttf") format("truetype"), url("../../lib/font/league_gothic-webfont.svg#LeagueGothicRegular") format("svg");
   font-weight: normal;
-  font-style: normal;
-}
+  font-style: normal; }
 
 /*********************************************
  * GLOBAL STYLES
@@ -23,22 +22,19 @@ body {
   background: -o-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
   background: -ms-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
   background: radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
-  background-color: #f7f3de;
-}
+  background-color: #f7f3de; }
 
 .reveal {
-  font-family: "Lato", Times, "Times New Roman", serif;
+  font-family: "Lato", sans-serif;
   font-size: 36px;
   font-weight: 200;
   letter-spacing: -0.02em;
-  color: #333333;
-}
+  color: #333333; }
 
 ::selection {
   color: white;
   background: rgba(79, 64, 28, 0.99);
-  text-shadow: none;
-}
+  text-shadow: none; }
 
 /*********************************************
  * HEADERS
@@ -55,12 +51,10 @@ body {
   line-height: 0.9em;
   letter-spacing: 0.02em;
   text-transform: uppercase;
-  text-shadow: none;
-}
+  text-shadow: none; }
 
 .reveal h1 {
-  text-shadow: 0 1px 0 #cccccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbbbbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaaaaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 20px 20px rgba(0, 0, 0, 0.15);
-}
+  text-shadow: 0 1px 0 #cccccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbbbbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaaaaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 20px 20px rgba(0, 0, 0, 0.15); }
 
 /*********************************************
  * LINKS
@@ -72,25 +66,22 @@ body {
   -moz-transition: color .15s ease;
   -ms-transition: color .15s ease;
   -o-transition: color .15s ease;
-  transition: color .15s ease;
-}
+  transition: color .15s ease; }
 
 .reveal a:not(.image):hover {
   color: #c0a86e;
   text-shadow: none;
-  border: none;
-}
+  border: none; }
 
 .reveal .roll span:after {
   color: #fff;
-  background: #564826;
-}
+  background: #564826; }
 
 /*********************************************
  * IMAGES
  *********************************************/
 .reveal section img {
-  margin: 15px;
+  margin: 15px 0px;
   background: rgba(255, 255, 255, 0.12);
   border: 4px solid #333333;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
@@ -98,60 +89,49 @@ body {
   -moz-transition: all .2s linear;
   -ms-transition: all .2s linear;
   -o-transition: all .2s linear;
-  transition: all .2s linear;
-}
+  transition: all .2s linear; }
 
 .reveal a:hover img {
   background: rgba(255, 255, 255, 0.2);
   border-color: #8b743d;
-  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
-}
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
 
 /*********************************************
  * NAVIGATION CONTROLS
  *********************************************/
-.reveal .controls div.left,
-.reveal .controls div.left.enabled {
-  border-right-color: #8b743d;
-}
+.reveal .controls div.navigate-left,
+.reveal .controls div.navigate-left.enabled {
+  border-right-color: #8b743d; }
 
-.reveal .controls div.right,
-.reveal .controls div.right.enabled {
-  border-left-color: #8b743d;
-}
+.reveal .controls div.navigate-right,
+.reveal .controls div.navigate-right.enabled {
+  border-left-color: #8b743d; }
 
-.reveal .controls div.up,
-.reveal .controls div.up.enabled {
-  border-bottom-color: #8b743d;
-}
+.reveal .controls div.navigate-up,
+.reveal .controls div.navigate-up.enabled {
+  border-bottom-color: #8b743d; }
 
-.reveal .controls div.down,
-.reveal .controls div.down.enabled {
-  border-top-color: #8b743d;
-}
+.reveal .controls div.navigate-down,
+.reveal .controls div.navigate-down.enabled {
+  border-top-color: #8b743d; }
 
-.reveal .controls div.left.enabled:hover {
-  border-right-color: #c0a86e;
-}
+.reveal .controls div.navigate-left.enabled:hover {
+  border-right-color: #c0a86e; }
 
-.reveal .controls div.right.enabled:hover {
-  border-left-color: #c0a86e;
-}
+.reveal .controls div.navigate-right.enabled:hover {
+  border-left-color: #c0a86e; }
 
-.reveal .controls div.up.enabled:hover {
-  border-bottom-color: #c0a86e;
-}
+.reveal .controls div.navigate-up.enabled:hover {
+  border-bottom-color: #c0a86e; }
 
-.reveal .controls div.down.enabled:hover {
-  border-top-color: #c0a86e;
-}
+.reveal .controls div.navigate-down.enabled:hover {
+  border-top-color: #c0a86e; }
 
 /*********************************************
  * PROGRESS BAR
  *********************************************/
 .reveal .progress {
-  background: rgba(0, 0, 0, 0.2);
-}
+  background: rgba(0, 0, 0, 0.2); }
 
 .reveal .progress span {
   background: #8b743d;
@@ -159,5 +139,4 @@ body {
   -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
   -ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
   -o-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
-  transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
-}
+  transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }

css/theme/default.css

@@ -1,7 +1,7 @@
-@import url(http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
+@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
 /**
  * Default theme for reveal.js.
- * 
+ *
  * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
  */
 @font-face {
@@ -9,8 +9,7 @@
   src: url("../../lib/font/league_gothic-webfont.eot");
   src: url("../../lib/font/league_gothic-webfont.eot?#iefix") format("embedded-opentype"), url("../../lib/font/league_gothic-webfont.woff") format("woff"), url("../../lib/font/league_gothic-webfont.ttf") format("truetype"), url("../../lib/font/league_gothic-webfont.svg#LeagueGothicRegular") format("svg");
   font-weight: normal;
-  font-style: normal;
-}
+  font-style: normal; }
 
 /*********************************************
  * GLOBAL STYLES
@@ -23,22 +22,19 @@ body {
   background: -o-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
   background: -ms-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
   background: radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
-  background-color: #2b2b2b;
-}
+  background-color: #2b2b2b; }
 
 .reveal {
-  font-family: "Lato", Times, "Times New Roman", serif;
+  font-family: "Lato", sans-serif;
   font-size: 36px;
   font-weight: 200;
   letter-spacing: -0.02em;
-  color: #eeeeee;
-}
+  color: #eeeeee; }
 
 ::selection {
   color: white;
   background: #ff5e99;
-  text-shadow: none;
-}
+  text-shadow: none; }
 
 /*********************************************
  * HEADERS
@@ -55,12 +51,10 @@ body {
   line-height: 0.9em;
   letter-spacing: 0.02em;
   text-transform: uppercase;
-  text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);
-}
+  text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); }
 
 .reveal h1 {
-  text-shadow: 0 1px 0 #cccccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbbbbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaaaaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 20px 20px rgba(0, 0, 0, 0.15);
-}
+  text-shadow: 0 1px 0 #cccccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbbbbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaaaaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 20px 20px rgba(0, 0, 0, 0.15); }
 
 /*********************************************
  * LINKS
@@ -72,25 +66,22 @@ body {
   -moz-transition: color .15s ease;
   -ms-transition: color .15s ease;
   -o-transition: color .15s ease;
-  transition: color .15s ease;
-}
+  transition: color .15s ease; }
 
 .reveal a:not(.image):hover {
   color: #71e9f4;
   text-shadow: none;
-  border: none;
-}
+  border: none; }
 
 .reveal .roll span:after {
   color: #fff;
-  background: #0d99a5;
-}
+  background: #0d99a5; }
 
 /*********************************************
  * IMAGES
  *********************************************/
 .reveal section img {
-  margin: 15px;
+  margin: 15px 0px;
   background: rgba(255, 255, 255, 0.12);
   border: 4px solid #eeeeee;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
@@ -98,60 +89,49 @@ body {
   -moz-transition: all .2s linear;
   -ms-transition: all .2s linear;
   -o-transition: all .2s linear;
-  transition: all .2s linear;
-}
+  transition: all .2s linear; }
 
 .reveal a:hover img {
   background: rgba(255, 255, 255, 0.2);
   border-color: #13daec;
-  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
-}
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
 
 /*********************************************
  * NAVIGATION CONTROLS
  *********************************************/
-.reveal .controls div.left,
-.reveal .controls div.left.enabled {
-  border-right-color: #13daec;
-}
+.reveal .controls div.navigate-left,
+.reveal .controls div.navigate-left.enabled {
+  border-right-color: #13daec; }
 
-.reveal .controls div.right,
-.reveal .controls div.right.enabled {
-  border-left-color: #13daec;
-}
+.reveal .controls div.navigate-right,
+.reveal .controls div.navigate-right.enabled {
+  border-left-color: #13daec; }
 
-.reveal .controls div.up,
-.reveal .controls div.up.enabled {
-  border-bottom-color: #13daec;
-}
+.reveal .controls div.navigate-up,
+.reveal .controls div.navigate-up.enabled {
+  border-bottom-color: #13daec; }
 
-.reveal .controls div.down,
-.reveal .controls div.down.enabled {
-  border-top-color: #13daec;
-}
+.reveal .controls div.navigate-down,
+.reveal .controls div.navigate-down.enabled {
+  border-top-color: #13daec; }
 
-.reveal .controls div.left.enabled:hover {
-  border-right-color: #71e9f4;
-}
+.reveal .controls div.navigate-left.enabled:hover {
+  border-right-color: #71e9f4; }
 
-.reveal .controls div.right.enabled:hover {
-  border-left-color: #71e9f4;
-}
+.reveal .controls div.navigate-right.enabled:hover {
+  border-left-color: #71e9f4; }
 
-.reveal .controls div.up.enabled:hover {
-  border-bottom-color: #71e9f4;
-}
+.reveal .controls div.navigate-up.enabled:hover {
+  border-bottom-color: #71e9f4; }
 
-.reveal .controls div.down.enabled:hover {
-  border-top-color: #71e9f4;
-}
+.reveal .controls div.navigate-down.enabled:hover {
+  border-top-color: #71e9f4; }
 
 /*********************************************
  * PROGRESS BAR
  *********************************************/
 .reveal .progress {
-  background: rgba(0, 0, 0, 0.2);
-}
+  background: rgba(0, 0, 0, 0.2); }
 
 .reveal .progress span {
   background: #13daec;
@@ -159,5 +139,4 @@ body {
   -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
   -ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
   -o-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
-  transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
-}
+  transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }

css/theme/moon.css

@@ -0,0 +1,142 @@
+@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
+/**
+ * Solarized Dark theme for reveal.js.
+ * Author: Achim Staebler
+ */
+@font-face {
+  font-family: 'League Gothic';
+  src: url("../../lib/font/league_gothic-webfont.eot");
+  src: url("../../lib/font/league_gothic-webfont.eot?#iefix") format("embedded-opentype"), url("../../lib/font/league_gothic-webfont.woff") format("woff"), url("../../lib/font/league_gothic-webfont.ttf") format("truetype"), url("../../lib/font/league_gothic-webfont.svg#LeagueGothicRegular") format("svg");
+  font-weight: normal;
+  font-style: normal; }
+
+/**
+ * Solarized colors by Ethan Schoonover
+ */
+html * {
+  color-profile: sRGB;
+  rendering-intent: auto; }
+
+/*********************************************
+ * GLOBAL STYLES
+ *********************************************/
+body {
+  background: #002b36;
+  background-color: #002b36; }
+
+.reveal {
+  font-family: "Lato", sans-serif;
+  font-size: 36px;
+  font-weight: 200;
+  letter-spacing: -0.02em;
+  color: #93a1a1; }
+
+::selection {
+  color: white;
+  background: #d33682;
+  text-shadow: none; }
+
+/*********************************************
+ * HEADERS
+ *********************************************/
+.reveal h1,
+.reveal h2,
+.reveal h3,
+.reveal h4,
+.reveal h5,
+.reveal h6 {
+  margin: 0 0 20px 0;
+  color: #eee8d5;
+  font-family: "League Gothic", Impact, sans-serif;
+  line-height: 0.9em;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  text-shadow: none; }
+
+.reveal h1 {
+  text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); }
+
+/*********************************************
+ * LINKS
+ *********************************************/
+.reveal a:not(.image) {
+  color: #268bd2;
+  text-decoration: none;
+  -webkit-transition: color .15s ease;
+  -moz-transition: color .15s ease;
+  -ms-transition: color .15s ease;
+  -o-transition: color .15s ease;
+  transition: color .15s ease; }
+
+.reveal a:not(.image):hover {
+  color: #78b9e6;
+  text-shadow: none;
+  border: none; }
+
+.reveal .roll span:after {
+  color: #fff;
+  background: #1a6091; }
+
+/*********************************************
+ * IMAGES
+ *********************************************/
+.reveal section img {
+  margin: 15px 0px;
+  background: rgba(255, 255, 255, 0.12);
+  border: 4px solid #93a1a1;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
+  -webkit-transition: all .2s linear;
+  -moz-transition: all .2s linear;
+  -ms-transition: all .2s linear;
+  -o-transition: all .2s linear;
+  transition: all .2s linear; }
+
+.reveal a:hover img {
+  background: rgba(255, 255, 255, 0.2);
+  border-color: #268bd2;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
+
+/*********************************************
+ * NAVIGATION CONTROLS
+ *********************************************/
+.reveal .controls div.navigate-left,
+.reveal .controls div.navigate-left.enabled {
+  border-right-color: #268bd2; }
+
+.reveal .controls div.navigate-right,
+.reveal .controls div.navigate-right.enabled {
+  border-left-color: #268bd2; }
+
+.reveal .controls div.navigate-up,
+.reveal .controls div.navigate-up.enabled {
+  border-bottom-color: #268bd2; }
+
+.reveal .controls div.navigate-down,
+.reveal .controls div.navigate-down.enabled {
+  border-top-color: #268bd2; }
+
+.reveal .controls div.navigate-left.enabled:hover {
+  border-right-color: #78b9e6; }
+
+.reveal .controls div.navigate-right.enabled:hover {
+  border-left-color: #78b9e6; }
+
+.reveal .controls div.navigate-up.enabled:hover {
+  border-bottom-color: #78b9e6; }
+
+.reveal .controls div.navigate-down.enabled:hover {
+  border-top-color: #78b9e6; }
+
+/*********************************************
+ * PROGRESS BAR
+ *********************************************/
+.reveal .progress {
+  background: rgba(0, 0, 0, 0.2); }
+
+.reveal .progress span {
+  background: #268bd2;
+  -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
+  -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
+  -ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
+  -o-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
+  transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }

css/theme/night.css

@@ -0,0 +1,130 @@
+@import url(https://fonts.googleapis.com/css?family=Montserrat:700);
+@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic);
+/**
+ * Black theme for reveal.js.
+ *
+ * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
+ */
+/*********************************************
+ * GLOBAL STYLES
+ *********************************************/
+body {
+  background: #111111;
+  background-color: #111111; }
+
+.reveal {
+  font-family: "Open Sans", sans-serif;
+  font-size: 30px;
+  font-weight: 200;
+  letter-spacing: -0.02em;
+  color: #eeeeee; }
+
+::selection {
+  color: white;
+  background: #e7ad52;
+  text-shadow: none; }
+
+/*********************************************
+ * HEADERS
+ *********************************************/
+.reveal h1,
+.reveal h2,
+.reveal h3,
+.reveal h4,
+.reveal h5,
+.reveal h6 {
+  margin: 0 0 20px 0;
+  color: #eeeeee;
+  font-family: "Montserrat", Impact, sans-serif;
+  line-height: 0.9em;
+  letter-spacing: -0.03em;
+  text-transform: none;
+  text-shadow: none; }
+
+.reveal h1 {
+  text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); }
+
+/*********************************************
+ * LINKS
+ *********************************************/
+.reveal a:not(.image) {
+  color: #e7ad52;
+  text-decoration: none;
+  -webkit-transition: color .15s ease;
+  -moz-transition: color .15s ease;
+  -ms-transition: color .15s ease;
+  -o-transition: color .15s ease;
+  transition: color .15s ease; }
+
+.reveal a:not(.image):hover {
+  color: #f3d7ac;
+  text-shadow: none;
+  border: none; }
+
+.reveal .roll span:after {
+  color: #fff;
+  background: #d08a1d; }
+
+/*********************************************
+ * IMAGES
+ *********************************************/
+.reveal section img {
+  margin: 15px 0px;
+  background: rgba(255, 255, 255, 0.12);
+  border: 4px solid #eeeeee;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
+  -webkit-transition: all .2s linear;
+  -moz-transition: all .2s linear;
+  -ms-transition: all .2s linear;
+  -o-transition: all .2s linear;
+  transition: all .2s linear; }
+
+.reveal a:hover img {
+  background: rgba(255, 255, 255, 0.2);
+  border-color: #e7ad52;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
+
+/*********************************************
+ * NAVIGATION CONTROLS
+ *********************************************/
+.reveal .controls div.navigate-left,
+.reveal .controls div.navigate-left.enabled {
+  border-right-color: #e7ad52; }
+
+.reveal .controls div.navigate-right,
+.reveal .controls div.navigate-right.enabled {
+  border-left-color: #e7ad52; }
+
+.reveal .controls div.navigate-up,
+.reveal .controls div.navigate-up.enabled {
+  border-bottom-color: #e7ad52; }
+
+.reveal .controls div.navigate-down,
+.reveal .controls div.navigate-down.enabled {
+  border-top-color: #e7ad52; }
+
+.reveal .controls div.navigate-left.enabled:hover {
+  border-right-color: #f3d7ac; }
+
+.reveal .controls div.navigate-right.enabled:hover {
+  border-left-color: #f3d7ac; }
+
+.reveal .controls div.navigate-up.enabled:hover {
+  border-bottom-color: #f3d7ac; }
+
+.reveal .controls div.navigate-down.enabled:hover {
+  border-top-color: #f3d7ac; }
+
+/*********************************************
+ * PROGRESS BAR
+ *********************************************/
+.reveal .progress {
+  background: rgba(0, 0, 0, 0.2); }
+
+.reveal .progress span {
+  background: #e7ad52;
+  -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
+  -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
+  -ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
+  -o-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
+  transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }

css/theme/serif.css

@@ -1,7 +1,7 @@
 /**
- * A simple theme for reveal.js presentations, similar 
+ * A simple theme for reveal.js presentations, similar
  * to the default theme. The accent color is darkblue.
- * 
+ *
  * This theme is Copyright (C) 2012 Owen Versteeg, https://github.com/StereotypicalApps. It is MIT licensed.
  * reveal.js is Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se; so is the theme - beige.css - that this is based off of.
  */
@@ -10,22 +10,19 @@
  *********************************************/
 body {
   background: #f0f1eb;
-  background-color: #f0f1eb;
-}
+  background-color: #f0f1eb; }
 
 .reveal {
   font-family: "Palatino Linotype", "Book Antiqua", Palatino, FreeSerif, serif;
   font-size: 36px;
   font-weight: 200;
   letter-spacing: -0.02em;
-  color: black;
-}
+  color: black; }
 
 ::selection {
   color: white;
   background: #26351c;
-  text-shadow: none;
-}
+  text-shadow: none; }
 
 /*********************************************
  * HEADERS
@@ -42,12 +39,10 @@ body {
   line-height: 0.9em;
   letter-spacing: 0.02em;
   text-transform: none;
-  text-shadow: none;
-}
+  text-shadow: none; }
 
 .reveal h1 {
-  text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);
-}
+  text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); }
 
 /*********************************************
  * LINKS
@@ -59,25 +54,22 @@ body {
   -moz-transition: color .15s ease;
   -ms-transition: color .15s ease;
   -o-transition: color .15s ease;
-  transition: color .15s ease;
-}
+  transition: color .15s ease; }
 
 .reveal a:not(.image):hover {
   color: #8b7c69;
   text-shadow: none;
-  border: none;
-}
+  border: none; }
 
 .reveal .roll span:after {
   color: #fff;
-  background: #25211c;
-}
+  background: #25211c; }
 
 /*********************************************
  * IMAGES
  *********************************************/
 .reveal section img {
-  margin: 15px;
+  margin: 15px 0px;
   background: rgba(255, 255, 255, 0.12);
   border: 4px solid black;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
@@ -85,60 +77,49 @@ body {
   -moz-transition: all .2s linear;
   -ms-transition: all .2s linear;
   -o-transition: all .2s linear;
-  transition: all .2s linear;
-}
+  transition: all .2s linear; }
 
 .reveal a:hover img {
   background: rgba(255, 255, 255, 0.2);
   border-color: #51483d;
-  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
-}
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
 
 /*********************************************
  * NAVIGATION CONTROLS
  *********************************************/
-.reveal .controls div.left,
-.reveal .controls div.left.enabled {
-  border-right-color: #51483d;
-}
+.reveal .controls div.navigate-left,
+.reveal .controls div.navigate-left.enabled {
+  border-right-color: #51483d; }
 
-.reveal .controls div.right,
-.reveal .controls div.right.enabled {
-  border-left-color: #51483d;
-}
+.reveal .controls div.navigate-right,
+.reveal .controls div.navigate-right.enabled {
+  border-left-color: #51483d; }
 
-.reveal .controls div.up,
-.reveal .controls div.up.enabled {
-  border-bottom-color: #51483d;
-}
+.reveal .controls div.navigate-up,
+.reveal .controls div.navigate-up.enabled {
+  border-bottom-color: #51483d; }
 
-.reveal .controls div.down,
-.reveal .controls div.down.enabled {
-  border-top-color: #51483d;
-}
+.reveal .controls div.navigate-down,
+.reveal .controls div.navigate-down.enabled {
+  border-top-color: #51483d; }
 
-.reveal .controls div.left.enabled:hover {
-  border-right-color: #8b7c69;
-}
+.reveal .controls div.navigate-left.enabled:hover {
+  border-right-color: #8b7c69; }
 
-.reveal .controls div.right.enabled:hover {
-  border-left-color: #8b7c69;
-}
+.reveal .controls div.navigate-right.enabled:hover {
+  border-left-color: #8b7c69; }
 
-.reveal .controls div.up.enabled:hover {
-  border-bottom-color: #8b7c69;
-}
+.reveal .controls div.navigate-up.enabled:hover {
+  border-bottom-color: #8b7c69; }
 
-.reveal .controls div.down.enabled:hover {
-  border-top-color: #8b7c69;
-}
+.reveal .controls div.navigate-down.enabled:hover {
+  border-top-color: #8b7c69; }
 
 /*********************************************
  * PROGRESS BAR
  *********************************************/
 .reveal .progress {
-  background: rgba(0, 0, 0, 0.2);
-}
+  background: rgba(0, 0, 0, 0.2); }
 
 .reveal .progress span {
   background: #51483d;
@@ -146,5 +127,4 @@ body {
   -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
   -ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
   -o-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
-  transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
-}
+  transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }

css/theme/simple.css

@@ -1,9 +1,9 @@
-@import url(http://fonts.googleapis.com/css?family=News+Cycle:400,700);
-@import url(http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
+@import url(https://fonts.googleapis.com/css?family=News+Cycle:400,700);
+@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
 /**
- * A simple theme for reveal.js presentations, similar 
+ * A simple theme for reveal.js presentations, similar
  * to the default theme. The accent color is darkblue.
- * 
+ *
  * This theme is Copyright (C) 2012 Owen Versteeg, https://github.com/StereotypicalApps. It is MIT licensed.
  * reveal.js is Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
  */
@@ -12,22 +12,19 @@
  *********************************************/
 body {
   background: white;
-  background-color: white;
-}
+  background-color: white; }
 
 .reveal {
-  font-family: "Lato", Times, "Times New Roman", serif;
+  font-family: "Lato", sans-serif;
   font-size: 36px;
   font-weight: 200;
   letter-spacing: -0.02em;
-  color: black;
-}
+  color: black; }
 
 ::selection {
   color: white;
   background: rgba(0, 0, 0, 0.99);
-  text-shadow: none;
-}
+  text-shadow: none; }
 
 /*********************************************
  * HEADERS
@@ -44,12 +41,10 @@ body {
   line-height: 0.9em;
   letter-spacing: 0.02em;
   text-transform: none;
-  text-shadow: none;
-}
+  text-shadow: none; }
 
 .reveal h1 {
-  text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);
-}
+  text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); }
 
 /*********************************************
  * LINKS
@@ -61,25 +56,22 @@ body {
   -moz-transition: color .15s ease;
   -ms-transition: color .15s ease;
   -o-transition: color .15s ease;
-  transition: color .15s ease;
-}
+  transition: color .15s ease; }
 
 .reveal a:not(.image):hover {
   color: #0000f1;
   text-shadow: none;
-  border: none;
-}
+  border: none; }
 
 .reveal .roll span:after {
   color: #fff;
-  background: #00003f;
-}
+  background: #00003f; }
 
 /*********************************************
  * IMAGES
  *********************************************/
 .reveal section img {
-  margin: 15px;
+  margin: 15px 0px;
   background: rgba(255, 255, 255, 0.12);
   border: 4px solid black;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
@@ -87,60 +79,49 @@ body {
   -moz-transition: all .2s linear;
   -ms-transition: all .2s linear;
   -o-transition: all .2s linear;
-  transition: all .2s linear;
-}
+  transition: all .2s linear; }
 
 .reveal a:hover img {
   background: rgba(255, 255, 255, 0.2);
   border-color: darkblue;
-  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
-}
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
 
 /*********************************************
  * NAVIGATION CONTROLS
  *********************************************/
-.reveal .controls div.left,
-.reveal .controls div.left.enabled {
-  border-right-color: darkblue;
-}
+.reveal .controls div.navigate-left,
+.reveal .controls div.navigate-left.enabled {
+  border-right-color: darkblue; }
 
-.reveal .controls div.right,
-.reveal .controls div.right.enabled {
-  border-left-color: darkblue;
-}
+.reveal .controls div.navigate-right,
+.reveal .controls div.navigate-right.enabled {
+  border-left-color: darkblue; }
 
-.reveal .controls div.up,
-.reveal .controls div.up.enabled {
-  border-bottom-color: darkblue;
-}
+.reveal .controls div.navigate-up,
+.reveal .controls div.navigate-up.enabled {
+  border-bottom-color: darkblue; }
 
-.reveal .controls div.down,
-.reveal .controls div.down.enabled {
-  border-top-color: darkblue;
-}
+.reveal .controls div.navigate-down,
+.reveal .controls div.navigate-down.enabled {
+  border-top-color: darkblue; }
 
-.reveal .controls div.left.enabled:hover {
-  border-right-color: #0000f1;
-}
+.reveal .controls div.navigate-left.enabled:hover {
+  border-right-color: #0000f1; }
 
-.reveal .controls div.right.enabled:hover {
-  border-left-color: #0000f1;
-}
+.reveal .controls div.navigate-right.enabled:hover {
+  border-left-color: #0000f1; }
 
-.reveal .controls div.up.enabled:hover {
-  border-bottom-color: #0000f1;
-}
+.reveal .controls div.navigate-up.enabled:hover {
+  border-bottom-color: #0000f1; }
 
-.reveal .controls div.down.enabled:hover {
-  border-top-color: #0000f1;
-}
+.reveal .controls div.navigate-down.enabled:hover {
+  border-top-color: #0000f1; }
 
 /*********************************************
  * PROGRESS BAR
  *********************************************/
 .reveal .progress {
-  background: rgba(0, 0, 0, 0.2);
-}
+  background: rgba(0, 0, 0, 0.2); }
 
 .reveal .progress span {
   background: darkblue;
@@ -148,5 +129,4 @@ body {
   -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
   -ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
   -o-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
-  transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
-}
+  transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }

css/theme/sky.css

@@ -1,8 +1,8 @@
-@import url(http://fonts.googleapis.com/css?family=Quicksand:400,700,400italic,700italic);
-@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700);
+@import url(https://fonts.googleapis.com/css?family=Quicksand:400,700,400italic,700italic);
+@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700);
 /**
  * Sky theme for reveal.js.
- * 
+ *
  * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
  */
 /*********************************************
@@ -16,22 +16,19 @@ body {
   background: -o-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%);
   background: -ms-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%);
   background: radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%);
-  background-color: #f7fbfc;
-}
+  background-color: #f7fbfc; }
 
 .reveal {
   font-family: "Open Sans", sans-serif;
   font-size: 36px;
   font-weight: 200;
   letter-spacing: -0.02em;
-  color: #333333;
-}
+  color: #333333; }
 
 ::selection {
   color: white;
   background: #134674;
-  text-shadow: none;
-}
+  text-shadow: none; }
 
 /*********************************************
  * HEADERS
@@ -48,12 +45,10 @@ body {
   line-height: 0.9em;
   letter-spacing: -0.08em;
   text-transform: uppercase;
-  text-shadow: none;
-}
+  text-shadow: none; }
 
 .reveal h1 {
-  text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);
-}
+  text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); }
 
 /*********************************************
  * LINKS
@@ -65,25 +60,22 @@ body {
   -moz-transition: color .15s ease;
   -ms-transition: color .15s ease;
   -o-transition: color .15s ease;
-  transition: color .15s ease;
-}
+  transition: color .15s ease; }
 
 .reveal a:not(.image):hover {
   color: #74a7cb;
   text-shadow: none;
-  border: none;
-}
+  border: none; }
 
 .reveal .roll span:after {
   color: #fff;
-  background: #264c66;
-}
+  background: #264c66; }
 
 /*********************************************
  * IMAGES
  *********************************************/
 .reveal section img {
-  margin: 15px;
+  margin: 15px 0px;
   background: rgba(255, 255, 255, 0.12);
   border: 4px solid #333333;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
@@ -91,60 +83,49 @@ body {
   -moz-transition: all .2s linear;
   -ms-transition: all .2s linear;
   -o-transition: all .2s linear;
-  transition: all .2s linear;
-}
+  transition: all .2s linear; }
 
 .reveal a:hover img {
   background: rgba(255, 255, 255, 0.2);
   border-color: #3b759e;
-  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
-}
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
 
 /*********************************************
  * NAVIGATION CONTROLS
  *********************************************/
-.reveal .controls div.left,
-.reveal .controls div.left.enabled {
-  border-right-color: #3b759e;
-}
+.reveal .controls div.navigate-left,
+.reveal .controls div.navigate-left.enabled {
+  border-right-color: #3b759e; }
 
-.reveal .controls div.right,
-.reveal .controls div.right.enabled {
-  border-left-color: #3b759e;
-}
+.reveal .controls div.navigate-right,
+.reveal .controls div.navigate-right.enabled {
+  border-left-color: #3b759e; }
 
-.reveal .controls div.up,
-.reveal .controls div.up.enabled {
-  border-bottom-color: #3b759e;
-}
+.reveal .controls div.navigate-up,
+.reveal .controls div.navigate-up.enabled {
+  border-bottom-color: #3b759e; }
 
-.reveal .controls div.down,
-.reveal .controls div.down.enabled {
-  border-top-color: #3b759e;
-}
+.reveal .controls div.navigate-down,
+.reveal .controls div.navigate-down.enabled {
+  border-top-color: #3b759e; }
 
-.reveal .controls div.left.enabled:hover {
-  border-right-color: #74a7cb;
-}
+.reveal .controls div.navigate-left.enabled:hover {
+  border-right-color: #74a7cb; }
 
-.reveal .controls div.right.enabled:hover {
-  border-left-color: #74a7cb;
-}
+.reveal .controls div.navigate-right.enabled:hover {
+  border-left-color: #74a7cb; }
 
-.reveal .controls div.up.enabled:hover {
-  border-bottom-color: #74a7cb;
-}
+.reveal .controls div.navigate-up.enabled:hover {
+  border-bottom-color: #74a7cb; }
 
-.reveal .controls div.down.enabled:hover {
-  border-top-color: #74a7cb;
-}
+.reveal .controls div.navigate-down.enabled:hover {
+  border-top-color: #74a7cb; }
 
 /*********************************************
  * PROGRESS BAR
  *********************************************/
 .reveal .progress {
-  background: rgba(0, 0, 0, 0.2);
-}
+  background: rgba(0, 0, 0, 0.2); }
 
 .reveal .progress span {
   background: #3b759e;
@@ -152,5 +133,4 @@ body {
   -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
   -ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
   -o-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
-  transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
-}
+  transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }

css/theme/solarized.css

@@ -0,0 +1,142 @@
+@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
+/**
+ * Solarized Light theme for reveal.js.
+ * Author: Achim Staebler
+ */
+@font-face {
+  font-family: 'League Gothic';
+  src: url("../../lib/font/league_gothic-webfont.eot");
+  src: url("../../lib/font/league_gothic-webfont.eot?#iefix") format("embedded-opentype"), url("../../lib/font/league_gothic-webfont.woff") format("woff"), url("../../lib/font/league_gothic-webfont.ttf") format("truetype"), url("../../lib/font/league_gothic-webfont.svg#LeagueGothicRegular") format("svg");
+  font-weight: normal;
+  font-style: normal; }
+
+/**
+ * Solarized colors by Ethan Schoonover
+ */
+html * {
+  color-profile: sRGB;
+  rendering-intent: auto; }
+
+/*********************************************
+ * GLOBAL STYLES
+ *********************************************/
+body {
+  background: #fdf6e3;
+  background-color: #fdf6e3; }
+
+.reveal {
+  font-family: "Lato", sans-serif;
+  font-size: 36px;
+  font-weight: 200;
+  letter-spacing: -0.02em;
+  color: #657b83; }
+
+::selection {
+  color: white;
+  background: #d33682;
+  text-shadow: none; }
+
+/*********************************************
+ * HEADERS
+ *********************************************/
+.reveal h1,
+.reveal h2,
+.reveal h3,
+.reveal h4,
+.reveal h5,
+.reveal h6 {
+  margin: 0 0 20px 0;
+  color: #586e75;
+  font-family: "League Gothic", Impact, sans-serif;
+  line-height: 0.9em;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  text-shadow: none; }
+
+.reveal h1 {
+  text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); }
+
+/*********************************************
+ * LINKS
+ *********************************************/
+.reveal a:not(.image) {
+  color: #268bd2;
+  text-decoration: none;
+  -webkit-transition: color .15s ease;
+  -moz-transition: color .15s ease;
+  -ms-transition: color .15s ease;
+  -o-transition: color .15s ease;
+  transition: color .15s ease; }
+
+.reveal a:not(.image):hover {
+  color: #78b9e6;
+  text-shadow: none;
+  border: none; }
+
+.reveal .roll span:after {
+  color: #fff;
+  background: #1a6091; }
+
+/*********************************************
+ * IMAGES
+ *********************************************/
+.reveal section img {
+  margin: 15px 0px;
+  background: rgba(255, 255, 255, 0.12);
+  border: 4px solid #657b83;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
+  -webkit-transition: all .2s linear;
+  -moz-transition: all .2s linear;
+  -ms-transition: all .2s linear;
+  -o-transition: all .2s linear;
+  transition: all .2s linear; }
+
+.reveal a:hover img {
+  background: rgba(255, 255, 255, 0.2);
+  border-color: #268bd2;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
+
+/*********************************************
+ * NAVIGATION CONTROLS
+ *********************************************/
+.reveal .controls div.navigate-left,
+.reveal .controls div.navigate-left.enabled {
+  border-right-color: #268bd2; }
+
+.reveal .controls div.navigate-right,
+.reveal .controls div.navigate-right.enabled {
+  border-left-color: #268bd2; }
+
+.reveal .controls div.navigate-up,
+.reveal .controls div.navigate-up.enabled {
+  border-bottom-color: #268bd2; }
+
+.reveal .controls div.navigate-down,
+.reveal .controls div.navigate-down.enabled {
+  border-top-color: #268bd2; }
+
+.reveal .controls div.navigate-left.enabled:hover {
+  border-right-color: #78b9e6; }
+
+.reveal .controls div.navigate-right.enabled:hover {
+  border-left-color: #78b9e6; }
+
+.reveal .controls div.navigate-up.enabled:hover {
+  border-bottom-color: #78b9e6; }
+
+.reveal .controls div.navigate-down.enabled:hover {
+  border-top-color: #78b9e6; }
+
+/*********************************************
+ * PROGRESS BAR
+ *********************************************/
+.reveal .progress {
+  background: rgba(0, 0, 0, 0.2); }
+
+.reveal .progress span {
+  background: #268bd2;
+  -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
+  -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
+  -ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
+  -o-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
+  transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }

css/theme/source/beige.scss

@@ -1,6 +1,6 @@
 /**
  * Beige theme for reveal.js.
- * 
+ *
  * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
  */
 
@@ -25,7 +25,7 @@
 	font-style: normal;
 }
 
-@import url(http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
+@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
 
 
 // Override theme settings (see ../template/settings.scss)

css/theme/source/default.scss

@@ -1,6 +1,6 @@
 /**
  * Default theme for reveal.js.
- * 
+ *
  * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
  */
 
@@ -25,7 +25,7 @@
 	font-style: normal;
 }
 
-@import url(http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
+@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
 
 // Override theme settings (see ../template/settings.scss)
 $heading1TextShadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 20px 20px rgba(0,0,0,.15);

css/theme/source/moon.scss

@@ -0,0 +1,68 @@
+/**
+ * Solarized Dark theme for reveal.js.
+ * Author: Achim Staebler
+ */
+
+
+// Default mixins and settings -----------------
+@import "../template/mixins";
+@import "../template/settings";
+// ---------------------------------------------
+
+
+
+// Include theme-specific fonts
+@font-face {
+	font-family: 'League Gothic';
+	src: url('../../lib/font/league_gothic-webfont.eot');
+	src: url('../../lib/font/league_gothic-webfont.eot?#iefix') format('embedded-opentype'),
+		 url('../../lib/font/league_gothic-webfont.woff') format('woff'),
+		 url('../../lib/font/league_gothic-webfont.ttf') format('truetype'),
+		 url('../../lib/font/league_gothic-webfont.svg#LeagueGothicRegular') format('svg');
+
+	font-weight: normal;
+	font-style: normal;
+}
+
+@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
+
+/**
+ * Solarized colors by Ethan Schoonover
+ */
+html * {
+	color-profile: sRGB;
+	rendering-intent: auto;
+}
+
+// Solarized colors
+$base03:    #002b36;
+$base02:    #073642;
+$base01:    #586e75;
+$base00:    #657b83;
+$base0:     #839496;
+$base1:     #93a1a1;
+$base2:     #eee8d5;
+$base3:     #fdf6e3;
+$yellow:    #b58900;
+$orange:    #cb4b16;
+$red:       #dc322f;
+$magenta:   #d33682;
+$violet:    #6c71c4;
+$blue:      #268bd2;
+$cyan:      #2aa198;
+$green:     #859900;
+
+// Override theme settings (see ../template/settings.scss)
+$mainColor: $base1;
+$headingColor: $base2;
+$headingTextShadow: none;
+$backgroundColor: $base03;
+$linkColor: $blue;
+$linkColorHover: lighten( $linkColor, 20% );
+$selectionBackgroundColor: $magenta;
+
+
+
+// Theme template ------------------------------
+@import "../template/theme";
+// ---------------------------------------------

css/theme/source/night.scss

@@ -0,0 +1,35 @@
+/**
+ * Black theme for reveal.js.
+ *
+ * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
+ */
+
+
+// Default mixins and settings -----------------
+@import "../template/mixins";
+@import "../template/settings";
+// ---------------------------------------------
+
+
+// Include theme-specific fonts
+@import url(https://fonts.googleapis.com/css?family=Montserrat:700);
+@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic);
+
+
+// Override theme settings (see ../template/settings.scss)
+$backgroundColor: #111;
+
+$mainFont: 'Open Sans', sans-serif;
+$linkColor: #e7ad52;
+$linkColorHover: lighten( $linkColor, 20% );
+$headingFont: 'Montserrat', Impact, sans-serif;
+$headingTextShadow: none;
+$headingLetterSpacing: -0.03em;
+$headingTextTransform: none;
+$selectionBackgroundColor: #e7ad52;
+$mainFontSize: 30px;
+
+
+// Theme template ------------------------------
+@import "../template/theme";
+// ---------------------------------------------

css/theme/source/serif.scss

@@ -1,7 +1,7 @@
 /**
- * A simple theme for reveal.js presentations, similar 
+ * A simple theme for reveal.js presentations, similar
  * to the default theme. The accent color is darkblue.
- * 
+ *
  * This theme is Copyright (C) 2012 Owen Versteeg, https://github.com/StereotypicalApps. It is MIT licensed.
  * reveal.js is Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se; so is the theme - beige.css - that this is based off of.
  */

css/theme/source/simple.scss

@@ -1,7 +1,7 @@
 /**
- * A simple theme for reveal.js presentations, similar 
+ * A simple theme for reveal.js presentations, similar
  * to the default theme. The accent color is darkblue.
- * 
+ *
  * This theme is Copyright (C) 2012 Owen Versteeg, https://github.com/StereotypicalApps. It is MIT licensed.
  * reveal.js is Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
  */
@@ -15,12 +15,12 @@
 
 
 // Include theme-specific fonts
-@import url(http://fonts.googleapis.com/css?family=News+Cycle:400,700);
-@import url(http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
+@import url(https://fonts.googleapis.com/css?family=News+Cycle:400,700);
+@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
 
 
 // Override theme settings (see ../template/settings.scss)
-$mainFont: 'Lato', Times, 'Times New Roman', serif;
+$mainFont: 'Lato', sans-serif;
 $mainColor: #000;
 $headingFont: 'News Cycle', Impact, sans-serif;
 $headingColor: #000;

css/theme/source/sky.scss

@@ -1,6 +1,6 @@
 /**
  * Sky theme for reveal.js.
- * 
+ *
  * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
  */
 
@@ -13,8 +13,8 @@
 
 
 // Include theme-specific fonts
-@import url(http://fonts.googleapis.com/css?family=Quicksand:400,700,400italic,700italic);
-@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700);
+@import url(https://fonts.googleapis.com/css?family=Quicksand:400,700,400italic,700italic);
+@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700);
 
 
 // Override theme settings (see ../template/settings.scss)

css/theme/source/solarized.scss

@@ -0,0 +1,74 @@
+/**
+ * Solarized Light theme for reveal.js.
+ * Author: Achim Staebler
+ */
+
+
+// Default mixins and settings -----------------
+@import "../template/mixins";
+@import "../template/settings";
+// ---------------------------------------------
+
+
+
+// Include theme-specific fonts
+@font-face {
+	font-family: 'League Gothic';
+	src: url('../../lib/font/league_gothic-webfont.eot');
+	src: url('../../lib/font/league_gothic-webfont.eot?#iefix') format('embedded-opentype'),
+		 url('../../lib/font/league_gothic-webfont.woff') format('woff'),
+		 url('../../lib/font/league_gothic-webfont.ttf') format('truetype'),
+		 url('../../lib/font/league_gothic-webfont.svg#LeagueGothicRegular') format('svg');
+
+	font-weight: normal;
+	font-style: normal;
+}
+
+@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
+
+
+/**
+ * Solarized colors by Ethan Schoonover
+ */
+html * {
+	color-profile: sRGB;
+	rendering-intent: auto;
+}
+
+// Solarized colors
+$base03:    #002b36;
+$base02:    #073642;
+$base01:    #586e75;
+$base00:    #657b83;
+$base0:     #839496;
+$base1:     #93a1a1;
+$base2:     #eee8d5;
+$base3:     #fdf6e3;
+$yellow:    #b58900;
+$orange:    #cb4b16;
+$red:       #dc322f;
+$magenta:   #d33682;
+$violet:    #6c71c4;
+$blue:      #268bd2;
+$cyan:      #2aa198;
+$green:     #859900;
+
+// Override theme settings (see ../template/settings.scss)
+$mainColor: $base00;
+$headingColor: $base01;
+$headingTextShadow: none;
+$backgroundColor: $base3;
+$linkColor: $blue;
+$linkColorHover: lighten( $linkColor, 20% );
+$selectionBackgroundColor: $magenta;
+
+// Background generator
+// @mixin bodyBackground() {
+// 	@include radial-gradient( rgba($base3,1), rgba(lighten($base3, 20%),1) );
+// }
+
+
+
+// Theme template ------------------------------
+@import "../template/theme";
+// ---------------------------------------------

css/theme/template/settings.scss

@@ -1,11 +1,11 @@
-// Base settings for all themes that can optionally be 
+// Base settings for all themes that can optionally be
 // overridden by the super-theme
 
 // Background of the presentation
 $backgroundColor: #2b2b2b;
 
 // Primary/body text
-$mainFont: 'Lato', Times, 'Times New Roman', serif;
+$mainFont: 'Lato', sans-serif;
 $mainFontSize: 36px;
 $mainColor: #eee;
 

css/theme/template/theme.scss

@@ -17,21 +17,21 @@ body {
 	color: $mainColor;
 }
 
-::selection { 
-	color: $selectionColor; 
-	background: $selectionBackgroundColor; 
-	text-shadow: none; 
+::selection {
+	color: $selectionColor;
+	background: $selectionBackgroundColor;
+	text-shadow: none;
 }
 
 /*********************************************
  * HEADERS
  *********************************************/
 
-.reveal h1, 
-.reveal h2, 
-.reveal h3, 
-.reveal h4, 
-.reveal h5, 
+.reveal h1,
+.reveal h2,
+.reveal h3,
+.reveal h4,
+.reveal h5,
 .reveal h6 {
 	margin: 0 0 20px 0;
 	color: $headingColor;
@@ -39,7 +39,7 @@ body {
 	font-family: $headingFont;
 	line-height: $headingLineHeight;
 	letter-spacing: $headingLetterSpacing;
-	
+
 	text-transform: $headingTextTransform;
 	text-shadow: $headingTextShadow;
 }
@@ -65,7 +65,7 @@ body {
 }
 	.reveal a:not(.image):hover {
 		color: $linkColorHover;
-		
+
 		text-shadow: none;
 		border: none;
 	}
@@ -81,12 +81,12 @@ body {
  *********************************************/
 
 .reveal section img {
-	margin: 15px;
+	margin: 15px 0px;
 	background: rgba(255,255,255,0.12);
 	border: 4px solid $mainColor;
-	
+
 	box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
-	
+
 	-webkit-transition: all .2s linear;
 	   -moz-transition: all .2s linear;
 	    -ms-transition: all .2s linear;
@@ -97,7 +97,7 @@ body {
 	.reveal a:hover img {
 		background: rgba(255,255,255,0.2);
 		border-color: $linkColor;
-		
+
 		box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
 	}
 
@@ -106,39 +106,39 @@ body {
  * NAVIGATION CONTROLS
  *********************************************/
 
-.reveal .controls div.left,
-.reveal .controls div.left.enabled {
+.reveal .controls div.navigate-left,
+.reveal .controls div.navigate-left.enabled {
 	border-right-color: $linkColor;
 }
 
-.reveal .controls div.right,
-.reveal .controls div.right.enabled {
+.reveal .controls div.navigate-right,
+.reveal .controls div.navigate-right.enabled {
 	border-left-color: $linkColor;
 }
 
-.reveal .controls div.up,
-.reveal .controls div.up.enabled {
+.reveal .controls div.navigate-up,
+.reveal .controls div.navigate-up.enabled {
 	border-bottom-color: $linkColor;
 }
 
-.reveal .controls div.down,
-.reveal .controls div.down.enabled {
+.reveal .controls div.navigate-down,
+.reveal .controls div.navigate-down.enabled {
 	border-top-color: $linkColor;
 }
 
-.reveal .controls div.left.enabled:hover {
+.reveal .controls div.navigate-left.enabled:hover {
 	border-right-color: $linkColorHover;
 }
 
-.reveal .controls div.right.enabled:hover {
+.reveal .controls div.navigate-right.enabled:hover {
 	border-left-color: $linkColorHover;
 }
 
-.reveal .controls div.up.enabled:hover {
+.reveal .controls div.navigate-up.enabled:hover {
 	border-bottom-color: $linkColorHover;
 }
 
-.reveal .controls div.down.enabled:hover {
+.reveal .controls div.navigate-down.enabled:hover {
 	border-top-color: $linkColorHover;
 }
 

index.html

@@ -12,7 +12,9 @@
 		<meta name="apple-mobile-web-app-capable" content="yes" />
 		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
 
-		<link rel="stylesheet" href="css/reveal.css">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+
+		<link rel="stylesheet" href="css/reveal.min.css">
 		<link rel="stylesheet" href="css/theme/default.css" id="theme">
 
 		<!-- For syntax highlighting -->
@@ -61,9 +63,9 @@
 						<h2>Vertical Slides</h2>
 						<p>
 							Slides can be nested inside of other slides,
-							try pressing <a href="#/2/1">down</a>.
+							try pressing <a href="#" class="navigate-down">down</a>.
 						</p>
-						<a href="#/2/1" class="image">
+						<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>
@@ -88,16 +90,19 @@
 				</section>
 
 				<section>
-					<h2>Point of View</h2>
+					<h2>Slides</h2>
 					<p>
-						Press <strong>ESC</strong> to enter the slide overview. Hold down alt and click on any element to zoom in on it using <a href="http://lab.hakim.se/zoom-js">zoom.js</a>. Alt + click anywhere to zoom back out.
+						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>.
 					</p>
 				</section>
 
 				<section>
-					<h2>rvl.io</h2>
+					<h2>Point of View</h2>
 					<p>
-						If you don't like writing slides in HTML you can use the online editor <a href="http://www.rvl.io" target="_blank">rvl.io</a>.
+						Press <strong>ESC</strong> to enter the slide overview.
+					</p>
+					<p>
+						Hold down alt and click on any element to zoom in on it using <a href="http://lab.hakim.se/zoom-js">zoom.js</a>. Alt + click anywhere to zoom back out.
 					</p>
 				</section>
 
@@ -133,12 +138,14 @@
 
 						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).
 
-							<section data-markdown>
-							  ## Markdown support
+						```
+						<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).
-							</section>
+						  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).
+						</section>
+						```
 					</script>
 				</section>
 
@@ -151,6 +158,7 @@
 						<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="?transition=none#/transitions">None</a> -
 						<a href="?#/transitions">Default</a>
 					</p>
@@ -164,6 +172,7 @@
 						<a href="?theme=beige#/themes">Beige</a> -
 						<a href="?theme=simple#/themes">Simple</a> -
 						<a href="?theme=serif#/themes">Serif</a> -
+						<a href="?theme=night#/themes">Night</a> -
 						<a href="?#/themes">Default</a>
 					</p>
 					<p>
@@ -181,20 +190,20 @@
 							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>
-						<a href="#/7/1" class="image">
+						<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>
-						<a href="#/7/2" class="image">
+						<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>
-						<a href="#/7/0" 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="#" 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>
 					</section>
 				</section>
@@ -204,7 +213,8 @@
 					<p>
 						Additionally custom events can be triggered on a per slide basis by binding to the <code>data-state</code> name.
 					</p>
-					<pre><code contenteditable style="font-size: 18px; margin-top: 20px;">Reveal.addEventListener( 'customevent', function() {
+					<pre><code data-trim contenteditable style="font-size: 18px; margin-top: 20px;">
+Reveal.addEventListener( 'customevent', function() {
 	console.log( '"customevent" has fired' );
 } );
 					</code></pre>
@@ -214,17 +224,17 @@
 					<h2>Clever Quotes</h2>
 					<p>
 						These guys come in two forms, inline: <q cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations">
-						The nice thing about standards is that there are so many to choose from</q> and block:
+						&ldquo;The nice thing about standards is that there are so many to choose from&rdquo;</q> and block:
 					</p>
 					<blockquote cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations">
-						For years there has been a theory that millions of monkeys typing at random on millions of typewriters would
-						reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.
+						&ldquo;For years there has been a theory that millions of monkeys typing at random on millions of typewriters would
+						reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.&rdquo;
 					</blockquote>
 				</section>
 
 				<section>
 					<h2>Pretty Code</h2>
-					<pre><code contenteditable>
+					<pre><code data-trim contenteditable>
 function linkify( selector ) {
   if( supports3DTransforms ) {
 
@@ -298,7 +308,7 @@ function linkify( selector ) {
 				<section>
 					<h2>Take a Moment</h2>
 					<p>
-						Press b or period on your keyboard to enter the 'paused' mode. This mode is helpful when you want to take disctracting slides off the screen
+						Press b or period on your keyboard to enter the 'paused' mode. This mode is helpful when you want to take distracting slides off the screen
 						during a presentation.
 					</p>
 				</section>
@@ -306,30 +316,12 @@ function linkify( selector ) {
 				<section>
 					<h2>Stellar Links</h2>
 					<ul>
+						<li><a href="http://slid.es">Try the online editor</a></li>
 						<li><a href="https://github.com/hakimel/reveal.js">Source code on GitHub</a></li>
-						<li><a href="http://hakim.se/projects/reveal-js">Leave feedback on my site</a></li>
 						<li><a href="http://twitter.com/hakimel">Follow me on Twitter</a></li>
 					</ul>
 				</section>
 
-				<section>
-					<h2>It's free</h2>
-					<p>
-						reveal.js and <a href="http://www.rvl.io">rvl.io</a> are entirely free but if you'd like to support the projects you can donate below.
-						Donations will go towards hosting and domain costs.
-					</p>
-					<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
-						<input type="hidden" name="cmd" value="_donations">
-						<input type="hidden" name="business" value="hakim.elhattab@gmail.com">
-						<input type="hidden" name="lc" value="US">
-						<input type="hidden" name="item_name" value="reveal.js / rvl.io">
-						<input type="hidden" name="no_note" value="0">
-						<input type="hidden" name="currency_code" value="USD">
-						<input type="hidden" name="bn" value="PP-DonationsBF:btn_donate_LG.gif:NonHostedGuest">
-						<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
-					</form>
-				</section>
-
 				<section>
 					<h1>THE END</h1>
 					<h3>BY Hakim El Hattab / hakim.se</h3>
@@ -350,18 +342,21 @@ function linkify( selector ) {
 				controls: true,
 				progress: true,
 				history: true,
+				center: true,
 
 				theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
-				transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/none
+				transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/fade/none
 
 				// Optional libraries used to extend on reveal.js
 				dependencies: [
 					{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
-					{ src: 'plugin/markdown/showdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
+					{ 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/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; } }
+					// { src: 'plugin/search/search.js', async: true, condition: function() { return !!document.body.classList; } }
+					// { src: 'plugin/remotes/remotes.js', async: true, condition: function() { return !!document.body.classList; } }
 				]
 			});
 

package.json

@@ -1,20 +1,45 @@
 {
-	"author": "Hakim El Hattab",
-	"name": "reveal.js",
-	"description": "HTML5 Slideware with Presenter Notes",
-	"version": "1.5.0",
-	"repository": {
-		"type": "git",
-		"url": "git://github.com/hakimel/reveal.js.git"
-	},
-	"engines": {
-		"node": "~0.8.0"
-	},
-	"dependencies": {
-		"underscore" : "~1.3.3",
-		"express" : "~2.5.9",
-		"socket.io" : "~0.9.6",
-		"mustache" : "~0.4.0"
-	},
-	"devDependencies": {}
+  "name": "reveal.js",
+  "version": "2.4.0",
+  "description": "The HTML Presentation Framework",
+  "homepage": "http://lab.hakim.se/reveal-js",
+  "subdomain": "revealjs",
+  "scripts": {
+    "test": "grunt jshint",
+    "start": ""
+  },
+  "author": {
+    "name": "Hakim El Hattab",
+    "email": "hakim.elhattab@gmail.com",
+    "web": "http://hakim.se"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/hakimel/reveal.js.git"
+  },
+  "engines": {
+    "node": "~0.8.0"
+  },
+  "dependencies": {
+    "underscore": "~1.3.3",
+    "express": "~2.5.9",
+    "mustache": "~0.4.0",
+    "socket.io": "~0.9.13"
+  },
+  "devDependencies": {
+    "grunt-contrib-jshint": "~0.2.0",
+    "grunt-contrib-cssmin": "~0.4.1",
+    "grunt-contrib-uglify": "~0.1.1",
+    "grunt-contrib-watch": "~0.2.0",
+    "grunt-contrib-sass": "~0.2.2",
+    "grunt-contrib-connect": "~0.2.0",
+    "grunt-zip": "~0.7.0",
+    "grunt": "~0.4.0"
+  },
+  "licenses": [
+    {
+      "type": "MIT",
+      "url": "https://github.com/hakimel/reveal.js/blob/master/LICENSE"
+    }
+  ]
 }

plugin/markdown/example.html

@@ -0,0 +1,97 @@
+<!doctype html>
+<html lang="en">
+
+	<head>
+		<meta charset="utf-8">
+
+		<title>reveal.js - Markdown Demo</title>
+
+		<link rel="stylesheet" href="../../css/reveal.css">
+		<link rel="stylesheet" href="../../css/theme/default.css" id="theme">
+	</head>
+
+	<body>
+
+		<div class="reveal">
+
+			<div class="slides">
+
+                <!-- Use external markdown resource, and separate slides by three newlines; vertical slides by two newlines -->
+                <section data-markdown="example.md" data-separator="^\n\n\n" data-vertical="^\n\n"></section>
+
+                <!-- Slides are separated by three dashes (quick 'n dirty regular expression) -->
+                <section data-markdown data-separator="---">
+                    <script type="text/template">
+                        ## Demo 1
+                        Slide 1
+                        ---
+                        ## Demo 1
+                        Slide 2
+                        ---
+                        ## Demo 1
+                        Slide 3
+                    </script>
+                </section>
+
+                <!-- Slides are separated by newline + three dashes + newline, vertical slides identical but two dashes -->
+                <section data-markdown data-separator="^\n---\n$" data-vertical="^\n--\n$">
+                    <script type="text/template">
+                        ## Demo 2
+                        Slide 1.1
+
+                        --
+
+                        ## Demo 2
+                        Slide 1.2
+
+                        ---
+
+                        ## Demo 2
+                        Slide 2
+                    </script>
+                </section>
+
+                <!-- No "extra" slides, since there are no separators defined (so they'll become horizontal rulers) -->
+                <section data-markdown>
+                    <script type="text/template">
+                        A
+
+                        ---
+
+                        B
+
+                        ---
+
+                        C
+                    </script>
+                </section>
+
+            </div>
+		</div>
+
+		<script src="../../lib/js/head.min.js"></script>
+		<script src="../../js/reveal.js"></script>
+
+		<script>
+
+			Reveal.initialize({
+				controls: true,
+				progress: true,
+				history: true,
+				center: true,
+
+				theme: Reveal.getQueryHash().theme,
+				transition: Reveal.getQueryHash().transition || 'default',
+
+				// Optional libraries used to extend on reveal.js
+				dependencies: [
+					{ src: '../../lib/js/classList.js', condition: function() { return !document.body.classList; } },
+					{ src: 'marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
+					{ src: 'markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }
+				]
+			});
+
+		</script>
+
+	</body>
+</html>

plugin/markdown/example.md

@@ -0,0 +1,29 @@
+# Markdown Demo
+
+
+
+## External 1.1
+
+Content 1.1
+
+
+## External 1.2
+
+Content 1.2
+
+
+
+## External 2
+
+Content 2.1
+
+
+
+## External 3.1
+
+Content 3.1
+
+
+## External 3.2
+
+Content 3.2

plugin/markdown/markdown.js

@@ -2,19 +2,16 @@
 // Modified by Hakim to handle Markdown indented with tabs
 (function(){
 
-    if( typeof Showdown === 'undefined' ) {
-        throw 'The reveal.js Markdown plugin requires Showdown to be loaded';
+    if( typeof marked === 'undefined' ) {
+        throw 'The reveal.js Markdown plugin requires marked to be loaded';
     }
 
-    var sections = document.querySelectorAll( '[data-markdown]' );
-
-    for( var i = 0, len = sections.length; i < len; i++ ) {
-        var section = sections[i];
+    var stripLeadingWhitespace = function(section) {
 
         var template = section.querySelector( 'script' );
 
         // strip leading whitespace so it isn't evaluated as code
-        var text = ( template || section ).innerHTML;
+        var text = ( template || section ).textContent;
 
         var leadingWs = text.match(/^\n?(\s*)/)[1].length,
             leadingTabs = text.match(/^\n?(\t*)/)[1].length;
@@ -26,7 +23,168 @@
             text = text.replace( new RegExp('\\n? {' + leadingWs + '}','g'), '\n' );
         }
 
-        section.innerHTML = (new Showdown.converter()).makeHtml(text);
+        return text;
+
+    };
+
+    var twrap = function(el) {
+      return '<script type="text/template">' + el + '</script>';
+    };
+
+    var getForwardedAttributes = function(section) {
+        var attributes = section.attributes;
+        var result = [];
+
+        for( var i = 0, len = attributes.length; i < len; i++ ) {
+            var name = attributes[i].name,
+                value = attributes[i].value;
+
+            // disregard attributes that are used for markdown loading/parsing
+            if( /data\-(markdown|separator|vertical)/gi.test( name ) ) continue;
+
+            if( value ) {
+                result.push( name + '=' + value );
+            }
+            else {
+                result.push( name );
+            }
+        }
+
+        return result.join( ' ' );
     }
 
-})();
+    var slidifyMarkdown = function(markdown, separator, vertical, attributes) {
+
+        separator = separator || '^\n---\n$';
+
+        var reSeparator = new RegExp(separator + (vertical ? '|' + vertical : ''), 'mg'),
+            reHorSeparator = new RegExp(separator),
+            matches,
+            lastIndex = 0,
+            isHorizontal,
+            wasHorizontal = true,
+            content,
+            sectionStack = [],
+            markdownSections = '';
+
+        // iterate until all blocks between separators are stacked up
+        while( matches = reSeparator.exec(markdown) ) {
+
+            // determine direction (horizontal by default)
+            isHorizontal = reHorSeparator.test(matches[0]);
+
+            if( !isHorizontal && wasHorizontal ) {
+                // create vertical stack
+                sectionStack.push([]);
+            }
+
+            // pluck slide content from markdown input
+            content = markdown.substring(lastIndex, matches.index);
+
+            if( isHorizontal && wasHorizontal ) {
+                // add to horizontal stack
+                sectionStack.push(content);
+            } else {
+                // add to vertical stack
+                sectionStack[sectionStack.length-1].push(content);
+            }
+
+            lastIndex = reSeparator.lastIndex;
+            wasHorizontal = isHorizontal;
+
+        }
+
+        // add the remaining slide
+        (wasHorizontal ? sectionStack : sectionStack[sectionStack.length-1]).push(markdown.substring(lastIndex));
+
+        // flatten the hierarchical stack, and insert <section data-markdown> tags
+        for( var k = 0, klen = sectionStack.length; k < klen; k++ ) {
+            // horizontal
+            if( typeof sectionStack[k] === 'string' ) {
+                markdownSections += '<section '+ attributes +' data-markdown>' +  twrap( sectionStack[k] )  + '</section>';
+            }
+            // vertical
+            else {
+                markdownSections += '<section '+ attributes +'>' +
+                                        '<section data-markdown>' +  sectionStack[k].map(twrap).join('</section><section data-markdown>') + '</section>' +
+                                    '</section>';
+            }
+        }
+
+        return markdownSections;
+    };
+
+    var querySlidingMarkdown = function() {
+
+        var sections = document.querySelectorAll( '[data-markdown]'),
+            section;
+
+        for( var j = 0, jlen = sections.length; j < jlen; j++ ) {
+
+            section = sections[j];
+
+            if( section.getAttribute('data-markdown').length ) {
+
+                var xhr = new XMLHttpRequest(),
+                    url = section.getAttribute('data-markdown');
+
+                xhr.onreadystatechange = function () {
+                    if( xhr.readyState === 4 ) {
+                        if (xhr.status >= 200 && xhr.status < 300) {
+                            section.outerHTML = slidifyMarkdown( xhr.responseText, section.getAttribute('data-separator'), section.getAttribute('data-vertical'), getForwardedAttributes(section) );
+                        } else {
+                            section.outerHTML = '<section data-state="alert">ERROR: The attempt to fetch ' + url + ' failed with the HTTP status ' + xhr.status +
+                                '. Check your browser\'s JavaScript console for more details.' +
+                                '<p>Remember that you need to serve the presentation HTML from a HTTP server and the Markdown file must be there too.</p></section>';
+                        }
+                    }
+                };
+
+                xhr.open('GET', url, false);
+                try {
+                    xhr.send();
+                } catch (e) {
+                    alert('Failed to get the Markdown file ' + url + '. Make sure that the presentation and the file are served by a HTTP server and the file can be found there. ' + e);
+                }
+
+            } else if( section.getAttribute('data-separator') ) {
+
+                var markdown = stripLeadingWhitespace(section);
+                section.outerHTML = slidifyMarkdown( markdown, section.getAttribute('data-separator'), section.getAttribute('data-vertical'), getForwardedAttributes(section) );
+
+            }
+        }
+
+    };
+
+    var queryMarkdownSlides = function() {
+
+        var sections = document.querySelectorAll( '[data-markdown]');
+
+        for( var j = 0, jlen = sections.length; j < jlen; j++ ) {
+
+            makeHtml(sections[j]);
+
+        }
+
+    };
+
+    var makeHtml = function(section) {
+
+        var notes = section.querySelector( 'aside.notes' );
+
+        var markdown = stripLeadingWhitespace(section);
+
+        section.innerHTML = marked(markdown);
+
+        if( notes ) {
+            section.appendChild( notes );
+        }
+
+    };
+
+    querySlidingMarkdown();
+
+    queryMarkdownSlides();
+
+})();

plugin/markdown/marked.js

@@ -0,0 +1,37 @@
+/**
+ * marked - a markdown parser
+ * Copyright (c) 2011-2013, Christopher Jeffrey. (MIT Licensed)
+ * https://github.com/chjj/marked
+ */
+
+(function(){var block={newline:/^\n+/,code:/^( {4}[^\n]+\n*)+/,fences:noop,hr:/^( *[-*_]){3,} *(?:\n+|$)/,heading:/^ *(#{1,6}) *([^\n]+?) *#* *(?:\n+|$)/,nptable:noop,lheading:/^([^\n]+)\n *(=|-){3,} *\n*/,blockquote:/^( *>[^\n]+(\n[^\n]+)*\n*)+/,list:/^( *)(bull) [\s\S]+?(?:hr|\n{2,}(?! )(?!\1bull )\n*|\s*$)/,html:/^ *(?:comment|closed|closing) *(?:\n{2,}|\s*$)/,def:/^ *\[([^\]]+)\]: *<?([^\s>]+)>?(?: +["(]([^\n]+)[")])? *(?:\n+|$)/,table:noop,paragraph:/^((?:[^\n]+\n?(?!hr|heading|lheading|blockquote|tag|def))+)\n*/,
+text:/^[^\n]+/};block.bullet=/(?:[*+-]|\d+\.)/;block.item=/^( *)(bull) [^\n]*(?:\n(?!\1bull )[^\n]*)*/;block.item=replace(block.item,"gm")(/bull/g,block.bullet)();block.list=replace(block.list)(/bull/g,block.bullet)("hr",/\n+(?=(?: *[-*_]){3,} *(?:\n+|$))/)();block._tag="(?!(?:"+"a|em|strong|small|s|cite|q|dfn|abbr|data|time|code"+"|var|samp|kbd|sub|sup|i|b|u|mark|ruby|rt|rp|bdi|bdo"+"|span|br|wbr|ins|del|img)\\b)\\w+(?!:/|@)\\b";block.html=replace(block.html)("comment",/\x3c!--[\s\S]*?--\x3e/)("closed",
+/<(tag)[\s\S]+?<\/\1>/)("closing",/<tag(?:"[^"]*"|'[^']*'|[^'">])*?>/)(/tag/g,block._tag)();block.paragraph=replace(block.paragraph)("hr",block.hr)("heading",block.heading)("lheading",block.lheading)("blockquote",block.blockquote)("tag","<"+block._tag)("def",block.def)();block.normal=merge({},block);block.gfm=merge({},block.normal,{fences:/^ *(`{3,}|~{3,}) *(\S+)? *\n([\s\S]+?)\s*\1 *(?:\n+|$)/,paragraph:/^/});block.gfm.paragraph=replace(block.paragraph)("(?!","(?!"+block.gfm.fences.source.replace("\\1",
+"\\2")+"|")();block.tables=merge({},block.gfm,{nptable:/^ *(\S.*\|.*)\n *([-:]+ *\|[-| :]*)\n((?:.*\|.*(?:\n|$))*)\n*/,table:/^ *\|(.+)\n *\|( *[-:]+[-| :]*)\n((?: *\|.*(?:\n|$))*)\n*/});function Lexer(options){this.tokens=[];this.tokens.links={};this.options=options||marked.defaults;this.rules=block.normal;if(this.options.gfm)if(this.options.tables)this.rules=block.tables;else this.rules=block.gfm}Lexer.rules=block;Lexer.lex=function(src,options){var lexer=new Lexer(options);return lexer.lex(src)};
+Lexer.prototype.lex=function(src){src=src.replace(/\r\n|\r/g,"\n").replace(/\t/g,"    ").replace(/\u00a0/g," ").replace(/\u2424/g,"\n");return this.token(src,true)};Lexer.prototype.token=function(src,top){var src=src.replace(/^ +$/gm,""),next,loose,cap,bull,b,item,space,i,l;while(src){if(cap=this.rules.newline.exec(src)){src=src.substring(cap[0].length);if(cap[0].length>1)this.tokens.push({type:"space"})}if(cap=this.rules.code.exec(src)){src=src.substring(cap[0].length);cap=cap[0].replace(/^ {4}/gm,
+"");this.tokens.push({type:"code",text:!this.options.pedantic?cap.replace(/\n+$/,""):cap});continue}if(cap=this.rules.fences.exec(src)){src=src.substring(cap[0].length);this.tokens.push({type:"code",lang:cap[2],text:cap[3]});continue}if(cap=this.rules.heading.exec(src)){src=src.substring(cap[0].length);this.tokens.push({type:"heading",depth:cap[1].length,text:cap[2]});continue}if(top&&(cap=this.rules.nptable.exec(src))){src=src.substring(cap[0].length);item={type:"table",header:cap[1].replace(/^ *| *\| *$/g,
+"").split(/ *\| */),align:cap[2].replace(/^ *|\| *$/g,"").split(/ *\| */),cells:cap[3].replace(/\n$/,"").split("\n")};for(i=0;i<item.align.length;i++)if(/^ *-+: *$/.test(item.align[i]))item.align[i]="right";else if(/^ *:-+: *$/.test(item.align[i]))item.align[i]="center";else if(/^ *:-+ *$/.test(item.align[i]))item.align[i]="left";else item.align[i]=null;for(i=0;i<item.cells.length;i++)item.cells[i]=item.cells[i].split(/ *\| */);this.tokens.push(item);continue}if(cap=this.rules.lheading.exec(src)){src=
+src.substring(cap[0].length);this.tokens.push({type:"heading",depth:cap[2]==="="?1:2,text:cap[1]});continue}if(cap=this.rules.hr.exec(src)){src=src.substring(cap[0].length);this.tokens.push({type:"hr"});continue}if(cap=this.rules.blockquote.exec(src)){src=src.substring(cap[0].length);this.tokens.push({type:"blockquote_start"});cap=cap[0].replace(/^ *> ?/gm,"");this.token(cap,top);this.tokens.push({type:"blockquote_end"});continue}if(cap=this.rules.list.exec(src)){src=src.substring(cap[0].length);
+bull=cap[2];this.tokens.push({type:"list_start",ordered:bull.length>1});cap=cap[0].match(this.rules.item);next=false;l=cap.length;i=0;for(;i<l;i++){item=cap[i];space=item.length;item=item.replace(/^ *([*+-]|\d+\.) +/,"");if(~item.indexOf("\n ")){space-=item.length;item=!this.options.pedantic?item.replace(new RegExp("^ {1,"+space+"}","gm"),""):item.replace(/^ {1,4}/gm,"")}if(this.options.smartLists&&i!==l-1){b=block.bullet.exec(cap[i+1])[0];if(bull!==b&&!(bull.length>1&&b.length>1)){src=cap.slice(i+
+1).join("\n")+src;i=l-1}}loose=next||/\n\n(?!\s*$)/.test(item);if(i!==l-1){next=item[item.length-1]==="\n";if(!loose)loose=next}this.tokens.push({type:loose?"loose_item_start":"list_item_start"});this.token(item,false);this.tokens.push({type:"list_item_end"})}this.tokens.push({type:"list_end"});continue}if(cap=this.rules.html.exec(src)){src=src.substring(cap[0].length);this.tokens.push({type:this.options.sanitize?"paragraph":"html",pre:cap[1]==="pre"||cap[1]==="script",text:cap[0]});continue}if(top&&
+(cap=this.rules.def.exec(src))){src=src.substring(cap[0].length);this.tokens.links[cap[1].toLowerCase()]={href:cap[2],title:cap[3]};continue}if(top&&(cap=this.rules.table.exec(src))){src=src.substring(cap[0].length);item={type:"table",header:cap[1].replace(/^ *| *\| *$/g,"").split(/ *\| */),align:cap[2].replace(/^ *|\| *$/g,"").split(/ *\| */),cells:cap[3].replace(/(?: *\| *)?\n$/,"").split("\n")};for(i=0;i<item.align.length;i++)if(/^ *-+: *$/.test(item.align[i]))item.align[i]="right";else if(/^ *:-+: *$/.test(item.align[i]))item.align[i]=
+"center";else if(/^ *:-+ *$/.test(item.align[i]))item.align[i]="left";else item.align[i]=null;for(i=0;i<item.cells.length;i++)item.cells[i]=item.cells[i].replace(/^ *\| *| *\| *$/g,"").split(/ *\| */);this.tokens.push(item);continue}if(top&&(cap=this.rules.paragraph.exec(src))){src=src.substring(cap[0].length);this.tokens.push({type:"paragraph",text:cap[1][cap[1].length-1]==="\n"?cap[1].slice(0,-1):cap[1]});continue}if(cap=this.rules.text.exec(src)){src=src.substring(cap[0].length);this.tokens.push({type:"text",
+text:cap[0]});continue}if(src)throw new Error("Infinite loop on byte: "+src.charCodeAt(0));}return this.tokens};var inline={escape:/^\\([\\`*{}\[\]()#+\-.!_>])/,autolink:/^<([^ >]+(@|:\/)[^ >]+)>/,url:noop,tag:/^\x3c!--[\s\S]*?--\x3e|^<\/?\w+(?:"[^"]*"|'[^']*'|[^'">])*?>/,link:/^!?\[(inside)\]\(href\)/,reflink:/^!?\[(inside)\]\s*\[([^\]]*)\]/,nolink:/^!?\[((?:\[[^\]]*\]|[^\[\]])*)\]/,strong:/^__([\s\S]+?)__(?!_)|^\*\*([\s\S]+?)\*\*(?!\*)/,em:/^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
+code:/^(`+)\s*([\s\S]*?[^`])\s*\1(?!`)/,br:/^ {2,}\n(?!\s*$)/,del:noop,text:/^[\s\S]+?(?=[\\<!\[_*`]| {2,}\n|$)/};inline._inside=/(?:\[[^\]]*\]|[^\]]|\](?=[^\[]*\]))*/;inline._href=/\s*<?([^\s]*?)>?(?:\s+['"]([\s\S]*?)['"])?\s*/;inline.link=replace(inline.link)("inside",inline._inside)("href",inline._href)();inline.reflink=replace(inline.reflink)("inside",inline._inside)();inline.normal=merge({},inline);inline.pedantic=merge({},inline.normal,{strong:/^__(?=\S)([\s\S]*?\S)__(?!_)|^\*\*(?=\S)([\s\S]*?\S)\*\*(?!\*)/,
+em:/^_(?=\S)([\s\S]*?\S)_(?!_)|^\*(?=\S)([\s\S]*?\S)\*(?!\*)/});inline.gfm=merge({},inline.normal,{escape:replace(inline.escape)("])","~|])")(),url:/^(https?:\/\/[^\s<]+[^<.,:;"')\]\s])/,del:/^~~(?=\S)([\s\S]*?\S)~~/,text:replace(inline.text)("]|","~]|")("|","|https?://|")()});inline.breaks=merge({},inline.gfm,{br:replace(inline.br)("{2,}","*")(),text:replace(inline.gfm.text)("{2,}","*")()});function InlineLexer(links,options){this.options=options||marked.defaults;this.links=links;this.rules=inline.normal;
+if(!this.links)throw new Error("Tokens array requires a `links` property.");if(this.options.gfm)if(this.options.breaks)this.rules=inline.breaks;else this.rules=inline.gfm;else if(this.options.pedantic)this.rules=inline.pedantic}InlineLexer.rules=inline;InlineLexer.output=function(src,links,options){var inline=new InlineLexer(links,options);return inline.output(src)};InlineLexer.prototype.output=function(src){var out="",link,text,href,cap;while(src){if(cap=this.rules.escape.exec(src)){src=src.substring(cap[0].length);
+out+=cap[1];continue}if(cap=this.rules.autolink.exec(src)){src=src.substring(cap[0].length);if(cap[2]==="@"){text=cap[1][6]===":"?this.mangle(cap[1].substring(7)):this.mangle(cap[1]);href=this.mangle("mailto:")+text}else{text=escape(cap[1]);href=text}out+='<a href="'+href+'">'+text+"</a>";continue}if(cap=this.rules.url.exec(src)){src=src.substring(cap[0].length);text=escape(cap[1]);href=text;out+='<a href="'+href+'">'+text+"</a>";continue}if(cap=this.rules.tag.exec(src)){src=src.substring(cap[0].length);
+out+=this.options.sanitize?escape(cap[0]):cap[0];continue}if(cap=this.rules.link.exec(src)){src=src.substring(cap[0].length);out+=this.outputLink(cap,{href:cap[2],title:cap[3]});continue}if((cap=this.rules.reflink.exec(src))||(cap=this.rules.nolink.exec(src))){src=src.substring(cap[0].length);link=(cap[2]||cap[1]).replace(/\s+/g," ");link=this.links[link.toLowerCase()];if(!link||!link.href){out+=cap[0][0];src=cap[0].substring(1)+src;continue}out+=this.outputLink(cap,link);continue}if(cap=this.rules.strong.exec(src)){src=
+src.substring(cap[0].length);out+="<strong>"+this.output(cap[2]||cap[1])+"</strong>";continue}if(cap=this.rules.em.exec(src)){src=src.substring(cap[0].length);out+="<em>"+this.output(cap[2]||cap[1])+"</em>";continue}if(cap=this.rules.code.exec(src)){src=src.substring(cap[0].length);out+="<code>"+escape(cap[2],true)+"</code>";continue}if(cap=this.rules.br.exec(src)){src=src.substring(cap[0].length);out+="<br>";continue}if(cap=this.rules.del.exec(src)){src=src.substring(cap[0].length);out+="<del>"+
+this.output(cap[1])+"</del>";continue}if(cap=this.rules.text.exec(src)){src=src.substring(cap[0].length);out+=escape(cap[0]);continue}if(src)throw new Error("Infinite loop on byte: "+src.charCodeAt(0));}return out};InlineLexer.prototype.outputLink=function(cap,link){if(cap[0][0]!=="!")return'<a href="'+escape(link.href)+'"'+(link.title?' title="'+escape(link.title)+'"':"")+">"+this.output(cap[1])+"</a>";else return'<img src="'+escape(link.href)+'" alt="'+escape(cap[1])+'"'+(link.title?' title="'+
+escape(link.title)+'"':"")+">"};InlineLexer.prototype.smartypants=function(text){if(!this.options.smartypants)return text;return text.replace(/--/g,"\u2014").replace(/'([^']*)'/g,"\u2018$1\u2019").replace(/"([^"]*)"/g,"\u201c$1\u201d").replace(/\.{3}/g,"\u2026")};InlineLexer.prototype.mangle=function(text){var out="",l=text.length,i=0,ch;for(;i<l;i++){ch=text.charCodeAt(i);if(Math.random()>0.5)ch="x"+ch.toString(16);out+="&#"+ch+";"}return out};function Parser(options){this.tokens=[];this.token=null;
+this.options=options||marked.defaults}Parser.parse=function(src,options){var parser=new Parser(options);return parser.parse(src)};Parser.prototype.parse=function(src){this.inline=new InlineLexer(src.links,this.options);this.tokens=src.reverse();var out="";while(this.next())out+=this.tok();return out};Parser.prototype.next=function(){return this.token=this.tokens.pop()};Parser.prototype.peek=function(){return this.tokens[this.tokens.length-1]||0};Parser.prototype.parseText=function(){var body=this.token.text;
+while(this.peek().type==="text")body+="\n"+this.next().text;return this.inline.output(body)};Parser.prototype.tok=function(){switch(this.token.type){case "space":return"";case "hr":return"<hr>\n";case "heading":return"<h"+this.token.depth+">"+this.inline.output(this.token.text)+"</h"+this.token.depth+">\n";case "code":if(this.options.highlight){var code=this.options.highlight(this.token.text,this.token.lang);if(code!=null&&code!==this.token.text){this.token.escaped=true;this.token.text=code}}if(!this.token.escaped)this.token.text=
+escape(this.token.text,true);return"<pre><code"+(this.token.lang?' class="'+this.options.langPrefix+this.token.lang+'"':"")+">"+this.token.text+"</code></pre>\n";case "table":var body="",heading,i,row,cell,j;body+="<thead>\n<tr>\n";for(i=0;i<this.token.header.length;i++){heading=this.inline.output(this.token.header[i]);body+=this.token.align[i]?'<th align="'+this.token.align[i]+'">'+heading+"</th>\n":"<th>"+heading+"</th>\n"}body+="</tr>\n</thead>\n";body+="<tbody>\n";for(i=0;i<this.token.cells.length;i++){row=
+this.token.cells[i];body+="<tr>\n";for(j=0;j<row.length;j++){cell=this.inline.output(row[j]);body+=this.token.align[j]?'<td align="'+this.token.align[j]+'">'+cell+"</td>\n":"<td>"+cell+"</td>\n"}body+="</tr>\n"}body+="</tbody>\n";return"<table>\n"+body+"</table>\n";case "blockquote_start":var body="";while(this.next().type!=="blockquote_end")body+=this.tok();return"<blockquote>\n"+body+"</blockquote>\n";case "list_start":var type=this.token.ordered?"ol":"ul",body="";while(this.next().type!=="list_end")body+=
+this.tok();return"<"+type+">\n"+body+"</"+type+">\n";case "list_item_start":var body="";while(this.next().type!=="list_item_end")body+=this.token.type==="text"?this.parseText():this.tok();return"<li>"+body+"</li>\n";case "loose_item_start":var body="";while(this.next().type!=="list_item_end")body+=this.tok();return"<li>"+body+"</li>\n";case "html":return!this.token.pre&&!this.options.pedantic?this.inline.output(this.token.text):this.token.text;case "paragraph":return"<p>"+this.inline.output(this.token.text)+
+"</p>\n";case "text":return"<p>"+this.parseText()+"</p>\n"}};function escape(html,encode){return html.replace(!encode?/&(?!#?\w+;)/g:/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function replace(regex,opt){regex=regex.source;opt=opt||"";return function self(name,val){if(!name)return new RegExp(regex,opt);val=val.source||val;val=val.replace(/(^|[^\[])\^/g,"$1");regex=regex.replace(name,val);return self}}function noop(){}noop.exec=noop;function merge(obj){var i=
+1,target,key;for(;i<arguments.length;i++){target=arguments[i];for(key in target)if(Object.prototype.hasOwnProperty.call(target,key))obj[key]=target[key]}return obj}function marked(src,opt,callback){if(callback||typeof opt==="function"){if(!callback){callback=opt;opt=null}if(opt)opt=merge({},marked.defaults,opt);var tokens=Lexer.lex(tokens,opt),highlight=opt.highlight,pending=0,l=tokens.length,i=0;if(!highlight||highlight.length<3)return callback(null,Parser.parse(tokens,opt));var done=function(){delete opt.highlight;
+var out=Parser.parse(tokens,opt);opt.highlight=highlight;return callback(null,out)};for(;i<l;i++)(function(token){if(token.type!=="code")return;pending++;return highlight(token.text,token.lang,function(err,code){if(code==null||code===token.text)return--pending||done();token.text=code;token.escaped=true;--pending||done()})})(tokens[i]);return}try{if(opt)opt=merge({},marked.defaults,opt);return Parser.parse(Lexer.lex(src,opt),opt)}catch(e){e.message+="\nPlease report this to https://github.com/chjj/marked.";
+if((opt||marked.defaults).silent)return"<p>An error occured:</p><pre>"+escape(e.message+"",true)+"</pre>";throw e;}}marked.options=marked.setOptions=function(opt){merge(marked.defaults,opt);return marked};marked.defaults={gfm:true,tables:true,breaks:false,pedantic:false,sanitize:false,smartLists:false,silent:false,highlight:null,langPrefix:""};marked.Parser=Parser;marked.parser=Parser.parse;marked.Lexer=Lexer;marked.lexer=Lexer.lex;marked.InlineLexer=InlineLexer;marked.inlineLexer=InlineLexer.output;
+marked.parse=marked;if(typeof exports==="object")module.exports=marked;else if(typeof define==="function"&&define.amd)define(function(){return marked});else this.marked=marked}).call(function(){return this||(typeof window!=="undefined"?window:global)}());

plugin/multiplex/client.js

@@ -0,0 +1,13 @@
+(function() {
+	var multiplex = Reveal.getConfig().multiplex;
+	var socketId = multiplex.id;
+	var socket = io.connect(multiplex.url);
+
+	socket.on(multiplex.id, function(data) {
+		// ignore data from sockets that aren't ours
+		if (data.socketId !== socketId) { return; }
+		if( window.location.host === 'localhost:1947' ) return;
+
+		Reveal.slide(data.indexh, data.indexv, data.indexf, 'remote');
+	});
+}());

plugin/multiplex/index.js

@@ -0,0 +1,55 @@
+var express		= require('express');
+var fs			= require('fs');
+var io			= require('socket.io');
+var crypto		= require('crypto');
+
+var app			= express.createServer();
+var staticDir	= express.static;
+
+io				= io.listen(app);
+
+var opts = {
+	port: 1948,
+	baseDir : __dirname + '/../../'
+};
+
+io.sockets.on('connection', function(socket) {
+	socket.on('slidechanged', function(slideData) {
+		if (typeof slideData.secret == 'undefined' || slideData.secret == null || slideData.secret === '') return;
+		if (createHash(slideData.secret) === slideData.socketId) {
+			slideData.secret = null;
+			socket.broadcast.emit(slideData.socketId, slideData);
+		};
+	});
+});
+
+app.configure(function() {
+	[ 'css', 'js', 'plugin', 'lib' ].forEach(function(dir) {
+		app.use('/' + dir, staticDir(opts.baseDir + dir));
+	});
+});
+
+app.get("/", function(req, res) {
+	fs.createReadStream(opts.baseDir + '/index.html').pipe(res);
+});
+
+app.get("/token", function(req,res) {
+	var ts = new Date().getTime();
+	var rand = Math.floor(Math.random()*9999999);
+	var secret = ts.toString() + rand.toString();
+	res.send({secret: secret, socketId: createHash(secret)});
+});
+
+var createHash = function(secret) {
+	var cipher = crypto.createCipher('blowfish', secret);
+	return(cipher.final('hex'));
+};
+
+// Actually listen
+app.listen(opts.port || null);
+
+var brown = '\033[33m',
+	green = '\033[32m',
+	reset = '\033[0m';
+
+console.log( brown + "reveal.js:" + reset + " Multiplex running on port " + green + opts.port + reset );

plugin/multiplex/master.js

@@ -0,0 +1,50 @@
+(function() {
+	// don't emit events from inside the previews themselves
+	if ( window.location.search.match( /receiver/gi ) ) { return; }
+	var multiplex = Reveal.getConfig().multiplex;
+
+	var socket = io.connect(multiplex.url);
+
+	var notify = function( slideElement, indexh, indexv, origin ) {
+		if( typeof origin === 'undefined' && origin !== 'remote' ) {
+			var nextindexh;
+			var nextindexv;
+
+			var fragmentindex = Reveal.getIndices().f;
+			if (typeof fragmentindex == 'undefined') {
+				fragmentindex = 0;
+			}
+
+			if (slideElement.nextElementSibling && slideElement.parentNode.nodeName == 'SECTION') {
+				nextindexh = indexh;
+				nextindexv = indexv + 1;
+			} else {
+				nextindexh = indexh + 1;
+				nextindexv = 0;
+			}
+
+			var slideData = {
+				indexh : indexh,
+				indexv : indexv,
+				indexf : fragmentindex,
+				nextindexh : nextindexh,
+				nextindexv : nextindexv,
+				secret: multiplex.secret,
+				socketId : multiplex.id
+			};
+
+			socket.emit('slidechanged', slideData);
+		}
+	}
+
+	Reveal.addEventListener( 'slidechanged', function( event ) {
+		notify( event.currentSlide, event.indexh, event.indexv, event.origin );
+	} );
+
+	var fragmentNotify = function( event ) {
+		notify( Reveal.getCurrentSlide(), Reveal.getIndices().h, Reveal.getIndices().v, event.origin );
+	};
+
+	Reveal.addEventListener( 'fragmentshown', fragmentNotify );
+	Reveal.addEventListener( 'fragmenthidden', fragmentNotify );
+}());

plugin/notes-server/notes.html

@@ -99,7 +99,7 @@
 		<div id="notes"></div>
 
 		<script src="/socket.io/socket.io.js"></script>
-		<script src="/plugin/markdown/showdown.js"></script>
+		<script src="/plugin/markdown/marked.js"></script>
 
 		<script>
 		var socketId = '{{socketId}}';
@@ -113,7 +113,7 @@
 			if (data.socketId !== socketId) { return; }
 
 			if (data.markdown) {
-				notes.innerHTML = (new Showdown.converter()).makeHtml(data.notes);
+				notes.innerHTML = marked(data.notes);
 			}
 			else {
 				notes.innerHTML = data.notes;

plugin/notes/notes.html

@@ -29,16 +29,16 @@
 				border: none;
 
 				-webkit-transform-origin: 0 0;
-					 -moz-transform-origin: 0 0;
-						-ms-transform-origin: 0 0;
-						 -o-transform-origin: 0 0;
-								transform-origin: 0 0;
+				   -moz-transform-origin: 0 0;
+					-ms-transform-origin: 0 0;
+					 -o-transform-origin: 0 0;
+						transform-origin: 0 0;
 
 				-webkit-transform: scale(0.5);
-					 -moz-transform: scale(0.5);
-						-ms-transform: scale(0.5);
-						 -o-transform: scale(0.5);
-								transform: scale(0.5);
+				   -moz-transform: scale(0.5);
+					-ms-transform: scale(0.5);
+					 -o-transform: scale(0.5);
+						transform: scale(0.5);
 			}
 
 			#wrap-next-slide {
@@ -55,16 +55,16 @@
 				border: none;
 
 				-webkit-transform-origin: 0 0;
-					 -moz-transform-origin: 0 0;
-						-ms-transform-origin: 0 0;
-						 -o-transform-origin: 0 0;
-								transform-origin: 0 0;
+				   -moz-transform-origin: 0 0;
+					-ms-transform-origin: 0 0;
+					 -o-transform-origin: 0 0;
+						transform-origin: 0 0;
 
 				-webkit-transform: scale(0.35);
-					 -moz-transform: scale(0.35);
-						-ms-transform: scale(0.35);
-						 -o-transform: scale(0.35);
-								transform: scale(0.35);
+				   -moz-transform: scale(0.35);
+					-ms-transform: scale(0.35);
+					 -o-transform: scale(0.35);
+						transform: scale(0.35);
 			}
 
 			.slides {
@@ -83,26 +83,89 @@
 				font-size: 14px;
 				color: rgba( 255, 255, 255, 0.9 );
 			}
+
+			.error {
+				font-weight: bold;
+				color: red;
+				font-size: 1.5em;
+				text-align: center;
+				margin-top: 10%;
+			}
+
+			.error code {
+				font-family: monospace;
+			}
+
+			.time {
+				width: 448px;
+				margin: 30px 0 0 10px;
+				float: left;
+				text-align: center;
+				opacity: 0;
+
+				-webkit-transition: opacity 0.4s;
+				   -moz-transition: opacity 0.4s;
+				     -o-transition: opacity 0.4s;
+				        transition: opacity 0.4s;
+			}
+
+			.elapsed,
+			.clock {
+				color: #333;
+				font-size: 2em;
+				text-align: center;
+				display: inline-block;
+				padding: 0.5em;
+				background-color: #eee;
+				border-radius: 10px;
+			}
+
+			.elapsed h2,
+			.clock h2 {
+				font-size: 0.8em;
+				line-height: 100%;
+				margin: 0;
+				color: #aaa;
+			}
+
+			.elapsed .mute {
+				color: #ddd;
+			}
+
 		</style>
 	</head>
 
 	<body>
 
 		<div id="wrap-current-slide" class="slides">
-			<iframe src="../../index.html" width="1280" height="1024" id="current-slide"></iframe>
+			<script>document.write( '<iframe width="1280" height="1024" id="current-slide" src="'+ window.opener.location.href +'"></iframe>' );</script>
 		</div>
 
 		<div id="wrap-next-slide" class="slides">
-			<iframe src="../../index.html" width="640" height="512" id="next-slide"></iframe>
+			<script>document.write( '<iframe width="640" height="512" id="next-slide" src="'+ window.opener.location.href +'"></iframe>' );</script>
 			<span>UPCOMING:</span>
 		</div>
+
+		<div class="time">
+			<div class="clock">
+				<h2>Time</h2>
+				<span id="clock">0:00:00 AM</span>
+			</div>
+			<div class="elapsed">
+				<h2>Elapsed</h2>
+				<span id="hours">00</span><span id="minutes">:00</span><span id="seconds">:00</span>
+			</div>
+		</div>
+
 		<div id="notes"></div>
 
-		<script src="../../plugin/markdown/showdown.js"></script>
+		<script src="../../plugin/markdown/marked.js"></script>
 		<script>
+
 			window.addEventListener( 'load', function() {
 
-				(function( window, undefined ) {
+				if( window.opener && window.opener.location && window.opener.location.href ) {
+
 					var notes = document.getElementById( 'notes' ),
 						currentSlide = document.getElementById( 'current-slide' ),
 						nextSlide = document.getElementById( 'next-slide' );
@@ -112,17 +175,13 @@
 						// No need for updating the notes in case of fragment changes
 						if ( data.notes !== undefined) {
 							if( data.markdown ) {
-								notes.innerHTML = (new Showdown.converter()).makeHtml( data.notes );
+								notes.innerHTML = marked( data.notes );
 							}
 							else {
 								notes.innerHTML = data.notes;
 							}
 						}
 
-						// Update the note slides
-						currentSlide.contentWindow.Reveal.slide( data.indexh, data.indexv );
-						nextSlide.contentWindow.Reveal.slide( data.nextindexh, data.nextindexv );
-
 						// Showing and hiding fragments
 						if( data.fragment === 'next' ) {
 							currentSlide.contentWindow.Reveal.nextFragment();
@@ -130,13 +189,64 @@
 						else if( data.fragment === 'prev' ) {
 							currentSlide.contentWindow.Reveal.prevFragment();
 						}
+						else {
+							// Update the note slides
+							currentSlide.contentWindow.Reveal.slide( data.indexh, data.indexv );
+							nextSlide.contentWindow.Reveal.slide( data.nextindexh, data.nextindexv );
+						}
 
 					}, false );
 
-				})( window );
+					var start = new Date(),
+						timeEl = document.querySelector( '.time' ),
+						clockEl = document.getElementById( 'clock' ),
+						hoursEl = document.getElementById( 'hours' ),
+						minutesEl = document.getElementById( 'minutes' ),
+						secondsEl = document.getElementById( 'seconds' );
+
+					setInterval( function() {
+
+						timeEl.style.opacity = 1;
+
+						var diff, hours, minutes, seconds,
+							now = new Date();
+
+						diff = now.getTime() - start.getTime();
+						hours = parseInt( diff / ( 1000 * 60 * 60 ) );
+						minutes = parseInt( ( diff / ( 1000 * 60 ) ) % 60 );
+						seconds = parseInt( ( diff / 1000 ) % 60 );
+
+						clockEl.innerHTML = now.toLocaleTimeString();
+						hoursEl.innerHTML = zeroPadInteger( hours );
+						hoursEl.className = hours > 0 ? "" : "mute";
+						minutesEl.innerHTML = ":" + zeroPadInteger( minutes );
+						minutesEl.className = minutes > 0 ? "" : "mute";
+						secondsEl.innerHTML = ":" + zeroPadInteger( seconds );
+
+					}, 1000 );
+
+					// Navigate the main window when the notes slide changes
+					currentSlide.contentWindow.Reveal.addEventListener( 'slidechanged', function( event ) {
+
+						window.opener.Reveal.slide( event.indexh, event.indexv );
+
+					} );
+
+				}
+				else {
+
+					document.body.innerHTML =  '<p class="error">Unable to access <code>window.opener.location</code>.<br>Make sure the presentation is running on a web server.</p>';
+
+				}
+
 
 			}, false );
 
+			function zeroPadInteger( num ) {
+				var str = "00" + parseInt( num );
+				return str.substring( str.length - 2 );
+			}
+
 		</script>
 	</body>
 </html>

plugin/notes/notes.js

@@ -5,7 +5,9 @@
 var RevealNotes = (function() {
 
 	function openNotes() {
-		var notesPopup = window.open( 'plugin/notes/notes.html', 'reveal.js - Notes', 'width=1120,height=850' );
+		var jsFileLocation = document.querySelector('script[src$="notes.js"]').src;  // this js file path
+		jsFileLocation = jsFileLocation.replace(/notes\.js(\?.*)?$/, '');   // the js folder path
+		var notesPopup = window.open( jsFileLocation + 'notes.html', 'reveal.js - Notes', 'width=1120,height=850' );
 
 		// Fires when slide is changed
 		Reveal.addEventListener( 'slidechanged', function( event ) {

plugin/postmessage/example.html

@@ -0,0 +1,39 @@
+<html>
+	<body>
+
+		<iframe id="reveal" src="../../index.html" style="border: 0;" width="500" height="500"></iframe>
+
+		<div>
+			<input id="back" type="button" value="go back"/>
+			<input id="ahead" type="button" value="go ahead"/>
+			<input id="slideto" type="button" value="slideto 2-2"/>
+		</div>
+
+		<script>
+
+			(function (){
+
+				var back = document.getElementById( 'back' ),
+						ahead = document.getElementById( 'ahead' ),
+						slideto = document.getElementById( 'slideto' ),
+						reveal =  window.frames[0];
+
+					back.addEventListener( 'click', function () {
+						
+					reveal.postMessage( JSON.stringify({method: 'prev', args: []}), '*' );
+				}, false );
+
+				ahead.addEventListener( 'click', function (){
+					reveal.postMessage( JSON.stringify({method: 'next', args: []}), '*' );
+				}, false );
+
+				slideto.addEventListener( 'click', function (){
+					reveal.postMessage( JSON.stringify({method: 'slide', args: [2,2]}), '*' );
+				}, false );
+
+			}());
+
+		</script>
+
+	</body>
+</html>

plugin/postmessage/postmessage.js

@@ -0,0 +1,42 @@
+/*
+
+	simple postmessage plugin
+
+	Useful when a reveal slideshow is inside an iframe.
+	It allows to call reveal methods from outside.
+
+	Example:
+		 var reveal =  window.frames[0];
+
+		 // Reveal.prev(); 
+		 reveal.postMessage(JSON.stringify({method: 'prev', args: []}), '*');
+		 // Reveal.next(); 
+		 reveal.postMessage(JSON.stringify({method: 'next', args: []}), '*');
+		 // Reveal.slide(2, 2); 
+		 reveal.postMessage(JSON.stringify({method: 'slide', args: [2,2]}), '*');
+
+	Add to the slideshow:
+
+		dependencies: [
+			...
+			{ src: 'plugin/postmessage/postmessage.js', async: true, condition: function() { return !!document.body.classList; } }
+		]
+
+*/
+
+(function (){
+
+	window.addEventListener( "message", function ( event ) {
+		var data = JSON.parse( event.data ),
+				method = data.method,
+				args = data.args;
+
+		if( typeof Reveal[method] === 'function' ) {
+			Reveal[method].apply( Reveal, data.args );
+		}
+	}, false);
+
+}());
+
+
+

plugin/print-pdf/print-pdf.js

@@ -0,0 +1,39 @@
+/**
+ * phantomjs script for printing presentations to PDF.
+ *
+ * Example:
+ * phantomjs print-pdf.js "http://lab.hakim.se/reveal-js?print-pdf" reveal-demo.pdf
+ *
+ * By Manuel Bieh (https://github.com/manuelbieh)
+ */
+
+// html2pdf.js
+var page = new WebPage();
+var system = require( 'system' );
+
+page.paperSize = {
+	format: 'A4',
+	orientation: 'landscape',
+	margin: {
+		left: '0',
+		right: '0',
+		top: '0',
+		bottom: '0'
+	}
+};
+page.zoomFactor = 1.5;
+
+var revealFile = system.args[1] || 'index.html?print-pdf';
+var slideFile = system.args[2] || 'slides.pdf';
+
+if( slideFile.match( /\.pdf$/gi ) === null ) {
+	slideFile += '.pdf';
+}
+
+console.log( 'Printing PDF...' );
+
+page.open( revealFile, function( status ) {
+	console.log( 'Printed succesfully' );
+	page.render( slideFile );
+	phantom.exit();
+} );

plugin/remotes/remotes.js

@@ -0,0 +1,39 @@
+/**
+ * Touch-based remote controller for your presentation courtesy 
+ * of the folks at http://remotes.io
+ */
+
+(function(window){
+
+    /**
+     * Detects if we are dealing with a touch enabled device (with some false positives)
+     * Borrowed from modernizr: https://github.com/Modernizr/Modernizr/blob/master/feature-detects/touch.js   
+     */
+    var hasTouch  = (function(){
+        return ('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch;
+    })();
+
+    /**
+     * Detects if notes are enable and the current page is opened inside an /iframe
+     * this prevents loading Remotes.io several times
+     */
+    var remotesAndIsNotes = (function(){
+      return !(window.RevealNotes && self == top);
+    })();
+
+    if(!hasTouch && !remotesAndIsNotes){
+        head.ready( 'remotes.ne.min.js', function() {
+            new Remotes("preview")
+                .on("swipe-left", function(e){ Reveal.right(); })
+                .on("swipe-right", function(e){ Reveal.left(); })
+                .on("swipe-up", function(e){ Reveal.down(); })
+                .on("swipe-down", function(e){ Reveal.up(); })
+                .on("tap", function(e){ Reveal.next(); })
+                .on("zoom-out", function(e){ Reveal.toggleOverview(true); })
+                .on("zoom-in", function(e){ Reveal.toggleOverview(false); })
+            ;
+        } );
+
+        head.js('https://raw.github.com/Remotes/Remotes/master/dist/remotes.ne.min.js');
+    }
+})(window);

plugin/search/search.js

@@ -0,0 +1,196 @@
+/*
+ * Handles finding a text string anywhere in the slides and showing the next occurrence to the user
+ * by navigatating to that slide and highlighting it.
+ *
+ * By Jon Snyder <snyder.jon@gmail.com>, February 2013
+ */
+
+var RevealSearch = (function() {
+
+	var matchedSlides;
+	var currentMatchedIndex;
+	var searchboxDirty;
+	var myHilitor;
+
+// Original JavaScript code by Chirp Internet: www.chirp.com.au
+// Please acknowledge use of this code by including this header.
+// 2/2013 jon: modified regex to display any match, not restricted to word boundaries.
+
+function Hilitor(id, tag)
+{
+
+  var targetNode = document.getElementById(id) || document.body;
+  var hiliteTag = tag || "EM";
+  var skipTags = new RegExp("^(?:" + hiliteTag + "|SCRIPT|FORM|SPAN)$");
+  var colors = ["#ff6", "#a0ffff", "#9f9", "#f99", "#f6f"];
+  var wordColor = [];
+  var colorIdx = 0;
+  var matchRegex = "";
+  var matchingSlides = [];
+
+  this.setRegex = function(input)
+  {
+    input = input.replace(/^[^\w]+|[^\w]+$/g, "").replace(/[^\w'-]+/g, "|");
+    matchRegex = new RegExp("(" + input + ")","i");
+  }
+
+  this.getRegex = function()
+  {
+    return matchRegex.toString().replace(/^\/\\b\(|\)\\b\/i$/g, "").replace(/\|/g, " ");
+  }
+
+  // recursively apply word highlighting
+  this.hiliteWords = function(node)
+  {
+    if(node == undefined || !node) return;
+    if(!matchRegex) return;
+    if(skipTags.test(node.nodeName)) return;
+
+    if(node.hasChildNodes()) {
+      for(var i=0; i < node.childNodes.length; i++)
+        this.hiliteWords(node.childNodes[i]);
+    }
+    if(node.nodeType == 3) { // NODE_TEXT
+      if((nv = node.nodeValue) && (regs = matchRegex.exec(nv))) {
+      	//find the slide's section element and save it in our list of matching slides
+      	var secnode = node.parentNode;
+      	while (secnode.nodeName != 'SECTION') {
+      		secnode = secnode.parentNode;
+      	}
+      	
+      	var slideIndex = Reveal.getIndices(secnode);
+      	var slidelen = matchingSlides.length;
+      	var alreadyAdded = false;
+      	for (var i=0; i < slidelen; i++) {
+      		if ( (matchingSlides[i].h === slideIndex.h) && (matchingSlides[i].v === slideIndex.v) ) {
+      			alreadyAdded = true;
+      		}
+      	}
+      	if (! alreadyAdded) {
+      		matchingSlides.push(slideIndex);
+      	}
+      	
+        if(!wordColor[regs[0].toLowerCase()]) {
+          wordColor[regs[0].toLowerCase()] = colors[colorIdx++ % colors.length];
+        }
+
+        var match = document.createElement(hiliteTag);
+        match.appendChild(document.createTextNode(regs[0]));
+        match.style.backgroundColor = wordColor[regs[0].toLowerCase()];
+        match.style.fontStyle = "inherit";
+        match.style.color = "#000";
+
+        var after = node.splitText(regs.index);
+        after.nodeValue = after.nodeValue.substring(regs[0].length);
+        node.parentNode.insertBefore(match, after);
+      }
+    }
+  };
+
+  // remove highlighting
+  this.remove = function()
+  {
+    var arr = document.getElementsByTagName(hiliteTag);
+    while(arr.length && (el = arr[0])) {
+      el.parentNode.replaceChild(el.firstChild, el);
+    }
+  };
+
+  // start highlighting at target node
+  this.apply = function(input)
+  {
+    if(input == undefined || !input) return;
+    this.remove();
+    this.setRegex(input);
+    this.hiliteWords(targetNode);
+    return matchingSlides;
+  };
+
+}
+
+	function openSearch() {
+		//ensure the search term input dialog is visible and has focus:
+		var inputbox = document.getElementById("searchinput");
+		inputbox.style.display = "inline";
+		inputbox.focus();
+		inputbox.select();
+	}
+
+	function toggleSearch() {
+		var inputbox = document.getElementById("searchinput");
+		if (inputbox.style.display !== "inline") {
+			openSearch();
+		}
+		else {
+			inputbox.style.display = "none";
+			myHilitor.remove();
+		}
+	}
+
+	function doSearch() {
+		//if there's been a change in the search term, perform a new search:
+		if (searchboxDirty) {
+			var searchstring = document.getElementById("searchinput").value;
+
+			//find the keyword amongst the slides
+			myHilitor = new Hilitor("slidecontent");
+			matchedSlides = myHilitor.apply(searchstring);
+			currentMatchedIndex = 0;
+		}
+
+		//navigate to the next slide that has the keyword, wrapping to the first if necessary
+		if (matchedSlides.length && (matchedSlides.length <= currentMatchedIndex)) {
+			currentMatchedIndex = 0;
+		}
+		if (matchedSlides.length > currentMatchedIndex) {
+			Reveal.slide(matchedSlides[currentMatchedIndex].h, matchedSlides[currentMatchedIndex].v);
+			currentMatchedIndex++;
+		}
+	}
+
+	var dom = {};
+	dom.wrapper = document.querySelector( '.reveal' );
+
+	if( !dom.wrapper.querySelector( '.searchbox' ) ) {
+			var searchElement = document.createElement( 'div' );
+			searchElement.id = "searchinputdiv";
+			searchElement.classList.add( 'searchdiv' );
+      searchElement.style.position = 'absolute';
+      searchElement.style.top = '10px';
+      searchElement.style.left = '10px';
+      //embedded base64 search icon Designed by Sketchdock - http://www.sketchdock.com/:
+			searchElement.innerHTML = '<span><input type="search" id="searchinput" class="searchinput" style="vertical-align: top;"/><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAJiSURBVHjatFZNaxNBGH5md+Mmu92NVdKDRipSAyqCghgQD4L4cRe86UUtAQ+eFCxoa4/25EXBFi8eBE+eRPoDhB6KgiiixdAPCEkx2pjvTXadd9yNsflwuyUDD/O+u8PzzDPvzOwyx3EwyCZhwG3gAkp7MnpjgbopjsltcD4gjuXZZKeAR348MYLYTm3LzOs/y3j3JTfZxgXWXmTuwPHIc4VmoOmv5IrI53+AO2DdHLjkDWQ3GoEEVFXtXQOvkSnPWcyUceviLhwbDYv8/XIVj97kse7TodLvZXxYxrPUHkQ1ufXs3FEdybEIxucySOesoNvUgWU1cP3MkCBfTFdw9fGaAMVmRELq7LBw2Q3/FaAxxWIRpw+ZIr/7IouPqzUBiqmdHAv7EuhRAwf1er2Vy4x1jW3b2d5Jfvu5IPp7l2LYbcgCFFNb+FoJ7oBqEAqFMPNqFcmEgVMJDfMT+1tvN0pNjERlMS6QA5pFOKxiKVPFhakPeL3It+WGJUDxt2wFR+JhzI7v5ctkd8DXOZAkCYYxhO+lKm4+Xfqz/rIixBuNBl7eOYzkQQNzqX249mRl6zUgEcYkaJrGhUwBinVdh6IouPzwE6/DL5w4oLkH8y981aDf+uq6hlKpJESiUdNfDZi7/ehG9K6KfiA3pml0PLcsq+cSMTj2NL9ukc4UOmz7AZ3+crkC4mHujFvXNaMFB3bEr8xPS6p5O+jXxq4VZtaen7/PwzrntjcLUE0iHPS1Ud1cdiEJl/8WivZk0wXd7zWOMkeF8s0CcAmkNrC2nvXZDbbbN73ccYnZoH9bfgswAFzAe9/h3dbKAAAAAElFTkSuQmCC" id="searchbutton" class="searchicon" style="vertical-align: top; margin-top: -1px;"/></span>';
+			dom.wrapper.appendChild( searchElement );
+	}
+
+	document.getElementById("searchbutton").addEventListener( 'click', function(event) {
+		doSearch();
+	}, false );
+
+	document.getElementById("searchinput").addEventListener( 'keyup', function( event ) {
+		switch (event.keyCode) {
+			case 13:
+				event.preventDefault();
+				doSearch();
+				searchboxDirty = false;
+				break;
+			default:
+				searchboxDirty = true;
+		}
+	}, false );
+
+	// Open the search when the 's' key is hit (yes, this conflicts with the notes plugin, disabling for now)
+	/*
+	document.addEventListener( 'keydown', function( event ) {
+		// Disregard the event if the target is editable or a
+		// modifier is present
+		if ( document.querySelector( ':focus' ) !== null || event.shiftKey || event.altKey || event.ctrlKey || event.metaKey ) return;
+
+		if( event.keyCode === 83 ) {
+			event.preventDefault();
+			openSearch();
+		}
+	}, false );
+*/
+	return { open: openSearch };
+})();

plugin/zoom-js/zoom.js

@@ -1,29 +1,34 @@
 // Custom reveal.js integration
 (function(){
-	document.querySelector( '.reveal' ).addEventListener( 'click', function( event ) {
-		if( event.altKey ) {
+	var isEnabled = true;
+
+	document.querySelector( '.reveal' ).addEventListener( 'mousedown', function( event ) {
+		if( event.altKey && isEnabled ) {
 			event.preventDefault();
 			zoom.to({ element: event.target, pan: false });
 		}
 	} );
+
+	Reveal.addEventListener( 'overviewshown', function() { isEnabled = false; } );
+	Reveal.addEventListener( 'overviewhidden', function() { isEnabled = true; } );
 })();
 
 /*!
  * zoom.js 0.2 (modified version for use with reveal.js)
  * http://lab.hakim.se/zoom-js
  * MIT licensed
- * 
+ *
  * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
  */
 var zoom = (function(){
 
 	// The current zoom level (scale)
 	var level = 1;
-	
+
 	// The current mouse position, used for panning
 	var mouseX = 0,
 		mouseY = 0;
-	
+
 	// Timeout before pan is activated
 	var panEngageTimeout = -1,
 		panUpdateInterval = -1;
@@ -36,7 +41,7 @@ var zoom = (function(){
 								'msTransform' in document.body.style ||
 								'OTransform' in document.body.style ||
 								'transform' in document.body.style;
-    
+
 	if( supportsTransforms ) {
 		// The easing that will be applied when we zoom in/out
 		document.body.style.transition = 'transform 0.8s ease';
@@ -45,7 +50,7 @@ var zoom = (function(){
 		document.body.style.MozTransition = '-moz-transform 0.8s ease';
 		document.body.style.WebkitTransition = '-webkit-transform 0.8s ease';
 	}
-	
+
 	// Zoom out if the user hits escape
 	document.addEventListener( 'keyup', function( event ) {
 		if( level !== 1 && event.keyCode === 27 ) {
@@ -62,21 +67,21 @@ var zoom = (function(){
 	}, false );
 
 	/**
-	 * Applies the CSS required to zoom in, prioritizes use of CSS3 
+	 * Applies the CSS required to zoom in, prioritizes use of CSS3
 	 * transforms but falls back on zoom for IE.
-	 * 
-	 * @param {Number} pageOffsetX 
-	 * @param {Number} pageOffsetY 
-	 * @param {Number} elementOffsetX 
-	 * @param {Number} elementOffsetY 
-	 * @param {Number} scale 
+	 *
+	 * @param {Number} pageOffsetX
+	 * @param {Number} pageOffsetY
+	 * @param {Number} elementOffsetX
+	 * @param {Number} elementOffsetY
+	 * @param {Number} scale
 	 */
 	function magnify( pageOffsetX, pageOffsetY, elementOffsetX, elementOffsetY, scale ) {
 
 		if( supportsTransforms ) {
 			var origin = pageOffsetX +'px '+ pageOffsetY +'px',
 				transform = 'translate('+ -elementOffsetX +'px,'+ -elementOffsetY +'px) scale('+ scale +')';
-			
+
 			document.body.style.transformOrigin = origin;
 			document.body.style.OTransformOrigin = origin;
 			document.body.style.msTransformOrigin = origin;
@@ -121,7 +126,7 @@ var zoom = (function(){
 	}
 
 	/**
-	 * Pan the document when the mosue cursor approaches the edges 
+	 * Pan the document when the mosue cursor approaches the edges
 	 * of the window.
 	 */
 	function pan() {
@@ -129,7 +134,7 @@ var zoom = (function(){
 			rangeX = window.innerWidth * range,
 			rangeY = window.innerHeight * range,
 			scrollOffset = getScrollOffset();
-		
+
 		// Up
 		if( mouseY < rangeY ) {
 			window.scroll( scrollOffset.x, scrollOffset.y - ( 1 - ( mouseY / rangeY ) ) * ( 14 / level ) );
@@ -159,7 +164,7 @@ var zoom = (function(){
 	return {
 		/**
 		 * Zooms in on either a rectangle or HTML element.
-		 * 
+		 *
 		 * @param {Object} options
 		 *   - element: HTML element to zoom in on
 		 *   OR
@@ -232,7 +237,7 @@ var zoom = (function(){
 			if( currentOptions && currentOptions.element ) {
 				scrollOffset.x -= ( window.innerWidth - ( currentOptions.width * currentOptions.scale ) ) / 2;
 			}
-			
+
 			magnify( scrollOffset.x, scrollOffset.y, 0, 0, 1 );
 
 			level = 1;
@@ -241,11 +246,11 @@ var zoom = (function(){
 		// Alias
 		magnify: function( options ) { this.to( options ) },
 		reset: function() { this.out() },
-		
+
 		zoomLevel: function() {
 			return level;
 		}
 	}
-	
+
 })();