diff options
Diffstat (limited to 'css')
-rw-r--r-- | css/theme/README.md | 25 | ||||
-rw-r--r-- | css/theme/beige.css | 81 | ||||
-rw-r--r-- | css/theme/default.css | 81 | ||||
-rw-r--r-- | css/theme/moon.css | 142 | ||||
-rw-r--r-- | css/theme/night.css | 78 | ||||
-rw-r--r-- | css/theme/serif.css | 80 | ||||
-rw-r--r-- | css/theme/simple.css | 78 | ||||
-rw-r--r-- | css/theme/sky.css | 76 | ||||
-rw-r--r-- | css/theme/solarized.css | 142 | ||||
-rw-r--r-- | css/theme/source/moon.scss | 68 | ||||
-rw-r--r-- | css/theme/source/night.scss | 2 | ||||
-rw-r--r-- | css/theme/source/serif.scss | 4 | ||||
-rw-r--r-- | css/theme/source/simple.scss | 2 | ||||
-rw-r--r-- | css/theme/source/solarized.scss | 74 | ||||
-rw-r--r-- | css/theme/template/settings.scss | 4 |
15 files changed, 608 insertions, 329 deletions
diff --git a/css/theme/README.md b/css/theme/README.md deleted file mode 100644 index f3a2a2b..0000000 --- a/css/theme/README.md +++ /dev/null @@ -1,25 +0,0 @@ -## Dependencies - -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 -``` - - - -## Creating a Theme - -To create your own theme, start by duplicating any ```.scss``` file in [/css/theme/source](https://github.com/hakimel/reveal.js/blob/master/css/theme/source). Each theme does four things in the following order: - -1. **Include [/css/theme/template/mixins.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/mixins.scss)** -Shared utility functions. - -2. **Include [/css/theme/template/settings.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/settings.scss)** -Declares a set of custom variables that the template file (step 4) expects. Can be overridden in step 3. - -3. **Override** -This is where you override the default theme. Either by specifying variables (see [settings.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/settings.scss) for reference) or by adding full selectors with hardcoded styles. - -4. **Include [/css/theme/template/theme.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/theme.scss)** -The template theme file which will generate final CSS output based on the currently defined variables. diff --git a/css/theme/beige.css b/css/theme/beige.css index d9f8501..b0610d4 100644 --- a/css/theme/beige.css +++ b/css/theme/beige.css @@ -9,8 +9,7 @@ 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; -} + font-style: normal; } /********************************************* * GLOBAL STYLES @@ -23,22 +22,19 @@ body { 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%); - background-color: #f7f3de; -} + background-color: #f7f3de; } .reveal { - font-family: "Lato", Times, "Times New Roman", serif; + font-family: "Lato", sans-serif; font-size: 36px; font-weight: 200; letter-spacing: -0.02em; - color: #333333; -} + color: #333333; } ::selection { color: white; background: rgba(79, 64, 28, 0.99); - text-shadow: none; -} + text-shadow: none; } /********************************************* * HEADERS @@ -55,12 +51,10 @@ body { line-height: 0.9em; letter-spacing: 0.02em; text-transform: uppercase; - text-shadow: none; -} + text-shadow: none; } .reveal h1 { - 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); -} + 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 @@ -68,23 +62,20 @@ body { .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; -} + -webkit-transition: color 0.15s ease; + -moz-transition: color 0.15s ease; + -ms-transition: color 0.15s ease; + -o-transition: color 0.15s ease; + transition: color 0.15s ease; } .reveal a:not(.image):hover { color: #c0a86e; text-shadow: none; - border: none; -} + border: none; } .reveal .roll span:after { color: #fff; - background: #564826; -} + background: #564826; } /********************************************* * IMAGES @@ -94,64 +85,53 @@ body { 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; -} + -webkit-transition: all 0.2s linear; + -moz-transition: all 0.2s linear; + -ms-transition: all 0.2s linear; + -o-transition: all 0.2s linear; + transition: all 0.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); -} + box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); } /********************************************* * NAVIGATION CONTROLS *********************************************/ .reveal .controls div.navigate-left, .reveal .controls div.navigate-left.enabled { - border-right-color: #8b743d; -} + border-right-color: #8b743d; } .reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled { - border-left-color: #8b743d; -} + border-left-color: #8b743d; } .reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled { - border-bottom-color: #8b743d; -} + border-bottom-color: #8b743d; } .reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled { - border-top-color: #8b743d; -} + border-top-color: #8b743d; } .reveal .controls div.navigate-left.enabled:hover { - border-right-color: #c0a86e; -} + border-right-color: #c0a86e; } .reveal .controls div.navigate-right.enabled:hover { - border-left-color: #c0a86e; -} + border-left-color: #c0a86e; } .reveal .controls div.navigate-up.enabled:hover { - border-bottom-color: #c0a86e; -} + border-bottom-color: #c0a86e; } .reveal .controls div.navigate-down.enabled:hover { - border-top-color: #c0a86e; -} + 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; @@ -159,5 +139,4 @@ body { -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); -} + 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 86e65ce..480ac69 100644 --- a/css/theme/default.css +++ b/css/theme/default.css @@ -9,8 +9,7 @@ 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; -} + font-style: normal; } /********************************************* * GLOBAL STYLES @@ -23,22 +22,19 @@ body { 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-color: #2b2b2b; -} + background-color: #2b2b2b; } .reveal { - font-family: "Lato", Times, "Times New Roman", serif; + font-family: "Lato", sans-serif; font-size: 36px; font-weight: 200; letter-spacing: -0.02em; - color: #eeeeee; -} + color: #eeeeee; } ::selection { color: white; background: #ff5e99; - text-shadow: none; -} + text-shadow: none; } /********************************************* * HEADERS @@ -55,12 +51,10 @@ body { line-height: 0.9em; letter-spacing: 0.02em; text-transform: uppercase; - text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); -} + text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); } .reveal h1 { - 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); -} + 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 @@ -68,23 +62,20 @@ body { .reveal a:not(.image) { color: #13daec; text-decoration: none; - -webkit-transition: color .15s ease; - -moz-transition: color .15s ease; - -ms-transition: color .15s ease; - -o-transition: color .15s ease; - transition: color .15s ease; -} + -webkit-transition: color 0.15s ease; + -moz-transition: color 0.15s ease; + -ms-transition: color 0.15s ease; + -o-transition: color 0.15s ease; + transition: color 0.15s ease; } .reveal a:not(.image):hover { color: #71e9f4; text-shadow: none; - border: none; -} + border: none; } .reveal .roll span:after { color: #fff; - background: #0d99a5; -} + background: #0d99a5; } /********************************************* * IMAGES @@ -94,64 +85,53 @@ body { 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; -} + -webkit-transition: all 0.2s linear; + -moz-transition: all 0.2s linear; + -ms-transition: all 0.2s linear; + -o-transition: all 0.2s linear; + transition: all 0.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); -} + box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); } /********************************************* * NAVIGATION CONTROLS *********************************************/ .reveal .controls div.navigate-left, .reveal .controls div.navigate-left.enabled { - border-right-color: #13daec; -} + border-right-color: #13daec; } .reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled { - border-left-color: #13daec; -} + border-left-color: #13daec; } .reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled { - border-bottom-color: #13daec; -} + border-bottom-color: #13daec; } .reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled { - border-top-color: #13daec; -} + border-top-color: #13daec; } .reveal .controls div.navigate-left.enabled:hover { - border-right-color: #71e9f4; -} + border-right-color: #71e9f4; } .reveal .controls div.navigate-right.enabled:hover { - border-left-color: #71e9f4; -} + border-left-color: #71e9f4; } .reveal .controls div.navigate-up.enabled:hover { - border-bottom-color: #71e9f4; -} + border-bottom-color: #71e9f4; } .reveal .controls div.navigate-down.enabled:hover { - border-top-color: #71e9f4; -} + 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: #13daec; @@ -159,5 +139,4 @@ body { -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); -} + transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } diff --git a/css/theme/moon.css b/css/theme/moon.css new file mode 100644 index 0000000..24c1d7b --- /dev/null +++ b/css/theme/moon.css @@ -0,0 +1,142 @@ +@import url(http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); +/** + * Solarized Dark theme for reveal.js. + * Author: Achim Staebler + */ +@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; } + +/** + * Solarized colors by Ethan Schoonover + */ +html * { + color-profile: sRGB; + rendering-intent: auto; } + +/********************************************* + * GLOBAL STYLES + *********************************************/ +body { + background: #002b36; + background-color: #002b36; } + +.reveal { + font-family: "Lato", sans-serif; + font-size: 36px; + font-weight: 200; + letter-spacing: -0.02em; + color: #93a1a1; } + +::selection { + color: white; + background: #d33682; + text-shadow: none; } + +/********************************************* + * HEADERS + *********************************************/ +.reveal h1, +.reveal h2, +.reveal h3, +.reveal h4, +.reveal h5, +.reveal h6 { + margin: 0 0 20px 0; + color: #eee8d5; + 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: 0px 0px 6px rgba(0, 0, 0, 0.2); } + +/********************************************* + * LINKS + *********************************************/ +.reveal a:not(.image) { + color: #268bd2; + text-decoration: none; + -webkit-transition: color 0.15s ease; + -moz-transition: color 0.15s ease; + -ms-transition: color 0.15s ease; + -o-transition: color 0.15s ease; + transition: color 0.15s ease; } + +.reveal a:not(.image):hover { + color: #78b9e6; + text-shadow: none; + border: none; } + +.reveal .roll span:after { + color: #fff; + background: #1a6091; } + +/********************************************* + * IMAGES + *********************************************/ +.reveal section img { + margin: 15px 0px; + background: rgba(255, 255, 255, 0.12); + border: 4px solid #93a1a1; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); + -webkit-transition: all 0.2s linear; + -moz-transition: all 0.2s linear; + -ms-transition: all 0.2s linear; + -o-transition: all 0.2s linear; + transition: all 0.2s linear; } + +.reveal a:hover img { + background: rgba(255, 255, 255, 0.2); + border-color: #268bd2; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); } + +/********************************************* + * NAVIGATION CONTROLS + *********************************************/ +.reveal .controls div.navigate-left, +.reveal .controls div.navigate-left.enabled { + border-right-color: #268bd2; } + +.reveal .controls div.navigate-right, +.reveal .controls div.navigate-right.enabled { + border-left-color: #268bd2; } + +.reveal .controls div.navigate-up, +.reveal .controls div.navigate-up.enabled { + border-bottom-color: #268bd2; } + +.reveal .controls div.navigate-down, +.reveal .controls div.navigate-down.enabled { + border-top-color: #268bd2; } + +.reveal .controls div.navigate-left.enabled:hover { + border-right-color: #78b9e6; } + +.reveal .controls div.navigate-right.enabled:hover { + border-left-color: #78b9e6; } + +.reveal .controls div.navigate-up.enabled:hover { + border-bottom-color: #78b9e6; } + +.reveal .controls div.navigate-down.enabled:hover { + border-top-color: #78b9e6; } + +/********************************************* + * PROGRESS BAR + *********************************************/ +.reveal .progress { + background: rgba(0, 0, 0, 0.2); } + +.reveal .progress span { + background: #268bd2; + -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/night.css b/css/theme/night.css index f10598f..e2e9508 100644 --- a/css/theme/night.css +++ b/css/theme/night.css @@ -10,22 +10,19 @@ *********************************************/ body { background: #111111; - background-color: #111111; -} + background-color: #111111; } .reveal { - font-family: "Open Sans", Times, "Times New Roman", serif; + font-family: "Open Sans", sans-serif; font-size: 30px; font-weight: 200; letter-spacing: -0.02em; - color: #eeeeee; -} + color: #eeeeee; } ::selection { color: white; background: #e7ad52; - text-shadow: none; -} + text-shadow: none; } /********************************************* * HEADERS @@ -42,12 +39,10 @@ body { line-height: 0.9em; letter-spacing: -0.03em; text-transform: none; - text-shadow: none; -} + text-shadow: none; } .reveal h1 { - text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); -} + text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); } /********************************************* * LINKS @@ -55,23 +50,20 @@ body { .reveal a:not(.image) { color: #e7ad52; 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 0.15s ease; + -moz-transition: color 0.15s ease; + -ms-transition: color 0.15s ease; + -o-transition: color 0.15s ease; + transition: color 0.15s ease; } .reveal a:not(.image):hover { color: #f3d7ac; text-shadow: none; - border: none; -} + border: none; } .reveal .roll span:after { color: #fff; - background: #d08a1d; -} + background: #d08a1d; } /********************************************* * IMAGES @@ -81,64 +73,53 @@ body { 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; -} + -webkit-transition: all 0.2s linear; + -moz-transition: all 0.2s linear; + -ms-transition: all 0.2s linear; + -o-transition: all 0.2s linear; + transition: all 0.2s linear; } .reveal a:hover img { background: rgba(255, 255, 255, 0.2); border-color: #e7ad52; - 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 div.navigate-left, .reveal .controls div.navigate-left.enabled { - border-right-color: #e7ad52; -} + border-right-color: #e7ad52; } .reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled { - border-left-color: #e7ad52; -} + border-left-color: #e7ad52; } .reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled { - border-bottom-color: #e7ad52; -} + border-bottom-color: #e7ad52; } .reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled { - border-top-color: #e7ad52; -} + border-top-color: #e7ad52; } .reveal .controls div.navigate-left.enabled:hover { - border-right-color: #f3d7ac; -} + border-right-color: #f3d7ac; } .reveal .controls div.navigate-right.enabled:hover { - border-left-color: #f3d7ac; -} + border-left-color: #f3d7ac; } .reveal .controls div.navigate-up.enabled:hover { - border-bottom-color: #f3d7ac; -} + border-bottom-color: #f3d7ac; } .reveal .controls div.navigate-down.enabled:hover { - border-top-color: #f3d7ac; -} + border-top-color: #f3d7ac; } /********************************************* * PROGRESS BAR *********************************************/ .reveal .progress { - background: rgba(0, 0, 0, 0.2); -} + background: rgba(0, 0, 0, 0.2); } .reveal .progress span { background: #e7ad52; @@ -146,5 +127,4 @@ body { -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); -} + 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 aaabf47..2b1f4fd 100644 --- a/css/theme/serif.css +++ b/css/theme/serif.css @@ -1,7 +1,7 @@ /** - * 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. - * + * * 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. */ @@ -10,22 +10,19 @@ *********************************************/ body { background: #f0f1eb; - background-color: #f0f1eb; -} + background-color: #f0f1eb; } .reveal { font-family: "Palatino Linotype", "Book Antiqua", Palatino, FreeSerif, serif; font-size: 36px; font-weight: 200; letter-spacing: -0.02em; - color: black; -} + color: black; } ::selection { color: white; background: #26351c; - text-shadow: none; -} + text-shadow: none; } /********************************************* * HEADERS @@ -42,12 +39,10 @@ body { line-height: 0.9em; letter-spacing: 0.02em; text-transform: none; - text-shadow: none; -} + text-shadow: none; } .reveal h1 { - text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); -} + text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); } /********************************************* * LINKS @@ -55,23 +50,20 @@ body { .reveal a:not(.image) { 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; -} + -webkit-transition: color 0.15s ease; + -moz-transition: color 0.15s ease; + -ms-transition: color 0.15s ease; + -o-transition: color 0.15s ease; + transition: color 0.15s ease; } .reveal a:not(.image):hover { color: #8b7c69; text-shadow: none; - border: none; -} + border: none; } .reveal .roll span:after { color: #fff; - background: #25211c; -} + background: #25211c; } /********************************************* * IMAGES @@ -81,64 +73,53 @@ body { 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; -} + -webkit-transition: all 0.2s linear; + -moz-transition: all 0.2s linear; + -ms-transition: all 0.2s linear; + -o-transition: all 0.2s linear; + transition: all 0.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); -} + box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); } /********************************************* * NAVIGATION CONTROLS *********************************************/ .reveal .controls div.navigate-left, .reveal .controls div.navigate-left.enabled { - border-right-color: #51483d; -} + border-right-color: #51483d; } .reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled { - border-left-color: #51483d; -} + border-left-color: #51483d; } .reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled { - border-bottom-color: #51483d; -} + border-bottom-color: #51483d; } .reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled { - border-top-color: #51483d; -} + border-top-color: #51483d; } .reveal .controls div.navigate-left.enabled:hover { - border-right-color: #8b7c69; -} + border-right-color: #8b7c69; } .reveal .controls div.navigate-right.enabled:hover { - border-left-color: #8b7c69; -} + border-left-color: #8b7c69; } .reveal .controls div.navigate-up.enabled:hover { - border-bottom-color: #8b7c69; -} + border-bottom-color: #8b7c69; } .reveal .controls div.navigate-down.enabled:hover { - border-top-color: #8b7c69; -} + 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: #51483d; @@ -146,5 +127,4 @@ body { -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); -} + 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 a68729f..0aef916 100644 --- a/css/theme/simple.css +++ b/css/theme/simple.css @@ -12,22 +12,19 @@ *********************************************/ body { background: white; - background-color: white; -} + background-color: white; } .reveal { - font-family: "Lato", Times, "Times New Roman", serif; + font-family: "Lato", sans-serif; font-size: 36px; font-weight: 200; letter-spacing: -0.02em; - color: black; -} + color: black; } ::selection { color: white; background: rgba(0, 0, 0, 0.99); - text-shadow: none; -} + text-shadow: none; } /********************************************* * HEADERS @@ -44,12 +41,10 @@ body { line-height: 0.9em; letter-spacing: 0.02em; text-transform: none; - text-shadow: none; -} + text-shadow: none; } .reveal h1 { - text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); -} + text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); } /********************************************* * LINKS @@ -57,23 +52,20 @@ body { .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; -} + -webkit-transition: color 0.15s ease; + -moz-transition: color 0.15s ease; + -ms-transition: color 0.15s ease; + -o-transition: color 0.15s ease; + transition: color 0.15s ease; } .reveal a:not(.image):hover { color: #0000f1; text-shadow: none; - border: none; -} + border: none; } .reveal .roll span:after { color: #fff; - background: #00003f; -} + background: #00003f; } /********************************************* * IMAGES @@ -83,64 +75,53 @@ body { 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; -} + -webkit-transition: all 0.2s linear; + -moz-transition: all 0.2s linear; + -ms-transition: all 0.2s linear; + -o-transition: all 0.2s linear; + transition: all 0.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); -} + box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); } /********************************************* * NAVIGATION CONTROLS *********************************************/ .reveal .controls div.navigate-left, .reveal .controls div.navigate-left.enabled { - border-right-color: darkblue; -} + border-right-color: darkblue; } .reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled { - border-left-color: darkblue; -} + border-left-color: darkblue; } .reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled { - border-bottom-color: darkblue; -} + border-bottom-color: darkblue; } .reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled { - border-top-color: darkblue; -} + border-top-color: darkblue; } .reveal .controls div.navigate-left.enabled:hover { - border-right-color: #0000f1; -} + border-right-color: #0000f1; } .reveal .controls div.navigate-right.enabled:hover { - border-left-color: #0000f1; -} + border-left-color: #0000f1; } .reveal .controls div.navigate-up.enabled:hover { - border-bottom-color: #0000f1; -} + border-bottom-color: #0000f1; } .reveal .controls div.navigate-down.enabled:hover { - border-top-color: #0000f1; -} + 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; @@ -148,5 +129,4 @@ body { -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); -} + 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 a1b3b96..c5cbbeb 100644 --- a/css/theme/sky.css +++ b/css/theme/sky.css @@ -16,22 +16,19 @@ body { 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%); - background-color: #f7fbfc; -} + background-color: #f7fbfc; } .reveal { font-family: "Open Sans", sans-serif; font-size: 36px; font-weight: 200; letter-spacing: -0.02em; - color: #333333; -} + color: #333333; } ::selection { color: white; background: #134674; - text-shadow: none; -} + text-shadow: none; } /********************************************* * HEADERS @@ -48,12 +45,10 @@ body { line-height: 0.9em; letter-spacing: -0.08em; text-transform: uppercase; - text-shadow: none; -} + text-shadow: none; } .reveal h1 { - text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); -} + text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); } /********************************************* * LINKS @@ -61,23 +56,20 @@ body { .reveal a:not(.image) { 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 0.15s ease; + -moz-transition: color 0.15s ease; + -ms-transition: color 0.15s ease; + -o-transition: color 0.15s ease; + transition: color 0.15s ease; } .reveal a:not(.image):hover { color: #74a7cb; text-shadow: none; - border: none; -} + border: none; } .reveal .roll span:after { color: #fff; - background: #264c66; -} + background: #264c66; } /********************************************* * IMAGES @@ -87,64 +79,53 @@ body { 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; -} + -webkit-transition: all 0.2s linear; + -moz-transition: all 0.2s linear; + -ms-transition: all 0.2s linear; + -o-transition: all 0.2s linear; + transition: all 0.2s linear; } .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); -} + box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); } /********************************************* * NAVIGATION CONTROLS *********************************************/ .reveal .controls div.navigate-left, .reveal .controls div.navigate-left.enabled { - border-right-color: #3b759e; -} + border-right-color: #3b759e; } .reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled { - border-left-color: #3b759e; -} + border-left-color: #3b759e; } .reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled { - border-bottom-color: #3b759e; -} + border-bottom-color: #3b759e; } .reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled { - border-top-color: #3b759e; -} + border-top-color: #3b759e; } .reveal .controls div.navigate-left.enabled:hover { - border-right-color: #74a7cb; -} + border-right-color: #74a7cb; } .reveal .controls div.navigate-right.enabled:hover { - border-left-color: #74a7cb; -} + border-left-color: #74a7cb; } .reveal .controls div.navigate-up.enabled:hover { - border-bottom-color: #74a7cb; -} + border-bottom-color: #74a7cb; } .reveal .controls div.navigate-down.enabled:hover { - border-top-color: #74a7cb; -} + 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; @@ -152,5 +133,4 @@ body { -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); -} + transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } diff --git a/css/theme/solarized.css b/css/theme/solarized.css new file mode 100644 index 0000000..a89fd09 --- /dev/null +++ b/css/theme/solarized.css @@ -0,0 +1,142 @@ +@import url(http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); +/** + * Solarized Light theme for reveal.js. + * Author: Achim Staebler + */ +@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; } + +/** + * Solarized colors by Ethan Schoonover + */ +html * { + color-profile: sRGB; + rendering-intent: auto; } + +/********************************************* + * GLOBAL STYLES + *********************************************/ +body { + background: #fdf6e3; + background-color: #fdf6e3; } + +.reveal { + font-family: "Lato", sans-serif; + font-size: 36px; + font-weight: 200; + letter-spacing: -0.02em; + color: #657b83; } + +::selection { + color: white; + background: #d33682; + text-shadow: none; } + +/********************************************* + * HEADERS + *********************************************/ +.reveal h1, +.reveal h2, +.reveal h3, +.reveal h4, +.reveal h5, +.reveal h6 { + margin: 0 0 20px 0; + color: #586e75; + 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: 0px 0px 6px rgba(0, 0, 0, 0.2); } + +/********************************************* + * LINKS + *********************************************/ +.reveal a:not(.image) { + color: #268bd2; + text-decoration: none; + -webkit-transition: color 0.15s ease; + -moz-transition: color 0.15s ease; + -ms-transition: color 0.15s ease; + -o-transition: color 0.15s ease; + transition: color 0.15s ease; } + +.reveal a:not(.image):hover { + color: #78b9e6; + text-shadow: none; + border: none; } + +.reveal .roll span:after { + color: #fff; + background: #1a6091; } + +/********************************************* + * IMAGES + *********************************************/ +.reveal section img { + margin: 15px 0px; + background: rgba(255, 255, 255, 0.12); + border: 4px solid #657b83; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); + -webkit-transition: all 0.2s linear; + -moz-transition: all 0.2s linear; + -ms-transition: all 0.2s linear; + -o-transition: all 0.2s linear; + transition: all 0.2s linear; } + +.reveal a:hover img { + background: rgba(255, 255, 255, 0.2); + border-color: #268bd2; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); } + +/********************************************* + * NAVIGATION CONTROLS + *********************************************/ +.reveal .controls div.navigate-left, +.reveal .controls div.navigate-left.enabled { + border-right-color: #268bd2; } + +.reveal .controls div.navigate-right, +.reveal .controls div.navigate-right.enabled { + border-left-color: #268bd2; } + +.reveal .controls div.navigate-up, +.reveal .controls div.navigate-up.enabled { + border-bottom-color: #268bd2; } + +.reveal .controls div.navigate-down, +.reveal .controls div.navigate-down.enabled { + border-top-color: #268bd2; } + +.reveal .controls div.navigate-left.enabled:hover { + border-right-color: #78b9e6; } + +.reveal .controls div.navigate-right.enabled:hover { + border-left-color: #78b9e6; } + +.reveal .controls div.navigate-up.enabled:hover { + border-bottom-color: #78b9e6; } + +.reveal .controls div.navigate-down.enabled:hover { + border-top-color: #78b9e6; } + +/********************************************* + * PROGRESS BAR + *********************************************/ +.reveal .progress { + background: rgba(0, 0, 0, 0.2); } + +.reveal .progress span { + background: #268bd2; + -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/moon.scss b/css/theme/source/moon.scss new file mode 100644 index 0000000..b120935 --- /dev/null +++ b/css/theme/source/moon.scss @@ -0,0 +1,68 @@ +/** + * Solarized Dark theme for reveal.js. + * Author: Achim Staebler + */ + + +// 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); + +/** + * Solarized colors by Ethan Schoonover + */ +html * { + color-profile: sRGB; + rendering-intent: auto; +} + +// Solarized colors +$base03: #002b36; +$base02: #073642; +$base01: #586e75; +$base00: #657b83; +$base0: #839496; +$base1: #93a1a1; +$base2: #eee8d5; +$base3: #fdf6e3; +$yellow: #b58900; +$orange: #cb4b16; +$red: #dc322f; +$magenta: #d33682; +$violet: #6c71c4; +$blue: #268bd2; +$cyan: #2aa198; +$green: #859900; + +// Override theme settings (see ../template/settings.scss) +$mainColor: $base1; +$headingColor: $base2; +$headingTextShadow: none; +$backgroundColor: $base03; +$linkColor: $blue; +$linkColorHover: lighten( $linkColor, 20% ); +$selectionBackgroundColor: $magenta; + + + +// Theme template ------------------------------ +@import "../template/theme"; +// --------------------------------------------- diff --git a/css/theme/source/night.scss b/css/theme/source/night.scss index 6646857..4a1e3f5 100644 --- a/css/theme/source/night.scss +++ b/css/theme/source/night.scss @@ -19,7 +19,7 @@ // Override theme settings (see ../template/settings.scss) $backgroundColor: #111; -$mainFont: 'Open Sans', Times, 'Times New Roman', serif; +$mainFont: 'Open Sans', sans-serif; $linkColor: #e7ad52; $linkColorHover: lighten( $linkColor, 20% ); $headingFont: 'Montserrat', Impact, sans-serif; diff --git a/css/theme/source/serif.scss b/css/theme/source/serif.scss index dc0935f..06eaca8 100644 --- a/css/theme/source/serif.scss +++ b/css/theme/source/serif.scss @@ -1,7 +1,7 @@ /** - * 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. - * + * * 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. */ diff --git a/css/theme/source/simple.scss b/css/theme/source/simple.scss index 713ab44..a9c4000 100644 --- a/css/theme/source/simple.scss +++ b/css/theme/source/simple.scss @@ -20,7 +20,7 @@ // Override theme settings (see ../template/settings.scss) -$mainFont: 'Lato', Times, 'Times New Roman', serif; +$mainFont: 'Lato', sans-serif; $mainColor: #000; $headingFont: 'News Cycle', Impact, sans-serif; $headingColor: #000; diff --git a/css/theme/source/solarized.scss b/css/theme/source/solarized.scss new file mode 100644 index 0000000..5e283ef --- /dev/null +++ b/css/theme/source/solarized.scss @@ -0,0 +1,74 @@ +/** + * Solarized Light theme for reveal.js. + * Author: Achim Staebler + */ + + +// 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); + + +/** + * Solarized colors by Ethan Schoonover + */ +html * { + color-profile: sRGB; + rendering-intent: auto; +} + +// Solarized colors +$base03: #002b36; +$base02: #073642; +$base01: #586e75; +$base00: #657b83; +$base0: #839496; +$base1: #93a1a1; +$base2: #eee8d5; +$base3: #fdf6e3; +$yellow: #b58900; +$orange: #cb4b16; +$red: #dc322f; +$magenta: #d33682; +$violet: #6c71c4; +$blue: #268bd2; +$cyan: #2aa198; +$green: #859900; + +// Override theme settings (see ../template/settings.scss) +$mainColor: $base00; +$headingColor: $base01; +$headingTextShadow: none; +$backgroundColor: $base3; +$linkColor: $blue; +$linkColorHover: lighten( $linkColor, 20% ); +$selectionBackgroundColor: $magenta; + +// Background generator +// @mixin bodyBackground() { +// @include radial-gradient( rgba($base3,1), rgba(lighten($base3, 20%),1) ); +// } + + + +// Theme template ------------------------------ +@import "../template/theme"; +// --------------------------------------------- diff --git a/css/theme/template/settings.scss b/css/theme/template/settings.scss index bc9f138..7e9ffd8 100644 --- a/css/theme/template/settings.scss +++ b/css/theme/template/settings.scss @@ -1,11 +1,11 @@ -// Base settings for all themes that can optionally be +// 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; +$mainFont: 'Lato', sans-serif; $mainFontSize: 36px; $mainColor: #eee; |