From dc215a244174b88587ca032a68c172010235d154 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Wed, 10 Dec 2014 18:28:14 +0100 Subject: rename previous default theme to league --- Gruntfile.js | 2 +- README.md | 5 +- css/theme/default.css | 270 ----------------------------------------- css/theme/league.css | 272 ++++++++++++++++++++++++++++++++++++++++++ css/theme/source/default.scss | 43 ------- css/theme/source/league.scss | 45 +++++++ index.html | 3 +- 7 files changed, 323 insertions(+), 317 deletions(-) delete mode 100644 css/theme/default.css create mode 100644 css/theme/league.css delete mode 100644 css/theme/source/default.scss create mode 100644 css/theme/source/league.scss diff --git a/Gruntfile.js b/Gruntfile.js index fbc2466..e3f017c 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -37,7 +37,7 @@ module.exports = function(grunt) { }, themes: { files: { - 'css/theme/default.css': 'css/theme/source/default.scss', + 'css/theme/league.css': 'css/theme/source/league.scss', 'css/theme/black.css': 'css/theme/source/black.scss', 'css/theme/beige.css': 'css/theme/source/beige.scss', 'css/theme/night.css': 'css/theme/source/night.scss', diff --git a/README.md b/README.md index abc059f..703fa07 100644 --- a/README.md +++ b/README.md @@ -608,7 +608,8 @@ Here's an example of an exported presentation that's been uploaded to SlideShare The framework comes with a few different themes included: -- default: Gray background, white text, blue links +- black: Black background, white text, blue links (default theme) +- league: Gray background, white text, blue links (default theme for reveal.js < 3.0.0) - beige: Beige background, dark text, brown links - sky: Blue background, thin white text, blue links - night: Black background, thick white text, orange links @@ -619,7 +620,7 @@ The framework comes with a few different themes included: Each theme is available as a separate stylesheet. To change theme you will need to replace **default** below with your desired theme name in index.html: ```html - + ``` If you want to add a theme of your own see the instructions here: [/css/theme/README.md](https://github.com/hakimel/reveal.js/blob/master/css/theme/README.md). diff --git a/css/theme/default.css b/css/theme/default.css deleted file mode 100644 index c3e5edf..0000000 --- a/css/theme/default.css +++ /dev/null @@ -1,270 +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; - 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; - 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/league.css b/css/theme/league.css new file mode 100644 index 0000000..80fb09e --- /dev/null +++ b/css/theme/league.css @@ -0,0 +1,272 @@ +@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 + */ +@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; + 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; + 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/source/default.scss b/css/theme/source/default.scss deleted file mode 100644 index 9c40485..0000000 --- a/css/theme/source/default.scss +++ /dev/null @@ -1,43 +0,0 @@ -/** - * Default theme for reveal.js. - * - * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se - */ - - -// Default mixins and settings ----------------- -@import "../template/mixins"; -@import "../template/settings"; -// --------------------------------------------- - - - -// Include theme-specific fonts -@font-face { - font-family: 'League Gothic'; - src: url('../../lib/font/league_gothic-webfont.eot'); - src: url('../../lib/font/league_gothic-webfont.eot?#iefix') format('embedded-opentype'), - url('../../lib/font/league_gothic-webfont.woff') format('woff'), - url('../../lib/font/league_gothic-webfont.ttf') format('truetype'), - url('../../lib/font/league_gothic-webfont.svg#LeagueGothicRegular') format('svg'); - - font-weight: normal; - font-style: normal; -} - -@import url(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 -@mixin bodyBackground() { - @include radial-gradient( rgba(28,30,32,1), rgba(85,90,95,1) ); -} - - - -// Theme template ------------------------------ -@import "../template/theme"; -// --------------------------------------------- \ No newline at end of file diff --git a/css/theme/source/league.scss b/css/theme/source/league.scss new file mode 100644 index 0000000..a21ef3c --- /dev/null +++ b/css/theme/source/league.scss @@ -0,0 +1,45 @@ +/** + * League theme for reveal.js. + * + * This was the default theme pre-3.0.0. + * + * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se + */ + + +// Default mixins and settings ----------------- +@import "../template/mixins"; +@import "../template/settings"; +// --------------------------------------------- + + + +// Include theme-specific fonts +@font-face { + font-family: 'League Gothic'; + src: url('../../lib/font/league_gothic-webfont.eot'); + src: url('../../lib/font/league_gothic-webfont.eot?#iefix') format('embedded-opentype'), + url('../../lib/font/league_gothic-webfont.woff') format('woff'), + url('../../lib/font/league_gothic-webfont.ttf') format('truetype'), + url('../../lib/font/league_gothic-webfont.svg#LeagueGothicRegular') format('svg'); + + font-weight: normal; + font-style: normal; +} + +@import url(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 +@mixin bodyBackground() { + @include radial-gradient( rgba(28,30,32,1), rgba(85,90,95,1) ); +} + + + +// Theme template ------------------------------ +@import "../template/theme"; +// --------------------------------------------- \ No newline at end of file diff --git a/index.html b/index.html index 6bf40f4..cf90a21 100644 --- a/index.html +++ b/index.html @@ -167,7 +167,8 @@

Themes

reveal.js comes with a few themes built in:
- Default - + Black (default) - + League - Sky - Beige - Simple - -- cgit v1.2.3