diff options
Diffstat (limited to 'css/theme')
-rw-r--r-- | css/theme/README.md | 6 | ||||
-rw-r--r-- | css/theme/beige.css | 253 | ||||
-rw-r--r-- | css/theme/black.css | 269 | ||||
-rw-r--r-- | css/theme/blood.css | 280 | ||||
-rw-r--r-- | css/theme/default.css | 148 | ||||
-rw-r--r-- | css/theme/league.css | 275 | ||||
-rw-r--r-- | css/theme/moon.css | 235 | ||||
-rw-r--r-- | css/theme/night.css | 223 | ||||
-rw-r--r-- | css/theme/serif.css | 255 | ||||
-rw-r--r-- | css/theme/simple.css | 239 | ||||
-rw-r--r-- | css/theme/sky.css | 233 | ||||
-rw-r--r-- | css/theme/solarized.css | 235 | ||||
-rw-r--r-- | css/theme/source/beige.scss | 13 | ||||
-rw-r--r-- | css/theme/source/black.scss | 49 | ||||
-rw-r--r-- | css/theme/source/blood.scss | 18 | ||||
-rw-r--r-- | css/theme/source/league.scss (renamed from css/theme/source/default.scss) | 18 | ||||
-rw-r--r-- | css/theme/source/moon.scss | 13 | ||||
-rw-r--r-- | css/theme/source/serif.scss | 2 | ||||
-rw-r--r-- | css/theme/source/sky.scss | 2 | ||||
-rw-r--r-- | css/theme/source/solarized.scss | 13 | ||||
-rw-r--r-- | css/theme/source/white.scss | 49 | ||||
-rw-r--r-- | css/theme/template/settings.scss | 17 | ||||
-rw-r--r-- | css/theme/template/theme.scss | 234 | ||||
-rw-r--r-- | css/theme/white.css | 269 |
24 files changed, 2629 insertions, 719 deletions
diff --git a/css/theme/README.md b/css/theme/README.md index 8237586..753e0c0 100644 --- a/css/theme/README.md +++ b/css/theme/README.md @@ -2,8 +2,6 @@ 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`). - ## 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). @@ -17,9 +15,9 @@ 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 themes` to compile the Sass file to CSS and you are ready to use your new theme. +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 089cb7b..4f5be26 100644 --- a/css/theme/beige.css +++ b/css/theme/beige.css @@ -1,81 +1,208 @@ +@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 */ -@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; } - /********************************************* * GLOBAL STYLES *********************************************/ body { background: #f7f2d3; - background: -moz-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%); - background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, white), color-stop(100%, #f7f2d3)); - background: -webkit-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%); - background: -o-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%); - background: -ms-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%); - background: radial-gradient(center, circle cover, white 0%, #f7f2d3 100%); + 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-color: #f7f3de; } .reveal { - font-family: "Lato", sans-serif; + font-family: 'Lato', sans-serif; font-size: 36px; font-weight: normal; - letter-spacing: -0.02em; - color: #333333; } + color: #333; } ::selection { - color: white; + 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: #333333; - font-family: "League Gothic", Impact, sans-serif; - line-height: 0.9em; - letter-spacing: 0.02em; + color: #333; + font-family: 'League Gothic', Impact, sans-serif; + font-weight: normal; + line-height: 1.2; + letter-spacing: normal; text-transform: uppercase; - text-shadow: none; } + text-shadow: none; + word-wrap: break-word; } + +.reveal h1 { + font-size: 3.77em; } + +.reveal h2 { + font-size: 2.11em; } + +.reveal h3 { + font-size: 1.55em; } + +.reveal h4 { + font-size: 1em; } .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 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 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); } + +/********************************************* + * OTHER + *********************************************/ +.reveal p { + margin: 20px 0; + line-height: 1.3; } + +/* Ensure certain elements are never larger than the slide itself */ +.reveal img, .reveal video, .reveal iframe { + max-width: 95%; + max-height: 95%; } + +.reveal strong, .reveal b { + font-weight: bold; } + +.reveal em { + font-style: italic; } + +.reveal ol, .reveal dl, .reveal ul { + display: inline-block; + text-align: left; + margin: 0 0 0 1em; } + +.reveal ol { + list-style-type: decimal; } + +.reveal ul { + list-style-type: disc; } + +.reveal ul ul { + list-style-type: square; } + +.reveal ul ul ul { + list-style-type: circle; } + +.reveal ul ul, .reveal ul ol, .reveal ol ol, .reveal ol ul { + display: block; + margin-left: 40px; } + +.reveal dt { + font-weight: bold; } + +.reveal dd { + margin-left: 40px; } + +.reveal q, .reveal blockquote { + quotes: none; } + +.reveal blockquote { + display: block; + position: relative; + width: 70%; + margin: 20px auto; + padding: 5px; + font-style: italic; + 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 { + display: inline-block; } + +.reveal q { + font-style: italic; } + +.reveal pre { + display: block; + position: relative; + width: 90%; + margin: 20px auto; + text-align: left; + font-size: 0.55em; + font-family: monospace; + line-height: 1.2em; + word-wrap: break-word; + box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); } + +.reveal code { + font-family: monospace; } + +.reveal pre code { + display: block; + padding: 5px; + overflow: auto; + max-height: 400px; + word-wrap: normal; } + +.reveal table { + margin: auto; + border-collapse: collapse; + border-spacing: 0; } + +.reveal table th { + font-weight: bold; } + +.reveal table th, .reveal table td { + text-align: left; + padding: 0.2em 0.5em 0.2em 0.5em; + border-bottom: 1px solid; } + +.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 tr:last-child td { + border-bottom: none; } + +.reveal sup { + vertical-align: super; } + +.reveal sub { + vertical-align: sub; } + +.reveal small { + display: inline-block; + font-size: 0.6em; + line-height: 1.2em; + vertical-align: top; } + +.reveal small * { + vertical-align: top; } /********************************************* * LINKS *********************************************/ -.reveal a:not(.image) { +.reveal a { color: #8b743d; text-decoration: none; - -webkit-transition: color .15s ease; - -moz-transition: color .15s ease; - -ms-transition: color .15s ease; - -o-transition: color .15s ease; - transition: color .15s ease; } - -.reveal a:not(.image):hover { - color: #c0a86e; + -webkit-transition: color 0.15s ease; + -moz-transition: color 0.15s ease; + transition: color 0.15s ease; } + +.reveal a:hover { + color: #c0a76e; text-shadow: none; border: none; } .reveal .roll span:after { color: #fff; - background: #564826; } + background: #564726; } /********************************************* * IMAGES @@ -83,13 +210,17 @@ body { .reveal section img { margin: 15px 0px; 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; } + 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; } .reveal a:hover img { background: rgba(255, 255, 255, 0.2); @@ -99,33 +230,29 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.navigate-left, -.reveal .controls div.navigate-left.enabled { +.reveal .controls .navigate-left, .reveal .controls .navigate-left.enabled { border-right-color: #8b743d; } -.reveal .controls div.navigate-right, -.reveal .controls div.navigate-right.enabled { +.reveal .controls .navigate-right, .reveal .controls .navigate-right.enabled { border-left-color: #8b743d; } -.reveal .controls div.navigate-up, -.reveal .controls div.navigate-up.enabled { +.reveal .controls .navigate-up, .reveal .controls .navigate-up.enabled { border-bottom-color: #8b743d; } -.reveal .controls div.navigate-down, -.reveal .controls div.navigate-down.enabled { +.reveal .controls .navigate-down, .reveal .controls .navigate-down.enabled { border-top-color: #8b743d; } -.reveal .controls div.navigate-left.enabled:hover { - border-right-color: #c0a86e; } +.reveal .controls .navigate-left.enabled:hover { + border-right-color: #c0a76e; } -.reveal .controls div.navigate-right.enabled:hover { - border-left-color: #c0a86e; } +.reveal .controls .navigate-right.enabled:hover { + border-left-color: #c0a76e; } -.reveal .controls div.navigate-up.enabled:hover { - border-bottom-color: #c0a86e; } +.reveal .controls .navigate-up.enabled:hover { + border-bottom-color: #c0a76e; } -.reveal .controls div.navigate-down.enabled:hover { - border-top-color: #c0a86e; } +.reveal .controls .navigate-down.enabled:hover { + border-top-color: #c0a76e; } /********************************************* * PROGRESS BAR @@ -137,8 +264,6 @@ body { background: #8b743d; -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); - -ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); - -o-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } /********************************************* diff --git a/css/theme/black.css b/css/theme/black.css new file mode 100644 index 0000000..3cee63e --- /dev/null +++ b/css/theme/black.css @@ -0,0 +1,269 @@ +@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 + */ +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; } + +/********************************************* + * GLOBAL STYLES + *********************************************/ +body { + background: #222; + background-color: #222; } + +.reveal { + font-family: 'Source Sans Pro', Helvetica, sans-serif; + font-size: 38px; + font-weight: normal; + color: #fff; } + +::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 { + margin: 0 0 20px 0; + color: #fff; + font-family: 'Source Sans Pro', Helvetica, sans-serif; + font-weight: 600; + line-height: 1.2; + letter-spacing: normal; + text-transform: uppercase; + text-shadow: none; + word-wrap: break-word; } + +.reveal h1 { + font-size: 2.5em; } + +.reveal h2 { + font-size: 1.6em; } + +.reveal h3 { + font-size: 1.3em; } + +.reveal h4 { + font-size: 1em; } + +.reveal h1 { + text-shadow: none; } + +/********************************************* + * OTHER + *********************************************/ +.reveal p { + margin: 20px 0; + line-height: 1.3; } + +/* Ensure certain elements are never larger than the slide itself */ +.reveal img, .reveal video, .reveal iframe { + max-width: 95%; + max-height: 95%; } + +.reveal strong, .reveal b { + font-weight: bold; } + +.reveal em { + font-style: italic; } + +.reveal ol, .reveal dl, .reveal ul { + display: inline-block; + text-align: left; + margin: 0 0 0 1em; } + +.reveal ol { + list-style-type: decimal; } + +.reveal ul { + list-style-type: disc; } + +.reveal ul ul { + list-style-type: square; } + +.reveal ul ul ul { + list-style-type: circle; } + +.reveal ul ul, .reveal ul ol, .reveal ol ol, .reveal ol ul { + display: block; + margin-left: 40px; } + +.reveal dt { + font-weight: bold; } + +.reveal dd { + margin-left: 40px; } + +.reveal q, .reveal blockquote { + quotes: none; } + +.reveal blockquote { + display: block; + position: relative; + width: 70%; + margin: 20px auto; + padding: 5px; + font-style: italic; + 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 { + display: inline-block; } + +.reveal q { + font-style: italic; } + +.reveal pre { + display: block; + position: relative; + width: 90%; + margin: 20px auto; + text-align: left; + font-size: 0.55em; + font-family: monospace; + line-height: 1.2em; + word-wrap: break-word; + box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); } + +.reveal code { + font-family: monospace; } + +.reveal pre code { + display: block; + padding: 5px; + overflow: auto; + max-height: 400px; + word-wrap: normal; } + +.reveal table { + margin: auto; + border-collapse: collapse; + border-spacing: 0; } + +.reveal table th { + font-weight: bold; } + +.reveal table th, .reveal table td { + text-align: left; + padding: 0.2em 0.5em 0.2em 0.5em; + border-bottom: 1px solid; } + +.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 tr:last-child td { + border-bottom: none; } + +.reveal sup { + vertical-align: super; } + +.reveal sub { + vertical-align: sub; } + +.reveal small { + display: inline-block; + font-size: 0.6em; + line-height: 1.2em; + vertical-align: top; } + +.reveal small * { + vertical-align: top; } + +/********************************************* + * LINKS + *********************************************/ +.reveal a { + color: #42affa; + text-decoration: none; + -webkit-transition: color 0.15s ease; + -moz-transition: color 0.15s ease; + transition: color 0.15s ease; } + +.reveal a:hover { + color: #8dcffc; + text-shadow: none; + border: none; } + +.reveal .roll span:after { + color: #fff; + background: #068ee9; } + +/********************************************* + * IMAGES + *********************************************/ +.reveal section img { + margin: 15px 0px; + background: rgba(255, 255, 255, 0.12); + 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; } + +.reveal a:hover img { + background: rgba(255, 255, 255, 0.2); + border-color: #42affa; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); } + +/********************************************* + * NAVIGATION CONTROLS + *********************************************/ +.reveal .controls .navigate-left, .reveal .controls .navigate-left.enabled { + border-right-color: #42affa; } + +.reveal .controls .navigate-right, .reveal .controls .navigate-right.enabled { + border-left-color: #42affa; } + +.reveal .controls .navigate-up, .reveal .controls .navigate-up.enabled { + border-bottom-color: #42affa; } + +.reveal .controls .navigate-down, .reveal .controls .navigate-down.enabled { + border-top-color: #42affa; } + +.reveal .controls .navigate-left.enabled:hover { + border-right-color: #8dcffc; } + +.reveal .controls .navigate-right.enabled:hover { + border-left-color: #8dcffc; } + +.reveal .controls .navigate-up.enabled:hover { + border-bottom-color: #8dcffc; } + +.reveal .controls .navigate-down.enabled:hover { + border-top-color: #8dcffc; } + +/********************************************* + * PROGRESS BAR + *********************************************/ +.reveal .progress { + background: rgba(0, 0, 0, 0.2); } + +.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 + *********************************************/ +.reveal .slide-number { + color: #42affa; } diff --git a/css/theme/blood.css b/css/theme/blood.css index 0aefdd9..8dfdc1d 100644 --- a/css/theme/blood.css +++ b/css/theme/blood.css @@ -14,67 +14,194 @@ * GLOBAL STYLES *********************************************/ body { - background: #222222; - background: -moz-radial-gradient(center, circle cover, #626262 0%, #222222 100%); - background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #626262), color-stop(100%, #222222)); - background: -webkit-radial-gradient(center, circle cover, #626262 0%, #222222 100%); - background: -o-radial-gradient(center, circle cover, #626262 0%, #222222 100%); - background: -ms-radial-gradient(center, circle cover, #626262 0%, #222222 100%); - background: radial-gradient(center, circle cover, #626262 0%, #222222 100%); - background-color: #2b2b2b; } + background: #222; + background-color: #222; } .reveal { - font-family: Ubuntu, "sans-serif"; + font-family: Ubuntu, 'sans-serif'; font-size: 36px; font-weight: normal; - letter-spacing: -0.02em; - color: #eeeeee; } + color: #eee; } ::selection { - color: white; - background: #aa2233; + 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: #eeeeee; - font-family: Ubuntu, "sans-serif"; - line-height: 0.9em; - letter-spacing: 0.02em; + color: #eee; + font-family: Ubuntu, 'sans-serif'; + font-weight: normal; + line-height: 1.2; + letter-spacing: normal; text-transform: uppercase; - text-shadow: 2px 2px 2px #222222; } + text-shadow: 2px 2px 2px #222; + word-wrap: break-word; } + +.reveal h1 { + font-size: 3.77em; } + +.reveal h2 { + font-size: 2.11em; } + +.reveal h3 { + font-size: 1.55em; } + +.reveal h4 { + font-size: 1em; } .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 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 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); } + +/********************************************* + * OTHER + *********************************************/ +.reveal p { + margin: 20px 0; + line-height: 1.3; } + +/* Ensure certain elements are never larger than the slide itself */ +.reveal img, .reveal video, .reveal iframe { + max-width: 95%; + max-height: 95%; } + +.reveal strong, .reveal b { + font-weight: bold; } + +.reveal em { + font-style: italic; } + +.reveal ol, .reveal dl, .reveal ul { + display: inline-block; + text-align: left; + margin: 0 0 0 1em; } + +.reveal ol { + list-style-type: decimal; } + +.reveal ul { + list-style-type: disc; } + +.reveal ul ul { + list-style-type: square; } + +.reveal ul ul ul { + list-style-type: circle; } + +.reveal ul ul, .reveal ul ol, .reveal ol ol, .reveal ol ul { + display: block; + margin-left: 40px; } + +.reveal dt { + font-weight: bold; } + +.reveal dd { + margin-left: 40px; } + +.reveal q, .reveal blockquote { + quotes: none; } + +.reveal blockquote { + display: block; + position: relative; + width: 70%; + margin: 20px auto; + padding: 5px; + font-style: italic; + 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 { + display: inline-block; } + +.reveal q { + font-style: italic; } + +.reveal pre { + display: block; + position: relative; + width: 90%; + margin: 20px auto; + text-align: left; + font-size: 0.55em; + font-family: monospace; + line-height: 1.2em; + word-wrap: break-word; + box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); } + +.reveal code { + font-family: monospace; } + +.reveal pre code { + display: block; + padding: 5px; + overflow: auto; + max-height: 400px; + word-wrap: normal; } + +.reveal table { + margin: auto; + border-collapse: collapse; + border-spacing: 0; } + +.reveal table th { + font-weight: bold; } + +.reveal table th, .reveal table td { + text-align: left; + padding: 0.2em 0.5em 0.2em 0.5em; + border-bottom: 1px solid; } + +.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 tr:last-child td { + border-bottom: none; } + +.reveal sup { + vertical-align: super; } + +.reveal sub { + vertical-align: sub; } + +.reveal small { + display: inline-block; + font-size: 0.6em; + line-height: 1.2em; + vertical-align: top; } + +.reveal small * { + vertical-align: top; } /********************************************* * LINKS *********************************************/ -.reveal a:not(.image) { - color: #aa2233; +.reveal a { + color: #a23; text-decoration: none; - -webkit-transition: color .15s ease; - -moz-transition: color .15s ease; - -ms-transition: color .15s ease; - -o-transition: color .15s ease; - transition: color .15s ease; } - -.reveal a:not(.image):hover { - color: #dd5566; + -webkit-transition: color 0.15s ease; + -moz-transition: color 0.15s ease; + transition: color 0.15s ease; } + +.reveal a:hover { + color: #dd5567; text-shadow: none; border: none; } .reveal .roll span:after { color: #fff; - background: #6a1520; } + background: #6a1521; } /********************************************* * IMAGES @@ -82,49 +209,49 @@ body { .reveal section img { margin: 15px 0px; 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; } + 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; } .reveal a:hover img { background: rgba(255, 255, 255, 0.2); - border-color: #aa2233; + border-color: #a23; 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: #aa2233; } +.reveal .controls .navigate-left, .reveal .controls .navigate-left.enabled { + border-right-color: #a23; } -.reveal .controls div.navigate-right, -.reveal .controls div.navigate-right.enabled { - border-left-color: #aa2233; } +.reveal .controls .navigate-right, .reveal .controls .navigate-right.enabled { + border-left-color: #a23; } -.reveal .controls div.navigate-up, -.reveal .controls div.navigate-up.enabled { - border-bottom-color: #aa2233; } +.reveal .controls .navigate-up, .reveal .controls .navigate-up.enabled { + border-bottom-color: #a23; } -.reveal .controls div.navigate-down, -.reveal .controls div.navigate-down.enabled { - border-top-color: #aa2233; } +.reveal .controls .navigate-down, .reveal .controls .navigate-down.enabled { + border-top-color: #a23; } -.reveal .controls div.navigate-left.enabled:hover { - border-right-color: #dd5566; } +.reveal .controls .navigate-left.enabled:hover { + border-right-color: #dd5567; } -.reveal .controls div.navigate-right.enabled:hover { - border-left-color: #dd5566; } +.reveal .controls .navigate-right.enabled:hover { + border-left-color: #dd5567; } -.reveal .controls div.navigate-up.enabled:hover { - border-bottom-color: #dd5566; } +.reveal .controls .navigate-up.enabled:hover { + border-bottom-color: #dd5567; } -.reveal .controls div.navigate-down.enabled:hover { - border-top-color: #dd5566; } +.reveal .controls .navigate-down.enabled:hover { + border-top-color: #dd5567; } /********************************************* * PROGRESS BAR @@ -133,38 +260,23 @@ body { background: rgba(0, 0, 0, 0.2); } .reveal .progress span { - background: #aa2233; + 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); - -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); } /********************************************* * SLIDE NUMBER *********************************************/ .reveal .slide-number { - color: #aa2233; } + color: #a23; } .reveal p { font-weight: 300; - text-shadow: 1px 1px #222222; } - -.reveal h1, -.reveal h2, -.reveal h3, -.reveal h4, -.reveal h5, -.reveal h6 { - font-weight: 700; } - -.reveal a:not(.image), -.reveal a:not(.image):hover { - text-shadow: 2px 2px 2px #000; } + text-shadow: 1px 1px #222; } -.reveal small a:not(.image), -.reveal small a:not(.image):hover { - text-shadow: 1px 1px 1px #000; } +.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 { + font-weight: 700; } .reveal p code { background-color: #23241f; diff --git a/css/theme/default.css b/css/theme/default.css deleted file mode 100644 index a234861..0000000 --- a/css/theme/default.css +++ /dev/null @@ -1,148 +0,0 @@ -@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); -/** - * Default theme for reveal.js. - * - * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se - */ -@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; } - -/********************************************* - * GLOBAL STYLES - *********************************************/ -body { - background: #1c1e20; - background: -moz-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%); - background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #555a5f), color-stop(100%, #1c1e20)); - background: -webkit-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%); - background: -o-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%); - background: -ms-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%); - background: radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%); - background-color: #2b2b2b; } - -.reveal { - font-family: "Lato", sans-serif; - font-size: 36px; - font-weight: normal; - letter-spacing: -0.02em; - color: #eeeeee; } - -::selection { - color: white; - background: #ff5e99; - text-shadow: none; } - -/********************************************* - * HEADERS - *********************************************/ -.reveal h1, -.reveal h2, -.reveal h3, -.reveal h4, -.reveal h5, -.reveal h6 { - margin: 0 0 20px 0; - color: #eeeeee; - font-family: "League Gothic", Impact, sans-serif; - line-height: 0.9em; - letter-spacing: 0.02em; - text-transform: uppercase; - text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); } - -.reveal h1 { - text-shadow: 0 1px 0 #cccccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbbbbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaaaaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 20px 20px rgba(0, 0, 0, 0.15); } - -/********************************************* - * LINKS - *********************************************/ -.reveal a:not(.image) { - color: #13daec; - text-decoration: none; - -webkit-transition: color .15s ease; - -moz-transition: color .15s ease; - -ms-transition: color .15s ease; - -o-transition: color .15s ease; - transition: color .15s ease; } - -.reveal a:not(.image):hover { - color: #71e9f4; - text-shadow: none; - border: none; } - -.reveal .roll span:after { - color: #fff; - background: #0d99a5; } - -/********************************************* - * IMAGES - *********************************************/ -.reveal section img { - margin: 15px 0px; - background: rgba(255, 255, 255, 0.12); - border: 4px solid #eeeeee; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); - -webkit-transition: all .2s linear; - -moz-transition: all .2s linear; - -ms-transition: all .2s linear; - -o-transition: all .2s linear; - transition: all .2s linear; } - -.reveal a:hover img { - background: rgba(255, 255, 255, 0.2); - border-color: #13daec; - box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); } - -/********************************************* - * NAVIGATION CONTROLS - *********************************************/ -.reveal .controls div.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: #71e9f4; } - -.reveal .controls div.navigate-right.enabled:hover { - border-left-color: #71e9f4; } - -.reveal .controls div.navigate-up.enabled:hover { - border-bottom-color: #71e9f4; } - -.reveal .controls div.navigate-down.enabled:hover { - border-top-color: #71e9f4; } - -/********************************************* - * PROGRESS BAR - *********************************************/ -.reveal .progress { - background: rgba(0, 0, 0, 0.2); } - -.reveal .progress span { - background: #13daec; - -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); - -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); - -ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); - -o-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); - transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } - -/********************************************* - * SLIDE NUMBER - *********************************************/ -.reveal .slide-number { - color: #13daec; } diff --git a/css/theme/league.css b/css/theme/league.css new file mode 100644 index 0000000..f5652af --- /dev/null +++ b/css/theme/league.css @@ -0,0 +1,275 @@ +@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. + * + * This was the default theme pre-3.0.0. + * + * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se + */ +/********************************************* + * GLOBAL STYLES + *********************************************/ +body { + background: #1c1e20; + background: -moz-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%); + background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #555a5f), color-stop(100%, #1c1e20)); + background: -webkit-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%); + background: -o-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%); + background: -ms-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%); + background: radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%); + background-color: #2b2b2b; } + +.reveal { + font-family: 'Lato', sans-serif; + font-size: 36px; + font-weight: normal; + color: #eee; } + +::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 { + margin: 0 0 20px 0; + color: #eee; + font-family: 'League Gothic', Impact, sans-serif; + font-weight: normal; + line-height: 1.2; + letter-spacing: normal; + text-transform: uppercase; + text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); + word-wrap: break-word; } + +.reveal h1 { + font-size: 3.77em; } + +.reveal h2 { + font-size: 2.11em; } + +.reveal h3 { + font-size: 1.55em; } + +.reveal h4 { + font-size: 1em; } + +.reveal h1 { + text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 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); } + +/********************************************* + * OTHER + *********************************************/ +.reveal p { + margin: 20px 0; + line-height: 1.3; } + +/* Ensure certain elements are never larger than the slide itself */ +.reveal img, .reveal video, .reveal iframe { + max-width: 95%; + max-height: 95%; } + +.reveal strong, .reveal b { + font-weight: bold; } + +.reveal em { + font-style: italic; } + +.reveal ol, .reveal dl, .reveal ul { + display: inline-block; + text-align: left; + margin: 0 0 0 1em; } + +.reveal ol { + list-style-type: decimal; } + +.reveal ul { + list-style-type: disc; } + +.reveal ul ul { + list-style-type: square; } + +.reveal ul ul ul { + list-style-type: circle; } + +.reveal ul ul, .reveal ul ol, .reveal ol ol, .reveal ol ul { + display: block; + margin-left: 40px; } + +.reveal dt { + font-weight: bold; } + +.reveal dd { + margin-left: 40px; } + +.reveal q, .reveal blockquote { + quotes: none; } + +.reveal blockquote { + display: block; + position: relative; + width: 70%; + margin: 20px auto; + padding: 5px; + font-style: italic; + 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 { + display: inline-block; } + +.reveal q { + font-style: italic; } + +.reveal pre { + display: block; + position: relative; + width: 90%; + margin: 20px auto; + text-align: left; + font-size: 0.55em; + font-family: monospace; + line-height: 1.2em; + word-wrap: break-word; + box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); } + +.reveal code { + font-family: monospace; } + +.reveal pre code { + display: block; + padding: 5px; + overflow: auto; + max-height: 400px; + word-wrap: normal; } + +.reveal table { + margin: auto; + border-collapse: collapse; + border-spacing: 0; } + +.reveal table th { + font-weight: bold; } + +.reveal table th, .reveal table td { + text-align: left; + padding: 0.2em 0.5em 0.2em 0.5em; + border-bottom: 1px solid; } + +.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 tr:last-child td { + border-bottom: none; } + +.reveal sup { + vertical-align: super; } + +.reveal sub { + vertical-align: sub; } + +.reveal small { + display: inline-block; + font-size: 0.6em; + line-height: 1.2em; + vertical-align: top; } + +.reveal small * { + vertical-align: top; } + +/********************************************* + * LINKS + *********************************************/ +.reveal a { + color: #13DAEC; + text-decoration: none; + -webkit-transition: color 0.15s ease; + -moz-transition: color 0.15s ease; + transition: color 0.15s ease; } + +.reveal a:hover { + color: #71ebf4; + text-shadow: none; + border: none; } + +.reveal .roll span:after { + color: #fff; + background: #0d9ba5; } + +/********************************************* + * IMAGES + *********************************************/ +.reveal section img { + margin: 15px 0px; + background: rgba(255, 255, 255, 0.12); + 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; } + +.reveal a:hover img { + background: rgba(255, 255, 255, 0.2); + border-color: #13DAEC; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); } + +/********************************************* + * NAVIGATION CONTROLS + *********************************************/ +.reveal .controls .navigate-left, .reveal .controls .navigate-left.enabled { + border-right-color: #13DAEC; } + +.reveal .controls .navigate-right, .reveal .controls .navigate-right.enabled { + border-left-color: #13DAEC; } + +.reveal .controls .navigate-up, .reveal .controls .navigate-up.enabled { + border-bottom-color: #13DAEC; } + +.reveal .controls .navigate-down, .reveal .controls .navigate-down.enabled { + border-top-color: #13DAEC; } + +.reveal .controls .navigate-left.enabled:hover { + border-right-color: #71ebf4; } + +.reveal .controls .navigate-right.enabled:hover { + border-left-color: #71ebf4; } + +.reveal .controls .navigate-up.enabled:hover { + border-bottom-color: #71ebf4; } + +.reveal .controls .navigate-down.enabled:hover { + border-top-color: #71ebf4; } + +/********************************************* + * PROGRESS BAR + *********************************************/ +.reveal .progress { + background: rgba(0, 0, 0, 0.2); } + +.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 + *********************************************/ +.reveal .slide-number { + color: #13DAEC; } diff --git a/css/theme/moon.css b/css/theme/moon.css index 3c15b00..224c40a 100644 --- a/css/theme/moon.css +++ b/css/theme/moon.css @@ -1,15 +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 */ -@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 */ @@ -25,57 +19,190 @@ body { background-color: #002b36; } .reveal { - font-family: "Lato", sans-serif; + font-family: 'Lato', sans-serif; font-size: 36px; font-weight: normal; - letter-spacing: -0.02em; color: #93a1a1; } ::selection { - color: white; + 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; - line-height: 0.9em; - letter-spacing: 0.02em; + font-family: 'League Gothic', Impact, sans-serif; + font-weight: normal; + line-height: 1.2; + letter-spacing: normal; text-transform: uppercase; - text-shadow: none; } + text-shadow: none; + word-wrap: break-word; } + +.reveal h1 { + font-size: 3.77em; } + +.reveal h2 { + font-size: 2.11em; } + +.reveal h3 { + font-size: 1.55em; } + +.reveal h4 { + font-size: 1em; } .reveal h1 { - text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); } + text-shadow: none; } + +/********************************************* + * OTHER + *********************************************/ +.reveal p { + margin: 20px 0; + line-height: 1.3; } + +/* Ensure certain elements are never larger than the slide itself */ +.reveal img, .reveal video, .reveal iframe { + max-width: 95%; + max-height: 95%; } + +.reveal strong, .reveal b { + font-weight: bold; } + +.reveal em { + font-style: italic; } + +.reveal ol, .reveal dl, .reveal ul { + display: inline-block; + text-align: left; + margin: 0 0 0 1em; } + +.reveal ol { + list-style-type: decimal; } + +.reveal ul { + list-style-type: disc; } + +.reveal ul ul { + list-style-type: square; } + +.reveal ul ul ul { + list-style-type: circle; } + +.reveal ul ul, .reveal ul ol, .reveal ol ol, .reveal ol ul { + display: block; + margin-left: 40px; } + +.reveal dt { + font-weight: bold; } + +.reveal dd { + margin-left: 40px; } + +.reveal q, .reveal blockquote { + quotes: none; } + +.reveal blockquote { + display: block; + position: relative; + width: 70%; + margin: 20px auto; + padding: 5px; + font-style: italic; + 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 { + display: inline-block; } + +.reveal q { + font-style: italic; } + +.reveal pre { + display: block; + position: relative; + width: 90%; + margin: 20px auto; + text-align: left; + font-size: 0.55em; + font-family: monospace; + line-height: 1.2em; + word-wrap: break-word; + box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); } + +.reveal code { + font-family: monospace; } + +.reveal pre code { + display: block; + padding: 5px; + overflow: auto; + max-height: 400px; + word-wrap: normal; } + +.reveal table { + margin: auto; + border-collapse: collapse; + border-spacing: 0; } + +.reveal table th { + font-weight: bold; } + +.reveal table th, .reveal table td { + text-align: left; + padding: 0.2em 0.5em 0.2em 0.5em; + border-bottom: 1px solid; } + +.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 tr:last-child td { + border-bottom: none; } + +.reveal sup { + vertical-align: super; } + +.reveal sub { + vertical-align: sub; } + +.reveal small { + display: inline-block; + font-size: 0.6em; + line-height: 1.2em; + vertical-align: top; } + +.reveal small * { + vertical-align: top; } /********************************************* * LINKS *********************************************/ -.reveal a:not(.image) { +.reveal a { color: #268bd2; text-decoration: none; - -webkit-transition: color .15s ease; - -moz-transition: color .15s ease; - -ms-transition: color .15s ease; - -o-transition: color .15s ease; - transition: color .15s ease; } - -.reveal a:not(.image):hover { - color: #78b9e6; + -webkit-transition: color 0.15s ease; + -moz-transition: color 0.15s ease; + transition: color 0.15s ease; } + +.reveal a:hover { + color: #78bae6; text-shadow: none; border: none; } .reveal .roll span:after { color: #fff; - background: #1a6091; } + background: #1a6291; } /********************************************* * IMAGES @@ -84,12 +211,16 @@ body { 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 .2s linear; - -moz-transition: all .2s linear; - -ms-transition: all .2s linear; - -o-transition: all .2s linear; - transition: all .2s linear; } + 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; } .reveal a:hover img { background: rgba(255, 255, 255, 0.2); @@ -99,33 +230,29 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.navigate-left, -.reveal .controls div.navigate-left.enabled { +.reveal .controls .navigate-left, .reveal .controls .navigate-left.enabled { border-right-color: #268bd2; } -.reveal .controls div.navigate-right, -.reveal .controls div.navigate-right.enabled { +.reveal .controls .navigate-right, .reveal .controls .navigate-right.enabled { border-left-color: #268bd2; } -.reveal .controls div.navigate-up, -.reveal .controls div.navigate-up.enabled { +.reveal .controls .navigate-up, .reveal .controls .navigate-up.enabled { border-bottom-color: #268bd2; } -.reveal .controls div.navigate-down, -.reveal .controls div.navigate-down.enabled { +.reveal .controls .navigate-down, .reveal .controls .navigate-down.enabled { border-top-color: #268bd2; } -.reveal .controls div.navigate-left.enabled:hover { - border-right-color: #78b9e6; } +.reveal .controls .navigate-left.enabled:hover { + border-right-color: #78bae6; } -.reveal .controls div.navigate-right.enabled:hover { - border-left-color: #78b9e6; } +.reveal .controls .navigate-right.enabled:hover { + border-left-color: #78bae6; } -.reveal .controls div.navigate-up.enabled:hover { - border-bottom-color: #78b9e6; } +.reveal .controls .navigate-up.enabled:hover { + border-bottom-color: #78bae6; } -.reveal .controls div.navigate-down.enabled:hover { - border-top-color: #78b9e6; } +.reveal .controls .navigate-down.enabled:hover { + border-top-color: #78bae6; } /********************************************* * PROGRESS BAR @@ -137,8 +264,6 @@ body { 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 e8703a5..109d4c3 100644 --- a/css/theme/night.css +++ b/css/theme/night.css @@ -9,61 +9,194 @@ * GLOBAL STYLES *********************************************/ body { - background: #111111; - background-color: #111111; } + background: #111; + background-color: #111; } .reveal { - font-family: "Open Sans", sans-serif; + font-family: 'Open Sans', sans-serif; font-size: 30px; font-weight: normal; - letter-spacing: -0.02em; - color: #eeeeee; } + color: #eee; } ::selection { - color: white; + 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: #eeeeee; - font-family: "Montserrat", Impact, sans-serif; - line-height: 0.9em; + color: #eee; + font-family: 'Montserrat', Impact, sans-serif; + font-weight: normal; + line-height: 1.2; letter-spacing: -0.03em; text-transform: none; - text-shadow: none; } + text-shadow: none; + word-wrap: break-word; } .reveal h1 { - text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); } + font-size: 3.77em; } + +.reveal h2 { + font-size: 2.11em; } + +.reveal h3 { + font-size: 1.55em; } + +.reveal h4 { + font-size: 1em; } + +.reveal h1 { + text-shadow: none; } + +/********************************************* + * OTHER + *********************************************/ +.reveal p { + margin: 20px 0; + line-height: 1.3; } + +/* Ensure certain elements are never larger than the slide itself */ +.reveal img, .reveal video, .reveal iframe { + max-width: 95%; + max-height: 95%; } + +.reveal strong, .reveal b { + font-weight: bold; } + +.reveal em { + font-style: italic; } + +.reveal ol, .reveal dl, .reveal ul { + display: inline-block; + text-align: left; + margin: 0 0 0 1em; } + +.reveal ol { + list-style-type: decimal; } + +.reveal ul { + list-style-type: disc; } + +.reveal ul ul { + list-style-type: square; } + +.reveal ul ul ul { + list-style-type: circle; } + +.reveal ul ul, .reveal ul ol, .reveal ol ol, .reveal ol ul { + display: block; + margin-left: 40px; } + +.reveal dt { + font-weight: bold; } + +.reveal dd { + margin-left: 40px; } + +.reveal q, .reveal blockquote { + quotes: none; } + +.reveal blockquote { + display: block; + position: relative; + width: 70%; + margin: 20px auto; + padding: 5px; + font-style: italic; + 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 { + display: inline-block; } + +.reveal q { + font-style: italic; } + +.reveal pre { + display: block; + position: relative; + width: 90%; + margin: 20px auto; + text-align: left; + font-size: 0.55em; + font-family: monospace; + line-height: 1.2em; + word-wrap: break-word; + box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); } + +.reveal code { + font-family: monospace; } + +.reveal pre code { + display: block; + padding: 5px; + overflow: auto; + max-height: 400px; + word-wrap: normal; } + +.reveal table { + margin: auto; + border-collapse: collapse; + border-spacing: 0; } + +.reveal table th { + font-weight: bold; } + +.reveal table th, .reveal table td { + text-align: left; + padding: 0.2em 0.5em 0.2em 0.5em; + border-bottom: 1px solid; } + +.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 tr:last-child td { + border-bottom: none; } + +.reveal sup { + vertical-align: super; } + +.reveal sub { + vertical-align: sub; } + +.reveal small { + display: inline-block; + font-size: 0.6em; + line-height: 1.2em; + vertical-align: top; } + +.reveal small * { + vertical-align: top; } /********************************************* * LINKS *********************************************/ -.reveal a:not(.image) { +.reveal a { 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; + transition: color 0.15s ease; } -.reveal a:not(.image):hover { +.reveal a:hover { color: #f3d7ac; text-shadow: none; border: none; } .reveal .roll span:after { color: #fff; - background: #d08a1d; } + background: #d0881d; } /********************************************* * IMAGES @@ -71,13 +204,17 @@ body { .reveal section img { margin: 15px 0px; 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; } + 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; } .reveal a:hover img { background: rgba(255, 255, 255, 0.2); @@ -87,32 +224,28 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.navigate-left, -.reveal .controls div.navigate-left.enabled { +.reveal .controls .navigate-left, .reveal .controls .navigate-left.enabled { border-right-color: #e7ad52; } -.reveal .controls div.navigate-right, -.reveal .controls div.navigate-right.enabled { +.reveal .controls .navigate-right, .reveal .controls .navigate-right.enabled { border-left-color: #e7ad52; } -.reveal .controls div.navigate-up, -.reveal .controls div.navigate-up.enabled { +.reveal .controls .navigate-up, .reveal .controls .navigate-up.enabled { border-bottom-color: #e7ad52; } -.reveal .controls div.navigate-down, -.reveal .controls div.navigate-down.enabled { +.reveal .controls .navigate-down, .reveal .controls .navigate-down.enabled { border-top-color: #e7ad52; } -.reveal .controls div.navigate-left.enabled:hover { +.reveal .controls .navigate-left.enabled:hover { border-right-color: #f3d7ac; } -.reveal .controls div.navigate-right.enabled:hover { +.reveal .controls .navigate-right.enabled:hover { border-left-color: #f3d7ac; } -.reveal .controls div.navigate-up.enabled:hover { +.reveal .controls .navigate-up.enabled:hover { border-bottom-color: #f3d7ac; } -.reveal .controls div.navigate-down.enabled:hover { +.reveal .controls .navigate-down.enabled:hover { border-top-color: #f3d7ac; } /********************************************* @@ -125,8 +258,6 @@ body { 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); - -ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); - -o-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } /********************************************* diff --git a/css/theme/serif.css b/css/theme/serif.css index d5f0ad8..4e8674c 100644 --- a/css/theme/serif.css +++ b/css/theme/serif.css @@ -4,62 +4,195 @@ * * This theme is Copyright (C) 2012-2013 Owen Versteeg, http://owenversteeg.com - it is MIT licensed. */ -.reveal a:not(.image) { +.reveal a { line-height: 1.3em; } /********************************************* * GLOBAL STYLES *********************************************/ body { - background: #f0f1eb; - background-color: #f0f1eb; } + background: #F0F1EB; + background-color: #F0F1EB; } .reveal { - font-family: "Palatino Linotype", "Book Antiqua", Palatino, FreeSerif, serif; + font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif; font-size: 36px; font-weight: normal; - letter-spacing: -0.02em; - color: black; } + color: #000; } ::selection { - color: white; - background: #26351c; + 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; - line-height: 0.9em; - letter-spacing: 0.02em; + color: #383D3D; + font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif; + font-weight: normal; + line-height: 1.2; + letter-spacing: normal; text-transform: none; - text-shadow: none; } + text-shadow: none; + word-wrap: break-word; } + +.reveal h1 { + font-size: 3.77em; } + +.reveal h2 { + font-size: 2.11em; } + +.reveal h3 { + font-size: 1.55em; } + +.reveal h4 { + font-size: 1em; } .reveal h1 { - text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); } + text-shadow: none; } + +/********************************************* + * OTHER + *********************************************/ +.reveal p { + margin: 20px 0; + line-height: 1.3; } + +/* Ensure certain elements are never larger than the slide itself */ +.reveal img, .reveal video, .reveal iframe { + max-width: 95%; + max-height: 95%; } + +.reveal strong, .reveal b { + font-weight: bold; } + +.reveal em { + font-style: italic; } + +.reveal ol, .reveal dl, .reveal ul { + display: inline-block; + text-align: left; + margin: 0 0 0 1em; } + +.reveal ol { + list-style-type: decimal; } + +.reveal ul { + list-style-type: disc; } + +.reveal ul ul { + list-style-type: square; } + +.reveal ul ul ul { + list-style-type: circle; } + +.reveal ul ul, .reveal ul ol, .reveal ol ol, .reveal ol ul { + display: block; + margin-left: 40px; } + +.reveal dt { + font-weight: bold; } + +.reveal dd { + margin-left: 40px; } + +.reveal q, .reveal blockquote { + quotes: none; } + +.reveal blockquote { + display: block; + position: relative; + width: 70%; + margin: 20px auto; + padding: 5px; + font-style: italic; + 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 { + display: inline-block; } + +.reveal q { + font-style: italic; } + +.reveal pre { + display: block; + position: relative; + width: 90%; + margin: 20px auto; + text-align: left; + font-size: 0.55em; + font-family: monospace; + line-height: 1.2em; + word-wrap: break-word; + box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); } + +.reveal code { + font-family: monospace; } + +.reveal pre code { + display: block; + padding: 5px; + overflow: auto; + max-height: 400px; + word-wrap: normal; } + +.reveal table { + margin: auto; + border-collapse: collapse; + border-spacing: 0; } + +.reveal table th { + font-weight: bold; } + +.reveal table th, .reveal table td { + text-align: left; + padding: 0.2em 0.5em 0.2em 0.5em; + border-bottom: 1px solid; } + +.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 tr:last-child td { + border-bottom: none; } + +.reveal sup { + vertical-align: super; } + +.reveal sub { + vertical-align: sub; } + +.reveal small { + display: inline-block; + font-size: 0.6em; + line-height: 1.2em; + vertical-align: top; } + +.reveal small * { + vertical-align: top; } /********************************************* * LINKS *********************************************/ -.reveal a:not(.image) { - color: #51483d; +.reveal a { + 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; } - -.reveal a:not(.image):hover { - color: #8b7c69; + -webkit-transition: color 0.15s ease; + -moz-transition: color 0.15s ease; + transition: color 0.15s ease; } + +.reveal a:hover { + color: #8b7b69; text-shadow: none; border: none; } @@ -73,49 +206,49 @@ body { .reveal section img { margin: 15px 0px; 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; } + 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; } .reveal a:hover img { background: rgba(255, 255, 255, 0.2); - border-color: #51483d; + border-color: #51483D; 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; } +.reveal .controls .navigate-left, .reveal .controls .navigate-left.enabled { + border-right-color: #51483D; } -.reveal .controls div.navigate-right, -.reveal .controls div.navigate-right.enabled { - border-left-color: #51483d; } +.reveal .controls .navigate-right, .reveal .controls .navigate-right.enabled { + border-left-color: #51483D; } -.reveal .controls div.navigate-up, -.reveal .controls div.navigate-up.enabled { - border-bottom-color: #51483d; } +.reveal .controls .navigate-up, .reveal .controls .navigate-up.enabled { + border-bottom-color: #51483D; } -.reveal .controls div.navigate-down, -.reveal .controls div.navigate-down.enabled { - border-top-color: #51483d; } +.reveal .controls .navigate-down, .reveal .controls .navigate-down.enabled { + border-top-color: #51483D; } -.reveal .controls div.navigate-left.enabled:hover { - border-right-color: #8b7c69; } +.reveal .controls .navigate-left.enabled:hover { + border-right-color: #8b7b69; } -.reveal .controls div.navigate-right.enabled:hover { - border-left-color: #8b7c69; } +.reveal .controls .navigate-right.enabled:hover { + border-left-color: #8b7b69; } -.reveal .controls div.navigate-up.enabled:hover { - border-bottom-color: #8b7c69; } +.reveal .controls .navigate-up.enabled:hover { + border-bottom-color: #8b7b69; } -.reveal .controls div.navigate-down.enabled:hover { - border-top-color: #8b7c69; } +.reveal .controls .navigate-down.enabled:hover { + border-top-color: #8b7b69; } /********************************************* * PROGRESS BAR @@ -124,15 +257,13 @@ body { background: rgba(0, 0, 0, 0.2); } .reveal .progress span { - background: #51483d; + background: #51483D; -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); - -ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); - -o-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } /********************************************* * SLIDE NUMBER *********************************************/ .reveal .slide-number { - color: #51483d; } + color: #51483D; } diff --git a/css/theme/simple.css b/css/theme/simple.css index 504606c..8122250 100644 --- a/css/theme/simple.css +++ b/css/theme/simple.css @@ -11,54 +11,187 @@ * GLOBAL STYLES *********************************************/ body { - background: white; - background-color: white; } + background: #fff; + background-color: #fff; } .reveal { - font-family: "Lato", sans-serif; + font-family: 'Lato', sans-serif; font-size: 36px; font-weight: normal; - letter-spacing: -0.02em; - color: black; } + color: #000; } ::selection { - color: white; + 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: black; - font-family: "News Cycle", Impact, sans-serif; - line-height: 0.9em; - letter-spacing: 0.02em; + color: #000; + font-family: 'News Cycle', Impact, sans-serif; + font-weight: normal; + line-height: 1.2; + letter-spacing: normal; text-transform: none; - text-shadow: none; } + text-shadow: none; + word-wrap: break-word; } .reveal h1 { - text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); } + font-size: 3.77em; } + +.reveal h2 { + font-size: 2.11em; } + +.reveal h3 { + font-size: 1.55em; } + +.reveal h4 { + font-size: 1em; } + +.reveal h1 { + text-shadow: none; } + +/********************************************* + * OTHER + *********************************************/ +.reveal p { + margin: 20px 0; + line-height: 1.3; } + +/* Ensure certain elements are never larger than the slide itself */ +.reveal img, .reveal video, .reveal iframe { + max-width: 95%; + max-height: 95%; } + +.reveal strong, .reveal b { + font-weight: bold; } + +.reveal em { + font-style: italic; } + +.reveal ol, .reveal dl, .reveal ul { + display: inline-block; + text-align: left; + margin: 0 0 0 1em; } + +.reveal ol { + list-style-type: decimal; } + +.reveal ul { + list-style-type: disc; } + +.reveal ul ul { + list-style-type: square; } + +.reveal ul ul ul { + list-style-type: circle; } + +.reveal ul ul, .reveal ul ol, .reveal ol ol, .reveal ol ul { + display: block; + margin-left: 40px; } + +.reveal dt { + font-weight: bold; } + +.reveal dd { + margin-left: 40px; } + +.reveal q, .reveal blockquote { + quotes: none; } + +.reveal blockquote { + display: block; + position: relative; + width: 70%; + margin: 20px auto; + padding: 5px; + font-style: italic; + 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 { + display: inline-block; } + +.reveal q { + font-style: italic; } + +.reveal pre { + display: block; + position: relative; + width: 90%; + margin: 20px auto; + text-align: left; + font-size: 0.55em; + font-family: monospace; + line-height: 1.2em; + word-wrap: break-word; + box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); } + +.reveal code { + font-family: monospace; } + +.reveal pre code { + display: block; + padding: 5px; + overflow: auto; + max-height: 400px; + word-wrap: normal; } + +.reveal table { + margin: auto; + border-collapse: collapse; + border-spacing: 0; } + +.reveal table th { + font-weight: bold; } + +.reveal table th, .reveal table td { + text-align: left; + padding: 0.2em 0.5em 0.2em 0.5em; + border-bottom: 1px solid; } + +.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 tr:last-child td { + border-bottom: none; } + +.reveal sup { + vertical-align: super; } + +.reveal sub { + vertical-align: sub; } + +.reveal small { + display: inline-block; + font-size: 0.6em; + line-height: 1.2em; + vertical-align: top; } + +.reveal small * { + vertical-align: top; } /********************************************* * LINKS *********************************************/ -.reveal a:not(.image) { - color: darkblue; +.reveal a { + color: #00008B; 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; + transition: color 0.15s ease; } -.reveal a:not(.image):hover { +.reveal a:hover { color: #0000f1; text-shadow: none; border: none; } @@ -73,48 +206,48 @@ body { .reveal section img { margin: 15px 0px; 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; } + 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; } .reveal a:hover img { background: rgba(255, 255, 255, 0.2); - border-color: darkblue; + border-color: #00008B; 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; } +.reveal .controls .navigate-left, .reveal .controls .navigate-left.enabled { + border-right-color: #00008B; } -.reveal .controls div.navigate-right, -.reveal .controls div.navigate-right.enabled { - border-left-color: darkblue; } +.reveal .controls .navigate-right, .reveal .controls .navigate-right.enabled { + border-left-color: #00008B; } -.reveal .controls div.navigate-up, -.reveal .controls div.navigate-up.enabled { - border-bottom-color: darkblue; } +.reveal .controls .navigate-up, .reveal .controls .navigate-up.enabled { + border-bottom-color: #00008B; } -.reveal .controls div.navigate-down, -.reveal .controls div.navigate-down.enabled { - border-top-color: darkblue; } +.reveal .controls .navigate-down, .reveal .controls .navigate-down.enabled { + border-top-color: #00008B; } -.reveal .controls div.navigate-left.enabled:hover { +.reveal .controls .navigate-left.enabled:hover { border-right-color: #0000f1; } -.reveal .controls div.navigate-right.enabled:hover { +.reveal .controls .navigate-right.enabled:hover { border-left-color: #0000f1; } -.reveal .controls div.navigate-up.enabled:hover { +.reveal .controls .navigate-up.enabled:hover { border-bottom-color: #0000f1; } -.reveal .controls div.navigate-down.enabled:hover { +.reveal .controls .navigate-down.enabled:hover { border-top-color: #0000f1; } /********************************************* @@ -124,15 +257,13 @@ body { background: rgba(0, 0, 0, 0.2); } .reveal .progress span { - background: darkblue; + 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); - -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); } /********************************************* * SLIDE NUMBER *********************************************/ .reveal .slide-number { - color: darkblue; } + color: #00008B; } diff --git a/css/theme/sky.css b/css/theme/sky.css index 1a44760..93b4e85 100644 --- a/css/theme/sky.css +++ b/css/theme/sky.css @@ -5,7 +5,7 @@ * * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se */ -.reveal a:not(.image) { +.reveal a { line-height: 1.3em; } /********************************************* @@ -22,57 +22,190 @@ body { background-color: #f7fbfc; } .reveal { - font-family: "Open Sans", sans-serif; + font-family: 'Open Sans', sans-serif; font-size: 36px; font-weight: normal; - letter-spacing: -0.02em; - color: #333333; } + color: #333; } ::selection { - color: white; + 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: #333333; - font-family: "Quicksand", sans-serif; - line-height: 0.9em; + color: #333; + font-family: 'Quicksand', sans-serif; + font-weight: normal; + line-height: 1.2; letter-spacing: -0.08em; text-transform: uppercase; - text-shadow: none; } + text-shadow: none; + word-wrap: break-word; } + +.reveal h1 { + font-size: 3.77em; } + +.reveal h2 { + font-size: 2.11em; } + +.reveal h3 { + font-size: 1.55em; } + +.reveal h4 { + font-size: 1em; } .reveal h1 { - text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); } + text-shadow: none; } + +/********************************************* + * OTHER + *********************************************/ +.reveal p { + margin: 20px 0; + line-height: 1.3; } + +/* Ensure certain elements are never larger than the slide itself */ +.reveal img, .reveal video, .reveal iframe { + max-width: 95%; + max-height: 95%; } + +.reveal strong, .reveal b { + font-weight: bold; } + +.reveal em { + font-style: italic; } + +.reveal ol, .reveal dl, .reveal ul { + display: inline-block; + text-align: left; + margin: 0 0 0 1em; } + +.reveal ol { + list-style-type: decimal; } + +.reveal ul { + list-style-type: disc; } + +.reveal ul ul { + list-style-type: square; } + +.reveal ul ul ul { + list-style-type: circle; } + +.reveal ul ul, .reveal ul ol, .reveal ol ol, .reveal ol ul { + display: block; + margin-left: 40px; } + +.reveal dt { + font-weight: bold; } + +.reveal dd { + margin-left: 40px; } + +.reveal q, .reveal blockquote { + quotes: none; } + +.reveal blockquote { + display: block; + position: relative; + width: 70%; + margin: 20px auto; + padding: 5px; + font-style: italic; + 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 { + display: inline-block; } + +.reveal q { + font-style: italic; } + +.reveal pre { + display: block; + position: relative; + width: 90%; + margin: 20px auto; + text-align: left; + font-size: 0.55em; + font-family: monospace; + line-height: 1.2em; + word-wrap: break-word; + box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); } + +.reveal code { + font-family: monospace; } + +.reveal pre code { + display: block; + padding: 5px; + overflow: auto; + max-height: 400px; + word-wrap: normal; } + +.reveal table { + margin: auto; + border-collapse: collapse; + border-spacing: 0; } + +.reveal table th { + font-weight: bold; } + +.reveal table th, .reveal table td { + text-align: left; + padding: 0.2em 0.5em 0.2em 0.5em; + border-bottom: 1px solid; } + +.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 tr:last-child td { + border-bottom: none; } + +.reveal sup { + vertical-align: super; } + +.reveal sub { + vertical-align: sub; } + +.reveal small { + display: inline-block; + font-size: 0.6em; + line-height: 1.2em; + vertical-align: top; } + +.reveal small * { + vertical-align: top; } /********************************************* * LINKS *********************************************/ -.reveal a:not(.image) { +.reveal a { 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; } - -.reveal a:not(.image):hover { - color: #74a7cb; + -webkit-transition: color 0.15s ease; + -moz-transition: color 0.15s ease; + transition: color 0.15s ease; } + +.reveal a:hover { + color: #74a8cb; text-shadow: none; border: none; } .reveal .roll span:after { color: #fff; - background: #264c66; } + background: #264d66; } /********************************************* * IMAGES @@ -80,13 +213,17 @@ body { .reveal section img { margin: 15px 0px; 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; } + 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; } .reveal a:hover img { background: rgba(255, 255, 255, 0.2); @@ -96,33 +233,29 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.navigate-left, -.reveal .controls div.navigate-left.enabled { +.reveal .controls .navigate-left, .reveal .controls .navigate-left.enabled { border-right-color: #3b759e; } -.reveal .controls div.navigate-right, -.reveal .controls div.navigate-right.enabled { +.reveal .controls .navigate-right, .reveal .controls .navigate-right.enabled { border-left-color: #3b759e; } -.reveal .controls div.navigate-up, -.reveal .controls div.navigate-up.enabled { +.reveal .controls .navigate-up, .reveal .controls .navigate-up.enabled { border-bottom-color: #3b759e; } -.reveal .controls div.navigate-down, -.reveal .controls div.navigate-down.enabled { +.reveal .controls .navigate-down, .reveal .controls .navigate-down.enabled { border-top-color: #3b759e; } -.reveal .controls div.navigate-left.enabled:hover { - border-right-color: #74a7cb; } +.reveal .controls .navigate-left.enabled:hover { + border-right-color: #74a8cb; } -.reveal .controls div.navigate-right.enabled:hover { - border-left-color: #74a7cb; } +.reveal .controls .navigate-right.enabled:hover { + border-left-color: #74a8cb; } -.reveal .controls div.navigate-up.enabled:hover { - border-bottom-color: #74a7cb; } +.reveal .controls .navigate-up.enabled:hover { + border-bottom-color: #74a8cb; } -.reveal .controls div.navigate-down.enabled:hover { - border-top-color: #74a7cb; } +.reveal .controls .navigate-down.enabled:hover { + border-top-color: #74a8cb; } /********************************************* * PROGRESS BAR @@ -134,8 +267,6 @@ body { background: #3b759e; -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); - -ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); - -o-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } /********************************************* diff --git a/css/theme/solarized.css b/css/theme/solarized.css index c8bff7c..317027e 100644 --- a/css/theme/solarized.css +++ b/css/theme/solarized.css @@ -1,15 +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 */ -@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 */ @@ -25,57 +19,190 @@ body { background-color: #fdf6e3; } .reveal { - font-family: "Lato", sans-serif; + font-family: 'Lato', sans-serif; font-size: 36px; font-weight: normal; - letter-spacing: -0.02em; color: #657b83; } ::selection { - color: white; + 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; - line-height: 0.9em; - letter-spacing: 0.02em; + font-family: 'League Gothic', Impact, sans-serif; + font-weight: normal; + line-height: 1.2; + letter-spacing: normal; text-transform: uppercase; - text-shadow: none; } + text-shadow: none; + word-wrap: break-word; } + +.reveal h1 { + font-size: 3.77em; } + +.reveal h2 { + font-size: 2.11em; } + +.reveal h3 { + font-size: 1.55em; } + +.reveal h4 { + font-size: 1em; } .reveal h1 { - text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); } + text-shadow: none; } + +/********************************************* + * OTHER + *********************************************/ +.reveal p { + margin: 20px 0; + line-height: 1.3; } + +/* Ensure certain elements are never larger than the slide itself */ +.reveal img, .reveal video, .reveal iframe { + max-width: 95%; + max-height: 95%; } + +.reveal strong, .reveal b { + font-weight: bold; } + +.reveal em { + font-style: italic; } + +.reveal ol, .reveal dl, .reveal ul { + display: inline-block; + text-align: left; + margin: 0 0 0 1em; } + +.reveal ol { + list-style-type: decimal; } + +.reveal ul { + list-style-type: disc; } + +.reveal ul ul { + list-style-type: square; } + +.reveal ul ul ul { + list-style-type: circle; } + +.reveal ul ul, .reveal ul ol, .reveal ol ol, .reveal ol ul { + display: block; + margin-left: 40px; } + +.reveal dt { + font-weight: bold; } + +.reveal dd { + margin-left: 40px; } + +.reveal q, .reveal blockquote { + quotes: none; } + +.reveal blockquote { + display: block; + position: relative; + width: 70%; + margin: 20px auto; + padding: 5px; + font-style: italic; + 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 { + display: inline-block; } + +.reveal q { + font-style: italic; } + +.reveal pre { + display: block; + position: relative; + width: 90%; + margin: 20px auto; + text-align: left; + font-size: 0.55em; + font-family: monospace; + line-height: 1.2em; + word-wrap: break-word; + box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); } + +.reveal code { + font-family: monospace; } + +.reveal pre code { + display: block; + padding: 5px; + overflow: auto; + max-height: 400px; + word-wrap: normal; } + +.reveal table { + margin: auto; + border-collapse: collapse; + border-spacing: 0; } + +.reveal table th { + font-weight: bold; } + +.reveal table th, .reveal table td { + text-align: left; + padding: 0.2em 0.5em 0.2em 0.5em; + border-bottom: 1px solid; } + +.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 tr:last-child td { + border-bottom: none; } + +.reveal sup { + vertical-align: super; } + +.reveal sub { + vertical-align: sub; } + +.reveal small { + display: inline-block; + font-size: 0.6em; + line-height: 1.2em; + vertical-align: top; } + +.reveal small * { + vertical-align: top; } /********************************************* * LINKS *********************************************/ -.reveal a:not(.image) { +.reveal a { color: #268bd2; text-decoration: none; - -webkit-transition: color .15s ease; - -moz-transition: color .15s ease; - -ms-transition: color .15s ease; - -o-transition: color .15s ease; - transition: color .15s ease; } - -.reveal a:not(.image):hover { - color: #78b9e6; + -webkit-transition: color 0.15s ease; + -moz-transition: color 0.15s ease; + transition: color 0.15s ease; } + +.reveal a:hover { + color: #78bae6; text-shadow: none; border: none; } .reveal .roll span:after { color: #fff; - background: #1a6091; } + background: #1a6291; } /********************************************* * IMAGES @@ -84,12 +211,16 @@ body { 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 .2s linear; - -moz-transition: all .2s linear; - -ms-transition: all .2s linear; - -o-transition: all .2s linear; - transition: all .2s linear; } + 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; } .reveal a:hover img { background: rgba(255, 255, 255, 0.2); @@ -99,33 +230,29 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.navigate-left, -.reveal .controls div.navigate-left.enabled { +.reveal .controls .navigate-left, .reveal .controls .navigate-left.enabled { border-right-color: #268bd2; } -.reveal .controls div.navigate-right, -.reveal .controls div.navigate-right.enabled { +.reveal .controls .navigate-right, .reveal .controls .navigate-right.enabled { border-left-color: #268bd2; } -.reveal .controls div.navigate-up, -.reveal .controls div.navigate-up.enabled { +.reveal .controls .navigate-up, .reveal .controls .navigate-up.enabled { border-bottom-color: #268bd2; } -.reveal .controls div.navigate-down, -.reveal .controls div.navigate-down.enabled { +.reveal .controls .navigate-down, .reveal .controls .navigate-down.enabled { border-top-color: #268bd2; } -.reveal .controls div.navigate-left.enabled:hover { - border-right-color: #78b9e6; } +.reveal .controls .navigate-left.enabled:hover { + border-right-color: #78bae6; } -.reveal .controls div.navigate-right.enabled:hover { - border-left-color: #78b9e6; } +.reveal .controls .navigate-right.enabled:hover { + border-left-color: #78bae6; } -.reveal .controls div.navigate-up.enabled:hover { - border-bottom-color: #78b9e6; } +.reveal .controls .navigate-up.enabled:hover { + border-bottom-color: #78bae6; } -.reveal .controls div.navigate-down.enabled:hover { - border-top-color: #78b9e6; } +.reveal .controls .navigate-down.enabled:hover { + border-top-color: #78bae6; } /********************************************* * PROGRESS BAR @@ -137,8 +264,6 @@ body { 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/beige.scss b/css/theme/source/beige.scss index c31956c..5564f53 100644 --- a/css/theme/source/beige.scss +++ b/css/theme/source/beige.scss @@ -13,18 +13,7 @@ // 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(../../lib/font/league-gothic/league-gothic.css); @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); diff --git a/css/theme/source/black.scss b/css/theme/source/black.scss new file mode 100644 index 0000000..73dfecb --- /dev/null +++ b/css/theme/source/black.scss @@ -0,0 +1,49 @@ +/** + * Black theme for reveal.js. This is the opposite of the 'white' theme. + * + * Copyright (C) 2015 Hakim El Hattab, http://hakim.se + */ + + +// Default mixins and settings ----------------- +@import "../template/mixins"; +@import "../template/settings"; +// --------------------------------------------- + + +// Include theme-specific fonts +@import url(../../lib/font/source-sans-pro/source-sans-pro.css); + + +// Override theme settings (see ../template/settings.scss) +$backgroundColor: #222; + +$mainColor: #fff; +$headingColor: #fff; + +$mainFontSize: 38px; +$mainFont: 'Source Sans Pro', Helvetica, sans-serif; +$headingFont: 'Source Sans Pro', Helvetica, sans-serif; +$headingTextShadow: none; +$headingLetterSpacing: normal; +$headingTextTransform: uppercase; +$headingFontWeight: 600; +$linkColor: #42affa; +$linkColorHover: lighten( $linkColor, 15% ); +$selectionBackgroundColor: lighten( $linkColor, 25% ); + +$heading1Size: 2.5em; +$heading2Size: 1.6em; +$heading3Size: 1.3em; +$heading4Size: 1.0em; + +section.has-light-background { + &, h1, h2, h3, h4, h5, h6 { + color: #222; + } +} + + +// Theme template ------------------------------ +@import "../template/theme"; +// ---------------------------------------------
\ No newline at end of file diff --git a/css/theme/source/blood.scss b/css/theme/source/blood.scss index a9925a1..d22b53d 100644 --- a/css/theme/source/blood.scss +++ b/css/theme/source/blood.scss @@ -24,6 +24,8 @@ $blood: #a23; $coal: #222; $codeBackground: #23241f; +$backgroundColor: $coal; + // Main text $mainFont: Ubuntu, 'sans-serif'; $mainFontSize: 36px; @@ -45,10 +47,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 +59,7 @@ $selectionColor: #fff; text-shadow: 1px 1px $coal; } -.reveal h1, +.reveal h1, .reveal h2, .reveal h3, .reveal h4, @@ -70,16 +68,6 @@ $selectionColor: #fff; font-weight: 700; } -.reveal a:not(.image), -.reveal a:not(.image):hover { - text-shadow: 2px 2px 2px #000; -} - -.reveal small a:not(.image), -.reveal small a:not(.image):hover { - text-shadow: 1px 1px 1px #000; -} - .reveal p code { background-color: $codeBackground; display: inline-block; diff --git a/css/theme/source/default.scss b/css/theme/source/league.scss index 1117b65..46ea04a 100644 --- a/css/theme/source/default.scss +++ b/css/theme/source/league.scss @@ -1,5 +1,7 @@ /** - * Default theme for reveal.js. + * League theme for reveal.js. + * + * This was the default theme pre-3.0.0. * * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se */ @@ -13,21 +15,11 @@ // 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(../../lib/font/league-gothic/league-gothic.css); @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); // Override theme settings (see ../template/settings.scss) +$headingTextShadow: 0px 0px 6px rgba(0,0,0,0.2); $heading1TextShadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 20px 20px rgba(0,0,0,.15); // Background generator diff --git a/css/theme/source/moon.scss b/css/theme/source/moon.scss index a722adc..e47e5b5 100644 --- a/css/theme/source/moon.scss +++ b/css/theme/source/moon.scss @@ -12,18 +12,7 @@ // 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(../../lib/font/league-gothic/league-gothic.css); @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); /** diff --git a/css/theme/source/serif.scss b/css/theme/source/serif.scss index 404b8bf..ec3fcb3 100644 --- a/css/theme/source/serif.scss +++ b/css/theme/source/serif.scss @@ -25,7 +25,7 @@ $linkColor: #51483D; $linkColorHover: lighten( $linkColor, 20% ); $selectionBackgroundColor: #26351C; -.reveal a:not(.image) { +.reveal a { line-height: 1.3em; } diff --git a/css/theme/source/sky.scss b/css/theme/source/sky.scss index 72a3a90..3fee67c 100644 --- a/css/theme/source/sky.scss +++ b/css/theme/source/sky.scss @@ -30,7 +30,7 @@ $linkColorHover: lighten( $linkColor, 20% ); $selectionBackgroundColor: #134674; // Fix links so they are not cut off -.reveal a:not(.image) { +.reveal a { line-height: 1.3em; } diff --git a/css/theme/source/solarized.scss b/css/theme/source/solarized.scss index 8217b8f..912be56 100644 --- a/css/theme/source/solarized.scss +++ b/css/theme/source/solarized.scss @@ -12,18 +12,7 @@ // 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(../../lib/font/league-gothic/league-gothic.css); @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); diff --git a/css/theme/source/white.scss b/css/theme/source/white.scss new file mode 100644 index 0000000..4c5b647 --- /dev/null +++ b/css/theme/source/white.scss @@ -0,0 +1,49 @@ +/** + * White theme for reveal.js. This is the opposite of the 'black' theme. + * + * Copyright (C) 2015 Hakim El Hattab, http://hakim.se + */ + + +// Default mixins and settings ----------------- +@import "../template/mixins"; +@import "../template/settings"; +// --------------------------------------------- + + +// Include theme-specific fonts +@import url(../../lib/font/source-sans-pro/source-sans-pro.css); + + +// Override theme settings (see ../template/settings.scss) +$backgroundColor: #fff; + +$mainColor: #222; +$headingColor: #222; + +$mainFontSize: 38px; +$mainFont: 'Source Sans Pro', Helvetica, sans-serif; +$headingFont: 'Source Sans Pro', Helvetica, sans-serif; +$headingTextShadow: none; +$headingLetterSpacing: normal; +$headingTextTransform: uppercase; +$headingFontWeight: 600; +$linkColor: #2a76dd; +$linkColorHover: lighten( $linkColor, 15% ); +$selectionBackgroundColor: lighten( $linkColor, 25% ); + +$heading1Size: 2.5em; +$heading2Size: 1.6em; +$heading3Size: 1.3em; +$heading4Size: 1.0em; + +section.has-dark-background { + &, h1, h2, h3, h4, h5, h6 { + color: #fff; + } +} + + +// Theme template ------------------------------ +@import "../template/theme"; +// ---------------------------------------------
\ No newline at end of file diff --git a/css/theme/template/settings.scss b/css/theme/template/settings.scss index 739a609..ffaac23 100644 --- a/css/theme/template/settings.scss +++ b/css/theme/template/settings.scss @@ -9,16 +9,25 @@ $mainFont: 'Lato', sans-serif; $mainFontSize: 36px; $mainColor: #eee; +// Vertical spacing between blocks of text +$blockMargin: 20px; + // Headings -$headingMargin: 0 0 20px 0; +$headingMargin: 0 0 $blockMargin 0; $headingFont: 'League Gothic', Impact, sans-serif; $headingColor: #eee; -$headingLineHeight: 0.9em; -$headingLetterSpacing: 0.02em; +$headingLineHeight: 1.2; +$headingLetterSpacing: normal; $headingTextTransform: uppercase; -$headingTextShadow: 0px 0px 6px rgba(0,0,0,0.2); +$headingTextShadow: none; +$headingFontWeight: normal; $heading1TextShadow: $headingTextShadow; +$heading1Size: 3.77em; +$heading2Size: 2.11em; +$heading3Size: 1.55em; +$heading4Size: 1.00em; + // Links and actions $linkColor: #13DAEC; $linkColorHover: lighten( $linkColor, 20% ); diff --git a/css/theme/template/theme.scss b/css/theme/template/theme.scss index 1562b54..91eeca7 100644 --- a/css/theme/template/theme.scss +++ b/css/theme/template/theme.scss @@ -13,7 +13,6 @@ body { font-family: $mainFont; font-size: $mainFontSize; font-weight: normal; - letter-spacing: -0.02em; color: $mainColor; } @@ -23,6 +22,12 @@ body { text-shadow: none; } +.reveal .slides>section, +.reveal .slides>section>section { + line-height: 1.3; + font-weight: inherit; +} + /********************************************* * HEADERS *********************************************/ @@ -37,33 +42,207 @@ body { color: $headingColor; font-family: $headingFont; + font-weight: $headingFontWeight; line-height: $headingLineHeight; letter-spacing: $headingLetterSpacing; text-transform: $headingTextTransform; text-shadow: $headingTextShadow; + + word-wrap: break-word; } +.reveal h1 {font-size: $heading1Size; } +.reveal h2 {font-size: $heading2Size; } +.reveal h3 {font-size: $heading3Size; } +.reveal h4 {font-size: $heading4Size; } + .reveal h1 { text-shadow: $heading1TextShadow; } /********************************************* + * OTHER + *********************************************/ + +.reveal p { + margin: $blockMargin 0; + line-height: 1.3; +} + +/* Ensure certain elements are never larger than the slide itself */ +.reveal img, +.reveal video, +.reveal iframe { + max-width: 95%; + max-height: 95%; +} +.reveal strong, +.reveal b { + font-weight: bold; +} + +.reveal em { + font-style: italic; +} + +.reveal ol, +.reveal dl, +.reveal ul { + display: inline-block; + + text-align: left; + margin: 0 0 0 1em; +} + +.reveal ol { + list-style-type: decimal; +} + +.reveal ul { + list-style-type: disc; +} + +.reveal ul ul { + list-style-type: square; +} + +.reveal ul ul ul { + list-style-type: circle; +} + +.reveal ul ul, +.reveal ul ol, +.reveal ol ol, +.reveal ol ul { + display: block; + margin-left: 40px; +} + +.reveal dt { + font-weight: bold; +} + +.reveal dd { + margin-left: 40px; +} + +.reveal q, +.reveal blockquote { + quotes: none; +} + +.reveal blockquote { + display: block; + position: relative; + width: 70%; + margin: $blockMargin auto; + padding: 5px; + + font-style: italic; + 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 { + display: inline-block; + } + +.reveal q { + font-style: italic; +} + +.reveal pre { + display: block; + position: relative; + width: 90%; + margin: $blockMargin auto; + + text-align: left; + font-size: 0.55em; + font-family: monospace; + line-height: 1.2em; + + word-wrap: break-word; + + box-shadow: 0px 0px 6px rgba(0,0,0,0.3); +} +.reveal code { + font-family: monospace; +} + +.reveal pre code { + display: block; + padding: 5px; + overflow: auto; + max-height: 400px; + word-wrap: normal; +} + +.reveal table { + margin: auto; + border-collapse: collapse; + border-spacing: 0; +} + +.reveal table th { + font-weight: bold; +} + +.reveal table th, +.reveal table td { + text-align: left; + padding: 0.2em 0.5em 0.2em 0.5em; + border-bottom: 1px solid; +} + +.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 tr:last-child td { + border-bottom: none; +} + +.reveal sup { + vertical-align: super; +} +.reveal sub { + vertical-align: sub; +} + +.reveal small { + display: inline-block; + font-size: 0.6em; + line-height: 1.2em; + vertical-align: top; +} + +.reveal small * { + vertical-align: top; +} + + +/********************************************* * LINKS *********************************************/ -.reveal a:not(.image) { +.reveal a { color: $linkColor; text-decoration: none; -webkit-transition: color .15s ease; -moz-transition: color .15s ease; - -ms-transition: color .15s ease; - -o-transition: color .15s ease; transition: color .15s ease; } - .reveal a:not(.image):hover { + .reveal a:hover { color: $linkColorHover; text-shadow: none; @@ -86,14 +265,19 @@ body { border: 4px solid $mainColor; box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); - - -webkit-transition: all .2s linear; - -moz-transition: all .2s linear; - -ms-transition: all .2s linear; - -o-transition: all .2s linear; - transition: all .2s linear; } + .reveal section img.plain { + border: 0; + box-shadow: none; + } + + .reveal a img { + -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); border-color: $linkColor; @@ -106,39 +290,39 @@ body { * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.navigate-left, -.reveal .controls div.navigate-left.enabled { +.reveal .controls .navigate-left, +.reveal .controls .navigate-left.enabled { border-right-color: $linkColor; } -.reveal .controls div.navigate-right, -.reveal .controls div.navigate-right.enabled { +.reveal .controls .navigate-right, +.reveal .controls .navigate-right.enabled { border-left-color: $linkColor; } -.reveal .controls div.navigate-up, -.reveal .controls div.navigate-up.enabled { +.reveal .controls .navigate-up, +.reveal .controls .navigate-up.enabled { border-bottom-color: $linkColor; } -.reveal .controls div.navigate-down, -.reveal .controls div.navigate-down.enabled { +.reveal .controls .navigate-down, +.reveal .controls .navigate-down.enabled { border-top-color: $linkColor; } -.reveal .controls div.navigate-left.enabled:hover { +.reveal .controls .navigate-left.enabled:hover { border-right-color: $linkColorHover; } -.reveal .controls div.navigate-right.enabled:hover { +.reveal .controls .navigate-right.enabled:hover { border-left-color: $linkColorHover; } -.reveal .controls div.navigate-up.enabled:hover { +.reveal .controls .navigate-up.enabled:hover { border-bottom-color: $linkColorHover; } -.reveal .controls div.navigate-down.enabled:hover { +.reveal .controls .navigate-down.enabled:hover { border-top-color: $linkColorHover; } @@ -155,8 +339,6 @@ body { -webkit-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); -moz-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); - -ms-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); - -o-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); } @@ -164,7 +346,7 @@ body { * SLIDE NUMBER *********************************************/ .reveal .slide-number { - color: $linkColor; + color: $linkColor; } diff --git a/css/theme/white.css b/css/theme/white.css new file mode 100644 index 0000000..f37aa9d --- /dev/null +++ b/css/theme/white.css @@ -0,0 +1,269 @@ +@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 + */ +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 + *********************************************/ +body { + background: #fff; + background-color: #fff; } + +.reveal { + font-family: 'Source Sans Pro', Helvetica, sans-serif; + font-size: 38px; + font-weight: normal; + color: #222; } + +::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 { + margin: 0 0 20px 0; + color: #222; + font-family: 'Source Sans Pro', Helvetica, sans-serif; + font-weight: 600; + line-height: 1.2; + letter-spacing: normal; + text-transform: uppercase; + text-shadow: none; + word-wrap: break-word; } + +.reveal h1 { + font-size: 2.5em; } + +.reveal h2 { + font-size: 1.6em; } + +.reveal h3 { + font-size: 1.3em; } + +.reveal h4 { + font-size: 1em; } + +.reveal h1 { + text-shadow: none; } + +/********************************************* + * OTHER + *********************************************/ +.reveal p { + margin: 20px 0; + line-height: 1.3; } + +/* Ensure certain elements are never larger than the slide itself */ +.reveal img, .reveal video, .reveal iframe { + max-width: 95%; + max-height: 95%; } + +.reveal strong, .reveal b { + font-weight: bold; } + +.reveal em { + font-style: italic; } + +.reveal ol, .reveal dl, .reveal ul { + display: inline-block; + text-align: left; + margin: 0 0 0 1em; } + +.reveal ol { + list-style-type: decimal; } + +.reveal ul { + list-style-type: disc; } + +.reveal ul ul { + list-style-type: square; } + +.reveal ul ul ul { + list-style-type: circle; } + +.reveal ul ul, .reveal ul ol, .reveal ol ol, .reveal ol ul { + display: block; + margin-left: 40px; } + +.reveal dt { + font-weight: bold; } + +.reveal dd { + margin-left: 40px; } + +.reveal q, .reveal blockquote { + quotes: none; } + +.reveal blockquote { + display: block; + position: relative; + width: 70%; + margin: 20px auto; + padding: 5px; + font-style: italic; + 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 { + display: inline-block; } + +.reveal q { + font-style: italic; } + +.reveal pre { + display: block; + position: relative; + width: 90%; + margin: 20px auto; + text-align: left; + font-size: 0.55em; + font-family: monospace; + line-height: 1.2em; + word-wrap: break-word; + box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); } + +.reveal code { + font-family: monospace; } + +.reveal pre code { + display: block; + padding: 5px; + overflow: auto; + max-height: 400px; + word-wrap: normal; } + +.reveal table { + margin: auto; + border-collapse: collapse; + border-spacing: 0; } + +.reveal table th { + font-weight: bold; } + +.reveal table th, .reveal table td { + text-align: left; + padding: 0.2em 0.5em 0.2em 0.5em; + border-bottom: 1px solid; } + +.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 tr:last-child td { + border-bottom: none; } + +.reveal sup { + vertical-align: super; } + +.reveal sub { + vertical-align: sub; } + +.reveal small { + display: inline-block; + font-size: 0.6em; + line-height: 1.2em; + vertical-align: top; } + +.reveal small * { + vertical-align: top; } + +/********************************************* + * LINKS + *********************************************/ +.reveal a { + color: #2a76dd; + text-decoration: none; + -webkit-transition: color 0.15s ease; + -moz-transition: color 0.15s ease; + transition: color 0.15s ease; } + +.reveal a:hover { + color: #6ca2e8; + text-shadow: none; + border: none; } + +.reveal .roll span:after { + color: #fff; + background: #1a54a1; } + +/********************************************* + * IMAGES + *********************************************/ +.reveal section img { + margin: 15px 0px; + background: rgba(255, 255, 255, 0.12); + 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; } + +.reveal a:hover img { + background: rgba(255, 255, 255, 0.2); + border-color: #2a76dd; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); } + +/********************************************* + * NAVIGATION CONTROLS + *********************************************/ +.reveal .controls .navigate-left, .reveal .controls .navigate-left.enabled { + border-right-color: #2a76dd; } + +.reveal .controls .navigate-right, .reveal .controls .navigate-right.enabled { + border-left-color: #2a76dd; } + +.reveal .controls .navigate-up, .reveal .controls .navigate-up.enabled { + border-bottom-color: #2a76dd; } + +.reveal .controls .navigate-down, .reveal .controls .navigate-down.enabled { + border-top-color: #2a76dd; } + +.reveal .controls .navigate-left.enabled:hover { + border-right-color: #6ca2e8; } + +.reveal .controls .navigate-right.enabled:hover { + border-left-color: #6ca2e8; } + +.reveal .controls .navigate-up.enabled:hover { + border-bottom-color: #6ca2e8; } + +.reveal .controls .navigate-down.enabled:hover { + border-top-color: #6ca2e8; } + +/********************************************* + * PROGRESS BAR + *********************************************/ +.reveal .progress { + background: rgba(0, 0, 0, 0.2); } + +.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 + *********************************************/ +.reveal .slide-number { + color: #2a76dd; } |