diff options
Diffstat (limited to 'css/theme')
-rw-r--r-- | css/theme/beige.css | 237 | ||||
-rw-r--r-- | css/theme/black.css | 261 | ||||
-rw-r--r-- | css/theme/blood.css | 266 | ||||
-rw-r--r-- | css/theme/default.css | 148 | ||||
-rw-r--r-- | css/theme/league.css | 267 | ||||
-rw-r--r-- | css/theme/moon.css | 219 | ||||
-rw-r--r-- | css/theme/night.css | 207 | ||||
-rw-r--r-- | css/theme/serif.css | 239 | ||||
-rw-r--r-- | css/theme/simple.css | 223 | ||||
-rw-r--r-- | css/theme/sky.css | 217 | ||||
-rw-r--r-- | css/theme/solarized.css | 219 | ||||
-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 | 8 | ||||
-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 | 195 | ||||
-rw-r--r-- | css/theme/white.css | 261 |
23 files changed, 2489 insertions, 654 deletions
diff --git a/css/theme/beige.css b/css/theme/beige.css index 089cb7b..514427c 100644 --- a/css/theme/beige.css +++ b/css/theme/beige.css @@ -1,81 +1,204 @@ +@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; + background: #3F3F3F; + color: #DCDCDC; } + +.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 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 +206,13 @@ 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 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 +222,29 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.navigate-left, -.reveal .controls div.navigate-left.enabled { +.reveal .controls div.navigate-left, .reveal .controls div.navigate-left.enabled { border-right-color: #8b743d; } -.reveal .controls div.navigate-right, -.reveal .controls div.navigate-right.enabled { +.reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled { border-left-color: #8b743d; } -.reveal .controls div.navigate-up, -.reveal .controls div.navigate-up.enabled { +.reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled { border-bottom-color: #8b743d; } -.reveal .controls div.navigate-down, -.reveal .controls div.navigate-down.enabled { +.reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled { border-top-color: #8b743d; } .reveal .controls div.navigate-left.enabled:hover { - border-right-color: #c0a86e; } + border-right-color: #c0a76e; } .reveal .controls div.navigate-right.enabled:hover { - border-left-color: #c0a86e; } + border-left-color: #c0a76e; } .reveal .controls div.navigate-up.enabled:hover { - border-bottom-color: #c0a86e; } + border-bottom-color: #c0a76e; } .reveal .controls div.navigate-down.enabled:hover { - border-top-color: #c0a86e; } + border-top-color: #c0a76e; } /********************************************* * PROGRESS BAR @@ -137,8 +256,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..7d3bee4 --- /dev/null +++ b/css/theme/black.css @@ -0,0 +1,261 @@ +@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; + background: #3F3F3F; + color: #DCDCDC; } + +.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 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 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 div.navigate-left, .reveal .controls div.navigate-left.enabled { + border-right-color: #42affa; } + +.reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled { + border-left-color: #42affa; } + +.reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled { + border-bottom-color: #42affa; } + +.reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled { + border-top-color: #42affa; } + +.reveal .controls div.navigate-left.enabled:hover { + border-right-color: #8dcffc; } + +.reveal .controls div.navigate-right.enabled:hover { + border-left-color: #8dcffc; } + +.reveal .controls div.navigate-up.enabled:hover { + border-bottom-color: #8dcffc; } + +.reveal .controls div.navigate-down.enabled:hover { + border-top-color: #8dcffc; } + +/********************************************* + * 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..768d2a3 100644 --- a/css/theme/blood.css +++ b/css/theme/blood.css @@ -14,67 +14,196 @@ * 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: #222; + background: -moz-radial-gradient(center, circle cover, #626262 0%, #222 100%); + background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #626262), color-stop(100%, #222)); + background: -webkit-radial-gradient(center, circle cover, #626262 0%, #222 100%); + background: -o-radial-gradient(center, circle cover, #626262 0%, #222 100%); + background: -ms-radial-gradient(center, circle cover, #626262 0%, #222 100%); + background: radial-gradient(center, circle cover, #626262 0%, #222 100%); background-color: #2b2b2b; } .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 { - 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); } + 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; + background: #3F3F3F; + color: #DCDCDC; } + +.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 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 +211,45 @@ 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 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 div.navigate-left, .reveal .controls div.navigate-left.enabled { + border-right-color: #a23; } -.reveal .controls div.navigate-right, -.reveal .controls div.navigate-right.enabled { - border-left-color: #aa2233; } +.reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled { + border-left-color: #a23; } -.reveal .controls div.navigate-up, -.reveal .controls div.navigate-up.enabled { - border-bottom-color: #aa2233; } +.reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled { + border-bottom-color: #a23; } -.reveal .controls div.navigate-down, -.reveal .controls div.navigate-down.enabled { - border-top-color: #aa2233; } +.reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled { + border-top-color: #a23; } .reveal .controls div.navigate-left.enabled:hover { - border-right-color: #dd5566; } + border-right-color: #dd5567; } .reveal .controls div.navigate-right.enabled:hover { - border-left-color: #dd5566; } + border-left-color: #dd5567; } .reveal .controls div.navigate-up.enabled:hover { - border-bottom-color: #dd5566; } + border-bottom-color: #dd5567; } .reveal .controls div.navigate-down.enabled:hover { - border-top-color: #dd5566; } + border-top-color: #dd5567; } /********************************************* * PROGRESS BAR @@ -133,37 +258,28 @@ 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 { + text-shadow: 1px 1px #222; } + +.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 { font-weight: 700; } -.reveal a:not(.image), -.reveal a:not(.image):hover { +.reveal a, .reveal a:hover { text-shadow: 2px 2px 2px #000; } -.reveal small a:not(.image), -.reveal small a:not(.image):hover { +.reveal small a, .reveal small a:hover { text-shadow: 1px 1px 1px #000; } .reveal p code { 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..c6d07f6 --- /dev/null +++ b/css/theme/league.css @@ -0,0 +1,267 @@ +@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; + background: #3F3F3F; + color: #DCDCDC; } + +.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 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 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 div.navigate-left, .reveal .controls div.navigate-left.enabled { + border-right-color: #13DAEC; } + +.reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled { + border-left-color: #13DAEC; } + +.reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled { + border-bottom-color: #13DAEC; } + +.reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled { + border-top-color: #13DAEC; } + +.reveal .controls div.navigate-left.enabled:hover { + border-right-color: #71ebf4; } + +.reveal .controls div.navigate-right.enabled:hover { + border-left-color: #71ebf4; } + +.reveal .controls div.navigate-up.enabled:hover { + border-bottom-color: #71ebf4; } + +.reveal .controls div.navigate-down.enabled:hover { + border-top-color: #71ebf4; } + +/********************************************* + * 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..4817c18 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,186 @@ 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; + background: #3F3F3F; + color: #DCDCDC; } + +.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 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 +207,12 @@ 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 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 +222,29 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.navigate-left, -.reveal .controls div.navigate-left.enabled { +.reveal .controls div.navigate-left, .reveal .controls div.navigate-left.enabled { border-right-color: #268bd2; } -.reveal .controls div.navigate-right, -.reveal .controls div.navigate-right.enabled { +.reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled { border-left-color: #268bd2; } -.reveal .controls div.navigate-up, -.reveal .controls div.navigate-up.enabled { +.reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled { border-bottom-color: #268bd2; } -.reveal .controls div.navigate-down, -.reveal .controls div.navigate-down.enabled { +.reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled { border-top-color: #268bd2; } .reveal .controls div.navigate-left.enabled:hover { - border-right-color: #78b9e6; } + border-right-color: #78bae6; } .reveal .controls div.navigate-right.enabled:hover { - border-left-color: #78b9e6; } + border-left-color: #78bae6; } .reveal .controls div.navigate-up.enabled:hover { - border-bottom-color: #78b9e6; } + border-bottom-color: #78bae6; } .reveal .controls div.navigate-down.enabled:hover { - border-top-color: #78b9e6; } + border-top-color: #78bae6; } /********************************************* * PROGRESS BAR @@ -137,8 +256,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..71319b2 100644 --- a/css/theme/night.css +++ b/css/theme/night.css @@ -9,61 +9,190 @@ * 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; + background: #3F3F3F; + color: #DCDCDC; } + +.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 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 +200,13 @@ 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 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,20 +216,16 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.navigate-left, -.reveal .controls div.navigate-left.enabled { +.reveal .controls div.navigate-left, .reveal .controls div.navigate-left.enabled { border-right-color: #e7ad52; } -.reveal .controls div.navigate-right, -.reveal .controls div.navigate-right.enabled { +.reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled { border-left-color: #e7ad52; } -.reveal .controls div.navigate-up, -.reveal .controls div.navigate-up.enabled { +.reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled { border-bottom-color: #e7ad52; } -.reveal .controls div.navigate-down, -.reveal .controls div.navigate-down.enabled { +.reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled { border-top-color: #e7ad52; } .reveal .controls div.navigate-left.enabled:hover { @@ -125,8 +250,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..ed85db6 100644 --- a/css/theme/serif.css +++ b/css/theme/serif.css @@ -4,62 +4,191 @@ * * 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 { - 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; + background: #3F3F3F; + color: #DCDCDC; } + +.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 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 +202,45 @@ 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 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 div.navigate-left, .reveal .controls div.navigate-left.enabled { + border-right-color: #51483D; } -.reveal .controls div.navigate-right, -.reveal .controls div.navigate-right.enabled { - border-left-color: #51483d; } +.reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled { + border-left-color: #51483D; } -.reveal .controls div.navigate-up, -.reveal .controls div.navigate-up.enabled { - border-bottom-color: #51483d; } +.reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled { + border-bottom-color: #51483D; } -.reveal .controls div.navigate-down, -.reveal .controls div.navigate-down.enabled { - border-top-color: #51483d; } +.reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled { + border-top-color: #51483D; } .reveal .controls div.navigate-left.enabled:hover { - border-right-color: #8b7c69; } + border-right-color: #8b7b69; } .reveal .controls div.navigate-right.enabled:hover { - border-left-color: #8b7c69; } + border-left-color: #8b7b69; } .reveal .controls div.navigate-up.enabled:hover { - border-bottom-color: #8b7c69; } + border-bottom-color: #8b7b69; } .reveal .controls div.navigate-down.enabled:hover { - border-top-color: #8b7c69; } + border-top-color: #8b7b69; } /********************************************* * PROGRESS BAR @@ -124,15 +249,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..d9153d7 100644 --- a/css/theme/simple.css +++ b/css/theme/simple.css @@ -11,54 +11,183 @@ * 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; + background: #3F3F3F; + color: #DCDCDC; } + +.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 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,37 +202,33 @@ 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 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 div.navigate-left, .reveal .controls div.navigate-left.enabled { + border-right-color: #00008B; } -.reveal .controls div.navigate-right, -.reveal .controls div.navigate-right.enabled { - border-left-color: darkblue; } +.reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled { + border-left-color: #00008B; } -.reveal .controls div.navigate-up, -.reveal .controls div.navigate-up.enabled { - border-bottom-color: darkblue; } +.reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled { + border-bottom-color: #00008B; } -.reveal .controls div.navigate-down, -.reveal .controls div.navigate-down.enabled { - border-top-color: darkblue; } +.reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled { + border-top-color: #00008B; } .reveal .controls div.navigate-left.enabled:hover { border-right-color: #0000f1; } @@ -124,15 +249,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..f7e8402 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,186 @@ 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 { - 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; + background: #3F3F3F; + color: #DCDCDC; } + +.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 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 +209,13 @@ 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 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 +225,29 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.navigate-left, -.reveal .controls div.navigate-left.enabled { +.reveal .controls div.navigate-left, .reveal .controls div.navigate-left.enabled { border-right-color: #3b759e; } -.reveal .controls div.navigate-right, -.reveal .controls div.navigate-right.enabled { +.reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled { border-left-color: #3b759e; } -.reveal .controls div.navigate-up, -.reveal .controls div.navigate-up.enabled { +.reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled { border-bottom-color: #3b759e; } -.reveal .controls div.navigate-down, -.reveal .controls div.navigate-down.enabled { +.reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled { border-top-color: #3b759e; } .reveal .controls div.navigate-left.enabled:hover { - border-right-color: #74a7cb; } + border-right-color: #74a8cb; } .reveal .controls div.navigate-right.enabled:hover { - border-left-color: #74a7cb; } + border-left-color: #74a8cb; } .reveal .controls div.navigate-up.enabled:hover { - border-bottom-color: #74a7cb; } + border-bottom-color: #74a8cb; } .reveal .controls div.navigate-down.enabled:hover { - border-top-color: #74a7cb; } + border-top-color: #74a8cb; } /********************************************* * PROGRESS BAR @@ -134,8 +259,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..583201a 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,186 @@ 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; + background: #3F3F3F; + color: #DCDCDC; } + +.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 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 +207,12 @@ 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 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 +222,29 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.navigate-left, -.reveal .controls div.navigate-left.enabled { +.reveal .controls div.navigate-left, .reveal .controls div.navigate-left.enabled { border-right-color: #268bd2; } -.reveal .controls div.navigate-right, -.reveal .controls div.navigate-right.enabled { +.reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled { border-left-color: #268bd2; } -.reveal .controls div.navigate-up, -.reveal .controls div.navigate-up.enabled { +.reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled { border-bottom-color: #268bd2; } -.reveal .controls div.navigate-down, -.reveal .controls div.navigate-down.enabled { +.reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled { border-top-color: #268bd2; } .reveal .controls div.navigate-left.enabled:hover { - border-right-color: #78b9e6; } + border-right-color: #78bae6; } .reveal .controls div.navigate-right.enabled:hover { - border-left-color: #78b9e6; } + border-left-color: #78bae6; } .reveal .controls div.navigate-up.enabled:hover { - border-bottom-color: #78b9e6; } + border-bottom-color: #78bae6; } .reveal .controls div.navigate-down.enabled:hover { - border-top-color: #78b9e6; } + border-top-color: #78bae6; } /********************************************* * PROGRESS BAR @@ -137,8 +256,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..f2e3a09 100644 --- a/css/theme/source/blood.scss +++ b/css/theme/source/blood.scss @@ -70,13 +70,13 @@ $selectionColor: #fff; font-weight: 700; } -.reveal a:not(.image), -.reveal a:not(.image):hover { +.reveal a, +.reveal a:hover { text-shadow: 2px 2px 2px #000; } -.reveal small a:not(.image), -.reveal small a:not(.image):hover { +.reveal small a, +.reveal small a:hover { text-shadow: 1px 1px 1px #000; } 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..d1be10a 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,199 @@ 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; + background: #3F3F3F; + color: #DCDCDC; +} + +.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 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 +257,14 @@ 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 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; @@ -155,8 +326,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); } diff --git a/css/theme/white.css b/css/theme/white.css new file mode 100644 index 0000000..5fdb2fc --- /dev/null +++ b/css/theme/white.css @@ -0,0 +1,261 @@ +@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; + background: #3F3F3F; + color: #DCDCDC; } + +.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 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 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 div.navigate-left, .reveal .controls div.navigate-left.enabled { + border-right-color: #2a76dd; } + +.reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled { + border-left-color: #2a76dd; } + +.reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled { + border-bottom-color: #2a76dd; } + +.reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled { + border-top-color: #2a76dd; } + +.reveal .controls div.navigate-left.enabled:hover { + border-right-color: #6ca2e8; } + +.reveal .controls div.navigate-right.enabled:hover { + border-left-color: #6ca2e8; } + +.reveal .controls div.navigate-up.enabled:hover { + border-bottom-color: #6ca2e8; } + +.reveal .controls div.navigate-down.enabled:hover { + border-top-color: #6ca2e8; } + +/********************************************* + * 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; } |