modularize themes and convert them to sass (closes #191)

.gitignore

@@ -3,3 +3,4 @@
 log/*.log
 tmp/**
 node_modules/
+.sass-cache

css/reveal.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 
-/**
+/*!
  * reveal.js
  * http://lab.hakim.se/reveal-js
  * MIT licensed
@@ -196,7 +196,7 @@ body {
 	display: block;
 	position: relative;
 	width: 90%;
-	margin: 10px auto;
+	margin: 15px auto;
 
 	text-align: left;
 	font-size: 0.55em;
@@ -207,6 +207,9 @@ body {
 
 	box-shadow: 0px 0px 6px rgba(0,0,0,0.3);
 }
+.reveal pre code {
+	padding: 5px;
+}
 
 .reveal code {
 	font-family: monospace;

css/theme/README.md

@@ -0,0 +1,5 @@
+Themes are written using Sass to keep things modular and reduce the need for repeated selectors across files. Find out how to install Sass here http://sass-lang.com/, once Sass is installed run the follwing command to start monitoring the source files for changes.
+
+```
+sass --watch css/theme/source/:css/theme --style expanded
+```

css/theme/beige.css

@@ -1,190 +1,136 @@
-/**
- * A beige theme for reveal.js presentations, similar 
- * to the default theme.
+@import url(http://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
  */
-
-/*********************************************
- * FONTS
- *********************************************/
-
 @font-face {
-	font-family: 'League Gothic';
-	src: url('../../lib/font/league_gothic-webfont.eot');
-	src: url('../../lib/font/league_gothic-webfont.eot?#iefix') format('embedded-opentype'),
-		 url('../../lib/font/league_gothic-webfont.woff') format('woff'),
-		 url('../../lib/font/league_gothic-webfont.ttf') format('truetype'),
-		 url('../../lib/font/league_gothic-webfont.svg#LeagueGothicRegular') format('svg');
-
-	font-weight: normal;
-	font-style: normal;
-}
-
-.reveal {
-	font-family: 'Lato', Times, 'Times New Roman', serif;
-	font-size: 36px;
-	font-weight: 200;
-	letter-spacing: -0.02em;
+  font-family: 'League Gothic';
+  src: url("../../lib/font/league_gothic-webfont.eot");
+  src: url("../../lib/font/league_gothic-webfont.eot?#iefix") format("embedded-opentype"), url("../../lib/font/league_gothic-webfont.woff") format("woff"), url("../../lib/font/league_gothic-webfont.ttf") format("truetype"), url("../../lib/font/league_gothic-webfont.svg#LeagueGothicRegular") format("svg");
+  font-weight: normal;
+  font-style: normal;
 }
 
-.reveal h1, 
-.reveal h2, 
-.reveal h3, 
-.reveal h4, 
-.reveal h5, 
-.reveal h6 {
-	font-family: 'League Gothic', Impact, sans-serif;
-	line-height: 0.9em;
-	letter-spacing: 0.02em;
-	
-	text-transform: uppercase;
-}
-
-
 /*********************************************
  * GLOBAL STYLES
  *********************************************/
-
 body {
-	color: #333;
-
-	background: #f7f3de;
-	background: -moz-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%, rgba(247,242,211,1) 100%);
-	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(247,242,211,1)));
-	background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(247,242,211,1) 100%);
-	background: -o-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(247,242,211,1) 100%);
-	background: -ms-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(247,242,211,1) 100%);
-	background: radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(247,242,211,1) 100%);
+  background: white;
+  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%);
 }
 
-::-moz-selection {
-	background:rgba(79, 64, 28, 0.99);
-	color: white; 
-}
-::-webkit-selection {
-	background:rgba(79, 64, 28, 0.99);
-	color: white; 
+.reveal {
+  font-family: "Lato", Times, "Times New Roman", serif;
+  font-size: 36px;
+  font-weight: 200;
+  letter-spacing: -0.02em;
+  color: #333333;
 }
+
 ::selection {
-	background:rgba(79, 64, 28, 0.99);
-	color: white; 
+  color: white;
+  background: rgba(79, 64, 28, 0.99);
+  text-shadow: none;
 }
 
-
 /*********************************************
  * HEADERS
  *********************************************/
-
-.reveal h1, 
-.reveal h2, 
-.reveal h3, 
-.reveal h4, 
-.reveal h5, 
+.reveal h1,
+.reveal h2,
+.reveal h3,
+.reveal h4,
+.reveal h5,
 .reveal h6 {
-	margin: 0 0 20px 0;
-	color: #333;
+  margin: 0 0 20px 0;
+  color: #333333;
+  font-family: "League Gothic", Impact, sans-serif;
+  line-height: 0.9em;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  text-shadow: none;
 }
 
 .reveal h1 {
-	text-shadow: 	0 1px 0 #ccc,
-					0 2px 0 #c9c9c9,
-					0 3px 0 #bbb,
-					0 4px 0 #b9b9b9,
-					0 5px 0 #aaa,
-					0 6px 1px rgba(0,0,0,.1),
-					0 0 5px rgba(0,0,0,.1),
-					0 1px 3px rgba(0,0,0,.3),
-					0 3px 5px rgba(0,0,0,.2),
-					0 5px 10px rgba(0,0,0,.25),
-					0 20px 20px rgba(0,0,0,.15);
+  text-shadow: 0 1px 0 #cccccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbbbbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaaaaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 20px 20px rgba(0, 0, 0, 0.15);
 }
 
-
 /*********************************************
  * LINKS
  *********************************************/
-
 .reveal a:not(.image) {
-	color: #8b743d;
-	text-decoration: none;
+  color: #8b743d;
+  text-decoration: none;
+  -webkit-transition: color .15s ease;
+  -moz-transition: color .15s ease;
+  -ms-transition: color .15s ease;
+  -o-transition: color .15s ease;
+  transition: color .15s ease;
+}
 
-	-webkit-transition: color .15s ease;
-	   -moz-transition: color .15s ease;
-	    -ms-transition: color .15s ease;
-	     -o-transition: color .15s ease;
-	        transition: color .15s ease;
+.reveal a:not(.image):hover {
+  color: #c0a86e;
+  text-shadow: none;
+  border: none;
+  border-radius: 2px;
 }
-	.reveal a:not(.image):hover {
-		text-shadow: none;
-		border: none;
-		border-radius: 2px;
-	}
 
 .reveal .roll span:after {
-	color: #fff;
-	background: #8b743d;
+  color: #fff;
+  background: #564826;
 }
 
-
 /*********************************************
  * IMAGES
  *********************************************/
-
 .reveal section img {
-	margin: 30px 0 0 0;
-	background: rgba(255,255,255,0.12);
-	border: 4px solid #eee;
-	
-	-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
-	   -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
-	        box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
-	
-	-webkit-transition: all .2s linear;
-	   -moz-transition: all .2s linear;
-	    -ms-transition: all .2s linear;
-	     -o-transition: all .2s linear;
-	        transition: all .2s linear;
+  margin: 15px;
+  background: rgba(255, 255, 255, 0.12);
+  border: 4px solid #333333;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
+  -webkit-transition: all .2s linear;
+  -moz-transition: all .2s linear;
+  -ms-transition: all .2s linear;
+  -o-transition: all .2s linear;
+  transition: all .2s linear;
 }
 
-	.reveal a:hover img {
-		background: rgba(255,255,255,0.2);
-		border-color: #8b743d;
-		
-		-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
-		   -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
-		        box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
-	}
-
+.reveal a:hover img {
+  background: rgba(255, 255, 255, 0.2);
+  border-color: #8b743d;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
+}
 
 /*********************************************
  * NAVIGATION CONTROLS
  *********************************************/
-
 .reveal .controls a {
-	color: #fff;
+  color: #333333;
 }
-	.reveal .controls a.enabled {
-		color: #8b743d;
-		text-shadow: 0px 0px 2px hsla(185, 45%, 70%, 0.3);
-	}
 
+.reveal .controls a.enabled {
+  color: #c0a86e;
+  text-shadow: 0px 0px 2px rgba(144, 207, 213, 0.3);
+}
 
 /*********************************************
  * PROGRESS BAR
  *********************************************/
-
 .reveal .progress {
-	background: rgba(0,0,0,0.2);
+  background: rgba(0, 0, 0, 0.2);
 }
-	.reveal .progress span {
-		background: #8b743d;
-
-		-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);
-		    -ms-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-		     -o-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);
-	}
-
 
+.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);
+  -ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
+  -o-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
+  transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
+}

css/theme/serif.css

@@ -1,170 +1,123 @@
-/**
+/*
  * A simple theme for reveal.js presentations, similar 
- * to the default theme. The accent color is darkblue; 
- * do a find-replace to change it.
+ * to the default theme. The accent color is darkblue.
  * 
  * This theme is Copyright (C) 2012 Owen Versteeg, https://github.com/StereotypicalApps. It is MIT licensed.
  * reveal.js is Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se; so is the theme - beige.css - that this is based off of.
  */
-
-/*********************************************
- * FONTS
- *********************************************/
-
-.reveal {
-	font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif;
-	font-size: 36px;
-	font-weight: 200;
-	letter-spacing: -0.02em;
-}
-
-.reveal h1, 
-.reveal h2, 
-.reveal h3, 
-.reveal h4, 
-.reveal h5, 
-.reveal h6 {
-	font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif;
-	line-height: 0.9em;	
-}
-
-
 /*********************************************
  * GLOBAL STYLES
  *********************************************/
-
 body {
-	color: black !important;
-
-	background: #F0F1EB;
+  background: #f0f1eb;
 }
 
-::-moz-selection {
-  background: #26351C;
-  color: rgba(255,255,255, 0.8);
-}
-::-webkit-selection {
-  background: #26351C;
-  color: rgba(255,255,255, 0.8);
+.reveal {
+  font-family: "Palatino Linotype", "Book Antiqua", Palatino, FreeSerif, serif;
+  font-size: 36px;
+  font-weight: 200;
+  letter-spacing: -0.02em;
+  color: black;
 }
+
 ::selection {
-  background: #26351C;
-  color: rgba(255,255,255, 0.8);
+  color: white;
+  background: #26351c;
+  text-shadow: none;
 }
 
 /*********************************************
  * HEADERS
  *********************************************/
-
-.reveal h1, 
-.reveal h2, 
-.reveal h3, 
-.reveal h4, 
-.reveal h5, 
+.reveal h1,
+.reveal h2,
+.reveal h3,
+.reveal h4,
+.reveal h5,
 .reveal h6 {
-	margin: 0 0 40px 0;
-	color: #383D3D;
+  margin: 0 0 20px 0;
+  color: #383d3d;
+  font-family: "Palatino Linotype", "Book Antiqua", Palatino, FreeSerif, serif;
+  line-height: 0.9em;
+  letter-spacing: 0.02em;
+  text-transform: none;
+  text-shadow: none;
+}
+
+.reveal h1 {
+  text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);
 }
 
 /*********************************************
  * LINKS
  *********************************************/
-
 .reveal a:not(.image) {
-	color: #51483D;
-	text-decoration: none;
-  font-weight: bold;
-  line-height: 1.4em;
-	-webkit-transition: color .15s ease;
-	   -moz-transition: color .15s ease;
-	    -ms-transition: color .15s ease;
-	     -o-transition: color .15s ease;
-	        transition: color .15s ease;
+  color: #51483d;
+  text-decoration: none;
+  -webkit-transition: color .15s ease;
+  -moz-transition: color .15s ease;
+  -ms-transition: color .15s ease;
+  -o-transition: color .15s ease;
+  transition: color .15s ease;
 }
-	.reveal a:not(.image):hover {
-		text-shadow: none;
-		border: none;
-		border-radius: 2px;
-	}
 
-.reveal .roll span:after {
-	color: #fff;
-	background: #51483D;
+.reveal a:not(.image):hover {
+  color: #8b7c69;
+  text-shadow: none;
+  border: none;
+  border-radius: 2px;
 }
 
-/*********************************************
- * MISC
- *********************************************/
-
-.reveal p {
-  line-height: 1.4em;
-  font-size: 1.15em;
-  color: #111;
-}
-
-.reveal .subtitle {
-  font-style: italic;
+.reveal .roll span:after {
+  color: #fff;
+  background: #25211c;
 }
 
 /*********************************************
  * IMAGES
  *********************************************/
-
 .reveal section img {
-	margin: 30px 0 0 0;
-	background: rgba(255,255,255,0.12);
-	border: 4px solid #eee;
-	
-	-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
-	   -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
-	        box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
-	
-	-webkit-transition: all .2s linear;
-	   -moz-transition: all .2s linear;
-	    -ms-transition: all .2s linear;
-	     -o-transition: all .2s linear;
-	        transition: all .2s linear;
+  margin: 15px;
+  background: rgba(255, 255, 255, 0.12);
+  border: 4px solid black;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
+  -webkit-transition: all .2s linear;
+  -moz-transition: all .2s linear;
+  -ms-transition: all .2s linear;
+  -o-transition: all .2s linear;
+  transition: all .2s linear;
 }
 
-	.reveal a:hover img {
-		background: rgba(255,255,255,0.2);
-		border-color: darkblue;
-		
-		-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
-		   -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
-		        box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
-	}
-
+.reveal a:hover img {
+  background: rgba(255, 255, 255, 0.2);
+  border-color: #51483d;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
+}
 
 /*********************************************
  * NAVIGATION CONTROLS
  *********************************************/
-
 .reveal .controls a {
-	color: black;
+  color: black;
 }
-	.reveal .controls a.enabled {
-		color: #26351C;
-		opacity: 1;
-		text-shadow: 0px 0px 2px hsla(185, 45%, 70%, 0.3);
-	}
 
+.reveal .controls a.enabled {
+  color: #8b7c69;
+  text-shadow: 0px 0px 2px rgba(144, 207, 213, 0.3);
+}
 
 /*********************************************
  * PROGRESS BAR
  *********************************************/
-
 .reveal .progress {
-	background: rgba(0,0,0,0.2);
+  background: rgba(0, 0, 0, 0.2);
 }
-	.reveal .progress span {
-		background: #26351C;
-
-		-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);
-		    -ms-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-		     -o-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);
-	}
-
 
+.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);
+  -ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
+  -o-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
+  transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
+}

css/theme/simple.css

@@ -1,163 +1,125 @@
-/**
+@import url(http://fonts.googleapis.com/css?family=News+Cycle:400,700);
+@import url(http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
+/*
  * A simple theme for reveal.js presentations, similar 
- * to the default theme. The accent color is darkblue; 
- * do a find-replace to change it.
+ * to the default theme. The accent color is darkblue.
  * 
  * This theme is Copyright (C) 2012 Owen Versteeg, https://github.com/StereotypicalApps. It is MIT licensed.
- * reveal.js is Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se; so is the theme - beige.css - that this is based off of.
+ * reveal.js is Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
  */
-
-/*********************************************
- * FONTS
- *********************************************/
-
-@import url(http://fonts.googleapis.com/css?family=News+Cycle:400,700);
-
-.reveal {
-	font-family: 'Lato', Times, 'Times New Roman', serif;
-	font-size: 36px;
-	font-weight: 200;
-	letter-spacing: -0.02em;
-}
-
-.reveal h1, 
-.reveal h2, 
-.reveal h3, 
-.reveal h4, 
-.reveal h5, 
-.reveal h6 {
-	margin: 0 0 20px 0;
-	color: black;
-	font-family: 'News Cycle', Impact, sans-serif;
-	line-height: 0.9em;
-	
-	text-transform: uppercase;
-}
-
-
 /*********************************************
  * GLOBAL STYLES
  *********************************************/
-
 body {
-	color: black !important;
-
-	background: white;
+  background: white;
 }
 
-::-moz-selection {
-    background:rgba(0, 0, 0, 0.99);
-	color: white; 
-}
-::-webkit-selection {
-    background:rgba(0, 0, 0, 0.99);
-	color: white; 
+.reveal {
+  font-family: "Lato", Times, "Times New Roman", serif;
+  font-size: 36px;
+  font-weight: 200;
+  letter-spacing: -0.02em;
+  color: black;
 }
+
 ::selection {
-    background:rgba(0, 0, 0, 0.99);
-	color: white; 
+  color: white;
+  background: rgba(0, 0, 0, 0.99);
+  text-shadow: none;
 }
 
 /*********************************************
  * HEADERS
  *********************************************/
-
-.reveal h1, 
-.reveal h2, 
-.reveal h3, 
-.reveal h4, 
-.reveal h5, 
+.reveal h1,
+.reveal h2,
+.reveal h3,
+.reveal h4,
+.reveal h5,
 .reveal h6 {
-	margin: 0 0 20px 0;
-	color: black;
+  margin: 0 0 20px 0;
+  color: black;
+  font-family: "News Cycle", Impact, sans-serif;
+  line-height: 0.9em;
+  letter-spacing: 0.02em;
+  text-transform: none;
+  text-shadow: none;
 }
 
+.reveal h1 {
+  text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);
+}
 
 /*********************************************
  * LINKS
  *********************************************/
-
 .reveal a:not(.image) {
-	color: darkblue;
-	text-decoration: none;
+  color: darkblue;
+  text-decoration: none;
+  -webkit-transition: color .15s ease;
+  -moz-transition: color .15s ease;
+  -ms-transition: color .15s ease;
+  -o-transition: color .15s ease;
+  transition: color .15s ease;
+}
 
-	-webkit-transition: color .15s ease;
-	   -moz-transition: color .15s ease;
-	    -ms-transition: color .15s ease;
-	     -o-transition: color .15s ease;
-	        transition: color .15s ease;
+.reveal a:not(.image):hover {
+  color: #0000f1;
+  text-shadow: none;
+  border: none;
+  border-radius: 2px;
 }
-	.reveal a:not(.image):hover {
-		text-shadow: none;
-		border: none;
-		border-radius: 2px;
-	}
 
 .reveal .roll span:after {
-	color: #fff;
-	background: darkblue;
+  color: #fff;
+  background: #00003f;
 }
 
-
 /*********************************************
  * IMAGES
  *********************************************/
-
 .reveal section img {
-	margin: 30px 0 0 0;
-	background: rgba(255,255,255,0.12);
-	border: 4px solid #eee;
-	
-	-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
-	   -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
-	        box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
-	
-	-webkit-transition: all .2s linear;
-	   -moz-transition: all .2s linear;
-	    -ms-transition: all .2s linear;
-	     -o-transition: all .2s linear;
-	        transition: all .2s linear;
+  margin: 15px;
+  background: rgba(255, 255, 255, 0.12);
+  border: 4px solid black;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
+  -webkit-transition: all .2s linear;
+  -moz-transition: all .2s linear;
+  -ms-transition: all .2s linear;
+  -o-transition: all .2s linear;
+  transition: all .2s linear;
 }
 
-	.reveal a:hover img {
-		background: rgba(255,255,255,0.2);
-		border-color: darkblue;
-		
-		-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
-		   -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
-		        box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
-	}
-
+.reveal a:hover img {
+  background: rgba(255, 255, 255, 0.2);
+  border-color: darkblue;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
+}
 
 /*********************************************
  * NAVIGATION CONTROLS
  *********************************************/
-
 .reveal .controls a {
-	color: black;
+  color: black;
 }
-	.reveal .controls a.enabled {
-		color: darkblue;
-		opacity: 1;
-		text-shadow: 0px 0px 2px hsla(185, 45%, 70%, 0.3);
-	}
 
+.reveal .controls a.enabled {
+  color: #0000f1;
+  text-shadow: 0px 0px 2px rgba(144, 207, 213, 0.3);
+}
 
 /*********************************************
  * PROGRESS BAR
  *********************************************/
-
 .reveal .progress {
-	background: rgba(0,0,0,0.2);
+  background: rgba(0, 0, 0, 0.2);
 }
-	.reveal .progress span {
-		background: darkblue;
-
-		-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);
-		    -ms-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-		     -o-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);
-	}
-
 
+.reveal .progress span {
+  background: darkblue;
+  -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
+  -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
+  -ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
+  -o-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
+  transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
+}

css/theme/source/beige.scss

@@ -0,0 +1,50 @@
+/**
+ * Beige theme for reveal.js.
+ * 
+ * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
+ */
+
+
+// Default mixins and settings -----------------
+@import "../template/mixins";
+@import "../template/settings";
+// ---------------------------------------------
+
+
+
+// Include theme-specific fonts
+@font-face {
+	font-family: 'League Gothic';
+	src: url('../../lib/font/league_gothic-webfont.eot');
+	src: url('../../lib/font/league_gothic-webfont.eot?#iefix') format('embedded-opentype'),
+		 url('../../lib/font/league_gothic-webfont.woff') format('woff'),
+		 url('../../lib/font/league_gothic-webfont.ttf') format('truetype'),
+		 url('../../lib/font/league_gothic-webfont.svg#LeagueGothicRegular') format('svg');
+
+	font-weight: normal;
+	font-style: normal;
+}
+
+@import url(http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
+
+
+// Override theme settings (see ../template/settings.scss)
+$mainColor: #333;
+$headingColor: #333;
+$headingTextShadow: none;
+$backgroundColor: #f7f3de;
+$linkColor: #8b743d;
+$linkColorHover: lighten( $linkColor, 20% );
+$selectionBackgroundColor: rgba(79, 64, 28, 0.99);
+$heading1TextShadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 20px 20px rgba(0,0,0,.15);
+
+// Background generator
+@mixin bodyBackground() {
+	@include radial-gradient( rgba(247,242,211,1), rgba(255,255,255,1) );
+}
+
+
+
+// Theme template ------------------------------
+@import "../template/theme";
+// ---------------------------------------------

css/theme/source/default.scss

@@ -0,0 +1,42 @@
+/**
+ * Default theme for reveal.js.
+ * 
+ * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
+ */
+
+
+// Default mixins and settings -----------------
+@import "../template/mixins";
+@import "../template/settings";
+// ---------------------------------------------
+
+
+
+// Include theme-specific fonts
+@font-face {
+	font-family: 'League Gothic';
+	src: url('../../lib/font/league_gothic-webfont.eot');
+	src: url('../../lib/font/league_gothic-webfont.eot?#iefix') format('embedded-opentype'),
+		 url('../../lib/font/league_gothic-webfont.woff') format('woff'),
+		 url('../../lib/font/league_gothic-webfont.ttf') format('truetype'),
+		 url('../../lib/font/league_gothic-webfont.svg#LeagueGothicRegular') format('svg');
+
+	font-weight: normal;
+	font-style: normal;
+}
+
+@import url(http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
+
+// Override theme settings (see ../template/settings.scss)
+$heading1TextShadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 20px 20px rgba(0,0,0,.15);
+
+// Background generator
+@mixin bodyBackground() {
+	@include radial-gradient( rgba(28,30,32,1), rgba(85,90,95,1) );
+}
+
+
+
+// Theme template ------------------------------
+@import "../template/theme";
+// ---------------------------------------------

css/theme/source/serif.scss

@@ -0,0 +1,33 @@
+/**
+ * A simple theme for reveal.js presentations, similar 
+ * to the default theme. The accent color is darkblue.
+ * 
+ * This theme is Copyright (C) 2012 Owen Versteeg, https://github.com/StereotypicalApps. It is MIT licensed.
+ * reveal.js is Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se; so is the theme - beige.css - that this is based off of.
+ */
+
+
+// Default mixins and settings -----------------
+@import "../template/mixins";
+@import "../template/settings";
+// ---------------------------------------------
+
+
+
+// Override theme settings (see ../template/settings.scss)
+$mainFont: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif;
+$mainColor: #000;
+$headingFont: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif;
+$headingColor: #383D3D;
+$headingTextShadow: none;
+$headingTextTransform: none;
+$backgroundColor: #F0F1EB;
+$linkColor: #51483D;
+$linkColorHover: lighten( $linkColor, 20% );
+$selectionBackgroundColor: #26351C;
+
+
+
+// Theme template ------------------------------
+@import "../template/theme";
+// ---------------------------------------------

css/theme/source/simple.scss

@@ -0,0 +1,38 @@
+/**
+ * A simple theme for reveal.js presentations, similar 
+ * to the default theme. The accent color is darkblue.
+ * 
+ * This theme is Copyright (C) 2012 Owen Versteeg, https://github.com/StereotypicalApps. It is MIT licensed.
+ * reveal.js is Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
+ */
+
+
+// Default mixins and settings -----------------
+@import "../template/mixins";
+@import "../template/settings";
+// ---------------------------------------------
+
+
+
+// Include theme-specific fonts
+@import url(http://fonts.googleapis.com/css?family=News+Cycle:400,700);
+@import url(http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
+
+
+// Override theme settings (see ../template/settings.scss)
+$mainFont: 'Lato', Times, 'Times New Roman', serif;
+$mainColor: #000;
+$headingFont: 'News Cycle', Impact, sans-serif;
+$headingColor: #000;
+$headingTextShadow: none;
+$headingTextTransform: none;
+$backgroundColor: #fff;
+$linkColor: #00008B;
+$linkColorHover: lighten( $linkColor, 20% );
+$selectionBackgroundColor: rgba(0, 0, 0, 0.99);
+
+
+
+// Theme template ------------------------------
+@import "../template/theme";
+// ---------------------------------------------

css/theme/source/sky.scss

@@ -0,0 +1,41 @@
+/**
+ * Sky theme for reveal.js.
+ * 
+ * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
+ */
+
+
+// Default mixins and settings -----------------
+@import "../template/mixins";
+@import "../template/settings";
+// ---------------------------------------------
+
+
+
+// Include theme-specific fonts
+@import url(http://fonts.googleapis.com/css?family=Quicksand:400,700,400italic,700italic);
+@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700);
+
+
+// Override theme settings (see ../template/settings.scss)
+$mainFont: 'Open Sans', sans-serif;
+$mainColor: #333;
+$headingFont: 'Quicksand', sans-serif;
+$headingColor: #333;
+$headingLetterSpacing: -0.08em;
+$headingTextShadow: none;
+$backgroundColor: #f7fbfc;
+$linkColor: #3b759e;
+$linkColorHover: lighten( $linkColor, 20% );
+$selectionBackgroundColor: #134674;
+
+// Background generator
+@mixin bodyBackground() {
+	@include radial-gradient( #add9e4, #f7fbfc );
+}
+
+
+
+// Theme template ------------------------------
+@import "../template/theme";
+// ---------------------------------------------

css/theme/template/mixins.scss

@@ -0,0 +1,29 @@
+@mixin vertical-gradient( $top, $bottom ) {
+	background: $top;
+	background: -moz-linear-gradient( top, $top 0%, $bottom 100% );
+	background: -webkit-gradient( linear, left top, left bottom, color-stop(0%,$top), color-stop(100%,$bottom) );
+	background: -webkit-linear-gradient( top, $top 0%, $bottom 100% );
+	background: -o-linear-gradient( top, $top 0%, $bottom 100% );
+	background: -ms-linear-gradient( top, $top 0%, $bottom 100% );
+	background: linear-gradient( top, $top 0%, $bottom 100% );
+}
+
+@mixin horizontal-gradient( $top, $bottom ) {
+	background: $top;
+	background: -moz-linear-gradient( left, $top 0%, $bottom 100% );
+	background: -webkit-gradient( linear, left top, right top, color-stop(0%,$top), color-stop(100%,$bottom) );
+	background: -webkit-linear-gradient( left, $top 0%, $bottom 100% );
+	background: -o-linear-gradient( left, $top 0%, $bottom 100% );
+	background: -ms-linear-gradient( left, $top 0%, $bottom 100% );
+	background: linear-gradient( left, $top 0%, $bottom 100% );
+}
+
+@mixin radial-gradient( $outer, $inner, $type: circle ) {
+	background: $inner;
+	background: -moz-radial-gradient( center, $type cover,  $inner 0%, $outer 100% );
+	background: -webkit-gradient( radial, center center, 0px, center center, 100%, color-stop(0%,$inner), color-stop(100%,$outer) );
+	background: -webkit-radial-gradient( center, $type cover,  $inner 0%, $outer 100% );
+	background: -o-radial-gradient( center, $type cover,  $inner 0%, $outer 100% );
+	background: -ms-radial-gradient( center, $type cover,  $inner 0%, $outer 100% );
+	background: radial-gradient( center, $type cover,  $inner 0%, $outer 100% );
+}

css/theme/template/settings.scss

@@ -0,0 +1,33 @@
+// Base settings for all themes that can optionally be 
+// overridden by the super-theme
+
+// Background of the presentation
+$backgroundColor: #2b2b2b;
+
+// Primary/body text
+$mainFont: 'Lato', Times, 'Times New Roman', serif;
+$mainFontSize: 36px;
+$mainColor: #eee;
+
+// Headings
+$headingFont: 'League Gothic', Impact, sans-serif;
+$headingColor: #eee;
+$headingLineHeight: 0.9em;
+$headingLetterSpacing: 0.02em;
+$headingTextTransform: uppercase;
+$headingTextShadow: 0px 0px 6px rgba(0,0,0,0.2);
+$heading1TextShadow: $headingTextShadow;
+
+// Links and actions
+$linkColor: #13DAEC;
+$linkColorHover: lighten( $linkColor, 20% );
+
+// Text selection
+$selectionBackgroundColor: #FF5E99;
+$selectionColor: #fff;
+
+// Generates the presentation background, can be overridden
+// to return a background image or gradient
+@mixin bodyBackground() {
+	background: $backgroundColor;
+}

css/theme/template/theme.scss

@@ -0,0 +1,135 @@
+// Base theme template for reveal.js
+
+/*********************************************
+ * GLOBAL STYLES
+ *********************************************/
+
+body {
+	@include bodyBackground();
+}
+
+.reveal {
+	font-family: $mainFont;
+	font-size: $mainFontSize;
+	font-weight: 200;
+	letter-spacing: -0.02em;
+	color: $mainColor;
+}
+
+::selection { 
+	color: $selectionColor; 
+	background: $selectionBackgroundColor; 
+	text-shadow: none; 
+}
+
+/*********************************************
+ * HEADERS
+ *********************************************/
+
+.reveal h1, 
+.reveal h2, 
+.reveal h3, 
+.reveal h4, 
+.reveal h5, 
+.reveal h6 {
+	margin: 0 0 20px 0;
+	color: $headingColor;
+
+	font-family: $headingFont;
+	line-height: $headingLineHeight;
+	letter-spacing: $headingLetterSpacing;
+	
+	text-transform: $headingTextTransform;
+	text-shadow: $headingTextShadow;
+}
+
+.reveal h1 {
+	text-shadow: $heading1TextShadow;
+}
+
+
+/*********************************************
+ * LINKS
+ *********************************************/
+
+.reveal a:not(.image) {
+	color: $linkColor;
+	text-decoration: none;
+
+	-webkit-transition: color .15s ease;
+	   -moz-transition: color .15s ease;
+	    -ms-transition: color .15s ease;
+	     -o-transition: color .15s ease;
+	        transition: color .15s ease;
+}
+	.reveal a:not(.image):hover {
+		color: $linkColorHover;
+		
+		text-shadow: none;
+		border: none;
+		border-radius: 2px;
+	}
+
+.reveal .roll span:after {
+	color: #fff;
+	background: darken( $linkColor, 15% );
+}
+
+
+/*********************************************
+ * IMAGES
+ *********************************************/
+
+.reveal section img {
+	margin: 15px;
+	background: rgba(255,255,255,0.12);
+	border: 4px solid $mainColor;
+	
+	box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
+	
+	-webkit-transition: all .2s linear;
+	   -moz-transition: all .2s linear;
+	    -ms-transition: all .2s linear;
+	     -o-transition: all .2s linear;
+	        transition: all .2s linear;
+}
+
+	.reveal a:hover img {
+		background: rgba(255,255,255,0.2);
+		border-color: $linkColor;
+		
+		box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
+	}
+
+
+/*********************************************
+ * NAVIGATION CONTROLS
+ *********************************************/
+
+.reveal .controls a {
+	color: $mainColor;
+}
+	.reveal .controls a.enabled {
+		color: $linkColorHover;
+		text-shadow: 0px 0px 2px hsla(185, 45%, 70%, 0.3);
+	}
+
+
+/*********************************************
+ * PROGRESS BAR
+ *********************************************/
+
+.reveal .progress {
+	background: rgba(0,0,0,0.2);
+}
+	.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);
+		    -ms-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+		     -o-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);
+	}
+
+

index.html

@@ -12,8 +12,6 @@
 		<meta name="apple-mobile-web-app-capable" content="yes" />
 		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
 		
-		<link href='http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
-		
 		<link rel="stylesheet" href="css/reveal.css">
 		<link rel="stylesheet" href="css/theme/default.css" id="theme">
 
@@ -328,7 +326,7 @@ function linkify( selector ) {
 		<script src="js/reveal.min.js"></script>
 
 		<script>
-			
+
 			// Full list of configuration options available here:
 			// https://github.com/hakimel/reveal.js#configuration
 			Reveal.initialize({
@@ -350,7 +348,7 @@ function linkify( selector ) {
 					{ src: 'plugin/speakernotes/client.js', async: true, condition: function() { return window.location.host === 'localhost:1947'; } }
 				]
 			});
-			
+
 		</script>
 
 	</body>

js/reveal.js

@@ -664,6 +664,8 @@ var Reveal = (function(){
 
 		updateControls();
 		
+		// Update the URL hash after a delay since updating it mid-transition
+		// is likely to cause visual lag
 		clearTimeout( writeURLTimeout );
 		writeURLTimeout = setTimeout( writeURL, 1500 );