modularize themes and convert them to sass (closes #191)
authorHakim El Hattab <hakim.elhattab@gmail.com>
Sat, 20 Oct 2012 14:57:51 +0000 (10:57 -0400)
committerHakim El Hattab <hakim.elhattab@gmail.com>
Sat, 20 Oct 2012 14:57:51 +0000 (10:57 -0400)
18 files changed:
.gitignore
css/reveal.css
css/theme/README.md [new file with mode: 0644]
css/theme/beige.css
css/theme/default.css
css/theme/serif.css
css/theme/simple.css
css/theme/sky.css
css/theme/source/beige.scss [new file with mode: 0644]
css/theme/source/default.scss [new file with mode: 0644]
css/theme/source/serif.scss [new file with mode: 0644]
css/theme/source/simple.scss [new file with mode: 0644]
css/theme/source/sky.scss [new file with mode: 0644]
css/theme/template/mixins.scss [new file with mode: 0644]
css/theme/template/settings.scss [new file with mode: 0644]
css/theme/template/theme.scss [new file with mode: 0644]
index.html
js/reveal.js

index 34058c44cda2d2548235c3fd1846de5b0931e26d..9ffdbc7345be803854e777dd7183dbe76153ae47 100644 (file)
@@ -3,3 +3,4 @@
 log/*.log
 tmp/**
 node_modules/
+.sass-cache
\ No newline at end of file
index 358d954f4705bc5e6304b19a808080f60ac16c18..9831255832110e524399d9fd963545f941726a4a 100644 (file)
@@ -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;
diff --git a/css/theme/README.md b/css/theme/README.md
new file mode 100644 (file)
index 0000000..137bdf2
--- /dev/null
@@ -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
+```
\ No newline at end of file
index 4e7a9875a4f9e16de85f1804445bdf4632874688..6b887f34e32ef231c1c4cb0268fb3d0ac3abac9d 100644 (file)
-/**
- * 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);
+}
index a937b8efed5bbf4a5322ee99d1f8c372b89fd4b1..d8f92994bd6b750cf255b6a4c704627b68c05ee8 100644 (file)
-/**
- * The default theme for reveal.js presentations.
+@import url(http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
+/*
+ * Default theme for reveal.js.
  * 
  * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
  */
-
-/*********************************************
- * 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: #eee;
+  background: #555a5f;
+  background: -moz-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
+  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #555a5f), color-stop(100%, #1c1e20));
+  background: -webkit-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
+  background: -o-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
+  background: -ms-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
+  background: radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
+}
 
-       background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiM1NTVhNWYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMWMxZTIwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
-       background-color: #2b2b2b;
-       background: -moz-radial-gradient(center, ellipse cover,  rgba(85,90,95,1) 0%, rgba(28,30,32,1) 100%);
-       background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(85,90,95,1)), color-stop(100%,rgba(28,30,32,1)));
-       background: -webkit-radial-gradient(center, ellipse cover,  rgba(85,90,95,1) 0%,rgba(28,30,32,1) 100%);
-       background: -o-radial-gradient(center, ellipse cover,  rgba(85,90,95,1) 0%,rgba(28,30,32,1) 100%);
-       background: -ms-radial-gradient(center, ellipse cover,  rgba(85,90,95,1) 0%,rgba(28,30,32,1) 100%);
-       background: radial-gradient(center, ellipse cover,  rgba(85,90,95,1) 0%,rgba(28,30,32,1) 100%);
+.reveal {
+  font-family: "Lato", Times, "Times New Roman", serif;
+  font-size: 36px;
+  font-weight: 200;
+  letter-spacing: -0.02em;
+  color: #eeeeee;
 }
 
+::selection {
+  color: white;
+  background: #ff5e99;
+  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: #eee;
-
-       text-shadow: 0px 0px 6px rgba(0,0,0,0.2);
+  margin: 0 0 20px 0;
+  color: #eeeeee;
+  font-family: "League Gothic", Impact, sans-serif;
+  line-height: 0.9em;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);
 }
 
 .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: hsl(185, 85%, 50%);
-       text-decoration: none;
+  color: #13daec;
+  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: #71e9f4;
+  text-shadow: none;
+  border: none;
+  border-radius: 2px;
 }
-       .reveal a:not(.image):hover {
-               color: hsl(185, 85%, 70%);
-               
-               text-shadow: none;
-               border: none;
-               border-radius: 2px;
-       }
 
 .reveal .roll span:after {
-       color: #fff;
-       background: hsl(185, 60%, 35%);
+  color: #fff;
+  background: #0d99a5;
 }
 
-
 /*********************************************
  * 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 #eeeeee;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
+  -webkit-transition: all .2s linear;
+  -moz-transition: all .2s linear;
+  -ms-transition: all .2s linear;
+  -o-transition: all .2s linear;
+  transition: all .2s linear;
 }
 
-       .reveal a:hover img {
-               background: rgba(255,255,255,0.2);
-               border-color: #13DAEC;
-               
-               -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: #13daec;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
+}
 
 /*********************************************
  * NAVIGATION CONTROLS
  *********************************************/
-
 .reveal .controls a {
-       color: #fff;
+  color: #eeeeee;
 }
-       .reveal .controls a.enabled {
-               color: hsl(185, 85%, 70%);
-               text-shadow: 0px 0px 2px hsla(185, 45%, 70%, 0.3);
-       }
 
+.reveal .controls a.enabled {
+  color: #71e9f4;
+  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: hsl(185, 85%, 50%);
-
-               -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: #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);
+  -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);
+}
index 690ff2d4d2b9210ce56ae15fab8f90e4e3dc4c51..b9f2406dc5a2956f9e14a57ef85bb26f66418d40 100644 (file)
-/**
+/*
  * 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);
+}
index 2d782ae25e8b02f5780cc921d51b4730c3d9d61b..53d665f4b8b8ee8219223148e4c1f30fb90b5b88 100644 (file)
-/**
+@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);
+}
index 71ebd2c71bb990402d4c14c20426d4efb8936c82..f3fb04f8e2756edd360e2fdee31e797abf40dae7 100644 (file)
-/**
- * Sky theme for reveal.js presentations.
+@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);
+/*
+ * Sky theme for reveal.js.
  * 
  * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
  */
-
-/*********************************************
- * 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);
-
-.reveal {
-       font-family: 'Open Sans', sans-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: 'Quicksand', sans-serif;
-       line-height: 0.9em;
-       letter-spacing: -0.08em;
-       text-transform: uppercase;
-}
-
-
 /*********************************************
  * GLOBAL STYLES
  *********************************************/
-
 body {
-       color: #333;
-
-       background: #f7fbfc;
-       background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmN2ZiZmMiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYWRkOWU0IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
-       background: -moz-radial-gradient(center, ellipse cover,  #f7fbfc 0%, #add9e4 100%);
-       background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#f7fbfc), color-stop(100%,#add9e4));
-       background: -webkit-radial-gradient(center, ellipse cover,  #f7fbfc 0%,#add9e4 100%);
-       background: -o-radial-gradient(center, ellipse cover,  #f7fbfc 0%,#add9e4 100%);
-       background: -ms-radial-gradient(center, ellipse cover,  #f7fbfc 0%,#add9e4 100%);
-       background: radial-gradient(ellipse at center,  #f7fbfc 0%,#add9e4 100%);
+  background: #f7fbfc;
+  background: -moz-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%);
+  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #f7fbfc), color-stop(100%, #add9e4));
+  background: -webkit-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%);
+  background: -o-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%);
+  background: -ms-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%);
+  background: radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%);
 }
 
-::-moz-selection {
-       background: #134674;
-       color: white; 
-}
-::-webkit-selection {
-       background: #134674;
-       color: white; 
+.reveal {
+  font-family: "Open Sans", sans-serif;
+  font-size: 36px;
+  font-weight: 200;
+  letter-spacing: -0.02em;
+  color: #333333;
 }
+
 ::selection {
-       background: #134674;
-       color: white; 
+  color: white;
+  background: #134674;
+  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: "Quicksand", sans-serif;
+  line-height: 0.9em;
+  letter-spacing: -0.08em;
+  text-transform: uppercase;
+  text-shadow: none;
 }
 
+.reveal h1 {
+  text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);
+}
 
 /*********************************************
  * LINKS
  *********************************************/
-
 .reveal a:not(.image) {
-       color: #3b759e;
-       text-decoration: none;
+  color: #3b759e;
+  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: #74a7cb;
+  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: #3b759e;
+  color: #fff;
+  background: #264c66;
 }
 
-
 /*********************************************
- * MISC
+ * IMAGES
  *********************************************/
-
 .reveal section img {
-       margin: 30px 0 0 0;
-       background: rgba(255,255,255,0.12);
-       border: 1px solid #ddd;
-       
-       -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: #3b759e;
-               
-               -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 blockquote {
-       background: rgba(255, 255, 255, 0.4);
+.reveal a:hover img {
+  background: rgba(255, 255, 255, 0.2);
+  border-color: #3b759e;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
 }
 
-.reveal p {
-       margin-bottom: 20px;
-}
-
-
 /*********************************************
  * NAVIGATION CONTROLS
  *********************************************/
-
 .reveal .controls a {
-       color: #fff;
+  color: #333333;
 }
-       .reveal .controls a.enabled {
-               color: #3b759e;
-               text-shadow: 0px 0px 2px hsla(185, 45%, 70%, 0.3);
-       }
 
+.reveal .controls a.enabled {
+  color: #74a7cb;
+  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: #3b759e;
-
-               -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: #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);
+  -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);
+}
diff --git a/css/theme/source/beige.scss b/css/theme/source/beige.scss
new file mode 100644 (file)
index 0000000..177216f
--- /dev/null
@@ -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";
+// ---------------------------------------------
\ No newline at end of file
diff --git a/css/theme/source/default.scss b/css/theme/source/default.scss
new file mode 100644 (file)
index 0000000..da9b268
--- /dev/null
@@ -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";
+// ---------------------------------------------
\ No newline at end of file
diff --git a/css/theme/source/serif.scss b/css/theme/source/serif.scss
new file mode 100644 (file)
index 0000000..dc0935f
--- /dev/null
@@ -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";
+// ---------------------------------------------
\ No newline at end of file
diff --git a/css/theme/source/simple.scss b/css/theme/source/simple.scss
new file mode 100644 (file)
index 0000000..713ab44
--- /dev/null
@@ -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";
+// ---------------------------------------------
\ No newline at end of file
diff --git a/css/theme/source/sky.scss b/css/theme/source/sky.scss
new file mode 100644 (file)
index 0000000..77fd230
--- /dev/null
@@ -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";
+// ---------------------------------------------
\ No newline at end of file
diff --git a/css/theme/template/mixins.scss b/css/theme/template/mixins.scss
new file mode 100644 (file)
index 0000000..bc82419
--- /dev/null
@@ -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% );
+}
\ No newline at end of file
diff --git a/css/theme/template/settings.scss b/css/theme/template/settings.scss
new file mode 100644 (file)
index 0000000..bc9f138
--- /dev/null
@@ -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;
+}
\ No newline at end of file
diff --git a/css/theme/template/theme.scss b/css/theme/template/theme.scss
new file mode 100644 (file)
index 0000000..353a98c
--- /dev/null
@@ -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 3ea2412cd8ee8d022f658b6b6454cedad5d0711d..2becf4f8038e1f534f235e1f0a0b279633384c02 100644 (file)
@@ -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>
index c2769e5fff69a876be9457fab659869310ddcb2d..b08580ba891bf337c0f17452134282823a02764a 100644 (file)
@@ -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 );