modularize themes and convert them to sass (closes #191)
This commit is contained in:
parent
3413d99b2b
commit
ecb4347ec1
1
.gitignore
vendored
1
.gitignore
vendored
|
@ -3,3 +3,4 @@
|
|||
log/*.log
|
||||
tmp/**
|
||||
node_modules/
|
||||
.sass-cache
|
|
@ -1,6 +1,6 @@
|
|||
@charset "UTF-8";
|
||||
|
||||
/**
|
||||
/*!
|
||||
* reveal.js
|
||||
* http://lab.hakim.se/reveal-js
|
||||
* MIT licensed
|
||||
|
@ -196,7 +196,7 @@ body {
|
|||
display: block;
|
||||
position: relative;
|
||||
width: 90%;
|
||||
margin: 10px auto;
|
||||
margin: 15px auto;
|
||||
|
||||
text-align: left;
|
||||
font-size: 0.55em;
|
||||
|
@ -207,6 +207,9 @@ body {
|
|||
|
||||
box-shadow: 0px 0px 6px rgba(0,0,0,0.3);
|
||||
}
|
||||
.reveal pre code {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.reveal code {
|
||||
font-family: monospace;
|
||||
|
|
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,81 +1,47 @@
|
|||
/**
|
||||
* A beige theme for reveal.js presentations, similar
|
||||
* to the default theme.
|
||||
@import url(http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
|
||||
/*
|
||||
* Beige theme for reveal.js.
|
||||
*
|
||||
* Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
|
||||
*/
|
||||
|
||||
/*********************************************
|
||||
* FONTS
|
||||
*********************************************/
|
||||
|
||||
@font-face {
|
||||
font-family: 'League Gothic';
|
||||
src: url('../../lib/font/league_gothic-webfont.eot');
|
||||
src: url('../../lib/font/league_gothic-webfont.eot?#iefix') format('embedded-opentype'),
|
||||
url('../../lib/font/league_gothic-webfont.woff') format('woff'),
|
||||
url('../../lib/font/league_gothic-webfont.ttf') format('truetype'),
|
||||
url('../../lib/font/league_gothic-webfont.svg#LeagueGothicRegular') format('svg');
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
/*********************************************
|
||||
* GLOBAL STYLES
|
||||
*********************************************/
|
||||
|
||||
body {
|
||||
color: #333;
|
||||
|
||||
background: #f7f3de;
|
||||
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(247,242,211,1) 100%);
|
||||
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(247,242,211,1)));
|
||||
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(247,242,211,1) 100%);
|
||||
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(247,242,211,1) 100%);
|
||||
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(247,242,211,1) 100%);
|
||||
background: radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(247,242,211,1) 100%);
|
||||
background: white;
|
||||
background: -moz-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
|
||||
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, white), color-stop(100%, #f7f2d3));
|
||||
background: -webkit-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
|
||||
background: -o-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
|
||||
background: -ms-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
|
||||
background: radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
|
||||
}
|
||||
|
||||
::-moz-selection {
|
||||
background:rgba(79, 64, 28, 0.99);
|
||||
color: white;
|
||||
}
|
||||
::-webkit-selection {
|
||||
background:rgba(79, 64, 28, 0.99);
|
||||
color: white;
|
||||
.reveal {
|
||||
font-family: "Lato", Times, "Times New Roman", serif;
|
||||
font-size: 36px;
|
||||
font-weight: 200;
|
||||
letter-spacing: -0.02em;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background:rgba(79, 64, 28, 0.99);
|
||||
color: white;
|
||||
background: rgba(79, 64, 28, 0.99);
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
|
||||
/*********************************************
|
||||
* HEADERS
|
||||
*********************************************/
|
||||
|
||||
.reveal h1,
|
||||
.reveal h2,
|
||||
.reveal h3,
|
||||
|
@ -83,63 +49,51 @@ body {
|
|||
.reveal h5,
|
||||
.reveal h6 {
|
||||
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 {
|
||||
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;
|
||||
|
||||
-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 {
|
||||
|
||||
.reveal a:not(.image):hover {
|
||||
color: #c0a86e;
|
||||
text-shadow: none;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.reveal .roll span:after {
|
||||
color: #fff;
|
||||
background: #8b743d;
|
||||
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);
|
||||
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;
|
||||
|
@ -147,44 +101,36 @@ body {
|
|||
transition: all .2s linear;
|
||||
}
|
||||
|
||||
.reveal a:hover img {
|
||||
background: rgba(255,255,255,0.2);
|
||||
.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);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* NAVIGATION CONTROLS
|
||||
*********************************************/
|
||||
|
||||
.reveal .controls a {
|
||||
color: #fff;
|
||||
color: #333333;
|
||||
}
|
||||
.reveal .controls a.enabled {
|
||||
color: #8b743d;
|
||||
text-shadow: 0px 0px 2px hsla(185, 45%, 70%, 0.3);
|
||||
}
|
||||
|
||||
.reveal .controls a.enabled {
|
||||
color: #c0a86e;
|
||||
text-shadow: 0px 0px 2px rgba(144, 207, 213, 0.3);
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* PROGRESS BAR
|
||||
*********************************************/
|
||||
|
||||
.reveal .progress {
|
||||
background: rgba(0,0,0,0.2);
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.reveal .progress span {
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
|
||||
-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,124 +1,86 @@
|
|||
/**
|
||||
/*
|
||||
* 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 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;
|
||||
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 {
|
||||
|
||||
.reveal a:not(.image):hover {
|
||||
color: #8b7c69;
|
||||
text-shadow: none;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.reveal .roll span:after {
|
||||
color: #fff;
|
||||
background: #51483D;
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* MISC
|
||||
*********************************************/
|
||||
|
||||
.reveal p {
|
||||
line-height: 1.4em;
|
||||
font-size: 1.15em;
|
||||
color: #111;
|
||||
}
|
||||
|
||||
.reveal .subtitle {
|
||||
font-style: italic;
|
||||
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);
|
||||
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;
|
||||
|
@ -126,45 +88,36 @@ body {
|
|||
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);
|
||||
.reveal a:hover img {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-color: #51483d;
|
||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* NAVIGATION CONTROLS
|
||||
*********************************************/
|
||||
|
||||
.reveal .controls a {
|
||||
color: black;
|
||||
}
|
||||
.reveal .controls a.enabled {
|
||||
color: #26351C;
|
||||
opacity: 1;
|
||||
text-shadow: 0px 0px 2px hsla(185, 45%, 70%, 0.3);
|
||||
}
|
||||
|
||||
.reveal .controls a.enabled {
|
||||
color: #8b7c69;
|
||||
text-shadow: 0px 0px 2px rgba(144, 207, 213, 0.3);
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* PROGRESS BAR
|
||||
*********************************************/
|
||||
|
||||
.reveal .progress {
|
||||
background: rgba(0,0,0,0.2);
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.reveal .progress span {
|
||||
background: #26351C;
|
||||
|
||||
-webkit-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
|
||||
-moz-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
|
||||
-ms-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
|
||||
-o-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
|
||||
transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
|
||||
}
|
||||
|
||||
|
||||
.reveal .progress span {
|
||||
background: #51483d;
|
||||
-webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
|
||||
-moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
|
||||
-ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
|
||||
-o-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
|
||||
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
|
||||
}
|
||||
|
|
|
@ -1,67 +1,36 @@
|
|||
/**
|
||||
@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;
|
||||
}
|
||||
|
||||
::-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;
|
||||
background: rgba(0, 0, 0, 0.99);
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* HEADERS
|
||||
*********************************************/
|
||||
|
||||
.reveal h1,
|
||||
.reveal h2,
|
||||
.reveal h3,
|
||||
|
@ -70,48 +39,50 @@ body {
|
|||
.reveal h6 {
|
||||
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;
|
||||
|
||||
-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 {
|
||||
|
||||
.reveal a:not(.image):hover {
|
||||
color: #0000f1;
|
||||
text-shadow: none;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.reveal .roll span:after {
|
||||
color: #fff;
|
||||
background: darkblue;
|
||||
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);
|
||||
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;
|
||||
|
@ -119,45 +90,36 @@ body {
|
|||
transition: all .2s linear;
|
||||
}
|
||||
|
||||
.reveal a:hover img {
|
||||
background: rgba(255,255,255,0.2);
|
||||
.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);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* NAVIGATION CONTROLS
|
||||
*********************************************/
|
||||
|
||||
.reveal .controls a {
|
||||
color: black;
|
||||
}
|
||||
.reveal .controls a.enabled {
|
||||
color: darkblue;
|
||||
opacity: 1;
|
||||
text-shadow: 0px 0px 2px hsla(185, 45%, 70%, 0.3);
|
||||
}
|
||||
|
||||
.reveal .controls a.enabled {
|
||||
color: #0000f1;
|
||||
text-shadow: 0px 0px 2px rgba(144, 207, 213, 0.3);
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* PROGRESS BAR
|
||||
*********************************************/
|
||||
|
||||
.reveal .progress {
|
||||
background: rgba(0,0,0,0.2);
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.reveal .progress span {
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
|
||||
-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-status-bar-style" content="black-translucent" />
|
||||
|
||||
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
|
||||
|
||||
<link rel="stylesheet" href="css/reveal.css">
|
||||
<link rel="stylesheet" href="css/theme/default.css" id="theme">
|
||||
|
||||
|
|
|
@ -664,6 +664,8 @@ var Reveal = (function(){
|
|||
|
||||
updateControls();
|
||||
|
||||
// Update the URL hash after a delay since updating it mid-transition
|
||||
// is likely to cause visual lag
|
||||
clearTimeout( writeURLTimeout );
|
||||
writeURLTimeout = setTimeout( writeURL, 1500 );
|
||||
|
||||
|
|
Loading…
Reference in New Issue
Block a user