modularize themes and convert them to sass (closes #191)
This commit is contained in:
Hakim El Hattab
parent
3413d99b2b
commit
ecb4347ec1
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -3,3 +3,4 @@
|
||||||
log/*.log
|
log/*.log
|
||||||
tmp/**
|
tmp/**
|
||||||
node_modules/
|
node_modules/
|
||||||
|
.sass-cache
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
@charset "UTF-8";
|
@charset "UTF-8";
|
||||||
|
|
||||||
/**
|
/*!
|
||||||
* reveal.js
|
* reveal.js
|
||||||
* http://lab.hakim.se/reveal-js
|
* http://lab.hakim.se/reveal-js
|
||||||
* MIT licensed
|
* MIT licensed
|
||||||
|
|
@ -196,7 +196,7 @@ body {
|
||||||
display: block;
|
display: block;
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 90%;
|
width: 90%;
|
||||||
margin: 10px auto;
|
margin: 15px auto;
|
||||||
|
|
||||||
text-align: left;
|
text-align: left;
|
||||||
font-size: 0.55em;
|
font-size: 0.55em;
|
||||||
|
|
@ -207,6 +207,9 @@ body {
|
||||||
|
|
||||||
box-shadow: 0px 0px 6px rgba(0,0,0,0.3);
|
box-shadow: 0px 0px 6px rgba(0,0,0,0.3);
|
||||||
}
|
}
|
||||||
|
.reveal pre code {
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
.reveal code {
|
.reveal code {
|
||||||
font-family: monospace;
|
font-family: monospace;
|
||||||
|
|
|
||||||
5
css/theme/README.md
Normal file
5
css/theme/README.md
Normal file
|
|
@ -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
|
||||||
|
```
|
||||||
|
|
@ -1,190 +1,136 @@
|
||||||
/**
|
@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
|
* Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
|
||||||
*/
|
*/
|
||||||
|
|
||||||
/*********************************************
|
|
||||||
* FONTS
|
|
||||||
*********************************************/
|
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'League Gothic';
|
font-family: 'League Gothic';
|
||||||
src: url('../../lib/font/league_gothic-webfont.eot');
|
src: url("../../lib/font/league_gothic-webfont.eot");
|
||||||
src: url('../../lib/font/league_gothic-webfont.eot?#iefix') format('embedded-opentype'),
|
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");
|
||||||
url('../../lib/font/league_gothic-webfont.woff') format('woff'),
|
font-weight: normal;
|
||||||
url('../../lib/font/league_gothic-webfont.ttf') format('truetype'),
|
font-style: normal;
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* GLOBAL STYLES
|
* GLOBAL STYLES
|
||||||
*********************************************/
|
*********************************************/
|
||||||
|
|
||||||
body {
|
body {
|
||||||
color: #333;
|
background: white;
|
||||||
|
background: -moz-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
|
||||||
background: #f7f3de;
|
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, white), color-stop(100%, #f7f2d3));
|
||||||
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(247,242,211,1) 100%);
|
background: -webkit-radial-gradient(center, circle cover, white 0%, #f7f2d3 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: -o-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
|
||||||
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(247,242,211,1) 100%);
|
background: -ms-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
|
||||||
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(247,242,211,1) 100%);
|
background: radial-gradient(center, circle cover, white 0%, #f7f2d3 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%);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
::-moz-selection {
|
.reveal {
|
||||||
background:rgba(79, 64, 28, 0.99);
|
font-family: "Lato", Times, "Times New Roman", serif;
|
||||||
color: white;
|
font-size: 36px;
|
||||||
}
|
font-weight: 200;
|
||||||
::-webkit-selection {
|
letter-spacing: -0.02em;
|
||||||
background:rgba(79, 64, 28, 0.99);
|
color: #333333;
|
||||||
color: white;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
::selection {
|
::selection {
|
||||||
background:rgba(79, 64, 28, 0.99);
|
color: white;
|
||||||
color: white;
|
background: rgba(79, 64, 28, 0.99);
|
||||||
|
text-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* HEADERS
|
* HEADERS
|
||||||
*********************************************/
|
*********************************************/
|
||||||
|
|
||||||
.reveal h1,
|
.reveal h1,
|
||||||
.reveal h2,
|
.reveal h2,
|
||||||
.reveal h3,
|
.reveal h3,
|
||||||
.reveal h4,
|
.reveal h4,
|
||||||
.reveal h5,
|
.reveal h5,
|
||||||
.reveal h6 {
|
.reveal h6 {
|
||||||
margin: 0 0 20px 0;
|
margin: 0 0 20px 0;
|
||||||
color: #333;
|
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 {
|
.reveal h1 {
|
||||||
text-shadow: 0 1px 0 #ccc,
|
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);
|
||||||
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);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* LINKS
|
* LINKS
|
||||||
*********************************************/
|
*********************************************/
|
||||||
|
|
||||||
.reveal a:not(.image) {
|
.reveal a:not(.image) {
|
||||||
color: #8b743d;
|
color: #8b743d;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
-webkit-transition: color .15s ease;
|
||||||
-webkit-transition: color .15s ease;
|
-moz-transition: color .15s ease;
|
||||||
-moz-transition: color .15s ease;
|
-ms-transition: color .15s ease;
|
||||||
-ms-transition: color .15s ease;
|
-o-transition: color .15s ease;
|
||||||
-o-transition: color .15s ease;
|
transition: color .15s ease;
|
||||||
transition: color .15s ease;
|
}
|
||||||
|
|
||||||
|
.reveal a:not(.image):hover {
|
||||||
|
color: #c0a86e;
|
||||||
|
text-shadow: none;
|
||||||
|
border: none;
|
||||||
|
border-radius: 2px;
|
||||||
}
|
}
|
||||||
.reveal a:not(.image):hover {
|
|
||||||
text-shadow: none;
|
|
||||||
border: none;
|
|
||||||
border-radius: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal .roll span:after {
|
.reveal .roll span:after {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
background: #8b743d;
|
background: #564826;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* IMAGES
|
* IMAGES
|
||||||
*********************************************/
|
*********************************************/
|
||||||
|
|
||||||
.reveal section img {
|
.reveal section img {
|
||||||
margin: 30px 0 0 0;
|
margin: 15px;
|
||||||
background: rgba(255,255,255,0.12);
|
background: rgba(255, 255, 255, 0.12);
|
||||||
border: 4px solid #eee;
|
border: 4px solid #333333;
|
||||||
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
|
||||||
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
|
-webkit-transition: all .2s linear;
|
||||||
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
|
-moz-transition: all .2s linear;
|
||||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
|
-ms-transition: all .2s linear;
|
||||||
|
-o-transition: all .2s linear;
|
||||||
-webkit-transition: all .2s linear;
|
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 {
|
.reveal a:hover img {
|
||||||
background: rgba(255,255,255,0.2);
|
background: rgba(255, 255, 255, 0.2);
|
||||||
border-color: #8b743d;
|
border-color: #8b743d;
|
||||||
|
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
|
||||||
-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);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* NAVIGATION CONTROLS
|
* NAVIGATION CONTROLS
|
||||||
*********************************************/
|
*********************************************/
|
||||||
|
|
||||||
.reveal .controls a {
|
.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
|
* PROGRESS BAR
|
||||||
*********************************************/
|
*********************************************/
|
||||||
|
|
||||||
.reveal .progress {
|
.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);
|
||||||
|
}
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -1,170 +1,123 @@
|
||||||
/**
|
/*
|
||||||
* A simple theme for reveal.js presentations, similar
|
* A simple theme for reveal.js presentations, similar
|
||||||
* to the default theme. The accent color is darkblue;
|
* to the default theme. The accent color is darkblue.
|
||||||
* do a find-replace to change it.
|
|
||||||
*
|
*
|
||||||
* This theme is Copyright (C) 2012 Owen Versteeg, https://github.com/StereotypicalApps. It is MIT licensed.
|
* 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; 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
|
* GLOBAL STYLES
|
||||||
*********************************************/
|
*********************************************/
|
||||||
|
|
||||||
body {
|
body {
|
||||||
color: black !important;
|
background: #f0f1eb;
|
||||||
|
|
||||||
background: #F0F1EB;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
::-moz-selection {
|
.reveal {
|
||||||
background: #26351C;
|
font-family: "Palatino Linotype", "Book Antiqua", Palatino, FreeSerif, serif;
|
||||||
color: rgba(255,255,255, 0.8);
|
font-size: 36px;
|
||||||
}
|
font-weight: 200;
|
||||||
::-webkit-selection {
|
letter-spacing: -0.02em;
|
||||||
background: #26351C;
|
color: black;
|
||||||
color: rgba(255,255,255, 0.8);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
::selection {
|
::selection {
|
||||||
background: #26351C;
|
color: white;
|
||||||
color: rgba(255,255,255, 0.8);
|
background: #26351c;
|
||||||
|
text-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* HEADERS
|
* HEADERS
|
||||||
*********************************************/
|
*********************************************/
|
||||||
|
|
||||||
.reveal h1,
|
.reveal h1,
|
||||||
.reveal h2,
|
.reveal h2,
|
||||||
.reveal h3,
|
.reveal h3,
|
||||||
.reveal h4,
|
.reveal h4,
|
||||||
.reveal h5,
|
.reveal h5,
|
||||||
.reveal h6 {
|
.reveal h6 {
|
||||||
margin: 0 0 40px 0;
|
margin: 0 0 20px 0;
|
||||||
color: #383D3D;
|
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
|
* LINKS
|
||||||
*********************************************/
|
*********************************************/
|
||||||
|
|
||||||
.reveal a:not(.image) {
|
.reveal a:not(.image) {
|
||||||
color: #51483D;
|
color: #51483d;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
font-weight: bold;
|
-webkit-transition: color .15s ease;
|
||||||
line-height: 1.4em;
|
-moz-transition: color .15s ease;
|
||||||
-webkit-transition: color .15s ease;
|
-ms-transition: color .15s ease;
|
||||||
-moz-transition: color .15s ease;
|
-o-transition: color .15s ease;
|
||||||
-ms-transition: color .15s ease;
|
transition: color .15s ease;
|
||||||
-o-transition: color .15s ease;
|
}
|
||||||
transition: color .15s ease;
|
|
||||||
|
.reveal a:not(.image):hover {
|
||||||
|
color: #8b7c69;
|
||||||
|
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 {
|
.reveal .roll span:after {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
background: #51483D;
|
background: #25211c;
|
||||||
}
|
|
||||||
|
|
||||||
/*********************************************
|
|
||||||
* MISC
|
|
||||||
*********************************************/
|
|
||||||
|
|
||||||
.reveal p {
|
|
||||||
line-height: 1.4em;
|
|
||||||
font-size: 1.15em;
|
|
||||||
color: #111;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal .subtitle {
|
|
||||||
font-style: italic;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* IMAGES
|
* IMAGES
|
||||||
*********************************************/
|
*********************************************/
|
||||||
|
|
||||||
.reveal section img {
|
.reveal section img {
|
||||||
margin: 30px 0 0 0;
|
margin: 15px;
|
||||||
background: rgba(255,255,255,0.12);
|
background: rgba(255, 255, 255, 0.12);
|
||||||
border: 4px solid #eee;
|
border: 4px solid black;
|
||||||
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
|
||||||
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
|
-webkit-transition: all .2s linear;
|
||||||
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
|
-moz-transition: all .2s linear;
|
||||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
|
-ms-transition: all .2s linear;
|
||||||
|
-o-transition: all .2s linear;
|
||||||
-webkit-transition: all .2s linear;
|
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 {
|
.reveal a:hover img {
|
||||||
background: rgba(255,255,255,0.2);
|
background: rgba(255, 255, 255, 0.2);
|
||||||
border-color: darkblue;
|
border-color: #51483d;
|
||||||
|
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
|
||||||
-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);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* NAVIGATION CONTROLS
|
* NAVIGATION CONTROLS
|
||||||
*********************************************/
|
*********************************************/
|
||||||
|
|
||||||
.reveal .controls a {
|
.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
|
* PROGRESS BAR
|
||||||
*********************************************/
|
*********************************************/
|
||||||
|
|
||||||
.reveal .progress {
|
.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);
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,163 +1,125 @@
|
||||||
/**
|
@import url(http://fonts.googleapis.com/css?family=News+Cycle:400,700);
|
||||||
|
@import url(http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
|
||||||
|
/*
|
||||||
* A simple theme for reveal.js presentations, similar
|
* A simple theme for reveal.js presentations, similar
|
||||||
* to the default theme. The accent color is darkblue;
|
* to the default theme. The accent color is darkblue.
|
||||||
* do a find-replace to change it.
|
|
||||||
*
|
*
|
||||||
* This theme is Copyright (C) 2012 Owen Versteeg, https://github.com/StereotypicalApps. It is MIT licensed.
|
* 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
|
* GLOBAL STYLES
|
||||||
*********************************************/
|
*********************************************/
|
||||||
|
|
||||||
body {
|
body {
|
||||||
color: black !important;
|
background: white;
|
||||||
|
|
||||||
background: white;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
::-moz-selection {
|
.reveal {
|
||||||
background:rgba(0, 0, 0, 0.99);
|
font-family: "Lato", Times, "Times New Roman", serif;
|
||||||
color: white;
|
font-size: 36px;
|
||||||
}
|
font-weight: 200;
|
||||||
::-webkit-selection {
|
letter-spacing: -0.02em;
|
||||||
background:rgba(0, 0, 0, 0.99);
|
color: black;
|
||||||
color: white;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
::selection {
|
::selection {
|
||||||
background:rgba(0, 0, 0, 0.99);
|
color: white;
|
||||||
color: white;
|
background: rgba(0, 0, 0, 0.99);
|
||||||
|
text-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* HEADERS
|
* HEADERS
|
||||||
*********************************************/
|
*********************************************/
|
||||||
|
|
||||||
.reveal h1,
|
.reveal h1,
|
||||||
.reveal h2,
|
.reveal h2,
|
||||||
.reveal h3,
|
.reveal h3,
|
||||||
.reveal h4,
|
.reveal h4,
|
||||||
.reveal h5,
|
.reveal h5,
|
||||||
.reveal h6 {
|
.reveal h6 {
|
||||||
margin: 0 0 20px 0;
|
margin: 0 0 20px 0;
|
||||||
color: black;
|
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
|
* LINKS
|
||||||
*********************************************/
|
*********************************************/
|
||||||
|
|
||||||
.reveal a:not(.image) {
|
.reveal a:not(.image) {
|
||||||
color: darkblue;
|
color: darkblue;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
-webkit-transition: color .15s ease;
|
||||||
-webkit-transition: color .15s ease;
|
-moz-transition: color .15s ease;
|
||||||
-moz-transition: color .15s ease;
|
-ms-transition: color .15s ease;
|
||||||
-ms-transition: color .15s ease;
|
-o-transition: color .15s ease;
|
||||||
-o-transition: color .15s ease;
|
transition: color .15s ease;
|
||||||
transition: color .15s ease;
|
}
|
||||||
|
|
||||||
|
.reveal a:not(.image):hover {
|
||||||
|
color: #0000f1;
|
||||||
|
text-shadow: none;
|
||||||
|
border: none;
|
||||||
|
border-radius: 2px;
|
||||||
}
|
}
|
||||||
.reveal a:not(.image):hover {
|
|
||||||
text-shadow: none;
|
|
||||||
border: none;
|
|
||||||
border-radius: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal .roll span:after {
|
.reveal .roll span:after {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
background: darkblue;
|
background: #00003f;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* IMAGES
|
* IMAGES
|
||||||
*********************************************/
|
*********************************************/
|
||||||
|
|
||||||
.reveal section img {
|
.reveal section img {
|
||||||
margin: 30px 0 0 0;
|
margin: 15px;
|
||||||
background: rgba(255,255,255,0.12);
|
background: rgba(255, 255, 255, 0.12);
|
||||||
border: 4px solid #eee;
|
border: 4px solid black;
|
||||||
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
|
||||||
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
|
-webkit-transition: all .2s linear;
|
||||||
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
|
-moz-transition: all .2s linear;
|
||||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
|
-ms-transition: all .2s linear;
|
||||||
|
-o-transition: all .2s linear;
|
||||||
-webkit-transition: all .2s linear;
|
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 {
|
.reveal a:hover img {
|
||||||
background: rgba(255,255,255,0.2);
|
background: rgba(255, 255, 255, 0.2);
|
||||||
border-color: darkblue;
|
border-color: darkblue;
|
||||||
|
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
|
||||||
-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);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* NAVIGATION CONTROLS
|
* NAVIGATION CONTROLS
|
||||||
*********************************************/
|
*********************************************/
|
||||||
|
|
||||||
.reveal .controls a {
|
.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
|
* PROGRESS BAR
|
||||||
*********************************************/
|
*********************************************/
|
||||||
|
|
||||||
.reveal .progress {
|
.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);
|
||||||
|
}
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
50
css/theme/source/beige.scss
Normal file
50
css/theme/source/beige.scss
Normal file
|
|
@ -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";
|
||||||
|
// ---------------------------------------------
|
||||||
42
css/theme/source/default.scss
Normal file
42
css/theme/source/default.scss
Normal file
|
|
@ -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";
|
||||||
|
// ---------------------------------------------
|
||||||
33
css/theme/source/serif.scss
Normal file
33
css/theme/source/serif.scss
Normal file
|
|
@ -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";
|
||||||
|
// ---------------------------------------------
|
||||||
38
css/theme/source/simple.scss
Normal file
38
css/theme/source/simple.scss
Normal file
|
|
@ -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";
|
||||||
|
// ---------------------------------------------
|
||||||
41
css/theme/source/sky.scss
Normal file
41
css/theme/source/sky.scss
Normal file
|
|
@ -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";
|
||||||
|
// ---------------------------------------------
|
||||||
29
css/theme/template/mixins.scss
Normal file
29
css/theme/template/mixins.scss
Normal file
|
|
@ -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% );
|
||||||
|
}
|
||||||
33
css/theme/template/settings.scss
Normal file
33
css/theme/template/settings.scss
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
135
css/theme/template/theme.scss
Normal file
135
css/theme/template/theme.scss
Normal file
|
|
@ -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);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -12,8 +12,6 @@
|
||||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
<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/reveal.css">
|
||||||
<link rel="stylesheet" href="css/theme/default.css" id="theme">
|
<link rel="stylesheet" href="css/theme/default.css" id="theme">
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -664,6 +664,8 @@ var Reveal = (function(){
|
||||||
|
|
||||||
updateControls();
|
updateControls();
|
||||||
|
|
||||||
|
// Update the URL hash after a delay since updating it mid-transition
|
||||||
|
// is likely to cause visual lag
|
||||||
clearTimeout( writeURLTimeout );
|
clearTimeout( writeURLTimeout );
|
||||||
writeURLTimeout = setTimeout( writeURL, 1500 );
|
writeURLTimeout = setTimeout( writeURL, 1500 );
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user