aboutsummaryrefslogtreecommitdiffhomepage
path: root/css
diff options
context:
space:
mode:
Diffstat (limited to 'css')
-rw-r--r--css/reveal.css244
-rw-r--r--css/theme/README.md5
-rw-r--r--css/theme/beige.css243
-rw-r--r--css/theme/default.css242
-rw-r--r--css/theme/serif.css218
-rw-r--r--css/theme/simple.css213
-rw-r--r--css/theme/sky.css226
-rw-r--r--css/theme/source/beige.scss50
-rw-r--r--css/theme/source/default.scss42
-rw-r--r--css/theme/source/serif.scss33
-rw-r--r--css/theme/source/simple.scss38
-rw-r--r--css/theme/source/sky.scss41
-rw-r--r--css/theme/template/mixins.scss29
-rw-r--r--css/theme/template/settings.scss33
-rw-r--r--css/theme/template/theme.scss163
15 files changed, 1128 insertions, 692 deletions
diff --git a/css/reveal.css b/css/reveal.css
index 358d954..b39ea13 100644
--- a/css/reveal.css
+++ b/css/reveal.css
@@ -1,10 +1,10 @@
@charset "UTF-8";
-/**
+/*!
* reveal.js
* http://lab.hakim.se/reveal-js
* MIT licensed
- *
+ *
* Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
*/
@@ -22,8 +22,8 @@ html, body, .reveal div, .reveal span, .reveal applet, .reveal object, .reveal i
.reveal dl, .reveal dt, .reveal dd, .reveal ol, .reveal ul, .reveal li,
.reveal fieldset, .reveal form, .reveal label, .reveal legend,
.reveal table, .reveal caption, .reveal tbody, .reveal tfoot, .reveal thead, .reveal tr, .reveal th, .reveal td,
-.reveal article, .reveal aside, .reveal canvas, .reveal details, .reveal embed,
-.reveal figure, .reveal figcaption, .reveal footer, .reveal header, .reveal hgroup,
+.reveal article, .reveal aside, .reveal canvas, .reveal details, .reveal embed,
+.reveal figure, .reveal figcaption, .reveal footer, .reveal header, .reveal hgroup,
.reveal menu, .reveal nav, .reveal output, .reveal ruby, .reveal section, .reveal summary,
.reveal time, .reveal mark, .reveal audio, video {
margin: 0;
@@ -34,7 +34,7 @@ html, body, .reveal div, .reveal span, .reveal applet, .reveal object, .reveal i
vertical-align: baseline;
}
-.reveal article, .reveal aside, .reveal details, .reveal figcaption, .reveal figure,
+.reveal article, .reveal aside, .reveal details, .reveal figcaption, .reveal figure,
.reveal footer, .reveal header, .reveal hgroup, .reveal menu, .reveal nav, .reveal section {
display: block;
}
@@ -44,7 +44,7 @@ html, body, .reveal div, .reveal span, .reveal applet, .reveal object, .reveal i
* GLOBAL STYLES
*********************************************/
-html,
+html,
body {
width: 100%;
height: 100%;
@@ -57,10 +57,10 @@ body {
line-height: 1;
}
-::selection {
- background:#FF5E99;
- color:#fff;
- text-shadow: none;
+::selection {
+ background:#FF5E99;
+ color:#fff;
+ text-shadow: none;
}
@media screen and (max-width: 900px) {
@@ -96,6 +96,69 @@ body {
opacity: 1;
}
+.reveal .slides section .fragment.grow {
+ opacity: 1;
+}
+ .reveal .slides section .fragment.grow.visible {
+ -webkit-transform: scale( 1.3 );
+ -moz-transform: scale( 1.3 );
+ -ms-transform: scale( 1.3 );
+ -o-transform: scale( 1.3 );
+ transform: scale( 1.3 );
+ }
+
+.reveal .slides section .fragment.shrink {
+ opacity: 1;
+}
+ .reveal .slides section .fragment.shrink.visible {
+ -webkit-transform: scale( 0.7 );
+ -moz-transform: scale( 0.7 );
+ -ms-transform: scale( 0.7 );
+ -o-transform: scale( 0.7 );
+ transform: scale( 0.7 );
+ }
+
+.reveal .slides section .fragment.roll-in {
+ opacity: 0;
+
+ -webkit-transform: rotateX( 90deg );
+ -moz-transform: rotateX( 90deg );
+ -ms-transform: rotateX( 90deg );
+ -o-transform: rotateX( 90deg );
+ transform: rotateX( 90deg );
+}
+ .reveal .slides section .fragment.roll-in.visible {
+ opacity: 1;
+
+ -webkit-transform: rotateX( 0 );
+ -moz-transform: rotateX( 0 );
+ -ms-transform: rotateX( 0 );
+ -o-transform: rotateX( 0 );
+ transform: rotateX( 0 );
+ }
+
+.reveal .slides section .fragment.fade-out {
+ opacity: 1;
+}
+ .reveal .slides section .fragment.fade-out.visible {
+ opacity: 0;
+ }
+
+.reveal .slides section .fragment.highlight-red,
+.reveal .slides section .fragment.highlight-green,
+.reveal .slides section .fragment.highlight-blue {
+ opacity: 1;
+}
+ .reveal .slides section .fragment.highlight-red.visible {
+ color: #ff2c2d
+ }
+ .reveal .slides section .fragment.highlight-green.visible {
+ color: #17ff2e;
+ }
+ .reveal .slides section .fragment.highlight-blue.visible {
+ color: #1b91ff;
+ }
+
/*********************************************
* DEFAULT ELEMENT STYLES
@@ -110,19 +173,19 @@ body {
/* preserve aspect ratio and scale image so it's bound within the section */
max-width: 100%;
max-height: 100%;
-}
+}
-.reveal strong,
+.reveal strong,
.reveal b {
font-weight: bold;
}
-.reveal em,
+.reveal em,
.reveal i {
font-style: italic;
}
-.reveal ol,
+.reveal ol,
.reveal ul {
display: inline-block;
@@ -170,7 +233,7 @@ body {
width: 70%;
margin: 5px auto;
padding: 5px;
-
+
font-style: italic;
background: rgba(255, 255, 255, 0.05);
box-shadow: 0px 0px 2px rgba(0,0,0,0.2);
@@ -182,7 +245,7 @@ body {
content: '”';
}
-.reveal q {
+.reveal q {
font-style: italic;
}
.reveal q:before {
@@ -196,7 +259,7 @@ body {
display: block;
position: relative;
width: 90%;
- margin: 10px auto;
+ margin: 15px auto;
text-align: left;
font-size: 0.55em;
@@ -207,6 +270,9 @@ body {
box-shadow: 0px 0px 6px rgba(0,0,0,0.3);
}
+.reveal pre code {
+ padding: 5px;
+}
.reveal code {
font-family: monospace;
@@ -214,7 +280,7 @@ body {
max-height: 400px;
}
-.reveal table th,
+.reveal table th,
.reveal table td {
text-align: left;
padding-right: .3em;
@@ -224,10 +290,10 @@ body {
text-shadow: rgb(255,255,255) 1px 1px 2px;
}
-.reveal sup {
+.reveal sup {
vertical-align: super;
}
-.reveal sub {
+.reveal sub {
vertical-align: sub;
}
@@ -250,44 +316,65 @@ body {
.reveal .controls {
display: none;
position: fixed;
- width: 100px;
- height: 100px;
+ width: 110px;
+ height: 110px;
z-index: 30;
+ right: 10px;
+ bottom: 10px;
+}
- right: 0;
- bottom: 0;
+.reveal .controls div {
+ position: absolute;
+ opacity: 0.1;
+ width: 0;
+ height: 0;
+ border: 12px solid transparent;
+
+ -webkit-transition: opacity 0.2s ease;
+ -moz-transition: opacity 0.2s ease;
+ -ms-transition: opacity 0.2s ease;
+ -o-transition: opacity 0.2s ease;
+ transition: opacity 0.2s ease;
}
-
- .reveal .controls a {
- font-family: Arial;
- font-size: 0.83em;
- position: absolute;
- opacity: 0.1;
- }
- .reveal .controls a.enabled {
- opacity: 0.6;
- }
- .reveal .controls a.enabled:active {
- margin-top: 1px;
- }
-
- .reveal .controls .left {
- top: 30px;
- }
- .reveal .controls .right {
- left: 60px;
- top: 30px;
- }
+.reveal .controls div.enabled {
+ opacity: 0.6;
+ cursor: pointer;
+}
- .reveal .controls .up {
- left: 30px;
- }
+.reveal .controls div.enabled:active {
+ margin-top: 1px;
+}
- .reveal .controls .down {
- left: 30px;
- top: 60px;
- }
+.reveal .controls div.left {
+ top: 42px;
+
+ border-right-width: 22px;
+ border-right-color: #eee;
+}
+
+.reveal .controls div.right {
+ left: 74px;
+ top: 42px;
+
+ border-left-width: 22px;
+ border-left-color: #eee;
+}
+
+.reveal .controls div.up {
+ left: 42px;
+
+ border-bottom-width: 22px;
+ border-bottom-color: #eee;
+}
+
+.reveal .controls div.down {
+ left: 42px;
+ top: 74px;
+
+ border-top-width: 22px;
+ border-top-color: #eee;
+}
/*********************************************
@@ -301,8 +388,16 @@ body {
width: 100%;
bottom: 0;
left: 0;
+ z-index: 10;
}
-
+ .reveal .progress:after {
+ content: '';
+ display: 'block';
+ position: absolute;
+ height: 20px;
+ width: 100%;
+ top: -20px;
+ }
.reveal .progress span {
display: block;
height: 100%;
@@ -411,7 +506,7 @@ body {
padding: 20px 0px;
overflow: visible;
z-index: 1;
-
+
text-align: center;
-webkit-transition: -webkit-perspective .4s ease;
@@ -419,7 +514,7 @@ body {
-ms-transition: -ms-perspective .4s ease;
-o-transition: -o-perspective .4s ease;
transition: perspective .4s ease;
-
+
-webkit-perspective: 600px;
-moz-perspective: 600px;
-ms-perspective: 600px;
@@ -439,12 +534,12 @@ body {
min-height: 600px;
z-index: 10;
-
+
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-
+
-webkit-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-moz-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-ms-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
@@ -470,7 +565,7 @@ body {
.reveal .slides>section.past {
display: block;
opacity: 0;
-
+
-webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
@@ -479,7 +574,7 @@ body {
.reveal .slides>section.future {
display: block;
opacity: 0;
-
+
-webkit-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
@@ -489,7 +584,7 @@ body {
.reveal .slides>section>section.past {
display: block;
opacity: 0;
-
+
-webkit-transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0);
-moz-transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0);
-ms-transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0);
@@ -498,7 +593,7 @@ body {
.reveal .slides>section>section.future {
display: block;
opacity: 0;
-
+
-webkit-transform: translate3d(0, 50%, 0) rotateX(-70deg) translate3d(0, 50%, 0);
-moz-transform: translate3d(0, 50%, 0) rotateX(-70deg) translate3d(0, 50%, 0);
-ms-transform: translate3d(0, 50%, 0) rotateX(-70deg) translate3d(0, 50%, 0);
@@ -645,7 +740,7 @@ body {
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-
+
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
@@ -863,7 +958,7 @@ body {
-webkit-transform: none;
-webkit-transition-duration: 800ms;
- -webkit-filter: custom( url(shaders/tile-flip.vs) mix(url(shaders/tile-flip.fs) multiply source-atop), 10 10 border-box detached, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg),
+ -webkit-filter: custom( url(shaders/tile-flip.vs) mix(url(shaders/tile-flip.fs) multiply source-atop), 10 10 border-box detached, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg),
amount 0, randomness 0, flipAxis 0 1 0, tileOutline 1
);
}
@@ -871,8 +966,8 @@ body {
.reveal.tileflip .slides section.past {
-webkit-transform: none;
-webkit-transition-duration: 800ms;
-
- -webkit-filter: custom( url(shaders/tile-flip.vs) mix(url(shaders/tile-flip.fs) multiply source-atop), 10 10 border-box detached, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg),
+
+ -webkit-filter: custom( url(shaders/tile-flip.vs) mix(url(shaders/tile-flip.fs) multiply source-atop), 10 10 border-box detached, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg),
amount 1, randomness 0, flipAxis 0 1 0, tileOutline 1
);
}
@@ -881,25 +976,25 @@ body {
-webkit-transform: none;
-webkit-transition-duration: 800ms;
- -webkit-filter: custom( url(shaders/tile-flip.vs) mix(url(shaders/tile-flip.fs) multiply source-atop), 10 10 border-box detached, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg),
+ -webkit-filter: custom( url(shaders/tile-flip.vs) mix(url(shaders/tile-flip.fs) multiply source-atop), 10 10 border-box detached, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg),
amount 1, randomness 0, flipAxis 0 1 0, tileOutline 1
);
}
-.reveal.tileflip .slides>section>section.present {
- -webkit-filter: custom( url(shaders/tile-flip.vs) mix(url(shaders/tile-flip.fs) multiply source-atop), 10 10 border-box detached, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg),
+.reveal.tileflip .slides>section>section.present {
+ -webkit-filter: custom( url(shaders/tile-flip.vs) mix(url(shaders/tile-flip.fs) multiply source-atop), 10 10 border-box detached, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg),
amount 0, randomness 2, flipAxis 1 0 0, tileOutline 1
);
}
-.reveal.tileflip .slides>section>section.past {
- -webkit-filter: custom( url(shaders/tile-flip.vs) mix(url(shaders/tile-flip.fs) multiply source-atop), 10 10 border-box detached, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg),
+.reveal.tileflip .slides>section>section.past {
+ -webkit-filter: custom( url(shaders/tile-flip.vs) mix(url(shaders/tile-flip.fs) multiply source-atop), 10 10 border-box detached, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg),
amount 1, randomness 2, flipAxis 1 0 0, tileOutline 1
);
}
-.reveal.tileflip .slides>section>section.future {
- -webkit-filter: custom( url(shaders/tile-flip.vs) mix(url(shaders/tile-flip.fs) multiply source-atop), 10 10 border-box detached, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg),
+.reveal.tileflip .slides>section>section.future {
+ -webkit-filter: custom( url(shaders/tile-flip.vs) mix(url(shaders/tile-flip.fs) multiply source-atop), 10 10 border-box detached, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg),
amount 1, randomness 2, flipAxis 1 0 0, tileOutline 1
);
}
@@ -938,8 +1033,9 @@ body {
.reveal.overview .slides section {
padding: 20px 0;
max-height: 600px;
- overflow: hidden;
- opacity: 1;
+ overflow: hidden;
+ opacity: 1!important;
+ visibility: visible!important;
cursor: pointer;
background: rgba(0,0,0,0.1);
}
diff --git a/css/theme/README.md b/css/theme/README.md
new file mode 100644
index 0000000..137bdf2
--- /dev/null
+++ b/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
+``` \ No newline at end of file
diff --git a/css/theme/beige.css b/css/theme/beige.css
index 4e7a987..fe0e460 100644
--- a/css/theme/beige.css
+++ b/css/theme/beige.css
@@ -1,190 +1,163 @@
+@import url(http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
/**
- * A beige theme for reveal.js presentations, similar
- * to the default theme.
+ * 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;
-}
-
-.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;
+ 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;
}
-
/*********************************************
* 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: #f7f2d3;
+ 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;
-}
-
- .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);
- }
+ 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;
+ box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
+}
/*********************************************
* NAVIGATION CONTROLS
*********************************************/
+.reveal .controls div.left,
+.reveal .controls div.left.enabled {
+ border-right-color: #8b743d;
+}
-.reveal .controls a {
- color: #fff;
+.reveal .controls div.right,
+.reveal .controls div.right.enabled {
+ border-left-color: #8b743d;
}
- .reveal .controls a.enabled {
- color: #8b743d;
- text-shadow: 0px 0px 2px hsla(185, 45%, 70%, 0.3);
- }
+.reveal .controls div.up,
+.reveal .controls div.up.enabled {
+ border-bottom-color: #8b743d;
+}
+
+.reveal .controls div.down,
+.reveal .controls div.down.enabled {
+ border-top-color: #8b743d;
+}
+
+.reveal .controls div.left.enabled:hover {
+ border-right-color: #c0a86e;
+}
+
+.reveal .controls div.right.enabled:hover {
+ border-left-color: #c0a86e;
+}
+
+.reveal .controls div.up.enabled:hover {
+ border-bottom-color: #c0a86e;
+}
+
+.reveal .controls div.down.enabled:hover {
+ border-top-color: #c0a86e;
+}
/*********************************************
* PROGRESS BAR
*********************************************/
-
.reveal .progress {
- background: rgba(0,0,0,0.2);
+ background: rgba(0, 0, 0, 0.2);
}
- .reveal .progress span {
- background: #8b743d;
-
- -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);
+}
diff --git a/css/theme/default.css b/css/theme/default.css
index a937b8e..563e4d9 100644
--- a/css/theme/default.css
+++ b/css/theme/default.css
@@ -1,181 +1,163 @@
+@import url(http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
/**
- * The default theme for reveal.js presentations.
+ * 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;
-}
-
-.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;
+ 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;
}
-
/*********************************************
* GLOBAL STYLES
*********************************************/
-
body {
- color: #eee;
+ background: #1c1e20;
+ 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;
-
- -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: hsl(185, 85%, 70%);
-
- text-shadow: none;
- border: none;
- border-radius: 2px;
- }
+ 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;
+}
-.reveal .roll span:after {
- color: #fff;
- background: hsl(185, 60%, 35%);
+.reveal a:not(.image):hover {
+ color: #71e9f4;
+ text-shadow: none;
+ border: none;
+ border-radius: 2px;
}
+.reveal .roll span:after {
+ 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;
-}
-
- .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);
- }
+ 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;
+ box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
+}
/*********************************************
* NAVIGATION CONTROLS
*********************************************/
+.reveal .controls div.left,
+.reveal .controls div.left.enabled {
+ border-right-color: #13daec;
+}
-.reveal .controls a {
- color: #fff;
+.reveal .controls div.right,
+.reveal .controls div.right.enabled {
+ border-left-color: #13daec;
}
- .reveal .controls a.enabled {
- color: hsl(185, 85%, 70%);
- text-shadow: 0px 0px 2px hsla(185, 45%, 70%, 0.3);
- }
+.reveal .controls div.up,
+.reveal .controls div.up.enabled {
+ border-bottom-color: #13daec;
+}
+
+.reveal .controls div.down,
+.reveal .controls div.down.enabled {
+ border-top-color: #13daec;
+}
+
+.reveal .controls div.left.enabled:hover {
+ border-right-color: #71e9f4;
+}
+
+.reveal .controls div.right.enabled:hover {
+ border-left-color: #71e9f4;
+}
+
+.reveal .controls div.up.enabled:hover {
+ border-bottom-color: #71e9f4;
+}
+
+.reveal .controls div.down.enabled:hover {
+ border-top-color: #71e9f4;
+}
/*********************************************
* PROGRESS BAR
*********************************************/
-
.reveal .progress {
- background: rgba(0,0,0,0.2);
+ background: rgba(0, 0, 0, 0.2);
}
- .reveal .progress span {
- background: 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);
+}
diff --git a/css/theme/serif.css b/css/theme/serif.css
index 690ff2d..3957b5d 100644
--- a/css/theme/serif.css
+++ b/css/theme/serif.css
@@ -1,170 +1,150 @@
/**
* 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;
-}
- .reveal a:not(.image):hover {
- text-shadow: none;
- border: none;
- border-radius: 2px;
- }
-
-.reveal .roll span:after {
- color: #fff;
- background: #51483D;
+ 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;
}
-/*********************************************
- * MISC
- *********************************************/
-
-.reveal p {
- line-height: 1.4em;
- font-size: 1.15em;
- color: #111;
+.reveal a:not(.image):hover {
+ color: #8b7c69;
+ text-shadow: none;
+ border: none;
+ border-radius: 2px;
}
-.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;
-}
-
- .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);
- }
+ 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: #51483d;
+ box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
+}
/*********************************************
* NAVIGATION CONTROLS
*********************************************/
+.reveal .controls div.left,
+.reveal .controls div.left.enabled {
+ border-right-color: #51483d;
+}
+
+.reveal .controls div.right,
+.reveal .controls div.right.enabled {
+ border-left-color: #51483d;
+}
+
+.reveal .controls div.up,
+.reveal .controls div.up.enabled {
+ border-bottom-color: #51483d;
+}
-.reveal .controls a {
- color: black;
+.reveal .controls div.down,
+.reveal .controls div.down.enabled {
+ border-top-color: #51483d;
}
- .reveal .controls a.enabled {
- color: #26351C;
- opacity: 1;
- text-shadow: 0px 0px 2px hsla(185, 45%, 70%, 0.3);
- }
+.reveal .controls div.left.enabled:hover {
+ border-right-color: #8b7c69;
+}
+
+.reveal .controls div.right.enabled:hover {
+ border-left-color: #8b7c69;
+}
+
+.reveal .controls div.up.enabled:hover {
+ border-bottom-color: #8b7c69;
+}
+
+.reveal .controls div.down.enabled:hover {
+ border-top-color: #8b7c69;
+}
/*********************************************
* PROGRESS BAR
*********************************************/
-
.reveal .progress {
- background: rgba(0,0,0,0.2);
+ background: rgba(0, 0, 0, 0.2);
}
- .reveal .progress span {
- background: #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);
+}
diff --git a/css/theme/simple.css b/css/theme/simple.css
index 2d782ae..926bbc5 100644
--- a/css/theme/simple.css
+++ b/css/theme/simple.css
@@ -1,163 +1,152 @@
+@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;
-}
-
- .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);
- }
+ 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;
+ box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
+}
/*********************************************
* NAVIGATION CONTROLS
*********************************************/
+.reveal .controls div.left,
+.reveal .controls div.left.enabled {
+ border-right-color: darkblue;
+}
-.reveal .controls a {
- color: black;
+.reveal .controls div.right,
+.reveal .controls div.right.enabled {
+ border-left-color: darkblue;
}
- .reveal .controls a.enabled {
- color: darkblue;
- opacity: 1;
- text-shadow: 0px 0px 2px hsla(185, 45%, 70%, 0.3);
- }
+.reveal .controls div.up,
+.reveal .controls div.up.enabled {
+ border-bottom-color: darkblue;
+}
+
+.reveal .controls div.down,
+.reveal .controls div.down.enabled {
+ border-top-color: darkblue;
+}
+
+.reveal .controls div.left.enabled:hover {
+ border-right-color: #0000f1;
+}
+
+.reveal .controls div.right.enabled:hover {
+ border-left-color: #0000f1;
+}
+
+.reveal .controls div.up.enabled:hover {
+ border-bottom-color: #0000f1;
+}
+
+.reveal .controls div.down.enabled:hover {
+ border-top-color: #0000f1;
+}
/*********************************************
* PROGRESS BAR
*********************************************/
-
.reveal .progress {
- background: rgba(0,0,0,0.2);
+ background: rgba(0, 0, 0, 0.2);
}
- .reveal .progress span {
- background: darkblue;
-
- -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);
+}
diff --git a/css/theme/sky.css b/css/theme/sky.css
index 71ebd2c..6618c0d 100644
--- a/css/theme/sky.css
+++ b/css/theme/sky.css
@@ -1,174 +1,156 @@
+@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 presentations.
+ * 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: #add9e4;
+ 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 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 blockquote {
- background: rgba(255, 255, 255, 0.4);
+/*********************************************
+ * NAVIGATION CONTROLS
+ *********************************************/
+.reveal .controls div.left,
+.reveal .controls div.left.enabled {
+ border-right-color: #3b759e;
}
-.reveal p {
- margin-bottom: 20px;
+.reveal .controls div.right,
+.reveal .controls div.right.enabled {
+ border-left-color: #3b759e;
}
+.reveal .controls div.up,
+.reveal .controls div.up.enabled {
+ border-bottom-color: #3b759e;
+}
-/*********************************************
- * NAVIGATION CONTROLS
- *********************************************/
+.reveal .controls div.down,
+.reveal .controls div.down.enabled {
+ border-top-color: #3b759e;
+}
+
+.reveal .controls div.left.enabled:hover {
+ border-right-color: #74a7cb;
+}
-.reveal .controls a {
- color: #fff;
+.reveal .controls div.right.enabled:hover {
+ border-left-color: #74a7cb;
}
- .reveal .controls a.enabled {
- color: #3b759e;
- text-shadow: 0px 0px 2px hsla(185, 45%, 70%, 0.3);
- }
+.reveal .controls div.up.enabled:hover {
+ border-bottom-color: #74a7cb;
+}
+
+.reveal .controls div.down.enabled:hover {
+ border-top-color: #74a7cb;
+}
/*********************************************
* PROGRESS BAR
*********************************************/
-
.reveal .progress {
- background: rgba(0,0,0,0.2);
+ background: rgba(0, 0, 0, 0.2);
}
- .reveal .progress span {
- background: #3b759e;
-
- -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
index 0000000..177216f
--- /dev/null
+++ b/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";
+// --------------------------------------------- \ No newline at end of file
diff --git a/css/theme/source/default.scss b/css/theme/source/default.scss
new file mode 100644
index 0000000..da9b268
--- /dev/null
+++ b/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";
+// --------------------------------------------- \ No newline at end of file
diff --git a/css/theme/source/serif.scss b/css/theme/source/serif.scss
new file mode 100644
index 0000000..dc0935f
--- /dev/null
+++ b/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";
+// --------------------------------------------- \ No newline at end of file
diff --git a/css/theme/source/simple.scss b/css/theme/source/simple.scss
new file mode 100644
index 0000000..713ab44
--- /dev/null
+++ b/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";
+// --------------------------------------------- \ No newline at end of file
diff --git a/css/theme/source/sky.scss b/css/theme/source/sky.scss
new file mode 100644
index 0000000..77fd230
--- /dev/null
+++ b/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";
+// --------------------------------------------- \ No newline at end of file
diff --git a/css/theme/template/mixins.scss b/css/theme/template/mixins.scss
new file mode 100644
index 0000000..e0c5606
--- /dev/null
+++ b/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: $outer;
+ 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
index 0000000..bc9f138
--- /dev/null
+++ b/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;
+} \ No newline at end of file
diff --git a/css/theme/template/theme.scss b/css/theme/template/theme.scss
new file mode 100644
index 0000000..600c8e3
--- /dev/null
+++ b/css/theme/template/theme.scss
@@ -0,0 +1,163 @@
+// 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 div.left,
+.reveal .controls div.left.enabled {
+ border-right-color: $linkColor;
+}
+
+.reveal .controls div.right,
+.reveal .controls div.right.enabled {
+ border-left-color: $linkColor;
+}
+
+.reveal .controls div.up,
+.reveal .controls div.up.enabled {
+ border-bottom-color: $linkColor;
+}
+
+.reveal .controls div.down,
+.reveal .controls div.down.enabled {
+ border-top-color: $linkColor;
+}
+
+.reveal .controls div.left.enabled:hover {
+ border-right-color: $linkColorHover;
+}
+
+.reveal .controls div.right.enabled:hover {
+ border-left-color: $linkColorHover;
+}
+
+.reveal .controls div.up.enabled:hover {
+ border-bottom-color: $linkColorHover;
+}
+
+.reveal .controls div.down.enabled:hover {
+ border-top-color: $linkColorHover;
+}
+
+
+/*********************************************
+ * 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);
+ }
+
+