3.9.2 security release

Fix which node version is required

.gitignore

@@ -1,3 +1,8 @@
+.idea/
+*.iml
+*.iws
+*.eml
+out/
 .DS_Store
 .svn
 log/*.log

.travis.yml

@@ -1,5 +1,5 @@
 language: node_js
 node_js:
-  - 0.10
-before_script:
-  - npm install -g grunt-cli
+  - 11
+after_script:
+  - npm run build -- retire

LICENSE

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

bower.json

@@ -0,0 +1,24 @@
+{
+  "name": "reveal.js",
+  "version": "3.9.2",
+  "main": [
+    "js/reveal.js",
+    "css/reveal.css"
+  ],
+  "homepage": "http://revealjs.com",
+  "license": "MIT",
+  "description": "The HTML Presentation Framework",
+  "authors": [
+    "Hakim El Hattab <hakim.elhattab@gmail.com>"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/hakimel/reveal.js.git"
+  },
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test"
+  ]
+}

css/print/paper.css

@@ -38,7 +38,8 @@
 	.share-reveal,
 	.state-background,
 	.reveal .progress,
-	.reveal .backgrounds {
+	.reveal .backgrounds,
+	.reveal .slide-number {
 		display: none !important;
 	}
 
@@ -141,7 +142,7 @@
 	.reveal .slides section {
 		visibility: visible !important;
 		position: static !important;
-		width: 100% !important;
+		width: auto !important;
 		height: auto !important;
 		display: block !important;
 		overflow: visible !important;
@@ -199,4 +200,4 @@
 		font-size: 0.8em;
 	}
 
-}
+}

css/print/pdf.css

@@ -1,15 +1,9 @@
-/* Default Print Stylesheet Template
-   by Rob Glazebrook of CSSnewbie.com
-   Last Updated: June 4, 2008
-
-   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
-   beyond the edge of the printed page, and prevents
-   unnecessary background images from printing */
+/**
+ * This stylesheet is used to print reveal.js
+ * presentations to PDF.
+ *
+ * https://github.com/hakimel/reveal.js#pdf-export
+ */
 
 * {
 	-webkit-print-color-adjust: exact;
@@ -29,12 +23,10 @@ html {
 	overflow: visible;
 }
 
-/* SECTION 2: Remove any elements not needed in print.
-   This would include navigation, ads, sidebars, etc. */
+/* Remove any elements not needed in print. */
 .nestedarrow,
 .reveal .controls,
 .reveal .progress,
-.reveal .slide-number,
 .reveal .playback,
 .reveal.overview,
 .fork-reveal,
@@ -43,16 +35,7 @@ html {
 	display: none !important;
 }
 
-/* SECTION 3: Set body font face, size, and color.
-   Consider using a serif font for readability. */
-body, p, td, li, div {
-
-}
-
-/* SECTION 4: Set heading font face, sizes, and color.
-   Differentiate your headings from your body text.
-   Perhaps use a large sans-serif for distinction. */
-h1,h2,h3,h4,h5,h6 {
+h1, h2, h3, h4, h5, h6 {
 	text-shadow: 0 0 0 #000 !important;
 }
 
@@ -61,8 +44,6 @@ h1,h2,h3,h4,h5,h6 {
 	font-family: Courier, 'Courier New', monospace !important;
 }
 
-
-/* SECTION 5: more reveal.js specific additions by @skypanther */
 ul, ol, div, p {
 	visibility: visible;
 	position: static;
@@ -79,8 +60,9 @@ ul, ol, div, p {
 }
 .reveal .slides {
 	position: static;
-	width: 100%;
-	height: auto;
+	width: 100% !important;
+	height: auto !important;
+	zoom: 1 !important;
 
 	left: auto;
 	top: auto;
@@ -90,23 +72,22 @@ ul, ol, div, p {
 	overflow: visible;
 	display: block;
 
-	-webkit-perspective: none;
-	   -moz-perspective: none;
-	    -ms-perspective: none;
-	        perspective: none;
-
-	-webkit-perspective-origin: 50% 50%; /* there isn't a none/auto value but 50-50 is the default */
-	   -moz-perspective-origin: 50% 50%;
-	    -ms-perspective-origin: 50% 50%;
-	        perspective-origin: 50% 50%;
+	perspective: none;
+	perspective-origin: 50% 50%;
 }
-.reveal .slides section {
-	page-break-after: always !important;
 
+.reveal .slides .pdf-page {
+	position: relative;
+	overflow: hidden;
+	z-index: 1;
+
+	page-break-after: always;
+}
+
+.reveal .slides section {
 	visibility: visible !important;
-	position: relative !important;
 	display: block !important;
-	position: relative !important;
+	position: absolute !important;
 
 	margin: 0 !important;
 	padding: 0 !important;
@@ -115,43 +96,69 @@ ul, ol, div, p {
 
 	opacity: 1 !important;
 
-	-webkit-transform-style: flat !important;
-	   -moz-transform-style: flat !important;
-	    -ms-transform-style: flat !important;
-	        transform-style: flat !important;
-
-	-webkit-transform: none !important;
-	   -moz-transform: none !important;
-	    -ms-transform: none !important;
-	        transform: none !important;
+	transform-style: flat !important;
+	transform: none !important;
 }
+
 .reveal section.stack {
+	position: relative !important;
 	margin: 0 !important;
 	padding: 0 !important;
 	page-break-after: avoid !important;
 	height: auto !important;
 	min-height: auto !important;
 }
+
 .reveal img {
 	box-shadow: none;
 }
+
 .reveal .roll {
 	overflow: visible;
 	line-height: 1em;
 }
 
 /* Slide backgrounds are placed inside of their slide when exporting to PDF */
-.reveal section .slide-background {
+.reveal .slide-background {
 	display: block !important;
 	position: absolute;
 	top: 0;
 	left: 0;
 	width: 100%;
-	z-index: -1;
-}
-/* All elements should be above the slide-background */
-.reveal section>* {
-	position: relative;
-	z-index: 1;
+	height: 100%;
+	z-index: auto !important;
 }
 
+/* Display slide speaker notes when 'showNotes' is enabled */
+.reveal.show-notes {
+	max-width: none;
+	max-height: none;
+}
+.reveal .speaker-notes-pdf {
+	display: block;
+	width: 100%;
+	height: auto;
+	max-height: none;
+	top: auto;
+	right: auto;
+	bottom: auto;
+	left: auto;
+	z-index: 100;
+}
+
+/* Layout option which makes notes appear on a separate page */
+.reveal .speaker-notes-pdf[data-layout="separate-page"] {
+	position: relative;
+	color: inherit;
+	background-color: transparent;
+	padding: 20px;
+	page-break-after: always;
+	border: 0;
+}
+
+/* Display slide numbers when 'slideNumber' is enabled */
+.reveal .slide-number-pdf {
+	display: block;
+	position: absolute;
+	font-size: 14px;
+}

css/reset.css

@@ -0,0 +1,30 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+   v4.0 | 20180602
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+main, menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, main, menu, nav, section {
+  display: block;
+}

css/theme/README.md

@@ -1,10 +1,10 @@
 ## Dependencies
 
-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#full-setup
+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 proceeding: https://github.com/hakimel/reveal.js#full-setup
 
 ## 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).
+To create your own theme, start by duplicating a ```.scss``` file in [/css/theme/source](https://github.com/hakimel/reveal.js/blob/master/css/theme/source). It will be automatically compiled by Grunt from Sass to CSS (see the [Gruntfile](https://github.com/hakimel/reveal.js/blob/master/gruntfile.js)) when you run `npm run build -- css-themes`.
 
 Each theme file does four things in the following order:
 
@@ -19,5 +19,3 @@ This is where you override the default theme. Either by specifying variables (se
 
 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.
-
-When you are done, run `grunt css-themes` to compile the Sass file to CSS and you are ready to use your new theme.

css/theme/beige.css

@@ -1,26 +1,26 @@
-@import url(../../lib/font/league-gothic/league-gothic.css);
-@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
  */
+@import url(../../lib/font/league-gothic/league-gothic.css);
+@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
 /*********************************************
  * GLOBAL STYLES
  *********************************************/
 body {
   background: #f7f2d3;
-  background: -moz-radial-gradient(center, circle cover, #ffffff 0%, #f7f2d3 100%);
-  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #ffffff), color-stop(100%, #f7f2d3));
-  background: -webkit-radial-gradient(center, circle cover, #ffffff 0%, #f7f2d3 100%);
-  background: -o-radial-gradient(center, circle cover, #ffffff 0%, #f7f2d3 100%);
-  background: -ms-radial-gradient(center, circle cover, #ffffff 0%, #f7f2d3 100%);
-  background: radial-gradient(center, circle cover, #ffffff 0%, #f7f2d3 100%);
+  background: -moz-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
+  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, white), color-stop(100%, #f7f2d3));
+  background: -webkit-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
+  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; }
 
 .reveal {
-  font-family: 'Lato', sans-serif;
-  font-size: 36px;
+  font-family: "Lato", sans-serif;
+  font-size: 40px;
   font-weight: normal;
   color: #333; }
 
@@ -29,17 +29,28 @@ body {
   background: rgba(79, 64, 28, 0.99);
   text-shadow: none; }
 
-.reveal .slides > section, .reveal .slides > section > section {
+::-moz-selection {
+  color: #fff;
+  background: rgba(79, 64, 28, 0.99);
+  text-shadow: none; }
+
+.reveal .slides section,
+.reveal .slides section > section {
   line-height: 1.3;
   font-weight: inherit; }
 
 /*********************************************
  * HEADERS
  *********************************************/
-.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 {
+.reveal h1,
+.reveal h2,
+.reveal h3,
+.reveal h4,
+.reveal h5,
+.reveal h6 {
   margin: 0 0 20px 0;
   color: #333;
-  font-family: 'League Gothic', Impact, sans-serif;
+  font-family: "League Gothic", Impact, sans-serif;
   font-weight: normal;
   line-height: 1.2;
   letter-spacing: normal;
@@ -70,17 +81,22 @@ body {
   line-height: 1.3; }
 
 /* Ensure certain elements are never larger than the slide itself */
-.reveal img, .reveal video, .reveal iframe {
+.reveal img,
+.reveal video,
+.reveal iframe {
   max-width: 95%;
   max-height: 95%; }
 
-.reveal strong, .reveal b {
+.reveal strong,
+.reveal b {
   font-weight: bold; }
 
 .reveal em {
   font-style: italic; }
 
-.reveal ol, .reveal dl, .reveal ul {
+.reveal ol,
+.reveal dl,
+.reveal ul {
   display: inline-block;
   text-align: left;
   margin: 0 0 0 1em; }
@@ -97,7 +113,10 @@ body {
 .reveal ul ul ul {
   list-style-type: circle; }
 
-.reveal ul ul, .reveal ul ol, .reveal ol ol, .reveal ol ul {
+.reveal ul ul,
+.reveal ul ol,
+.reveal ol ol,
+.reveal ol ul {
   display: block;
   margin-left: 40px; }
 
@@ -107,9 +126,6 @@ body {
 .reveal dd {
   margin-left: 40px; }
 
-.reveal q, .reveal blockquote {
-  quotes: none; }
-
 .reveal blockquote {
   display: block;
   position: relative;
@@ -120,7 +136,8 @@ body {
   background: rgba(255, 255, 255, 0.05);
   box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); }
 
-.reveal blockquote p:first-child, .reveal blockquote p:last-child {
+.reveal blockquote p:first-child,
+.reveal blockquote p:last-child {
   display: inline-block; }
 
 .reveal q {
@@ -136,19 +153,18 @@ body {
   font-family: monospace;
   line-height: 1.2em;
   word-wrap: break-word;
-  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }
+  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); }
 
 .reveal code {
-  font-family: monospace; }
+  font-family: monospace;
+  text-transform: none; }
 
 .reveal pre code {
   display: block;
   padding: 5px;
   overflow: auto;
   max-height: 400px;
-  word-wrap: normal;
-  background: #3F3F3F;
-  color: #DCDCDC; }
+  word-wrap: normal; }
 
 .reveal table {
   margin: auto;
@@ -158,25 +174,31 @@ body {
 .reveal table th {
   font-weight: bold; }
 
-.reveal table th, .reveal table td {
+.reveal table th,
+.reveal table td {
   text-align: left;
   padding: 0.2em 0.5em 0.2em 0.5em;
   border-bottom: 1px solid; }
 
-.reveal table th[align="center"], .reveal table td[align="center"] {
+.reveal table th[align="center"],
+.reveal table td[align="center"] {
   text-align: center; }
 
-.reveal table th[align="right"], .reveal table td[align="right"] {
+.reveal table th[align="right"],
+.reveal table td[align="right"] {
   text-align: right; }
 
-.reveal table tr:last-child td {
+.reveal table tbody tr:last-child th,
+.reveal table tbody tr:last-child td {
   border-bottom: none; }
 
 .reveal sup {
-  vertical-align: super; }
+  vertical-align: super;
+  font-size: smaller; }
 
 .reveal sub {
-  vertical-align: sub; }
+  vertical-align: sub;
+  font-size: smaller; }
 
 .reveal small {
   display: inline-block;
@@ -193,18 +215,18 @@ body {
 .reveal a {
   color: #8b743d;
   text-decoration: none;
-  -webkit-transition: color 0.15s ease;
-  -moz-transition: color 0.15s ease;
-  transition: color 0.15s ease; }
+  -webkit-transition: color .15s ease;
+  -moz-transition: color .15s ease;
+  transition: color .15s ease; }
 
 .reveal a:hover {
-  color: #c0a76e;
+  color: #c0a86e;
   text-shadow: none;
   border: none; }
 
 .reveal .roll span:after {
   color: #fff;
-  background: #564726; }
+  background: #564826; }
 
 /*********************************************
  * IMAGES
@@ -215,10 +237,14 @@ body {
   border: 4px solid #333;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
 
+.reveal section img.plain {
+  border: 0;
+  box-shadow: none; }
+
 .reveal a img {
-  -webkit-transition: all 0.15s linear;
-  -moz-transition: all 0.15s linear;
-  transition: all 0.15s linear; }
+  -webkit-transition: all .15s linear;
+  -moz-transition: all .15s linear;
+  transition: all .15s linear; }
 
 .reveal a:hover img {
   background: rgba(255, 255, 255, 0.2);
@@ -228,44 +254,24 @@ body {
 /*********************************************
  * NAVIGATION CONTROLS
  *********************************************/
-.reveal .controls div.navigate-left, .reveal .controls div.navigate-left.enabled {
-  border-right-color: #8b743d; }
-
-.reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled {
-  border-left-color: #8b743d; }
-
-.reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled {
-  border-bottom-color: #8b743d; }
-
-.reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled {
-  border-top-color: #8b743d; }
-
-.reveal .controls div.navigate-left.enabled:hover {
-  border-right-color: #c0a76e; }
-
-.reveal .controls div.navigate-right.enabled:hover {
-  border-left-color: #c0a76e; }
-
-.reveal .controls div.navigate-up.enabled:hover {
-  border-bottom-color: #c0a76e; }
-
-.reveal .controls div.navigate-down.enabled:hover {
-  border-top-color: #c0a76e; }
+.reveal .controls {
+  color: #8b743d; }
 
 /*********************************************
  * PROGRESS BAR
  *********************************************/
 .reveal .progress {
-  background: rgba(0, 0, 0, 0.2); }
+  background: rgba(0, 0, 0, 0.2);
+  color: #8b743d; }
 
 .reveal .progress span {
-  background: #8b743d;
   -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);
   transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
 
 /*********************************************
- * SLIDE NUMBER
+ * PRINT BACKGROUND
  *********************************************/
-.reveal .slide-number {
-  color: #8b743d; }
+@media print {
+  .backgrounds {
+    background-color: #f7f3de; } }

css/theme/black.css

@@ -1,9 +1,9 @@
-@import url(../../lib/font/source-sans-pro/source-sans-pro.css);
 /**
  * Black theme for reveal.js. This is the opposite of the 'white' theme.
  *
- * Copyright (C) 2015 Hakim El Hattab, http://hakim.se
+ * By Hakim El Hattab, http://hakim.se
  */
+@import url(../../lib/font/source-sans-pro/source-sans-pro.css);
 section.has-light-background, section.has-light-background h1, section.has-light-background h2, section.has-light-background h3, section.has-light-background h4, section.has-light-background h5, section.has-light-background h6 {
   color: #222; }
 
@@ -11,12 +11,12 @@ section.has-light-background, section.has-light-background h1, section.has-light
  * GLOBAL STYLES
  *********************************************/
 body {
-  background: #222;
-  background-color: #222; }
+  background: #191919;
+  background-color: #191919; }
 
 .reveal {
-  font-family: 'Source Sans Pro', Helvetica, sans-serif;
-  font-size: 38px;
+  font-family: "Source Sans Pro", Helvetica, sans-serif;
+  font-size: 42px;
   font-weight: normal;
   color: #fff; }
 
@@ -25,17 +25,28 @@ body {
   background: #bee4fd;
   text-shadow: none; }
 
-.reveal .slides > section, .reveal .slides > section > section {
+::-moz-selection {
+  color: #fff;
+  background: #bee4fd;
+  text-shadow: none; }
+
+.reveal .slides section,
+.reveal .slides section > section {
   line-height: 1.3;
   font-weight: inherit; }
 
 /*********************************************
  * HEADERS
  *********************************************/
-.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 {
+.reveal h1,
+.reveal h2,
+.reveal h3,
+.reveal h4,
+.reveal h5,
+.reveal h6 {
   margin: 0 0 20px 0;
   color: #fff;
-  font-family: 'Source Sans Pro', Helvetica, sans-serif;
+  font-family: "Source Sans Pro", Helvetica, sans-serif;
   font-weight: 600;
   line-height: 1.2;
   letter-spacing: normal;
@@ -66,17 +77,22 @@ body {
   line-height: 1.3; }
 
 /* Ensure certain elements are never larger than the slide itself */
-.reveal img, .reveal video, .reveal iframe {
+.reveal img,
+.reveal video,
+.reveal iframe {
   max-width: 95%;
   max-height: 95%; }
 
-.reveal strong, .reveal b {
+.reveal strong,
+.reveal b {
   font-weight: bold; }
 
 .reveal em {
   font-style: italic; }
 
-.reveal ol, .reveal dl, .reveal ul {
+.reveal ol,
+.reveal dl,
+.reveal ul {
   display: inline-block;
   text-align: left;
   margin: 0 0 0 1em; }
@@ -93,7 +109,10 @@ body {
 .reveal ul ul ul {
   list-style-type: circle; }
 
-.reveal ul ul, .reveal ul ol, .reveal ol ol, .reveal ol ul {
+.reveal ul ul,
+.reveal ul ol,
+.reveal ol ol,
+.reveal ol ul {
   display: block;
   margin-left: 40px; }
 
@@ -103,9 +122,6 @@ body {
 .reveal dd {
   margin-left: 40px; }
 
-.reveal q, .reveal blockquote {
-  quotes: none; }
-
 .reveal blockquote {
   display: block;
   position: relative;
@@ -116,7 +132,8 @@ body {
   background: rgba(255, 255, 255, 0.05);
   box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); }
 
-.reveal blockquote p:first-child, .reveal blockquote p:last-child {
+.reveal blockquote p:first-child,
+.reveal blockquote p:last-child {
   display: inline-block; }
 
 .reveal q {
@@ -132,19 +149,18 @@ body {
   font-family: monospace;
   line-height: 1.2em;
   word-wrap: break-word;
-  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }
+  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); }
 
 .reveal code {
-  font-family: monospace; }
+  font-family: monospace;
+  text-transform: none; }
 
 .reveal pre code {
   display: block;
   padding: 5px;
   overflow: auto;
   max-height: 400px;
-  word-wrap: normal;
-  background: #3F3F3F;
-  color: #DCDCDC; }
+  word-wrap: normal; }
 
 .reveal table {
   margin: auto;
@@ -154,25 +170,31 @@ body {
 .reveal table th {
   font-weight: bold; }
 
-.reveal table th, .reveal table td {
+.reveal table th,
+.reveal table td {
   text-align: left;
   padding: 0.2em 0.5em 0.2em 0.5em;
   border-bottom: 1px solid; }
 
-.reveal table th[align="center"], .reveal table td[align="center"] {
+.reveal table th[align="center"],
+.reveal table td[align="center"] {
   text-align: center; }
 
-.reveal table th[align="right"], .reveal table td[align="right"] {
+.reveal table th[align="right"],
+.reveal table td[align="right"] {
   text-align: right; }
 
-.reveal table tr:last-child td {
+.reveal table tbody tr:last-child th,
+.reveal table tbody tr:last-child td {
   border-bottom: none; }
 
 .reveal sup {
-  vertical-align: super; }
+  vertical-align: super;
+  font-size: smaller; }
 
 .reveal sub {
-  vertical-align: sub; }
+  vertical-align: sub;
+  font-size: smaller; }
 
 .reveal small {
   display: inline-block;
@@ -189,9 +211,9 @@ body {
 .reveal a {
   color: #42affa;
   text-decoration: none;
-  -webkit-transition: color 0.15s ease;
-  -moz-transition: color 0.15s ease;
-  transition: color 0.15s ease; }
+  -webkit-transition: color .15s ease;
+  -moz-transition: color .15s ease;
+  transition: color .15s ease; }
 
 .reveal a:hover {
   color: #8dcffc;
@@ -200,7 +222,7 @@ body {
 
 .reveal .roll span:after {
   color: #fff;
-  background: #068ee9; }
+  background: #068de9; }
 
 /*********************************************
  * IMAGES
@@ -211,10 +233,14 @@ body {
   border: 4px solid #fff;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
 
+.reveal section img.plain {
+  border: 0;
+  box-shadow: none; }
+
 .reveal a img {
-  -webkit-transition: all 0.15s linear;
-  -moz-transition: all 0.15s linear;
-  transition: all 0.15s linear; }
+  -webkit-transition: all .15s linear;
+  -moz-transition: all .15s linear;
+  transition: all .15s linear; }
 
 .reveal a:hover img {
   background: rgba(255, 255, 255, 0.2);
@@ -224,44 +250,24 @@ body {
 /*********************************************
  * NAVIGATION CONTROLS
  *********************************************/
-.reveal .controls div.navigate-left, .reveal .controls div.navigate-left.enabled {
-  border-right-color: #42affa; }
-
-.reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled {
-  border-left-color: #42affa; }
-
-.reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled {
-  border-bottom-color: #42affa; }
-
-.reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled {
-  border-top-color: #42affa; }
-
-.reveal .controls div.navigate-left.enabled:hover {
-  border-right-color: #8dcffc; }
-
-.reveal .controls div.navigate-right.enabled:hover {
-  border-left-color: #8dcffc; }
-
-.reveal .controls div.navigate-up.enabled:hover {
-  border-bottom-color: #8dcffc; }
-
-.reveal .controls div.navigate-down.enabled:hover {
-  border-top-color: #8dcffc; }
+.reveal .controls {
+  color: #42affa; }
 
 /*********************************************
  * PROGRESS BAR
  *********************************************/
 .reveal .progress {
-  background: rgba(0, 0, 0, 0.2); }
+  background: rgba(0, 0, 0, 0.2);
+  color: #42affa; }
 
 .reveal .progress span {
-  background: #42affa;
   -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);
   transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
 
 /*********************************************
- * SLIDE NUMBER
+ * PRINT BACKGROUND
  *********************************************/
-.reveal .slide-number {
-  color: #42affa; }
+@media print {
+  .backgrounds {
+    background-color: #191919; } }

css/theme/blood.css

@@ -1,4 +1,3 @@
-@import url(https://fonts.googleapis.com/css?family=Ubuntu:300,700,300italic,700italic);
 /**
  * Blood theme for reveal.js
  * Author: Walther http://github.com/Walther
@@ -10,6 +9,7 @@
  * For other themes, change $codeBackground accordingly.
  *
  */
+@import url(https://fonts.googleapis.com/css?family=Ubuntu:300,700,300italic,700italic);
 /*********************************************
  * GLOBAL STYLES
  *********************************************/
@@ -18,8 +18,8 @@ body {
   background-color: #222; }
 
 .reveal {
-  font-family: Ubuntu, 'sans-serif';
-  font-size: 36px;
+  font-family: Ubuntu, "sans-serif";
+  font-size: 40px;
   font-weight: normal;
   color: #eee; }
 
@@ -28,17 +28,28 @@ body {
   background: #a23;
   text-shadow: none; }
 
-.reveal .slides > section, .reveal .slides > section > section {
+::-moz-selection {
+  color: #fff;
+  background: #a23;
+  text-shadow: none; }
+
+.reveal .slides section,
+.reveal .slides section > section {
   line-height: 1.3;
   font-weight: inherit; }
 
 /*********************************************
  * HEADERS
  *********************************************/
-.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 {
+.reveal h1,
+.reveal h2,
+.reveal h3,
+.reveal h4,
+.reveal h5,
+.reveal h6 {
   margin: 0 0 20px 0;
   color: #eee;
-  font-family: Ubuntu, 'sans-serif';
+  font-family: Ubuntu, "sans-serif";
   font-weight: normal;
   line-height: 1.2;
   letter-spacing: normal;
@@ -69,17 +80,22 @@ body {
   line-height: 1.3; }
 
 /* Ensure certain elements are never larger than the slide itself */
-.reveal img, .reveal video, .reveal iframe {
+.reveal img,
+.reveal video,
+.reveal iframe {
   max-width: 95%;
   max-height: 95%; }
 
-.reveal strong, .reveal b {
+.reveal strong,
+.reveal b {
   font-weight: bold; }
 
 .reveal em {
   font-style: italic; }
 
-.reveal ol, .reveal dl, .reveal ul {
+.reveal ol,
+.reveal dl,
+.reveal ul {
   display: inline-block;
   text-align: left;
   margin: 0 0 0 1em; }
@@ -96,7 +112,10 @@ body {
 .reveal ul ul ul {
   list-style-type: circle; }
 
-.reveal ul ul, .reveal ul ol, .reveal ol ol, .reveal ol ul {
+.reveal ul ul,
+.reveal ul ol,
+.reveal ol ol,
+.reveal ol ul {
   display: block;
   margin-left: 40px; }
 
@@ -106,9 +125,6 @@ body {
 .reveal dd {
   margin-left: 40px; }
 
-.reveal q, .reveal blockquote {
-  quotes: none; }
-
 .reveal blockquote {
   display: block;
   position: relative;
@@ -119,7 +135,8 @@ body {
   background: rgba(255, 255, 255, 0.05);
   box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); }
 
-.reveal blockquote p:first-child, .reveal blockquote p:last-child {
+.reveal blockquote p:first-child,
+.reveal blockquote p:last-child {
   display: inline-block; }
 
 .reveal q {
@@ -135,19 +152,18 @@ body {
   font-family: monospace;
   line-height: 1.2em;
   word-wrap: break-word;
-  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }
+  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); }
 
 .reveal code {
-  font-family: monospace; }
+  font-family: monospace;
+  text-transform: none; }
 
 .reveal pre code {
   display: block;
   padding: 5px;
   overflow: auto;
   max-height: 400px;
-  word-wrap: normal;
-  background: #3F3F3F;
-  color: #DCDCDC; }
+  word-wrap: normal; }
 
 .reveal table {
   margin: auto;
@@ -157,25 +173,31 @@ body {
 .reveal table th {
   font-weight: bold; }
 
-.reveal table th, .reveal table td {
+.reveal table th,
+.reveal table td {
   text-align: left;
   padding: 0.2em 0.5em 0.2em 0.5em;
   border-bottom: 1px solid; }
 
-.reveal table th[align="center"], .reveal table td[align="center"] {
+.reveal table th[align="center"],
+.reveal table td[align="center"] {
   text-align: center; }
 
-.reveal table th[align="right"], .reveal table td[align="right"] {
+.reveal table th[align="right"],
+.reveal table td[align="right"] {
   text-align: right; }
 
-.reveal table tr:last-child td {
+.reveal table tbody tr:last-child th,
+.reveal table tbody tr:last-child td {
   border-bottom: none; }
 
 .reveal sup {
-  vertical-align: super; }
+  vertical-align: super;
+  font-size: smaller; }
 
 .reveal sub {
-  vertical-align: sub; }
+  vertical-align: sub;
+  font-size: smaller; }
 
 .reveal small {
   display: inline-block;
@@ -192,18 +214,18 @@ body {
 .reveal a {
   color: #a23;
   text-decoration: none;
-  -webkit-transition: color 0.15s ease;
-  -moz-transition: color 0.15s ease;
-  transition: color 0.15s ease; }
+  -webkit-transition: color .15s ease;
+  -moz-transition: color .15s ease;
+  transition: color .15s ease; }
 
 .reveal a:hover {
-  color: #dd5567;
+  color: #dd5566;
   text-shadow: none;
   border: none; }
 
 .reveal .roll span:after {
   color: #fff;
-  background: #6a1521; }
+  background: #6a1520; }
 
 /*********************************************
  * IMAGES
@@ -214,10 +236,14 @@ body {
   border: 4px solid #eee;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
 
+.reveal section img.plain {
+  border: 0;
+  box-shadow: none; }
+
 .reveal a img {
-  -webkit-transition: all 0.15s linear;
-  -moz-transition: all 0.15s linear;
-  transition: all 0.15s linear; }
+  -webkit-transition: all .15s linear;
+  -moz-transition: all .15s linear;
+  transition: all .15s linear; }
 
 .reveal a:hover img {
   background: rgba(255, 255, 255, 0.2);
@@ -227,53 +253,38 @@ body {
 /*********************************************
  * NAVIGATION CONTROLS
  *********************************************/
-.reveal .controls div.navigate-left, .reveal .controls div.navigate-left.enabled {
-  border-right-color: #a23; }
-
-.reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled {
-  border-left-color: #a23; }
-
-.reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled {
-  border-bottom-color: #a23; }
-
-.reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled {
-  border-top-color: #a23; }
-
-.reveal .controls div.navigate-left.enabled:hover {
-  border-right-color: #dd5567; }
-
-.reveal .controls div.navigate-right.enabled:hover {
-  border-left-color: #dd5567; }
-
-.reveal .controls div.navigate-up.enabled:hover {
-  border-bottom-color: #dd5567; }
-
-.reveal .controls div.navigate-down.enabled:hover {
-  border-top-color: #dd5567; }
+.reveal .controls {
+  color: #a23; }
 
 /*********************************************
  * PROGRESS BAR
  *********************************************/
 .reveal .progress {
-  background: rgba(0, 0, 0, 0.2); }
+  background: rgba(0, 0, 0, 0.2);
+  color: #a23; }
 
 .reveal .progress span {
-  background: #a23;
   -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);
   transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
 
 /*********************************************
- * SLIDE NUMBER
+ * PRINT BACKGROUND
  *********************************************/
-.reveal .slide-number {
-  color: #a23; }
+@media print {
+  .backgrounds {
+    background-color: #222; } }
 
 .reveal p {
   font-weight: 300;
   text-shadow: 1px 1px #222; }
 
-.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 {
+.reveal h1,
+.reveal h2,
+.reveal h3,
+.reveal h4,
+.reveal h5,
+.reveal h6 {
   font-weight: 700; }
 
 .reveal p code {

css/theme/league.css

@@ -1,5 +1,3 @@
-@import url(../../lib/font/league-gothic/league-gothic.css);
-@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
 /**
  * League theme for reveal.js.
  *
@@ -7,6 +5,8 @@
  *
  * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
  */
+@import url(../../lib/font/league-gothic/league-gothic.css);
+@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
 /*********************************************
  * GLOBAL STYLES
  *********************************************/
@@ -21,8 +21,8 @@ body {
   background-color: #2b2b2b; }
 
 .reveal {
-  font-family: 'Lato', sans-serif;
-  font-size: 36px;
+  font-family: "Lato", sans-serif;
+  font-size: 40px;
   font-weight: normal;
   color: #eee; }
 
@@ -31,17 +31,28 @@ body {
   background: #FF5E99;
   text-shadow: none; }
 
-.reveal .slides > section, .reveal .slides > section > section {
+::-moz-selection {
+  color: #fff;
+  background: #FF5E99;
+  text-shadow: none; }
+
+.reveal .slides section,
+.reveal .slides section > section {
   line-height: 1.3;
   font-weight: inherit; }
 
 /*********************************************
  * HEADERS
  *********************************************/
-.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 {
+.reveal h1,
+.reveal h2,
+.reveal h3,
+.reveal h4,
+.reveal h5,
+.reveal h6 {
   margin: 0 0 20px 0;
   color: #eee;
-  font-family: 'League Gothic', Impact, sans-serif;
+  font-family: "League Gothic", Impact, sans-serif;
   font-weight: normal;
   line-height: 1.2;
   letter-spacing: normal;
@@ -72,17 +83,22 @@ body {
   line-height: 1.3; }
 
 /* Ensure certain elements are never larger than the slide itself */
-.reveal img, .reveal video, .reveal iframe {
+.reveal img,
+.reveal video,
+.reveal iframe {
   max-width: 95%;
   max-height: 95%; }
 
-.reveal strong, .reveal b {
+.reveal strong,
+.reveal b {
   font-weight: bold; }
 
 .reveal em {
   font-style: italic; }
 
-.reveal ol, .reveal dl, .reveal ul {
+.reveal ol,
+.reveal dl,
+.reveal ul {
   display: inline-block;
   text-align: left;
   margin: 0 0 0 1em; }
@@ -99,7 +115,10 @@ body {
 .reveal ul ul ul {
   list-style-type: circle; }
 
-.reveal ul ul, .reveal ul ol, .reveal ol ol, .reveal ol ul {
+.reveal ul ul,
+.reveal ul ol,
+.reveal ol ol,
+.reveal ol ul {
   display: block;
   margin-left: 40px; }
 
@@ -109,9 +128,6 @@ body {
 .reveal dd {
   margin-left: 40px; }
 
-.reveal q, .reveal blockquote {
-  quotes: none; }
-
 .reveal blockquote {
   display: block;
   position: relative;
@@ -122,7 +138,8 @@ body {
   background: rgba(255, 255, 255, 0.05);
   box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); }
 
-.reveal blockquote p:first-child, .reveal blockquote p:last-child {
+.reveal blockquote p:first-child,
+.reveal blockquote p:last-child {
   display: inline-block; }
 
 .reveal q {
@@ -138,19 +155,18 @@ body {
   font-family: monospace;
   line-height: 1.2em;
   word-wrap: break-word;
-  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }
+  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); }
 
 .reveal code {
-  font-family: monospace; }
+  font-family: monospace;
+  text-transform: none; }
 
 .reveal pre code {
   display: block;
   padding: 5px;
   overflow: auto;
   max-height: 400px;
-  word-wrap: normal;
-  background: #3F3F3F;
-  color: #DCDCDC; }
+  word-wrap: normal; }
 
 .reveal table {
   margin: auto;
@@ -160,25 +176,31 @@ body {
 .reveal table th {
   font-weight: bold; }
 
-.reveal table th, .reveal table td {
+.reveal table th,
+.reveal table td {
   text-align: left;
   padding: 0.2em 0.5em 0.2em 0.5em;
   border-bottom: 1px solid; }
 
-.reveal table th[align="center"], .reveal table td[align="center"] {
+.reveal table th[align="center"],
+.reveal table td[align="center"] {
   text-align: center; }
 
-.reveal table th[align="right"], .reveal table td[align="right"] {
+.reveal table th[align="right"],
+.reveal table td[align="right"] {
   text-align: right; }
 
-.reveal table tr:last-child td {
+.reveal table tbody tr:last-child th,
+.reveal table tbody tr:last-child td {
   border-bottom: none; }
 
 .reveal sup {
-  vertical-align: super; }
+  vertical-align: super;
+  font-size: smaller; }
 
 .reveal sub {
-  vertical-align: sub; }
+  vertical-align: sub;
+  font-size: smaller; }
 
 .reveal small {
   display: inline-block;
@@ -195,18 +217,18 @@ body {
 .reveal a {
   color: #13DAEC;
   text-decoration: none;
-  -webkit-transition: color 0.15s ease;
-  -moz-transition: color 0.15s ease;
-  transition: color 0.15s ease; }
+  -webkit-transition: color .15s ease;
+  -moz-transition: color .15s ease;
+  transition: color .15s ease; }
 
 .reveal a:hover {
-  color: #71ebf4;
+  color: #71e9f4;
   text-shadow: none;
   border: none; }
 
 .reveal .roll span:after {
   color: #fff;
-  background: #0d9ba5; }
+  background: #0d99a5; }
 
 /*********************************************
  * IMAGES
@@ -217,10 +239,14 @@ body {
   border: 4px solid #eee;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
 
+.reveal section img.plain {
+  border: 0;
+  box-shadow: none; }
+
 .reveal a img {
-  -webkit-transition: all 0.15s linear;
-  -moz-transition: all 0.15s linear;
-  transition: all 0.15s linear; }
+  -webkit-transition: all .15s linear;
+  -moz-transition: all .15s linear;
+  transition: all .15s linear; }
 
 .reveal a:hover img {
   background: rgba(255, 255, 255, 0.2);
@@ -230,44 +256,24 @@ body {
 /*********************************************
  * NAVIGATION CONTROLS
  *********************************************/
-.reveal .controls div.navigate-left, .reveal .controls div.navigate-left.enabled {
-  border-right-color: #13DAEC; }
-
-.reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled {
-  border-left-color: #13DAEC; }
-
-.reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled {
-  border-bottom-color: #13DAEC; }
-
-.reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled {
-  border-top-color: #13DAEC; }
-
-.reveal .controls div.navigate-left.enabled:hover {
-  border-right-color: #71ebf4; }
-
-.reveal .controls div.navigate-right.enabled:hover {
-  border-left-color: #71ebf4; }
-
-.reveal .controls div.navigate-up.enabled:hover {
-  border-bottom-color: #71ebf4; }
-
-.reveal .controls div.navigate-down.enabled:hover {
-  border-top-color: #71ebf4; }
+.reveal .controls {
+  color: #13DAEC; }
 
 /*********************************************
  * PROGRESS BAR
  *********************************************/
 .reveal .progress {
-  background: rgba(0, 0, 0, 0.2); }
+  background: rgba(0, 0, 0, 0.2);
+  color: #13DAEC; }
 
 .reveal .progress span {
-  background: #13DAEC;
   -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);
   transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
 
 /*********************************************
- * SLIDE NUMBER
+ * PRINT BACKGROUND
  *********************************************/
-.reveal .slide-number {
-  color: #13DAEC; }
+@media print {
+  .backgrounds {
+    background-color: #2b2b2b; } }

css/theme/moon.css

@@ -1,9 +1,9 @@
-@import url(../../lib/font/league-gothic/league-gothic.css);
-@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
 /**
  * Solarized Dark theme for reveal.js.
  * Author: Achim Staebler
  */
+@import url(../../lib/font/league-gothic/league-gothic.css);
+@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
 /**
  * Solarized colors by Ethan Schoonover
  */
@@ -19,8 +19,8 @@ body {
   background-color: #002b36; }
 
 .reveal {
-  font-family: 'Lato', sans-serif;
-  font-size: 36px;
+  font-family: "Lato", sans-serif;
+  font-size: 40px;
   font-weight: normal;
   color: #93a1a1; }
 
@@ -29,17 +29,28 @@ body {
   background: #d33682;
   text-shadow: none; }
 
-.reveal .slides > section, .reveal .slides > section > section {
+::-moz-selection {
+  color: #fff;
+  background: #d33682;
+  text-shadow: none; }
+
+.reveal .slides section,
+.reveal .slides section > section {
   line-height: 1.3;
   font-weight: inherit; }
 
 /*********************************************
  * HEADERS
  *********************************************/
-.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 {
+.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;
+  font-family: "League Gothic", Impact, sans-serif;
   font-weight: normal;
   line-height: 1.2;
   letter-spacing: normal;
@@ -70,17 +81,22 @@ body {
   line-height: 1.3; }
 
 /* Ensure certain elements are never larger than the slide itself */
-.reveal img, .reveal video, .reveal iframe {
+.reveal img,
+.reveal video,
+.reveal iframe {
   max-width: 95%;
   max-height: 95%; }
 
-.reveal strong, .reveal b {
+.reveal strong,
+.reveal b {
   font-weight: bold; }
 
 .reveal em {
   font-style: italic; }
 
-.reveal ol, .reveal dl, .reveal ul {
+.reveal ol,
+.reveal dl,
+.reveal ul {
   display: inline-block;
   text-align: left;
   margin: 0 0 0 1em; }
@@ -97,7 +113,10 @@ body {
 .reveal ul ul ul {
   list-style-type: circle; }
 
-.reveal ul ul, .reveal ul ol, .reveal ol ol, .reveal ol ul {
+.reveal ul ul,
+.reveal ul ol,
+.reveal ol ol,
+.reveal ol ul {
   display: block;
   margin-left: 40px; }
 
@@ -107,9 +126,6 @@ body {
 .reveal dd {
   margin-left: 40px; }
 
-.reveal q, .reveal blockquote {
-  quotes: none; }
-
 .reveal blockquote {
   display: block;
   position: relative;
@@ -120,7 +136,8 @@ body {
   background: rgba(255, 255, 255, 0.05);
   box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); }
 
-.reveal blockquote p:first-child, .reveal blockquote p:last-child {
+.reveal blockquote p:first-child,
+.reveal blockquote p:last-child {
   display: inline-block; }
 
 .reveal q {
@@ -136,19 +153,18 @@ body {
   font-family: monospace;
   line-height: 1.2em;
   word-wrap: break-word;
-  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }
+  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); }
 
 .reveal code {
-  font-family: monospace; }
+  font-family: monospace;
+  text-transform: none; }
 
 .reveal pre code {
   display: block;
   padding: 5px;
   overflow: auto;
   max-height: 400px;
-  word-wrap: normal;
-  background: #3F3F3F;
-  color: #DCDCDC; }
+  word-wrap: normal; }
 
 .reveal table {
   margin: auto;
@@ -158,25 +174,31 @@ body {
 .reveal table th {
   font-weight: bold; }
 
-.reveal table th, .reveal table td {
+.reveal table th,
+.reveal table td {
   text-align: left;
   padding: 0.2em 0.5em 0.2em 0.5em;
   border-bottom: 1px solid; }
 
-.reveal table th[align="center"], .reveal table td[align="center"] {
+.reveal table th[align="center"],
+.reveal table td[align="center"] {
   text-align: center; }
 
-.reveal table th[align="right"], .reveal table td[align="right"] {
+.reveal table th[align="right"],
+.reveal table td[align="right"] {
   text-align: right; }
 
-.reveal table tr:last-child td {
+.reveal table tbody tr:last-child th,
+.reveal table tbody tr:last-child td {
   border-bottom: none; }
 
 .reveal sup {
-  vertical-align: super; }
+  vertical-align: super;
+  font-size: smaller; }
 
 .reveal sub {
-  vertical-align: sub; }
+  vertical-align: sub;
+  font-size: smaller; }
 
 .reveal small {
   display: inline-block;
@@ -193,18 +215,18 @@ body {
 .reveal a {
   color: #268bd2;
   text-decoration: none;
-  -webkit-transition: color 0.15s ease;
-  -moz-transition: color 0.15s ease;
-  transition: color 0.15s ease; }
+  -webkit-transition: color .15s ease;
+  -moz-transition: color .15s ease;
+  transition: color .15s ease; }
 
 .reveal a:hover {
-  color: #78bae6;
+  color: #78b9e6;
   text-shadow: none;
   border: none; }
 
 .reveal .roll span:after {
   color: #fff;
-  background: #1a6291; }
+  background: #1a6091; }
 
 /*********************************************
  * IMAGES
@@ -215,10 +237,14 @@ body {
   border: 4px solid #93a1a1;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
 
+.reveal section img.plain {
+  border: 0;
+  box-shadow: none; }
+
 .reveal a img {
-  -webkit-transition: all 0.15s linear;
-  -moz-transition: all 0.15s linear;
-  transition: all 0.15s linear; }
+  -webkit-transition: all .15s linear;
+  -moz-transition: all .15s linear;
+  transition: all .15s linear; }
 
 .reveal a:hover img {
   background: rgba(255, 255, 255, 0.2);
@@ -228,44 +254,24 @@ body {
 /*********************************************
  * 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: #78bae6; }
-
-.reveal .controls div.navigate-right.enabled:hover {
-  border-left-color: #78bae6; }
-
-.reveal .controls div.navigate-up.enabled:hover {
-  border-bottom-color: #78bae6; }
-
-.reveal .controls div.navigate-down.enabled:hover {
-  border-top-color: #78bae6; }
+.reveal .controls {
+  color: #268bd2; }
 
 /*********************************************
  * PROGRESS BAR
  *********************************************/
 .reveal .progress {
-  background: rgba(0, 0, 0, 0.2); }
+  background: rgba(0, 0, 0, 0.2);
+  color: #268bd2; }
 
 .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);
   transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
 
 /*********************************************
- * SLIDE NUMBER
+ * PRINT BACKGROUND
  *********************************************/
-.reveal .slide-number {
-  color: #268bd2; }
+@media print {
+  .backgrounds {
+    background-color: #002b36; } }

css/theme/night.css

@@ -1,10 +1,10 @@
-@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
  */
+@import url(https://fonts.googleapis.com/css?family=Montserrat:700);
+@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic);
 /*********************************************
  * GLOBAL STYLES
  *********************************************/
@@ -13,8 +13,8 @@ body {
   background-color: #111; }
 
 .reveal {
-  font-family: 'Open Sans', sans-serif;
-  font-size: 30px;
+  font-family: "Open Sans", sans-serif;
+  font-size: 40px;
   font-weight: normal;
   color: #eee; }
 
@@ -23,17 +23,28 @@ body {
   background: #e7ad52;
   text-shadow: none; }
 
-.reveal .slides > section, .reveal .slides > section > section {
+::-moz-selection {
+  color: #fff;
+  background: #e7ad52;
+  text-shadow: none; }
+
+.reveal .slides section,
+.reveal .slides section > section {
   line-height: 1.3;
   font-weight: inherit; }
 
 /*********************************************
  * HEADERS
  *********************************************/
-.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 {
+.reveal h1,
+.reveal h2,
+.reveal h3,
+.reveal h4,
+.reveal h5,
+.reveal h6 {
   margin: 0 0 20px 0;
   color: #eee;
-  font-family: 'Montserrat', Impact, sans-serif;
+  font-family: "Montserrat", Impact, sans-serif;
   font-weight: normal;
   line-height: 1.2;
   letter-spacing: -0.03em;
@@ -64,17 +75,22 @@ body {
   line-height: 1.3; }
 
 /* Ensure certain elements are never larger than the slide itself */
-.reveal img, .reveal video, .reveal iframe {
+.reveal img,
+.reveal video,
+.reveal iframe {
   max-width: 95%;
   max-height: 95%; }
 
-.reveal strong, .reveal b {
+.reveal strong,
+.reveal b {
   font-weight: bold; }
 
 .reveal em {
   font-style: italic; }
 
-.reveal ol, .reveal dl, .reveal ul {
+.reveal ol,
+.reveal dl,
+.reveal ul {
   display: inline-block;
   text-align: left;
   margin: 0 0 0 1em; }
@@ -91,7 +107,10 @@ body {
 .reveal ul ul ul {
   list-style-type: circle; }
 
-.reveal ul ul, .reveal ul ol, .reveal ol ol, .reveal ol ul {
+.reveal ul ul,
+.reveal ul ol,
+.reveal ol ol,
+.reveal ol ul {
   display: block;
   margin-left: 40px; }
 
@@ -101,9 +120,6 @@ body {
 .reveal dd {
   margin-left: 40px; }
 
-.reveal q, .reveal blockquote {
-  quotes: none; }
-
 .reveal blockquote {
   display: block;
   position: relative;
@@ -114,7 +130,8 @@ body {
   background: rgba(255, 255, 255, 0.05);
   box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); }
 
-.reveal blockquote p:first-child, .reveal blockquote p:last-child {
+.reveal blockquote p:first-child,
+.reveal blockquote p:last-child {
   display: inline-block; }
 
 .reveal q {
@@ -130,19 +147,18 @@ body {
   font-family: monospace;
   line-height: 1.2em;
   word-wrap: break-word;
-  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }
+  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); }
 
 .reveal code {
-  font-family: monospace; }
+  font-family: monospace;
+  text-transform: none; }
 
 .reveal pre code {
   display: block;
   padding: 5px;
   overflow: auto;
   max-height: 400px;
-  word-wrap: normal;
-  background: #3F3F3F;
-  color: #DCDCDC; }
+  word-wrap: normal; }
 
 .reveal table {
   margin: auto;
@@ -152,25 +168,31 @@ body {
 .reveal table th {
   font-weight: bold; }
 
-.reveal table th, .reveal table td {
+.reveal table th,
+.reveal table td {
   text-align: left;
   padding: 0.2em 0.5em 0.2em 0.5em;
   border-bottom: 1px solid; }
 
-.reveal table th[align="center"], .reveal table td[align="center"] {
+.reveal table th[align="center"],
+.reveal table td[align="center"] {
   text-align: center; }
 
-.reveal table th[align="right"], .reveal table td[align="right"] {
+.reveal table th[align="right"],
+.reveal table td[align="right"] {
   text-align: right; }
 
-.reveal table tr:last-child td {
+.reveal table tbody tr:last-child th,
+.reveal table tbody tr:last-child td {
   border-bottom: none; }
 
 .reveal sup {
-  vertical-align: super; }
+  vertical-align: super;
+  font-size: smaller; }
 
 .reveal sub {
-  vertical-align: sub; }
+  vertical-align: sub;
+  font-size: smaller; }
 
 .reveal small {
   display: inline-block;
@@ -187,9 +209,9 @@ body {
 .reveal a {
   color: #e7ad52;
   text-decoration: none;
-  -webkit-transition: color 0.15s ease;
-  -moz-transition: color 0.15s ease;
-  transition: color 0.15s ease; }
+  -webkit-transition: color .15s ease;
+  -moz-transition: color .15s ease;
+  transition: color .15s ease; }
 
 .reveal a:hover {
   color: #f3d7ac;
@@ -198,7 +220,7 @@ body {
 
 .reveal .roll span:after {
   color: #fff;
-  background: #d0881d; }
+  background: #d08a1d; }
 
 /*********************************************
  * IMAGES
@@ -209,10 +231,14 @@ body {
   border: 4px solid #eee;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
 
+.reveal section img.plain {
+  border: 0;
+  box-shadow: none; }
+
 .reveal a img {
-  -webkit-transition: all 0.15s linear;
-  -moz-transition: all 0.15s linear;
-  transition: all 0.15s linear; }
+  -webkit-transition: all .15s linear;
+  -moz-transition: all .15s linear;
+  transition: all .15s linear; }
 
 .reveal a:hover img {
   background: rgba(255, 255, 255, 0.2);
@@ -222,44 +248,24 @@ body {
 /*********************************************
  * 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; }
+.reveal .controls {
+  color: #e7ad52; }
 
 /*********************************************
  * PROGRESS BAR
  *********************************************/
 .reveal .progress {
-  background: rgba(0, 0, 0, 0.2); }
+  background: rgba(0, 0, 0, 0.2);
+  color: #e7ad52; }
 
 .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);
   transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
 
 /*********************************************
- * SLIDE NUMBER
+ * PRINT BACKGROUND
  *********************************************/
-.reveal .slide-number {
-  color: #e7ad52; }
+@media print {
+  .backgrounds {
+    background-color: #111; } }

css/theme/serif.css

@@ -15,8 +15,8 @@ body {
   background-color: #F0F1EB; }
 
 .reveal {
-  font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif;
-  font-size: 36px;
+  font-family: "Palatino Linotype", "Book Antiqua", Palatino, FreeSerif, serif;
+  font-size: 40px;
   font-weight: normal;
   color: #000; }
 
@@ -25,17 +25,28 @@ body {
   background: #26351C;
   text-shadow: none; }
 
-.reveal .slides > section, .reveal .slides > section > section {
+::-moz-selection {
+  color: #fff;
+  background: #26351C;
+  text-shadow: none; }
+
+.reveal .slides section,
+.reveal .slides section > section {
   line-height: 1.3;
   font-weight: inherit; }
 
 /*********************************************
  * HEADERS
  *********************************************/
-.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 {
+.reveal h1,
+.reveal h2,
+.reveal h3,
+.reveal h4,
+.reveal h5,
+.reveal h6 {
   margin: 0 0 20px 0;
   color: #383D3D;
-  font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif;
+  font-family: "Palatino Linotype", "Book Antiqua", Palatino, FreeSerif, serif;
   font-weight: normal;
   line-height: 1.2;
   letter-spacing: normal;
@@ -66,17 +77,22 @@ body {
   line-height: 1.3; }
 
 /* Ensure certain elements are never larger than the slide itself */
-.reveal img, .reveal video, .reveal iframe {
+.reveal img,
+.reveal video,
+.reveal iframe {
   max-width: 95%;
   max-height: 95%; }
 
-.reveal strong, .reveal b {
+.reveal strong,
+.reveal b {
   font-weight: bold; }
 
 .reveal em {
   font-style: italic; }
 
-.reveal ol, .reveal dl, .reveal ul {
+.reveal ol,
+.reveal dl,
+.reveal ul {
   display: inline-block;
   text-align: left;
   margin: 0 0 0 1em; }
@@ -93,7 +109,10 @@ body {
 .reveal ul ul ul {
   list-style-type: circle; }
 
-.reveal ul ul, .reveal ul ol, .reveal ol ol, .reveal ol ul {
+.reveal ul ul,
+.reveal ul ol,
+.reveal ol ol,
+.reveal ol ul {
   display: block;
   margin-left: 40px; }
 
@@ -103,9 +122,6 @@ body {
 .reveal dd {
   margin-left: 40px; }
 
-.reveal q, .reveal blockquote {
-  quotes: none; }
-
 .reveal blockquote {
   display: block;
   position: relative;
@@ -116,7 +132,8 @@ body {
   background: rgba(255, 255, 255, 0.05);
   box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); }
 
-.reveal blockquote p:first-child, .reveal blockquote p:last-child {
+.reveal blockquote p:first-child,
+.reveal blockquote p:last-child {
   display: inline-block; }
 
 .reveal q {
@@ -132,19 +149,18 @@ body {
   font-family: monospace;
   line-height: 1.2em;
   word-wrap: break-word;
-  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }
+  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); }
 
 .reveal code {
-  font-family: monospace; }
+  font-family: monospace;
+  text-transform: none; }
 
 .reveal pre code {
   display: block;
   padding: 5px;
   overflow: auto;
   max-height: 400px;
-  word-wrap: normal;
-  background: #3F3F3F;
-  color: #DCDCDC; }
+  word-wrap: normal; }
 
 .reveal table {
   margin: auto;
@@ -154,25 +170,31 @@ body {
 .reveal table th {
   font-weight: bold; }
 
-.reveal table th, .reveal table td {
+.reveal table th,
+.reveal table td {
   text-align: left;
   padding: 0.2em 0.5em 0.2em 0.5em;
   border-bottom: 1px solid; }
 
-.reveal table th[align="center"], .reveal table td[align="center"] {
+.reveal table th[align="center"],
+.reveal table td[align="center"] {
   text-align: center; }
 
-.reveal table th[align="right"], .reveal table td[align="right"] {
+.reveal table th[align="right"],
+.reveal table td[align="right"] {
   text-align: right; }
 
-.reveal table tr:last-child td {
+.reveal table tbody tr:last-child th,
+.reveal table tbody tr:last-child td {
   border-bottom: none; }
 
 .reveal sup {
-  vertical-align: super; }
+  vertical-align: super;
+  font-size: smaller; }
 
 .reveal sub {
-  vertical-align: sub; }
+  vertical-align: sub;
+  font-size: smaller; }
 
 .reveal small {
   display: inline-block;
@@ -189,12 +211,12 @@ body {
 .reveal a {
   color: #51483D;
   text-decoration: none;
-  -webkit-transition: color 0.15s ease;
-  -moz-transition: color 0.15s ease;
-  transition: color 0.15s ease; }
+  -webkit-transition: color .15s ease;
+  -moz-transition: color .15s ease;
+  transition: color .15s ease; }
 
 .reveal a:hover {
-  color: #8b7b69;
+  color: #8b7c69;
   text-shadow: none;
   border: none; }
 
@@ -211,10 +233,14 @@ body {
   border: 4px solid #000;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
 
+.reveal section img.plain {
+  border: 0;
+  box-shadow: none; }
+
 .reveal a img {
-  -webkit-transition: all 0.15s linear;
-  -moz-transition: all 0.15s linear;
-  transition: all 0.15s linear; }
+  -webkit-transition: all .15s linear;
+  -moz-transition: all .15s linear;
+  transition: all .15s linear; }
 
 .reveal a:hover img {
   background: rgba(255, 255, 255, 0.2);
@@ -224,44 +250,24 @@ body {
 /*********************************************
  * NAVIGATION CONTROLS
  *********************************************/
-.reveal .controls div.navigate-left, .reveal .controls div.navigate-left.enabled {
-  border-right-color: #51483D; }
-
-.reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled {
-  border-left-color: #51483D; }
-
-.reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled {
-  border-bottom-color: #51483D; }
-
-.reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled {
-  border-top-color: #51483D; }
-
-.reveal .controls div.navigate-left.enabled:hover {
-  border-right-color: #8b7b69; }
-
-.reveal .controls div.navigate-right.enabled:hover {
-  border-left-color: #8b7b69; }
-
-.reveal .controls div.navigate-up.enabled:hover {
-  border-bottom-color: #8b7b69; }
-
-.reveal .controls div.navigate-down.enabled:hover {
-  border-top-color: #8b7b69; }
+.reveal .controls {
+  color: #51483D; }
 
 /*********************************************
  * PROGRESS BAR
  *********************************************/
 .reveal .progress {
-  background: rgba(0, 0, 0, 0.2); }
+  background: rgba(0, 0, 0, 0.2);
+  color: #51483D; }
 
 .reveal .progress span {
-  background: #51483D;
   -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);
   transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
 
 /*********************************************
- * SLIDE NUMBER
+ * PRINT BACKGROUND
  *********************************************/
-.reveal .slide-number {
-  color: #51483D; }
+@media print {
+  .backgrounds {
+    background-color: #F0F1EB; } }

css/theme/simple.css

@@ -1,5 +1,3 @@
-@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
  * to the default theme. The accent color is darkblue.
@@ -7,6 +5,11 @@
  * 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
  */
+@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);
+section.has-dark-background, section.has-dark-background h1, section.has-dark-background h2, section.has-dark-background h3, section.has-dark-background h4, section.has-dark-background h5, section.has-dark-background h6 {
+  color: #fff; }
+
 /*********************************************
  * GLOBAL STYLES
  *********************************************/
@@ -15,8 +18,8 @@ body {
   background-color: #fff; }
 
 .reveal {
-  font-family: 'Lato', sans-serif;
-  font-size: 36px;
+  font-family: "Lato", sans-serif;
+  font-size: 40px;
   font-weight: normal;
   color: #000; }
 
@@ -25,17 +28,28 @@ body {
   background: rgba(0, 0, 0, 0.99);
   text-shadow: none; }
 
-.reveal .slides > section, .reveal .slides > section > section {
+::-moz-selection {
+  color: #fff;
+  background: rgba(0, 0, 0, 0.99);
+  text-shadow: none; }
+
+.reveal .slides section,
+.reveal .slides section > section {
   line-height: 1.3;
   font-weight: inherit; }
 
 /*********************************************
  * HEADERS
  *********************************************/
-.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 {
+.reveal h1,
+.reveal h2,
+.reveal h3,
+.reveal h4,
+.reveal h5,
+.reveal h6 {
   margin: 0 0 20px 0;
   color: #000;
-  font-family: 'News Cycle', Impact, sans-serif;
+  font-family: "News Cycle", Impact, sans-serif;
   font-weight: normal;
   line-height: 1.2;
   letter-spacing: normal;
@@ -66,17 +80,22 @@ body {
   line-height: 1.3; }
 
 /* Ensure certain elements are never larger than the slide itself */
-.reveal img, .reveal video, .reveal iframe {
+.reveal img,
+.reveal video,
+.reveal iframe {
   max-width: 95%;
   max-height: 95%; }
 
-.reveal strong, .reveal b {
+.reveal strong,
+.reveal b {
   font-weight: bold; }
 
 .reveal em {
   font-style: italic; }
 
-.reveal ol, .reveal dl, .reveal ul {
+.reveal ol,
+.reveal dl,
+.reveal ul {
   display: inline-block;
   text-align: left;
   margin: 0 0 0 1em; }
@@ -93,7 +112,10 @@ body {
 .reveal ul ul ul {
   list-style-type: circle; }
 
-.reveal ul ul, .reveal ul ol, .reveal ol ol, .reveal ol ul {
+.reveal ul ul,
+.reveal ul ol,
+.reveal ol ol,
+.reveal ol ul {
   display: block;
   margin-left: 40px; }
 
@@ -103,9 +125,6 @@ body {
 .reveal dd {
   margin-left: 40px; }
 
-.reveal q, .reveal blockquote {
-  quotes: none; }
-
 .reveal blockquote {
   display: block;
   position: relative;
@@ -116,7 +135,8 @@ body {
   background: rgba(255, 255, 255, 0.05);
   box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); }
 
-.reveal blockquote p:first-child, .reveal blockquote p:last-child {
+.reveal blockquote p:first-child,
+.reveal blockquote p:last-child {
   display: inline-block; }
 
 .reveal q {
@@ -132,19 +152,18 @@ body {
   font-family: monospace;
   line-height: 1.2em;
   word-wrap: break-word;
-  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }
+  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); }
 
 .reveal code {
-  font-family: monospace; }
+  font-family: monospace;
+  text-transform: none; }
 
 .reveal pre code {
   display: block;
   padding: 5px;
   overflow: auto;
   max-height: 400px;
-  word-wrap: normal;
-  background: #3F3F3F;
-  color: #DCDCDC; }
+  word-wrap: normal; }
 
 .reveal table {
   margin: auto;
@@ -154,25 +173,31 @@ body {
 .reveal table th {
   font-weight: bold; }
 
-.reveal table th, .reveal table td {
+.reveal table th,
+.reveal table td {
   text-align: left;
   padding: 0.2em 0.5em 0.2em 0.5em;
   border-bottom: 1px solid; }
 
-.reveal table th[align="center"], .reveal table td[align="center"] {
+.reveal table th[align="center"],
+.reveal table td[align="center"] {
   text-align: center; }
 
-.reveal table th[align="right"], .reveal table td[align="right"] {
+.reveal table th[align="right"],
+.reveal table td[align="right"] {
   text-align: right; }
 
-.reveal table tr:last-child td {
+.reveal table tbody tr:last-child th,
+.reveal table tbody tr:last-child td {
   border-bottom: none; }
 
 .reveal sup {
-  vertical-align: super; }
+  vertical-align: super;
+  font-size: smaller; }
 
 .reveal sub {
-  vertical-align: sub; }
+  vertical-align: sub;
+  font-size: smaller; }
 
 .reveal small {
   display: inline-block;
@@ -189,9 +214,9 @@ body {
 .reveal a {
   color: #00008B;
   text-decoration: none;
-  -webkit-transition: color 0.15s ease;
-  -moz-transition: color 0.15s ease;
-  transition: color 0.15s ease; }
+  -webkit-transition: color .15s ease;
+  -moz-transition: color .15s ease;
+  transition: color .15s ease; }
 
 .reveal a:hover {
   color: #0000f1;
@@ -211,10 +236,14 @@ body {
   border: 4px solid #000;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
 
+.reveal section img.plain {
+  border: 0;
+  box-shadow: none; }
+
 .reveal a img {
-  -webkit-transition: all 0.15s linear;
-  -moz-transition: all 0.15s linear;
-  transition: all 0.15s linear; }
+  -webkit-transition: all .15s linear;
+  -moz-transition: all .15s linear;
+  transition: all .15s linear; }
 
 .reveal a:hover img {
   background: rgba(255, 255, 255, 0.2);
@@ -224,44 +253,24 @@ body {
 /*********************************************
  * NAVIGATION CONTROLS
  *********************************************/
-.reveal .controls div.navigate-left, .reveal .controls div.navigate-left.enabled {
-  border-right-color: #00008B; }
-
-.reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled {
-  border-left-color: #00008B; }
-
-.reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled {
-  border-bottom-color: #00008B; }
-
-.reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled {
-  border-top-color: #00008B; }
-
-.reveal .controls div.navigate-left.enabled:hover {
-  border-right-color: #0000f1; }
-
-.reveal .controls div.navigate-right.enabled:hover {
-  border-left-color: #0000f1; }
-
-.reveal .controls div.navigate-up.enabled:hover {
-  border-bottom-color: #0000f1; }
-
-.reveal .controls div.navigate-down.enabled:hover {
-  border-top-color: #0000f1; }
+.reveal .controls {
+  color: #00008B; }
 
 /*********************************************
  * PROGRESS BAR
  *********************************************/
 .reveal .progress {
-  background: rgba(0, 0, 0, 0.2); }
+  background: rgba(0, 0, 0, 0.2);
+  color: #00008B; }
 
 .reveal .progress span {
-  background: #00008B;
   -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);
   transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
 
 /*********************************************
- * SLIDE NUMBER
+ * PRINT BACKGROUND
  *********************************************/
-.reveal .slide-number {
-  color: #00008B; }
+@media print {
+  .backgrounds {
+    background-color: #fff; } }

css/theme/sky.css

@@ -1,10 +1,10 @@
-@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
  */
+@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);
 .reveal a {
   line-height: 1.3em; }
 
@@ -22,8 +22,8 @@ body {
   background-color: #f7fbfc; }
 
 .reveal {
-  font-family: 'Open Sans', sans-serif;
-  font-size: 36px;
+  font-family: "Open Sans", sans-serif;
+  font-size: 40px;
   font-weight: normal;
   color: #333; }
 
@@ -32,17 +32,28 @@ body {
   background: #134674;
   text-shadow: none; }
 
-.reveal .slides > section, .reveal .slides > section > section {
+::-moz-selection {
+  color: #fff;
+  background: #134674;
+  text-shadow: none; }
+
+.reveal .slides section,
+.reveal .slides section > section {
   line-height: 1.3;
   font-weight: inherit; }
 
 /*********************************************
  * HEADERS
  *********************************************/
-.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 {
+.reveal h1,
+.reveal h2,
+.reveal h3,
+.reveal h4,
+.reveal h5,
+.reveal h6 {
   margin: 0 0 20px 0;
   color: #333;
-  font-family: 'Quicksand', sans-serif;
+  font-family: "Quicksand", sans-serif;
   font-weight: normal;
   line-height: 1.2;
   letter-spacing: -0.08em;
@@ -73,17 +84,22 @@ body {
   line-height: 1.3; }
 
 /* Ensure certain elements are never larger than the slide itself */
-.reveal img, .reveal video, .reveal iframe {
+.reveal img,
+.reveal video,
+.reveal iframe {
   max-width: 95%;
   max-height: 95%; }
 
-.reveal strong, .reveal b {
+.reveal strong,
+.reveal b {
   font-weight: bold; }
 
 .reveal em {
   font-style: italic; }
 
-.reveal ol, .reveal dl, .reveal ul {
+.reveal ol,
+.reveal dl,
+.reveal ul {
   display: inline-block;
   text-align: left;
   margin: 0 0 0 1em; }
@@ -100,7 +116,10 @@ body {
 .reveal ul ul ul {
   list-style-type: circle; }
 
-.reveal ul ul, .reveal ul ol, .reveal ol ol, .reveal ol ul {
+.reveal ul ul,
+.reveal ul ol,
+.reveal ol ol,
+.reveal ol ul {
   display: block;
   margin-left: 40px; }
 
@@ -110,9 +129,6 @@ body {
 .reveal dd {
   margin-left: 40px; }
 
-.reveal q, .reveal blockquote {
-  quotes: none; }
-
 .reveal blockquote {
   display: block;
   position: relative;
@@ -123,7 +139,8 @@ body {
   background: rgba(255, 255, 255, 0.05);
   box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); }
 
-.reveal blockquote p:first-child, .reveal blockquote p:last-child {
+.reveal blockquote p:first-child,
+.reveal blockquote p:last-child {
   display: inline-block; }
 
 .reveal q {
@@ -139,19 +156,18 @@ body {
   font-family: monospace;
   line-height: 1.2em;
   word-wrap: break-word;
-  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }
+  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); }
 
 .reveal code {
-  font-family: monospace; }
+  font-family: monospace;
+  text-transform: none; }
 
 .reveal pre code {
   display: block;
   padding: 5px;
   overflow: auto;
   max-height: 400px;
-  word-wrap: normal;
-  background: #3F3F3F;
-  color: #DCDCDC; }
+  word-wrap: normal; }
 
 .reveal table {
   margin: auto;
@@ -161,25 +177,31 @@ body {
 .reveal table th {
   font-weight: bold; }
 
-.reveal table th, .reveal table td {
+.reveal table th,
+.reveal table td {
   text-align: left;
   padding: 0.2em 0.5em 0.2em 0.5em;
   border-bottom: 1px solid; }
 
-.reveal table th[align="center"], .reveal table td[align="center"] {
+.reveal table th[align="center"],
+.reveal table td[align="center"] {
   text-align: center; }
 
-.reveal table th[align="right"], .reveal table td[align="right"] {
+.reveal table th[align="right"],
+.reveal table td[align="right"] {
   text-align: right; }
 
-.reveal table tr:last-child td {
+.reveal table tbody tr:last-child th,
+.reveal table tbody tr:last-child td {
   border-bottom: none; }
 
 .reveal sup {
-  vertical-align: super; }
+  vertical-align: super;
+  font-size: smaller; }
 
 .reveal sub {
-  vertical-align: sub; }
+  vertical-align: sub;
+  font-size: smaller; }
 
 .reveal small {
   display: inline-block;
@@ -196,18 +218,18 @@ body {
 .reveal a {
   color: #3b759e;
   text-decoration: none;
-  -webkit-transition: color 0.15s ease;
-  -moz-transition: color 0.15s ease;
-  transition: color 0.15s ease; }
+  -webkit-transition: color .15s ease;
+  -moz-transition: color .15s ease;
+  transition: color .15s ease; }
 
 .reveal a:hover {
-  color: #74a8cb;
+  color: #74a7cb;
   text-shadow: none;
   border: none; }
 
 .reveal .roll span:after {
   color: #fff;
-  background: #264d66; }
+  background: #264c66; }
 
 /*********************************************
  * IMAGES
@@ -218,10 +240,14 @@ body {
   border: 4px solid #333;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
 
+.reveal section img.plain {
+  border: 0;
+  box-shadow: none; }
+
 .reveal a img {
-  -webkit-transition: all 0.15s linear;
-  -moz-transition: all 0.15s linear;
-  transition: all 0.15s linear; }
+  -webkit-transition: all .15s linear;
+  -moz-transition: all .15s linear;
+  transition: all .15s linear; }
 
 .reveal a:hover img {
   background: rgba(255, 255, 255, 0.2);
@@ -231,44 +257,24 @@ body {
 /*********************************************
  * NAVIGATION CONTROLS
  *********************************************/
-.reveal .controls div.navigate-left, .reveal .controls div.navigate-left.enabled {
-  border-right-color: #3b759e; }
-
-.reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled {
-  border-left-color: #3b759e; }
-
-.reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled {
-  border-bottom-color: #3b759e; }
-
-.reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled {
-  border-top-color: #3b759e; }
-
-.reveal .controls div.navigate-left.enabled:hover {
-  border-right-color: #74a8cb; }
-
-.reveal .controls div.navigate-right.enabled:hover {
-  border-left-color: #74a8cb; }
-
-.reveal .controls div.navigate-up.enabled:hover {
-  border-bottom-color: #74a8cb; }
-
-.reveal .controls div.navigate-down.enabled:hover {
-  border-top-color: #74a8cb; }
+.reveal .controls {
+  color: #3b759e; }
 
 /*********************************************
  * PROGRESS BAR
  *********************************************/
 .reveal .progress {
-  background: rgba(0, 0, 0, 0.2); }
+  background: rgba(0, 0, 0, 0.2);
+  color: #3b759e; }
 
 .reveal .progress span {
-  background: #3b759e;
   -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);
   transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
 
 /*********************************************
- * SLIDE NUMBER
+ * PRINT BACKGROUND
  *********************************************/
-.reveal .slide-number {
-  color: #3b759e; }
+@media print {
+  .backgrounds {
+    background-color: #f7fbfc; } }

css/theme/solarized.css

@@ -1,9 +1,9 @@
-@import url(../../lib/font/league-gothic/league-gothic.css);
-@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
 /**
  * Solarized Light theme for reveal.js.
  * Author: Achim Staebler
  */
+@import url(../../lib/font/league-gothic/league-gothic.css);
+@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
 /**
  * Solarized colors by Ethan Schoonover
  */
@@ -19,8 +19,8 @@ body {
   background-color: #fdf6e3; }
 
 .reveal {
-  font-family: 'Lato', sans-serif;
-  font-size: 36px;
+  font-family: "Lato", sans-serif;
+  font-size: 40px;
   font-weight: normal;
   color: #657b83; }
 
@@ -29,17 +29,28 @@ body {
   background: #d33682;
   text-shadow: none; }
 
-.reveal .slides > section, .reveal .slides > section > section {
+::-moz-selection {
+  color: #fff;
+  background: #d33682;
+  text-shadow: none; }
+
+.reveal .slides section,
+.reveal .slides section > section {
   line-height: 1.3;
   font-weight: inherit; }
 
 /*********************************************
  * HEADERS
  *********************************************/
-.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 {
+.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;
+  font-family: "League Gothic", Impact, sans-serif;
   font-weight: normal;
   line-height: 1.2;
   letter-spacing: normal;
@@ -70,17 +81,22 @@ body {
   line-height: 1.3; }
 
 /* Ensure certain elements are never larger than the slide itself */
-.reveal img, .reveal video, .reveal iframe {
+.reveal img,
+.reveal video,
+.reveal iframe {
   max-width: 95%;
   max-height: 95%; }
 
-.reveal strong, .reveal b {
+.reveal strong,
+.reveal b {
   font-weight: bold; }
 
 .reveal em {
   font-style: italic; }
 
-.reveal ol, .reveal dl, .reveal ul {
+.reveal ol,
+.reveal dl,
+.reveal ul {
   display: inline-block;
   text-align: left;
   margin: 0 0 0 1em; }
@@ -97,7 +113,10 @@ body {
 .reveal ul ul ul {
   list-style-type: circle; }
 
-.reveal ul ul, .reveal ul ol, .reveal ol ol, .reveal ol ul {
+.reveal ul ul,
+.reveal ul ol,
+.reveal ol ol,
+.reveal ol ul {
   display: block;
   margin-left: 40px; }
 
@@ -107,9 +126,6 @@ body {
 .reveal dd {
   margin-left: 40px; }
 
-.reveal q, .reveal blockquote {
-  quotes: none; }
-
 .reveal blockquote {
   display: block;
   position: relative;
@@ -120,7 +136,8 @@ body {
   background: rgba(255, 255, 255, 0.05);
   box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); }
 
-.reveal blockquote p:first-child, .reveal blockquote p:last-child {
+.reveal blockquote p:first-child,
+.reveal blockquote p:last-child {
   display: inline-block; }
 
 .reveal q {
@@ -136,19 +153,18 @@ body {
   font-family: monospace;
   line-height: 1.2em;
   word-wrap: break-word;
-  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }
+  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); }
 
 .reveal code {
-  font-family: monospace; }
+  font-family: monospace;
+  text-transform: none; }
 
 .reveal pre code {
   display: block;
   padding: 5px;
   overflow: auto;
   max-height: 400px;
-  word-wrap: normal;
-  background: #3F3F3F;
-  color: #DCDCDC; }
+  word-wrap: normal; }
 
 .reveal table {
   margin: auto;
@@ -158,25 +174,31 @@ body {
 .reveal table th {
   font-weight: bold; }
 
-.reveal table th, .reveal table td {
+.reveal table th,
+.reveal table td {
   text-align: left;
   padding: 0.2em 0.5em 0.2em 0.5em;
   border-bottom: 1px solid; }
 
-.reveal table th[align="center"], .reveal table td[align="center"] {
+.reveal table th[align="center"],
+.reveal table td[align="center"] {
   text-align: center; }
 
-.reveal table th[align="right"], .reveal table td[align="right"] {
+.reveal table th[align="right"],
+.reveal table td[align="right"] {
   text-align: right; }
 
-.reveal table tr:last-child td {
+.reveal table tbody tr:last-child th,
+.reveal table tbody tr:last-child td {
   border-bottom: none; }
 
 .reveal sup {
-  vertical-align: super; }
+  vertical-align: super;
+  font-size: smaller; }
 
 .reveal sub {
-  vertical-align: sub; }
+  vertical-align: sub;
+  font-size: smaller; }
 
 .reveal small {
   display: inline-block;
@@ -193,18 +215,18 @@ body {
 .reveal a {
   color: #268bd2;
   text-decoration: none;
-  -webkit-transition: color 0.15s ease;
-  -moz-transition: color 0.15s ease;
-  transition: color 0.15s ease; }
+  -webkit-transition: color .15s ease;
+  -moz-transition: color .15s ease;
+  transition: color .15s ease; }
 
 .reveal a:hover {
-  color: #78bae6;
+  color: #78b9e6;
   text-shadow: none;
   border: none; }
 
 .reveal .roll span:after {
   color: #fff;
-  background: #1a6291; }
+  background: #1a6091; }
 
 /*********************************************
  * IMAGES
@@ -215,10 +237,14 @@ body {
   border: 4px solid #657b83;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
 
+.reveal section img.plain {
+  border: 0;
+  box-shadow: none; }
+
 .reveal a img {
-  -webkit-transition: all 0.15s linear;
-  -moz-transition: all 0.15s linear;
-  transition: all 0.15s linear; }
+  -webkit-transition: all .15s linear;
+  -moz-transition: all .15s linear;
+  transition: all .15s linear; }
 
 .reveal a:hover img {
   background: rgba(255, 255, 255, 0.2);
@@ -228,44 +254,24 @@ body {
 /*********************************************
  * 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: #78bae6; }
-
-.reveal .controls div.navigate-right.enabled:hover {
-  border-left-color: #78bae6; }
-
-.reveal .controls div.navigate-up.enabled:hover {
-  border-bottom-color: #78bae6; }
-
-.reveal .controls div.navigate-down.enabled:hover {
-  border-top-color: #78bae6; }
+.reveal .controls {
+  color: #268bd2; }
 
 /*********************************************
  * PROGRESS BAR
  *********************************************/
 .reveal .progress {
-  background: rgba(0, 0, 0, 0.2); }
+  background: rgba(0, 0, 0, 0.2);
+  color: #268bd2; }
 
 .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);
   transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
 
 /*********************************************
- * SLIDE NUMBER
+ * PRINT BACKGROUND
  *********************************************/
-.reveal .slide-number {
-  color: #268bd2; }
+@media print {
+  .backgrounds {
+    background-color: #fdf6e3; } }

css/theme/source/black.scss

@@ -1,7 +1,7 @@
 /**
  * Black theme for reveal.js. This is the opposite of the 'white' theme.
  *
- * Copyright (C) 2015 Hakim El Hattab, http://hakim.se
+ * By Hakim El Hattab, http://hakim.se
  */
 
 
@@ -16,12 +16,12 @@
 
 
 // Override theme settings (see ../template/settings.scss)
-$backgroundColor: #222;
+$backgroundColor: #191919;
 
 $mainColor: #fff;
 $headingColor: #fff;
 
-$mainFontSize: 38px;
+$mainFontSize: 42px;
 $mainFont: 'Source Sans Pro', Helvetica, sans-serif;
 $headingFont: 'Source Sans Pro', Helvetica, sans-serif;
 $headingTextShadow: none;

css/theme/source/blood.scss

@@ -28,7 +28,6 @@ $backgroundColor: $coal;
 
 // Main text
 $mainFont: Ubuntu, 'sans-serif';
-$mainFontSize: 36px;
 $mainColor: #eee;
 
 // Headings

css/theme/source/night.scss

@@ -27,7 +27,6 @@ $headingTextShadow: none;
 $headingLetterSpacing: -0.03em;
 $headingTextTransform: none;
 $selectionBackgroundColor: #e7ad52;
-$mainFontSize: 30px;
 
 
 // Theme template ------------------------------

css/theme/source/simple.scss

@@ -31,6 +31,11 @@ $linkColor: #00008B;
 $linkColorHover: lighten( $linkColor, 20% );
 $selectionBackgroundColor: rgba(0, 0, 0, 0.99);
 
+section.has-dark-background {
+	&, h1, h2, h3, h4, h5, h6 {
+		color: #fff;
+	}
+}
 
 
 // Theme template ------------------------------

css/theme/source/white.scss

@@ -1,7 +1,7 @@
 /**
  * White theme for reveal.js. This is the opposite of the 'black' theme.
  *
- * Copyright (C) 2015 Hakim El Hattab, http://hakim.se
+ * By Hakim El Hattab, http://hakim.se
  */
 
 
@@ -21,7 +21,7 @@ $backgroundColor: #fff;
 $mainColor: #222;
 $headingColor: #222;
 
-$mainFontSize: 38px;
+$mainFontSize: 42px;
 $mainFont: 'Source Sans Pro', Helvetica, sans-serif;
 $headingFont: 'Source Sans Pro', Helvetica, sans-serif;
 $headingTextShadow: none;

css/theme/template/settings.scss

@@ -6,7 +6,7 @@ $backgroundColor: #2b2b2b;
 
 // Primary/body text
 $mainFont: 'Lato', sans-serif;
-$mainFontSize: 36px;
+$mainFontSize: 40px;
 $mainColor: #eee;
 
 // Vertical spacing between blocks of text
@@ -28,6 +28,8 @@ $heading2Size: 2.11em;
 $heading3Size: 1.55em;
 $heading4Size: 1.00em;
 
+$codeFont: monospace;
+
 // Links and actions
 $linkColor: #13DAEC;
 $linkColorHover: lighten( $linkColor, 20% );
@@ -40,4 +42,4 @@ $selectionColor: #fff;
 // to return a background image or gradient
 @mixin bodyBackground() {
 	background: $backgroundColor;
-}
+}

css/theme/template/theme.scss

@@ -22,8 +22,14 @@ body {
 	text-shadow: none;
 }
 
-.reveal .slides>section,
-.reveal .slides>section>section {
+::-moz-selection {
+	color: $selectionColor;
+	background: $selectionBackgroundColor;
+	text-shadow: none;
+}
+
+.reveal .slides section,
+.reveal .slides section>section {
 	line-height: 1.3;
 	font-weight: inherit;
 }
@@ -128,11 +134,6 @@ body {
 	margin-left: 40px;
 }
 
-.reveal q,
-.reveal blockquote {
-	quotes: none;
-}
-
 .reveal blockquote {
 	display: block;
 	position: relative;
@@ -161,15 +162,17 @@ body {
 
 	text-align: left;
 	font-size: 0.55em;
-	font-family: monospace;
+	font-family: $codeFont;
 	line-height: 1.2em;
 
 	word-wrap: break-word;
 
-	box-shadow: 0px 0px 6px rgba(0,0,0,0.3);
+	box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
 }
+
 .reveal code {
-	font-family: monospace;
+	font-family: $codeFont;
+	text-transform: none;
 }
 
 .reveal pre code {
@@ -178,8 +181,6 @@ body {
 	overflow: auto;
 	max-height: 400px;
 	word-wrap: normal;
-	background: #3F3F3F;
-	color: #DCDCDC;
 }
 
 .reveal table {
@@ -209,15 +210,18 @@ body {
 	text-align: right;
 }
 
-.reveal table tr:last-child td {
+.reveal table tbody tr:last-child th,
+.reveal table tbody tr:last-child td {
 	border-bottom: none;
 }
 
 .reveal sup {
 	vertical-align: super;
+	font-size: smaller;
 }
 .reveal sub {
 	vertical-align: sub;
+	font-size: smaller;
 }
 
 .reveal small {
@@ -269,6 +273,11 @@ body {
 	box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
 }
 
+	.reveal section img.plain {
+		border: 0;
+		box-shadow: none;
+	}
+
 	.reveal a img {
 		-webkit-transition: all .15s linear;
 		   -moz-transition: all .15s linear;
@@ -287,40 +296,8 @@ body {
  * NAVIGATION CONTROLS
  *********************************************/
 
-.reveal .controls div.navigate-left,
-.reveal .controls div.navigate-left.enabled {
-	border-right-color: $linkColor;
-}
-
-.reveal .controls div.navigate-right,
-.reveal .controls div.navigate-right.enabled {
-	border-left-color: $linkColor;
-}
-
-.reveal .controls div.navigate-up,
-.reveal .controls div.navigate-up.enabled {
-	border-bottom-color: $linkColor;
-}
-
-.reveal .controls div.navigate-down,
-.reveal .controls div.navigate-down.enabled {
-	border-top-color: $linkColor;
-}
-
-.reveal .controls div.navigate-left.enabled:hover {
-	border-right-color: $linkColorHover;
-}
-
-.reveal .controls div.navigate-right.enabled:hover {
-	border-left-color: $linkColorHover;
-}
-
-.reveal .controls div.navigate-up.enabled:hover {
-	border-bottom-color: $linkColorHover;
-}
-
-.reveal .controls div.navigate-down.enabled:hover {
-	border-top-color: $linkColorHover;
+.reveal .controls {
+	color: $linkColor;
 }
 
 
@@ -330,20 +307,19 @@ body {
 
 .reveal .progress {
 	background: rgba(0,0,0,0.2);
+	color: $linkColor;
 }
 	.reveal .progress span {
-		background: $linkColor;
-
 		-webkit-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
 		   -moz-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-		        transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+			transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
 	}
 
 /*********************************************
- * SLIDE NUMBER
+ * PRINT BACKGROUND
  *********************************************/
-.reveal .slide-number {
-	color: $linkColor;
+ @media print {
+    .backgrounds {
+        background-color: $backgroundColor;
+    }
 }
-
-

css/theme/white.css

@@ -1,9 +1,9 @@
-@import url(../../lib/font/source-sans-pro/source-sans-pro.css);
 /**
  * White theme for reveal.js. This is the opposite of the 'black' theme.
  *
- * Copyright (C) 2015 Hakim El Hattab, http://hakim.se
+ * By Hakim El Hattab, http://hakim.se
  */
+@import url(../../lib/font/source-sans-pro/source-sans-pro.css);
 section.has-dark-background, section.has-dark-background h1, section.has-dark-background h2, section.has-dark-background h3, section.has-dark-background h4, section.has-dark-background h5, section.has-dark-background h6 {
   color: #fff; }
 
@@ -15,8 +15,8 @@ body {
   background-color: #fff; }
 
 .reveal {
-  font-family: 'Source Sans Pro', Helvetica, sans-serif;
-  font-size: 38px;
+  font-family: "Source Sans Pro", Helvetica, sans-serif;
+  font-size: 42px;
   font-weight: normal;
   color: #222; }
 
@@ -25,17 +25,28 @@ body {
   background: #98bdef;
   text-shadow: none; }
 
-.reveal .slides > section, .reveal .slides > section > section {
+::-moz-selection {
+  color: #fff;
+  background: #98bdef;
+  text-shadow: none; }
+
+.reveal .slides section,
+.reveal .slides section > section {
   line-height: 1.3;
   font-weight: inherit; }
 
 /*********************************************
  * HEADERS
  *********************************************/
-.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 {
+.reveal h1,
+.reveal h2,
+.reveal h3,
+.reveal h4,
+.reveal h5,
+.reveal h6 {
   margin: 0 0 20px 0;
   color: #222;
-  font-family: 'Source Sans Pro', Helvetica, sans-serif;
+  font-family: "Source Sans Pro", Helvetica, sans-serif;
   font-weight: 600;
   line-height: 1.2;
   letter-spacing: normal;
@@ -66,17 +77,22 @@ body {
   line-height: 1.3; }
 
 /* Ensure certain elements are never larger than the slide itself */
-.reveal img, .reveal video, .reveal iframe {
+.reveal img,
+.reveal video,
+.reveal iframe {
   max-width: 95%;
   max-height: 95%; }
 
-.reveal strong, .reveal b {
+.reveal strong,
+.reveal b {
   font-weight: bold; }
 
 .reveal em {
   font-style: italic; }
 
-.reveal ol, .reveal dl, .reveal ul {
+.reveal ol,
+.reveal dl,
+.reveal ul {
   display: inline-block;
   text-align: left;
   margin: 0 0 0 1em; }
@@ -93,7 +109,10 @@ body {
 .reveal ul ul ul {
   list-style-type: circle; }
 
-.reveal ul ul, .reveal ul ol, .reveal ol ol, .reveal ol ul {
+.reveal ul ul,
+.reveal ul ol,
+.reveal ol ol,
+.reveal ol ul {
   display: block;
   margin-left: 40px; }
 
@@ -103,9 +122,6 @@ body {
 .reveal dd {
   margin-left: 40px; }
 
-.reveal q, .reveal blockquote {
-  quotes: none; }
-
 .reveal blockquote {
   display: block;
   position: relative;
@@ -116,7 +132,8 @@ body {
   background: rgba(255, 255, 255, 0.05);
   box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); }
 
-.reveal blockquote p:first-child, .reveal blockquote p:last-child {
+.reveal blockquote p:first-child,
+.reveal blockquote p:last-child {
   display: inline-block; }
 
 .reveal q {
@@ -132,19 +149,18 @@ body {
   font-family: monospace;
   line-height: 1.2em;
   word-wrap: break-word;
-  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }
+  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); }
 
 .reveal code {
-  font-family: monospace; }
+  font-family: monospace;
+  text-transform: none; }
 
 .reveal pre code {
   display: block;
   padding: 5px;
   overflow: auto;
   max-height: 400px;
-  word-wrap: normal;
-  background: #3F3F3F;
-  color: #DCDCDC; }
+  word-wrap: normal; }
 
 .reveal table {
   margin: auto;
@@ -154,25 +170,31 @@ body {
 .reveal table th {
   font-weight: bold; }
 
-.reveal table th, .reveal table td {
+.reveal table th,
+.reveal table td {
   text-align: left;
   padding: 0.2em 0.5em 0.2em 0.5em;
   border-bottom: 1px solid; }
 
-.reveal table th[align="center"], .reveal table td[align="center"] {
+.reveal table th[align="center"],
+.reveal table td[align="center"] {
   text-align: center; }
 
-.reveal table th[align="right"], .reveal table td[align="right"] {
+.reveal table th[align="right"],
+.reveal table td[align="right"] {
   text-align: right; }
 
-.reveal table tr:last-child td {
+.reveal table tbody tr:last-child th,
+.reveal table tbody tr:last-child td {
   border-bottom: none; }
 
 .reveal sup {
-  vertical-align: super; }
+  vertical-align: super;
+  font-size: smaller; }
 
 .reveal sub {
-  vertical-align: sub; }
+  vertical-align: sub;
+  font-size: smaller; }
 
 .reveal small {
   display: inline-block;
@@ -189,18 +211,18 @@ body {
 .reveal a {
   color: #2a76dd;
   text-decoration: none;
-  -webkit-transition: color 0.15s ease;
-  -moz-transition: color 0.15s ease;
-  transition: color 0.15s ease; }
+  -webkit-transition: color .15s ease;
+  -moz-transition: color .15s ease;
+  transition: color .15s ease; }
 
 .reveal a:hover {
-  color: #6ca2e8;
+  color: #6ca0e8;
   text-shadow: none;
   border: none; }
 
 .reveal .roll span:after {
   color: #fff;
-  background: #1a54a1; }
+  background: #1a53a1; }
 
 /*********************************************
  * IMAGES
@@ -211,10 +233,14 @@ body {
   border: 4px solid #222;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
 
+.reveal section img.plain {
+  border: 0;
+  box-shadow: none; }
+
 .reveal a img {
-  -webkit-transition: all 0.15s linear;
-  -moz-transition: all 0.15s linear;
-  transition: all 0.15s linear; }
+  -webkit-transition: all .15s linear;
+  -moz-transition: all .15s linear;
+  transition: all .15s linear; }
 
 .reveal a:hover img {
   background: rgba(255, 255, 255, 0.2);
@@ -224,44 +250,24 @@ body {
 /*********************************************
  * NAVIGATION CONTROLS
  *********************************************/
-.reveal .controls div.navigate-left, .reveal .controls div.navigate-left.enabled {
-  border-right-color: #2a76dd; }
-
-.reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled {
-  border-left-color: #2a76dd; }
-
-.reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled {
-  border-bottom-color: #2a76dd; }
-
-.reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled {
-  border-top-color: #2a76dd; }
-
-.reveal .controls div.navigate-left.enabled:hover {
-  border-right-color: #6ca2e8; }
-
-.reveal .controls div.navigate-right.enabled:hover {
-  border-left-color: #6ca2e8; }
-
-.reveal .controls div.navigate-up.enabled:hover {
-  border-bottom-color: #6ca2e8; }
-
-.reveal .controls div.navigate-down.enabled:hover {
-  border-top-color: #6ca2e8; }
+.reveal .controls {
+  color: #2a76dd; }
 
 /*********************************************
  * PROGRESS BAR
  *********************************************/
 .reveal .progress {
-  background: rgba(0, 0, 0, 0.2); }
+  background: rgba(0, 0, 0, 0.2);
+  color: #2a76dd; }
 
 .reveal .progress span {
-  background: #2a76dd;
   -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);
   transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
 
 /*********************************************
- * SLIDE NUMBER
+ * PRINT BACKGROUND
  *********************************************/
-.reveal .slide-number {
-  color: #2a76dd; }
+@media print {
+  .backgrounds {
+    background-color: #fff; } }

demo.html

@@ -0,0 +1,425 @@
+<!doctype html>
+<html lang="en">
+
+	<head>
+		<meta charset="utf-8">
+
+		<title>reveal.js – The HTML Presentation Framework</title>
+
+		<meta name="description" content="A framework for easily creating beautiful presentations using HTML">
+		<meta name="author" content="Hakim El Hattab">
+
+		<meta name="apple-mobile-web-app-capable" content="yes">
+		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+		<link rel="stylesheet" href="css/reset.css">
+		<link rel="stylesheet" href="css/reveal.css">
+		<link rel="stylesheet" href="css/theme/black.css" id="theme">
+
+		<!-- Theme used for syntax highlighting of code -->
+		<link rel="stylesheet" href="lib/css/monokai.css">
+
+		<!-- Printing and PDF exports -->
+		<script>
+			var link = document.createElement( 'link' );
+			link.rel = 'stylesheet';
+			link.type = 'text/css';
+			link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
+			document.getElementsByTagName( 'head' )[0].appendChild( link );
+		</script>
+
+		<!--[if lt IE 9]>
+		<script src="lib/js/html5shiv.js"></script>
+		<![endif]-->
+	</head>
+
+	<body>
+
+		<div class="reveal">
+
+			<!-- Any section element inside of this container is displayed as a slide -->
+			<div class="slides">
+				<section>
+					<h1>Reveal.js</h1>
+					<h3>The HTML Presentation Framework</h3>
+					<p>
+						<small>Created by <a href="http://hakim.se">Hakim El Hattab</a> and <a href="https://github.com/hakimel/reveal.js/graphs/contributors">contributors</a></small>
+					</p>
+				</section>
+
+				<section>
+					<h2>Hello There</h2>
+					<p>
+						reveal.js enables you to create beautiful interactive slide decks using HTML. This presentation will show you examples of what it can do.
+					</p>
+				</section>
+
+				<!-- Example of nested vertical slides -->
+				<section>
+					<section>
+						<h2>Vertical Slides</h2>
+						<p>Slides can be nested inside of each other.</p>
+						<p>Use the <em>Space</em> key to navigate through all slides.</p>
+						<br>
+						<a href="#" class="navigate-down">
+							<img width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
+						</a>
+					</section>
+					<section>
+						<h2>Basement Level 1</h2>
+						<p>Nested slides are useful for adding additional detail underneath a high level horizontal slide.</p>
+					</section>
+					<section>
+						<h2>Basement Level 2</h2>
+						<p>That's it, time to go back up.</p>
+						<br>
+						<a href="#/2">
+							<img width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Up arrow" style="transform: rotate(180deg); -webkit-transform: rotate(180deg);">
+						</a>
+					</section>
+				</section>
+
+				<section>
+					<h2>Slides</h2>
+					<p>
+						Not a coder? Not a problem. There's a fully-featured visual editor for authoring these, try it out at <a href="https://slides.com" target="_blank">https://slides.com</a>.
+					</p>
+				</section>
+
+				<section>
+					<h2>Point of View</h2>
+					<p>
+						Press <strong>ESC</strong> to enter the slide overview.
+					</p>
+					<p>
+						Hold down the <strong>alt</strong> key (<strong>ctrl</strong> in Linux) and click on any element to zoom towards it using <a href="http://lab.hakim.se/zoom-js">zoom.js</a>. Click again to zoom back out.
+					</p>
+					<p>
+						(NOTE: Use ctrl + click in Linux.)
+					</p>
+				</section>
+
+				<section>
+					<h2>Touch Optimized</h2>
+					<p>
+						Presentations look great on touch devices, like mobile phones and tablets. Simply swipe through your slides.
+					</p>
+				</section>
+
+				<section data-markdown>
+					<script type="text/template">
+						## Markdown support
+
+						Write content using inline or external Markdown.
+						Instructions and more info available in the [readme](https://github.com/hakimel/reveal.js#markdown).
+
+						```
+						<section data-markdown>
+						  ## Markdown support
+
+						  Write content using inline or external Markdown.
+						  Instructions and more info available in the [readme](https://github.com/hakimel/reveal.js#markdown).
+						</section>
+						```
+					</script>
+				</section>
+
+				<section>
+					<section id="fragments">
+						<h2>Fragments</h2>
+						<p>Hit the next arrow...</p>
+						<p class="fragment">... to step through ...</p>
+						<p><span class="fragment">... a</span> <span class="fragment">fragmented</span> <span class="fragment">slide.</span></p>
+
+						<aside class="notes">
+							This slide has fragments which are also stepped through in the notes window.
+						</aside>
+					</section>
+					<section>
+						<h2>Fragment Styles</h2>
+						<p>There's different types of fragments, like:</p>
+						<p class="fragment grow">grow</p>
+						<p class="fragment shrink">shrink</p>
+						<p class="fragment fade-out">fade-out</p>
+						<p>
+							<span style="display: inline-block;" class="fragment fade-right">fade-right, </span>
+							<span style="display: inline-block;" class="fragment fade-up">up, </span>
+							<span style="display: inline-block;" class="fragment fade-down">down, </span>
+							<span style="display: inline-block;" class="fragment fade-left">left</span>
+						</p>
+						<p class="fragment fade-in-then-out">fade-in-then-out</p>
+						<p class="fragment fade-in-then-semi-out">fade-in-then-semi-out</p>
+						<p>Highlight <span class="fragment highlight-red">red</span> <span class="fragment highlight-blue">blue</span> <span class="fragment highlight-green">green</span></p>
+					</section>
+				</section>
+
+				<section id="transitions">
+					<h2>Transition Styles</h2>
+					<p>
+						You can select from different transitions, like: <br>
+						<a href="?transition=none#/transitions">None</a> -
+						<a href="?transition=fade#/transitions">Fade</a> -
+						<a href="?transition=slide#/transitions">Slide</a> -
+						<a href="?transition=convex#/transitions">Convex</a> -
+						<a href="?transition=concave#/transitions">Concave</a> -
+						<a href="?transition=zoom#/transitions">Zoom</a>
+					</p>
+				</section>
+
+				<section id="themes">
+					<h2>Themes</h2>
+					<p>
+						reveal.js comes with a few themes built in: <br>
+						<!-- Hacks to swap themes after the page has loaded. Not flexible and only intended for the reveal.js demo deck. -->
+						<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/black.css'); return false;">Black (default)</a> -
+						<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/white.css'); return false;">White</a> -
+						<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/league.css'); return false;">League</a> -
+						<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/sky.css'); return false;">Sky</a> -
+						<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/beige.css'); return false;">Beige</a> -
+						<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/simple.css'); return false;">Simple</a> <br>
+						<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/serif.css'); return false;">Serif</a> -
+						<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/blood.css'); return false;">Blood</a> -
+						<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/night.css'); return false;">Night</a> -
+						<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/moon.css'); return false;">Moon</a> -
+						<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/solarized.css'); return false;">Solarized</a>
+					</p>
+				</section>
+
+				<section>
+					<section data-background="#dddddd">
+						<h2>Slide Backgrounds</h2>
+						<p>
+							Set <code>data-background="#dddddd"</code> on a slide to change the background color. All CSS color formats are supported.
+						</p>
+						<a href="#" class="navigate-down">
+							<img width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
+						</a>
+					</section>
+					<section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/image-placeholder.png">
+						<h2>Image Backgrounds</h2>
+						<pre><code class="hljs html">&lt;section data-background="image.png"&gt;</code></pre>
+					</section>
+					<section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/image-placeholder.png" data-background-repeat="repeat" data-background-size="100px">
+						<h2>Tiled Backgrounds</h2>
+						<pre><code class="hljs html" style="word-wrap: break-word;">&lt;section data-background="image.png" data-background-repeat="repeat" data-background-size="100px"&gt;</code></pre>
+					</section>
+					<section data-background-video="https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.mp4,https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.webm" data-background-color="#000000">
+						<div style="background-color: rgba(0, 0, 0, 0.9); color: #fff; padding: 20px;">
+							<h2>Video Backgrounds</h2>
+							<pre><code class="hljs html" style="word-wrap: break-word;">&lt;section data-background-video="video.mp4,video.webm"&gt;</code></pre>
+						</div>
+					</section>
+					<section data-background="http://i.giphy.com/90F8aUepslB84.gif">
+						<h2>... and GIFs!</h2>
+					</section>
+				</section>
+
+				<section data-transition="slide" data-background="#4d7e65" data-background-transition="zoom">
+					<h2>Background Transitions</h2>
+					<p>
+						Different background transitions are available via the backgroundTransition option. This one's called "zoom".
+					</p>
+					<pre><code class="hljs javascript">Reveal.configure({ backgroundTransition: 'zoom' })</code></pre>
+				</section>
+
+				<section data-transition="slide" data-background="#b5533c" data-background-transition="zoom">
+					<h2>Background Transitions</h2>
+					<p>
+						You can override background transitions per-slide.
+					</p>
+					<pre><code class="hljs html" style="word-wrap: break-word;">&lt;section data-background-transition="zoom"&gt;</code></pre>
+				</section>
+
+				<section data-background-iframe="https://hakim.se" data-background-interactive>
+					<div style="position: absolute; width: 40%; right: 0; box-shadow: 0 1px 4px rgba(0,0,0,0.5), 0 5px 25px rgba(0,0,0,0.2); background-color: rgba(0, 0, 0, 0.9); color: #fff; padding: 20px; font-size: 20px; text-align: left;">
+						<h2>Iframe Backgrounds</h2>
+						<p>Since reveal.js runs on the web, you can easily embed other web content. Try interacting with the page in the background.</p>
+					</div>
+				</section>
+
+				<section>
+					<h2>Pretty Code</h2>
+					<pre><code class="hljs" data-trim data-line-numbers="4|9|4,8-11">
+import React, { useState } from 'react';
+
+function Example() {
+  const [count, setCount] = useState(0);
+
+  return (
+    &lt;div&gt;
+      &lt;p&gt;You clicked {count} times&lt;/p&gt;
+      &lt;button onClick={() =&gt; setCount(count + 1)}&gt;
+        Click me
+      &lt;/button&gt;
+    &lt;/div&gt;
+  );
+}
+					</code></pre>
+					<p>Code syntax highlighting courtesy of <a href="http://softwaremaniacs.org/soft/highlight/en/description/">highlight.js</a>.</p>
+				</section>
+
+				<section>
+					<h2>Marvelous List</h2>
+					<ul>
+						<li>No order here</li>
+						<li>Or here</li>
+						<li>Or here</li>
+						<li>Or here</li>
+					</ul>
+				</section>
+
+				<section>
+					<h2>Fantastic Ordered List</h2>
+					<ol>
+						<li>One is smaller than...</li>
+						<li>Two is smaller than...</li>
+						<li>Three!</li>
+					</ol>
+				</section>
+
+				<section>
+					<h2>Tabular Tables</h2>
+					<table>
+						<thead>
+							<tr>
+								<th>Item</th>
+								<th>Value</th>
+								<th>Quantity</th>
+							</tr>
+						</thead>
+						<tbody>
+							<tr>
+								<td>Apples</td>
+								<td>$1</td>
+								<td>7</td>
+							</tr>
+							<tr>
+								<td>Lemonade</td>
+								<td>$2</td>
+								<td>18</td>
+							</tr>
+							<tr>
+								<td>Bread</td>
+								<td>$3</td>
+								<td>2</td>
+							</tr>
+						</tbody>
+					</table>
+				</section>
+
+				<section>
+					<h2>Clever Quotes</h2>
+					<p>
+						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:
+					</p>
+					<blockquote cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations">
+						&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>Intergalactic Interconnections</h2>
+					<p>
+						You can link between slides internally,
+						<a href="#/2/3">like this</a>.
+					</p>
+				</section>
+
+				<section>
+					<h2>Speaker View</h2>
+					<p>There's a <a href="https://github.com/hakimel/reveal.js#speaker-notes">speaker view</a>. It includes a timer, preview of the upcoming slide as well as your speaker notes.</p>
+					<p>Press the <em>S</em> key to try it out.</p>
+
+					<aside class="notes">
+						Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard).
+					</aside>
+				</section>
+
+				<section>
+					<h2>Export to PDF</h2>
+					<p>Presentations can be <a href="https://github.com/hakimel/reveal.js#pdf-export">exported to PDF</a>, here's an example:</p>
+					<iframe data-src="https://www.slideshare.net/slideshow/embed_code/42840540" width="445" height="355" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:3px solid #666; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe>
+				</section>
+
+				<section>
+					<h2>Global State</h2>
+					<p>
+						Set <code>data-state="something"</code> on a slide and <code>"something"</code>
+						will be added as a class to the document element when the slide is open. This lets you
+						apply broader style changes, like switching the page background.
+					</p>
+				</section>
+
+				<section data-state="customevent">
+					<h2>State Events</h2>
+					<p>
+						Additionally custom events can be triggered on a per slide basis by binding to the <code>data-state</code> name.
+					</p>
+					<pre><code class="javascript" data-trim contenteditable style="font-size: 18px;">
+Reveal.addEventListener( 'customevent', function() {
+	console.log( '"customevent" has fired' );
+} );
+					</code></pre>
+				</section>
+
+				<section>
+					<h2>Take a Moment</h2>
+					<p>
+						Press B or . on your keyboard to pause the presentation. This is helpful when you're on stage and want to take distracting slides off the screen.
+					</p>
+				</section>
+
+				<section>
+					<h2>Much more</h2>
+					<ul>
+						<li>Right-to-left support</li>
+						<li><a href="https://github.com/hakimel/reveal.js#api">Extensive JavaScript API</a></li>
+						<li><a href="https://github.com/hakimel/reveal.js#auto-sliding">Auto-progression</a></li>
+						<li><a href="https://github.com/hakimel/reveal.js#parallax-background">Parallax backgrounds</a></li>
+						<li><a href="https://github.com/hakimel/reveal.js#keyboard-bindings">Custom keyboard bindings</a></li>
+					</ul>
+				</section>
+
+				<section style="text-align: left;">
+					<h1>THE END</h1>
+					<p>
+						- <a href="https://slides.com">Try the online editor</a> <br>
+						- <a href="https://github.com/hakimel/reveal.js">Source code &amp; documentation</a>
+					</p>
+				</section>
+
+			</div>
+
+		</div>
+
+		<script src="js/reveal.js"></script>
+
+		<script>
+
+			// More info https://github.com/hakimel/reveal.js#configuration
+			Reveal.initialize({
+				controls: true,
+				progress: true,
+				center: true,
+				hash: true,
+
+				transition: 'slide', // none/fade/slide/convex/concave/zoom
+
+				// More info https://github.com/hakimel/reveal.js#dependencies
+				dependencies: [
+					{ 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' },
+					{ src: 'plugin/search/search.js', async: true },
+					{ src: 'plugin/zoom-js/zoom.js', async: true },
+					{ src: 'plugin/notes/notes.js', async: true }
+				]
+			});
+
+		</script>
+
+	</body>
+</html>

gruntfile.js

@@ -1,6 +1,14 @@
-/* global module:false */
-module.exports = function(grunt) {
-	var port = grunt.option('port') || 8000;
+const sass = require('node-sass');
+
+module.exports = grunt => {
+
+	require('load-grunt-tasks')(grunt);
+
+	let port = grunt.option('port') || 8000;
+	let root = grunt.option('root') || '.';
+
+	if (!Array.isArray(root)) root = [root];
+
 	// Project configuration
 	grunt.initConfig({
 		pkg: grunt.file.readJSON('package.json'),
@@ -8,10 +16,10 @@ module.exports = function(grunt) {
 			banner:
 				'/*!\n' +
 				' * reveal.js <%= pkg.version %> (<%= grunt.template.today("yyyy-mm-dd, HH:MM") %>)\n' +
-				' * http://lab.hakim.se/reveal-js\n' +
+				' * http://revealjs.com\n' +
 				' * MIT licensed\n' +
 				' *\n' +
-				' * Copyright (C) 2015 Hakim El Hattab, http://hakim.se\n' +
+				' * Copyright (C) 2020 Hakim El Hattab, http://hakim.se\n' +
 				' */'
 		},
 
@@ -21,7 +29,8 @@ module.exports = function(grunt) {
 
 		uglify: {
 			options: {
-				banner: '<%= meta.banner %>\n'
+				banner: '<%= meta.banner %>\n',
+				ie8: true
 			},
 			build: {
 				src: 'js/reveal.js',
@@ -30,35 +39,36 @@ module.exports = function(grunt) {
 		},
 
 		sass: {
+			options: {
+				implementation: sass,
+				sourceMap: false
+			},
 			core: {
-				files: {
-					'css/reveal.css': 'css/reveal.scss',
-				}
+				src: 'css/reveal.scss',
+				dest: 'css/reveal.css'
 			},
 			themes: {
-				files: [
-					{
-						expand: true,
-						cwd: 'css/theme/source',
-						src: ['*.scss'],
-						dest: 'css/theme',
-						ext: '.css'
-					}
-				]
+				expand: true,
+				cwd: 'css/theme/source',
+				src: ['*.sass', '*.scss'],
+				dest: 'css/theme',
+				ext: '.css'
 			}
 		},
 
 		autoprefixer: {
-			dist: {
+			core: {
 				src: 'css/reveal.css'
 			}
 		},
 
 		cssmin: {
+			options: {
+				compatibility: 'ie9'
+			},
 			compress: {
-				files: {
-					'css/reveal.min.css': [ 'css/reveal.css' ]
-				}
+				src: 'css/reveal.css',
+				dest: 'css/reveal.min.css'
 			}
 		},
 
@@ -67,7 +77,8 @@ module.exports = function(grunt) {
 				curly: false,
 				eqeqeq: true,
 				immed: true,
-				latedef: true,
+				esnext: true,
+				latedef: 'nofunc',
 				newcap: true,
 				noarg: true,
 				sub: true,
@@ -75,74 +86,82 @@ module.exports = function(grunt) {
 				eqnull: true,
 				browser: true,
 				expr: true,
+				loopfunc: true,
 				globals: {
 					head: false,
 					module: false,
 					console: false,
 					unescape: false,
 					define: false,
-					exports: false
+					exports: false,
+					require: false
 				}
 			},
-			files: [ 'Gruntfile.js', 'js/reveal.js' ]
+			files: [ 'gruntfile.js', 'js/reveal.js' ]
 		},
 
 		connect: {
 			server: {
 				options: {
 					port: port,
-					base: '.',
+					base: root,
 					livereload: true,
-					open: true
+					open: true,
+					useAvailablePort: true
 				}
 			}
 		},
 
 		zip: {
-			'reveal-js-presentation.zip': [
-				'index.html',
-				'css/**',
-				'js/**',
-				'lib/**',
-				'images/**',
-				'plugin/**'
-			]
+			bundle: {
+				src: [
+					'index.html',
+					'css/**',
+					'js/**',
+					'lib/**',
+					'images/**',
+					'plugin/**',
+					'**.md'
+				],
+				dest: 'reveal-js-presentation.zip'
+			}
 		},
 
 		watch: {
-			options: {
-				livereload: true
-			},
 			js: {
-				files: [ 'Gruntfile.js', 'js/reveal.js' ],
+				files: [ 'gruntfile.js', 'js/reveal.js' ],
 				tasks: 'js'
 			},
 			theme: {
-				files: [ 'css/theme/source/*.scss', 'css/theme/template/*.scss' ],
+				files: [
+					'css/theme/source/*.sass',
+					'css/theme/source/*.scss',
+					'css/theme/template/*.sass',
+					'css/theme/template/*.scss'
+				],
 				tasks: 'css-themes'
 			},
 			css: {
 				files: [ 'css/reveal.scss' ],
 				tasks: 'css-core'
 			},
+			test: {
+				files: [ 'test/*.html' ],
+				tasks: 'test'
+			},
 			html: {
-				files: [ 'index.html']
+				files: root.map(path => path + '/*.html')
+			},
+			markdown: {
+				files: root.map(path => path + '/*.md')
+			},
+			options: {
+				livereload: true
 			}
 		}
 
 	});
 
-	// Dependencies
-	grunt.loadNpmTasks( 'grunt-contrib-qunit' );
-	grunt.loadNpmTasks( 'grunt-contrib-jshint' );
-	grunt.loadNpmTasks( 'grunt-contrib-cssmin' );
-	grunt.loadNpmTasks( 'grunt-contrib-uglify' );
-	grunt.loadNpmTasks( 'grunt-contrib-watch' );
-	grunt.loadNpmTasks( 'grunt-sass' );
-	grunt.loadNpmTasks( 'grunt-contrib-connect' );
-	grunt.loadNpmTasks( 'grunt-autoprefixer' );
-	grunt.loadNpmTasks( 'grunt-zip' );
-
 	// Default task
 	grunt.registerTask( 'default', [ 'css', 'js' ] );
 

index.html

@@ -1,24 +1,17 @@
 <!doctype html>
-<html lang="en">
-
+<html>
 	<head>
 		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 
-		<title>reveal.js - The HTML Presentation Framework</title>
-
-		<meta name="description" content="A framework for easily creating beautiful presentations using HTML">
-		<meta name="author" content="Hakim El Hattab">
-
-		<meta name="apple-mobile-web-app-capable" content="yes" />
-		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
-
-		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
+		<title>reveal.js</title>
 
+		<link rel="stylesheet" href="css/reset.css">
 		<link rel="stylesheet" href="css/reveal.css">
-		<link rel="stylesheet" href="css/theme/black.css" id="theme">
+		<link rel="stylesheet" href="css/theme/black.css">
 
-		<!-- Code syntax highlighting -->
-		<link rel="stylesheet" href="lib/css/zenburn.css">
+		<!-- Theme used for syntax highlighting of code -->
+		<link rel="stylesheet" href="lib/css/monokai.css">
 
 		<!-- Printing and PDF exports -->
 		<script>
@@ -28,384 +21,30 @@
 			link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
 			document.getElementsByTagName( 'head' )[0].appendChild( link );
 		</script>
-
-		<!--[if lt IE 9]>
-		<script src="lib/js/html5shiv.js"></script>
-		<![endif]-->
 	</head>
-
 	<body>
-
 		<div class="reveal">
-
-			<!-- Any section element inside of this container is displayed as a slide -->
 			<div class="slides">
-				<section>
-					<h1>Reveal.js</h1>
-					<h3>The HTML Presentation Framework</h3>
-					<p>
-						<small>Created by <a href="http://hakim.se">Hakim El Hattab</a> / <a href="http://twitter.com/hakimel">@hakimel</a></small>
-					</p>
-				</section>
-
-				<section>
-					<h2>Hello There</h2>
-					<p>
-						reveal.js enables you to create beautiful interactive slide decks using HTML. This presentation will show you examples of what it can do.
-					</p>
-				</section>
-
-				<!-- Example of nested vertical slides -->
-				<section>
-					<section>
-						<h2>Vertical Slides</h2>
-						<p>Slides can be nested inside of each other.</p>
-						<p>Use the <em>Space</em> key to navigate through all slides.</p>
-						<br>
-						<a href="#" class="navigate-down">
-							<img width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
-						</a>
-					</section>
-					<section>
-						<h2>Basement Level 1</h2>
-						<p>Nested slides are useful for adding additional detail underneath a high level horizontal slide.</p>
-					</section>
-					<section>
-						<h2>Basement Level 2</h2>
-						<p>That's it, time to go back up.</p>
-						<br>
-						<a href="#/2">
-							<img width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Up arrow" style="transform: rotate(180deg); -webkit-transform: rotate(180deg);">
-						</a>
-					</section>
-				</section>
-
-				<section>
-					<h2>Slides</h2>
-					<p>
-						Not a coder? Not a problem. There's a fully-featured visual editor for authoring these, try it out at <a href="http://slides.com" target="_blank">http://slides.com</a>.
-					</p>
-				</section>
-
-				<section>
-					<h2>Point of View</h2>
-					<p>
-						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>
-
-				<section>
-					<h2>Touch Optimized</h2>
-					<p>
-						Presentations look great on touch devices, like mobile phones and tablets. Simply swipe through your slides.
-					</p>
-				</section>
-
-				<section data-markdown>
-					<script type="text/template">
-						## Markdown support
-
-						Write content using inline or external Markdown.
-						Instructions and more info available in the [readme](https://github.com/hakimel/reveal.js#markdown).
-
-						```
-						<section data-markdown>
-						  ## Markdown support
-
-						  Write content using inline or external Markdown.
-						  Instructions and more info available in the [readme](https://github.com/hakimel/reveal.js#markdown).
-						</section>
-						```
-					</script>
-				</section>
-
-				<section>
-					<section id="fragments">
-						<h2>Fragments</h2>
-						<p>Hit the next arrow...</p>
-						<p class="fragment">... to step through ...</p>
-						<p><span class="fragment">... a</span> <span class="fragment">fragmented</span> <span class="fragment">slide.</span></p>
-
-						<aside class="notes">
-							This slide has fragments which are also stepped through in the notes window.
-						</aside>
-					</section>
-					<section>
-						<h2>Fragment Styles</h2>
-						<p>There's different types of fragments, like:</p>
-						<p class="fragment grow">grow</p>
-						<p class="fragment shrink">shrink</p>
-						<p class="fragment fade-out">fade-out</p>
-						<p class="fragment current-visible">current-visible</p>
-						<p class="fragment highlight-red">highlight-red</p>
-						<p class="fragment highlight-blue">highlight-blue</p>
-					</section>
-				</section>
-
-				<section id="transitions">
-					<h2>Transition Styles</h2>
-					<p>
-						You can select from different transitions, like: <br>
-						<a href="?transition=none#/transitions">None</a> -
-						<a href="?transition=fade#/transitions">Fade</a> -
-						<a href="?transition=slide#/transitions">Slide</a> -
-						<a href="?transition=convex#/transitions">Convex</a> -
-						<a href="?transition=concave#/transitions">Concave</a> -
-						<a href="?transition=zoom#/transitions">Zoom</a>
-					</p>
-				</section>
-
-				<section id="themes">
-					<h2>Themes</h2>
-					<p>
-						reveal.js comes with a few themes built in: <br>
-						<!-- Hacks to swap themes after the page has loaded. Not flexible and only intended for the reveal.js demo deck. -->
-						<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/black.css'); return false;">Black (default)</a> -
-						<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/white.css'); return false;">White</a> -
-						<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/league.css'); return false;">League</a> -
-						<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/sky.css'); return false;">Sky</a> -
-						<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/beige.css'); return false;">Beige</a> -
-						<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/simple.css'); return false;">Simple</a> <br>
-						<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/serif.css'); return false;">Serif</a> -
-						<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/blood.css'); return false;">Blood</a> -
-						<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/night.css'); return false;">Night</a> -
-						<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/moon.css'); return false;">Moon</a> -
-						<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/solarized.css'); return false;">Solarized</a>
-					</p>
-				</section>
-
-				<section>
-					<section data-background="#dddddd">
-						<h2>Slide Backgrounds</h2>
-						<p>
-							Set <code>data-background="#dddddd"</code> on a slide to change the background color. All CSS color formats are supported.
-						</p>
-						<a href="#" class="navigate-down">
-							<img width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
-						</a>
-					</section>
-					<section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/image-placeholder.png">
-						<h2>Image Backgrounds</h2>
-						<pre><code>&lt;section data-background="image.png"&gt;</code></pre>
-					</section>
-					<section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/image-placeholder.png" data-background-repeat="repeat" data-background-size="100px">
-						<h2>Tiled Backgrounds</h2>
-						<pre><code style="word-wrap: break-word;">&lt;section data-background="image.png" data-background-repeat="repeat" data-background-size="100px"&gt;</code></pre>
-					</section>
-					<section data-background-video="https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.mp4,https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.webm" data-background-color="#000000">
-						<div style="background-color: rgba(0, 0, 0, 0.9); color: #fff; padding: 20px;">
-							<h2>Video Backgrounds</h2>
-							<pre><code style="word-wrap: break-word;">&lt;section data-background-video="video.mp4,video.webm"&gt;</code></pre>
-						</div>
-					</section>
-					<section data-background="http://i.giphy.com/90F8aUepslB84.gif">
-						<h2>... and GIFs!</h2>
-					</section>
-				</section>
-
-				<section data-transition="slide" data-background="#4d7e65" data-background-transition="zoom">
-					<h2>Background Transitions</h2>
-					<p>
-						Different background transitions are available via the backgroundTransition option. This one's called "zoom".
-					</p>
-					<pre><code>Reveal.configure({ backgroundTransition: 'zoom' })</code></pre>
-				</section>
-
-				<section data-transition="slide" data-background="#b5533c" data-background-transition="zoom">
-					<h2>Background Transitions</h2>
-					<p>
-						You can override background transitions per-slide.
-					</p>
-					<pre><code style="word-wrap: break-word;">&lt;section data-background-transition="zoom"&gt;</code></pre>
-				</section>
-
-				<section>
-					<h2>Pretty Code</h2>
-					<pre><code data-trim contenteditable>
-function linkify( selector ) {
-  if( supports3DTransforms ) {
-
-    var nodes = document.querySelectorAll( selector );
-
-    for( var i = 0, len = nodes.length; i &lt; len; i++ ) {
-      var node = nodes[i];
-
-      if( !node.className ) {
-        node.className += ' roll';
-      }
-    }
-  }
-}
-					</code></pre>
-					<p>Code syntax highlighting courtesy of <a href="http://softwaremaniacs.org/soft/highlight/en/description/">highlight.js</a>.</p>
-				</section>
-
-				<section>
-					<h2>Marvelous List</h2>
-					<ul>
-						<li>No order here</li>
-						<li>Or here</li>
-						<li>Or here</li>
-						<li>Or here</li>
-					</ul>
-				</section>
-
-				<section>
-					<h2>Fantastic Ordered List</h2>
-					<ol>
-						<li>One is smaller than...</li>
-						<li>Two is smaller than...</li>
-						<li>Three!</li>
-					</ol>
-				</section>
-
-				<section>
-					<h2>Tabular Tables</h2>
-					<table>
-						<thead>
-							<tr>
-								<th>Item</th>
-								<th>Value</th>
-								<th>Quantity</th>
-							</tr>
-						</thead>
-						<tbody>
-							<tr>
-								<td>Apples</td>
-								<td>$1</td>
-								<td>7</td>
-							<tr>
-							<tr>
-								<td>Lemonade</td>
-								<td>$2</td>
-								<td>18</td>
-							<tr>
-							<tr>
-								<td>Bread</td>
-								<td>$3</td>
-								<td>2</td>
-							<tr>
-						</tbody>
-					</table>
-				</section>
-
-				<section>
-					<h2>Clever Quotes</h2>
-					<p>
-						These guys come in two forms, inline: <q cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations">
-						&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">
-						&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>Intergalactic Interconnections</h2>
-					<p>
-						You can link between slides internally,
-						<a href="#/2/3">like this</a>.
-					</p>
-				</section>
-
-				<section>
-					<h2>Speaker View</h2>
-					<p>There's a <a href="https://github.com/hakimel/reveal.js#speaker-notes">speaker view</a>. It includes a timer, preview of the upcoming slide as well as your speaker notes.</p>
-					<p>Press the <em>S</em> key to try it out.</p>
-
-					<aside class="notes">
-						Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard).
-					</aside>
-				</section>
-
-				<section>
-					<h2>Export to PDF</h2>
-					<p>Presentations can be <a href="https://github.com/hakimel/reveal.js#pdf-export">exported to PDF</a>, here's an example:</p>
-					<iframe src="//www.slideshare.net/slideshow/embed_code/42840540" width="445" height="355" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:3px solid #666; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe>
-				</section>
-
-				<section>
-					<h2>Global State</h2>
-					<p>
-						Set <code>data-state="something"</code> on a slide and <code>"something"</code>
-						will be added as a class to the document element when the slide is open. This lets you
-						apply broader style changes, like switching the page background.
-					</p>
-				</section>
-
-				<section data-state="customevent">
-					<h2>State Events</h2>
-					<p>
-						Additionally custom events can be triggered on a per slide basis by binding to the <code>data-state</code> name.
-					</p>
-					<pre><code class="javascript" data-trim contenteditable style="font-size: 18px;">
-Reveal.addEventListener( 'customevent', function() {
-	console.log( '"customevent" has fired' );
-} );
-					</code></pre>
-				</section>
-
-				<section>
-					<h2>Take a Moment</h2>
-					<p>
-						Press B or . on your keyboard to pause the presentation. This is helpful when you're on stage and want to take distracting slides off the screen.
-					</p>
-				</section>
-
-				<section>
-					<h2>Much more</h2>
-					<ul>
-						<li>Right-to-left support</li>
-						<li><a href="https://github.com/hakimel/reveal.js#api">Extensive JavaScript API</a></li>
-						<li><a href="https://github.com/hakimel/reveal.js#auto-sliding">Auto-progression</a></li>
-						<li><a href="https://github.com/hakimel/reveal.js#parallax-background">Parallax backgrounds</a></li>
-						<li><a href="https://github.com/hakimel/reveal.js#keyboard-bindings">Custom keyboard bindings</a></li>
-					</ul>
-				</section>
-
-				<section style="text-align: left;">
-					<h1>THE END</h1>
-					<p>
-						- <a href="http://slides.com">Try the online editor</a> <br>
-						- <a href="https://github.com/hakimel/reveal.js">Source code &amp; documentation</a>
-					</p>
-				</section>
-
+				<section>Slide 1</section>
+				<section>Slide 2</section>
 			</div>
-
 		</div>
 
-		<script src="lib/js/head.min.js"></script>
 		<script src="js/reveal.js"></script>
 
 		<script>
-
-			// Full list of configuration options available at:
-			// https://github.com/hakimel/reveal.js#configuration
+			// More info about config & dependencies:
+			// - https://github.com/hakimel/reveal.js#configuration
+			// - https://github.com/hakimel/reveal.js#dependencies
 			Reveal.initialize({
-				controls: true,
-				progress: true,
-				history: true,
-				center: true,
-
-				transition: 'slide', // none/fade/slide/convex/concave/zoom
-
-				// Optional reveal.js plugins
+				hash: true,
 				dependencies: [
-					{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
-					{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
-					{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
-					{ src: 'plugin/highlight/highlight.js', async: true, condition: function() { return !!document.querySelector( 'pre code' ); }, callback: function() { hljs.initHighlightingOnLoad(); } },
-					{ src: 'plugin/zoom-js/zoom.js', async: true },
+					{ src: 'plugin/markdown/marked.js' },
+					{ src: 'plugin/markdown/markdown.js' },
+					{ src: 'plugin/highlight/highlight.js' },
 					{ src: 'plugin/notes/notes.js', async: true }
 				]
 			});
-
 		</script>
-
 	</body>
 </html>

lib/css/monokai.css

@@ -0,0 +1,71 @@
+/*
+Monokai style - ported by Luigi Maselli - http://grigio.org
+*/
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  background: #272822;
+  color: #ddd;
+}
+
+.hljs-tag,
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-literal,
+.hljs-strong,
+.hljs-name {
+  color: #f92672;
+}
+
+.hljs-code {
+  color: #66d9ef;
+}
+
+.hljs-class .hljs-title {
+  color: white;
+}
+
+.hljs-attribute,
+.hljs-symbol,
+.hljs-regexp,
+.hljs-link {
+  color: #bf79db;
+}
+
+.hljs-string,
+.hljs-bullet,
+.hljs-subst,
+.hljs-title,
+.hljs-section,
+.hljs-emphasis,
+.hljs-type,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-selector-attr,
+.hljs-selector-pseudo,
+.hljs-addition,
+.hljs-variable,
+.hljs-template-tag,
+.hljs-template-variable {
+  color: #a6e22e;
+}
+
+.hljs-comment,
+.hljs-quote,
+.hljs-deletion,
+.hljs-meta {
+  color: #75715e;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-literal,
+.hljs-doctag,
+.hljs-title,
+.hljs-section,
+.hljs-type,
+.hljs-selector-id {
+  font-weight: bold;
+}

lib/css/zenburn.css

@@ -6,112 +6,75 @@ based on dark.css by Ivan Sagalaev
 */
 
 .hljs {
-  display: block; padding: 0.5em;
-  background: #3F3F3F;
-  color: #DCDCDC;
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  background: #3f3f3f;
+  color: #dcdcdc;
 }
 
 .hljs-keyword,
-.hljs-tag,
-.css .hljs-class,
-.css .hljs-id,
-.lisp .hljs-title,
-.nginx .hljs-title,
-.hljs-request,
-.hljs-status,
-.clojure .hljs-attribute {
-  color: #E3CEAB;
+.hljs-selector-tag,
+.hljs-tag {
+  color: #e3ceab;
 }
 
-.django .hljs-template_tag,
-.django .hljs-variable,
-.django .hljs-filter .hljs-argument {
-  color: #DCDCDC;
+.hljs-template-tag {
+  color: #dcdcdc;
 }
 
-.hljs-number,
-.hljs-date {
-  color: #8CD0D3;
+.hljs-number {
+  color: #8cd0d3;
 }
 
-.dos .hljs-envvar,
-.dos .hljs-stream,
 .hljs-variable,
-.apache .hljs-sqbracket {
-  color: #EFDCBC;
+.hljs-template-variable,
+.hljs-attribute {
+  color: #efdcbc;
 }
 
-.dos .hljs-flow,
-.diff .hljs-change,
-.python .exception,
-.python .hljs-built_in,
-.hljs-literal,
-.tex .hljs-special {
-  color: #EFEFAF;
+.hljs-literal {
+  color: #efefaf;
 }
 
-.diff .hljs-chunk,
 .hljs-subst {
-  color: #8F8F8F;
+  color: #8f8f8f;
 }
 
-.dos .hljs-keyword,
-.python .hljs-decorator,
 .hljs-title,
-.haskell .hljs-type,
-.diff .hljs-header,
-.ruby .hljs-class .hljs-parent,
-.apache .hljs-tag,
-.nginx .hljs-built_in,
-.tex .hljs-command,
-.hljs-prompt {
-    color: #efef8f;
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-section,
+.hljs-type {
+  color: #efef8f;
 }
 
-.dos .hljs-winutils,
-.ruby .hljs-symbol,
-.ruby .hljs-symbol .hljs-string,
-.ruby .hljs-string {
-  color: #DCA3A3;
+.hljs-symbol,
+.hljs-bullet,
+.hljs-link {
+  color: #dca3a3;
 }
 
-.diff .hljs-deletion,
+.hljs-deletion,
 .hljs-string,
-.hljs-tag .hljs-value,
-.hljs-preprocessor,
-.hljs-pragma,
 .hljs-built_in,
-.sql .hljs-aggregate,
-.hljs-javadoc,
-.smalltalk .hljs-class,
-.smalltalk .hljs-localvars,
-.smalltalk .hljs-array,
-.css .hljs-rules .hljs-value,
-.hljs-attr_selector,
-.hljs-pseudo,
-.apache .hljs-cbracket,
-.tex .hljs-formula,
-.coffeescript .hljs-attribute {
-  color: #CC9393;
+.hljs-builtin-name {
+  color: #cc9393;
 }
 
-.hljs-shebang,
-.diff .hljs-addition,
+.hljs-addition,
 .hljs-comment,
-.java .hljs-annotation,
-.hljs-template_comment,
-.hljs-pi,
-.hljs-doctype {
-  color: #7F9F7F;
+.hljs-quote,
+.hljs-meta {
+  color: #7f9f7f;
 }
 
-.coffeescript .javascript,
-.javascript .xml,
-.tex .hljs-formula,
-.xml .javascript,
-.xml .vbscript,
-.xml .css,
-.xml .hljs-cdata {
-  opacity: 0.5;
+
+.hljs-emphasis {
+  font-style: italic;
 }
 
+.hljs-strong {
+  font-weight: bold;
+}

lib/js/classList.js

@@ -1,2 +0,0 @@
-/*! @source http://purl.eligrey.com/github/classList.js/blob/master/classList.js*/
-if(typeof document!=="undefined"&&!("classList" in document.createElement("a"))){(function(j){var a="classList",f="prototype",m=(j.HTMLElement||j.Element)[f],b=Object,k=String[f].trim||function(){return this.replace(/^\s+|\s+$/g,"")},c=Array[f].indexOf||function(q){var p=0,o=this.length;for(;p<o;p++){if(p in this&&this[p]===q){return p}}return -1},n=function(o,p){this.name=o;this.code=DOMException[o];this.message=p},g=function(p,o){if(o===""){throw new n("SYNTAX_ERR","An invalid or illegal string was specified")}if(/\s/.test(o)){throw new n("INVALID_CHARACTER_ERR","String contains an invalid character")}return c.call(p,o)},d=function(s){var r=k.call(s.className),q=r?r.split(/\s+/):[],p=0,o=q.length;for(;p<o;p++){this.push(q[p])}this._updateClassName=function(){s.className=this.toString()}},e=d[f]=[],i=function(){return new d(this)};n[f]=Error[f];e.item=function(o){return this[o]||null};e.contains=function(o){o+="";return g(this,o)!==-1};e.add=function(o){o+="";if(g(this,o)===-1){this.push(o);this._updateClassName()}};e.remove=function(p){p+="";var o=g(this,p);if(o!==-1){this.splice(o,1);this._updateClassName()}};e.toggle=function(o){o+="";if(g(this,o)===-1){this.add(o)}else{this.remove(o)}};e.toString=function(){return this.join(" ")};if(b.defineProperty){var l={get:i,enumerable:true,configurable:true};try{b.defineProperty(m,a,l)}catch(h){if(h.number===-2146823252){l.enumerable=false;b.defineProperty(m,a,l)}}}else{if(b[f].__defineGetter__){m.__defineGetter__(a,i)}}}(self))};

lib/js/head.min.js

@@ -1,8 +0,0 @@
-/**
-    Head JS     The only script in your <HEAD>
-    Copyright   Tero Piirainen (tipiirai)
-    License     MIT / http://bit.ly/mit-license
-    Version     0.96
-
-    http://headjs.com
-*/(function(a){function z(){d||(d=!0,s(e,function(a){p(a)}))}function y(c,d){var e=a.createElement("script");e.type="text/"+(c.type||"javascript"),e.src=c.src||c,e.async=!1,e.onreadystatechange=e.onload=function(){var a=e.readyState;!d.done&&(!a||/loaded|complete/.test(a))&&(d.done=!0,d())},(a.body||b).appendChild(e)}function x(a,b){if(a.state==o)return b&&b();if(a.state==n)return k.ready(a.name,b);if(a.state==m)return a.onpreload.push(function(){x(a,b)});a.state=n,y(a.url,function(){a.state=o,b&&b(),s(g[a.name],function(a){p(a)}),u()&&d&&s(g.ALL,function(a){p(a)})})}function w(a,b){a.state===undefined&&(a.state=m,a.onpreload=[],y({src:a.url,type:"cache"},function(){v(a)}))}function v(a){a.state=l,s(a.onpreload,function(a){a.call()})}function u(a){a=a||h;var b;for(var c in a){if(a.hasOwnProperty(c)&&a[c].state!=o)return!1;b=!0}return b}function t(a){return Object.prototype.toString.call(a)=="[object Function]"}function s(a,b){if(!!a){typeof a=="object"&&(a=[].slice.call(a));for(var c=0;c<a.length;c++)b.call(a,a[c],c)}}function r(a){var b;if(typeof a=="object")for(var c in a)a[c]&&(b={name:c,url:a[c]});else b={name:q(a),url:a};var d=h[b.name];if(d&&d.url===b.url)return d;h[b.name]=b;return b}function q(a){var b=a.split("/"),c=b[b.length-1],d=c.indexOf("?");return d!=-1?c.substring(0,d):c}function p(a){a._done||(a(),a._done=1)}var b=a.documentElement,c,d,e=[],f=[],g={},h={},i=a.createElement("script").async===!0||"MozAppearance"in a.documentElement.style||window.opera,j=window.head_conf&&head_conf.head||"head",k=window[j]=window[j]||function(){k.ready.apply(null,arguments)},l=1,m=2,n=3,o=4;i?k.js=function(){var a=arguments,b=a[a.length-1],c={};t(b)||(b=null),s(a,function(d,e){d!=b&&(d=r(d),c[d.name]=d,x(d,b&&e==a.length-2?function(){u(c)&&p(b)}:null))});return k}:k.js=function(){var a=arguments,b=[].slice.call(a,1),d=b[0];if(!c){f.push(function(){k.js.apply(null,a)});return k}d?(s(b,function(a){t(a)||w(r(a))}),x(r(a[0]),t(d)?d:function(){k.js.apply(null,b)})):x(r(a[0]));return k},k.ready=function(b,c){if(b==a){d?p(c):e.push(c);return k}t(b)&&(c=b,b="ALL");if(typeof b!="string"||!t(c))return k;var f=h[b];if(f&&f.state==o||b=="ALL"&&u()&&d){p(c);return k}var i=g[b];i?i.push(c):i=g[b]=[c];return k},k.ready(a,function(){u()&&s(g.ALL,function(a){p(a)}),k.feature&&k.feature("domloaded",!0)});if(window.addEventListener)a.addEventListener("DOMContentLoaded",z,!1),window.addEventListener("load",z,!1);else if(window.attachEvent){a.attachEvent("onreadystatechange",function(){a.readyState==="complete"&&z()});var A=1;try{A=window.frameElement}catch(B){}!A&&b.doScroll&&function(){try{b.doScroll("left"),z()}catch(a){setTimeout(arguments.callee,1);return}}(),window.attachEvent("onload",z)}!a.readyState&&a.addEventListener&&(a.readyState="loading",a.addEventListener("DOMContentLoaded",handler=function(){a.removeEventListener("DOMContentLoaded",handler,!1),a.readyState="complete"},!1)),setTimeout(function(){c=!0,s(f,function(a){a()})},300)})(document)

lib/js/promise.js

@@ -0,0 +1,2 @@
+/* MIT | https://github.com/taylorhakes/promise-polyfill */
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n():"function"==typeof define&&define.amd?define(n):n()}(0,function(){"use strict";function e(e){var n=this.constructor;return this.then(function(t){return n.resolve(e()).then(function(){return t})},function(t){return n.resolve(e()).then(function(){return n.reject(t)})})}function n(){}function t(e){if(!(this instanceof t))throw new TypeError("Promises must be constructed via new");if("function"!=typeof e)throw new TypeError("not a function");this._state=0,this._handled=!1,this._value=undefined,this._deferreds=[],u(e,this)}function o(e,n){for(;3===e._state;)e=e._value;0!==e._state?(e._handled=!0,t._immediateFn(function(){var t=1===e._state?n.onFulfilled:n.onRejected;if(null!==t){var o;try{o=t(e._value)}catch(f){return void i(n.promise,f)}r(n.promise,o)}else(1===e._state?r:i)(n.promise,e._value)})):e._deferreds.push(n)}function r(e,n){try{if(n===e)throw new TypeError("A promise cannot be resolved with itself.");if(n&&("object"==typeof n||"function"==typeof n)){var o=n.then;if(n instanceof t)return e._state=3,e._value=n,void f(e);if("function"==typeof o)return void u(function(e,n){return function(){e.apply(n,arguments)}}(o,n),e)}e._state=1,e._value=n,f(e)}catch(r){i(e,r)}}function i(e,n){e._state=2,e._value=n,f(e)}function f(e){2===e._state&&0===e._deferreds.length&&t._immediateFn(function(){e._handled||t._unhandledRejectionFn(e._value)});for(var n=0,r=e._deferreds.length;r>n;n++)o(e,e._deferreds[n]);e._deferreds=null}function u(e,n){var t=!1;try{e(function(e){t||(t=!0,r(n,e))},function(e){t||(t=!0,i(n,e))})}catch(o){if(t)return;t=!0,i(n,o)}}var c=setTimeout;t.prototype["catch"]=function(e){return this.then(null,e)},t.prototype.then=function(e,t){var r=new this.constructor(n);return o(this,new function(e,n,t){this.onFulfilled="function"==typeof e?e:null,this.onRejected="function"==typeof n?n:null,this.promise=t}(e,t,r)),r},t.prototype["finally"]=e,t.all=function(e){return new t(function(n,t){function o(e,f){try{if(f&&("object"==typeof f||"function"==typeof f)){var u=f.then;if("function"==typeof u)return void u.call(f,function(n){o(e,n)},t)}r[e]=f,0==--i&&n(r)}catch(c){t(c)}}if(!e||"undefined"==typeof e.length)throw new TypeError("Promise.all accepts an array");var r=Array.prototype.slice.call(e);if(0===r.length)return n([]);for(var i=r.length,f=0;r.length>f;f++)o(f,r[f])})},t.resolve=function(e){return e&&"object"==typeof e&&e.constructor===t?e:new t(function(n){n(e)})},t.reject=function(e){return new t(function(n,t){t(e)})},t.race=function(e){return new t(function(n,t){for(var o=0,r=e.length;r>o;o++)e[o].then(n,t)})},t._immediateFn="function"==typeof setImmediate&&function(e){setImmediate(e)}||function(e){c(e,0)},t._unhandledRejectionFn=function(e){void 0!==console&&console&&console.warn("Possible Unhandled Promise Rejection:",e)};var l=function(){if("undefined"!=typeof self)return self;if("undefined"!=typeof window)return window;if("undefined"!=typeof global)return global;throw Error("unable to locate global object")}();"Promise"in l?l.Promise.prototype["finally"]||(l.Promise.prototype["finally"]=e):l.Promise=t});

package.json

@@ -1,13 +1,14 @@
 {
   "name": "reveal.js",
-  "version": "3.1.0",
+  "version": "3.9.2",
   "description": "The HTML Presentation Framework",
-  "homepage": "http://lab.hakim.se/reveal-js",
+  "homepage": "http://revealjs.com",
   "subdomain": "revealjs",
   "main": "js/reveal.js",
   "scripts": {
     "test": "grunt test",
-    "start": ""
+    "start": "grunt serve",
+    "build": "grunt"
   },
   "author": {
     "name": "Hakim El Hattab",
@@ -19,31 +20,25 @@
     "url": "git://github.com/hakimel/reveal.js.git"
   },
   "engines": {
-    "node": "~0.10.0"
-  },
-  "dependencies": {
-    "underscore": "~1.5.1",
-    "express": "~2.5.9",
-    "mustache": "~0.7.2",
-    "socket.io": "~0.9.16"
+    "node": ">=9.0.0"
   },
   "devDependencies": {
-    "grunt-contrib-qunit": "~0.5.2",
-    "grunt-contrib-jshint": "~0.6.4",
-    "grunt-contrib-cssmin": "~0.12.2",
-    "grunt-contrib-uglify": "~0.2.4",
-    "grunt-contrib-watch": "~0.5.3",
-    "grunt-sass": "~0.14.0",
-    "grunt-contrib-connect": "~0.8.0",
-    "grunt-autoprefixer": "~1.0.1",
-    "grunt-zip": "~0.7.0",
-    "grunt": "~0.4.0",
-    "node-sass": "~0.9.3"
+    "express": "^4.16.2",
+    "grunt": "^1.0.4",
+    "grunt-autoprefixer": "^3.0.4",
+    "grunt-cli": "^1.3.2",
+    "grunt-contrib-connect": "^2.0.0",
+    "grunt-contrib-cssmin": "^3.0.0",
+    "grunt-contrib-jshint": "^2.0.0",
+    "grunt-contrib-qunit": "^3.1.0",
+    "grunt-contrib-uglify": "^3.3.0",
+    "grunt-contrib-watch": "^1.1.0",
+    "grunt-sass": "^3.0.2",
+    "grunt-zip": "~0.17.1",
+    "load-grunt-tasks": "^4.0.0",
+    "mustache": "^2.3.0",
+    "node-sass": "^4.13.1",
+    "socket.io": "^2.2.0"
   },
-  "licenses": [
-    {
-      "type": "MIT",
-      "url": "https://github.com/hakimel/reveal.js/blob/master/LICENSE"
-    }
-  ]
+  "license": "MIT"
 }

plugin/markdown/example.html

@@ -9,7 +9,7 @@
 		<link rel="stylesheet" href="../../css/reveal.css">
 		<link rel="stylesheet" href="../../css/theme/white.css" id="theme">
 
-        <link rel="stylesheet" href="../../lib/css/zenburn.css">
+        <link rel="stylesheet" href="../../lib/css/monokai.css">
 	</head>
 
 	<body>
@@ -99,10 +99,16 @@
                     </script>
                 </section>
 
+                <!-- Images -->
+                <section data-markdown>
+                    <script type="text/template">
+                        ![Sample image](https://s3.amazonaws.com/static.slid.es/logo/v2/slides-symbol-512x512.png)
+                    </script>
+                </section>
+
             </div>
 		</div>
 
-		<script src="../../lib/js/head.min.js"></script>
 		<script src="../../js/reveal.js"></script>
 
 		<script>
@@ -115,7 +121,6 @@
 
 				// 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]' ); } },
                     { src: '../highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },

plugin/markdown/example.md

@@ -29,3 +29,8 @@ Content 3.1
 ## External 3.2
 
 Content 3.2
+
+
+## External 3.3
+
+![External Image](https://s3.amazonaws.com/static.slid.es/logo/v2/slides-symbol-512x512.png)

plugin/markdown/markdown.js

@@ -4,33 +4,24 @@
  * of external markdown documents.
  */
 (function( root, factory ) {
-	if( typeof exports === 'object' ) {
+	if (typeof define === 'function' && define.amd) {
+		root.marked = require( './marked' );
+		root.RevealMarkdown = factory( root.marked );
+	} else if( typeof exports === 'object' ) {
 		module.exports = factory( require( './marked' ) );
-	}
-	else {
+	} else {
 		// Browser globals (root is window)
 		root.RevealMarkdown = factory( root.marked );
-		root.RevealMarkdown.initialize();
 	}
 }( this, function( marked ) {
 
-	if( typeof marked === 'undefined' ) {
-		throw 'The reveal.js Markdown plugin requires marked to be loaded';
-	}
-
-	if( typeof hljs !== 'undefined' ) {
-		marked.setOptions({
-			highlight: function( lang, code ) {
-				return hljs.highlightAuto( lang, code ).value;
-			}
-		});
-	}
-
 	var DEFAULT_SLIDE_SEPARATOR = '^\r?\n---\r?\n$',
-		DEFAULT_NOTES_SEPARATOR = 'note:',
+		DEFAULT_NOTES_SEPARATOR = 'notes?:',
 		DEFAULT_ELEMENT_ATTRIBUTES_SEPARATOR = '\\\.element\\\s*?(.+?)$',
 		DEFAULT_SLIDE_ATTRIBUTES_SEPARATOR = '\\\.slide:\\\s*?(\\\S.+?)$';
 
+	var SCRIPT_END_PLACEHOLDER = '__SCRIPT_END__';
+
 
 	/**
 	 * Retrieves the markdown contents of a slide section
@@ -38,11 +29,15 @@
 	 */
 	function getMarkdownFromSlide( section ) {
 
-		var template = section.querySelector( 'script' );
+		// look for a <script> or <textarea data-template> wrapper
+		var template = section.querySelector( '[data-template]' ) || section.querySelector( 'script' );
 
 		// strip leading whitespace so it isn't evaluated as code
 		var text = ( template || section ).textContent;
 
+		// restore script end tags
+		text = text.replace( new RegExp( SCRIPT_END_PLACEHOLDER, 'g' ), '</script>' );
+
 		var leadingWs = text.match( /^\n?(\s*)/ )[1].length,
 			leadingTabs = text.match( /^\n?(\t*)/ )[1].length;
 
@@ -112,9 +107,13 @@
 		var notesMatch = content.split( new RegExp( options.notesSeparator, 'mgi' ) );
 
 		if( notesMatch.length === 2 ) {
-			content = notesMatch[0] + '<aside class="notes" data-markdown>' + notesMatch[1].trim() + '</aside>';
+			content = notesMatch[0] + '<aside class="notes">' + marked(notesMatch[1].trim()) + '</aside>';
 		}
 
+		// prevent script end tags in the content from interfering
+		// with parsing
+		content = content.replace( /<\/script>/g, SCRIPT_END_PLACEHOLDER );
+
 		return '<script type="text/template">' + content + '</script>';
 
 	}
@@ -177,7 +176,7 @@
 				markdownSections += '<section '+ options.attributes +'>';
 
 				sectionStack[i].forEach( function( child ) {
-					markdownSections += '<section data-markdown>' +  createMarkdownSlide( child, options ) + '</section>';
+					markdownSections += '<section data-markdown>' + createMarkdownSlide( child, options ) + '</section>';
 				} );
 
 				markdownSections += '</section>';
@@ -198,81 +197,108 @@
 	 */
 	function processSlides() {
 
-		var sections = document.querySelectorAll( '[data-markdown]'),
-			section;
+		return new Promise( function( resolve ) {
 
-		for( var i = 0, len = sections.length; i < len; i++ ) {
+			var externalPromises = [];
 
-			section = sections[i];
+			[].slice.call( document.querySelectorAll( '[data-markdown]') ).forEach( function( section, i ) {
 
-			if( section.getAttribute( 'data-markdown' ).length ) {
+				if( section.getAttribute( 'data-markdown' ).length ) {
 
-				var xhr = new XMLHttpRequest(),
-					url = section.getAttribute( 'data-markdown' );
-
-				datacharset = section.getAttribute( 'data-charset' );
-
-				// see https://developer.mozilla.org/en-US/docs/Web/API/element.getAttribute#Notes
-				if( datacharset != null && datacharset != '' ) {
-					xhr.overrideMimeType( 'text/html; charset=' + datacharset );
-				}
-
-				xhr.onreadystatechange = function() {
-					if( xhr.readyState === 4 ) {
-						// file protocol yields status code 0 (useful for local debug, mobile applications etc.)
-						if ( ( xhr.status >= 200 && xhr.status < 300 ) || xhr.status === 0 ) {
+					externalPromises.push( loadExternalMarkdown( section ).then(
 
+						// Finished loading external file
+						function( xhr, url ) {
 							section.outerHTML = slidify( xhr.responseText, {
 								separator: section.getAttribute( 'data-separator' ),
 								verticalSeparator: section.getAttribute( 'data-separator-vertical' ),
 								notesSeparator: section.getAttribute( 'data-separator-notes' ),
 								attributes: getForwardedAttributes( section )
 							});
+						},
 
-						}
-						else {
-
+						// Failed to load markdown
+						function( xhr, url ) {
 							section.outerHTML = '<section data-state="alert">' +
 								'ERROR: The attempt to fetch ' + url + ' failed with 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.</p>' +
 								'</section>';
-
 						}
+
+					) );
+
+				}
+				else if( section.getAttribute( 'data-separator' ) || section.getAttribute( 'data-separator-vertical' ) || section.getAttribute( 'data-separator-notes' ) ) {
+
+					section.outerHTML = slidify( getMarkdownFromSlide( section ), {
+						separator: section.getAttribute( 'data-separator' ),
+						verticalSeparator: section.getAttribute( 'data-separator-vertical' ),
+						notesSeparator: section.getAttribute( 'data-separator-notes' ),
+						attributes: getForwardedAttributes( section )
+					});
+
+				}
+				else {
+					section.innerHTML = createMarkdownSlide( getMarkdownFromSlide( section ) );
+				}
+
+			});
+
+			Promise.all( externalPromises ).then( resolve );
+
+		} );
+
+	}
+
+	function loadExternalMarkdown( section ) {
+
+		return new Promise( function( resolve, reject ) {
+
+			var xhr = new XMLHttpRequest(),
+				url = section.getAttribute( 'data-markdown' );
+
+			datacharset = section.getAttribute( 'data-charset' );
+
+			// see https://developer.mozilla.org/en-US/docs/Web/API/element.getAttribute#Notes
+			if( datacharset != null && datacharset != '' ) {
+				xhr.overrideMimeType( 'text/html; charset=' + datacharset );
+			}
+
+			xhr.onreadystatechange = function( section, xhr ) {
+				if( xhr.readyState === 4 ) {
+					// file protocol yields status code 0 (useful for local debug, mobile applications etc.)
+					if ( ( xhr.status >= 200 && xhr.status < 300 ) || xhr.status === 0 ) {
+
+						resolve( xhr, url );
+
 					}
-				};
+					else {
 
-				xhr.open( 'GET', url, false );
+						reject( xhr, url );
 
-				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 );
+					}
 				}
+			}.bind( this, section, xhr );
 
-			}
-			else if( section.getAttribute( 'data-separator' ) || section.getAttribute( 'data-separator-vertical' ) || section.getAttribute( 'data-separator-notes' ) ) {
+			xhr.open( 'GET', url, true );
 
-				section.outerHTML = slidify( getMarkdownFromSlide( section ), {
-					separator: section.getAttribute( 'data-separator' ),
-					verticalSeparator: section.getAttribute( 'data-separator-vertical' ),
-					notesSeparator: section.getAttribute( 'data-separator-notes' ),
-					attributes: getForwardedAttributes( section )
-				});
+			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 );
+				resolve( xhr, url );
+			}
 
-			}
-			else {
-				section.innerHTML = createMarkdownSlide( getMarkdownFromSlide( section ) );
-			}
-		}
+		} );
 
 	}
 
 	/**
 	 * Check if a node value has the attributes pattern.
 	 * If yes, extract it and add that value as one or several attributes
-	 * the the terget element.
+	 * to the target element.
 	 *
 	 * You need Cache Killer on Chrome to see the effect on any FOM transformation
 	 * directly on refresh (F5)
@@ -341,46 +367,67 @@
 	 */
 	function convertSlides() {
 
-		var sections = document.querySelectorAll( '[data-markdown]');
+		var sections = document.querySelectorAll( '[data-markdown]:not([data-markdown-parsed])');
 
-		for( var i = 0, len = sections.length; i < len; i++ ) {
+		[].slice.call( sections ).forEach( function( section ) {
 
-			var section = sections[i];
+			section.setAttribute( 'data-markdown-parsed', true )
 
-			// Only parse the same slide once
-			if( !section.getAttribute( 'data-markdown-parsed' ) ) {
+			var notes = section.querySelector( 'aside.notes' );
+			var markdown = getMarkdownFromSlide( section );
 
-				section.setAttribute( 'data-markdown-parsed', true )
-
-				var notes = section.querySelector( 'aside.notes' );
-				var markdown = getMarkdownFromSlide( section );
-
-				section.innerHTML = marked( markdown );
-				addAttributes( 	section, section, null, section.getAttribute( 'data-element-attributes' ) ||
-								section.parentNode.getAttribute( 'data-element-attributes' ) ||
-								DEFAULT_ELEMENT_ATTRIBUTES_SEPARATOR,
-								section.getAttribute( 'data-attributes' ) ||
-								section.parentNode.getAttribute( 'data-attributes' ) ||
-								DEFAULT_SLIDE_ATTRIBUTES_SEPARATOR);
-
-				// If there were notes, we need to re-add them after
-				// having overwritten the section's HTML
-				if( notes ) {
-					section.appendChild( notes );
-				}
+			section.innerHTML = marked( markdown );
+			addAttributes( 	section, section, null, section.getAttribute( 'data-element-attributes' ) ||
+							section.parentNode.getAttribute( 'data-element-attributes' ) ||
+							DEFAULT_ELEMENT_ATTRIBUTES_SEPARATOR,
+							section.getAttribute( 'data-attributes' ) ||
+							section.parentNode.getAttribute( 'data-attributes' ) ||
+							DEFAULT_SLIDE_ATTRIBUTES_SEPARATOR);
 
+			// If there were notes, we need to re-add them after
+			// having overwritten the section's HTML
+			if( notes ) {
+				section.appendChild( notes );
 			}
 
-		}
+		} );
+
+		return Promise.resolve();
 
 	}
 
 	// API
-	return {
+	var RevealMarkdown = {
+
+		/**
+		 * Starts processing and converting Markdown within the
+		 * current reveal.js deck.
+		 *
+		 * @param {function} callback function to invoke once
+		 * we've finished loading and parsing Markdown
+		 */
+		init: function( callback ) {
+
+			if( typeof marked === 'undefined' ) {
+				throw 'The reveal.js Markdown plugin requires marked to be loaded';
+			}
+
+			if( typeof hljs !== 'undefined' ) {
+				marked.setOptions({
+					highlight: function( code, lang ) {
+						return hljs.highlightAuto( code, [lang] ).value;
+					}
+				});
+			}
+
+			// marked can be configured via reveal.js config options
+			var options = Reveal.getConfig().markdown;
+			if( options ) {
+				marked.setOptions( options );
+			}
+
+			return processSlides().then( convertSlides );
 
-		initialize: function() {
-			processSlides();
-			convertSlides();
 		},
 
 		// TODO: Do these belong in the API?
@@ -390,4 +437,10 @@
 
 	};
 
+	// Register our plugin so that reveal.js will call our
+	// plugin 'init' method as part of the initialization
+	Reveal.registerPlugin( 'markdown', RevealMarkdown );
+
+	return RevealMarkdown;
+
 }));

plugin/math/math.js

@@ -7,30 +7,28 @@
 var RevealMath = window.RevealMath || (function(){
 
 	var options = Reveal.getConfig().math || {};
-	options.mathjax = options.mathjax || 'https://cdn.mathjax.org/mathjax/latest/MathJax.js';
-	options.config = options.config || 'TeX-AMS_HTML-full';
+	var mathjax = options.mathjax || 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js';
+	var config = options.config || 'TeX-AMS_HTML-full';
+	var url = mathjax + '?config=' + config;
 
-	loadScript( options.mathjax + '?config=' + options.config, function() {
+	var defaultOptions = {
+		messageStyle: 'none',
+		tex2jax: {
+			inlineMath: [ [ '$', '$' ], [ '\\(', '\\)' ] ],
+			skipTags: [ 'script', 'noscript', 'style', 'textarea', 'pre' ]
+		},
+		skipStartupTypeset: true
+	};
 
-		MathJax.Hub.Config({
-			messageStyle: 'none',
-			tex2jax: { inlineMath: [['$','$'],['\\(','\\)']] },
-			skipStartupTypeset: true
-		});
+	function defaults( options, defaultOptions ) {
 
-		// Typeset followed by an immediate reveal.js layout since
-		// the typesetting process could affect slide height
-		MathJax.Hub.Queue( [ 'Typeset', MathJax.Hub ] );
-		MathJax.Hub.Queue( Reveal.layout );
+		for ( var i in defaultOptions ) {
+			if ( !options.hasOwnProperty( i ) ) {
+				options[i] = defaultOptions[i];
+			}
+		}
 
-		// Reprocess equations in slides when they turn visible
-		Reveal.addEventListener( 'slidechanged', function( event ) {
-
-			MathJax.Hub.Queue( [ 'Typeset', MathJax.Hub, event.currentSlide ] );
-
-		} );
-
-	} );
+	}
 
 	function loadScript( url, callback ) {
 
@@ -61,4 +59,34 @@ var RevealMath = window.RevealMath || (function(){
 
 	}
 
+	return {
+		init: function() {
+
+			defaults( options, defaultOptions );
+			defaults( options.tex2jax, defaultOptions.tex2jax );
+			options.mathjax = options.config = null;
+
+			loadScript( url, function() {
+
+				MathJax.Hub.Config( options );
+
+				// Typeset followed by an immediate reveal.js layout since
+				// the typesetting process could affect slide height
+				MathJax.Hub.Queue( [ 'Typeset', MathJax.Hub ] );
+				MathJax.Hub.Queue( Reveal.layout );
+
+				// Reprocess equations in slides when they turn visible
+				Reveal.addEventListener( 'slidechanged', function( event ) {
+
+					MathJax.Hub.Queue( [ 'Typeset', MathJax.Hub, event.currentSlide ] );
+
+				} );
+
+			} );
+
+		}
+	}
+
 })();
+
+Reveal.registerPlugin( 'math', RevealMath );

plugin/multiplex/client.js

@@ -8,6 +8,6 @@
 		if (data.socketId !== socketId) { return; }
 		if( window.location.host === 'localhost:1947' ) return;
 
-		Reveal.slide(data.indexh, data.indexv, data.indexf, 'remote');
+		Reveal.setState(data.state);
 	});
 }());

plugin/multiplex/index.js

@@ -1,37 +1,45 @@
+var http        = require('http');
 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;
+var app       	= express();
+var staticDir 	= express.static;
+var server    	= http.createServer(app);
 
-io				= io.listen(app);
+io = io(server);
 
 var opts = {
-	port: 1948,
+	port: process.env.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);
+io.on( 'connection', function( socket ) {
+	socket.on('multiplex-statechanged', function(data) {
+		if (typeof data.secret == 'undefined' || data.secret == null || data.secret === '') return;
+		if (createHash(data.secret) === data.socketId) {
+			data.secret = null;
+			socket.broadcast.emit(data.socketId, data);
 		};
 	});
 });
 
-app.configure(function() {
-	[ 'css', 'js', 'plugin', 'lib' ].forEach(function(dir) {
-		app.use('/' + dir, staticDir(opts.baseDir + dir));
-	});
+[ 'css', 'js', 'plugin', 'lib' ].forEach(function(dir) {
+	app.use('/' + dir, staticDir(opts.baseDir + dir));
 });
 
 app.get("/", function(req, res) {
 	res.writeHead(200, {'Content-Type': 'text/html'});
-	fs.createReadStream(opts.baseDir + '/index.html').pipe(res);
+
+	var stream = fs.createReadStream(opts.baseDir + '/index.html');
+	stream.on('error', function( error ) {
+		res.write('<style>body{font-family: sans-serif;}</style><h2>reveal.js multiplex server.</h2><a href="/token">Generate token</a>');
+		res.end();
+	});
+	stream.on('readable', function() {
+		stream.pipe(res);
+	});
 });
 
 app.get("/token", function(req,res) {
@@ -47,7 +55,7 @@ var createHash = function(secret) {
 };
 
 // Actually listen
-app.listen(opts.port || null);
+server.listen( opts.port || null );
 
 var brown = '\033[33m',
 	green = '\033[32m',

plugin/multiplex/master.js

@@ -1,51 +1,34 @@
 (function() {
+
 	// Don't emit events from inside of notes windows
 	if ( window.location.search.match( /receiver/gi ) ) { return; }
 
 	var multiplex = Reveal.getConfig().multiplex;
 
-	var socket = io.connect(multiplex.url);
+	var socket = io.connect( multiplex.url );
 
-	var notify = function( slideElement, indexh, indexv, origin ) {
-		if( typeof origin === 'undefined' && origin !== 'remote' ) {
-			var nextindexh;
-			var nextindexv;
+	function post() {
 
-			var fragmentindex = Reveal.getIndices().f;
-			if (typeof fragmentindex == 'undefined') {
-				fragmentindex = 0;
-			}
+		var messageData = {
+			state: Reveal.getState(),
+			secret: multiplex.secret,
+			socketId: multiplex.id
+		};
 
-			if (slideElement.nextElementSibling && slideElement.parentNode.nodeName == 'SECTION') {
-				nextindexh = indexh;
-				nextindexv = indexv + 1;
-			} else {
-				nextindexh = indexh + 1;
-				nextindexv = 0;
-			}
+		socket.emit( 'multiplex-statechanged', messageData );
 
-			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 );
-}());
+	// post once the page is loaded, so the client follows also on "open URL".
+	window.addEventListener( 'load', post );
+
+	// Monitor events that trigger a change in state
+	Reveal.addEventListener( 'slidechanged', post );
+	Reveal.addEventListener( 'fragmentshown', post );
+	Reveal.addEventListener( 'fragmenthidden', post );
+	Reveal.addEventListener( 'overviewhidden', post );
+	Reveal.addEventListener( 'overviewshown', post );
+	Reveal.addEventListener( 'paused', post );
+	Reveal.addEventListener( 'resumed', post );
+
+}());

plugin/multiplex/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "reveal-js-multiplex",
+  "version": "1.0.0",
+  "description": "reveal.js multiplex server",
+  "homepage": "http://revealjs.com",
+  "scripts": {
+    "start": "node index.js"
+  },
+  "engines": {
+    "node": "~4.1.1"
+  },
+  "dependencies": {
+    "express": "~4.13.3",
+    "grunt-cli": "~0.1.13",
+    "mustache": "~2.2.1",
+    "socket.io": "~1.3.7"
+  },
+  "license": "MIT"
+}

plugin/notes-server/client.js

@@ -41,10 +41,15 @@
 	}
 
 	// When a new notes window connects, post our current state
-	socket.on( 'connect', function( data ) {
+	socket.on( 'new-subscriber', function( data ) {
 		post();
 	} );
 
+	// When the state changes from inside of the speaker view
+	socket.on( 'statechanged-speaker', function( data ) {
+		Reveal.setState( data.state );
+	} );
+
 	// Monitor events that trigger a change in state
 	Reveal.addEventListener( 'slidechanged', post );
 	Reveal.addEventListener( 'fragmentshown', post );

plugin/notes-server/index.js

@@ -1,37 +1,40 @@
+var http      = require('http');
 var express   = require('express');
 var fs        = require('fs');
 var io        = require('socket.io');
-var _         = require('underscore');
 var Mustache  = require('mustache');
 
-var app       = express.createServer();
+var app       = express();
 var staticDir = express.static;
+var server    = http.createServer(app);
 
-io            = io.listen(app);
+io = io(server);
 
 var opts = {
 	port :      1947,
 	baseDir :   __dirname + '/../../'
 };
 
-io.sockets.on( 'connection', function( socket ) {
+io.on( 'connection', function( socket ) {
 
-	socket.on( 'connect', function( data ) {
-		socket.broadcast.emit( 'connect', data );
+	socket.on( 'new-subscriber', function( data ) {
+		socket.broadcast.emit( 'new-subscriber', data );
 	});
 
 	socket.on( 'statechanged', function( data ) {
+		delete data.state.overview;
 		socket.broadcast.emit( 'statechanged', data );
 	});
 
+	socket.on( 'statechanged-speaker', function( data ) {
+		delete data.state.overview;
+		socket.broadcast.emit( 'statechanged-speaker', data );
+	});
+
 });
 
-app.configure( function() {
-
-	[ 'css', 'js', 'images', 'plugin', 'lib' ].forEach( function( dir ) {
-		app.use( '/' + dir, staticDir( opts.baseDir + dir ) );
-	});
-
+[ 'css', 'js', 'images', 'plugin', 'lib' ].forEach( function( dir ) {
+	app.use( '/' + dir, staticDir( opts.baseDir + dir ) );
 });
 
 app.get('/', function( req, res ) {
@@ -52,7 +55,7 @@ app.get( '/notes/:socketId', function( req, res ) {
 });
 
 // Actually listen
-app.listen( opts.port || null );
+server.listen( opts.port || null );
 
 var brown = '\033[33m',
 	green = '\033[32m',
@@ -62,5 +65,5 @@ var slidesLocation = 'http://localhost' + ( opts.port ? ( ':' + opts.port ) : ''
 
 console.log( brown + 'reveal.js - Speaker Notes' + reset );
 console.log( '1. Open the slides at ' + green + slidesLocation + reset );
-console.log( '2. Click on the link your JS console to go to the notes page' );
+console.log( '2. Click on the link in your JS console to go to the notes page' );
 console.log( '3. Advance through your slides and your notes will advance automatically' );

plugin/notes-server/notes.html

@@ -8,6 +8,7 @@
 		<style>
 			body {
 				font-family: Helvetica;
+				font-size: 18px;
 			}
 
 			#current-slide,
@@ -30,15 +31,26 @@
 				position: absolute;
 				top: 10px;
 				left: 10px;
-				font-weight: bold;
-				font-size: 14px;
 				z-index: 2;
-				color: rgba( 255, 255, 255, 0.9 );
+			}
+
+			.overlay-element {
+				height: 34px;
+				line-height: 34px;
+				padding: 0 10px;
+				text-shadow: none;
+				background: rgba( 220, 220, 220, 0.8 );
+				color: #222;
+				font-size: 14px;
+			}
+
+			.overlay-element.interactive:hover {
+				background: rgba( 220, 220, 220, 1 );
 			}
 
 			#current-slide {
 				position: absolute;
-				width: 65%;
+				width: 60%;
 				height: 100%;
 				top: 0;
 				left: 0;
@@ -47,19 +59,20 @@
 
 			#upcoming-slide {
 				position: absolute;
-				width: 35%;
+				width: 40%;
 				height: 40%;
 				right: 0;
 				top: 0;
 			}
 
+			/* Speaker controls */
 			#speaker-controls {
 				position: absolute;
 				top: 40%;
 				right: 0;
-				width: 35%;
+				width: 40%;
 				height: 60%;
-
+				overflow: auto;
 				font-size: 18px;
 			}
 
@@ -124,26 +137,108 @@
 					font-size: 1.2em;
 				}
 
+			/* Layout selector */
+			#speaker-layout {
+				position: absolute;
+				top: 10px;
+				right: 10px;
+				color: #222;
+				z-index: 10;
+			}
+				#speaker-layout select {
+					position: absolute;
+					width: 100%;
+					height: 100%;
+					top: 0;
+					left: 0;
+					border: 0;
+					box-shadow: 0;
+					cursor: pointer;
+					opacity: 0;
+
+					font-size: 1em;
+					background-color: transparent;
+
+					-moz-appearance: none;
+					-webkit-appearance: none;
+					-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+				}
+
+				#speaker-layout select:focus {
+					outline: none;
+					box-shadow: none;
+				}
+
 			.clear {
 				clear: both;
 			}
 
-			@media screen and (max-width: 1080px) {
-				#speaker-controls {
-					font-size: 16px;
-				}
+			/* Speaker layout: Wide */
+			body[data-speaker-layout="wide"] #current-slide,
+			body[data-speaker-layout="wide"] #upcoming-slide {
+				width: 50%;
+				height: 45%;
+				padding: 6px;
 			}
 
-			@media screen and (max-width: 900px) {
-				#speaker-controls {
-					font-size: 14px;
-				}
+			body[data-speaker-layout="wide"] #current-slide {
+				top: 0;
+				left: 0;
 			}
 
-			@media screen and (max-width: 800px) {
-				#speaker-controls {
-					font-size: 12px;
-				}
+			body[data-speaker-layout="wide"] #upcoming-slide {
+				top: 0;
+				left: 50%;
+			}
+
+			body[data-speaker-layout="wide"] #speaker-controls {
+				top: 45%;
+				left: 0;
+				width: 100%;
+				height: 50%;
+				font-size: 1.25em;
+			}
+
+			/* Speaker layout: Tall */
+			body[data-speaker-layout="tall"] #current-slide,
+			body[data-speaker-layout="tall"] #upcoming-slide {
+				width: 45%;
+				height: 50%;
+				padding: 6px;
+			}
+
+			body[data-speaker-layout="tall"] #current-slide {
+				top: 0;
+				left: 0;
+			}
+
+			body[data-speaker-layout="tall"] #upcoming-slide {
+				top: 50%;
+				left: 0;
+			}
+
+			body[data-speaker-layout="tall"] #speaker-controls {
+				padding-top: 40px;
+				top: 0;
+				left: 45%;
+				width: 55%;
+				height: 100%;
+				font-size: 1.25em;
+			}
+
+			/* Speaker layout: Notes only */
+			body[data-speaker-layout="notes-only"] #current-slide,
+			body[data-speaker-layout="notes-only"] #upcoming-slide {
+				display: none;
+			}
+
+			body[data-speaker-layout="notes-only"] #speaker-controls {
+				padding-top: 40px;
+				top: 0;
+				left: 0;
+				width: 100%;
+				height: 100%;
+				font-size: 1.25em;
 			}
 
 		</style>
@@ -152,7 +247,7 @@
 	<body>
 
 		<div id="current-slide"></div>
-		<div id="upcoming-slide"><span class="label">UPCOMING:</span></div>
+		<div id="upcoming-slide"><span class="overlay-element label">Upcoming</span></div>
 		<div id="speaker-controls">
 			<div class="speaker-controls-time">
 				<h4 class="label">Time <span class="reset-button">Click to Reset</span></h4>
@@ -170,6 +265,10 @@
 				<div class="value"></div>
 			</div>
 		</div>
+		<div id="speaker-layout" class="overlay-element interactive">
+			<span class="speaker-layout-label"></span>
+			<select class="speaker-layout-dropdown"></select>
+		</div>
 
 		<script src="/socket.io/socket.io.js"></script>
 		<script src="/plugin/markdown/marked.js"></script>
@@ -182,11 +281,20 @@
 				currentState,
 				currentSlide,
 				upcomingSlide,
+				layoutLabel,
+				layoutDropdown,
 				connected = false;
 
 			var socket = io.connect( window.location.origin ),
 				socketId = '{{socketId}}';
 
+			var SPEAKER_LAYOUTS = {
+				'default': 'Default',
+				'wide': 'Wide',
+				'tall': 'Tall',
+				'notes-only': 'Notes only'
+			};
+
 			socket.on( 'statechanged', function( data ) {
 
 				// ignore data from sockets that aren't ours
@@ -195,7 +303,6 @@
 				if( connected === false ) {
 					connected = true;
 
-					setupIframes( data );
 					setupKeyboard();
 					setupNotes();
 					setupTimer();
@@ -206,13 +313,28 @@
 
 			} );
 
+			setupLayout();
+
+			// Load our presentation iframes
+			setupIframes();
+
+			// Once the iframes have loaded, emit a signal saying there's
+			// a new subscriber which will trigger a 'statechanged'
+			// message to be sent back
 			window.addEventListener( 'message', function( event ) {
 
 				var data = JSON.parse( event.data );
 
 				if( data && data.namespace === 'reveal' ) {
 					if( /ready/.test( data.eventName ) ) {
-						socket.emit( 'connect', { socketId: socketId } );
+						socket.emit( 'new-subscriber', { socketId: socketId } );
+					}
+				}
+
+				// Messages sent by reveal.js inside of the current slide preview
+				if( data && data.namespace === 'reveal' ) {
+					if( /slidechanged|fragmentshown|fragmenthidden|overviewshown|overviewhidden|paused|resumed/.test( data.eventName ) && currentState !== JSON.stringify( data.state ) ) {
+						socket.emit( 'statechanged-speaker', { state: data.state } );
 					}
 				}
 
@@ -267,7 +389,7 @@
 			/**
 			 * Creates the preview iframes.
 			 */
-			function setupIframes( data ) {
+			function setupIframes() {
 
 				var params = [
 					'receiver',
@@ -277,9 +399,8 @@
 					'backgroundTransition=none'
 				].join( '&' );
 
-				var hash = '#/' + data.state.indexh + '/' + data.state.indexv;
-				var currentURL = '/?' + params + '&postMessageEvents=true' + hash;
-				var upcomingURL = '/?' + params + '&controls=false' + hash;
+				var currentURL = '/?' + params + '&postMessageEvents=true';
+				var upcomingURL = '/?' + params + '&controls=false';
 
 				currentSlide = document.createElement( 'iframe' );
 				currentSlide.setAttribute( 'width', 1280 );
@@ -351,6 +472,74 @@
 
 			}
 
+			/**
+				 * Sets up the speaker view layout and layout selector.
+				 */
+				function setupLayout() {
+
+					layoutDropdown = document.querySelector( '.speaker-layout-dropdown' );
+					layoutLabel = document.querySelector( '.speaker-layout-label' );
+
+					// Render the list of available layouts
+					for( var id in SPEAKER_LAYOUTS ) {
+						var option = document.createElement( 'option' );
+						option.setAttribute( 'value', id );
+						option.textContent = SPEAKER_LAYOUTS[ id ];
+						layoutDropdown.appendChild( option );
+					}
+
+					// Monitor the dropdown for changes
+					layoutDropdown.addEventListener( 'change', function( event ) {
+
+						setLayout( layoutDropdown.value );
+
+					}, false );
+
+					// Restore any currently persisted layout
+					setLayout( getLayout() );
+
+				}
+
+				/**
+				 * Sets a new speaker view layout. The layout is persisted
+				 * in local storage.
+				 */
+				function setLayout( value ) {
+
+					var title = SPEAKER_LAYOUTS[ value ];
+
+					layoutLabel.innerHTML = 'Layout' + ( title ? ( ': ' + title ) : '' );
+					layoutDropdown.value = value;
+
+					document.body.setAttribute( 'data-speaker-layout', value );
+
+					// Persist locally
+					if( window.localStorage ) {
+						window.localStorage.setItem( 'reveal-speaker-layout', value );
+					}
+
+				}
+
+				/**
+				 * Returns the ID of the most recently set speaker layout
+				 * or our default layout if none has been set.
+				 */
+				function getLayout() {
+
+					if( window.localStorage ) {
+						var layout = window.localStorage.getItem( 'reveal-speaker-layout' );
+						if( layout ) {
+							return layout;
+						}
+					}
+
+					// Default to the first record in the layouts hash
+					for( var id in SPEAKER_LAYOUTS ) {
+						return id;
+					}
+
+				}
+
 			function zeroPadInteger( num ) {
 
 				var str = '00' + parseInt( num );

plugin/notes/notes.html

@@ -8,6 +8,7 @@
 		<style>
 			body {
 				font-family: Helvetica;
+				font-size: 18px;
 			}
 
 			#current-slide,
@@ -30,15 +31,42 @@
 				position: absolute;
 				top: 10px;
 				left: 10px;
-				font-weight: bold;
-				font-size: 14px;
 				z-index: 2;
-				color: rgba( 255, 255, 255, 0.9 );
+			}
+
+			#connection-status {
+				position: absolute;
+				top: 0;
+				left: 0;
+				width: 100%;
+				height: 100%;
+				z-index: 20;
+				padding: 30% 20% 20% 20%;
+				font-size: 18px;
+				color: #222;
+				background: #fff;
+				text-align: center;
+				box-sizing: border-box;
+				line-height: 1.4;
+			}
+
+			.overlay-element {
+				height: 34px;
+				line-height: 34px;
+				padding: 0 10px;
+				text-shadow: none;
+				background: rgba( 220, 220, 220, 0.8 );
+				color: #222;
+				font-size: 14px;
+			}
+
+			.overlay-element.interactive:hover {
+				background: rgba( 220, 220, 220, 1 );
 			}
 
 			#current-slide {
 				position: absolute;
-				width: 65%;
+				width: 60%;
 				height: 100%;
 				top: 0;
 				left: 0;
@@ -47,20 +75,20 @@
 
 			#upcoming-slide {
 				position: absolute;
-				width: 35%;
+				width: 40%;
 				height: 40%;
 				right: 0;
 				top: 0;
 			}
 
+			/* Speaker controls */
 			#speaker-controls {
 				position: absolute;
 				top: 40%;
 				right: 0;
-				width: 35%;
+				width: 40%;
 				height: 60%;
 				overflow: auto;
-
 				font-size: 18px;
 			}
 
@@ -70,6 +98,7 @@
 				}
 
 				.speaker-controls-time .label,
+				.speaker-controls-pace .label,
 				.speaker-controls-notes .label {
 					text-transform: uppercase;
 					font-weight: normal;
@@ -78,7 +107,7 @@
 					margin: 0;
 				}
 
-				.speaker-controls-time {
+				.speaker-controls-time, .speaker-controls-pace {
 					border-bottom: 1px solid rgba( 200, 200, 200, 0.5 );
 					margin-bottom: 10px;
 					padding: 10px 16px;
@@ -99,6 +128,13 @@
 				.speaker-controls-time .timer,
 				.speaker-controls-time .clock {
 					width: 50%;
+				}
+
+				.speaker-controls-time .timer,
+				.speaker-controls-time .clock,
+				.speaker-controls-time .pacing .hours-value,
+				.speaker-controls-time .pacing .minutes-value,
+				.speaker-controls-time .pacing .seconds-value {
 					font-size: 1.9em;
 				}
 
@@ -112,7 +148,23 @@
 				}
 
 				.speaker-controls-time span.mute {
-					color: #bbb;
+					opacity: 0.3;
+				}
+
+				.speaker-controls-time .pacing-title {
+					margin-top: 5px;
+				}
+
+				.speaker-controls-time .pacing.ahead {
+					color: blue;
+				}
+
+				.speaker-controls-time .pacing.on-track {
+					color: green;
+				}
+
+				.speaker-controls-time .pacing.behind {
+					color: red;
 				}
 
 				.speaker-controls-notes {
@@ -125,24 +177,124 @@
 					font-size: 1.2em;
 				}
 
+			/* Layout selector */
+			#speaker-layout {
+				position: absolute;
+				top: 10px;
+				right: 10px;
+				color: #222;
+				z-index: 10;
+			}
+				#speaker-layout select {
+					position: absolute;
+					width: 100%;
+					height: 100%;
+					top: 0;
+					left: 0;
+					border: 0;
+					box-shadow: 0;
+					cursor: pointer;
+					opacity: 0;
+
+					font-size: 1em;
+					background-color: transparent;
+
+					-moz-appearance: none;
+					-webkit-appearance: none;
+					-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+				}
+
+				#speaker-layout select:focus {
+					outline: none;
+					box-shadow: none;
+				}
+
 			.clear {
 				clear: both;
 			}
 
+			/* Speaker layout: Wide */
+			body[data-speaker-layout="wide"] #current-slide,
+			body[data-speaker-layout="wide"] #upcoming-slide {
+				width: 50%;
+				height: 45%;
+				padding: 6px;
+			}
+
+			body[data-speaker-layout="wide"] #current-slide {
+				top: 0;
+				left: 0;
+			}
+
+			body[data-speaker-layout="wide"] #upcoming-slide {
+				top: 0;
+				left: 50%;
+			}
+
+			body[data-speaker-layout="wide"] #speaker-controls {
+				top: 45%;
+				left: 0;
+				width: 100%;
+				height: 50%;
+				font-size: 1.25em;
+			}
+
+			/* Speaker layout: Tall */
+			body[data-speaker-layout="tall"] #current-slide,
+			body[data-speaker-layout="tall"] #upcoming-slide {
+				width: 45%;
+				height: 50%;
+				padding: 6px;
+			}
+
+			body[data-speaker-layout="tall"] #current-slide {
+				top: 0;
+				left: 0;
+			}
+
+			body[data-speaker-layout="tall"] #upcoming-slide {
+				top: 50%;
+				left: 0;
+			}
+
+			body[data-speaker-layout="tall"] #speaker-controls {
+				padding-top: 40px;
+				top: 0;
+				left: 45%;
+				width: 55%;
+				height: 100%;
+				font-size: 1.25em;
+			}
+
+			/* Speaker layout: Notes only */
+			body[data-speaker-layout="notes-only"] #current-slide,
+			body[data-speaker-layout="notes-only"] #upcoming-slide {
+				display: none;
+			}
+
+			body[data-speaker-layout="notes-only"] #speaker-controls {
+				padding-top: 40px;
+				top: 0;
+				left: 0;
+				width: 100%;
+				height: 100%;
+				font-size: 1.25em;
+			}
+
 			@media screen and (max-width: 1080px) {
-				#speaker-controls {
+				body[data-speaker-layout="default"] #speaker-controls {
 					font-size: 16px;
 				}
 			}
 
 			@media screen and (max-width: 900px) {
-				#speaker-controls {
+				body[data-speaker-layout="default"] #speaker-controls {
 					font-size: 14px;
 				}
 			}
 
 			@media screen and (max-width: 800px) {
-				#speaker-controls {
+				body[data-speaker-layout="default"] #speaker-controls {
 					font-size: 12px;
 				}
 			}
@@ -152,8 +304,10 @@
 
 	<body>
 
+		<div id="connection-status">Loading speaker view...</div>
+
 		<div id="current-slide"></div>
-		<div id="upcoming-slide"><span class="label">UPCOMING:</span></div>
+		<div id="upcoming-slide"><span class="overlay-element label">Upcoming</span></div>
 		<div id="speaker-controls">
 			<div class="speaker-controls-time">
 				<h4 class="label">Time <span class="reset-button">Click to Reset</span></h4>
@@ -164,6 +318,11 @@
 					<span class="hours-value">00</span><span class="minutes-value">:00</span><span class="seconds-value">:00</span>
 				</div>
 				<div class="clear"></div>
+
+				<h4 class="label pacing-title" style="display: none">Pacing – Time to finish current slide</h4>
+				<div class="pacing" style="display: none">
+					<span class="hours-value">00</span><span class="minutes-value">:00</span><span class="seconds-value">:00</span>
+				</div>
 			</div>
 
 			<div class="speaker-controls-notes hidden">
@@ -171,6 +330,10 @@
 				<div class="value"></div>
 			</div>
 		</div>
+		<div id="speaker-layout" class="overlay-element interactive">
+			<span class="speaker-layout-label"></span>
+			<select class="speaker-layout-dropdown"></select>
+		</div>
 
 		<script src="../../plugin/markdown/marked.js"></script>
 		<script>
@@ -182,12 +345,37 @@
 					currentState,
 					currentSlide,
 					upcomingSlide,
+					layoutLabel,
+					layoutDropdown,
+					pendingCalls = {},
+					lastRevealApiCallId = 0,
 					connected = false;
 
+				var SPEAKER_LAYOUTS = {
+					'default': 'Default',
+					'wide': 'Wide',
+					'tall': 'Tall',
+					'notes-only': 'Notes only'
+				};
+
+				setupLayout();
+
+				var connectionStatus = document.querySelector( '#connection-status' );
+				var connectionTimeout = setTimeout( function() {
+					connectionStatus.innerHTML = 'Error connecting to main window.<br>Please try closing and reopening the speaker view.';
+				}, 5000 );
+
 				window.addEventListener( 'message', function( event ) {
 
+					clearTimeout( connectionTimeout );
+					connectionStatus.style.display = 'none';
+
 					var data = JSON.parse( event.data );
 
+					// The overview mode is only useful to the reveal.js instance
+					// where navigation occurs so we don't sync it
+					if( data.state ) delete data.state.overview;
+
 					// Messages sent by the notes plugin inside of the main window
 					if( data && data.namespace === 'reveal-notes' ) {
 						if( data.type === 'connect' ) {
@@ -196,6 +384,10 @@
 						else if( data.type === 'state' ) {
 							handleStateMessage( data );
 						}
+						else if( data.type === 'return' ) {
+							pendingCalls[data.callId](data.result);
+							delete pendingCalls[data.callId];
+						}
 					}
 					// Messages sent by the reveal.js inside of the current slide preview
 					else if( data && data.namespace === 'reveal' ) {
@@ -203,13 +395,32 @@
 							// Send a message back to notify that the handshake is complete
 							window.opener.postMessage( JSON.stringify({ namespace: 'reveal-notes', type: 'connected'} ), '*' );
 						}
-						else if( /slidechanged|fragmentshown|fragmenthidden|overviewshown|overviewhidden|paused|resumed/.test( data.eventName ) && currentState !== JSON.stringify( data.state ) ) {
+						else if( /slidechanged|fragmentshown|fragmenthidden|paused|resumed/.test( data.eventName ) && currentState !== JSON.stringify( data.state ) ) {
+
 							window.opener.postMessage( JSON.stringify({ method: 'setState', args: [ data.state ]} ), '*' );
+
 						}
 					}
 
 				} );
 
+				/**
+				 * Asynchronously calls the Reveal.js API of the main frame.
+				 */
+				function callRevealApi( methodName, methodArguments, callback ) {
+
+					var callId = ++lastRevealApiCallId;
+					pendingCalls[callId] = callback;
+					window.opener.postMessage( JSON.stringify( {
+						namespace: 'reveal-notes',
+						type: 'call',
+						callId: callId,
+						methodName: methodName,
+						arguments: methodArguments
+					} ), '*' );
+
+				}
+
 				/**
 				 * Called when the main window is trying to establish a
 				 * connection.
@@ -239,6 +450,7 @@
 					// No need for updating the notes in case of fragment changes
 					if ( data.notes ) {
 						notes.classList.remove( 'hidden' );
+						notesValue.style.whiteSpace = data.whitespace;
 						if( data.markdown ) {
 							notesValue.innerHTML = marked( data.notes );
 						}
@@ -264,10 +476,17 @@
 				 * Forward keyboard events to the current slide window.
 				 * This enables keyboard events to work even if focus
 				 * isn't set on the current slide iframe.
+				 *
+				 * Block F5 default handling, it reloads and disconnects
+				 * the speaker notes window.
 				 */
 				function setupKeyboard() {
 
 					document.addEventListener( 'keydown', function( event ) {
+						if( event.keyCode === 116 || ( event.metaKey && event.keyCode === 82 ) ) {
+							event.preventDefault();
+							return false;
+						}
 						currentSlide.contentWindow.postMessage( JSON.stringify({ method: 'triggerKey', args: [ event.keyCode ] }), '*' );
 					} );
 
@@ -287,9 +506,10 @@
 						'backgroundTransition=none'
 					].join( '&' );
 
+					var urlSeparator = /\?/.test(data.url) ? '&' : '?';
 					var hash = '#/' + data.state.indexh + '/' + data.state.indexv;
-					var currentURL = data.url + '?' + params + '&postMessageEvents=true' + hash;
-					var upcomingURL = data.url + '?' + params + '&controls=false' + hash;
+					var currentURL = data.url + urlSeparator + params + '&postMessageEvents=true' + hash;
+					var upcomingURL = data.url + urlSeparator + params + '&controls=false' + hash;
 
 					currentSlide = document.createElement( 'iframe' );
 					currentSlide.setAttribute( 'width', 1280 );
@@ -315,6 +535,73 @@
 
 				}
 
+				function getTimings( callback ) {
+
+					callRevealApi( 'getSlidesAttributes', [], function ( slideAttributes ) {
+						callRevealApi( 'getConfig', [], function ( config ) {
+							var totalTime = config.totalTime;
+							var minTimePerSlide = config.minimumTimePerSlide || 0;
+							var defaultTiming = config.defaultTiming;
+							if ((defaultTiming == null) && (totalTime == null)) {
+								callback(null);
+								return;
+							}
+							// Setting totalTime overrides defaultTiming
+							if (totalTime) {
+								defaultTiming = 0;
+							}
+							var timings = [];
+							for ( var i in slideAttributes ) {
+								var slide = slideAttributes[ i ];
+								var timing = defaultTiming;
+								if( slide.hasOwnProperty( 'data-timing' )) {
+									var t = slide[ 'data-timing' ];
+									timing = parseInt(t);
+									if( isNaN(timing) ) {
+										console.warn("Could not parse timing '" + t + "' of slide " + i + "; using default of " + defaultTiming);
+										timing = defaultTiming;
+									}
+								}
+								timings.push(timing);
+							}
+							if ( totalTime ) {
+								// After we've allocated time to individual slides, we summarize it and
+								// subtract it from the total time
+								var remainingTime = totalTime - timings.reduce( function(a, b) { return a + b; }, 0 );
+								// The remaining time is divided by the number of slides that have 0 seconds
+								// allocated at the moment, giving the average time-per-slide on the remaining slides
+								var remainingSlides = (timings.filter( function(x) { return x == 0 }) ).length
+								var timePerSlide = Math.round( remainingTime / remainingSlides, 0 )
+								// And now we replace every zero-value timing with that average
+								timings = timings.map( function(x) { return (x==0 ? timePerSlide : x) } );
+							}
+							var slidesUnderMinimum = timings.filter( function(x) { return (x < minTimePerSlide) } ).length
+							if ( slidesUnderMinimum ) {
+								message = "The pacing time for " + slidesUnderMinimum + " slide(s) is under the configured minimum of " + minTimePerSlide + " seconds. Check the data-timing attribute on individual slides, or consider increasing the totalTime or minimumTimePerSlide configuration options (or removing some slides).";
+								alert(message);
+							}
+							callback( timings );
+						} );
+					} );
+
+				}
+
+				/**
+				 * Return the number of seconds allocated for presenting
+				 * all slides up to and including this one.
+				 */
+				function getTimeAllocated( timings, callback ) {
+
+					callRevealApi( 'getSlidePastCount', [], function ( currentSlide ) {
+						var allocated = 0;
+						for (var i in timings.slice(0, currentSlide + 1)) {
+							allocated += timings[i];
+						}
+						callback( allocated );
+					} );
+
+				}
+
 				/**
 				 * Create the timer and clock and start updating them
 				 * at an interval.
@@ -322,42 +609,203 @@
 				function setupTimer() {
 
 					var start = new Date(),
-						timeEl = document.querySelector( '.speaker-controls-time' ),
-						clockEl = timeEl.querySelector( '.clock-value' ),
-						hoursEl = timeEl.querySelector( '.hours-value' ),
-						minutesEl = timeEl.querySelector( '.minutes-value' ),
-						secondsEl = timeEl.querySelector( '.seconds-value' );
+					timeEl = document.querySelector( '.speaker-controls-time' ),
+					clockEl = timeEl.querySelector( '.clock-value' ),
+					hoursEl = timeEl.querySelector( '.hours-value' ),
+					minutesEl = timeEl.querySelector( '.minutes-value' ),
+					secondsEl = timeEl.querySelector( '.seconds-value' ),
+					pacingTitleEl = timeEl.querySelector( '.pacing-title' ),
+					pacingEl = timeEl.querySelector( '.pacing' ),
+					pacingHoursEl = pacingEl.querySelector( '.hours-value' ),
+					pacingMinutesEl = pacingEl.querySelector( '.minutes-value' ),
+					pacingSecondsEl = pacingEl.querySelector( '.seconds-value' );
+
+					var timings = null;
+					getTimings( function ( _timings ) {
+
+						timings = _timings;
+						if (_timings !== null) {
+							pacingTitleEl.style.removeProperty('display');
+							pacingEl.style.removeProperty('display');
+						}
+
+						// Update once directly
+						_updateTimer();
+
+						// Then update every second
+						setInterval( _updateTimer, 1000 );
+
+					} );
+
+
+					function _resetTimer() {
+
+						if (timings == null) {
+							start = new Date();
+							_updateTimer();
+						}
+						else {
+							// Reset timer to beginning of current slide
+							getTimeAllocated( timings, function ( slideEndTimingSeconds ) {
+								var slideEndTiming = slideEndTimingSeconds * 1000;
+								callRevealApi( 'getSlidePastCount', [], function ( currentSlide ) {
+									var currentSlideTiming = timings[currentSlide] * 1000;
+									var previousSlidesTiming = slideEndTiming - currentSlideTiming;
+									var now = new Date();
+									start = new Date(now.getTime() - previousSlidesTiming);
+									_updateTimer();
+								} );
+							} );
+						}
+
+					}
+
+					timeEl.addEventListener( 'click', function() {
+						_resetTimer();
+						return false;
+					} );
+
+					function _displayTime( hrEl, minEl, secEl, time) {
+
+						var sign = Math.sign(time) == -1 ? "-" : "";
+						time = Math.abs(Math.round(time / 1000));
+						var seconds = time % 60;
+						var minutes = Math.floor( time / 60 ) % 60 ;
+						var hours = Math.floor( time / ( 60 * 60 )) ;
+						hrEl.innerHTML = sign + zeroPadInteger( hours );
+						if (hours == 0) {
+							hrEl.classList.add( 'mute' );
+						}
+						else {
+							hrEl.classList.remove( 'mute' );
+						}
+						minEl.innerHTML = ':' + zeroPadInteger( minutes );
+						if (hours == 0 && minutes == 0) {
+							minEl.classList.add( 'mute' );
+						}
+						else {
+							minEl.classList.remove( 'mute' );
+						}
+						secEl.innerHTML = ':' + zeroPadInteger( seconds );
+					}
 
 					function _updateTimer() {
 
 						var diff, hours, minutes, seconds,
-							now = new Date();
+						now = new Date();
 
 						diff = now.getTime() - start.getTime();
-						hours = Math.floor( diff / ( 1000 * 60 * 60 ) );
-						minutes = Math.floor( ( diff / ( 1000 * 60 ) ) % 60 );
-						seconds = Math.floor( ( diff / 1000 ) % 60 );
 
 						clockEl.innerHTML = now.toLocaleTimeString( 'en-US', { hour12: true, hour: '2-digit', minute:'2-digit' } );
-						hoursEl.innerHTML = zeroPadInteger( hours );
-						hoursEl.className = hours > 0 ? '' : 'mute';
-						minutesEl.innerHTML = ':' + zeroPadInteger( minutes );
-						minutesEl.className = minutes > 0 ? '' : 'mute';
-						secondsEl.innerHTML = ':' + zeroPadInteger( seconds );
+						_displayTime( hoursEl, minutesEl, secondsEl, diff );
+						if (timings !== null) {
+							_updatePacing(diff);
+						}
 
 					}
 
-					// Update once directly
-					_updateTimer();
+					function _updatePacing(diff) {
 
-					// Then update every second
-					setInterval( _updateTimer, 1000 );
+						getTimeAllocated( timings, function ( slideEndTimingSeconds ) {
+							var slideEndTiming = slideEndTimingSeconds * 1000;
 
-					timeEl.addEventListener( 'click', function() {
-						start = new Date();
-						_updateTimer();
+							callRevealApi( 'getSlidePastCount', [], function ( currentSlide ) {
+								var currentSlideTiming = timings[currentSlide] * 1000;
+								var timeLeftCurrentSlide = slideEndTiming - diff;
+								if (timeLeftCurrentSlide < 0) {
+									pacingEl.className = 'pacing behind';
+								}
+								else if (timeLeftCurrentSlide < currentSlideTiming) {
+									pacingEl.className = 'pacing on-track';
+								}
+								else {
+									pacingEl.className = 'pacing ahead';
+								}
+								_displayTime( pacingHoursEl, pacingMinutesEl, pacingSecondsEl, timeLeftCurrentSlide );
+							} );
+						} );
+					}
+
+				}
+
+				/**
+				 * Sets up the speaker view layout and layout selector.
+				 */
+				function setupLayout() {
+
+					layoutDropdown = document.querySelector( '.speaker-layout-dropdown' );
+					layoutLabel = document.querySelector( '.speaker-layout-label' );
+
+					// Render the list of available layouts
+					for( var id in SPEAKER_LAYOUTS ) {
+						var option = document.createElement( 'option' );
+						option.setAttribute( 'value', id );
+						option.textContent = SPEAKER_LAYOUTS[ id ];
+						layoutDropdown.appendChild( option );
+					}
+
+					// Monitor the dropdown for changes
+					layoutDropdown.addEventListener( 'change', function( event ) {
+
+						setLayout( layoutDropdown.value );
+
+					}, false );
+
+					// Restore any currently persisted layout
+					setLayout( getLayout() );
+
+				}
+
+				/**
+				 * Sets a new speaker view layout. The layout is persisted
+				 * in local storage.
+				 */
+				function setLayout( value ) {
+
+					var title = SPEAKER_LAYOUTS[ value ];
+
+					layoutLabel.innerHTML = 'Layout' + ( title ? ( ': ' + title ) : '' );
+					layoutDropdown.value = value;
+
+					document.body.setAttribute( 'data-speaker-layout', value );
+
+					// Persist locally
+					if( supportsLocalStorage() ) {
+						window.localStorage.setItem( 'reveal-speaker-layout', value );
+					}
+
+				}
+
+				/**
+				 * Returns the ID of the most recently set speaker layout
+				 * or our default layout if none has been set.
+				 */
+				function getLayout() {
+
+					if( supportsLocalStorage() ) {
+						var layout = window.localStorage.getItem( 'reveal-speaker-layout' );
+						if( layout ) {
+							return layout;
+						}
+					}
+
+					// Default to the first record in the layouts hash
+					for( var id in SPEAKER_LAYOUTS ) {
+						return id;
+					}
+
+				}
+
+				function supportsLocalStorage() {
+
+					try {
+						localStorage.setItem('test', 'test');
+						localStorage.removeItem('test');
+						return true;
+					}
+					catch( e ) {
 						return false;
-					} );
+					}
 
 				}
 

plugin/notes/notes.js

@@ -11,10 +11,27 @@
  */
 var RevealNotes = (function() {
 
-	function openNotes() {
-		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=1100,height=700' );
+    var notesPopup = null;
+
+	function openNotes( notesFilePath ) {
+
+        if (notesPopup && !notesPopup.closed) {
+            notesPopup.focus();
+            return;
+        }
+
+		if( !notesFilePath ) {
+			var jsFileLocation = document.querySelector('script[src$="notes.js"]').src;  // this js file path
+			jsFileLocation = jsFileLocation.replace(/notes\.js(\?.*)?$/, '');   // the js folder path
+			notesFilePath = jsFileLocation + 'notes.html';
+		}
+
+		notesPopup = window.open( notesFilePath, 'reveal.js - Notes', 'width=1100,height=700' );
+
+		if( !notesPopup ) {
+			alert( 'Speaker view popup failed to open. Please make sure popups are allowed and reopen the speaker view.' );
+			return;
+		}
 
 		/**
 		 * Connect to the notes window through a postmessage handshake.
@@ -39,28 +56,65 @@ var RevealNotes = (function() {
 					clearInterval( connectInterval );
 					onConnected();
 				}
+				if( data && data.namespace === 'reveal-notes' && data.type === 'call' ) {
+					callRevealApi( data.methodName, data.arguments, data.callId );
+				}
 			} );
 		}
 
+		/**
+		 * Calls the specified Reveal.js method with the provided argument
+		 * and then pushes the result to the notes frame.
+		 */
+		function callRevealApi( methodName, methodArguments, callId ) {
+
+			var result = Reveal[methodName].apply( Reveal, methodArguments );
+			notesPopup.postMessage( JSON.stringify( {
+				namespace: 'reveal-notes',
+				type: 'return',
+				result: result,
+				callId: callId
+			} ), '*' );
+
+		}
+
 		/**
 		 * Posts the current slide data to the notes window
 		 */
-		function post() {
+		function post( event ) {
 
 			var slideElement = Reveal.getCurrentSlide(),
-				notesElement = slideElement.querySelector( 'aside.notes' );
+				notesElement = slideElement.querySelector( 'aside.notes' ),
+				fragmentElement = slideElement.querySelector( '.current-fragment' );
 
 			var messageData = {
 				namespace: 'reveal-notes',
 				type: 'state',
 				notes: '',
 				markdown: false,
+				whitespace: 'normal',
 				state: Reveal.getState()
 			};
 
 			// Look for notes defined in a slide attribute
 			if( slideElement.hasAttribute( 'data-notes' ) ) {
 				messageData.notes = slideElement.getAttribute( 'data-notes' );
+				messageData.whitespace = 'pre-wrap';
+			}
+
+			// Look for notes defined in a fragment
+			if( fragmentElement ) {
+				var fragmentNotes = fragmentElement.querySelector( 'aside.notes' );
+				if( fragmentNotes ) {
+					notesElement = fragmentNotes;
+				}
+				else if( fragmentElement.hasAttribute( 'data-notes' ) ) {
+					messageData.notes = fragmentElement.getAttribute( 'data-notes' );
+					messageData.whitespace = 'pre-wrap';
+
+					// In case there are slide notes
+					notesElement = null;
+				}
 			}
 
 			// Look for notes defined in an aside element
@@ -94,29 +148,31 @@ var RevealNotes = (function() {
 		}
 
 		connect();
+
 	}
 
-	if( !/receiver/i.test( window.location.search ) ) {
+	return {
+		init: function() {
 
-		// If the there's a 'notes' query set, open directly
-		if( window.location.search.match( /(\?|\&)notes/gi ) !== null ) {
-			openNotes();
-		}
+			if( !/receiver/i.test( window.location.search ) ) {
 
-		// Open the notes when the 's' key is hit
-		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 the there's a 'notes' query set, open directly
+				if( window.location.search.match( /(\?|\&)notes/gi ) !== null ) {
+					openNotes();
+				}
+
+				// Open the notes when the 's' key is hit
+				Reveal.addKeyBinding({keyCode: 83, key: 'S', description: 'Speaker notes view'}, function() {
+					openNotes();
+				} );
 
-			if( event.keyCode === 83 ) {
-				event.preventDefault();
-				openNotes();
 			}
-		}, false );
 
-	}
+		},
 
-	return { open: openNotes };
+		open: openNotes
+	};
 
 })();
+
+Reveal.registerPlugin( 'notes', RevealNotes );

plugin/print-pdf/print-pdf.js

@@ -2,32 +2,18 @@
  * phantomjs script for printing presentations to PDF.
  *
  * Example:
- * phantomjs print-pdf.js "http://lab.hakim.se/reveal-js?print-pdf" reveal-demo.pdf
+ * phantomjs print-pdf.js "http://revealjs.com?print-pdf" reveal-demo.pdf
  *
- * By Manuel Bieh (https://github.com/manuelbieh)
+ * @author Manuel Bieh (https://github.com/manuelbieh)
+ * @author Hakim El Hattab (https://github.com/hakimel)
+ * @author Manuel Riezebosch (https://github.com/riezebosch)
  */
 
 // html2pdf.js
-var page = new WebPage();
 var system = require( 'system' );
 
-var slideWidth = system.args[3] ? system.args[3].split( 'x' )[0] : 960;
-var slideHeight = system.args[3] ? system.args[3].split( 'x' )[1] : 700;
-
-page.viewportSize = {
-	width: slideWidth,
-	height: slideHeight
-};
-
-// TODO
-// Something is wrong with these config values. An input
-// paper width of 1920px actually results in a 756px wide
-// PDF.
-page.paperSize = {
-	width: Math.round( slideWidth * 2 ),
-	height: Math.round( slideHeight * 2 ),
-	border: 0
-};
+var probePage = new WebPage();
+var printPage = new WebPage();
 
 var inputFile = system.args[1] || 'index.html?print-pdf';
 var outputFile = system.args[2] || 'slides.pdf';
@@ -36,13 +22,46 @@ if( outputFile.match( /\.pdf$/gi ) === null ) {
 	outputFile += '.pdf';
 }
 
-console.log( 'Printing PDF (Paper size: '+ page.paperSize.width + 'x' + page.paperSize.height +')' );
+console.log( 'Export PDF: Reading reveal.js config [1/4]' );
 
-page.open( inputFile, function( status ) {
-	window.setTimeout( function() {
-		console.log( 'Printed succesfully' );
-		page.render( outputFile );
-		phantom.exit();
-	}, 1000 );
+probePage.open( inputFile, function( status ) {
+
+	console.log( 'Export PDF: Preparing print layout [2/4]' );
+
+	var config = probePage.evaluate( function() {
+		return Reveal.getConfig();
+	} );
+
+	if( config ) {
+
+		printPage.paperSize = {
+			width: Math.floor( config.width * ( 1 + config.margin ) ),
+			height: Math.floor( config.height * ( 1 + config.margin ) ),
+			border: 0
+		};
+
+		printPage.open( inputFile, function( status ) {
+			console.log( 'Export PDF: Preparing pdf [3/4]')
+			printPage.evaluate( function() {
+				Reveal.isReady() ? window.callPhantom() : Reveal.addEventListener( 'pdf-ready', window.callPhantom );
+			} );
+		} );
+
+		printPage.onCallback = function( data ) {
+			// For some reason we need to "jump the queue" for syntax highlighting to work.
+			// See: http://stackoverflow.com/a/3580132/129269
+			setTimeout( function() {
+				console.log( 'Export PDF: Writing file [4/4]' );
+				printPage.render( outputFile );
+				console.log( 'Export PDF: Finished successfully!' );
+				phantom.exit();
+			}, 0 );
+		};
+	}
+	else {
+
+		console.log( 'Export PDF: Unable to read reveal.js config. Make sure the input address points to a reveal.js page.' );
+		phantom.exit( 1 );
+
+	}
 } );
-

plugin/remotes/remotes.js

@@ -1,39 +0,0 @@
-/**
- * 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 isNotesAndIframe = (function(){
-        return window.RevealNotes && !(self == top);
-    })();
-
-    if(!hasTouch && !isNotesAndIframe){
-        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://hakim-static.s3.amazonaws.com/reveal-js/remotes.ne.min.js');
-    }
-})(window);

plugin/search/search.js

@@ -19,111 +19,117 @@ var RevealSearch = (function() {
 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 = [];
+	var targetNode = document.getElementById(id) || document.body;
+	var hiliteTag = tag || "EM";
+	var skipTags = new RegExp("^(?:" + hiliteTag + "|SCRIPT|FORM)$");
+	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.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, " ");
-  }
+	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;
+	// 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];
-        }
+		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;
+				while (secnode != null && secnode.nodeName != 'SECTION') {
+					secnode = secnode.parentNode;
+				}
 
-        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 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);
+				}
 
-        var after = node.splitText(regs.index);
-        after.nodeValue = after.nodeValue.substring(regs[0].length);
-        node.parentNode.insertBefore(match, after);
-      }
-    }
-  };
+				if(!wordColor[regs[0].toLowerCase()]) {
+					wordColor[regs[0].toLowerCase()] = colors[colorIdx++ % colors.length];
+				}
 
-  // remove highlighting
-  this.remove = function()
-  {
-    var arr = document.getElementsByTagName(hiliteTag);
-    while(arr.length && (el = arr[0])) {
-      el.parentNode.replaceChild(el.firstChild, el);
-    }
-  };
+				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";
 
-  // start highlighting at target node
-  this.apply = function(input)
-  {
-    if(input == undefined || !input) return;
-    this.remove();
-    this.setRegex(input);
-    this.hiliteWords(targetNode);
-    return matchingSlides;
-  };
+				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 inputboxdiv = document.getElementById("searchinputdiv");
 		var inputbox = document.getElementById("searchinput");
-		inputbox.style.display = "inline";
+		inputboxdiv.style.display = "inline";
 		inputbox.focus();
 		inputbox.select();
 	}
 
+	function closeSearch() {
+		var inputboxdiv = document.getElementById("searchinputdiv");
+		inputboxdiv.style.display = "none";
+		if(myHilitor) myHilitor.remove();
+	}
+
 	function toggleSearch() {
-		var inputbox = document.getElementById("searchinput");
-		if (inputbox.style.display !== "inline") {
+		var inputboxdiv = document.getElementById("searchinputdiv");
+		if (inputboxdiv.style.display !== "inline") {
 			openSearch();
 		}
 		else {
-			inputbox.style.display = "none";
-			myHilitor.remove();
+			closeSearch();
 		}
 	}
 
@@ -132,19 +138,27 @@ function Hilitor(id, tag)
 		if (searchboxDirty) {
 			var searchstring = document.getElementById("searchinput").value;
 
-			//find the keyword amongst the slides
-			myHilitor = new Hilitor("slidecontent");
-			matchedSlides = myHilitor.apply(searchstring);
-			currentMatchedIndex = 0;
+			if (searchstring === '') {
+				if(myHilitor) myHilitor.remove();
+				matchedSlides = null;
+			}
+			else {
+				//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++;
+		if (matchedSlides) {
+			//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++;
+			}
 		}
 	}
 
@@ -155,19 +169,20 @@ function Hilitor(id, tag)
 			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.style.position = 'absolute';
+			searchElement.style.top = '10px';
+			searchElement.style.right = '10px';
+			searchElement.style.zIndex = 10;
+			//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) {
+	document.getElementById( 'searchbutton' ).addEventListener( 'click', function(event) {
 		doSearch();
 	}, false );
 
-	document.getElementById("searchinput").addEventListener( 'keyup', function( event ) {
+	document.getElementById( 'searchinput' ).addEventListener( 'keyup', function( event ) {
 		switch (event.keyCode) {
 			case 13:
 				event.preventDefault();
@@ -179,18 +194,13 @@ function Hilitor(id, tag)
 		}
 	}, 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 ) {
+		if( event.key == "F" && (event.ctrlKey || event.metaKey) ) { //Control+Shift+f
 			event.preventDefault();
-			openSearch();
+			toggleSearch();
 		}
 	}, false );
-*/
+	if( window.Reveal ) Reveal.registerKeyboardShortcut( 'CTRL + Shift + F', 'Search' );
+	closeSearch();
 	return { open: openSearch };
 })();

plugin/zoom-js/zoom.js

@@ -1,32 +1,34 @@
 // Custom reveal.js integration
-(function(){
-	var isEnabled = true;
+var RevealZoom = (function(){
 
-	document.querySelector( '.reveal .slides' ).addEventListener( 'mousedown', function( event ) {
-		var modifier = ( Reveal.getConfig().zoomKey ? Reveal.getConfig().zoomKey : 'alt' ) + 'Key';
+	return {
+		init: function() {
 
-		var zoomPadding = 20;
-		var revealScale = Reveal.getScale();
+			Reveal.getRevealElement().addEventListener( 'mousedown', function( event ) {
+				var defaultModifier = /Linux/.test( window.navigator.platform ) ? 'ctrl' : 'alt';
 
-		if( event[ modifier ] && isEnabled ) {
-			event.preventDefault();
+				var modifier = ( Reveal.getConfig().zoomKey ? Reveal.getConfig().zoomKey : defaultModifier ) + 'Key';
+				var zoomLevel = ( Reveal.getConfig().zoomLevel ? Reveal.getConfig().zoomLevel : 2 );
 
-			var bounds = event.target.getBoundingClientRect();
+				if( event[ modifier ] && !Reveal.isOverview() ) {
+					event.preventDefault();
+
+					zoom.to({
+						x: event.clientX,
+						y: event.clientY,
+						scale: zoomLevel,
+						pan: false
+					});
+				}
+			} );
 
-			zoom.to({
-				x: ( bounds.left * revealScale ) - zoomPadding,
-				y: ( bounds.top * revealScale ) - zoomPadding,
-				width: ( bounds.width * revealScale ) + ( zoomPadding * 2 ),
-				height: ( bounds.height * revealScale ) + ( zoomPadding * 2 ),
-				pan: false
-			});
 		}
-	} );
+	}
 
-	Reveal.addEventListener( 'overviewshown', function() { isEnabled = false; } );
-	Reveal.addEventListener( 'overviewhidden', function() { isEnabled = true; } );
 })();
 
+Reveal.registerPlugin( 'zoom', RevealZoom );
+
 /*!
  * zoom.js 0.3 (modified for use with reveal.js)
  * http://lab.hakim.se/zoom-js
@@ -273,6 +275,3 @@ var zoom = (function(){
 	}
 
 })();
-
-
-

test/assets/external-script-a.js

@@ -0,0 +1 @@
+window.externalScriptSequence += 'A';

test/assets/external-script-b.js

@@ -0,0 +1 @@
+window.externalScriptSequence += 'B';

test/assets/external-script-c.js

@@ -0,0 +1 @@
+window.externalScriptSequence += 'C';

test/assets/external-script-d.js

@@ -0,0 +1 @@
+window.externalScriptSequence += 'D';

test/examples/assets/beeping.txt

@@ -0,0 +1,2 @@
+Source: https://freesound.org/people/fennelliott/sounds/379419/
+License: CC0 (public domain)

test/examples/embedded-media.html

@@ -30,11 +30,15 @@
 					<h2>Empty Slide</h2>
 				</section>
 
+				<section>
+					<h2>Auto-playing audio</h2>
+					<audio src="assets/beeping.wav" data-autoplay></audio>
+				</section>
+
 			</div>
 
 		</div>
 
-		<script src="../../lib/js/head.min.js"></script>
 		<script src="../../js/reveal.js"></script>
 
 		<script>

test/examples/math.html

@@ -82,6 +82,14 @@
 					\]
 				</section>
 
+				<section>
+					<h3>TeX Macros</h3>
+
+					Here is a common vector space:
+					\[L^2(\R) = \set{u : \R \to \R}{\int_\R |u|^2 &lt; +\infty}\]
+					used in functional analysis.
+				</section>
+
 				<section>
 					<section>
 						<h3>The Lorenz Equations</h3>
@@ -153,13 +161,20 @@
 							\]
 						</div>
 					</section>
+
+					<section>
+						<h3>TeX Macros</h3>
+
+						Here is a common vector space:
+						\[L^2(\R) = \set{u : \R \to \R}{\int_\R |u|^2 &lt; +\infty}\]
+						used in functional analysis.
+					</section>
 				</section>
 
 			</div>
 
 		</div>
 
-		<script src="../../lib/js/head.min.js"></script>
 		<script src="../../js/reveal.js"></script>
 
 		<script>
@@ -169,12 +184,17 @@
 				transition: 'linear',
 
 				math: {
-					// mathjax: 'http://cdn.mathjax.org/mathjax/latest/MathJax.js',
-					config: 'TeX-AMS_HTML-full'
+					// mathjax: 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js',
+					config: 'TeX-AMS_HTML-full',
+					TeX: {
+						Macros: {
+							R: '\\mathbb{R}',
+							set: [ '\\left\\{#1 \\; ; \\; #2\\right\\}', 2 ]
+						}
+					}
 				},
 
 				dependencies: [
-					{ src: '../../lib/js/classList.js' },
 					{ src: '../../plugin/math/math.js', async: true }
 				]
 			});

test/examples/slide-backgrounds.html

@@ -93,7 +93,7 @@
 					<h2>Video background</h2>
 				</section>
 
-				<section data-background-iframe="https://slides.com">
+				<section data-background-iframe="https://slides.com/news/make-better-presentations/embed?style=hidden&autoSlide=4000">
 					<h2>Iframe background</h2>
 				</section>
 
@@ -122,7 +122,6 @@
 
 		</div>
 
-		<script src="../../lib/js/head.min.js"></script>
 		<script src="../../js/reveal.js"></script>
 
 		<script>

test/examples/slide-transitions.html

@@ -81,7 +81,6 @@
 
 		</div>
 
-		<script src="../../lib/js/head.min.js"></script>
 		<script src="../../js/reveal.js"></script>
 
 		<script>

test/qunit-1.12.0.css

@@ -1,244 +0,0 @@
-/**
- * QUnit v1.12.0 - A JavaScript Unit Testing Framework
- *
- * http://qunitjs.com
- *
- * Copyright 2012 jQuery Foundation and other contributors
- * Released under the MIT license.
- * http://jquery.org/license
- */
-
-/** Font Family and Sizes */
-
-#qunit-tests, #qunit-header, #qunit-banner, #qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult {
-	font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial, sans-serif;
-}
-
-#qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult, #qunit-tests li { font-size: small; }
-#qunit-tests { font-size: smaller; }
-
-
-/** Resets */
-
-#qunit-tests, #qunit-header, #qunit-banner, #qunit-userAgent, #qunit-testresult, #qunit-modulefilter {
-	margin: 0;
-	padding: 0;
-}
-
-
-/** Header */
-
-#qunit-header {
-	padding: 0.5em 0 0.5em 1em;
-
-	color: #8699a4;
-	background-color: #0d3349;
-
-	font-size: 1.5em;
-	line-height: 1em;
-	font-weight: normal;
-
-	border-radius: 5px 5px 0 0;
-	-moz-border-radius: 5px 5px 0 0;
-	-webkit-border-top-right-radius: 5px;
-	-webkit-border-top-left-radius: 5px;
-}
-
-#qunit-header a {
-	text-decoration: none;
-	color: #c2ccd1;
-}
-
-#qunit-header a:hover,
-#qunit-header a:focus {
-	color: #fff;
-}
-
-#qunit-testrunner-toolbar label {
-	display: inline-block;
-	padding: 0 .5em 0 .1em;
-}
-
-#qunit-banner {
-	height: 5px;
-}
-
-#qunit-testrunner-toolbar {
-	padding: 0.5em 0 0.5em 2em;
-	color: #5E740B;
-	background-color: #eee;
-	overflow: hidden;
-}
-
-#qunit-userAgent {
-	padding: 0.5em 0 0.5em 2.5em;
-	background-color: #2b81af;
-	color: #fff;
-	text-shadow: rgba(0, 0, 0, 0.5) 2px 2px 1px;
-}
-
-#qunit-modulefilter-container {
-	float: right;
-}
-
-/** Tests: Pass/Fail */
-
-#qunit-tests {
-	list-style-position: inside;
-}
-
-#qunit-tests li {
-	padding: 0.4em 0.5em 0.4em 2.5em;
-	border-bottom: 1px solid #fff;
-	list-style-position: inside;
-}
-
-#qunit-tests.hidepass li.pass, #qunit-tests.hidepass li.running  {
-	display: none;
-}
-
-#qunit-tests li strong {
-	cursor: pointer;
-}
-
-#qunit-tests li a {
-	padding: 0.5em;
-	color: #c2ccd1;
-	text-decoration: none;
-}
-#qunit-tests li a:hover,
-#qunit-tests li a:focus {
-	color: #000;
-}
-
-#qunit-tests li .runtime {
-	float: right;
-	font-size: smaller;
-}
-
-.qunit-assert-list {
-	margin-top: 0.5em;
-	padding: 0.5em;
-
-	background-color: #fff;
-
-	border-radius: 5px;
-	-moz-border-radius: 5px;
-	-webkit-border-radius: 5px;
-}
-
-.qunit-collapsed {
-	display: none;
-}
-
-#qunit-tests table {
-	border-collapse: collapse;
-	margin-top: .2em;
-}
-
-#qunit-tests th {
-	text-align: right;
-	vertical-align: top;
-	padding: 0 .5em 0 0;
-}
-
-#qunit-tests td {
-	vertical-align: top;
-}
-
-#qunit-tests pre {
-	margin: 0;
-	white-space: pre-wrap;
-	word-wrap: break-word;
-}
-
-#qunit-tests del {
-	background-color: #e0f2be;
-	color: #374e0c;
-	text-decoration: none;
-}
-
-#qunit-tests ins {
-	background-color: #ffcaca;
-	color: #500;
-	text-decoration: none;
-}
-
-/*** Test Counts */
-
-#qunit-tests b.counts                       { color: black; }
-#qunit-tests b.passed                       { color: #5E740B; }
-#qunit-tests b.failed                       { color: #710909; }
-
-#qunit-tests li li {
-	padding: 5px;
-	background-color: #fff;
-	border-bottom: none;
-	list-style-position: inside;
-}
-
-/*** Passing Styles */
-
-#qunit-tests li li.pass {
-	color: #3c510c;
-	background-color: #fff;
-	border-left: 10px solid #C6E746;
-}
-
-#qunit-tests .pass                          { color: #528CE0; background-color: #D2E0E6; }
-#qunit-tests .pass .test-name               { color: #366097; }
-
-#qunit-tests .pass .test-actual,
-#qunit-tests .pass .test-expected           { color: #999999; }
-
-#qunit-banner.qunit-pass                    { background-color: #C6E746; }
-
-/*** Failing Styles */
-
-#qunit-tests li li.fail {
-	color: #710909;
-	background-color: #fff;
-	border-left: 10px solid #EE5757;
-	white-space: pre;
-}
-
-#qunit-tests > li:last-child {
-	border-radius: 0 0 5px 5px;
-	-moz-border-radius: 0 0 5px 5px;
-	-webkit-border-bottom-right-radius: 5px;
-	-webkit-border-bottom-left-radius: 5px;
-}
-
-#qunit-tests .fail                          { color: #000000; background-color: #EE5757; }
-#qunit-tests .fail .test-name,
-#qunit-tests .fail .module-name             { color: #000000; }
-
-#qunit-tests .fail .test-actual             { color: #EE5757; }
-#qunit-tests .fail .test-expected           { color: green;   }
-
-#qunit-banner.qunit-fail                    { background-color: #EE5757; }
-
-
-/** Result */
-
-#qunit-testresult {
-	padding: 0.5em 0.5em 0.5em 2.5em;
-
-	color: #2b81af;
-	background-color: #D2E0E6;
-
-	border-bottom: 1px solid white;
-}
-#qunit-testresult .module-name {
-	font-weight: bold;
-}
-
-/** Fixture */
-
-#qunit-fixture {
-	position: absolute;
-	top: -10000px;
-	left: -10000px;
-	width: 1000px;
-	height: 1000px;
-}

test/qunit-2.5.0.css

@@ -0,0 +1,436 @@
+/*!
+ * QUnit 2.5.0
+ * https://qunitjs.com/
+ *
+ * Copyright jQuery Foundation and other contributors
+ * Released under the MIT license
+ * https://jquery.org/license
+ *
+ * Date: 2018-01-10T02:56Z
+ */
+
+/** Font Family and Sizes */
+
+#qunit-tests, #qunit-header, #qunit-banner, #qunit-testrunner-toolbar, #qunit-filteredTest, #qunit-userAgent, #qunit-testresult {
+	font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial, sans-serif;
+}
+
+#qunit-testrunner-toolbar, #qunit-filteredTest, #qunit-userAgent, #qunit-testresult, #qunit-tests li { font-size: small; }
+#qunit-tests { font-size: smaller; }
+
+
+/** Resets */
+
+#qunit-tests, #qunit-header, #qunit-banner, #qunit-filteredTest, #qunit-userAgent, #qunit-testresult, #qunit-modulefilter {
+	margin: 0;
+	padding: 0;
+}
+
+
+/** Header (excluding toolbar) */
+
+#qunit-header {
+	padding: 0.5em 0 0.5em 1em;
+
+	color: #8699A4;
+	background-color: #0D3349;
+
+	font-size: 1.5em;
+	line-height: 1em;
+	font-weight: 400;
+
+	border-radius: 5px 5px 0 0;
+}
+
+#qunit-header a {
+	text-decoration: none;
+	color: #C2CCD1;
+}
+
+#qunit-header a:hover,
+#qunit-header a:focus {
+	color: #FFF;
+}
+
+#qunit-banner {
+	height: 5px;
+}
+
+#qunit-filteredTest {
+	padding: 0.5em 1em 0.5em 1em;
+	color: #366097;
+	background-color: #F4FF77;
+}
+
+#qunit-userAgent {
+	padding: 0.5em 1em 0.5em 1em;
+	color: #FFF;
+	background-color: #2B81AF;
+	text-shadow: rgba(0, 0, 0, 0.5) 2px 2px 1px;
+}
+
+
+/** Toolbar */
+
+#qunit-testrunner-toolbar {
+	padding: 0.5em 1em 0.5em 1em;
+	color: #5E740B;
+	background-color: #EEE;
+}
+
+#qunit-testrunner-toolbar .clearfix {
+	height: 0;
+	clear: both;
+}
+
+#qunit-testrunner-toolbar label {
+	display: inline-block;
+}
+
+#qunit-testrunner-toolbar input[type=checkbox],
+#qunit-testrunner-toolbar input[type=radio] {
+	margin: 3px;
+	vertical-align: -2px;
+}
+
+#qunit-testrunner-toolbar input[type=text] {
+	box-sizing: border-box;
+	height: 1.6em;
+}
+
+.qunit-url-config,
+.qunit-filter,
+#qunit-modulefilter {
+	display: inline-block;
+	line-height: 2.1em;
+}
+
+.qunit-filter,
+#qunit-modulefilter {
+	float: right;
+	position: relative;
+	margin-left: 1em;
+}
+
+.qunit-url-config label {
+	margin-right: 0.5em;
+}
+
+#qunit-modulefilter-search {
+	box-sizing: border-box;
+	width: 400px;
+}
+
+#qunit-modulefilter-search-container:after {
+	position: absolute;
+	right: 0.3em;
+	content: "\25bc";
+	color: black;
+}
+
+#qunit-modulefilter-dropdown {
+	/* align with #qunit-modulefilter-search */
+	box-sizing: border-box;
+	width: 400px;
+	position: absolute;
+	right: 0;
+	top: 50%;
+	margin-top: 0.8em;
+
+	border: 1px solid #D3D3D3;
+	border-top: none;
+	border-radius: 0 0 .25em .25em;
+	color: #000;
+	background-color: #F5F5F5;
+	z-index: 99;
+}
+
+#qunit-modulefilter-dropdown a {
+	color: inherit;
+	text-decoration: none;
+}
+
+#qunit-modulefilter-dropdown .clickable.checked {
+	font-weight: bold;
+	color: #000;
+	background-color: #D2E0E6;
+}
+
+#qunit-modulefilter-dropdown .clickable:hover {
+	color: #FFF;
+	background-color: #0D3349;
+}
+
+#qunit-modulefilter-actions {
+	display: block;
+	overflow: auto;
+
+	/* align with #qunit-modulefilter-dropdown-list */
+	font: smaller/1.5em sans-serif;
+}
+
+#qunit-modulefilter-dropdown #qunit-modulefilter-actions > * {
+	box-sizing: border-box;
+	max-height: 2.8em;
+	display: block;
+	padding: 0.4em;
+}
+
+#qunit-modulefilter-dropdown #qunit-modulefilter-actions > button {
+	float: right;
+	font: inherit;
+}
+
+#qunit-modulefilter-dropdown #qunit-modulefilter-actions > :last-child {
+	/* insert padding to align with checkbox margins */
+	padding-left: 3px;
+}
+
+#qunit-modulefilter-dropdown-list {
+	max-height: 200px;
+	overflow-y: auto;
+	margin: 0;
+	border-top: 2px groove threedhighlight;
+	padding: 0.4em 0 0;
+	font: smaller/1.5em sans-serif;
+}
+
+#qunit-modulefilter-dropdown-list li {
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+#qunit-modulefilter-dropdown-list .clickable {
+	display: block;
+	padding-left: 0.15em;
+}
+
+
+/** Tests: Pass/Fail */
+
+#qunit-tests {
+	list-style-position: inside;
+}
+
+#qunit-tests li {
+	padding: 0.4em 1em 0.4em 1em;
+	border-bottom: 1px solid #FFF;
+	list-style-position: inside;
+}
+
+#qunit-tests > li {
+	display: none;
+}
+
+#qunit-tests li.running,
+#qunit-tests li.pass,
+#qunit-tests li.fail,
+#qunit-tests li.skipped,
+#qunit-tests li.aborted {
+	display: list-item;
+}
+
+#qunit-tests.hidepass {
+	position: relative;
+}
+
+#qunit-tests.hidepass li.running,
+#qunit-tests.hidepass li.pass:not(.todo) {
+	visibility: hidden;
+	position: absolute;
+	width:   0;
+	height:  0;
+	padding: 0;
+	border:  0;
+	margin:  0;
+}
+
+#qunit-tests li strong {
+	cursor: pointer;
+}
+
+#qunit-tests li.skipped strong {
+	cursor: default;
+}
+
+#qunit-tests li a {
+	padding: 0.5em;
+	color: #C2CCD1;
+	text-decoration: none;
+}
+
+#qunit-tests li p a {
+	padding: 0.25em;
+	color: #6B6464;
+}
+#qunit-tests li a:hover,
+#qunit-tests li a:focus {
+	color: #000;
+}
+
+#qunit-tests li .runtime {
+	float: right;
+	font-size: smaller;
+}
+
+.qunit-assert-list {
+	margin-top: 0.5em;
+	padding: 0.5em;
+
+	background-color: #FFF;
+
+	border-radius: 5px;
+}
+
+.qunit-source {
+	margin: 0.6em 0 0.3em;
+}
+
+.qunit-collapsed {
+	display: none;
+}
+
+#qunit-tests table {
+	border-collapse: collapse;
+	margin-top: 0.2em;
+}
+
+#qunit-tests th {
+	text-align: right;
+	vertical-align: top;
+	padding: 0 0.5em 0 0;
+}
+
+#qunit-tests td {
+	vertical-align: top;
+}
+
+#qunit-tests pre {
+	margin: 0;
+	white-space: pre-wrap;
+	word-wrap: break-word;
+}
+
+#qunit-tests del {
+	color: #374E0C;
+	background-color: #E0F2BE;
+	text-decoration: none;
+}
+
+#qunit-tests ins {
+	color: #500;
+	background-color: #FFCACA;
+	text-decoration: none;
+}
+
+/*** Test Counts */
+
+#qunit-tests b.counts                       { color: #000; }
+#qunit-tests b.passed                       { color: #5E740B; }
+#qunit-tests b.failed                       { color: #710909; }
+
+#qunit-tests li li {
+	padding: 5px;
+	background-color: #FFF;
+	border-bottom: none;
+	list-style-position: inside;
+}
+
+/*** Passing Styles */
+
+#qunit-tests li li.pass {
+	color: #3C510C;
+	background-color: #FFF;
+	border-left: 10px solid #C6E746;
+}
+
+#qunit-tests .pass                          { color: #528CE0; background-color: #D2E0E6; }
+#qunit-tests .pass .test-name               { color: #366097; }
+
+#qunit-tests .pass .test-actual,
+#qunit-tests .pass .test-expected           { color: #999; }
+
+#qunit-banner.qunit-pass                    { background-color: #C6E746; }
+
+/*** Failing Styles */
+
+#qunit-tests li li.fail {
+	color: #710909;
+	background-color: #FFF;
+	border-left: 10px solid #EE5757;
+	white-space: pre;
+}
+
+#qunit-tests > li:last-child {
+	border-radius: 0 0 5px 5px;
+}
+
+#qunit-tests .fail                          { color: #000; background-color: #EE5757; }
+#qunit-tests .fail .test-name,
+#qunit-tests .fail .module-name             { color: #000; }
+
+#qunit-tests .fail .test-actual             { color: #EE5757; }
+#qunit-tests .fail .test-expected           { color: #008000; }
+
+#qunit-banner.qunit-fail                    { background-color: #EE5757; }
+
+
+/*** Aborted tests */
+#qunit-tests .aborted { color: #000; background-color: orange; }
+/*** Skipped tests */
+
+#qunit-tests .skipped {
+	background-color: #EBECE9;
+}
+
+#qunit-tests .qunit-todo-label,
+#qunit-tests .qunit-skipped-label {
+	background-color: #F4FF77;
+	display: inline-block;
+	font-style: normal;
+	color: #366097;
+	line-height: 1.8em;
+	padding: 0 0.5em;
+	margin: -0.4em 0.4em -0.4em 0;
+}
+
+#qunit-tests .qunit-todo-label {
+	background-color: #EEE;
+}
+
+/** Result */
+
+#qunit-testresult {
+	color: #2B81AF;
+	background-color: #D2E0E6;
+
+	border-bottom: 1px solid #FFF;
+}
+#qunit-testresult .clearfix {
+	height: 0;
+	clear: both;
+}
+#qunit-testresult .module-name {
+	font-weight: 700;
+}
+#qunit-testresult-display {
+	padding: 0.5em 1em 0.5em 1em;
+	width: 85%;
+	float:left;
+}
+#qunit-testresult-controls {
+	padding: 0.5em 1em 0.5em 1em;
+  width: 10%;
+	float:left;
+}
+
+/** Fixture */
+
+#qunit-fixture {
+	position: absolute;
+	top: -10000px;
+	left: -10000px;
+	width: 1000px;
+	height: 1000px;
+}

test/simple.md

@@ -0,0 +1,12 @@
+## Slide 1.1
+
+```js
+var a = 1;
+```
+
+
+## Slide 1.2
+
+
+
+## Slide 2

test/test-dependencies-async.html

@@ -0,0 +1,78 @@
+<!doctype html>
+<html lang="en">
+
+	<head>
+		<meta charset="utf-8">
+
+		<title>reveal.js - Test Async Dependencies</title>
+
+		<link rel="stylesheet" href="../css/reveal.css">
+		<link rel="stylesheet" href="qunit-2.5.0.css">
+	</head>
+
+	<body style="overflow: auto;">
+
+		<div id="qunit"></div>
+		<div id="qunit-fixture"></div>
+
+		<div class="reveal" style="display: none;">
+
+			<div class="slides">
+
+				<section>Slide content</section>
+
+			</div>
+
+		</div>
+
+		<script src="../js/reveal.js"></script>
+		<script src="qunit-2.5.0.js"></script>
+
+		<script>
+			var	externalScriptSequence = '';
+			var scriptCount = 0;
+
+			QUnit.config.autostart = false;
+			QUnit.module( 'Async Dependencies' );
+
+			QUnit.test( 'Async scripts are loaded', function( assert ) {
+				assert.expect( 5 );
+				var done = assert.async( 5 );
+
+				function callback( event ) {
+					if( externalScriptSequence.length === 1 ) {
+						assert.ok( externalScriptSequence === 'A', 'first callback was sync script' );
+						done();
+					}
+					else {
+						assert.ok( true, 'async script loaded' );
+						done();
+					}
+
+					if( externalScriptSequence.length === 4 ) {
+						assert.ok( 	externalScriptSequence.indexOf( 'A' ) !== -1 &&
+									externalScriptSequence.indexOf( 'B' ) !== -1 &&
+									externalScriptSequence.indexOf( 'C' ) !== -1 &&
+									externalScriptSequence.indexOf( 'D' ) !== -1, 'four unique scripts were loaded' );
+						done();
+					}
+
+					scriptCount ++;
+				}
+
+				Reveal.initialize({
+					dependencies: [
+						{ src: 'assets/external-script-a.js', async: false, callback: callback },
+						{ src: 'assets/external-script-b.js', async: true, callback: callback },
+						{ src: 'assets/external-script-c.js', async: true, callback: callback },
+						{ src: 'assets/external-script-d.js', async: true, callback: callback }
+					]
+				});
+			});
+
+			QUnit.start();
+
+		</script>
+
+	</body>
+</html>

test/test-dependencies.html

@@ -0,0 +1,54 @@
+<!doctype html>
+<html lang="en">
+
+	<head>
+		<meta charset="utf-8">
+
+		<title>reveal.js - Test Dependencies</title>
+
+		<link rel="stylesheet" href="../css/reveal.css">
+		<link rel="stylesheet" href="qunit-2.5.0.css">
+	</head>
+
+	<body style="overflow: auto;">
+
+		<div id="qunit"></div>
+		<div id="qunit-fixture"></div>
+
+		<div class="reveal" style="display: none;">
+
+			<div class="slides">
+
+				<section>Slide content</section>
+
+			</div>
+
+		</div>
+
+		<script src="../js/reveal.js"></script>
+		<script src="qunit-2.5.0.js"></script>
+
+		<script>
+			window.externalScriptSequence = '';
+
+			Reveal.addEventListener( 'ready', function() {
+
+				QUnit.module( 'Dependencies' );
+
+				QUnit.test( 'Load synchronous scripts', function( assert ) {
+					assert.strictEqual( window.externalScriptSequence, 'ABC', 'Loaded and executed in order' );
+				});
+
+			} );
+
+			Reveal.initialize({
+				dependencies: [
+					{ src: 'assets/external-script-a.js' },
+					{ src: 'assets/external-script-b.js' },
+					{ src: 'assets/external-script-c.js' }
+				]
+			});
+		</script>
+
+	</body>
+</html>

test/test-grid-navigation.html

@@ -0,0 +1,74 @@
+<!doctype html>
+<html lang="en">
+
+	<head>
+		<meta charset="utf-8">
+
+		<title>reveal.js - Test Grid</title>
+
+		<link rel="stylesheet" href="../css/reveal.css">
+		<link rel="stylesheet" href="qunit-2.5.0.css">
+	</head>
+
+	<body style="overflow: auto;">
+
+		<div id="qunit"></div>
+		<div id="qunit-fixture"></div>
+
+		<div class="reveal" style="display: none;">
+
+			<div class="slides">
+
+				<section>0</section>
+				<section>
+					<section>1.1</section>
+					<section>1.2</section>
+					<section>1.3</section>
+					<section>1.4</section>
+				</section>
+				<section>
+					<section>2.1</section>
+					<section>2.2</section>
+					<section>2.3</section>
+					<section>2.4</section>
+				</section>
+
+			</div>
+
+		</div>
+
+		<script src="../js/reveal.js"></script>
+		<script src="qunit-2.5.0.js"></script>
+
+		<script>
+			Reveal.addEventListener( 'ready', function() {
+
+				QUnit.module( 'Grid Navigation' );
+
+				QUnit.test( 'Disabled', function( assert ) {
+					Reveal.right();
+					Reveal.down();
+					Reveal.down();
+					assert.deepEqual( Reveal.getIndices(), { h: 1, v: 2, f: undefined }, 'Correct starting point' );
+					Reveal.right();
+					assert.deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: undefined }, 'Moves to top when going to adjacent stack' );
+				});
+
+				QUnit.test( 'Enabled', function( assert ) {
+					Reveal.configure({ navigationMode: 'grid' });
+					Reveal.slide( 0, 0 );
+					Reveal.right();
+					Reveal.down();
+					Reveal.down();
+					assert.deepEqual( Reveal.getIndices(), { h: 1, v: 2, f: undefined }, 'Correct starting point' );
+					Reveal.right();
+					assert.deepEqual( Reveal.getIndices(), { h: 2, v: 2, f: undefined }, 'Remains at same vertical index when going to adjacent stack' );
+				});
+
+			} );
+
+			Reveal.initialize();
+		</script>
+
+	</body>
+</html>

test/test-iframe-backgrounds.html

@@ -0,0 +1,104 @@
+<!doctype html>
+<html lang="en">
+
+	<head>
+		<meta charset="utf-8">
+
+		<title>reveal.js - Test Iframe Backgrounds</title>
+
+		<link rel="stylesheet" href="../css/reveal.css">
+		<link rel="stylesheet" href="qunit-2.5.0.css">
+	</head>
+
+	<body style="overflow: auto;">
+
+		<div id="qunit"></div>
+		<div id="qunit-fixture"></div>
+
+		<div class="reveal" style="display: none;">
+
+			<div class="slides">
+
+				<section data-background-iframe="#1">1</section>
+				<section data-background-iframe="#2">2</section>
+				<section data-background-iframe="#3" data-preload>3</section>
+				<section data-background-iframe="#4">4</section>
+				<section data-background-iframe="#5">5</section>
+				<section data-background-iframe="#6">6</section>
+
+			</div>
+
+		</div>
+
+		<script src="../js/reveal.js"></script>
+		<script src="qunit-2.5.0.js"></script>
+
+		<script>
+
+
+			Reveal.addEventListener( 'ready', function() {
+
+				function getIframe( index ) {
+					return document.querySelectorAll( '.slide-background' )[index].querySelector( 'iframe' );
+				}
+
+				QUnit.module( 'Iframe' );
+
+				QUnit.test( 'Using default settings', function( assert ) {
+
+					Reveal.slide(0);
+					assert.strictEqual( getIframe(1).hasAttribute( 'src' ), false, 'not preloaded when within viewDistance' );
+
+					Reveal.slide(1);
+					assert.strictEqual( getIframe(1).hasAttribute( 'src' ), true, 'loaded when slide becomes visible' );
+
+					Reveal.slide(0);
+					assert.strictEqual( getIframe(1).hasAttribute( 'src' ), false, 'unloaded when slide becomes invisible' );
+
+				});
+
+				QUnit.test( 'Using data-preload', function( assert ) {
+
+					Reveal.slide(1);
+					assert.strictEqual( getIframe(2).hasAttribute( 'src' ), true, 'preloaded within viewDistance' );
+					assert.strictEqual( getIframe(1).hasAttribute( 'src' ), true, 'loaded when slide becomes visible' );
+
+					Reveal.slide(0);
+					assert.strictEqual( getIframe(3).hasAttribute( 'src' ), false, 'unloads outside of viewDistance' );
+
+				});
+
+				QUnit.test( 'Using preloadIframes: true', function( assert ) {
+
+					Reveal.configure({ preloadIframes: true });
+
+					Reveal.slide(1);
+					assert.strictEqual( getIframe(0).hasAttribute( 'src' ), true, 'preloaded within viewDistance' );
+					assert.strictEqual( getIframe(1).hasAttribute( 'src' ), true, 'preloaded within viewDistance' );
+					assert.strictEqual( getIframe(2).hasAttribute( 'src' ), true, 'preloaded within viewDistance' );
+
+				});
+
+				QUnit.test( 'Using preloadIframes: false', function( assert ) {
+
+					Reveal.configure({ preloadIframes: false });
+
+					Reveal.slide(0);
+					assert.strictEqual( getIframe(1).hasAttribute( 'src' ), false, 'not preloaded within viewDistance' );
+					assert.strictEqual( getIframe(2).hasAttribute( 'src' ), false, 'not preloaded within viewDistance' );
+
+					Reveal.slide(1);
+					assert.strictEqual( getIframe(1).hasAttribute( 'src' ), true, 'loaded when slide becomes visible' );
+
+
+				});
+
+			} );
+
+			Reveal.initialize({
+				viewDistance: 3
+			});
+		</script>
+
+	</body>
+</html>

test/test-iframes.html

@@ -0,0 +1,108 @@
+<!doctype html>
+<html lang="en">
+
+	<head>
+		<meta charset="utf-8">
+
+		<title>reveal.js - Test Iframes</title>
+
+		<link rel="stylesheet" href="../css/reveal.css">
+		<link rel="stylesheet" href="qunit-2.5.0.css">
+	</head>
+
+	<body style="overflow: auto;">
+
+		<div id="qunit"></div>
+		<div id="qunit-fixture"></div>
+
+		<div class="reveal" style="display: none;">
+
+			<div class="slides">
+
+				<section>1</section>
+				<section>2</section>
+				<section>
+					<iframe class="default-iframe" data-src="#"></iframe>
+					<iframe class="preload-iframe" data-src="#" data-preload></iframe>
+				</section>
+
+			</div>
+
+		</div>
+
+		<script src="../js/reveal.js"></script>
+		<script src="qunit-2.5.0.js"></script>
+
+		<script>
+
+
+			Reveal.addEventListener( 'ready', function() {
+
+				var defaultIframe = document.querySelector( '.default-iframe' ),
+					preloadIframe = document.querySelector( '.preload-iframe' );
+
+				QUnit.module( 'Iframe' );
+
+				QUnit.test( 'Using default settings', function( assert ) {
+
+					Reveal.slide(1);
+					assert.strictEqual( defaultIframe.hasAttribute( 'src' ), false, 'not preloaded when within viewDistance' );
+
+					Reveal.slide(2);
+					assert.strictEqual( defaultIframe.hasAttribute( 'src' ), true, 'loaded when slide becomes visible' );
+
+					Reveal.slide(1);
+					assert.strictEqual( defaultIframe.hasAttribute( 'src' ), false, 'unloaded when slide becomes invisible' );
+
+				});
+
+				QUnit.test( 'Using data-preload', function( assert ) {
+
+					Reveal.slide(1);
+					assert.strictEqual( preloadIframe.hasAttribute( 'src' ), true, 'preloaded within viewDistance' );
+
+					Reveal.slide(2);
+					assert.strictEqual( preloadIframe.hasAttribute( 'src' ), true, 'loaded when slide becoems visible' );
+
+					Reveal.slide(0);
+					assert.strictEqual( preloadIframe.hasAttribute( 'src' ), false, 'unloads outside of viewDistance' );
+
+				});
+
+				QUnit.test( 'Using preloadIframes: true', function( assert ) {
+
+					Reveal.configure({ preloadIframes: true });
+
+					Reveal.slide(1);
+					assert.strictEqual( defaultIframe.hasAttribute( 'src' ), true, 'preloaded within viewDistance' );
+					assert.strictEqual( preloadIframe.hasAttribute( 'src' ), true, 'preloaded within viewDistance' );
+
+					Reveal.slide(2);
+					assert.strictEqual( defaultIframe.hasAttribute( 'src' ), true, 'loaded when slide becomes visible' );
+					assert.strictEqual( preloadIframe.hasAttribute( 'src' ), true, 'loaded when slide becomes visible' );
+
+				});
+
+				QUnit.test( 'Using preloadIframes: false', function( assert ) {
+
+					Reveal.configure({ preloadIframes: false });
+
+					Reveal.slide(0);
+					assert.strictEqual( defaultIframe.hasAttribute( 'src' ), false, 'not preloaded within viewDistance' );
+					assert.strictEqual( preloadIframe.hasAttribute( 'src' ), false, 'not preloaded within viewDistance' );
+
+					Reveal.slide(2);
+					assert.strictEqual( defaultIframe.hasAttribute( 'src' ), true, 'loaded when slide becomes visible' );
+					assert.strictEqual( preloadIframe.hasAttribute( 'src' ), true, 'loaded when slide becomes visible' );
+
+				});
+
+			} );
+
+			Reveal.initialize({
+				viewDistance: 2
+			});
+		</script>
+
+	</body>
+</html>

test/test-markdown-element-attributes.html

@@ -7,7 +7,7 @@
 		<title>reveal.js - Test Markdown Element Attributes</title>
 
 		<link rel="stylesheet" href="../css/reveal.css">
-		<link rel="stylesheet" href="qunit-1.12.0.css">
+		<link rel="stylesheet" href="qunit-2.5.0.css">
 	</head>
 
 	<body style="overflow: auto;">
@@ -66,8 +66,7 @@
 
 						Test
 
-						![Example Picture](examples/assets/image2.png)
-						<!-- {_class="reveal stretch"} -->
+						![Example Picture](examples/assets/image2.png) <!-- {_class="reveal stretch"} -->
 
 					</script>
 				</section>
@@ -122,11 +121,10 @@
 
 		</div>
 
-		<script src="../lib/js/head.min.js"></script>
 		<script src="../js/reveal.js"></script>
 		<script src="../plugin/markdown/marked.js"></script>
 		<script src="../plugin/markdown/markdown.js"></script>
-		<script src="qunit-1.12.0.js"></script>
+		<script src="qunit-2.5.0.js"></script>
 
 		<script src="test-markdown-element-attributes.js"></script>
 

test/test-markdown-element-attributes.js

@@ -1,46 +1,44 @@
-
-
 Reveal.addEventListener( 'ready', function() {
 
 	QUnit.module( 'Markdown' );
 
-	test( 'Vertical separator', function() {
-		strictEqual( document.querySelectorAll( '.reveal .slides>section>section' ).length, 4, 'found four slides' );
+	QUnit.test( 'Vertical separator', function( assert ) {
+		assert.strictEqual( document.querySelectorAll( '.reveal .slides>section>section' ).length, 4, 'found four slides' );
 	});
 
-
-	test( 'Attributes on element header in vertical slides', function() {
-		strictEqual( document.querySelectorAll( '.reveal .slides section>section h2.fragment.fade-out' ).length, 1, 'found one vertical slide with class fragment.fade-out on header' );
-		strictEqual( document.querySelectorAll( '.reveal .slides section>section h2.fragment.shrink' ).length, 1, 'found one vertical slide with class fragment.shrink on header' );
+	QUnit.test( 'Attributes on element header in vertical slides', function( assert ) {
+		assert.strictEqual( document.querySelectorAll( '.reveal .slides section>section h2.fragment.fade-out' ).length, 1, 'found one vertical slide with class fragment.fade-out on header' );
+		assert.strictEqual( document.querySelectorAll( '.reveal .slides section>section h2.fragment.shrink' ).length, 1, 'found one vertical slide with class fragment.shrink on header' );
 	});
 
-	test( 'Attributes on element paragraphs in vertical slides', function() {
-		strictEqual( document.querySelectorAll( '.reveal .slides section>section p.fragment.grow' ).length, 2, 'found a vertical slide with two paragraphs with class fragment.grow' );
+	QUnit.test( 'Attributes on element paragraphs in vertical slides', function( assert ) {
+		assert.strictEqual( document.querySelectorAll( '.reveal .slides section>section p.fragment.grow' ).length, 2, 'found a vertical slide with two paragraphs with class fragment.grow' );
 	});
 
-	test( 'Attributes on element list items in vertical slides', function() {
-		strictEqual( document.querySelectorAll( '.reveal .slides section>section li.fragment.grow' ).length, 3, 'found a vertical slide with three list items with class fragment.grow' );
+	QUnit.test( 'Attributes on element list items in vertical slides', function( assert ) {
+		assert.strictEqual( document.querySelectorAll( '.reveal .slides section>section li.fragment.grow' ).length, 3, 'found a vertical slide with three list items with class fragment.grow' );
 	});
 
-	test( 'Attributes on element paragraphs in horizontal slides', function() {
-		strictEqual( document.querySelectorAll( '.reveal .slides section p.fragment.highlight-red' ).length, 4, 'found a horizontal slide with four paragraphs with class fragment.grow' );
-	});
-	test( 'Attributes on element list items in horizontal slides', function() {
-		strictEqual( document.querySelectorAll( '.reveal .slides section li.fragment.highlight-green' ).length, 5, 'found a horizontal slide with five list items with class fragment.roll-in' );
-	});
-	test( 'Attributes on element list items in horizontal slides', function() {
-		strictEqual( document.querySelectorAll( '.reveal .slides section img.reveal.stretch' ).length, 1, 'found a horizontal slide with stretched image, class img.reveal.stretch' );
+	QUnit.test( 'Attributes on element paragraphs in horizontal slides', function( assert ) {
+		assert.strictEqual( document.querySelectorAll( '.reveal .slides section p.fragment.highlight-red' ).length, 4, 'found a horizontal slide with four paragraphs with class fragment.grow' );
 	});
 
-	test( 'Attributes on elements in vertical slides with default element attribute separator', function() {
-		strictEqual( document.querySelectorAll( '.reveal .slides section h2.fragment.highlight-red' ).length, 2, 'found two h2 titles with fragment highlight-red in vertical slides with default element attribute separator' );
+	QUnit.test( 'Attributes on element list items in horizontal slides', function( assert ) {
+		assert.strictEqual( document.querySelectorAll( '.reveal .slides section li.fragment.highlight-green' ).length, 5, 'found a horizontal slide with five list items with class fragment.roll-in' );
 	});
 
-	test( 'Attributes on elements in single slides with default element attribute separator', function() {
-		strictEqual( document.querySelectorAll( '.reveal .slides section p.fragment.highlight-blue' ).length, 3, 'found three elements with fragment highlight-blue in single slide with default element attribute separator' );
+	QUnit.test( 'Attributes on element image in horizontal slides', function( assert ) {
+		assert.strictEqual( document.querySelectorAll( '.reveal .slides section img.reveal.stretch' ).length, 1, 'found a horizontal slide with stretched image, class img.reveal.stretch' );
+	});
+
+	QUnit.test( 'Attributes on elements in vertical slides with default element attribute separator', function( assert ) {
+		assert.strictEqual( document.querySelectorAll( '.reveal .slides section h2.fragment.highlight-red' ).length, 2, 'found two h2 titles with fragment highlight-red in vertical slides with default element attribute separator' );
+	});
+
+	QUnit.test( 'Attributes on elements in single slides with default element attribute separator', function( assert ) {
+		assert.strictEqual( document.querySelectorAll( '.reveal .slides section p.fragment.highlight-blue' ).length, 3, 'found three elements with fragment highlight-blue in single slide with default element attribute separator' );
 	});
 
 } );
 
 Reveal.initialize();
-

test/test-markdown-external.html

@@ -0,0 +1,37 @@
+<!doctype html>
+<html lang="en">
+
+	<head>
+		<meta charset="utf-8">
+
+		<title>reveal.js - Test Markdown</title>
+
+		<link rel="stylesheet" href="../css/reveal.css">
+		<link rel="stylesheet" href="qunit-2.5.0.css">
+	</head>
+
+	<body style="overflow: auto;">
+
+		<div id="qunit"></div>
+		<div id="qunit-fixture"></div>
+
+		<div class="reveal" style="display: none;">
+
+			<div class="slides">
+				<!-- <section data-markdown="simple.md" data-separator="^\r?\n\r?\n\r?\n" data-separator-vertical="^\r?\n\r?\n"></section> -->
+			</div>
+
+		</div>
+
+		<script src="../js/reveal.js"></script>
+		<script src="../plugin/highlight/highlight.js"></script>
+		<script src="../plugin/markdown/marked.js"></script>
+		<script src="../plugin/markdown/markdown.js"></script>
+		<script src="qunit-2.5.0.js"></script>
+
+		<!-- <script src="test-markdown-external.js"></script> -->
+
+		<!-- Test disabled 28/2/2019 by Hakim – Markdown plugin needs to be updated to load extenal files asycnhronously -->
+
+	</body>
+</html>

test/test-markdown-external.js

@@ -0,0 +1,20 @@
+Reveal.addEventListener( 'ready', function() {
+
+	QUnit.module( 'Markdown' );
+
+	QUnit.test( 'Vertical separator', function( assert ) {
+		assert.strictEqual( document.querySelectorAll( '.reveal .slides>section>section' ).length, 2, 'found two slides' );
+	});
+
+	QUnit.test( 'Horizontal separator', function( assert ) {
+		assert.strictEqual( document.querySelectorAll( '.reveal .slides>section' ).length, 2, 'found two slides' );
+	});
+
+	QUnit.test( 'Language highlighter', function( assert ) {
+		assert.strictEqual( document.querySelectorAll( '.hljs-keyword' ).length, 1, 'got rendered highlight tag.' );
+		assert.strictEqual( document.querySelector( '.hljs-keyword' ).innerHTML, 'var', 'the same keyword: var.' );
+	});
+
+} );
+
+Reveal.initialize();

test/test-markdown-options.html

@@ -0,0 +1,40 @@
+<!doctype html>
+<html lang="en">
+
+	<head>
+		<meta charset="utf-8">
+
+		<title>reveal.js - Test Markdown Options</title>
+
+		<link rel="stylesheet" href="../css/reveal.css">
+		<link rel="stylesheet" href="qunit-2.5.0.css">
+	</head>
+
+	<body style="overflow: auto;">
+
+		<div id="qunit"></div>
+		<div id="qunit-fixture"></div>
+
+		<div class="reveal" style="display: none;">
+
+			<div class="slides">
+
+				<section data-markdown>
+					<script type="text/template">
+						## Testing Markdown Options
+
+						This "slide" should contain 'smart' quotes.
+					</script>
+				</section>
+
+			</div>
+
+		</div>
+
+		<script src="../js/reveal.js"></script>
+		<script src="qunit-2.5.0.js"></script>
+
+		<script src="test-markdown-options.js"></script>
+
+	</body>
+</html>

test/test-markdown-options.js

@@ -0,0 +1,27 @@
+Reveal.addEventListener( 'ready', function() {
+
+	QUnit.module( 'Markdown' );
+
+	QUnit.test( 'Options are set', function( assert ) {
+		assert.strictEqual( marked.defaults.smartypants, true );
+	});
+
+	QUnit.test( 'Smart quotes are activated', function( assert ) {
+		var text = document.querySelector( '.reveal .slides>section>p' ).textContent;
+
+		assert.strictEqual( /['"]/.test( text ), false );
+		assert.strictEqual( /[“”‘’]/.test( text ), true );
+	});
+
+} );
+
+Reveal.initialize({
+	dependencies: [
+		{ src: '../plugin/markdown/marked.js' },
+		// Test loading JS files with query strings
+		{ src: '../plugin/markdown/markdown.js?query=string' },
+	],
+	markdown: {
+		smartypants: true
+	}
+});

test/test-markdown-slide-attributes.html

@@ -7,7 +7,7 @@
 		<title>reveal.js - Test Markdown Attributes</title>
 
 		<link rel="stylesheet" href="../css/reveal.css">
-		<link rel="stylesheet" href="qunit-1.12.0.css">
+		<link rel="stylesheet" href="qunit-2.5.0.css">
 	</head>
 
 	<body style="overflow: auto;">
@@ -116,11 +116,10 @@
 
 		</div>
 
-		<script src="../lib/js/head.min.js"></script>
 		<script src="../js/reveal.js"></script>
 		<script src="../plugin/markdown/marked.js"></script>
 		<script src="../plugin/markdown/markdown.js"></script>
-		<script src="qunit-1.12.0.js"></script>
+		<script src="qunit-2.5.0.js"></script>
 
 		<script src="test-markdown-slide-attributes.js"></script>
 

test/test-markdown-slide-attributes.js

@@ -1,47 +1,44 @@
-
-
 Reveal.addEventListener( 'ready', function() {
 
 	QUnit.module( 'Markdown' );
 
-	test( 'Vertical separator', function() {
-		strictEqual( document.querySelectorAll( '.reveal .slides>section>section' ).length, 6, 'found six vertical slides' );
+	QUnit.test( 'Vertical separator', function( assert ) {
+		assert.strictEqual( document.querySelectorAll( '.reveal .slides>section>section' ).length, 6, 'found six vertical slides' );
 	});
 
-	test( 'Id on slide', function() {
-		strictEqual( document.querySelectorAll( '.reveal .slides>section>section#slide2' ).length, 1, 'found one slide with id slide2' );
-		strictEqual( document.querySelectorAll( '.reveal .slides>section>section a[href="#/slide2"]' ).length, 1, 'found one slide with a link to slide2' );
+	QUnit.test( 'Id on slide', function( assert ) {
+		assert.strictEqual( document.querySelectorAll( '.reveal .slides>section>section#slide2' ).length, 1, 'found one slide with id slide2' );
+		assert.strictEqual( document.querySelectorAll( '.reveal .slides>section>section a[href="#/slide2"]' ).length, 1, 'found one slide with a link to slide2' );
 	});
 
-	test( 'data-background attributes', function() {
-		strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-background="#A0C66B"]' ).length, 1, 'found one vertical slide with data-background="#A0C66B"' );
-		strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-background="#ff0000"]' ).length, 1, 'found one vertical slide with data-background="#ff0000"' );
-		strictEqual( document.querySelectorAll( '.reveal .slides>section[data-background="#C6916B"]' ).length, 1, 'found one slide with data-background="#C6916B"' );
+	QUnit.test( 'data-background attributes', function( assert ) {
+		assert.strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-background="#A0C66B"]' ).length, 1, 'found one vertical slide with data-background="#A0C66B"' );
+		assert.strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-background="#ff0000"]' ).length, 1, 'found one vertical slide with data-background="#ff0000"' );
+		assert.strictEqual( document.querySelectorAll( '.reveal .slides>section[data-background="#C6916B"]' ).length, 1, 'found one slide with data-background="#C6916B"' );
 	});
 
-	test( 'data-transition attributes', function() {
-		strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-transition="zoom"]' ).length, 1, 'found one vertical slide with data-transition="zoom"' );
-		strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-transition="fade"]' ).length, 1, 'found one vertical slide with data-transition="fade"' );
-		strictEqual( document.querySelectorAll( '.reveal .slides section [data-transition="zoom"]' ).length, 1, 'found one slide with data-transition="zoom"' );
+	QUnit.test( 'data-transition attributes', function( assert ) {
+		assert.strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-transition="zoom"]' ).length, 1, 'found one vertical slide with data-transition="zoom"' );
+		assert.strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-transition="fade"]' ).length, 1, 'found one vertical slide with data-transition="fade"' );
+		assert.strictEqual( document.querySelectorAll( '.reveal .slides section [data-transition="zoom"]' ).length, 1, 'found one slide with data-transition="zoom"' );
 	});
 
-	test( 'data-background attributes with default separator', function() {
-		strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-background="#A7C66B"]' ).length, 1, 'found one vertical slide with data-background="#A0C66B"' );
-		strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-background="#f70000"]' ).length, 1, 'found one vertical slide with data-background="#ff0000"' );
-		strictEqual( document.querySelectorAll( '.reveal .slides>section[data-background="#C7916B"]' ).length, 1, 'found one slide with data-background="#C6916B"' );
+	QUnit.test( 'data-background attributes with default separator', function( assert ) {
+		assert.strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-background="#A7C66B"]' ).length, 1, 'found one vertical slide with data-background="#A0C66B"' );
+		assert.strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-background="#f70000"]' ).length, 1, 'found one vertical slide with data-background="#ff0000"' );
+		assert.strictEqual( document.querySelectorAll( '.reveal .slides>section[data-background="#C7916B"]' ).length, 1, 'found one slide with data-background="#C6916B"' );
 	});
 
-	test( 'data-transition attributes with default separator', function() {
-		strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-transition="concave"]' ).length, 1, 'found one vertical slide with data-transition="zoom"' );
-		strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-transition="page"]' ).length, 1, 'found one vertical slide with data-transition="fade"' );
-		strictEqual( document.querySelectorAll( '.reveal .slides section [data-transition="concave"]' ).length, 1, 'found one slide with data-transition="zoom"' );
+	QUnit.test( 'data-transition attributes with default separator', function( assert ) {
+		assert.strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-transition="concave"]' ).length, 1, 'found one vertical slide with data-transition="zoom"' );
+		assert.strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-transition="page"]' ).length, 1, 'found one vertical slide with data-transition="fade"' );
+		assert.strictEqual( document.querySelectorAll( '.reveal .slides section [data-transition="concave"]' ).length, 1, 'found one slide with data-transition="zoom"' );
 	});
 
-	test( 'data-transition attributes with inline content', function() {
-		strictEqual( document.querySelectorAll( '.reveal .slides>section[data-background="#ff0000"]' ).length, 3, 'found three horizontal slides with data-background="#ff0000"' );
+	QUnit.test( 'data-transition attributes with inline content', function( assert ) {
+		assert.strictEqual( document.querySelectorAll( '.reveal .slides>section[data-background="#ff0000"]' ).length, 3, 'found three horizontal slides with data-background="#ff0000"' );
 	});
 
 } );
 
 Reveal.initialize();
-

test/test-markdown.html

@@ -7,13 +7,13 @@
 		<title>reveal.js - Test Markdown</title>
 
 		<link rel="stylesheet" href="../css/reveal.css">
-		<link rel="stylesheet" href="qunit-1.12.0.css">
+		<link rel="stylesheet" href="qunit-2.5.0.css">
 	</head>
 
 	<body style="overflow: auto;">
 
 		<div id="qunit"></div>
-  		<div id="qunit-fixture"></div>
+		<div id="qunit-fixture"></div>
 
 		<div class="reveal" style="display: none;">
 
@@ -40,11 +40,10 @@
 
 		</div>
 
-		<script src="../lib/js/head.min.js"></script>
 		<script src="../js/reveal.js"></script>
 		<script src="../plugin/markdown/marked.js"></script>
 		<script src="../plugin/markdown/markdown.js"></script>
-		<script src="qunit-1.12.0.js"></script>
+		<script src="qunit-2.5.0.js"></script>
 
 		<script src="test-markdown.js"></script>
 

test/test-markdown.js

@@ -1,15 +1,11 @@
-
-
 Reveal.addEventListener( 'ready', function() {
 
 	QUnit.module( 'Markdown' );
 
-	test( 'Vertical separator', function() {
-		strictEqual( document.querySelectorAll( '.reveal .slides>section>section' ).length, 2, 'found two slides' );
+	QUnit.test( 'Vertical separator', function( assert ) {
+		assert.strictEqual( document.querySelectorAll( '.reveal .slides>section>section' ).length, 2, 'found two slides' );
 	});
 
-
 } );
 
 Reveal.initialize();
-

test/test-pdf.html

@@ -8,7 +8,7 @@
 
 		<link rel="stylesheet" href="../css/reveal.css">
 		<link rel="stylesheet" href="../css/print/pdf.css">
-		<link rel="stylesheet" href="qunit-1.12.0.css">
+		<link rel="stylesheet" href="qunit-2.5.0.css">
 	</head>
 
 	<body style="overflow: auto;">
@@ -22,7 +22,7 @@
 
 				<section>
 					<h1>1</h1>
-					<img data-src="fake-url.png">
+					<img data-src="">
 				</section>
 
 				<section>
@@ -73,9 +73,8 @@
 
 		</div>
 
-		<script src="../lib/js/head.min.js"></script>
 		<script src="../js/reveal.js"></script>
-		<script src="qunit-1.12.0.js"></script>
+		<script src="qunit-2.5.0.js"></script>
 
 		<script src="test-pdf.js"></script>
 

test/test-pdf.js

@@ -1,15 +1,12 @@
-
 Reveal.addEventListener( 'ready', function() {
 
 	// Only one test for now, we're mainly ensuring that there
 	// are no execution errors when running PDF mode
 
-	test( 'Reveal.isReady', function() {
-		strictEqual( Reveal.isReady(), true, 'returns true' );
+	QUnit.test( 'Reveal.isReady', function( assert ) {
+		assert.strictEqual( Reveal.isReady(), true, 'returns true' );
 	});
 
-
 } );
 
 Reveal.initialize({ pdf: true });
-

test/test-plugins.html

@@ -0,0 +1,105 @@
+<!doctype html>
+<html lang="en">
+
+	<head>
+		<meta charset="utf-8">
+
+		<title>reveal.js - Test Plugins</title>
+
+		<link rel="stylesheet" href="../css/reveal.css">
+		<link rel="stylesheet" href="qunit-2.5.0.css">
+	</head>
+
+	<body style="overflow: auto;">
+
+		<div id="qunit"></div>
+		<div id="qunit-fixture"></div>
+
+		<div class="reveal" style="display: none;">
+
+			<div class="slides">
+
+				<section>Slide content</section>
+
+			</div>
+
+		</div>
+
+		<script src="../js/reveal.js"></script>
+		<script src="qunit-2.5.0.js"></script>
+
+		<script>
+
+			QUnit.module( 'Plugins' );
+
+			var initCounter = { PluginB: 0, PluginC: 0, PluginD: 0 };
+
+			// Plugin with no init method
+			var PluginA = {};
+
+			// Plugin with init method
+			var PluginB = { init: function() {
+				initCounter['PluginB'] += 1;
+			} };
+
+			// Async plugin with init method
+			var PluginC = { init: function() {
+				return new Promise(function( resolve ) {
+					setTimeout( () => {
+						initCounter['PluginC'] += 1;
+						resolve();
+					}, 1000 );
+				});
+			} };
+
+			// Plugin initialized after reveal.js is ready
+			var PluginD = { init: function() {
+				initCounter['PluginD'] += 1;
+			} };
+
+			var PluginE = {};
+
+			Reveal.registerPlugin( 'PluginA', PluginA );
+			Reveal.registerPlugin( 'PluginB', PluginB );
+			Reveal.registerPlugin( 'PluginC', PluginC );
+
+			Reveal.initialize();
+
+			QUnit.test( 'Can initialize synchronously', function( assert ) {
+				assert.strictEqual( initCounter['PluginB'], 1 );
+
+				Reveal.registerPlugin( 'PluginB', PluginB );
+
+				assert.strictEqual( initCounter['PluginB'], 1, 'prevents duplicate registration' );
+			});
+
+			QUnit.test( 'Can initialize asynchronously', function( assert ) {
+				assert.expect( 3 );
+				var done = assert.async( 2 );
+
+				assert.strictEqual( initCounter['PluginC'], 0, 'async plugin not immediately initialized' );
+
+				Reveal.addEventListener( 'ready', function() {
+					assert.strictEqual( initCounter['PluginC'], 1, 'finsihed initializing when reveal.js dispatches "ready"' );
+					done();
+
+					Reveal.registerPlugin( 'PluginD', PluginD );
+					assert.strictEqual( initCounter['PluginD'], 1, 'plugin registered after reveal.js is ready still initiailizes' );
+					done();
+				});
+			} );
+
+			QUnit.test( 'Can check if plugin is registered', function( assert ) {
+				assert.strictEqual( Reveal.hasPlugin( 'PluginA' ), true );
+				assert.strictEqual( Reveal.hasPlugin( 'PluginE' ), false );
+				Reveal.registerPlugin( 'PluginE', PluginE );
+				assert.strictEqual( Reveal.hasPlugin( 'PluginE' ), true );
+			} );
+
+			QUnit.test( 'Can retrieve plugin instance', function( assert ) {
+				assert.strictEqual( Reveal.getPlugin( 'PluginB' ), PluginB );
+			} );
+		</script>
+
+	</body>
+</html>

test/test-state.html

@@ -0,0 +1,139 @@
+<!doctype html>
+<html lang="en">
+
+	<head>
+		<meta charset="utf-8">
+
+		<title>reveal.js - Test State</title>
+
+		<link rel="stylesheet" href="../css/reveal.css">
+		<link rel="stylesheet" href="qunit-2.5.0.css">
+	</head>
+
+	<body style="overflow: auto;">
+
+		<div id="qunit"></div>
+		<div id="qunit-fixture"></div>
+
+		<div class="reveal" style="display: none;">
+
+			<div class="slides">
+
+				<section>No state</section>
+				<section id="slide2" data-state="state1">State 1</section>
+				<section data-state="state1">State 1</section>
+				<section data-state="state2">State 2</section>
+				<section>
+					<section>No state</section>
+					<section data-state="state1">State 1</section>
+					<section data-state="state3">State 3</section>
+					<section>No state</section>
+				</section>
+				<section>No state</section>
+
+			</div>
+
+		</div>
+
+		<script src="../js/reveal.js"></script>
+		<script src="qunit-2.5.0.js"></script>
+
+		<script>
+
+
+			Reveal.addEventListener( 'ready', function() {
+
+				QUnit.module( 'State' );
+
+				QUnit.test( 'Fire events when changing slide', function( assert ) {
+					assert.expect( 2 );
+					var state1 = assert.async();
+					var state2 = assert.async();
+
+					var _onState1 = function( event ) {
+						assert.ok( true, 'state1 fired' );
+						state1();
+					}
+
+					var _onState2 = function( event ) {
+						assert.ok( true, 'state2 fired' );
+						state2();
+					}
+
+					Reveal.addEventListener( 'state1', _onState1 );
+					Reveal.addEventListener( 'state2', _onState2 );
+
+					Reveal.slide( 1 );
+					Reveal.slide( 3 );
+
+					Reveal.removeEventListener( 'state1', _onState1 );
+					Reveal.removeEventListener( 'state2', _onState2 );
+				});
+
+				QUnit.test( 'Fire state events for vertical slides', function( assert ) {
+					assert.expect( 2 );
+					var done = assert.async( 2 );
+
+					var _onState1 = function( event ) {
+						assert.ok( true, 'state1 fired' );
+						done();
+					}
+
+					var _onState3 = function( event ) {
+						assert.ok( true, 'state3 fired' );
+						done();
+					}
+
+					Reveal.addEventListener( 'state1', _onState1 );
+					Reveal.addEventListener( 'state3', _onState3 );
+
+					Reveal.slide( 0 );
+					Reveal.slide( 4, 1 );
+					Reveal.slide( 4, 2 );
+
+					Reveal.removeEventListener( 'state1', _onState1 );
+					Reveal.removeEventListener( 'state3', _onState3 );
+				});
+
+				QUnit.test( 'No events if state remains unchanged', function( assert ) {
+					var stateChanges = 0;
+
+					var _onEvent = function( event ) {
+						stateChanges += 1;
+					}
+
+					Reveal.addEventListener( 'state1', _onEvent );
+
+					Reveal.slide( 0 );      // no state
+					Reveal.slide( 1 );      // state1
+					Reveal.slide( 2 );      // state1
+					Reveal.prev();          // state1
+					Reveal.next();          // state1
+					Reveal.slide( 4, 1 );   // state1
+					Reveal.slide( 0 );      // no state
+
+					Reveal.removeEventListener( 'state1', _onEvent );
+
+					assert.strictEqual( stateChanges, 1, 'no event was fired when going to slide with same state' );
+				});
+
+				QUnit.test( 'Event order', function( assert ) {
+					var _onEvent = function( event ) {
+						assert.ok( Reveal.getCurrentSlide() == document.querySelector( '#slide2' ), 'correct current slide immediately after state event' );
+					}
+
+					Reveal.addEventListener( 'state1', _onEvent );
+
+					Reveal.slide( 0 );
+					Reveal.slide( 1 );
+
+					Reveal.removeEventListener( 'state1', _onEvent );
+				});
+
+			} );
+
+			Reveal.initialize();
+		</script>
+
+	</body>
+</html>

test/test.html

@@ -7,7 +7,7 @@
 		<title>reveal.js - Tests</title>
 
 		<link rel="stylesheet" href="../css/reveal.css">
-		<link rel="stylesheet" href="qunit-1.12.0.css">
+		<link rel="stylesheet" href="qunit-2.5.0.css">
 	</head>
 
 	<body style="overflow: auto;">
@@ -21,13 +21,14 @@
 
 				<section data-background-image="examples/assets/image1.png">
 					<h1>1</h1>
-					<img data-src="fake-url.png">
-					<video data-src="fake-url.mp4"></video>
-					<audio data-src="fake-url.mp3"></audio>
+					<img data-src="">
+					<video data-src=""></video>
+					<audio data-src=""></audio>
+					<aside class="notes">speaker notes 1</aside>
 				</section>
 
 				<section>
-					<section data-background="examples/assets/image2.png">
+					<section data-background="examples/assets/image2.png" data-notes="speaker notes 2">
 						<h1>2.1</h1>
 					</section>
 					<section>
@@ -75,9 +76,8 @@
 
 		</div>
 
-		<script src="../lib/js/head.min.js"></script>
 		<script src="../js/reveal.js"></script>
-		<script src="qunit-1.12.0.js"></script>
+		<script src="qunit-2.5.0.js"></script>
 
 		<script src="test.js"></script>
 

test/test.js

@@ -1,4 +1,3 @@
-
 // These tests expect the DOM to contain a presentation
 // with the following slide structure:
 //
@@ -8,7 +7,6 @@
 // 3 - Two fragments with same data-fragment-index
 // 4
 
-
 Reveal.addEventListener( 'ready', function() {
 
 	// ---------------------------------------------------------------
@@ -16,16 +14,16 @@ Reveal.addEventListener( 'ready', function() {
 
 	QUnit.module( 'DOM' );
 
-	test( 'Initial slides classes', function() {
+	QUnit.test( 'Initial slides classes', function( assert ) {
 		var horizontalSlides = document.querySelectorAll( '.reveal .slides>section' )
 
-		strictEqual( document.querySelectorAll( '.reveal .slides section.past' ).length, 0, 'no .past slides' );
-		strictEqual( document.querySelectorAll( '.reveal .slides section.present' ).length, 1, 'one .present slide' );
-		strictEqual( document.querySelectorAll( '.reveal .slides>section.future' ).length, horizontalSlides.length - 1, 'remaining horizontal slides are .future' );
+		assert.strictEqual( document.querySelectorAll( '.reveal .slides section.past' ).length, 0, 'no .past slides' );
+		assert.strictEqual( document.querySelectorAll( '.reveal .slides section.present' ).length, 1, 'one .present slide' );
+		assert.strictEqual( document.querySelectorAll( '.reveal .slides>section.future' ).length, horizontalSlides.length - 1, 'remaining horizontal slides are .future' );
 
-		strictEqual( document.querySelectorAll( '.reveal .slides section.stack' ).length, 2, 'two .stacks' );
+		assert.strictEqual( document.querySelectorAll( '.reveal .slides section.stack' ).length, 2, 'two .stacks' );
 
-		ok( document.querySelectorAll( '.reveal .slides section.stack' )[0].querySelectorAll( '.future' ).length > 0, 'vertical slides are given .future' );
+		assert.ok( document.querySelectorAll( '.reveal .slides section.stack' )[0].querySelectorAll( '.future' ).length > 0, 'vertical slides are given .future' );
 	});
 
 	// ---------------------------------------------------------------
@@ -33,195 +31,203 @@ Reveal.addEventListener( 'ready', function() {
 
 	QUnit.module( 'API' );
 
-	test( 'Reveal.isReady', function() {
-		strictEqual( Reveal.isReady(), true, 'returns true' );
+	QUnit.test( 'Reveal.isReady', function( assert ) {
+		assert.strictEqual( Reveal.isReady(), true, 'returns true' );
 	});
 
-	test( 'Reveal.isOverview', function() {
-		strictEqual( Reveal.isOverview(), false, 'false by default' );
+	QUnit.test( 'Reveal.isOverview', function( assert ) {
+		assert.strictEqual( Reveal.isOverview(), false, 'false by default' );
 
 		Reveal.toggleOverview();
-		strictEqual( Reveal.isOverview(), true, 'true after toggling on' );
+		assert.strictEqual( Reveal.isOverview(), true, 'true after toggling on' );
 
 		Reveal.toggleOverview();
-		strictEqual( Reveal.isOverview(), false, 'false after toggling off' );
+		assert.strictEqual( Reveal.isOverview(), false, 'false after toggling off' );
 	});
 
-	test( 'Reveal.isPaused', function() {
-		strictEqual( Reveal.isPaused(), false, 'false by default' );
+	QUnit.test( 'Reveal.isPaused', function( assert ) {
+		assert.strictEqual( Reveal.isPaused(), false, 'false by default' );
 
 		Reveal.togglePause();
-		strictEqual( Reveal.isPaused(), true, 'true after pausing' );
+		assert.strictEqual( Reveal.isPaused(), true, 'true after pausing' );
 
 		Reveal.togglePause();
-		strictEqual( Reveal.isPaused(), false, 'false after resuming' );
+		assert.strictEqual( Reveal.isPaused(), false, 'false after resuming' );
 	});
 
-	test( 'Reveal.isFirstSlide', function() {
+	QUnit.test( 'Reveal.isFirstSlide', function( assert ) {
 		Reveal.slide( 0, 0 );
-		strictEqual( Reveal.isFirstSlide(), true, 'true after Reveal.slide( 0, 0 )' );
+		assert.strictEqual( Reveal.isFirstSlide(), true, 'true after Reveal.slide( 0, 0 )' );
 
 		Reveal.slide( 1, 0 );
-		strictEqual( Reveal.isFirstSlide(), false, 'false after Reveal.slide( 1, 0 )' );
+		assert.strictEqual( Reveal.isFirstSlide(), false, 'false after Reveal.slide( 1, 0 )' );
 
 		Reveal.slide( 0, 0 );
-		strictEqual( Reveal.isFirstSlide(), true, 'true after Reveal.slide( 0, 0 )' );
+		assert.strictEqual( Reveal.isFirstSlide(), true, 'true after Reveal.slide( 0, 0 )' );
 	});
 
-	test( 'Reveal.isFirstSlide after vertical slide', function() {
+	QUnit.test( 'Reveal.isFirstSlide after vertical slide', function( assert ) {
 		Reveal.slide( 1, 1 );
 		Reveal.slide( 0, 0 );
-		strictEqual( Reveal.isFirstSlide(), true, 'true after Reveal.slide( 1, 1 ) and then Reveal.slide( 0, 0 )' );
+		assert.strictEqual( Reveal.isFirstSlide(), true, 'true after Reveal.slide( 1, 1 ) and then Reveal.slide( 0, 0 )' );
 	});
 
-	test( 'Reveal.isLastSlide', function() {
+	QUnit.test( 'Reveal.isLastSlide', function( assert ) {
 		Reveal.slide( 0, 0 );
-		strictEqual( Reveal.isLastSlide(), false, 'false after Reveal.slide( 0, 0 )' );
+		assert.strictEqual( Reveal.isLastSlide(), false, 'false after Reveal.slide( 0, 0 )' );
 
 		var lastSlideIndex = document.querySelectorAll( '.reveal .slides>section' ).length - 1;
 
 		Reveal.slide( lastSlideIndex, 0 );
-		strictEqual( Reveal.isLastSlide(), true, 'true after Reveal.slide( '+ lastSlideIndex +', 0 )' );
+		assert.strictEqual( Reveal.isLastSlide(), true, 'true after Reveal.slide( '+ lastSlideIndex +', 0 )' );
 
 		Reveal.slide( 0, 0 );
-		strictEqual( Reveal.isLastSlide(), false, 'false after Reveal.slide( 0, 0 )' );
+		assert.strictEqual( Reveal.isLastSlide(), false, 'false after Reveal.slide( 0, 0 )' );
 	});
 
-	test( 'Reveal.isLastSlide after vertical slide', function() {
+	QUnit.test( 'Reveal.isLastSlide after vertical slide', function( assert ) {
 		var lastSlideIndex = document.querySelectorAll( '.reveal .slides>section' ).length - 1;
-		
+
 		Reveal.slide( 1, 1 );
 		Reveal.slide( lastSlideIndex );
-		strictEqual( Reveal.isLastSlide(), true, 'true after Reveal.slide( 1, 1 ) and then Reveal.slide( '+ lastSlideIndex +', 0 )' );
+		assert.strictEqual( Reveal.isLastSlide(), true, 'true after Reveal.slide( 1, 1 ) and then Reveal.slide( '+ lastSlideIndex +', 0 )' );
 	});
 
-	test( 'Reveal.getTotalSlides', function() {
-		strictEqual( Reveal.getTotalSlides(), 8, 'eight slides in total' );
+	QUnit.test( 'Reveal.getTotalSlides', function( assert ) {
+		assert.strictEqual( Reveal.getTotalSlides(), 8, 'eight slides in total' );
 	});
 
-	test( 'Reveal.getIndices', function() {
+	QUnit.test( 'Reveal.getIndices', function( assert ) {
 		var indices = Reveal.getIndices();
 
-		ok( indices.hasOwnProperty( 'h' ), 'h exists' );
-		ok( indices.hasOwnProperty( 'v' ), 'v exists' );
-		ok( indices.hasOwnProperty( 'f' ), 'f exists' );
+		assert.ok( indices.hasOwnProperty( 'h' ), 'h exists' );
+		assert.ok( indices.hasOwnProperty( 'v' ), 'v exists' );
+		assert.ok( indices.hasOwnProperty( 'f' ), 'f exists' );
 
 		Reveal.slide( 1, 0 );
-		strictEqual( Reveal.getIndices().h, 1, 'h 1' );
-		strictEqual( Reveal.getIndices().v, 0, 'v 0' );
+		assert.strictEqual( Reveal.getIndices().h, 1, 'h 1' );
+		assert.strictEqual( Reveal.getIndices().v, 0, 'v 0' );
 
 		Reveal.slide( 1, 2 );
-		strictEqual( Reveal.getIndices().h, 1, 'h 1' );
-		strictEqual( Reveal.getIndices().v, 2, 'v 2' );
+		assert.strictEqual( Reveal.getIndices().h, 1, 'h 1' );
+		assert.strictEqual( Reveal.getIndices().v, 2, 'v 2' );
 
 		Reveal.slide( 0, 0 );
-		strictEqual( Reveal.getIndices().h, 0, 'h 0' );
-		strictEqual( Reveal.getIndices().v, 0, 'v 0' );
+		assert.strictEqual( Reveal.getIndices().h, 0, 'h 0' );
+		assert.strictEqual( Reveal.getIndices().v, 0, 'v 0' );
 	});
 
-	test( 'Reveal.getSlide', function() {
-		equal( Reveal.getSlide( 0 ), document.querySelector( '.reveal .slides>section:first-child' ), 'gets correct first slide' );
-		equal( Reveal.getSlide( 1 ), document.querySelector( '.reveal .slides>section:nth-child(2)' ), 'no v index returns stack' );
-		equal( Reveal.getSlide( 1, 0 ), document.querySelector( '.reveal .slides>section:nth-child(2)>section:nth-child(1)' ), 'v index 0 returns first vertical child' );
-		equal( Reveal.getSlide( 1, 1 ), document.querySelector( '.reveal .slides>section:nth-child(2)>section:nth-child(2)' ), 'v index 1 returns second vertical child' );
+	QUnit.test( 'Reveal.getSlide', function( assert ) {
+		assert.equal( Reveal.getSlide( 0 ), document.querySelector( '.reveal .slides>section:first-child' ), 'gets correct first slide' );
+		assert.equal( Reveal.getSlide( 1 ), document.querySelector( '.reveal .slides>section:nth-child(2)' ), 'no v index returns stack' );
+		assert.equal( Reveal.getSlide( 1, 0 ), document.querySelector( '.reveal .slides>section:nth-child(2)>section:nth-child(1)' ), 'v index 0 returns first vertical child' );
+		assert.equal( Reveal.getSlide( 1, 1 ), document.querySelector( '.reveal .slides>section:nth-child(2)>section:nth-child(2)' ), 'v index 1 returns second vertical child' );
 
-		strictEqual( Reveal.getSlide( 100 ), undefined, 'undefined when out of horizontal bounds' );
-		strictEqual( Reveal.getSlide( 1, 100 ), undefined, 'undefined when out of vertical bounds' );
+		assert.strictEqual( Reveal.getSlide( 100 ), undefined, 'undefined when out of horizontal bounds' );
+		assert.strictEqual( Reveal.getSlide( 1, 100 ), undefined, 'undefined when out of vertical bounds' );
 	});
 
-	test( 'Reveal.getSlideBackground', function() {
-		equal( Reveal.getSlideBackground( 0 ), document.querySelector( '.reveal .backgrounds>.slide-background:first-child' ), 'gets correct first background' );
-		equal( Reveal.getSlideBackground( 1 ), document.querySelector( '.reveal .backgrounds>.slide-background:nth-child(2)' ), 'no v index returns stack' );
-		equal( Reveal.getSlideBackground( 1, 0 ), document.querySelector( '.reveal .backgrounds>.slide-background:nth-child(2) .slide-background:nth-child(1)' ), 'v index 0 returns first vertical child' );
-		equal( Reveal.getSlideBackground( 1, 1 ), document.querySelector( '.reveal .backgrounds>.slide-background:nth-child(2) .slide-background:nth-child(2)' ), 'v index 1 returns second vertical child' );
+	QUnit.test( 'Reveal.getSlideBackground', function( assert ) {
+		assert.equal( Reveal.getSlideBackground( 0 ), document.querySelector( '.reveal .backgrounds>.slide-background:first-child' ), 'gets correct first background' );
+		assert.equal( Reveal.getSlideBackground( 1 ), document.querySelector( '.reveal .backgrounds>.slide-background:nth-child(2)' ), 'no v index returns stack' );
+		assert.equal( Reveal.getSlideBackground( 1, 0 ), document.querySelector( '.reveal .backgrounds>.slide-background:nth-child(2) .slide-background:nth-child(2)' ), 'v index 0 returns first vertical child' );
+		assert.equal( Reveal.getSlideBackground( 1, 1 ), document.querySelector( '.reveal .backgrounds>.slide-background:nth-child(2) .slide-background:nth-child(3)' ), 'v index 1 returns second vertical child' );
 
-		strictEqual( Reveal.getSlideBackground( 100 ), undefined, 'undefined when out of horizontal bounds' );
-		strictEqual( Reveal.getSlideBackground( 1, 100 ), undefined, 'undefined when out of vertical bounds' );
+		assert.strictEqual( Reveal.getSlideBackground( 100 ), undefined, 'undefined when out of horizontal bounds' );
+		assert.strictEqual( Reveal.getSlideBackground( 1, 100 ), undefined, 'undefined when out of vertical bounds' );
 	});
 
-	test( 'Reveal.getPreviousSlide/getCurrentSlide', function() {
+	QUnit.test( 'Reveal.getSlideNotes', function( assert ) {
+		Reveal.slide( 0, 0 );
+		assert.ok( Reveal.getSlideNotes() === 'speaker notes 1', 'works with <aside class="notes">' );
+
+		Reveal.slide( 1, 0 );
+		assert.ok( Reveal.getSlideNotes() === 'speaker notes 2', 'works with <section data-notes="">' );
+	});
+
+	QUnit.test( 'Reveal.getPreviousSlide/getCurrentSlide', function( assert ) {
 		Reveal.slide( 0, 0 );
 		Reveal.slide( 1, 0 );
 
 		var firstSlide = document.querySelector( '.reveal .slides>section:first-child' );
 		var secondSlide = document.querySelector( '.reveal .slides>section:nth-child(2)>section' );
 
-		equal( Reveal.getPreviousSlide(), firstSlide, 'previous is slide #0' );
-		equal( Reveal.getCurrentSlide(), secondSlide, 'current is slide #1' );
+		assert.equal( Reveal.getPreviousSlide(), firstSlide, 'previous is slide #0' );
+		assert.equal( Reveal.getCurrentSlide(), secondSlide, 'current is slide #1' );
 	});
 
-	test( 'Reveal.getProgress', function() {
+	QUnit.test( 'Reveal.getProgress', function( assert ) {
 		Reveal.slide( 0, 0 );
-		strictEqual( Reveal.getProgress(), 0, 'progress is 0 on first slide' );
+		assert.strictEqual( Reveal.getProgress(), 0, 'progress is 0 on first slide' );
 
 		var lastSlideIndex = document.querySelectorAll( '.reveal .slides>section' ).length - 1;
 
 		Reveal.slide( lastSlideIndex, 0 );
-		strictEqual( Reveal.getProgress(), 1, 'progress is 1 on last slide' );
+		assert.strictEqual( Reveal.getProgress(), 1, 'progress is 1 on last slide' );
 	});
 
-	test( 'Reveal.getScale', function() {
-		ok( typeof Reveal.getScale() === 'number', 'has scale' );
+	QUnit.test( 'Reveal.getScale', function( assert ) {
+		assert.ok( typeof Reveal.getScale() === 'number', 'has scale' );
 	});
 
-	test( 'Reveal.getConfig', function() {
-		ok( typeof Reveal.getConfig() === 'object', 'has config' );
+	QUnit.test( 'Reveal.getConfig', function( assert ) {
+		assert.ok( typeof Reveal.getConfig() === 'object', 'has config' );
 	});
 
-	test( 'Reveal.configure', function() {
-		strictEqual( Reveal.getConfig().loop, false, '"loop" is false to start with' );
+	QUnit.test( 'Reveal.configure', function( assert ) {
+		assert.strictEqual( Reveal.getConfig().loop, false, '"loop" is false to start with' );
 
 		Reveal.configure({ loop: true });
-		strictEqual( Reveal.getConfig().loop, true, '"loop" has changed to true' );
+		assert.strictEqual( Reveal.getConfig().loop, true, '"loop" has changed to true' );
 
 		Reveal.configure({ loop: false, customTestValue: 1 });
-		strictEqual( Reveal.getConfig().customTestValue, 1, 'supports custom values' );
+		assert.strictEqual( Reveal.getConfig().customTestValue, 1, 'supports custom values' );
 	});
 
-	test( 'Reveal.availableRoutes', function() {
+	QUnit.test( 'Reveal.availableRoutes', function( assert ) {
 		Reveal.slide( 0, 0 );
-		deepEqual( Reveal.availableRoutes(), { left: false, up: false, down: false, right: true }, 'correct for first slide' );
+		assert.deepEqual( Reveal.availableRoutes(), { left: false, up: false, down: false, right: true }, 'correct for first slide' );
 
 		Reveal.slide( 1, 0 );
-		deepEqual( Reveal.availableRoutes(), { left: true, up: false, down: true, right: true }, 'correct for vertical slide' );
+		assert.deepEqual( Reveal.availableRoutes(), { left: true, up: false, down: true, right: true }, 'correct for vertical slide' );
 	});
 
-	test( 'Reveal.next', function() {
+	QUnit.test( 'Reveal.next', function( assert ) {
 		Reveal.slide( 0, 0 );
 
 		// Step through vertical child slides
 		Reveal.next();
-		deepEqual( Reveal.getIndices(), { h: 1, v: 0, f: undefined } );
+		assert.deepEqual( Reveal.getIndices(), { h: 1, v: 0, f: undefined } );
 
 		Reveal.next();
-		deepEqual( Reveal.getIndices(), { h: 1, v: 1, f: undefined } );
+		assert.deepEqual( Reveal.getIndices(), { h: 1, v: 1, f: undefined } );
 
 		Reveal.next();
-		deepEqual( Reveal.getIndices(), { h: 1, v: 2, f: undefined } );
+		assert.deepEqual( Reveal.getIndices(), { h: 1, v: 2, f: undefined } );
 
 		// Step through fragments
 		Reveal.next();
-		deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: -1 } );
+		assert.deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: -1 } );
 
 		Reveal.next();
-		deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 0 } );
+		assert.deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 0 } );
 
 		Reveal.next();
-		deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 1 } );
+		assert.deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 1 } );
 
 		Reveal.next();
-		deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 2 } );
+		assert.deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 2 } );
 	});
 
-	test( 'Reveal.next at end', function() {
+	QUnit.test( 'Reveal.next at end', function( assert ) {
 		Reveal.slide( 3 );
 
 		// We're at the end, this should have no effect
 		Reveal.next();
-		deepEqual( Reveal.getIndices(), { h: 3, v: 0, f: undefined } );
+		assert.deepEqual( Reveal.getIndices(), { h: 3, v: 0, f: undefined } );
 
 		Reveal.next();
-		deepEqual( Reveal.getIndices(), { h: 3, v: 0, f: undefined } );
+		assert.deepEqual( Reveal.getIndices(), { h: 3, v: 0, f: undefined } );
 	});
 
 
@@ -230,121 +236,144 @@ Reveal.addEventListener( 'ready', function() {
 
 	QUnit.module( 'Fragments' );
 
-	test( 'Sliding to fragments', function() {
+	QUnit.test( 'Sliding to fragments', function( assert ) {
 		Reveal.slide( 2, 0, -1 );
-		deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: -1 }, 'Reveal.slide( 2, 0, -1 )' );
+		assert.deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: -1 }, 'Reveal.slide( 2, 0, -1 )' );
 
 		Reveal.slide( 2, 0, 0 );
-		deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 0 }, 'Reveal.slide( 2, 0, 0 )' );
+		assert.deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 0 }, 'Reveal.slide( 2, 0, 0 )' );
 
 		Reveal.slide( 2, 0, 2 );
-		deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 2 }, 'Reveal.slide( 2, 0, 2 )' );
+		assert.deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 2 }, 'Reveal.slide( 2, 0, 2 )' );
 
 		Reveal.slide( 2, 0, 1 );
-		deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 1 }, 'Reveal.slide( 2, 0, 1 )' );
+		assert.deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 1 }, 'Reveal.slide( 2, 0, 1 )' );
 	});
 
-	test( 'Hiding all fragments', function() {
+	QUnit.test( 'data-fragment is set on slide <section>', function( assert ) {
+		Reveal.slide( 2, 0, -1 );
+		assert.deepEqual( Reveal.getCurrentSlide().getAttribute( 'data-fragment' ), '-1' );
+
+		Reveal.slide( 2, 0, 2 );
+		assert.deepEqual( Reveal.getCurrentSlide().getAttribute( 'data-fragment' ), '2' );
+
+		Reveal.slide( 2, 0, 0 );
+		assert.deepEqual( Reveal.getCurrentSlide().getAttribute( 'data-fragment' ), '0' );
+
+		var fragmentSlide = Reveal.getCurrentSlide();
+
+		Reveal.slide( 3, 0 );
+		assert.deepEqual( fragmentSlide.getAttribute( 'data-fragment' ), '0', 'data-fragment persists when jumping to another slide' );
+	});
+
+	QUnit.test( 'Hiding all fragments', function( assert ) {
 		var fragmentSlide = document.querySelector( '#fragment-slides>section:nth-child(1)' );
 
 		Reveal.slide( 2, 0, 0 );
-		strictEqual( fragmentSlide.querySelectorAll( '.fragment.visible' ).length, 1, 'one fragment visible when index is 0' );
+		assert.strictEqual( fragmentSlide.querySelectorAll( '.fragment.visible' ).length, 1, 'one fragment visible when index is 0' );
 
 		Reveal.slide( 2, 0, -1 );
-		strictEqual( fragmentSlide.querySelectorAll( '.fragment.visible' ).length, 0, 'no fragments visible when index is -1' );
+		assert.strictEqual( fragmentSlide.querySelectorAll( '.fragment.visible' ).length, 0, 'no fragments visible when index is -1' );
 	});
 
-	test( 'Current fragment', function() {
+	QUnit.test( 'Current fragment', function( assert ) {
 		var fragmentSlide = document.querySelector( '#fragment-slides>section:nth-child(1)' );
+		var lastFragmentIndex = [].slice.call( fragmentSlide.querySelectorAll( '.fragment' ) ).pop().getAttribute( 'data-fragment-index' );
 
 		Reveal.slide( 2, 0 );
-		strictEqual( fragmentSlide.querySelectorAll( '.fragment.current-fragment' ).length, 0, 'no current fragment at index -1' );
+		assert.strictEqual( fragmentSlide.querySelectorAll( '.fragment.current-fragment' ).length, 0, 'no current fragment at index -1' );
 
 		Reveal.slide( 2, 0, 0 );
-		strictEqual( fragmentSlide.querySelectorAll( '.fragment.current-fragment' ).length, 1, 'one current fragment at index 0' );
+		assert.strictEqual( fragmentSlide.querySelectorAll( '.fragment.current-fragment' ).length, 1, 'one current fragment at index 0' );
 
 		Reveal.slide( 1, 0, 0 );
-		strictEqual( fragmentSlide.querySelectorAll( '.fragment.current-fragment' ).length, 0, 'no current fragment when navigating to previous slide' );
+		assert.strictEqual( fragmentSlide.querySelectorAll( '.fragment.current-fragment' ).length, 0, 'no current fragment when navigating to previous slide' );
 
 		Reveal.slide( 3, 0, 0 );
-		strictEqual( fragmentSlide.querySelectorAll( '.fragment.current-fragment' ).length, 0, 'no current fragment when navigating to next slide' );
+		assert.strictEqual( fragmentSlide.querySelectorAll( '.fragment.current-fragment' ).length, 0, 'no current fragment when navigating to next slide' );
+
+		Reveal.slide( 2, 1, -1 );
+		Reveal.prev();
+		assert.strictEqual( fragmentSlide.querySelector( '.fragment.current-fragment' ).getAttribute( 'data-fragment-index' ), lastFragmentIndex, 'last fragment is current fragment when returning from future slide' );
 	});
 
-	test( 'Stepping through fragments', function() {
+	QUnit.test( 'Stepping through fragments', function( assert ) {
 		Reveal.slide( 2, 0, -1 );
 
 		// forwards:
 
 		Reveal.next();
-		deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 0 }, 'next() goes to next fragment' );
+		assert.deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 0 }, 'next() goes to next fragment' );
 
 		Reveal.right();
-		deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 1 }, 'right() goes to next fragment' );
+		assert.deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 1 }, 'right() goes to next fragment' );
 
 		Reveal.down();
-		deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 2 }, 'down() goes to next fragment' );
+		assert.deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 2 }, 'down() goes to next fragment' );
 
 		Reveal.down(); // moves to f #3
 
 		// backwards:
 
 		Reveal.prev();
-		deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 2 }, 'prev() goes to prev fragment' );
+		assert.deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 2 }, 'prev() goes to prev fragment' );
 
 		Reveal.left();
-		deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 1 }, 'left() goes to prev fragment' );
+		assert.deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 1 }, 'left() goes to prev fragment' );
 
 		Reveal.up();
-		deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 0 }, 'up() goes to prev fragment' );
+		assert.deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 0 }, 'up() goes to prev fragment' );
 	});
 
-	test( 'Stepping past fragments', function() {
+	QUnit.test( 'Stepping past fragments', function( assert ) {
 		var fragmentSlide = document.querySelector( '#fragment-slides>section:nth-child(1)' );
 
 		Reveal.slide( 0, 0, 0 );
-		equal( fragmentSlide.querySelectorAll( '.fragment.visible' ).length, 0, 'no fragments visible when on previous slide' );
+		assert.equal( fragmentSlide.querySelectorAll( '.fragment.visible' ).length, 0, 'no fragments visible when on previous slide' );
 
 		Reveal.slide( 3, 0, 0 );
-		equal( fragmentSlide.querySelectorAll( '.fragment.visible' ).length, 3, 'all fragments visible when on future slide' );
+		assert.equal( fragmentSlide.querySelectorAll( '.fragment.visible' ).length, 3, 'all fragments visible when on future slide' );
 	});
 
-	test( 'Fragment indices', function() {
+	QUnit.test( 'Fragment indices', function( assert ) {
 		var fragmentSlide = document.querySelector( '#fragment-slides>section:nth-child(2)' );
 
 		Reveal.slide( 3, 0, 0 );
-		equal( fragmentSlide.querySelectorAll( '.fragment.visible' ).length, 2, 'both fragments of same index are shown' );
+		assert.equal( fragmentSlide.querySelectorAll( '.fragment.visible' ).length, 2, 'both fragments of same index are shown' );
 
 		// This slide has three fragments, first one is index 0, second and third have index 1
 		Reveal.slide( 2, 2, 0 );
-		equal( Reveal.getIndices().f, 0, 'returns correct index for first fragment' );
+		assert.equal( Reveal.getIndices().f, 0, 'returns correct index for first fragment' );
 
 		Reveal.slide( 2, 2, 1 );
-		equal( Reveal.getIndices().f, 1, 'returns correct index for two fragments with same index' );
+		assert.equal( Reveal.getIndices().f, 1, 'returns correct index for two fragments with same index' );
 	});
 
-	test( 'Index generation', function() {
+	QUnit.test( 'Index generation', function( assert ) {
 		var fragmentSlide = document.querySelector( '#fragment-slides>section:nth-child(1)' );
 
 		// These have no indices defined to start with
-		equal( fragmentSlide.querySelectorAll( '.fragment' )[0].getAttribute( 'data-fragment-index' ), '0' );
-		equal( fragmentSlide.querySelectorAll( '.fragment' )[1].getAttribute( 'data-fragment-index' ), '1' );
-		equal( fragmentSlide.querySelectorAll( '.fragment' )[2].getAttribute( 'data-fragment-index' ), '2' );
+		assert.equal( fragmentSlide.querySelectorAll( '.fragment' )[0].getAttribute( 'data-fragment-index' ), '0' );
+		assert.equal( fragmentSlide.querySelectorAll( '.fragment' )[1].getAttribute( 'data-fragment-index' ), '1' );
+		assert.equal( fragmentSlide.querySelectorAll( '.fragment' )[2].getAttribute( 'data-fragment-index' ), '2' );
 	});
 
-	test( 'Index normalization', function() {
+	QUnit.test( 'Index normalization', function( assert ) {
 		var fragmentSlide = document.querySelector( '#fragment-slides>section:nth-child(3)' );
 
 		// These start out as 1-4-4 and should normalize to 0-1-1
-		equal( fragmentSlide.querySelectorAll( '.fragment' )[0].getAttribute( 'data-fragment-index' ), '0' );
-		equal( fragmentSlide.querySelectorAll( '.fragment' )[1].getAttribute( 'data-fragment-index' ), '1' );
-		equal( fragmentSlide.querySelectorAll( '.fragment' )[2].getAttribute( 'data-fragment-index' ), '1' );
+		assert.equal( fragmentSlide.querySelectorAll( '.fragment' )[0].getAttribute( 'data-fragment-index' ), '0' );
+		assert.equal( fragmentSlide.querySelectorAll( '.fragment' )[1].getAttribute( 'data-fragment-index' ), '1' );
+		assert.equal( fragmentSlide.querySelectorAll( '.fragment' )[2].getAttribute( 'data-fragment-index' ), '1' );
 	});
 
-	asyncTest( 'fragmentshown event', function() {
-		expect( 2 );
+	QUnit.test( 'fragmentshown event', function( assert ) {
+		assert.expect( 2 );
+		var done = assert.async( 2 );
 
 		var _onEvent = function( event ) {
-			ok( true, 'event fired' );
+			assert.ok( true, 'event fired' );
+			done();
 		}
 
 		Reveal.addEventListener( 'fragmentshown', _onEvent );
@@ -356,16 +385,16 @@ Reveal.addEventListener( 'ready', function() {
 		Reveal.next();
 		Reveal.prev(); // shouldn't fire fragmentshown
 
-		start();
-
 		Reveal.removeEventListener( 'fragmentshown', _onEvent );
 	});
 
-	asyncTest( 'fragmenthidden event', function() {
-		expect( 2 );
+	QUnit.test( 'fragmenthidden event', function( assert ) {
+		assert.expect( 2 );
+		var done = assert.async( 2 );
 
 		var _onEvent = function( event ) {
-			ok( true, 'event fired' );
+			assert.ok( true, 'event fired' );
+			done();
 		}
 
 		Reveal.addEventListener( 'fragmenthidden', _onEvent );
@@ -376,8 +405,6 @@ Reveal.addEventListener( 'ready', function() {
 		Reveal.prev();
 		Reveal.next(); // shouldn't fire fragmenthidden
 
-		start();
-
 		Reveal.removeEventListener( 'fragmenthidden', _onEvent );
 	});
 
@@ -387,50 +414,52 @@ Reveal.addEventListener( 'ready', function() {
 
 	QUnit.module( 'Auto Sliding' );
 
-	test( 'Reveal.isAutoSliding', function() {
-		strictEqual( Reveal.isAutoSliding(), false, 'false by default' );
+	QUnit.test( 'Reveal.isAutoSliding', function( assert ) {
+		assert.strictEqual( Reveal.isAutoSliding(), false, 'false by default' );
 
 		Reveal.configure({ autoSlide: 10000 });
-		strictEqual( Reveal.isAutoSliding(), true, 'true after starting' );
+		assert.strictEqual( Reveal.isAutoSliding(), true, 'true after starting' );
 
 		Reveal.configure({ autoSlide: 0 });
-		strictEqual( Reveal.isAutoSliding(), false, 'false after setting to 0' );
+		assert.strictEqual( Reveal.isAutoSliding(), false, 'false after setting to 0' );
 	});
 
-	test( 'Reveal.toggleAutoSlide', function() {
+	QUnit.test( 'Reveal.toggleAutoSlide', function( assert ) {
 		Reveal.configure({ autoSlide: 10000 });
 
 		Reveal.toggleAutoSlide();
-		strictEqual( Reveal.isAutoSliding(), false, 'false after first toggle' );
+		assert.strictEqual( Reveal.isAutoSliding(), false, 'false after first toggle' );
 		Reveal.toggleAutoSlide();
-		strictEqual( Reveal.isAutoSliding(), true, 'true after second toggle' );
+		assert.strictEqual( Reveal.isAutoSliding(), true, 'true after second toggle' );
 
 		Reveal.configure({ autoSlide: 0 });
 	});
 
-	asyncTest( 'autoslidepaused', function() {
-		expect( 1 );
+	QUnit.test( 'autoslidepaused', function( assert ) {
+		assert.expect( 1 );
+		var done = assert.async();
 
 		var _onEvent = function( event ) {
-			ok( true, 'event fired' );
+			assert.ok( true, 'event fired' );
+			done();
 		}
 
 		Reveal.addEventListener( 'autoslidepaused', _onEvent );
 		Reveal.configure({ autoSlide: 10000 });
 		Reveal.toggleAutoSlide();
 
-		start();
-
 		// cleanup
 		Reveal.configure({ autoSlide: 0 });
 		Reveal.removeEventListener( 'autoslidepaused', _onEvent );
 	});
 
-	asyncTest( 'autoslideresumed', function() {
-		expect( 1 );
+	QUnit.test( 'autoslideresumed', function( assert ) {
+		assert.expect( 1 );
+		var done = assert.async();
 
 		var _onEvent = function( event ) {
-			ok( true, 'event fired' );
+			assert.ok( true, 'event fired' );
+			done();
 		}
 
 		Reveal.addEventListener( 'autoslideresumed', _onEvent );
@@ -438,8 +467,6 @@ Reveal.addEventListener( 'ready', function() {
 		Reveal.toggleAutoSlide();
 		Reveal.toggleAutoSlide();
 
-		start();
-
 		// cleanup
 		Reveal.configure({ autoSlide: 0 });
 		Reveal.removeEventListener( 'autoslideresumed', _onEvent );
@@ -451,36 +478,36 @@ Reveal.addEventListener( 'ready', function() {
 
 	QUnit.module( 'Configuration' );
 
-	test( 'Controls', function() {
+	QUnit.test( 'Controls', function( assert ) {
 		var controlsElement = document.querySelector( '.reveal>.controls' );
 
 		Reveal.configure({ controls: false });
-		equal( controlsElement.style.display, 'none', 'controls are hidden' );
+		assert.equal( controlsElement.style.display, 'none', 'controls are hidden' );
 
 		Reveal.configure({ controls: true });
-		equal( controlsElement.style.display, 'block', 'controls are visible' );
+		assert.equal( controlsElement.style.display, 'block', 'controls are visible' );
 	});
 
-	test( 'Progress', function() {
+	QUnit.test( 'Progress', function( assert ) {
 		var progressElement = document.querySelector( '.reveal>.progress' );
 
 		Reveal.configure({ progress: false });
-		equal( progressElement.style.display, 'none', 'progress are hidden' );
+		assert.equal( progressElement.style.display, 'none', 'progress are hidden' );
 
 		Reveal.configure({ progress: true });
-		equal( progressElement.style.display, 'block', 'progress are visible' );
+		assert.equal( progressElement.style.display, 'block', 'progress are visible' );
 	});
 
-	test( 'Loop', function() {
+	QUnit.test( 'Loop', function( assert ) {
 		Reveal.configure({ loop: true });
 
 		Reveal.slide( 0, 0 );
 
 		Reveal.left();
-		notEqual( Reveal.getIndices().h, 0, 'looped from start to end' );
+		assert.notEqual( Reveal.getIndices().h, 0, 'looped from start to end' );
 
 		Reveal.right();
-		equal( Reveal.getIndices().h, 0, 'looped from end to start' );
+		assert.equal( Reveal.getIndices().h, 0, 'looped from end to start' );
 
 		Reveal.configure({ loop: false });
 	});
@@ -491,34 +518,34 @@ Reveal.addEventListener( 'ready', function() {
 
 	QUnit.module( 'Lazy-Loading' );
 
-	test( 'img with data-src', function() {
-		strictEqual( document.querySelectorAll( '.reveal section img[src]' ).length, 1, 'Image source has been set' );
+	QUnit.test( 'img with data-src', function( assert ) {
+		assert.strictEqual( document.querySelectorAll( '.reveal section img[src]' ).length, 1, 'Image source has been set' );
 	});
 
-	test( 'video with data-src', function() {
-		strictEqual( document.querySelectorAll( '.reveal section video[src]' ).length, 1, 'Video source has been set' );
+	QUnit.test( 'video with data-src', function( assert ) {
+		assert.strictEqual( document.querySelectorAll( '.reveal section video[src]' ).length, 1, 'Video source has been set' );
 	});
 
-	test( 'audio with data-src', function() {
-		strictEqual( document.querySelectorAll( '.reveal section audio[src]' ).length, 1, 'Audio source has been set' );
+	QUnit.test( 'audio with data-src', function( assert ) {
+		assert.strictEqual( document.querySelectorAll( '.reveal section audio[src]' ).length, 1, 'Audio source has been set' );
 	});
 
-	test( 'iframe with data-src', function() {
+	QUnit.test( 'iframe with data-src', function( assert ) {
 		Reveal.slide( 0, 0 );
-		strictEqual( document.querySelectorAll( '.reveal section iframe[src]' ).length, 0, 'Iframe source is not set' );
+		assert.strictEqual( document.querySelectorAll( '.reveal section iframe[src]' ).length, 0, 'Iframe source is not set' );
 		Reveal.slide( 2, 1 );
-		strictEqual( document.querySelectorAll( '.reveal section iframe[src]' ).length, 1, 'Iframe source is set' );
+		assert.strictEqual( document.querySelectorAll( '.reveal section iframe[src]' ).length, 1, 'Iframe source is set' );
 		Reveal.slide( 2, 2 );
-		strictEqual( document.querySelectorAll( '.reveal section iframe[src]' ).length, 0, 'Iframe source is not set' );
+		assert.strictEqual( document.querySelectorAll( '.reveal section iframe[src]' ).length, 0, 'Iframe source is not set' );
 	});
 
-	test( 'background images', function() {
+	QUnit.test( 'background images', function( assert ) {
 		var imageSource1 = Reveal.getSlide( 0 ).getAttribute( 'data-background-image' );
 		var imageSource2 = Reveal.getSlide( 1, 0 ).getAttribute( 'data-background' );
 
 		// check that the images are applied to the background elements
-		ok( Reveal.getSlideBackground( 0 ).style.backgroundImage.indexOf( imageSource1 ) !== -1, 'data-background-image worked' );
-		ok( Reveal.getSlideBackground( 1, 0 ).style.backgroundImage.indexOf( imageSource2 ) !== -1, 'data-background worked' );
+		assert.ok( Reveal.getSlideBackground( 0 ).querySelector( '.slide-background-content' ).style.backgroundImage.indexOf( imageSource1 ) !== -1, 'data-background-image worked' );
+		assert.ok( Reveal.getSlideBackground( 1, 0 ).querySelector( '.slide-background-content' ).style.backgroundImage.indexOf( imageSource2 ) !== -1, 'data-background worked' );
 	});
 
 
@@ -527,11 +554,13 @@ Reveal.addEventListener( 'ready', function() {
 
 	QUnit.module( 'Events' );
 
-	asyncTest( 'slidechanged', function() {
-		expect( 3 );
+	QUnit.test( 'slidechanged', function( assert ) {
+		assert.expect( 3 );
+		var done = assert.async( 3 );
 
 		var _onEvent = function( event ) {
-			ok( true, 'event fired' );
+			assert.ok( true, 'event fired' );
+			done();
 		}
 
 		Reveal.addEventListener( 'slidechanged', _onEvent );
@@ -542,17 +571,17 @@ Reveal.addEventListener( 'ready', function() {
 		Reveal.slide( 3, 0 ); // should trigger
 		Reveal.next(); // should do nothing
 
-		start();
-
 		Reveal.removeEventListener( 'slidechanged', _onEvent );
 
 	});
 
-	asyncTest( 'paused', function() {
-		expect( 1 );
+	QUnit.test( 'paused', function( assert ) {
+		assert.expect( 1 );
+		var done = assert.async();
 
 		var _onEvent = function( event ) {
-			ok( true, 'event fired' );
+			assert.ok( true, 'event fired' );
+			done();
 		}
 
 		Reveal.addEventListener( 'paused', _onEvent );
@@ -560,16 +589,16 @@ Reveal.addEventListener( 'ready', function() {
 		Reveal.togglePause();
 		Reveal.togglePause();
 
-		start();
-
 		Reveal.removeEventListener( 'paused', _onEvent );
 	});
 
-	asyncTest( 'resumed', function() {
-		expect( 1 );
+	QUnit.test( 'resumed', function( assert ) {
+		assert.expect( 1 );
+		var done = assert.async();
 
 		var _onEvent = function( event ) {
-			ok( true, 'event fired' );
+			assert.ok( true, 'event fired' );
+			done();
 		}
 
 		Reveal.addEventListener( 'resumed', _onEvent );
@@ -577,13 +606,9 @@ Reveal.addEventListener( 'ready', function() {
 		Reveal.togglePause();
 		Reveal.togglePause();
 
-		start();
-
 		Reveal.removeEventListener( 'resumed', _onEvent );
 	});
 
-
 } );
 
 Reveal.initialize();
-