diff options
Diffstat (limited to 'css/theme')
| -rw-r--r-- | css/theme/README.md | 10 | ||||
| -rw-r--r-- | css/theme/beige.css | 142 | ||||
| -rw-r--r-- | css/theme/black.css | 128 | ||||
| -rw-r--r-- | css/theme/blood.css | 149 | ||||
| -rw-r--r-- | css/theme/league.css | 130 | ||||
| -rw-r--r-- | css/theme/moon.css | 130 | ||||
| -rw-r--r-- | css/theme/night.css | 128 | ||||
| -rw-r--r-- | css/theme/serif.css | 124 | ||||
| -rw-r--r-- | css/theme/simple.css | 129 | ||||
| -rw-r--r-- | css/theme/sky.css | 130 | ||||
| -rw-r--r-- | css/theme/solarized.css | 130 | ||||
| -rw-r--r-- | css/theme/source/black.scss | 4 | ||||
| -rw-r--r-- | css/theme/source/blood.scss | 19 | ||||
| -rw-r--r-- | css/theme/source/night.scss | 1 | ||||
| -rw-r--r-- | css/theme/source/simple.scss | 5 | ||||
| -rw-r--r-- | css/theme/source/white.scss | 4 | ||||
| -rw-r--r-- | css/theme/template/settings.scss | 6 | ||||
| -rw-r--r-- | css/theme/template/theme.scss | 96 | ||||
| -rw-r--r-- | css/theme/white.css | 130 |
19 files changed, 849 insertions, 746 deletions
diff --git a/css/theme/README.md b/css/theme/README.md index 90dc149..8ae164b 100644 --- a/css/theme/README.md +++ b/css/theme/README.md @@ -1,12 +1,10 @@ ## Dependencies -Themes are written using Sass to keep things modular and reduce the need for repeated selectors across files. Make sure that you have the reveal.js development environment including the Grunt dependencies installed before proceding: https://github.com/hakimel/reveal.js#full-setup - -You also need to install Ruby and then Sass (with `gem install sass`). +Themes are written using Sass to keep things modular and reduce the need for repeated selectors across files. Make sure that you have the reveal.js development environment including the Grunt dependencies installed before proceeding: https://github.com/hakimel/reveal.js#full-setup ## 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) and adding it to the compilation list in the [Gruntfile](https://github.com/hakimel/reveal.js/blob/master/Gruntfile.js). +To create your own theme, start by duplicating a ```.scss``` file in [/css/theme/source](https://github.com/hakimel/reveal.js/blob/master/css/theme/source). It will be automatically compiled by Grunt from Sass to CSS (see the [Gruntfile](https://github.com/hakimel/reveal.js/blob/master/Gruntfile.js)) when you run `npm run build -- css-themes`. Each theme file does four things in the following order: @@ -17,9 +15,7 @@ Shared utility functions. 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. +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 any selectors and styles you please. 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. - -When you are done, run `grunt css-themes` to compile the Sass file to CSS and you are ready to use your new theme. diff --git a/css/theme/beige.css b/css/theme/beige.css index 514427c..fb5f137 100644 --- a/css/theme/beige.css +++ b/css/theme/beige.css @@ -1,26 +1,26 @@ -@import url(../../lib/font/league-gothic/league-gothic.css); -@import url(https://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 */ +@import url(../../lib/font/league-gothic/league-gothic.css); +@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); /********************************************* * GLOBAL STYLES *********************************************/ body { background: #f7f2d3; - background: -moz-radial-gradient(center, circle cover, #ffffff 0%, #f7f2d3 100%); - background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #ffffff), color-stop(100%, #f7f2d3)); - background: -webkit-radial-gradient(center, circle cover, #ffffff 0%, #f7f2d3 100%); - background: -o-radial-gradient(center, circle cover, #ffffff 0%, #f7f2d3 100%); - background: -ms-radial-gradient(center, circle cover, #ffffff 0%, #f7f2d3 100%); - background: radial-gradient(center, circle cover, #ffffff 0%, #f7f2d3 100%); + 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%); background-color: #f7f3de; } .reveal { - font-family: 'Lato', sans-serif; - font-size: 36px; + font-family: "Lato", sans-serif; + font-size: 40px; font-weight: normal; color: #333; } @@ -29,17 +29,28 @@ body { background: rgba(79, 64, 28, 0.99); text-shadow: none; } -.reveal .slides > section, .reveal .slides > section > section { +::-moz-selection { + color: #fff; + background: rgba(79, 64, 28, 0.99); + text-shadow: none; } + +.reveal .slides section, +.reveal .slides section > section { line-height: 1.3; font-weight: inherit; } /********************************************* * HEADERS *********************************************/ -.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 { +.reveal h1, +.reveal h2, +.reveal h3, +.reveal h4, +.reveal h5, +.reveal h6 { margin: 0 0 20px 0; color: #333; - font-family: 'League Gothic', Impact, sans-serif; + font-family: "League Gothic", Impact, sans-serif; font-weight: normal; line-height: 1.2; letter-spacing: normal; @@ -70,17 +81,22 @@ body { line-height: 1.3; } /* Ensure certain elements are never larger than the slide itself */ -.reveal img, .reveal video, .reveal iframe { +.reveal img, +.reveal video, +.reveal iframe { max-width: 95%; max-height: 95%; } -.reveal strong, .reveal b { +.reveal strong, +.reveal b { font-weight: bold; } .reveal em { font-style: italic; } -.reveal ol, .reveal dl, .reveal ul { +.reveal ol, +.reveal dl, +.reveal ul { display: inline-block; text-align: left; margin: 0 0 0 1em; } @@ -97,7 +113,10 @@ body { .reveal ul ul ul { list-style-type: circle; } -.reveal ul ul, .reveal ul ol, .reveal ol ol, .reveal ol ul { +.reveal ul ul, +.reveal ul ol, +.reveal ol ol, +.reveal ol ul { display: block; margin-left: 40px; } @@ -107,9 +126,6 @@ body { .reveal dd { margin-left: 40px; } -.reveal q, .reveal blockquote { - quotes: none; } - .reveal blockquote { display: block; position: relative; @@ -120,7 +136,8 @@ body { background: rgba(255, 255, 255, 0.05); box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); } -.reveal blockquote p:first-child, .reveal blockquote p:last-child { +.reveal blockquote p:first-child, +.reveal blockquote p:last-child { display: inline-block; } .reveal q { @@ -139,16 +156,15 @@ body { box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); } .reveal code { - font-family: monospace; } + font-family: monospace; + text-transform: none; } .reveal pre code { display: block; padding: 5px; overflow: auto; max-height: 400px; - word-wrap: normal; - background: #3F3F3F; - color: #DCDCDC; } + word-wrap: normal; } .reveal table { margin: auto; @@ -158,19 +174,31 @@ body { .reveal table th { font-weight: bold; } -.reveal table th, .reveal table td { +.reveal table th, +.reveal table td { text-align: left; padding: 0.2em 0.5em 0.2em 0.5em; border-bottom: 1px solid; } -.reveal table tr:last-child td { +.reveal table th[align="center"], +.reveal table td[align="center"] { + text-align: center; } + +.reveal table th[align="right"], +.reveal table td[align="right"] { + text-align: right; } + +.reveal table tbody tr:last-child th, +.reveal table tbody tr:last-child td { border-bottom: none; } .reveal sup { - vertical-align: super; } + vertical-align: super; + font-size: smaller; } .reveal sub { - vertical-align: sub; } + vertical-align: sub; + font-size: smaller; } .reveal small { display: inline-block; @@ -187,18 +215,18 @@ body { .reveal a { color: #8b743d; text-decoration: none; - -webkit-transition: color 0.15s ease; - -moz-transition: color 0.15s ease; - transition: color 0.15s ease; } + -webkit-transition: color .15s ease; + -moz-transition: color .15s ease; + transition: color .15s ease; } .reveal a:hover { - color: #c0a76e; + color: #c0a86e; text-shadow: none; border: none; } .reveal .roll span:after { color: #fff; - background: #564726; } + background: #564826; } /********************************************* * IMAGES @@ -209,10 +237,14 @@ body { border: 4px solid #333; box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); } +.reveal section img.plain { + border: 0; + box-shadow: none; } + .reveal a img { - -webkit-transition: all 0.15s linear; - -moz-transition: all 0.15s linear; - transition: all 0.15s linear; } + -webkit-transition: all .15s linear; + -moz-transition: all .15s linear; + transition: all .15s linear; } .reveal a:hover img { background: rgba(255, 255, 255, 0.2); @@ -222,44 +254,24 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.navigate-left, .reveal .controls div.navigate-left.enabled { - border-right-color: #8b743d; } - -.reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled { - border-left-color: #8b743d; } - -.reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled { - border-bottom-color: #8b743d; } - -.reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled { - border-top-color: #8b743d; } - -.reveal .controls div.navigate-left.enabled:hover { - border-right-color: #c0a76e; } - -.reveal .controls div.navigate-right.enabled:hover { - border-left-color: #c0a76e; } - -.reveal .controls div.navigate-up.enabled:hover { - border-bottom-color: #c0a76e; } - -.reveal .controls div.navigate-down.enabled:hover { - border-top-color: #c0a76e; } +.reveal .controls { + color: #8b743d; } /********************************************* * PROGRESS BAR *********************************************/ .reveal .progress { - background: rgba(0, 0, 0, 0.2); } + background: rgba(0, 0, 0, 0.2); + color: #8b743d; } .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); transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } /********************************************* - * SLIDE NUMBER + * PRINT BACKGROUND *********************************************/ -.reveal .slide-number { - color: #8b743d; } +@media print { + .backgrounds { + background-color: #f7f3de; } } diff --git a/css/theme/black.css b/css/theme/black.css index 7d3bee4..dec6385 100644 --- a/css/theme/black.css +++ b/css/theme/black.css @@ -1,9 +1,9 @@ -@import url(../../lib/font/source-sans-pro/source-sans-pro.css); /** * Black theme for reveal.js. This is the opposite of the 'white' theme. * - * Copyright (C) 2015 Hakim El Hattab, http://hakim.se + * By Hakim El Hattab, http://hakim.se */ +@import url(../../lib/font/source-sans-pro/source-sans-pro.css); section.has-light-background, section.has-light-background h1, section.has-light-background h2, section.has-light-background h3, section.has-light-background h4, section.has-light-background h5, section.has-light-background h6 { color: #222; } @@ -15,8 +15,8 @@ body { background-color: #222; } .reveal { - font-family: 'Source Sans Pro', Helvetica, sans-serif; - font-size: 38px; + font-family: "Source Sans Pro", Helvetica, sans-serif; + font-size: 42px; font-weight: normal; color: #fff; } @@ -25,17 +25,28 @@ body { background: #bee4fd; text-shadow: none; } -.reveal .slides > section, .reveal .slides > section > section { +::-moz-selection { + color: #fff; + background: #bee4fd; + text-shadow: none; } + +.reveal .slides section, +.reveal .slides section > section { line-height: 1.3; font-weight: inherit; } /********************************************* * HEADERS *********************************************/ -.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 { +.reveal h1, +.reveal h2, +.reveal h3, +.reveal h4, +.reveal h5, +.reveal h6 { margin: 0 0 20px 0; color: #fff; - font-family: 'Source Sans Pro', Helvetica, sans-serif; + font-family: "Source Sans Pro", Helvetica, sans-serif; font-weight: 600; line-height: 1.2; letter-spacing: normal; @@ -66,17 +77,22 @@ body { line-height: 1.3; } /* Ensure certain elements are never larger than the slide itself */ -.reveal img, .reveal video, .reveal iframe { +.reveal img, +.reveal video, +.reveal iframe { max-width: 95%; max-height: 95%; } -.reveal strong, .reveal b { +.reveal strong, +.reveal b { font-weight: bold; } .reveal em { font-style: italic; } -.reveal ol, .reveal dl, .reveal ul { +.reveal ol, +.reveal dl, +.reveal ul { display: inline-block; text-align: left; margin: 0 0 0 1em; } @@ -93,7 +109,10 @@ body { .reveal ul ul ul { list-style-type: circle; } -.reveal ul ul, .reveal ul ol, .reveal ol ol, .reveal ol ul { +.reveal ul ul, +.reveal ul ol, +.reveal ol ol, +.reveal ol ul { display: block; margin-left: 40px; } @@ -103,9 +122,6 @@ body { .reveal dd { margin-left: 40px; } -.reveal q, .reveal blockquote { - quotes: none; } - .reveal blockquote { display: block; position: relative; @@ -116,7 +132,8 @@ body { background: rgba(255, 255, 255, 0.05); box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); } -.reveal blockquote p:first-child, .reveal blockquote p:last-child { +.reveal blockquote p:first-child, +.reveal blockquote p:last-child { display: inline-block; } .reveal q { @@ -135,16 +152,15 @@ body { box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); } .reveal code { - font-family: monospace; } + font-family: monospace; + text-transform: none; } .reveal pre code { display: block; padding: 5px; overflow: auto; max-height: 400px; - word-wrap: normal; - background: #3F3F3F; - color: #DCDCDC; } + word-wrap: normal; } .reveal table { margin: auto; @@ -154,19 +170,31 @@ body { .reveal table th { font-weight: bold; } -.reveal table th, .reveal table td { +.reveal table th, +.reveal table td { text-align: left; padding: 0.2em 0.5em 0.2em 0.5em; border-bottom: 1px solid; } -.reveal table tr:last-child td { +.reveal table th[align="center"], +.reveal table td[align="center"] { + text-align: center; } + +.reveal table th[align="right"], +.reveal table td[align="right"] { + text-align: right; } + +.reveal table tbody tr:last-child th, +.reveal table tbody tr:last-child td { border-bottom: none; } .reveal sup { - vertical-align: super; } + vertical-align: super; + font-size: smaller; } .reveal sub { - vertical-align: sub; } + vertical-align: sub; + font-size: smaller; } .reveal small { display: inline-block; @@ -183,9 +211,9 @@ body { .reveal a { color: #42affa; text-decoration: none; - -webkit-transition: color 0.15s ease; - -moz-transition: color 0.15s ease; - transition: color 0.15s ease; } + -webkit-transition: color .15s ease; + -moz-transition: color .15s ease; + transition: color .15s ease; } .reveal a:hover { color: #8dcffc; @@ -194,7 +222,7 @@ body { .reveal .roll span:after { color: #fff; - background: #068ee9; } + background: #068de9; } /********************************************* * IMAGES @@ -205,10 +233,14 @@ body { border: 4px solid #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); } +.reveal section img.plain { + border: 0; + box-shadow: none; } + .reveal a img { - -webkit-transition: all 0.15s linear; - -moz-transition: all 0.15s linear; - transition: all 0.15s linear; } + -webkit-transition: all .15s linear; + -moz-transition: all .15s linear; + transition: all .15s linear; } .reveal a:hover img { background: rgba(255, 255, 255, 0.2); @@ -218,44 +250,24 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.navigate-left, .reveal .controls div.navigate-left.enabled { - border-right-color: #42affa; } - -.reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled { - border-left-color: #42affa; } - -.reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled { - border-bottom-color: #42affa; } - -.reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled { - border-top-color: #42affa; } - -.reveal .controls div.navigate-left.enabled:hover { - border-right-color: #8dcffc; } - -.reveal .controls div.navigate-right.enabled:hover { - border-left-color: #8dcffc; } - -.reveal .controls div.navigate-up.enabled:hover { - border-bottom-color: #8dcffc; } - -.reveal .controls div.navigate-down.enabled:hover { - border-top-color: #8dcffc; } +.reveal .controls { + color: #42affa; } /********************************************* * PROGRESS BAR *********************************************/ .reveal .progress { - background: rgba(0, 0, 0, 0.2); } + background: rgba(0, 0, 0, 0.2); + color: #42affa; } .reveal .progress span { - background: #42affa; -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); transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } /********************************************* - * SLIDE NUMBER + * PRINT BACKGROUND *********************************************/ -.reveal .slide-number { - color: #42affa; } +@media print { + .backgrounds { + background-color: #222; } } diff --git a/css/theme/blood.css b/css/theme/blood.css index 768d2a3..15e6c20 100644 --- a/css/theme/blood.css +++ b/css/theme/blood.css @@ -1,4 +1,3 @@ -@import url(https://fonts.googleapis.com/css?family=Ubuntu:300,700,300italic,700italic); /** * Blood theme for reveal.js * Author: Walther http://github.com/Walther @@ -10,22 +9,17 @@ * For other themes, change $codeBackground accordingly. * */ +@import url(https://fonts.googleapis.com/css?family=Ubuntu:300,700,300italic,700italic); /********************************************* * GLOBAL STYLES *********************************************/ body { background: #222; - background: -moz-radial-gradient(center, circle cover, #626262 0%, #222 100%); - background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #626262), color-stop(100%, #222)); - background: -webkit-radial-gradient(center, circle cover, #626262 0%, #222 100%); - background: -o-radial-gradient(center, circle cover, #626262 0%, #222 100%); - background: -ms-radial-gradient(center, circle cover, #626262 0%, #222 100%); - background: radial-gradient(center, circle cover, #626262 0%, #222 100%); - background-color: #2b2b2b; } + background-color: #222; } .reveal { - font-family: Ubuntu, 'sans-serif'; - font-size: 36px; + font-family: Ubuntu, "sans-serif"; + font-size: 40px; font-weight: normal; color: #eee; } @@ -34,17 +28,28 @@ body { background: #a23; text-shadow: none; } -.reveal .slides > section, .reveal .slides > section > section { +::-moz-selection { + color: #fff; + background: #a23; + text-shadow: none; } + +.reveal .slides section, +.reveal .slides section > section { line-height: 1.3; font-weight: inherit; } /********************************************* * HEADERS *********************************************/ -.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 { +.reveal h1, +.reveal h2, +.reveal h3, +.reveal h4, +.reveal h5, +.reveal h6 { margin: 0 0 20px 0; color: #eee; - font-family: Ubuntu, 'sans-serif'; + font-family: Ubuntu, "sans-serif"; font-weight: normal; line-height: 1.2; letter-spacing: normal; @@ -75,17 +80,22 @@ body { line-height: 1.3; } /* Ensure certain elements are never larger than the slide itself */ -.reveal img, .reveal video, .reveal iframe { +.reveal img, +.reveal video, +.reveal iframe { max-width: 95%; max-height: 95%; } -.reveal strong, .reveal b { +.reveal strong, +.reveal b { font-weight: bold; } .reveal em { font-style: italic; } -.reveal ol, .reveal dl, .reveal ul { +.reveal ol, +.reveal dl, +.reveal ul { display: inline-block; text-align: left; margin: 0 0 0 1em; } @@ -102,7 +112,10 @@ body { .reveal ul ul ul { list-style-type: circle; } -.reveal ul ul, .reveal ul ol, .reveal ol ol, .reveal ol ul { +.reveal ul ul, +.reveal ul ol, +.reveal ol ol, +.reveal ol ul { display: block; margin-left: 40px; } @@ -112,9 +125,6 @@ body { .reveal dd { margin-left: 40px; } -.reveal q, .reveal blockquote { - quotes: none; } - .reveal blockquote { display: block; position: relative; @@ -125,7 +135,8 @@ body { background: rgba(255, 255, 255, 0.05); box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); } -.reveal blockquote p:first-child, .reveal blockquote p:last-child { +.reveal blockquote p:first-child, +.reveal blockquote p:last-child { display: inline-block; } .reveal q { @@ -144,16 +155,15 @@ body { box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); } .reveal code { - font-family: monospace; } + font-family: monospace; + text-transform: none; } .reveal pre code { display: block; padding: 5px; overflow: auto; max-height: 400px; - word-wrap: normal; - background: #3F3F3F; - color: #DCDCDC; } + word-wrap: normal; } .reveal table { margin: auto; @@ -163,19 +173,31 @@ body { .reveal table th { font-weight: bold; } -.reveal table th, .reveal table td { +.reveal table th, +.reveal table td { text-align: left; padding: 0.2em 0.5em 0.2em 0.5em; border-bottom: 1px solid; } -.reveal table tr:last-child td { +.reveal table th[align="center"], +.reveal table td[align="center"] { + text-align: center; } + +.reveal table th[align="right"], +.reveal table td[align="right"] { + text-align: right; } + +.reveal table tbody tr:last-child th, +.reveal table tbody tr:last-child td { border-bottom: none; } .reveal sup { - vertical-align: super; } + vertical-align: super; + font-size: smaller; } .reveal sub { - vertical-align: sub; } + vertical-align: sub; + font-size: smaller; } .reveal small { display: inline-block; @@ -192,18 +214,18 @@ body { .reveal a { color: #a23; text-decoration: none; - -webkit-transition: color 0.15s ease; - -moz-transition: color 0.15s ease; - transition: color 0.15s ease; } + -webkit-transition: color .15s ease; + -moz-transition: color .15s ease; + transition: color .15s ease; } .reveal a:hover { - color: #dd5567; + color: #dd5566; text-shadow: none; border: none; } .reveal .roll span:after { color: #fff; - background: #6a1521; } + background: #6a1520; } /********************************************* * IMAGES @@ -214,10 +236,14 @@ body { border: 4px solid #eee; box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); } +.reveal section img.plain { + border: 0; + box-shadow: none; } + .reveal a img { - -webkit-transition: all 0.15s linear; - -moz-transition: all 0.15s linear; - transition: all 0.15s linear; } + -webkit-transition: all .15s linear; + -moz-transition: all .15s linear; + transition: all .15s linear; } .reveal a:hover img { background: rgba(255, 255, 255, 0.2); @@ -227,61 +253,40 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.navigate-left, .reveal .controls div.navigate-left.enabled { - border-right-color: #a23; } - -.reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled { - border-left-color: #a23; } - -.reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled { - border-bottom-color: #a23; } - -.reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled { - border-top-color: #a23; } - -.reveal .controls div.navigate-left.enabled:hover { - border-right-color: #dd5567; } - -.reveal .controls div.navigate-right.enabled:hover { - border-left-color: #dd5567; } - -.reveal .controls div.navigate-up.enabled:hover { - border-bottom-color: #dd5567; } - -.reveal .controls div.navigate-down.enabled:hover { - border-top-color: #dd5567; } +.reveal .controls { + color: #a23; } /********************************************* * PROGRESS BAR *********************************************/ .reveal .progress { - background: rgba(0, 0, 0, 0.2); } + background: rgba(0, 0, 0, 0.2); + color: #a23; } .reveal .progress span { - background: #a23; -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); transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } /********************************************* - * SLIDE NUMBER + * PRINT BACKGROUND *********************************************/ -.reveal .slide-number { - color: #a23; } +@media print { + .backgrounds { + background-color: #222; } } .reveal p { font-weight: 300; text-shadow: 1px 1px #222; } -.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 { +.reveal h1, +.reveal h2, +.reveal h3, +.reveal h4, +.reveal h5, +.reveal h6 { font-weight: 700; } -.reveal a, .reveal a:hover { - text-shadow: 2px 2px 2px #000; } - -.reveal small a, .reveal small a:hover { - text-shadow: 1px 1px 1px #000; } - .reveal p code { background-color: #23241f; display: inline-block; diff --git a/css/theme/league.css b/css/theme/league.css index c6d07f6..9dfa2ce 100644 --- a/css/theme/league.css +++ b/css/theme/league.css @@ -1,5 +1,3 @@ -@import url(../../lib/font/league-gothic/league-gothic.css); -@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); /** * League theme for reveal.js. * @@ -7,6 +5,8 @@ * * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se */ +@import url(../../lib/font/league-gothic/league-gothic.css); +@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); /********************************************* * GLOBAL STYLES *********************************************/ @@ -21,8 +21,8 @@ body { background-color: #2b2b2b; } .reveal { - font-family: 'Lato', sans-serif; - font-size: 36px; + font-family: "Lato", sans-serif; + font-size: 40px; font-weight: normal; color: #eee; } @@ -31,17 +31,28 @@ body { background: #FF5E99; text-shadow: none; } -.reveal .slides > section, .reveal .slides > section > section { +::-moz-selection { + color: #fff; + background: #FF5E99; + text-shadow: none; } + +.reveal .slides section, +.reveal .slides section > section { line-height: 1.3; font-weight: inherit; } /********************************************* * HEADERS *********************************************/ -.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 { +.reveal h1, +.reveal h2, +.reveal h3, +.reveal h4, +.reveal h5, +.reveal h6 { margin: 0 0 20px 0; color: #eee; - font-family: 'League Gothic', Impact, sans-serif; + font-family: "League Gothic", Impact, sans-serif; font-weight: normal; line-height: 1.2; letter-spacing: normal; @@ -72,17 +83,22 @@ body { line-height: 1.3; } /* Ensure certain elements are never larger than the slide itself */ -.reveal img, .reveal video, .reveal iframe { +.reveal img, +.reveal video, +.reveal iframe { max-width: 95%; max-height: 95%; } -.reveal strong, .reveal b { +.reveal strong, +.reveal b { font-weight: bold; } .reveal em { font-style: italic; } -.reveal ol, .reveal dl, .reveal ul { +.reveal ol, +.reveal dl, +.reveal ul { display: inline-block; text-align: left; margin: 0 0 0 1em; } @@ -99,7 +115,10 @@ body { .reveal ul ul ul { list-style-type: circle; } -.reveal ul ul, .reveal ul ol, .reveal ol ol, .reveal ol ul { +.reveal ul ul, +.reveal ul ol, +.reveal ol ol, +.reveal ol ul { display: block; margin-left: 40px; } @@ -109,9 +128,6 @@ body { .reveal dd { margin-left: 40px; } -.reveal q, .reveal blockquote { - quotes: none; } - .reveal blockquote { display: block; position: relative; @@ -122,7 +138,8 @@ body { background: rgba(255, 255, 255, 0.05); box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); } -.reveal blockquote p:first-child, .reveal blockquote p:last-child { +.reveal blockquote p:first-child, +.reveal blockquote p:last-child { display: inline-block; } .reveal q { @@ -141,16 +158,15 @@ body { box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); } .reveal code { - font-family: monospace; } + font-family: monospace; + text-transform: none; } .reveal pre code { display: block; padding: 5px; overflow: auto; max-height: 400px; - word-wrap: normal; - background: #3F3F3F; - color: #DCDCDC; } + word-wrap: normal; } .reveal table { margin: auto; @@ -160,19 +176,31 @@ body { .reveal table th { font-weight: bold; } -.reveal table th, .reveal table td { +.reveal table th, +.reveal table td { text-align: left; padding: 0.2em 0.5em 0.2em 0.5em; border-bottom: 1px solid; } -.reveal table tr:last-child td { +.reveal table th[align="center"], +.reveal table td[align="center"] { + text-align: center; } + +.reveal table th[align="right"], +.reveal table td[align="right"] { + text-align: right; } + +.reveal table tbody tr:last-child th, +.reveal table tbody tr:last-child td { border-bottom: none; } .reveal sup { - vertical-align: super; } + vertical-align: super; + font-size: smaller; } .reveal sub { - vertical-align: sub; } + vertical-align: sub; + font-size: smaller; } .reveal small { display: inline-block; @@ -189,18 +217,18 @@ body { .reveal a { color: #13DAEC; text-decoration: none; - -webkit-transition: color 0.15s ease; - -moz-transition: color 0.15s ease; - transition: color 0.15s ease; } + -webkit-transition: color .15s ease; + -moz-transition: color .15s ease; + transition: color .15s ease; } .reveal a:hover { - color: #71ebf4; + color: #71e9f4; text-shadow: none; border: none; } .reveal .roll span:after { color: #fff; - background: #0d9ba5; } + background: #0d99a5; } /********************************************* * IMAGES @@ -211,10 +239,14 @@ body { border: 4px solid #eee; box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); } +.reveal section img.plain { + border: 0; + box-shadow: none; } + .reveal a img { - -webkit-transition: all 0.15s linear; - -moz-transition: all 0.15s linear; - transition: all 0.15s linear; } + -webkit-transition: all .15s linear; + -moz-transition: all .15s linear; + transition: all .15s linear; } .reveal a:hover img { background: rgba(255, 255, 255, 0.2); @@ -224,44 +256,24 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.navigate-left, .reveal .controls div.navigate-left.enabled { - border-right-color: #13DAEC; } - -.reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled { - border-left-color: #13DAEC; } - -.reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled { - border-bottom-color: #13DAEC; } - -.reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled { - border-top-color: #13DAEC; } - -.reveal .controls div.navigate-left.enabled:hover { - border-right-color: #71ebf4; } - -.reveal .controls div.navigate-right.enabled:hover { - border-left-color: #71ebf4; } - -.reveal .controls div.navigate-up.enabled:hover { - border-bottom-color: #71ebf4; } - -.reveal .controls div.navigate-down.enabled:hover { - border-top-color: #71ebf4; } +.reveal .controls { + color: #13DAEC; } /********************************************* * PROGRESS BAR *********************************************/ .reveal .progress { - background: rgba(0, 0, 0, 0.2); } + background: rgba(0, 0, 0, 0.2); + color: #13DAEC; } .reveal .progress span { - background: #13DAEC; -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } /********************************************* - * SLIDE NUMBER + * PRINT BACKGROUND *********************************************/ -.reveal .slide-number { - color: #13DAEC; } +@media print { + .backgrounds { + background-color: #2b2b2b; } } diff --git a/css/theme/moon.css b/css/theme/moon.css index 4817c18..52b3f67 100644 --- a/css/theme/moon.css +++ b/css/theme/moon.css @@ -1,9 +1,9 @@ -@import url(../../lib/font/league-gothic/league-gothic.css); -@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); /** * Solarized Dark theme for reveal.js. * Author: Achim Staebler */ +@import url(../../lib/font/league-gothic/league-gothic.css); +@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); /** * Solarized colors by Ethan Schoonover */ @@ -19,8 +19,8 @@ body { background-color: #002b36; } .reveal { - font-family: 'Lato', sans-serif; - font-size: 36px; + font-family: "Lato", sans-serif; + font-size: 40px; font-weight: normal; color: #93a1a1; } @@ -29,17 +29,28 @@ body { background: #d33682; text-shadow: none; } -.reveal .slides > section, .reveal .slides > section > section { +::-moz-selection { + color: #fff; + background: #d33682; + text-shadow: none; } + +.reveal .slides section, +.reveal .slides section > section { line-height: 1.3; font-weight: inherit; } /********************************************* * HEADERS *********************************************/ -.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 { +.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; + font-family: "League Gothic", Impact, sans-serif; font-weight: normal; line-height: 1.2; letter-spacing: normal; @@ -70,17 +81,22 @@ body { line-height: 1.3; } /* Ensure certain elements are never larger than the slide itself */ -.reveal img, .reveal video, .reveal iframe { +.reveal img, +.reveal video, +.reveal iframe { max-width: 95%; max-height: 95%; } -.reveal strong, .reveal b { +.reveal strong, +.reveal b { font-weight: bold; } .reveal em { font-style: italic; } -.reveal ol, .reveal dl, .reveal ul { +.reveal ol, +.reveal dl, +.reveal ul { display: inline-block; text-align: left; margin: 0 0 0 1em; } @@ -97,7 +113,10 @@ body { .reveal ul ul ul { list-style-type: circle; } -.reveal ul ul, .reveal ul ol, .reveal ol ol, .reveal ol ul { +.reveal ul ul, +.reveal ul ol, +.reveal ol ol, +.reveal ol ul { display: block; margin-left: 40px; } @@ -107,9 +126,6 @@ body { .reveal dd { margin-left: 40px; } -.reveal q, .reveal blockquote { - quotes: none; } - .reveal blockquote { display: block; position: relative; @@ -120,7 +136,8 @@ body { background: rgba(255, 255, 255, 0.05); box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); } -.reveal blockquote p:first-child, .reveal blockquote p:last-child { +.reveal blockquote p:first-child, +.reveal blockquote p:last-child { display: inline-block; } .reveal q { @@ -139,16 +156,15 @@ body { box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); } .reveal code { - font-family: monospace; } + font-family: monospace; + text-transform: none; } .reveal pre code { display: block; padding: 5px; overflow: auto; max-height: 400px; - word-wrap: normal; - background: #3F3F3F; - color: #DCDCDC; } + word-wrap: normal; } .reveal table { margin: auto; @@ -158,19 +174,31 @@ body { .reveal table th { font-weight: bold; } -.reveal table th, .reveal table td { +.reveal table th, +.reveal table td { text-align: left; padding: 0.2em 0.5em 0.2em 0.5em; border-bottom: 1px solid; } -.reveal table tr:last-child td { +.reveal table th[align="center"], +.reveal table td[align="center"] { + text-align: center; } + +.reveal table th[align="right"], +.reveal table td[align="right"] { + text-align: right; } + +.reveal table tbody tr:last-child th, +.reveal table tbody tr:last-child td { border-bottom: none; } .reveal sup { - vertical-align: super; } + vertical-align: super; + font-size: smaller; } .reveal sub { - vertical-align: sub; } + vertical-align: sub; + font-size: smaller; } .reveal small { display: inline-block; @@ -187,18 +215,18 @@ body { .reveal a { color: #268bd2; text-decoration: none; - -webkit-transition: color 0.15s ease; - -moz-transition: color 0.15s ease; - transition: color 0.15s ease; } + -webkit-transition: color .15s ease; + -moz-transition: color .15s ease; + transition: color .15s ease; } .reveal a:hover { - color: #78bae6; + color: #78b9e6; text-shadow: none; border: none; } .reveal .roll span:after { color: #fff; - background: #1a6291; } + background: #1a6091; } /********************************************* * IMAGES @@ -209,10 +237,14 @@ body { border: 4px solid #93a1a1; box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); } +.reveal section img.plain { + border: 0; + box-shadow: none; } + .reveal a img { - -webkit-transition: all 0.15s linear; - -moz-transition: all 0.15s linear; - transition: all 0.15s linear; } + -webkit-transition: all .15s linear; + -moz-transition: all .15s linear; + transition: all .15s linear; } .reveal a:hover img { background: rgba(255, 255, 255, 0.2); @@ -222,44 +254,24 @@ body { /********************************************* * 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: #78bae6; } - -.reveal .controls div.navigate-right.enabled:hover { - border-left-color: #78bae6; } - -.reveal .controls div.navigate-up.enabled:hover { - border-bottom-color: #78bae6; } - -.reveal .controls div.navigate-down.enabled:hover { - border-top-color: #78bae6; } +.reveal .controls { + color: #268bd2; } /********************************************* * PROGRESS BAR *********************************************/ .reveal .progress { - background: rgba(0, 0, 0, 0.2); } + background: rgba(0, 0, 0, 0.2); + color: #268bd2; } .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); transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } /********************************************* - * SLIDE NUMBER + * PRINT BACKGROUND *********************************************/ -.reveal .slide-number { - color: #268bd2; } +@media print { + .backgrounds { + background-color: #002b36; } } diff --git a/css/theme/night.css b/css/theme/night.css index 71319b2..51a3dd3 100644 --- a/css/theme/night.css +++ b/css/theme/night.css @@ -1,10 +1,10 @@ -@import url(https://fonts.googleapis.com/css?family=Montserrat:700); -@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic); /** * Black theme for reveal.js. * * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se */ +@import url(https://fonts.googleapis.com/css?family=Montserrat:700); +@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic); /********************************************* * GLOBAL STYLES *********************************************/ @@ -13,8 +13,8 @@ body { background-color: #111; } .reveal { - font-family: 'Open Sans', sans-serif; - font-size: 30px; + font-family: "Open Sans", sans-serif; + font-size: 40px; font-weight: normal; color: #eee; } @@ -23,17 +23,28 @@ body { background: #e7ad52; text-shadow: none; } -.reveal .slides > section, .reveal .slides > section > section { +::-moz-selection { + color: #fff; + background: #e7ad52; + text-shadow: none; } + +.reveal .slides section, +.reveal .slides section > section { line-height: 1.3; font-weight: inherit; } /********************************************* * HEADERS *********************************************/ -.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 { +.reveal h1, +.reveal h2, +.reveal h3, +.reveal h4, +.reveal h5, +.reveal h6 { margin: 0 0 20px 0; color: #eee; - font-family: 'Montserrat', Impact, sans-serif; + font-family: "Montserrat", Impact, sans-serif; font-weight: normal; line-height: 1.2; letter-spacing: -0.03em; @@ -64,17 +75,22 @@ body { line-height: 1.3; } /* Ensure certain elements are never larger than the slide itself */ -.reveal img, .reveal video, .reveal iframe { +.reveal img, +.reveal video, +.reveal iframe { max-width: 95%; max-height: 95%; } -.reveal strong, .reveal b { +.reveal strong, +.reveal b { font-weight: bold; } .reveal em { font-style: italic; } -.reveal ol, .reveal dl, .reveal ul { +.reveal ol, +.reveal dl, +.reveal ul { display: inline-block; text-align: left; margin: 0 0 0 1em; } @@ -91,7 +107,10 @@ body { .reveal ul ul ul { list-style-type: circle; } -.reveal ul ul, .reveal ul ol, .reveal ol ol, .reveal ol ul { +.reveal ul ul, +.reveal ul ol, +.reveal ol ol, +.reveal ol ul { display: block; margin-left: 40px; } @@ -101,9 +120,6 @@ body { .reveal dd { margin-left: 40px; } -.reveal q, .reveal blockquote { - quotes: none; } - .reveal blockquote { display: block; position: relative; @@ -114,7 +130,8 @@ body { background: rgba(255, 255, 255, 0.05); box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); } -.reveal blockquote p:first-child, .reveal blockquote p:last-child { +.reveal blockquote p:first-child, +.reveal blockquote p:last-child { display: inline-block; } .reveal q { @@ -133,16 +150,15 @@ body { box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); } .reveal code { - font-family: monospace; } + font-family: monospace; + text-transform: none; } .reveal pre code { display: block; padding: 5px; overflow: auto; max-height: 400px; - word-wrap: normal; - background: #3F3F3F; - color: #DCDCDC; } + word-wrap: normal; } .reveal table { margin: auto; @@ -152,19 +168,31 @@ body { .reveal table th { font-weight: bold; } -.reveal table th, .reveal table td { +.reveal table th, +.reveal table td { text-align: left; padding: 0.2em 0.5em 0.2em 0.5em; border-bottom: 1px solid; } -.reveal table tr:last-child td { +.reveal table th[align="center"], +.reveal table td[align="center"] { + text-align: center; } + +.reveal table th[align="right"], +.reveal table td[align="right"] { + text-align: right; } + +.reveal table tbody tr:last-child th, +.reveal table tbody tr:last-child td { border-bottom: none; } .reveal sup { - vertical-align: super; } + vertical-align: super; + font-size: smaller; } .reveal sub { - vertical-align: sub; } + vertical-align: sub; + font-size: smaller; } .reveal small { display: inline-block; @@ -181,9 +209,9 @@ body { .reveal a { color: #e7ad52; text-decoration: none; - -webkit-transition: color 0.15s ease; - -moz-transition: color 0.15s ease; - transition: color 0.15s ease; } + -webkit-transition: color .15s ease; + -moz-transition: color .15s ease; + transition: color .15s ease; } .reveal a:hover { color: #f3d7ac; @@ -192,7 +220,7 @@ body { .reveal .roll span:after { color: #fff; - background: #d0881d; } + background: #d08a1d; } /********************************************* * IMAGES @@ -203,10 +231,14 @@ body { border: 4px solid #eee; box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); } +.reveal section img.plain { + border: 0; + box-shadow: none; } + .reveal a img { - -webkit-transition: all 0.15s linear; - -moz-transition: all 0.15s linear; - transition: all 0.15s linear; } + -webkit-transition: all .15s linear; + -moz-transition: all .15s linear; + transition: all .15s linear; } .reveal a:hover img { background: rgba(255, 255, 255, 0.2); @@ -216,44 +248,24 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.navigate-left, .reveal .controls div.navigate-left.enabled { - border-right-color: #e7ad52; } - -.reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled { - border-left-color: #e7ad52; } - -.reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled { - border-bottom-color: #e7ad52; } - -.reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled { - border-top-color: #e7ad52; } - -.reveal .controls div.navigate-left.enabled:hover { - border-right-color: #f3d7ac; } - -.reveal .controls div.navigate-right.enabled:hover { - border-left-color: #f3d7ac; } - -.reveal .controls div.navigate-up.enabled:hover { - border-bottom-color: #f3d7ac; } - -.reveal .controls div.navigate-down.enabled:hover { - border-top-color: #f3d7ac; } +.reveal .controls { + color: #e7ad52; } /********************************************* * PROGRESS BAR *********************************************/ .reveal .progress { - background: rgba(0, 0, 0, 0.2); } + background: rgba(0, 0, 0, 0.2); + color: #e7ad52; } .reveal .progress span { - background: #e7ad52; -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); transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } /********************************************* - * SLIDE NUMBER + * PRINT BACKGROUND *********************************************/ -.reveal .slide-number { - color: #e7ad52; } +@media print { + .backgrounds { + background-color: #111; } } diff --git a/css/theme/serif.css b/css/theme/serif.css index ed85db6..ea01066 100644 --- a/css/theme/serif.css +++ b/css/theme/serif.css @@ -15,8 +15,8 @@ body { background-color: #F0F1EB; } .reveal { - font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif; - font-size: 36px; + font-family: "Palatino Linotype", "Book Antiqua", Palatino, FreeSerif, serif; + font-size: 40px; font-weight: normal; color: #000; } @@ -25,17 +25,28 @@ body { background: #26351C; text-shadow: none; } -.reveal .slides > section, .reveal .slides > section > section { +::-moz-selection { + color: #fff; + background: #26351C; + text-shadow: none; } + +.reveal .slides section, +.reveal .slides section > section { line-height: 1.3; font-weight: inherit; } /********************************************* * HEADERS *********************************************/ -.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 { +.reveal h1, +.reveal h2, +.reveal h3, +.reveal h4, +.reveal h5, +.reveal h6 { margin: 0 0 20px 0; color: #383D3D; - font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif; + font-family: "Palatino Linotype", "Book Antiqua", Palatino, FreeSerif, serif; font-weight: normal; line-height: 1.2; letter-spacing: normal; @@ -66,17 +77,22 @@ body { line-height: 1.3; } /* Ensure certain elements are never larger than the slide itself */ -.reveal img, .reveal video, .reveal iframe { +.reveal img, +.reveal video, +.reveal iframe { max-width: 95%; max-height: 95%; } -.reveal strong, .reveal b { +.reveal strong, +.reveal b { font-weight: bold; } .reveal em { font-style: italic; } -.reveal ol, .reveal dl, .reveal ul { +.reveal ol, +.reveal dl, +.reveal ul { display: inline-block; text-align: left; margin: 0 0 0 1em; } @@ -93,7 +109,10 @@ body { .reveal ul ul ul { list-style-type: circle; } -.reveal ul ul, .reveal ul ol, .reveal ol ol, .reveal ol ul { +.reveal ul ul, +.reveal ul ol, +.reveal ol ol, +.reveal ol ul { display: block; margin-left: 40px; } @@ -103,9 +122,6 @@ body { .reveal dd { margin-left: 40px; } -.reveal q, .reveal blockquote { - quotes: none; } - .reveal blockquote { display: block; position: relative; @@ -116,7 +132,8 @@ body { background: rgba(255, 255, 255, 0.05); box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); } -.reveal blockquote p:first-child, .reveal blockquote p:last-child { +.reveal blockquote p:first-child, +.reveal blockquote p:last-child { display: inline-block; } .reveal q { @@ -135,16 +152,15 @@ body { box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); } .reveal code { - font-family: monospace; } + font-family: monospace; + text-transform: none; } .reveal pre code { display: block; padding: 5px; overflow: auto; max-height: 400px; - word-wrap: normal; - background: #3F3F3F; - color: #DCDCDC; } + word-wrap: normal; } .reveal table { margin: auto; @@ -154,19 +170,31 @@ body { .reveal table th { font-weight: bold; } -.reveal table th, .reveal table td { +.reveal table th, +.reveal table td { text-align: left; padding: 0.2em 0.5em 0.2em 0.5em; border-bottom: 1px solid; } -.reveal table tr:last-child td { +.reveal table th[align="center"], +.reveal table td[align="center"] { + text-align: center; } + +.reveal table th[align="right"], +.reveal table td[align="right"] { + text-align: right; } + +.reveal table tbody tr:last-child th, +.reveal table tbody tr:last-child td { border-bottom: none; } .reveal sup { - vertical-align: super; } + vertical-align: super; + font-size: smaller; } .reveal sub { - vertical-align: sub; } + vertical-align: sub; + font-size: smaller; } .reveal small { display: inline-block; @@ -183,12 +211,12 @@ body { .reveal a { color: #51483D; text-decoration: none; - -webkit-transition: color 0.15s ease; - -moz-transition: color 0.15s ease; - transition: color 0.15s ease; } + -webkit-transition: color .15s ease; + -moz-transition: color .15s ease; + transition: color .15s ease; } .reveal a:hover { - color: #8b7b69; + color: #8b7c69; text-shadow: none; border: none; } @@ -205,10 +233,14 @@ body { border: 4px solid #000; box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); } +.reveal section img.plain { + border: 0; + box-shadow: none; } + .reveal a img { - -webkit-transition: all 0.15s linear; - -moz-transition: all 0.15s linear; - transition: all 0.15s linear; } + -webkit-transition: all .15s linear; + -moz-transition: all .15s linear; + transition: all .15s linear; } .reveal a:hover img { background: rgba(255, 255, 255, 0.2); @@ -218,44 +250,24 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.navigate-left, .reveal .controls div.navigate-left.enabled { - border-right-color: #51483D; } - -.reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled { - border-left-color: #51483D; } - -.reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled { - border-bottom-color: #51483D; } - -.reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled { - border-top-color: #51483D; } - -.reveal .controls div.navigate-left.enabled:hover { - border-right-color: #8b7b69; } - -.reveal .controls div.navigate-right.enabled:hover { - border-left-color: #8b7b69; } - -.reveal .controls div.navigate-up.enabled:hover { - border-bottom-color: #8b7b69; } - -.reveal .controls div.navigate-down.enabled:hover { - border-top-color: #8b7b69; } +.reveal .controls { + color: #51483D; } /********************************************* * PROGRESS BAR *********************************************/ .reveal .progress { - background: rgba(0, 0, 0, 0.2); } + background: rgba(0, 0, 0, 0.2); + color: #51483D; } .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); transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } /********************************************* - * SLIDE NUMBER + * PRINT BACKGROUND *********************************************/ -.reveal .slide-number { - color: #51483D; } +@media print { + .backgrounds { + background-color: #F0F1EB; } } diff --git a/css/theme/simple.css b/css/theme/simple.css index d9153d7..8432d84 100644 --- a/css/theme/simple.css +++ b/css/theme/simple.css @@ -1,5 +1,3 @@ -@import url(https://fonts.googleapis.com/css?family=News+Cycle:400,700); -@import url(https://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. @@ -7,6 +5,11 @@ * 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 */ +@import url(https://fonts.googleapis.com/css?family=News+Cycle:400,700); +@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); +section.has-dark-background, section.has-dark-background h1, section.has-dark-background h2, section.has-dark-background h3, section.has-dark-background h4, section.has-dark-background h5, section.has-dark-background h6 { + color: #fff; } + /********************************************* * GLOBAL STYLES *********************************************/ @@ -15,8 +18,8 @@ body { background-color: #fff; } .reveal { - font-family: 'Lato', sans-serif; - font-size: 36px; + font-family: "Lato", sans-serif; + font-size: 40px; font-weight: normal; color: #000; } @@ -25,17 +28,28 @@ body { background: rgba(0, 0, 0, 0.99); text-shadow: none; } -.reveal .slides > section, .reveal .slides > section > section { +::-moz-selection { + color: #fff; + background: rgba(0, 0, 0, 0.99); + text-shadow: none; } + +.reveal .slides section, +.reveal .slides section > section { line-height: 1.3; font-weight: inherit; } /********************************************* * HEADERS *********************************************/ -.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 { +.reveal h1, +.reveal h2, +.reveal h3, +.reveal h4, +.reveal h5, +.reveal h6 { margin: 0 0 20px 0; color: #000; - font-family: 'News Cycle', Impact, sans-serif; + font-family: "News Cycle", Impact, sans-serif; font-weight: normal; line-height: 1.2; letter-spacing: normal; @@ -66,17 +80,22 @@ body { line-height: 1.3; } /* Ensure certain elements are never larger than the slide itself */ -.reveal img, .reveal video, .reveal iframe { +.reveal img, +.reveal video, +.reveal iframe { max-width: 95%; max-height: 95%; } -.reveal strong, .reveal b { +.reveal strong, +.reveal b { font-weight: bold; } .reveal em { font-style: italic; } -.reveal ol, .reveal dl, .reveal ul { +.reveal ol, +.reveal dl, +.reveal ul { display: inline-block; text-align: left; margin: 0 0 0 1em; } @@ -93,7 +112,10 @@ body { .reveal ul ul ul { list-style-type: circle; } -.reveal ul ul, .reveal ul ol, .reveal ol ol, .reveal ol ul { +.reveal ul ul, +.reveal ul ol, +.reveal ol ol, +.reveal ol ul { display: block; margin-left: 40px; } @@ -103,9 +125,6 @@ body { .reveal dd { margin-left: 40px; } -.reveal q, .reveal blockquote { - quotes: none; } - .reveal blockquote { display: block; position: relative; @@ -116,7 +135,8 @@ body { background: rgba(255, 255, 255, 0.05); box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); } -.reveal blockquote p:first-child, .reveal blockquote p:last-child { +.reveal blockquote p:first-child, +.reveal blockquote p:last-child { display: inline-block; } .reveal q { @@ -135,16 +155,15 @@ body { box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); } .reveal code { - font-family: monospace; } + font-family: monospace; + text-transform: none; } .reveal pre code { display: block; padding: 5px; overflow: auto; max-height: 400px; - word-wrap: normal; - background: #3F3F3F; - color: #DCDCDC; } + word-wrap: normal; } .reveal table { margin: auto; @@ -154,19 +173,31 @@ body { .reveal table th { font-weight: bold; } -.reveal table th, .reveal table td { +.reveal table th, +.reveal table td { text-align: left; padding: 0.2em 0.5em 0.2em 0.5em; border-bottom: 1px solid; } -.reveal table tr:last-child td { +.reveal table th[align="center"], +.reveal table td[align="center"] { + text-align: center; } + +.reveal table th[align="right"], +.reveal table td[align="right"] { + text-align: right; } + +.reveal table tbody tr:last-child th, +.reveal table tbody tr:last-child td { border-bottom: none; } .reveal sup { - vertical-align: super; } + vertical-align: super; + font-size: smaller; } .reveal sub { - vertical-align: sub; } + vertical-align: sub; + font-size: smaller; } .reveal small { display: inline-block; @@ -183,9 +214,9 @@ body { .reveal a { color: #00008B; text-decoration: none; - -webkit-transition: color 0.15s ease; - -moz-transition: color 0.15s ease; - transition: color 0.15s ease; } + -webkit-transition: color .15s ease; + -moz-transition: color .15s ease; + transition: color .15s ease; } .reveal a:hover { color: #0000f1; @@ -205,10 +236,14 @@ body { border: 4px solid #000; box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); } +.reveal section img.plain { + border: 0; + box-shadow: none; } + .reveal a img { - -webkit-transition: all 0.15s linear; - -moz-transition: all 0.15s linear; - transition: all 0.15s linear; } + -webkit-transition: all .15s linear; + -moz-transition: all .15s linear; + transition: all .15s linear; } .reveal a:hover img { background: rgba(255, 255, 255, 0.2); @@ -218,44 +253,24 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.navigate-left, .reveal .controls div.navigate-left.enabled { - border-right-color: #00008B; } - -.reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled { - border-left-color: #00008B; } - -.reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled { - border-bottom-color: #00008B; } - -.reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled { - border-top-color: #00008B; } - -.reveal .controls div.navigate-left.enabled:hover { - border-right-color: #0000f1; } - -.reveal .controls div.navigate-right.enabled:hover { - border-left-color: #0000f1; } - -.reveal .controls div.navigate-up.enabled:hover { - border-bottom-color: #0000f1; } - -.reveal .controls div.navigate-down.enabled:hover { - border-top-color: #0000f1; } +.reveal .controls { + color: #00008B; } /********************************************* * PROGRESS BAR *********************************************/ .reveal .progress { - background: rgba(0, 0, 0, 0.2); } + background: rgba(0, 0, 0, 0.2); + color: #00008B; } .reveal .progress span { - background: #00008B; -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); transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } /********************************************* - * SLIDE NUMBER + * PRINT BACKGROUND *********************************************/ -.reveal .slide-number { - color: #00008B; } +@media print { + .backgrounds { + background-color: #fff; } } diff --git a/css/theme/sky.css b/css/theme/sky.css index f7e8402..6f60a1d 100644 --- a/css/theme/sky.css +++ b/css/theme/sky.css @@ -1,10 +1,10 @@ -@import url(https://fonts.googleapis.com/css?family=Quicksand:400,700,400italic,700italic); -@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700); /** * Sky theme for reveal.js. * * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se */ +@import url(https://fonts.googleapis.com/css?family=Quicksand:400,700,400italic,700italic); +@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700); .reveal a { line-height: 1.3em; } @@ -22,8 +22,8 @@ body { background-color: #f7fbfc; } .reveal { - font-family: 'Open Sans', sans-serif; - font-size: 36px; + font-family: "Open Sans", sans-serif; + font-size: 40px; font-weight: normal; color: #333; } @@ -32,17 +32,28 @@ body { background: #134674; text-shadow: none; } -.reveal .slides > section, .reveal .slides > section > section { +::-moz-selection { + color: #fff; + background: #134674; + text-shadow: none; } + +.reveal .slides section, +.reveal .slides section > section { line-height: 1.3; font-weight: inherit; } /********************************************* * HEADERS *********************************************/ -.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 { +.reveal h1, +.reveal h2, +.reveal h3, +.reveal h4, +.reveal h5, +.reveal h6 { margin: 0 0 20px 0; color: #333; - font-family: 'Quicksand', sans-serif; + font-family: "Quicksand", sans-serif; font-weight: normal; line-height: 1.2; letter-spacing: -0.08em; @@ -73,17 +84,22 @@ body { line-height: 1.3; } /* Ensure certain elements are never larger than the slide itself */ -.reveal img, .reveal video, .reveal iframe { +.reveal img, +.reveal video, +.reveal iframe { max-width: 95%; max-height: 95%; } -.reveal strong, .reveal b { +.reveal strong, +.reveal b { font-weight: bold; } .reveal em { font-style: italic; } -.reveal ol, .reveal dl, .reveal ul { +.reveal ol, +.reveal dl, +.reveal ul { display: inline-block; text-align: left; margin: 0 0 0 1em; } @@ -100,7 +116,10 @@ body { .reveal ul ul ul { list-style-type: circle; } -.reveal ul ul, .reveal ul ol, .reveal ol ol, .reveal ol ul { +.reveal ul ul, +.reveal ul ol, +.reveal ol ol, +.reveal ol ul { display: block; margin-left: 40px; } @@ -110,9 +129,6 @@ body { .reveal dd { margin-left: 40px; } -.reveal q, .reveal blockquote { - quotes: none; } - .reveal blockquote { display: block; position: relative; @@ -123,7 +139,8 @@ body { background: rgba(255, 255, 255, 0.05); box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); } -.reveal blockquote p:first-child, .reveal blockquote p:last-child { +.reveal blockquote p:first-child, +.reveal blockquote p:last-child { display: inline-block; } .reveal q { @@ -142,16 +159,15 @@ body { box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); } .reveal code { - font-family: monospace; } + font-family: monospace; + text-transform: none; } .reveal pre code { display: block; padding: 5px; overflow: auto; max-height: 400px; - word-wrap: normal; - background: #3F3F3F; - color: #DCDCDC; } + word-wrap: normal; } .reveal table { margin: auto; @@ -161,19 +177,31 @@ body { .reveal table th { font-weight: bold; } -.reveal table th, .reveal table td { +.reveal table th, +.reveal table td { text-align: left; padding: 0.2em 0.5em 0.2em 0.5em; border-bottom: 1px solid; } -.reveal table tr:last-child td { +.reveal table th[align="center"], +.reveal table td[align="center"] { + text-align: center; } + +.reveal table th[align="right"], +.reveal table td[align="right"] { + text-align: right; } + +.reveal table tbody tr:last-child th, +.reveal table tbody tr:last-child td { border-bottom: none; } .reveal sup { - vertical-align: super; } + vertical-align: super; + font-size: smaller; } .reveal sub { - vertical-align: sub; } + vertical-align: sub; + font-size: smaller; } .reveal small { display: inline-block; @@ -190,18 +218,18 @@ body { .reveal a { color: #3b759e; text-decoration: none; - -webkit-transition: color 0.15s ease; - -moz-transition: color 0.15s ease; - transition: color 0.15s ease; } + -webkit-transition: color .15s ease; + -moz-transition: color .15s ease; + transition: color .15s ease; } .reveal a:hover { - color: #74a8cb; + color: #74a7cb; text-shadow: none; border: none; } .reveal .roll span:after { color: #fff; - background: #264d66; } + background: #264c66; } /********************************************* * IMAGES @@ -212,10 +240,14 @@ body { border: 4px solid #333; box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); } +.reveal section img.plain { + border: 0; + box-shadow: none; } + .reveal a img { - -webkit-transition: all 0.15s linear; - -moz-transition: all 0.15s linear; - transition: all 0.15s linear; } + -webkit-transition: all .15s linear; + -moz-transition: all .15s linear; + transition: all .15s linear; } .reveal a:hover img { background: rgba(255, 255, 255, 0.2); @@ -225,44 +257,24 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.navigate-left, .reveal .controls div.navigate-left.enabled { - border-right-color: #3b759e; } - -.reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled { - border-left-color: #3b759e; } - -.reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled { - border-bottom-color: #3b759e; } - -.reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled { - border-top-color: #3b759e; } - -.reveal .controls div.navigate-left.enabled:hover { - border-right-color: #74a8cb; } - -.reveal .controls div.navigate-right.enabled:hover { - border-left-color: #74a8cb; } - -.reveal .controls div.navigate-up.enabled:hover { - border-bottom-color: #74a8cb; } - -.reveal .controls div.navigate-down.enabled:hover { - border-top-color: #74a8cb; } +.reveal .controls { + color: #3b759e; } /********************************************* * PROGRESS BAR *********************************************/ .reveal .progress { - background: rgba(0, 0, 0, 0.2); } + background: rgba(0, 0, 0, 0.2); + color: #3b759e; } .reveal .progress span { - background: #3b759e; -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } /********************************************* - * SLIDE NUMBER + * PRINT BACKGROUND *********************************************/ -.reveal .slide-number { - color: #3b759e; } +@media print { + .backgrounds { + background-color: #f7fbfc; } } diff --git a/css/theme/solarized.css b/css/theme/solarized.css index 583201a..fe81f09 100644 --- a/css/theme/solarized.css +++ b/css/theme/solarized.css @@ -1,9 +1,9 @@ -@import url(../../lib/font/league-gothic/league-gothic.css); -@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); /** * Solarized Light theme for reveal.js. * Author: Achim Staebler */ +@import url(../../lib/font/league-gothic/league-gothic.css); +@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); /** * Solarized colors by Ethan Schoonover */ @@ -19,8 +19,8 @@ body { background-color: #fdf6e3; } .reveal { - font-family: 'Lato', sans-serif; - font-size: 36px; + font-family: "Lato", sans-serif; + font-size: 40px; font-weight: normal; color: #657b83; } @@ -29,17 +29,28 @@ body { background: #d33682; text-shadow: none; } -.reveal .slides > section, .reveal .slides > section > section { +::-moz-selection { + color: #fff; + background: #d33682; + text-shadow: none; } + +.reveal .slides section, +.reveal .slides section > section { line-height: 1.3; font-weight: inherit; } /********************************************* * HEADERS *********************************************/ -.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 { +.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; + font-family: "League Gothic", Impact, sans-serif; font-weight: normal; line-height: 1.2; letter-spacing: normal; @@ -70,17 +81,22 @@ body { line-height: 1.3; } /* Ensure certain elements are never larger than the slide itself */ -.reveal img, .reveal video, .reveal iframe { +.reveal img, +.reveal video, +.reveal iframe { max-width: 95%; max-height: 95%; } -.reveal strong, .reveal b { +.reveal strong, +.reveal b { font-weight: bold; } .reveal em { font-style: italic; } -.reveal ol, .reveal dl, .reveal ul { +.reveal ol, +.reveal dl, +.reveal ul { display: inline-block; text-align: left; margin: 0 0 0 1em; } @@ -97,7 +113,10 @@ body { .reveal ul ul ul { list-style-type: circle; } -.reveal ul ul, .reveal ul ol, .reveal ol ol, .reveal ol ul { +.reveal ul ul, +.reveal ul ol, +.reveal ol ol, +.reveal ol ul { display: block; margin-left: 40px; } @@ -107,9 +126,6 @@ body { .reveal dd { margin-left: 40px; } -.reveal q, .reveal blockquote { - quotes: none; } - .reveal blockquote { display: block; position: relative; @@ -120,7 +136,8 @@ body { background: rgba(255, 255, 255, 0.05); box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); } -.reveal blockquote p:first-child, .reveal blockquote p:last-child { +.reveal blockquote p:first-child, +.reveal blockquote p:last-child { display: inline-block; } .reveal q { @@ -139,16 +156,15 @@ body { box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); } .reveal code { - font-family: monospace; } + font-family: monospace; + text-transform: none; } .reveal pre code { display: block; padding: 5px; overflow: auto; max-height: 400px; - word-wrap: normal; - background: #3F3F3F; - color: #DCDCDC; } + word-wrap: normal; } .reveal table { margin: auto; @@ -158,19 +174,31 @@ body { .reveal table th { font-weight: bold; } -.reveal table th, .reveal table td { +.reveal table th, +.reveal table td { text-align: left; padding: 0.2em 0.5em 0.2em 0.5em; border-bottom: 1px solid; } -.reveal table tr:last-child td { +.reveal table th[align="center"], +.reveal table td[align="center"] { + text-align: center; } + +.reveal table th[align="right"], +.reveal table td[align="right"] { + text-align: right; } + +.reveal table tbody tr:last-child th, +.reveal table tbody tr:last-child td { border-bottom: none; } .reveal sup { - vertical-align: super; } + vertical-align: super; + font-size: smaller; } .reveal sub { - vertical-align: sub; } + vertical-align: sub; + font-size: smaller; } .reveal small { display: inline-block; @@ -187,18 +215,18 @@ body { .reveal a { color: #268bd2; text-decoration: none; - -webkit-transition: color 0.15s ease; - -moz-transition: color 0.15s ease; - transition: color 0.15s ease; } + -webkit-transition: color .15s ease; + -moz-transition: color .15s ease; + transition: color .15s ease; } .reveal a:hover { - color: #78bae6; + color: #78b9e6; text-shadow: none; border: none; } .reveal .roll span:after { color: #fff; - background: #1a6291; } + background: #1a6091; } /********************************************* * IMAGES @@ -209,10 +237,14 @@ body { border: 4px solid #657b83; box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); } +.reveal section img.plain { + border: 0; + box-shadow: none; } + .reveal a img { - -webkit-transition: all 0.15s linear; - -moz-transition: all 0.15s linear; - transition: all 0.15s linear; } + -webkit-transition: all .15s linear; + -moz-transition: all .15s linear; + transition: all .15s linear; } .reveal a:hover img { background: rgba(255, 255, 255, 0.2); @@ -222,44 +254,24 @@ body { /********************************************* * 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: #78bae6; } - -.reveal .controls div.navigate-right.enabled:hover { - border-left-color: #78bae6; } - -.reveal .controls div.navigate-up.enabled:hover { - border-bottom-color: #78bae6; } - -.reveal .controls div.navigate-down.enabled:hover { - border-top-color: #78bae6; } +.reveal .controls { + color: #268bd2; } /********************************************* * PROGRESS BAR *********************************************/ .reveal .progress { - background: rgba(0, 0, 0, 0.2); } + background: rgba(0, 0, 0, 0.2); + color: #268bd2; } .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); transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } /********************************************* - * SLIDE NUMBER + * PRINT BACKGROUND *********************************************/ -.reveal .slide-number { - color: #268bd2; } +@media print { + .backgrounds { + background-color: #fdf6e3; } } diff --git a/css/theme/source/black.scss b/css/theme/source/black.scss index 73dfecb..84e8d9a 100644 --- a/css/theme/source/black.scss +++ b/css/theme/source/black.scss @@ -1,7 +1,7 @@ /** * Black theme for reveal.js. This is the opposite of the 'white' theme. * - * Copyright (C) 2015 Hakim El Hattab, http://hakim.se + * By Hakim El Hattab, http://hakim.se */ @@ -21,7 +21,7 @@ $backgroundColor: #222; $mainColor: #fff; $headingColor: #fff; -$mainFontSize: 38px; +$mainFontSize: 42px; $mainFont: 'Source Sans Pro', Helvetica, sans-serif; $headingFont: 'Source Sans Pro', Helvetica, sans-serif; $headingTextShadow: none; diff --git a/css/theme/source/blood.scss b/css/theme/source/blood.scss index f2e3a09..4533fc0 100644 --- a/css/theme/source/blood.scss +++ b/css/theme/source/blood.scss @@ -24,9 +24,10 @@ $blood: #a23; $coal: #222; $codeBackground: #23241f; +$backgroundColor: $coal; + // Main text $mainFont: Ubuntu, 'sans-serif'; -$mainFontSize: 36px; $mainColor: #eee; // Headings @@ -45,10 +46,6 @@ $linkColorHover: lighten( $linkColor, 20% ); $selectionBackgroundColor: $blood; $selectionColor: #fff; -// Background generator -@mixin bodyBackground() { - @include radial-gradient( $coal, lighten( $coal, 25% ) ); -} // Theme template ------------------------------ @import "../template/theme"; @@ -61,7 +58,7 @@ $selectionColor: #fff; text-shadow: 1px 1px $coal; } -.reveal h1, +.reveal h1, .reveal h2, .reveal h3, .reveal h4, @@ -70,16 +67,6 @@ $selectionColor: #fff; font-weight: 700; } -.reveal a, -.reveal a:hover { - text-shadow: 2px 2px 2px #000; -} - -.reveal small a, -.reveal small a:hover { - text-shadow: 1px 1px 1px #000; -} - .reveal p code { background-color: $codeBackground; display: inline-block; diff --git a/css/theme/source/night.scss b/css/theme/source/night.scss index b0cb57f..d49a282 100644 --- a/css/theme/source/night.scss +++ b/css/theme/source/night.scss @@ -27,7 +27,6 @@ $headingTextShadow: none; $headingLetterSpacing: -0.03em; $headingTextTransform: none; $selectionBackgroundColor: #e7ad52; -$mainFontSize: 30px; // Theme template ------------------------------ diff --git a/css/theme/source/simple.scss b/css/theme/source/simple.scss index 84c7d9b..394c9cd 100644 --- a/css/theme/source/simple.scss +++ b/css/theme/source/simple.scss @@ -31,6 +31,11 @@ $linkColor: #00008B; $linkColorHover: lighten( $linkColor, 20% ); $selectionBackgroundColor: rgba(0, 0, 0, 0.99); +section.has-dark-background { + &, h1, h2, h3, h4, h5, h6 { + color: #fff; + } +} // Theme template ------------------------------ diff --git a/css/theme/source/white.scss b/css/theme/source/white.scss index 4c5b647..7f06ffd 100644 --- a/css/theme/source/white.scss +++ b/css/theme/source/white.scss @@ -1,7 +1,7 @@ /** * White theme for reveal.js. This is the opposite of the 'black' theme. * - * Copyright (C) 2015 Hakim El Hattab, http://hakim.se + * By Hakim El Hattab, http://hakim.se */ @@ -21,7 +21,7 @@ $backgroundColor: #fff; $mainColor: #222; $headingColor: #222; -$mainFontSize: 38px; +$mainFontSize: 42px; $mainFont: 'Source Sans Pro', Helvetica, sans-serif; $headingFont: 'Source Sans Pro', Helvetica, sans-serif; $headingTextShadow: none; diff --git a/css/theme/template/settings.scss b/css/theme/template/settings.scss index ffaac23..5a917f8 100644 --- a/css/theme/template/settings.scss +++ b/css/theme/template/settings.scss @@ -6,7 +6,7 @@ $backgroundColor: #2b2b2b; // Primary/body text $mainFont: 'Lato', sans-serif; -$mainFontSize: 36px; +$mainFontSize: 40px; $mainColor: #eee; // Vertical spacing between blocks of text @@ -28,6 +28,8 @@ $heading2Size: 2.11em; $heading3Size: 1.55em; $heading4Size: 1.00em; +$codeFont: monospace; + // Links and actions $linkColor: #13DAEC; $linkColorHover: lighten( $linkColor, 20% ); @@ -40,4 +42,4 @@ $selectionColor: #fff; // to return a background image or gradient @mixin bodyBackground() { background: $backgroundColor; -}
\ No newline at end of file +} diff --git a/css/theme/template/theme.scss b/css/theme/template/theme.scss index d1be10a..215e2d4 100644 --- a/css/theme/template/theme.scss +++ b/css/theme/template/theme.scss @@ -22,8 +22,14 @@ body { text-shadow: none; } -.reveal .slides>section, -.reveal .slides>section>section { +::-moz-selection { + color: $selectionColor; + background: $selectionBackgroundColor; + text-shadow: none; +} + +.reveal .slides section, +.reveal .slides section>section { line-height: 1.3; font-weight: inherit; } @@ -128,11 +134,6 @@ body { margin-left: 40px; } -.reveal q, -.reveal blockquote { - quotes: none; -} - .reveal blockquote { display: block; position: relative; @@ -161,15 +162,17 @@ body { text-align: left; font-size: 0.55em; - font-family: monospace; + font-family: $codeFont; line-height: 1.2em; word-wrap: break-word; box-shadow: 0px 0px 6px rgba(0,0,0,0.3); } + .reveal code { - font-family: monospace; + font-family: $codeFont; + text-transform: none; } .reveal pre code { @@ -178,8 +181,6 @@ body { overflow: auto; max-height: 400px; word-wrap: normal; - background: #3F3F3F; - color: #DCDCDC; } .reveal table { @@ -199,15 +200,28 @@ body { border-bottom: 1px solid; } -.reveal table tr:last-child td { - border-bottom: none; +.reveal table th[align="center"], +.reveal table td[align="center"] { + text-align: center; +} + +.reveal table th[align="right"], +.reveal table td[align="right"] { + text-align: right; +} + +.reveal table tbody tr:last-child th, +.reveal table tbody tr:last-child td { + border-bottom: none; } .reveal sup { vertical-align: super; + font-size: smaller; } .reveal sub { vertical-align: sub; + font-size: smaller; } .reveal small { @@ -259,6 +273,11 @@ body { box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); } + .reveal section img.plain { + border: 0; + box-shadow: none; + } + .reveal a img { -webkit-transition: all .15s linear; -moz-transition: all .15s linear; @@ -277,40 +296,8 @@ body { * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.navigate-left, -.reveal .controls div.navigate-left.enabled { - border-right-color: $linkColor; -} - -.reveal .controls div.navigate-right, -.reveal .controls div.navigate-right.enabled { - border-left-color: $linkColor; -} - -.reveal .controls div.navigate-up, -.reveal .controls div.navigate-up.enabled { - border-bottom-color: $linkColor; -} - -.reveal .controls div.navigate-down, -.reveal .controls div.navigate-down.enabled { - border-top-color: $linkColor; -} - -.reveal .controls div.navigate-left.enabled:hover { - border-right-color: $linkColorHover; -} - -.reveal .controls div.navigate-right.enabled:hover { - border-left-color: $linkColorHover; -} - -.reveal .controls div.navigate-up.enabled:hover { - border-bottom-color: $linkColorHover; -} - -.reveal .controls div.navigate-down.enabled:hover { - border-top-color: $linkColorHover; +.reveal .controls { + color: $linkColor; } @@ -320,20 +307,19 @@ body { .reveal .progress { background: rgba(0,0,0,0.2); + color: $linkColor; } .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); - 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); } /********************************************* - * SLIDE NUMBER + * PRINT BACKGROUND *********************************************/ -.reveal .slide-number { - color: $linkColor; + @media print { + .backgrounds { + background-color: $backgroundColor; + } } - - diff --git a/css/theme/white.css b/css/theme/white.css index 5fdb2fc..27e44a1 100644 --- a/css/theme/white.css +++ b/css/theme/white.css @@ -1,9 +1,9 @@ -@import url(../../lib/font/source-sans-pro/source-sans-pro.css); /** * White theme for reveal.js. This is the opposite of the 'black' theme. * - * Copyright (C) 2015 Hakim El Hattab, http://hakim.se + * By Hakim El Hattab, http://hakim.se */ +@import url(../../lib/font/source-sans-pro/source-sans-pro.css); section.has-dark-background, section.has-dark-background h1, section.has-dark-background h2, section.has-dark-background h3, section.has-dark-background h4, section.has-dark-background h5, section.has-dark-background h6 { color: #fff; } @@ -15,8 +15,8 @@ body { background-color: #fff; } .reveal { - font-family: 'Source Sans Pro', Helvetica, sans-serif; - font-size: 38px; + font-family: "Source Sans Pro", Helvetica, sans-serif; + font-size: 42px; font-weight: normal; color: #222; } @@ -25,17 +25,28 @@ body { background: #98bdef; text-shadow: none; } -.reveal .slides > section, .reveal .slides > section > section { +::-moz-selection { + color: #fff; + background: #98bdef; + text-shadow: none; } + +.reveal .slides section, +.reveal .slides section > section { line-height: 1.3; font-weight: inherit; } /********************************************* * HEADERS *********************************************/ -.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 { +.reveal h1, +.reveal h2, +.reveal h3, +.reveal h4, +.reveal h5, +.reveal h6 { margin: 0 0 20px 0; color: #222; - font-family: 'Source Sans Pro', Helvetica, sans-serif; + font-family: "Source Sans Pro", Helvetica, sans-serif; font-weight: 600; line-height: 1.2; letter-spacing: normal; @@ -66,17 +77,22 @@ body { line-height: 1.3; } /* Ensure certain elements are never larger than the slide itself */ -.reveal img, .reveal video, .reveal iframe { +.reveal img, +.reveal video, +.reveal iframe { max-width: 95%; max-height: 95%; } -.reveal strong, .reveal b { +.reveal strong, +.reveal b { font-weight: bold; } .reveal em { font-style: italic; } -.reveal ol, .reveal dl, .reveal ul { +.reveal ol, +.reveal dl, +.reveal ul { display: inline-block; text-align: left; margin: 0 0 0 1em; } @@ -93,7 +109,10 @@ body { .reveal ul ul ul { list-style-type: circle; } -.reveal ul ul, .reveal ul ol, .reveal ol ol, .reveal ol ul { +.reveal ul ul, +.reveal ul ol, +.reveal ol ol, +.reveal ol ul { display: block; margin-left: 40px; } @@ -103,9 +122,6 @@ body { .reveal dd { margin-left: 40px; } -.reveal q, .reveal blockquote { - quotes: none; } - .reveal blockquote { display: block; position: relative; @@ -116,7 +132,8 @@ body { background: rgba(255, 255, 255, 0.05); box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); } -.reveal blockquote p:first-child, .reveal blockquote p:last-child { +.reveal blockquote p:first-child, +.reveal blockquote p:last-child { display: inline-block; } .reveal q { @@ -135,16 +152,15 @@ body { box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); } .reveal code { - font-family: monospace; } + font-family: monospace; + text-transform: none; } .reveal pre code { display: block; padding: 5px; overflow: auto; max-height: 400px; - word-wrap: normal; - background: #3F3F3F; - color: #DCDCDC; } + word-wrap: normal; } .reveal table { margin: auto; @@ -154,19 +170,31 @@ body { .reveal table th { font-weight: bold; } -.reveal table th, .reveal table td { +.reveal table th, +.reveal table td { text-align: left; padding: 0.2em 0.5em 0.2em 0.5em; border-bottom: 1px solid; } -.reveal table tr:last-child td { +.reveal table th[align="center"], +.reveal table td[align="center"] { + text-align: center; } + +.reveal table th[align="right"], +.reveal table td[align="right"] { + text-align: right; } + +.reveal table tbody tr:last-child th, +.reveal table tbody tr:last-child td { border-bottom: none; } .reveal sup { - vertical-align: super; } + vertical-align: super; + font-size: smaller; } .reveal sub { - vertical-align: sub; } + vertical-align: sub; + font-size: smaller; } .reveal small { display: inline-block; @@ -183,18 +211,18 @@ body { .reveal a { color: #2a76dd; text-decoration: none; - -webkit-transition: color 0.15s ease; - -moz-transition: color 0.15s ease; - transition: color 0.15s ease; } + -webkit-transition: color .15s ease; + -moz-transition: color .15s ease; + transition: color .15s ease; } .reveal a:hover { - color: #6ca2e8; + color: #6ca0e8; text-shadow: none; border: none; } .reveal .roll span:after { color: #fff; - background: #1a54a1; } + background: #1a53a1; } /********************************************* * IMAGES @@ -205,10 +233,14 @@ body { border: 4px solid #222; box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); } +.reveal section img.plain { + border: 0; + box-shadow: none; } + .reveal a img { - -webkit-transition: all 0.15s linear; - -moz-transition: all 0.15s linear; - transition: all 0.15s linear; } + -webkit-transition: all .15s linear; + -moz-transition: all .15s linear; + transition: all .15s linear; } .reveal a:hover img { background: rgba(255, 255, 255, 0.2); @@ -218,44 +250,24 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.navigate-left, .reveal .controls div.navigate-left.enabled { - border-right-color: #2a76dd; } - -.reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled { - border-left-color: #2a76dd; } - -.reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled { - border-bottom-color: #2a76dd; } - -.reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled { - border-top-color: #2a76dd; } - -.reveal .controls div.navigate-left.enabled:hover { - border-right-color: #6ca2e8; } - -.reveal .controls div.navigate-right.enabled:hover { - border-left-color: #6ca2e8; } - -.reveal .controls div.navigate-up.enabled:hover { - border-bottom-color: #6ca2e8; } - -.reveal .controls div.navigate-down.enabled:hover { - border-top-color: #6ca2e8; } +.reveal .controls { + color: #2a76dd; } /********************************************* * PROGRESS BAR *********************************************/ .reveal .progress { - background: rgba(0, 0, 0, 0.2); } + background: rgba(0, 0, 0, 0.2); + color: #2a76dd; } .reveal .progress span { - background: #2a76dd; -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); transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } /********************************************* - * SLIDE NUMBER + * PRINT BACKGROUND *********************************************/ -.reveal .slide-number { - color: #2a76dd; } +@media print { + .backgrounds { + background-color: #fff; } } |