From 2c788dffb646b2d13e9512c81237d8e1c3a76262 Mon Sep 17 00:00:00 2001 From: Max Ogden Date: Thu, 4 Oct 2012 12:38:05 +0200 Subject: simple serif font theme --- css/theme/serif.css | 159 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 159 insertions(+) create mode 100644 css/theme/serif.css (limited to 'css/theme/serif.css') diff --git a/css/theme/serif.css b/css/theme/serif.css new file mode 100644 index 0000000..47512fe --- /dev/null +++ b/css/theme/serif.css @@ -0,0 +1,159 @@ +/** + * A simple theme for reveal.js presentations, similar + * to the default theme. The accent color is darkblue; + * do a find-replace to change it. + * + * This theme is Copyright (C) 2012 Owen Versteeg, https://github.com/StereotypicalApps. It is MIT licensed. + * reveal.js is Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se; so is the theme - beige.css - that this is based off of. + */ + +/********************************************* + * FONT-FACE DEFINITIONS + *********************************************/ + + +/********************************************* + * GLOBAL STYLES + *********************************************/ + +body { + font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif; + font-size: 36px; + font-weight: 200; + letter-spacing: -0.02em; + color: black !important; + + background: #F0F1EB; +} + +::-moz-selection { + background: #26351C; + color: rgba(255,255,255, 0.8); +} +::-webkit-selection { + background: #26351C; + color: rgba(255,255,255, 0.8); +} +::selection { + background: #26351C; + color: rgba(255,255,255, 0.8); +} + +/********************************************* + * HEADERS + *********************************************/ + +.reveal h1, +.reveal h2, +.reveal h3, +.reveal h4, +.reveal h5, +.reveal h6 { + margin: 0 0 40px 0; + color: #383D3D; + font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif; + line-height: 0.9em; +} + +/********************************************* + * LINKS + *********************************************/ + +.reveal a:not(.image) { + color: #51483D; + text-decoration: none; + font-weight: bold; + line-height: 1.4em; + -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 { + text-shadow: none; + border: none; + border-radius: 2px; + } + +.reveal .roll span:after { + color: #fff; + background: #51483D; +} + +/********************************************* + * MISC + *********************************************/ + +.reveal p { + line-height: 1.4em; + font-size: 1.15em; + color: #111; +} + +.reveal .subtitle { + font-style: italic; +} + +/********************************************* + * IMAGES + *********************************************/ + +.reveal section img { + margin: 30px 0 0 0; + background: rgba(255,255,255,0.12); + border: 4px solid #eee; + + -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); + -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); + 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: darkblue; + + -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); + -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); + box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); + } + + +/********************************************* + * NAVIGATION CONTROLS + *********************************************/ + +.reveal .controls a { + color: black; +} + .reveal .controls a.enabled { + color: #26351C; + opacity: 1; + text-shadow: 0px 0px 2px hsla(185, 45%, 70%, 0.3); + } + + +/********************************************* + * PROGRESS BAR + *********************************************/ + +.reveal .progress { + background: rgba(0,0,0,0.2); +} + .reveal .progress span { + background: #26351C; + + -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); + } + + -- cgit v1.2.3 From 17f3cf4332cb300d08fba2b77416dd281cbebb18 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Tue, 16 Oct 2012 09:27:55 -0400 Subject: adjust themes so that font definitions are at top, apply fonts on .reveal instead of body --- css/theme/beige.css | 31 +++++++++++++++++++++---------- css/theme/default.css | 32 ++++++++++++++++++++++---------- css/theme/serif.css | 25 ++++++++++++++++++------- css/theme/simple.css | 31 ++++++++++++++++++++++--------- css/theme/sky.css | 29 +++++++++++++++++++---------- 5 files changed, 102 insertions(+), 46 deletions(-) (limited to 'css/theme/serif.css') diff --git a/css/theme/beige.css b/css/theme/beige.css index 684f842..4e7a987 100644 --- a/css/theme/beige.css +++ b/css/theme/beige.css @@ -6,7 +6,7 @@ */ /********************************************* - * FONT-FACE DEFINITIONS + * FONTS *********************************************/ @font-face { @@ -21,16 +21,32 @@ font-style: normal; } +.reveal { + font-family: 'Lato', Times, 'Times New Roman', serif; + font-size: 36px; + font-weight: 200; + letter-spacing: -0.02em; +} + +.reveal h1, +.reveal h2, +.reveal h3, +.reveal h4, +.reveal h5, +.reveal h6 { + font-family: 'League Gothic', Impact, sans-serif; + line-height: 0.9em; + letter-spacing: 0.02em; + + text-transform: uppercase; +} + /********************************************* * GLOBAL STYLES *********************************************/ body { - font-family: 'Lato', Times, 'Times New Roman', serif; - font-size: 36px; - font-weight: 200; - letter-spacing: -0.02em; color: #333; background: #f7f3de; @@ -68,11 +84,6 @@ body { .reveal h6 { margin: 0 0 20px 0; color: #333; - font-family: 'League Gothic', Impact, sans-serif; - line-height: 0.9em; - letter-spacing: 0.02em; - - text-transform: uppercase; } .reveal h1 { diff --git a/css/theme/default.css b/css/theme/default.css index bd7caa7..a937b8e 100644 --- a/css/theme/default.css +++ b/css/theme/default.css @@ -5,7 +5,7 @@ */ /********************************************* - * FONT-FACE DEFINITIONS + * FONTS *********************************************/ @font-face { @@ -20,16 +20,32 @@ font-style: normal; } +.reveal { + font-family: 'Lato', Times, 'Times New Roman', serif; + font-size: 36px; + font-weight: 200; + letter-spacing: -0.02em; +} + +.reveal h1, +.reveal h2, +.reveal h3, +.reveal h4, +.reveal h5, +.reveal h6 { + font-family: 'League Gothic', Impact, sans-serif; + line-height: 0.9em; + letter-spacing: 0.02em; + + text-transform: uppercase; +} + /********************************************* * GLOBAL STYLES *********************************************/ body { - font-family: 'Lato', Times, 'Times New Roman', serif; - font-size: 36px; - font-weight: 200; - letter-spacing: -0.02em; color: #eee; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiM1NTVhNWYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMWMxZTIwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); @@ -55,11 +71,7 @@ body { .reveal h6 { margin: 0 0 20px 0; color: #eee; - 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); } diff --git a/css/theme/serif.css b/css/theme/serif.css index 47512fe..690ff2d 100644 --- a/css/theme/serif.css +++ b/css/theme/serif.css @@ -8,19 +8,32 @@ */ /********************************************* - * FONT-FACE DEFINITIONS + * FONTS *********************************************/ +.reveal { + font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif; + font-size: 36px; + font-weight: 200; + letter-spacing: -0.02em; +} + +.reveal h1, +.reveal h2, +.reveal h3, +.reveal h4, +.reveal h5, +.reveal h6 { + font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif; + line-height: 0.9em; +} + /********************************************* * GLOBAL STYLES *********************************************/ body { - font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif; - font-size: 36px; - font-weight: 200; - letter-spacing: -0.02em; color: black !important; background: #F0F1EB; @@ -51,8 +64,6 @@ body { .reveal h6 { margin: 0 0 40px 0; color: #383D3D; - font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif; - line-height: 0.9em; } /********************************************* diff --git a/css/theme/simple.css b/css/theme/simple.css index 16853be..2d782ae 100644 --- a/css/theme/simple.css +++ b/css/theme/simple.css @@ -8,21 +8,38 @@ */ /********************************************* - * FONT-FACE DEFINITIONS + * FONTS *********************************************/ @import url(http://fonts.googleapis.com/css?family=News+Cycle:400,700); +.reveal { + font-family: 'Lato', Times, 'Times New Roman', serif; + font-size: 36px; + font-weight: 200; + letter-spacing: -0.02em; +} + +.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; + + text-transform: uppercase; +} + /********************************************* * GLOBAL STYLES *********************************************/ body { - font-family: 'Lato', Times, 'Times New Roman', serif; - font-size: 36px; - font-weight: 200; - letter-spacing: -0.02em; color: black !important; background: white; @@ -53,10 +70,6 @@ body { .reveal h6 { margin: 0 0 20px 0; color: black; - font-family: 'News Cycle', Impact, sans-serif; - line-height: 0.9em; - - text-transform: uppercase; } diff --git a/css/theme/sky.css b/css/theme/sky.css index 92a91af..71ebd2c 100644 --- a/css/theme/sky.css +++ b/css/theme/sky.css @@ -5,12 +5,30 @@ */ /********************************************* - * FONT-FACE DEFINITIONS + * FONTS *********************************************/ @import url(http://fonts.googleapis.com/css?family=Quicksand:400,700,400italic,700italic); @import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700); +.reveal { + font-family: 'Open Sans', sans-serif; + font-size: 36px; + font-weight: 200; + letter-spacing: -0.02em; +} + +.reveal h1, +.reveal h2, +.reveal h3, +.reveal h4, +.reveal h5, +.reveal h6 { + font-family: 'Quicksand', sans-serif; + line-height: 0.9em; + letter-spacing: -0.08em; + text-transform: uppercase; +} /********************************************* @@ -18,10 +36,6 @@ *********************************************/ body { - font-family: 'Open Sans', sans-serif; - font-size: 36px; - font-weight: 200; - letter-spacing: -0.02em; color: #333; background: #f7fbfc; @@ -60,11 +74,6 @@ body { .reveal h6 { margin: 0 0 20px 0; color: #333; - font-family: 'Quicksand', sans-serif; - line-height: 0.9em; - letter-spacing: -0.08em; - - text-transform: uppercase; } -- cgit v1.2.3 From ecb4347ec1d9db8cceec1cb28385fc2326087b17 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Sat, 20 Oct 2012 10:57:51 -0400 Subject: modularize themes and convert them to sass (closes #191) --- .gitignore | 1 + css/reveal.css | 7 +- css/theme/README.md | 5 + css/theme/beige.css | 216 +++++++++++++++------------------------ css/theme/default.css | 211 +++++++++++++++----------------------- css/theme/serif.css | 191 +++++++++++++--------------------- css/theme/simple.css | 186 ++++++++++++++------------------- css/theme/sky.css | 203 ++++++++++++++---------------------- css/theme/source/beige.scss | 50 +++++++++ css/theme/source/default.scss | 42 ++++++++ css/theme/source/serif.scss | 33 ++++++ css/theme/source/simple.scss | 38 +++++++ css/theme/source/sky.scss | 41 ++++++++ css/theme/template/mixins.scss | 29 ++++++ css/theme/template/settings.scss | 33 ++++++ css/theme/template/theme.scss | 135 ++++++++++++++++++++++++ index.html | 6 +- js/reveal.js | 2 + 18 files changed, 805 insertions(+), 624 deletions(-) create mode 100644 css/theme/README.md create mode 100644 css/theme/source/beige.scss create mode 100644 css/theme/source/default.scss create mode 100644 css/theme/source/serif.scss create mode 100644 css/theme/source/simple.scss create mode 100644 css/theme/source/sky.scss create mode 100644 css/theme/template/mixins.scss create mode 100644 css/theme/template/settings.scss create mode 100644 css/theme/template/theme.scss (limited to 'css/theme/serif.css') diff --git a/.gitignore b/.gitignore index 34058c4..9ffdbc7 100644 --- a/.gitignore +++ b/.gitignore @@ -3,3 +3,4 @@ log/*.log tmp/** node_modules/ +.sass-cache \ No newline at end of file diff --git a/css/reveal.css b/css/reveal.css index 358d954..9831255 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -1,6 +1,6 @@ @charset "UTF-8"; -/** +/*! * reveal.js * http://lab.hakim.se/reveal-js * MIT licensed @@ -196,7 +196,7 @@ body { display: block; position: relative; width: 90%; - margin: 10px auto; + margin: 15px auto; text-align: left; font-size: 0.55em; @@ -207,6 +207,9 @@ body { box-shadow: 0px 0px 6px rgba(0,0,0,0.3); } +.reveal pre code { + padding: 5px; +} .reveal code { font-family: monospace; diff --git a/css/theme/README.md b/css/theme/README.md new file mode 100644 index 0000000..137bdf2 --- /dev/null +++ b/css/theme/README.md @@ -0,0 +1,5 @@ +Themes are written using Sass to keep things modular and reduce the need for repeated selectors across files. Find out how to install Sass here http://sass-lang.com/, once Sass is installed run the follwing command to start monitoring the source files for changes. + +``` +sass --watch css/theme/source/:css/theme --style expanded +``` \ No newline at end of file diff --git a/css/theme/beige.css b/css/theme/beige.css index 4e7a987..6b887f3 100644 --- a/css/theme/beige.css +++ b/css/theme/beige.css @@ -1,190 +1,136 @@ -/** - * A beige theme for reveal.js presentations, similar - * to the default theme. +@import url(http://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 */ - -/********************************************* - * 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; -} - -.reveal { - font-family: 'Lato', Times, 'Times New Roman', serif; - font-size: 36px; - font-weight: 200; - letter-spacing: -0.02em; + 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; } -.reveal h1, -.reveal h2, -.reveal h3, -.reveal h4, -.reveal h5, -.reveal h6 { - font-family: 'League Gothic', Impact, sans-serif; - line-height: 0.9em; - letter-spacing: 0.02em; - - text-transform: uppercase; -} - - /********************************************* * GLOBAL STYLES *********************************************/ - body { - color: #333; - - background: #f7f3de; - background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(247,242,211,1) 100%); - background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(247,242,211,1))); - background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(247,242,211,1) 100%); - background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(247,242,211,1) 100%); - background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(247,242,211,1) 100%); - background: radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(247,242,211,1) 100%); + background: white; + 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%); } -::-moz-selection { - background:rgba(79, 64, 28, 0.99); - color: white; -} -::-webkit-selection { - background:rgba(79, 64, 28, 0.99); - color: white; +.reveal { + font-family: "Lato", Times, "Times New Roman", serif; + font-size: 36px; + font-weight: 200; + letter-spacing: -0.02em; + color: #333333; } + ::selection { - background:rgba(79, 64, 28, 0.99); - color: white; + color: white; + background: rgba(79, 64, 28, 0.99); + text-shadow: none; } - /********************************************* * HEADERS *********************************************/ - -.reveal h1, -.reveal h2, -.reveal h3, -.reveal h4, -.reveal h5, +.reveal h1, +.reveal h2, +.reveal h3, +.reveal h4, +.reveal h5, .reveal h6 { - margin: 0 0 20px 0; - color: #333; + margin: 0 0 20px 0; + color: #333333; + font-family: "League Gothic", Impact, sans-serif; + line-height: 0.9em; + letter-spacing: 0.02em; + text-transform: uppercase; + text-shadow: none; } .reveal h1 { - text-shadow: 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); + 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: #8b743d; - text-decoration: none; + color: #8b743d; + text-decoration: none; + -webkit-transition: color .15s ease; + -moz-transition: color .15s ease; + -ms-transition: color .15s ease; + -o-transition: color .15s ease; + transition: color .15s ease; +} - -webkit-transition: color .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; + text-shadow: none; + border: none; + border-radius: 2px; } - .reveal a:not(.image):hover { - text-shadow: none; - border: none; - border-radius: 2px; - } .reveal .roll span:after { - color: #fff; - background: #8b743d; + color: #fff; + background: #564826; } - /********************************************* * IMAGES *********************************************/ - .reveal section img { - margin: 30px 0 0 0; - background: rgba(255,255,255,0.12); - border: 4px solid #eee; - - -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); - -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); - 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; + margin: 15px; + 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; } - .reveal a:hover img { - background: rgba(255,255,255,0.2); - border-color: #8b743d; - - -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); - -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); - box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); - } - +.reveal a:hover img { + background: rgba(255, 255, 255, 0.2); + border-color: #8b743d; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); +} /********************************************* * NAVIGATION CONTROLS *********************************************/ - .reveal .controls a { - color: #fff; + color: #333333; } - .reveal .controls a.enabled { - color: #8b743d; - text-shadow: 0px 0px 2px hsla(185, 45%, 70%, 0.3); - } +.reveal .controls a.enabled { + color: #c0a86e; + text-shadow: 0px 0px 2px rgba(144, 207, 213, 0.3); +} /********************************************* * PROGRESS BAR *********************************************/ - .reveal .progress { - background: rgba(0,0,0,0.2); + background: rgba(0, 0, 0, 0.2); } - .reveal .progress span { - background: #8b743d; - - -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); - } - +.reveal .progress span { + background: #8b743d; + -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); + -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); + -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/default.css b/css/theme/default.css index a937b8e..d8f9299 100644 --- a/css/theme/default.css +++ b/css/theme/default.css @@ -1,181 +1,136 @@ -/** - * The default theme for reveal.js presentations. +@import url(http://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 */ - -/********************************************* - * 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; -} - -.reveal { - font-family: 'Lato', Times, 'Times New Roman', serif; - font-size: 36px; - font-weight: 200; - letter-spacing: -0.02em; + 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; } -.reveal h1, -.reveal h2, -.reveal h3, -.reveal h4, -.reveal h5, -.reveal h6 { - font-family: 'League Gothic', Impact, sans-serif; - line-height: 0.9em; - letter-spacing: 0.02em; - - text-transform: uppercase; -} - - /********************************************* * GLOBAL STYLES *********************************************/ - body { - color: #eee; + background: #555a5f; + 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-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiM1NTVhNWYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMWMxZTIwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); - background-color: #2b2b2b; - background: -moz-radial-gradient(center, ellipse cover, rgba(85,90,95,1) 0%, rgba(28,30,32,1) 100%); - background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(85,90,95,1)), color-stop(100%,rgba(28,30,32,1))); - background: -webkit-radial-gradient(center, ellipse cover, rgba(85,90,95,1) 0%,rgba(28,30,32,1) 100%); - background: -o-radial-gradient(center, ellipse cover, rgba(85,90,95,1) 0%,rgba(28,30,32,1) 100%); - background: -ms-radial-gradient(center, ellipse cover, rgba(85,90,95,1) 0%,rgba(28,30,32,1) 100%); - background: radial-gradient(center, ellipse cover, rgba(85,90,95,1) 0%,rgba(28,30,32,1) 100%); +.reveal { + font-family: "Lato", Times, "Times New Roman", serif; + font-size: 36px; + font-weight: 200; + 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 h1, +.reveal h2, +.reveal h3, +.reveal h4, +.reveal h5, .reveal h6 { - margin: 0 0 20px 0; - color: #eee; - - text-shadow: 0px 0px 6px rgba(0,0,0,0.2); + 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 #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); + 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: hsl(185, 85%, 50%); - text-decoration: none; + color: #13daec; + text-decoration: none; + -webkit-transition: color .15s ease; + -moz-transition: color .15s ease; + -ms-transition: color .15s ease; + -o-transition: color .15s ease; + transition: color .15s ease; +} - -webkit-transition: color .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; + border-radius: 2px; } - .reveal a:not(.image):hover { - color: hsl(185, 85%, 70%); - - text-shadow: none; - border: none; - border-radius: 2px; - } .reveal .roll span:after { - color: #fff; - background: hsl(185, 60%, 35%); + color: #fff; + background: #0d99a5; } - /********************************************* * IMAGES *********************************************/ - .reveal section img { - margin: 30px 0 0 0; - background: rgba(255,255,255,0.12); - border: 4px solid #eee; - - -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); - -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); - 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; + margin: 15px; + 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; - - -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); - -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); - box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); - } - +.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 a { - color: #fff; + color: #eeeeee; } - .reveal .controls a.enabled { - color: hsl(185, 85%, 70%); - text-shadow: 0px 0px 2px hsla(185, 45%, 70%, 0.3); - } +.reveal .controls a.enabled { + color: #71e9f4; + text-shadow: 0px 0px 2px rgba(144, 207, 213, 0.3); +} /********************************************* * PROGRESS BAR *********************************************/ - .reveal .progress { - background: rgba(0,0,0,0.2); + background: rgba(0, 0, 0, 0.2); } - .reveal .progress span { - background: hsl(185, 85%, 50%); - - -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); - } - +.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); +} diff --git a/css/theme/serif.css b/css/theme/serif.css index 690ff2d..b9f2406 100644 --- a/css/theme/serif.css +++ b/css/theme/serif.css @@ -1,170 +1,123 @@ -/** +/* * A simple theme for reveal.js presentations, similar - * to the default theme. The accent color is darkblue; - * do a find-replace to change it. + * to the default theme. The accent color is darkblue. * * This theme is Copyright (C) 2012 Owen Versteeg, https://github.com/StereotypicalApps. It is MIT licensed. * reveal.js is Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se; so is the theme - beige.css - that this is based off of. */ - -/********************************************* - * FONTS - *********************************************/ - -.reveal { - font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif; - font-size: 36px; - font-weight: 200; - letter-spacing: -0.02em; -} - -.reveal h1, -.reveal h2, -.reveal h3, -.reveal h4, -.reveal h5, -.reveal h6 { - font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif; - line-height: 0.9em; -} - - /********************************************* * GLOBAL STYLES *********************************************/ - body { - color: black !important; - - background: #F0F1EB; + background: #f0f1eb; } -::-moz-selection { - background: #26351C; - color: rgba(255,255,255, 0.8); -} -::-webkit-selection { - background: #26351C; - color: rgba(255,255,255, 0.8); +.reveal { + font-family: "Palatino Linotype", "Book Antiqua", Palatino, FreeSerif, serif; + font-size: 36px; + font-weight: 200; + letter-spacing: -0.02em; + color: black; } + ::selection { - background: #26351C; - color: rgba(255,255,255, 0.8); + color: white; + background: #26351c; + text-shadow: none; } /********************************************* * HEADERS *********************************************/ - -.reveal h1, -.reveal h2, -.reveal h3, -.reveal h4, -.reveal h5, +.reveal h1, +.reveal h2, +.reveal h3, +.reveal h4, +.reveal h5, .reveal h6 { - margin: 0 0 40px 0; - color: #383D3D; + margin: 0 0 20px 0; + color: #383d3d; + font-family: "Palatino Linotype", "Book Antiqua", Palatino, FreeSerif, serif; + line-height: 0.9em; + letter-spacing: 0.02em; + text-transform: none; + text-shadow: none; +} + +.reveal h1 { + text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); } /********************************************* * LINKS *********************************************/ - .reveal a:not(.image) { - color: #51483D; - text-decoration: none; - font-weight: bold; - line-height: 1.4em; - -webkit-transition: color .15s ease; - -moz-transition: color .15s ease; - -ms-transition: color .15s ease; - -o-transition: color .15s ease; - transition: color .15s ease; + 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 { - text-shadow: none; - border: none; - border-radius: 2px; - } -.reveal .roll span:after { - color: #fff; - background: #51483D; +.reveal a:not(.image):hover { + color: #8b7c69; + text-shadow: none; + border: none; + border-radius: 2px; } -/********************************************* - * MISC - *********************************************/ - -.reveal p { - line-height: 1.4em; - font-size: 1.15em; - color: #111; -} - -.reveal .subtitle { - font-style: italic; +.reveal .roll span:after { + color: #fff; + background: #25211c; } /********************************************* * IMAGES *********************************************/ - .reveal section img { - margin: 30px 0 0 0; - background: rgba(255,255,255,0.12); - border: 4px solid #eee; - - -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); - -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); - 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; + margin: 15px; + 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; } - .reveal a:hover img { - background: rgba(255,255,255,0.2); - border-color: darkblue; - - -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); - -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); - box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); - } - +.reveal a:hover img { + background: rgba(255, 255, 255, 0.2); + border-color: #51483d; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); +} /********************************************* * NAVIGATION CONTROLS *********************************************/ - .reveal .controls a { - color: black; + color: black; } - .reveal .controls a.enabled { - color: #26351C; - opacity: 1; - text-shadow: 0px 0px 2px hsla(185, 45%, 70%, 0.3); - } +.reveal .controls a.enabled { + color: #8b7c69; + text-shadow: 0px 0px 2px rgba(144, 207, 213, 0.3); +} /********************************************* * PROGRESS BAR *********************************************/ - .reveal .progress { - background: rgba(0,0,0,0.2); + background: rgba(0, 0, 0, 0.2); } - .reveal .progress span { - background: #26351C; - - -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); - } - +.reveal .progress span { + background: #51483d; + -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); + -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); + -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/simple.css b/css/theme/simple.css index 2d782ae..53d665f 100644 --- a/css/theme/simple.css +++ b/css/theme/simple.css @@ -1,163 +1,125 @@ -/** +@import url(http://fonts.googleapis.com/css?family=News+Cycle:400,700); +@import url(http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); +/* * A simple theme for reveal.js presentations, similar - * to the default theme. The accent color is darkblue; - * do a find-replace to change it. + * to the default theme. The accent color is darkblue. * * This theme is Copyright (C) 2012 Owen Versteeg, https://github.com/StereotypicalApps. It is MIT licensed. - * reveal.js is Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se; so is the theme - beige.css - that this is based off of. + * reveal.js is Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se */ - -/********************************************* - * FONTS - *********************************************/ - -@import url(http://fonts.googleapis.com/css?family=News+Cycle:400,700); - -.reveal { - font-family: 'Lato', Times, 'Times New Roman', serif; - font-size: 36px; - font-weight: 200; - letter-spacing: -0.02em; -} - -.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; - - text-transform: uppercase; -} - - /********************************************* * GLOBAL STYLES *********************************************/ - body { - color: black !important; - - background: white; + background: white; } -::-moz-selection { - background:rgba(0, 0, 0, 0.99); - color: white; -} -::-webkit-selection { - background:rgba(0, 0, 0, 0.99); - color: white; +.reveal { + font-family: "Lato", Times, "Times New Roman", serif; + font-size: 36px; + font-weight: 200; + letter-spacing: -0.02em; + color: black; } + ::selection { - background:rgba(0, 0, 0, 0.99); - color: white; + color: white; + background: rgba(0, 0, 0, 0.99); + text-shadow: none; } /********************************************* * HEADERS *********************************************/ - -.reveal h1, -.reveal h2, -.reveal h3, -.reveal h4, -.reveal h5, +.reveal h1, +.reveal h2, +.reveal h3, +.reveal h4, +.reveal h5, .reveal h6 { - margin: 0 0 20px 0; - color: black; + margin: 0 0 20px 0; + color: black; + font-family: "News Cycle", Impact, sans-serif; + line-height: 0.9em; + letter-spacing: 0.02em; + text-transform: none; + text-shadow: none; } +.reveal h1 { + text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); +} /********************************************* * LINKS *********************************************/ - .reveal a:not(.image) { - color: darkblue; - text-decoration: none; + color: darkblue; + text-decoration: none; + -webkit-transition: color .15s ease; + -moz-transition: color .15s ease; + -ms-transition: color .15s ease; + -o-transition: color .15s ease; + transition: color .15s ease; +} - -webkit-transition: color .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: #0000f1; + text-shadow: none; + border: none; + border-radius: 2px; } - .reveal a:not(.image):hover { - text-shadow: none; - border: none; - border-radius: 2px; - } .reveal .roll span:after { - color: #fff; - background: darkblue; + color: #fff; + background: #00003f; } - /********************************************* * IMAGES *********************************************/ - .reveal section img { - margin: 30px 0 0 0; - background: rgba(255,255,255,0.12); - border: 4px solid #eee; - - -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); - -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); - 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; + margin: 15px; + 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; } - .reveal a:hover img { - background: rgba(255,255,255,0.2); - border-color: darkblue; - - -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); - -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); - box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); - } - +.reveal a:hover img { + background: rgba(255, 255, 255, 0.2); + border-color: darkblue; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); +} /********************************************* * NAVIGATION CONTROLS *********************************************/ - .reveal .controls a { - color: black; + color: black; } - .reveal .controls a.enabled { - color: darkblue; - opacity: 1; - text-shadow: 0px 0px 2px hsla(185, 45%, 70%, 0.3); - } +.reveal .controls a.enabled { + color: #0000f1; + text-shadow: 0px 0px 2px rgba(144, 207, 213, 0.3); +} /********************************************* * PROGRESS BAR *********************************************/ - .reveal .progress { - background: rgba(0,0,0,0.2); + background: rgba(0, 0, 0, 0.2); } - .reveal .progress span { - background: darkblue; - - -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); - } - +.reveal .progress span { + background: darkblue; + -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/sky.css b/css/theme/sky.css index 71ebd2c..f3fb04f 100644 --- a/css/theme/sky.css +++ b/css/theme/sky.css @@ -1,174 +1,129 @@ -/** - * Sky theme for reveal.js presentations. +@import url(http://fonts.googleapis.com/css?family=Quicksand:400,700,400italic,700italic); +@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700); +/* + * Sky theme for reveal.js. * * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se */ - -/********************************************* - * FONTS - *********************************************/ - -@import url(http://fonts.googleapis.com/css?family=Quicksand:400,700,400italic,700italic); -@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700); - -.reveal { - font-family: 'Open Sans', sans-serif; - font-size: 36px; - font-weight: 200; - letter-spacing: -0.02em; -} - -.reveal h1, -.reveal h2, -.reveal h3, -.reveal h4, -.reveal h5, -.reveal h6 { - font-family: 'Quicksand', sans-serif; - line-height: 0.9em; - letter-spacing: -0.08em; - text-transform: uppercase; -} - - /********************************************* * GLOBAL STYLES *********************************************/ - body { - color: #333; - - background: #f7fbfc; - background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmN2ZiZmMiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYWRkOWU0IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); - background: -moz-radial-gradient(center, ellipse cover, #f7fbfc 0%, #add9e4 100%); - background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#f7fbfc), color-stop(100%,#add9e4)); - background: -webkit-radial-gradient(center, ellipse cover, #f7fbfc 0%,#add9e4 100%); - background: -o-radial-gradient(center, ellipse cover, #f7fbfc 0%,#add9e4 100%); - background: -ms-radial-gradient(center, ellipse cover, #f7fbfc 0%,#add9e4 100%); - background: radial-gradient(ellipse at center, #f7fbfc 0%,#add9e4 100%); + background: #f7fbfc; + background: -moz-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%); + background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #f7fbfc), color-stop(100%, #add9e4)); + background: -webkit-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%); + background: -o-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%); + background: -ms-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%); + background: radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%); } -::-moz-selection { - background: #134674; - color: white; -} -::-webkit-selection { - background: #134674; - color: white; +.reveal { + font-family: "Open Sans", sans-serif; + font-size: 36px; + font-weight: 200; + letter-spacing: -0.02em; + color: #333333; } + ::selection { - background: #134674; - color: white; + color: white; + background: #134674; + text-shadow: none; } - /********************************************* * HEADERS *********************************************/ - -.reveal h1, -.reveal h2, -.reveal h3, -.reveal h4, -.reveal h5, +.reveal h1, +.reveal h2, +.reveal h3, +.reveal h4, +.reveal h5, .reveal h6 { - margin: 0 0 20px 0; - color: #333; + margin: 0 0 20px 0; + color: #333333; + font-family: "Quicksand", sans-serif; + line-height: 0.9em; + letter-spacing: -0.08em; + text-transform: uppercase; + text-shadow: none; } +.reveal h1 { + text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); +} /********************************************* * LINKS *********************************************/ - .reveal a:not(.image) { - color: #3b759e; - text-decoration: none; + color: #3b759e; + text-decoration: none; + -webkit-transition: color .15s ease; + -moz-transition: color .15s ease; + -ms-transition: color .15s ease; + -o-transition: color .15s ease; + transition: color .15s ease; +} - -webkit-transition: color .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; + text-shadow: none; + border: none; + border-radius: 2px; } - .reveal a:not(.image):hover { - text-shadow: none; - border: none; - border-radius: 2px; - } .reveal .roll span:after { - color: #fff; - background: #3b759e; + color: #fff; + background: #264c66; } - /********************************************* - * MISC + * IMAGES *********************************************/ - .reveal section img { - margin: 30px 0 0 0; - background: rgba(255,255,255,0.12); - border: 1px solid #ddd; - - -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); - -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); - 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; + margin: 15px; + 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; } - .reveal a:hover img { - background: rgba(255,255,255,0.2); - border-color: #3b759e; - - -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); - -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); - box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); - } - -.reveal blockquote { - background: rgba(255, 255, 255, 0.4); +.reveal a:hover img { + background: rgba(255, 255, 255, 0.2); + border-color: #3b759e; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); } -.reveal p { - margin-bottom: 20px; -} - - /********************************************* * NAVIGATION CONTROLS *********************************************/ - .reveal .controls a { - color: #fff; + color: #333333; } - .reveal .controls a.enabled { - color: #3b759e; - text-shadow: 0px 0px 2px hsla(185, 45%, 70%, 0.3); - } +.reveal .controls a.enabled { + color: #74a7cb; + text-shadow: 0px 0px 2px rgba(144, 207, 213, 0.3); +} /********************************************* * PROGRESS BAR *********************************************/ - .reveal .progress { - background: rgba(0,0,0,0.2); + background: rgba(0, 0, 0, 0.2); } - .reveal .progress span { - background: #3b759e; - - -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); - } - +.reveal .progress span { + background: #3b759e; + -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); + -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); + -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 new file mode 100644 index 0000000..177216f --- /dev/null +++ b/css/theme/source/beige.scss @@ -0,0 +1,50 @@ +/** + * Beige 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(http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); + + +// Override theme settings (see ../template/settings.scss) +$mainColor: #333; +$headingColor: #333; +$headingTextShadow: none; +$backgroundColor: #f7f3de; +$linkColor: #8b743d; +$linkColorHover: lighten( $linkColor, 20% ); +$selectionBackgroundColor: rgba(79, 64, 28, 0.99); +$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(247,242,211,1), rgba(255,255,255,1) ); +} + + + +// Theme template ------------------------------ +@import "../template/theme"; +// --------------------------------------------- \ No newline at end of file diff --git a/css/theme/source/default.scss b/css/theme/source/default.scss new file mode 100644 index 0000000..da9b268 --- /dev/null +++ b/css/theme/source/default.scss @@ -0,0 +1,42 @@ +/** + * 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(http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); + +// Override theme settings (see ../template/settings.scss) +$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/serif.scss b/css/theme/source/serif.scss new file mode 100644 index 0000000..dc0935f --- /dev/null +++ b/css/theme/source/serif.scss @@ -0,0 +1,33 @@ +/** + * A simple theme for reveal.js presentations, similar + * to the default theme. The accent color is darkblue. + * + * This theme is Copyright (C) 2012 Owen Versteeg, https://github.com/StereotypicalApps. It is MIT licensed. + * reveal.js is Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se; so is the theme - beige.css - that this is based off of. + */ + + +// Default mixins and settings ----------------- +@import "../template/mixins"; +@import "../template/settings"; +// --------------------------------------------- + + + +// Override theme settings (see ../template/settings.scss) +$mainFont: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif; +$mainColor: #000; +$headingFont: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif; +$headingColor: #383D3D; +$headingTextShadow: none; +$headingTextTransform: none; +$backgroundColor: #F0F1EB; +$linkColor: #51483D; +$linkColorHover: lighten( $linkColor, 20% ); +$selectionBackgroundColor: #26351C; + + + +// Theme template ------------------------------ +@import "../template/theme"; +// --------------------------------------------- \ No newline at end of file diff --git a/css/theme/source/simple.scss b/css/theme/source/simple.scss new file mode 100644 index 0000000..713ab44 --- /dev/null +++ b/css/theme/source/simple.scss @@ -0,0 +1,38 @@ +/** + * A simple theme for reveal.js presentations, similar + * to the default theme. The accent color is darkblue. + * + * This theme is Copyright (C) 2012 Owen Versteeg, https://github.com/StereotypicalApps. It is MIT licensed. + * reveal.js is Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se + */ + + +// Default mixins and settings ----------------- +@import "../template/mixins"; +@import "../template/settings"; +// --------------------------------------------- + + + +// Include theme-specific fonts +@import url(http://fonts.googleapis.com/css?family=News+Cycle:400,700); +@import url(http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); + + +// Override theme settings (see ../template/settings.scss) +$mainFont: 'Lato', Times, 'Times New Roman', serif; +$mainColor: #000; +$headingFont: 'News Cycle', Impact, sans-serif; +$headingColor: #000; +$headingTextShadow: none; +$headingTextTransform: none; +$backgroundColor: #fff; +$linkColor: #00008B; +$linkColorHover: lighten( $linkColor, 20% ); +$selectionBackgroundColor: rgba(0, 0, 0, 0.99); + + + +// Theme template ------------------------------ +@import "../template/theme"; +// --------------------------------------------- \ No newline at end of file diff --git a/css/theme/source/sky.scss b/css/theme/source/sky.scss new file mode 100644 index 0000000..77fd230 --- /dev/null +++ b/css/theme/source/sky.scss @@ -0,0 +1,41 @@ +/** + * Sky 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 +@import url(http://fonts.googleapis.com/css?family=Quicksand:400,700,400italic,700italic); +@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700); + + +// Override theme settings (see ../template/settings.scss) +$mainFont: 'Open Sans', sans-serif; +$mainColor: #333; +$headingFont: 'Quicksand', sans-serif; +$headingColor: #333; +$headingLetterSpacing: -0.08em; +$headingTextShadow: none; +$backgroundColor: #f7fbfc; +$linkColor: #3b759e; +$linkColorHover: lighten( $linkColor, 20% ); +$selectionBackgroundColor: #134674; + +// Background generator +@mixin bodyBackground() { + @include radial-gradient( #add9e4, #f7fbfc ); +} + + + +// Theme template ------------------------------ +@import "../template/theme"; +// --------------------------------------------- \ No newline at end of file diff --git a/css/theme/template/mixins.scss b/css/theme/template/mixins.scss new file mode 100644 index 0000000..bc82419 --- /dev/null +++ b/css/theme/template/mixins.scss @@ -0,0 +1,29 @@ +@mixin vertical-gradient( $top, $bottom ) { + background: $top; + background: -moz-linear-gradient( top, $top 0%, $bottom 100% ); + background: -webkit-gradient( linear, left top, left bottom, color-stop(0%,$top), color-stop(100%,$bottom) ); + background: -webkit-linear-gradient( top, $top 0%, $bottom 100% ); + background: -o-linear-gradient( top, $top 0%, $bottom 100% ); + background: -ms-linear-gradient( top, $top 0%, $bottom 100% ); + background: linear-gradient( top, $top 0%, $bottom 100% ); +} + +@mixin horizontal-gradient( $top, $bottom ) { + background: $top; + background: -moz-linear-gradient( left, $top 0%, $bottom 100% ); + background: -webkit-gradient( linear, left top, right top, color-stop(0%,$top), color-stop(100%,$bottom) ); + background: -webkit-linear-gradient( left, $top 0%, $bottom 100% ); + background: -o-linear-gradient( left, $top 0%, $bottom 100% ); + background: -ms-linear-gradient( left, $top 0%, $bottom 100% ); + background: linear-gradient( left, $top 0%, $bottom 100% ); +} + +@mixin radial-gradient( $outer, $inner, $type: circle ) { + background: $inner; + background: -moz-radial-gradient( center, $type cover, $inner 0%, $outer 100% ); + background: -webkit-gradient( radial, center center, 0px, center center, 100%, color-stop(0%,$inner), color-stop(100%,$outer) ); + background: -webkit-radial-gradient( center, $type cover, $inner 0%, $outer 100% ); + background: -o-radial-gradient( center, $type cover, $inner 0%, $outer 100% ); + background: -ms-radial-gradient( center, $type cover, $inner 0%, $outer 100% ); + background: radial-gradient( center, $type cover, $inner 0%, $outer 100% ); +} \ No newline at end of file diff --git a/css/theme/template/settings.scss b/css/theme/template/settings.scss new file mode 100644 index 0000000..bc9f138 --- /dev/null +++ b/css/theme/template/settings.scss @@ -0,0 +1,33 @@ +// Base settings for all themes that can optionally be +// overridden by the super-theme + +// Background of the presentation +$backgroundColor: #2b2b2b; + +// Primary/body text +$mainFont: 'Lato', Times, 'Times New Roman', serif; +$mainFontSize: 36px; +$mainColor: #eee; + +// Headings +$headingFont: 'League Gothic', Impact, sans-serif; +$headingColor: #eee; +$headingLineHeight: 0.9em; +$headingLetterSpacing: 0.02em; +$headingTextTransform: uppercase; +$headingTextShadow: 0px 0px 6px rgba(0,0,0,0.2); +$heading1TextShadow: $headingTextShadow; + +// Links and actions +$linkColor: #13DAEC; +$linkColorHover: lighten( $linkColor, 20% ); + +// Text selection +$selectionBackgroundColor: #FF5E99; +$selectionColor: #fff; + +// Generates the presentation background, can be overridden +// to return a background image or gradient +@mixin bodyBackground() { + background: $backgroundColor; +} \ No newline at end of file diff --git a/css/theme/template/theme.scss b/css/theme/template/theme.scss new file mode 100644 index 0000000..353a98c --- /dev/null +++ b/css/theme/template/theme.scss @@ -0,0 +1,135 @@ +// Base theme template for reveal.js + +/********************************************* + * GLOBAL STYLES + *********************************************/ + +body { + @include bodyBackground(); +} + +.reveal { + font-family: $mainFont; + font-size: $mainFontSize; + font-weight: 200; + letter-spacing: -0.02em; + color: $mainColor; +} + +::selection { + color: $selectionColor; + background: $selectionBackgroundColor; + text-shadow: none; +} + +/********************************************* + * HEADERS + *********************************************/ + +.reveal h1, +.reveal h2, +.reveal h3, +.reveal h4, +.reveal h5, +.reveal h6 { + margin: 0 0 20px 0; + color: $headingColor; + + font-family: $headingFont; + line-height: $headingLineHeight; + letter-spacing: $headingLetterSpacing; + + text-transform: $headingTextTransform; + text-shadow: $headingTextShadow; +} + +.reveal h1 { + text-shadow: $heading1TextShadow; +} + + +/********************************************* + * LINKS + *********************************************/ + +.reveal a:not(.image) { + 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 { + color: $linkColorHover; + + text-shadow: none; + border: none; + border-radius: 2px; + } + +.reveal .roll span:after { + color: #fff; + background: darken( $linkColor, 15% ); +} + + +/********************************************* + * IMAGES + *********************************************/ + +.reveal section img { + margin: 15px; + background: rgba(255,255,255,0.12); + 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:hover img { + background: rgba(255,255,255,0.2); + border-color: $linkColor; + + box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); + } + + +/********************************************* + * NAVIGATION CONTROLS + *********************************************/ + +.reveal .controls a { + color: $mainColor; +} + .reveal .controls a.enabled { + color: $linkColorHover; + text-shadow: 0px 0px 2px hsla(185, 45%, 70%, 0.3); + } + + +/********************************************* + * PROGRESS BAR + *********************************************/ + +.reveal .progress { + background: rgba(0,0,0,0.2); +} + .reveal .progress span { + background: $linkColor; + + -webkit-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + -moz-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + -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/index.html b/index.html index 3ea2412..2becf4f 100644 --- a/index.html +++ b/index.html @@ -12,8 +12,6 @@ - - @@ -328,7 +326,7 @@ function linkify( selector ) { diff --git a/js/reveal.js b/js/reveal.js index c2769e5..b08580b 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -664,6 +664,8 @@ var Reveal = (function(){ updateControls(); + // Update the URL hash after a delay since updating it mid-transition + // is likely to cause visual lag clearTimeout( writeURLTimeout ); writeURLTimeout = setTimeout( writeURL, 1500 ); -- cgit v1.2.3 From 143fc85c657a4953d3f3b878b845cc60efbed748 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Sat, 20 Oct 2012 21:43:42 -0400 Subject: use outer color of radial gradient as solid fallback --- css/theme/beige.css | 4 ++-- css/theme/default.css | 4 ++-- css/theme/serif.css | 2 +- css/theme/simple.css | 2 +- css/theme/sky.css | 4 ++-- css/theme/template/mixins.scss | 2 +- 6 files changed, 9 insertions(+), 9 deletions(-) (limited to 'css/theme/serif.css') diff --git a/css/theme/beige.css b/css/theme/beige.css index 6b887f3..e1e635a 100644 --- a/css/theme/beige.css +++ b/css/theme/beige.css @@ -1,5 +1,5 @@ @import url(http://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 @@ -16,7 +16,7 @@ * GLOBAL STYLES *********************************************/ body { - background: white; + 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%); diff --git a/css/theme/default.css b/css/theme/default.css index d8f9299..3fe7a2a 100644 --- a/css/theme/default.css +++ b/css/theme/default.css @@ -1,5 +1,5 @@ @import url(http://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 @@ -16,7 +16,7 @@ * GLOBAL STYLES *********************************************/ body { - background: #555a5f; + 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%); diff --git a/css/theme/serif.css b/css/theme/serif.css index b9f2406..78ed931 100644 --- a/css/theme/serif.css +++ b/css/theme/serif.css @@ -1,4 +1,4 @@ -/* +/** * A simple theme for reveal.js presentations, similar * to the default theme. The accent color is darkblue. * diff --git a/css/theme/simple.css b/css/theme/simple.css index 53d665f..663c09a 100644 --- a/css/theme/simple.css +++ b/css/theme/simple.css @@ -1,6 +1,6 @@ @import url(http://fonts.googleapis.com/css?family=News+Cycle:400,700); @import url(http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); -/* +/** * A simple theme for reveal.js presentations, similar * to the default theme. The accent color is darkblue. * diff --git a/css/theme/sky.css b/css/theme/sky.css index f3fb04f..cd0be94 100644 --- a/css/theme/sky.css +++ b/css/theme/sky.css @@ -1,6 +1,6 @@ @import url(http://fonts.googleapis.com/css?family=Quicksand:400,700,400italic,700italic); @import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700); -/* +/** * Sky theme for reveal.js. * * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se @@ -9,7 +9,7 @@ * GLOBAL STYLES *********************************************/ body { - background: #f7fbfc; + background: #add9e4; background: -moz-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #f7fbfc), color-stop(100%, #add9e4)); background: -webkit-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%); diff --git a/css/theme/template/mixins.scss b/css/theme/template/mixins.scss index bc82419..e0c5606 100644 --- a/css/theme/template/mixins.scss +++ b/css/theme/template/mixins.scss @@ -19,7 +19,7 @@ } @mixin radial-gradient( $outer, $inner, $type: circle ) { - background: $inner; + background: $outer; background: -moz-radial-gradient( center, $type cover, $inner 0%, $outer 100% ); background: -webkit-gradient( radial, center center, 0px, center center, 100%, color-stop(0%,$inner), color-stop(100%,$outer) ); background: -webkit-radial-gradient( center, $type cover, $inner 0%, $outer 100% ); -- cgit v1.2.3 From 7f4e5fc6bf0fa4c7ef121d707d385ee89128a441 Mon Sep 17 00:00:00 2001 From: Russell Beattie Date: Mon, 22 Oct 2012 19:34:31 -0700 Subject: Updated new CSS triangle controls to use theme colors. --- css/theme/beige.css | 33 ++++++++++++++++++++++++++++----- css/theme/default.css | 33 ++++++++++++++++++++++++++++----- css/theme/serif.css | 33 ++++++++++++++++++++++++++++----- css/theme/simple.css | 33 ++++++++++++++++++++++++++++----- css/theme/sky.css | 33 ++++++++++++++++++++++++++++----- css/theme/template/theme.scss | 36 ++++++++++++++++++++++++++++++------ 6 files changed, 170 insertions(+), 31 deletions(-) (limited to 'css/theme/serif.css') diff --git a/css/theme/beige.css b/css/theme/beige.css index e1e635a..6d2eea9 100644 --- a/css/theme/beige.css +++ b/css/theme/beige.css @@ -110,13 +110,36 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls a { - color: #333333; +.reveal .controls div.left { + border-right-color: #333333; } -.reveal .controls a.enabled { - color: #c0a86e; - text-shadow: 0px 0px 2px rgba(144, 207, 213, 0.3); +.reveal .controls div.right { + border-left-color: #333333; +} + +.reveal .controls div.up { + border-bottom-color: #333333; +} + +.reveal .controls div.down { + border-top-color: #333333; +} + +.reveal .controls div.left.enabled { + border-right-color: #c0a86e; +} + +.reveal .controls div.right.enabled { + border-left-color: #c0a86e; +} + +.reveal .controls div.up.enabled { + border-bottom-color: #c0a86e; +} + +.reveal .controls div.down.enabled { + border-top-color: #c0a86e; } /********************************************* diff --git a/css/theme/default.css b/css/theme/default.css index 3fe7a2a..0b393c2 100644 --- a/css/theme/default.css +++ b/css/theme/default.css @@ -110,13 +110,36 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls a { - color: #eeeeee; +.reveal .controls div.left { + border-right-color: #eeeeee; } -.reveal .controls a.enabled { - color: #71e9f4; - text-shadow: 0px 0px 2px rgba(144, 207, 213, 0.3); +.reveal .controls div.right { + border-left-color: #eeeeee; +} + +.reveal .controls div.up { + border-bottom-color: #eeeeee; +} + +.reveal .controls div.down { + border-top-color: #eeeeee; +} + +.reveal .controls div.left.enabled { + border-right-color: #71e9f4; +} + +.reveal .controls div.right.enabled { + border-left-color: #71e9f4; +} + +.reveal .controls div.up.enabled { + border-bottom-color: #71e9f4; +} + +.reveal .controls div.down.enabled { + border-top-color: #71e9f4; } /********************************************* diff --git a/css/theme/serif.css b/css/theme/serif.css index 78ed931..55a6b3a 100644 --- a/css/theme/serif.css +++ b/css/theme/serif.css @@ -97,13 +97,36 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls a { - color: black; +.reveal .controls div.left { + border-right-color: black; } -.reveal .controls a.enabled { - color: #8b7c69; - text-shadow: 0px 0px 2px rgba(144, 207, 213, 0.3); +.reveal .controls div.right { + border-left-color: black; +} + +.reveal .controls div.up { + border-bottom-color: black; +} + +.reveal .controls div.down { + border-top-color: black; +} + +.reveal .controls div.left.enabled { + border-right-color: #8b7c69; +} + +.reveal .controls div.right.enabled { + border-left-color: #8b7c69; +} + +.reveal .controls div.up.enabled { + border-bottom-color: #8b7c69; +} + +.reveal .controls div.down.enabled { + border-top-color: #8b7c69; } /********************************************* diff --git a/css/theme/simple.css b/css/theme/simple.css index 663c09a..8fb23c4 100644 --- a/css/theme/simple.css +++ b/css/theme/simple.css @@ -99,13 +99,36 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls a { - color: black; +.reveal .controls div.left { + border-right-color: black; } -.reveal .controls a.enabled { - color: #0000f1; - text-shadow: 0px 0px 2px rgba(144, 207, 213, 0.3); +.reveal .controls div.right { + border-left-color: black; +} + +.reveal .controls div.up { + border-bottom-color: black; +} + +.reveal .controls div.down { + border-top-color: black; +} + +.reveal .controls div.left.enabled { + border-right-color: #0000f1; +} + +.reveal .controls div.right.enabled { + border-left-color: #0000f1; +} + +.reveal .controls div.up.enabled { + border-bottom-color: #0000f1; +} + +.reveal .controls div.down.enabled { + border-top-color: #0000f1; } /********************************************* diff --git a/css/theme/sky.css b/css/theme/sky.css index cd0be94..d68fc8b 100644 --- a/css/theme/sky.css +++ b/css/theme/sky.css @@ -103,13 +103,36 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls a { - color: #333333; +.reveal .controls div.left { + border-right-color: #333333; } -.reveal .controls a.enabled { - color: #74a7cb; - text-shadow: 0px 0px 2px rgba(144, 207, 213, 0.3); +.reveal .controls div.right { + border-left-color: #333333; +} + +.reveal .controls div.up { + border-bottom-color: #333333; +} + +.reveal .controls div.down { + border-top-color: #333333; +} + +.reveal .controls div.left.enabled { + border-right-color: #74a7cb; +} + +.reveal .controls div.right.enabled { + border-left-color: #74a7cb; +} + +.reveal .controls div.up.enabled { + border-bottom-color: #74a7cb; +} + +.reveal .controls div.down.enabled { + border-top-color: #74a7cb; } /********************************************* diff --git a/css/theme/template/theme.scss b/css/theme/template/theme.scss index 353a98c..9c22ecb 100644 --- a/css/theme/template/theme.scss +++ b/css/theme/template/theme.scss @@ -106,13 +106,37 @@ body { * NAVIGATION CONTROLS *********************************************/ -.reveal .controls a { - color: $mainColor; +.reveal .controls div.left { + border-right-color: $mainColor; +} + +.reveal .controls div.right { + border-left-color: $mainColor; +} + +.reveal .controls div.up { + border-bottom-color: $mainColor; +} + +.reveal .controls div.down { + border-top-color: $mainColor; +} + +.reveal .controls div.left.enabled { + border-right-color: $linkColorHover; +} + +.reveal .controls div.right.enabled { + border-left-color: $linkColorHover; +} + +.reveal .controls div.up.enabled { + border-bottom-color: $linkColorHover; +} + +.reveal .controls div.down.enabled { + border-top-color: $linkColorHover; } - .reveal .controls a.enabled { - color: $linkColorHover; - text-shadow: 0px 0px 2px hsla(185, 45%, 70%, 0.3); - } /********************************************* -- cgit v1.2.3 From aefe981040ea8c5c7875d9da1ac860def44a19e8 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Mon, 22 Oct 2012 23:16:14 -0400 Subject: use borders to generate control arrows (closes #137) --- css/reveal.css | 27 +++++++++++++++++++-------- css/theme/beige.css | 28 ++++++++++++++++------------ css/theme/default.css | 28 ++++++++++++++++------------ css/theme/serif.css | 28 ++++++++++++++++------------ css/theme/simple.css | 28 ++++++++++++++++------------ css/theme/sky.css | 28 ++++++++++++++++------------ css/theme/template/theme.scss | 28 ++++++++++++++++------------ js/reveal.min.js | 7 +++---- 8 files changed, 118 insertions(+), 84 deletions(-) (limited to 'css/theme/serif.css') diff --git a/css/reveal.css b/css/reveal.css index ce4765f..b39ea13 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -316,8 +316,8 @@ body { .reveal .controls { display: none; position: fixed; - width: 90px; - height: 90px; + width: 110px; + height: 110px; z-index: 30; right: 10px; bottom: 10px; @@ -329,10 +329,17 @@ body { width: 0; height: 0; border: 12px solid transparent; + + -webkit-transition: opacity 0.2s ease; + -moz-transition: opacity 0.2s ease; + -ms-transition: opacity 0.2s ease; + -o-transition: opacity 0.2s ease; + transition: opacity 0.2s ease; } .reveal .controls div.enabled { opacity: 0.6; + cursor: pointer; } .reveal .controls div.enabled:active { @@ -340,28 +347,32 @@ body { } .reveal .controls div.left { - top: 30px; + top: 42px; + border-right-width: 22px; border-right-color: #eee; } .reveal .controls div.right { - left: 60px; - top: 30px; + left: 74px; + top: 42px; + border-left-width: 22px; border-left-color: #eee; } .reveal .controls div.up { - left: 30px; + left: 42px; + border-bottom-width: 22px; border-bottom-color: #eee; } .reveal .controls div.down { - left: 30px; - top: 60px; + left: 42px; + top: 74px; + border-top-width: 22px; border-top-color: #eee; } diff --git a/css/theme/beige.css b/css/theme/beige.css index 6d2eea9..fe0e460 100644 --- a/css/theme/beige.css +++ b/css/theme/beige.css @@ -110,35 +110,39 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.left { - border-right-color: #333333; +.reveal .controls div.left, +.reveal .controls div.left.enabled { + border-right-color: #8b743d; } -.reveal .controls div.right { - border-left-color: #333333; +.reveal .controls div.right, +.reveal .controls div.right.enabled { + border-left-color: #8b743d; } -.reveal .controls div.up { - border-bottom-color: #333333; +.reveal .controls div.up, +.reveal .controls div.up.enabled { + border-bottom-color: #8b743d; } -.reveal .controls div.down { - border-top-color: #333333; +.reveal .controls div.down, +.reveal .controls div.down.enabled { + border-top-color: #8b743d; } -.reveal .controls div.left.enabled { +.reveal .controls div.left.enabled:hover { border-right-color: #c0a86e; } -.reveal .controls div.right.enabled { +.reveal .controls div.right.enabled:hover { border-left-color: #c0a86e; } -.reveal .controls div.up.enabled { +.reveal .controls div.up.enabled:hover { border-bottom-color: #c0a86e; } -.reveal .controls div.down.enabled { +.reveal .controls div.down.enabled:hover { border-top-color: #c0a86e; } diff --git a/css/theme/default.css b/css/theme/default.css index 0b393c2..563e4d9 100644 --- a/css/theme/default.css +++ b/css/theme/default.css @@ -110,35 +110,39 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.left { - border-right-color: #eeeeee; +.reveal .controls div.left, +.reveal .controls div.left.enabled { + border-right-color: #13daec; } -.reveal .controls div.right { - border-left-color: #eeeeee; +.reveal .controls div.right, +.reveal .controls div.right.enabled { + border-left-color: #13daec; } -.reveal .controls div.up { - border-bottom-color: #eeeeee; +.reveal .controls div.up, +.reveal .controls div.up.enabled { + border-bottom-color: #13daec; } -.reveal .controls div.down { - border-top-color: #eeeeee; +.reveal .controls div.down, +.reveal .controls div.down.enabled { + border-top-color: #13daec; } -.reveal .controls div.left.enabled { +.reveal .controls div.left.enabled:hover { border-right-color: #71e9f4; } -.reveal .controls div.right.enabled { +.reveal .controls div.right.enabled:hover { border-left-color: #71e9f4; } -.reveal .controls div.up.enabled { +.reveal .controls div.up.enabled:hover { border-bottom-color: #71e9f4; } -.reveal .controls div.down.enabled { +.reveal .controls div.down.enabled:hover { border-top-color: #71e9f4; } diff --git a/css/theme/serif.css b/css/theme/serif.css index 55a6b3a..3957b5d 100644 --- a/css/theme/serif.css +++ b/css/theme/serif.css @@ -97,35 +97,39 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.left { - border-right-color: black; +.reveal .controls div.left, +.reveal .controls div.left.enabled { + border-right-color: #51483d; } -.reveal .controls div.right { - border-left-color: black; +.reveal .controls div.right, +.reveal .controls div.right.enabled { + border-left-color: #51483d; } -.reveal .controls div.up { - border-bottom-color: black; +.reveal .controls div.up, +.reveal .controls div.up.enabled { + border-bottom-color: #51483d; } -.reveal .controls div.down { - border-top-color: black; +.reveal .controls div.down, +.reveal .controls div.down.enabled { + border-top-color: #51483d; } -.reveal .controls div.left.enabled { +.reveal .controls div.left.enabled:hover { border-right-color: #8b7c69; } -.reveal .controls div.right.enabled { +.reveal .controls div.right.enabled:hover { border-left-color: #8b7c69; } -.reveal .controls div.up.enabled { +.reveal .controls div.up.enabled:hover { border-bottom-color: #8b7c69; } -.reveal .controls div.down.enabled { +.reveal .controls div.down.enabled:hover { border-top-color: #8b7c69; } diff --git a/css/theme/simple.css b/css/theme/simple.css index 8fb23c4..926bbc5 100644 --- a/css/theme/simple.css +++ b/css/theme/simple.css @@ -99,35 +99,39 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.left { - border-right-color: black; +.reveal .controls div.left, +.reveal .controls div.left.enabled { + border-right-color: darkblue; } -.reveal .controls div.right { - border-left-color: black; +.reveal .controls div.right, +.reveal .controls div.right.enabled { + border-left-color: darkblue; } -.reveal .controls div.up { - border-bottom-color: black; +.reveal .controls div.up, +.reveal .controls div.up.enabled { + border-bottom-color: darkblue; } -.reveal .controls div.down { - border-top-color: black; +.reveal .controls div.down, +.reveal .controls div.down.enabled { + border-top-color: darkblue; } -.reveal .controls div.left.enabled { +.reveal .controls div.left.enabled:hover { border-right-color: #0000f1; } -.reveal .controls div.right.enabled { +.reveal .controls div.right.enabled:hover { border-left-color: #0000f1; } -.reveal .controls div.up.enabled { +.reveal .controls div.up.enabled:hover { border-bottom-color: #0000f1; } -.reveal .controls div.down.enabled { +.reveal .controls div.down.enabled:hover { border-top-color: #0000f1; } diff --git a/css/theme/sky.css b/css/theme/sky.css index d68fc8b..6618c0d 100644 --- a/css/theme/sky.css +++ b/css/theme/sky.css @@ -103,35 +103,39 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.left { - border-right-color: #333333; +.reveal .controls div.left, +.reveal .controls div.left.enabled { + border-right-color: #3b759e; } -.reveal .controls div.right { - border-left-color: #333333; +.reveal .controls div.right, +.reveal .controls div.right.enabled { + border-left-color: #3b759e; } -.reveal .controls div.up { - border-bottom-color: #333333; +.reveal .controls div.up, +.reveal .controls div.up.enabled { + border-bottom-color: #3b759e; } -.reveal .controls div.down { - border-top-color: #333333; +.reveal .controls div.down, +.reveal .controls div.down.enabled { + border-top-color: #3b759e; } -.reveal .controls div.left.enabled { +.reveal .controls div.left.enabled:hover { border-right-color: #74a7cb; } -.reveal .controls div.right.enabled { +.reveal .controls div.right.enabled:hover { border-left-color: #74a7cb; } -.reveal .controls div.up.enabled { +.reveal .controls div.up.enabled:hover { border-bottom-color: #74a7cb; } -.reveal .controls div.down.enabled { +.reveal .controls div.down.enabled:hover { border-top-color: #74a7cb; } diff --git a/css/theme/template/theme.scss b/css/theme/template/theme.scss index 9c22ecb..600c8e3 100644 --- a/css/theme/template/theme.scss +++ b/css/theme/template/theme.scss @@ -106,35 +106,39 @@ body { * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.left { - border-right-color: $mainColor; +.reveal .controls div.left, +.reveal .controls div.left.enabled { + border-right-color: $linkColor; } -.reveal .controls div.right { - border-left-color: $mainColor; +.reveal .controls div.right, +.reveal .controls div.right.enabled { + border-left-color: $linkColor; } -.reveal .controls div.up { - border-bottom-color: $mainColor; +.reveal .controls div.up, +.reveal .controls div.up.enabled { + border-bottom-color: $linkColor; } -.reveal .controls div.down { - border-top-color: $mainColor; +.reveal .controls div.down, +.reveal .controls div.down.enabled { + border-top-color: $linkColor; } -.reveal .controls div.left.enabled { +.reveal .controls div.left.enabled:hover { border-right-color: $linkColorHover; } -.reveal .controls div.right.enabled { +.reveal .controls div.right.enabled:hover { border-left-color: $linkColorHover; } -.reveal .controls div.up.enabled { +.reveal .controls div.up.enabled:hover { border-bottom-color: $linkColorHover; } -.reveal .controls div.down.enabled { +.reveal .controls div.down.enabled:hover { border-top-color: $linkColorHover; } diff --git a/js/reveal.min.js b/js/reveal.min.js index 7fb4f9a..278d5e8 100644 --- a/js/reveal.min.js +++ b/js/reveal.min.js @@ -9,10 +9,9 @@ var Reveal=(function(){var l=".reveal .slides>section",b=".reveal .slides>sectio function i(al){if((!n&&!T)){document.body.setAttribute("class","no-transforms");return;}t(R,al);d();V();}function P(){f.theme=document.querySelector("#theme"); f.wrapper=document.querySelector(".reveal");if(!f.wrapper.querySelector(".progress")&&R.progress){var ao=document.createElement("div");ao.classList.add("progress"); ao.innerHTML="";f.wrapper.appendChild(ao);}if(!f.wrapper.querySelector(".controls")&&R.controls){var an=document.createElement("aside");an.classList.add("controls"); -an.innerHTML='◄►▲▼'; -f.wrapper.appendChild(an);}if(!f.wrapper.querySelector(".state-background")){var am=document.createElement("div");am.classList.add("state-background"); -f.wrapper.appendChild(am);}if(!f.wrapper.querySelector(".pause-overlay")){var al=document.createElement("div");al.classList.add("pause-overlay");f.wrapper.appendChild(al); -}f.progress=document.querySelector(".reveal .progress");f.progressbar=document.querySelector(".reveal .progress span");if(R.controls){f.controls=document.querySelector(".reveal .controls"); +an.innerHTML='
';f.wrapper.appendChild(an);}if(!f.wrapper.querySelector(".state-background")){var am=document.createElement("div"); +am.classList.add("state-background");f.wrapper.appendChild(am);}if(!f.wrapper.querySelector(".pause-overlay")){var al=document.createElement("div");al.classList.add("pause-overlay"); +f.wrapper.appendChild(al);}f.progress=document.querySelector(".reveal .progress");f.progressbar=document.querySelector(".reveal .progress span");if(R.controls){f.controls=document.querySelector(".reveal .controls"); f.controlsLeft=document.querySelector(".reveal .controls .left");f.controlsRight=document.querySelector(".reveal .controls .right");f.controlsUp=document.querySelector(".reveal .controls .up"); f.controlsDown=document.querySelector(".reveal .controls .down");}}function d(){if(navigator.userAgent.match(/(iphone|ipod|android)/i)){document.documentElement.style.overflow="scroll"; document.body.style.height="120%";window.addEventListener("load",ad,false);window.addEventListener("orientationchange",ad,false);}}function V(){var am=[],aq=[]; -- cgit v1.2.3 From af2a8b053d27ed5c97256d29ab4f06a6bcece6b7 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Sun, 28 Oct 2012 19:32:24 -0400 Subject: include theme background in printed pdfs (#217), fix empty white pages in regular print (#215) --- css/print/paper.css | 57 +++++++++++++++++++++++-------------------- css/print/pdf.css | 53 +++++++++++++++++++--------------------- css/theme/beige.css | 1 + css/theme/default.css | 1 + css/theme/serif.css | 1 + css/theme/simple.css | 1 + css/theme/sky.css | 1 + css/theme/template/theme.scss | 1 + 8 files changed, 61 insertions(+), 55 deletions(-) (limited to 'css/theme/serif.css') diff --git a/css/print/paper.css b/css/print/paper.css index 0ac5597..61fa0a9 100644 --- a/css/print/paper.css +++ b/css/print/paper.css @@ -31,19 +31,19 @@ html { /* SECTION 2: Remove any elements not needed in print. This would include navigation, ads, sidebars, etc. */ .nestedarrow, -.controls a, +.controls, .reveal .progress, .reveal.overview, .fork-reveal, .share-reveal, .state-background { - display:none; + display: none !important; } /* SECTION 3: Set body font face, size, and color. Consider using a serif font for readability. */ body, p, td, li, div, a { - font-size: 13pt; + font-size: 16pt!important; font-family: Georgia, "Times New Roman", Times, serif !important; color: #000; } @@ -77,12 +77,14 @@ a:visited { font-weight: bold; text-decoration: underline; } +/* .reveal a:link:after, .reveal a:visited:after { content: " (" attr(href) ") "; color: #222 !important; font-size: 90%; } +*/ /* SECTION 6: more reveal.js specific additions by @skypanther */ @@ -121,35 +123,33 @@ ul, ol, div, p { -ms-perspective-origin: 50% 50%; perspective-origin: 50% 50%; } -.reveal .slides>section, .reveal .slides>section>section, -.reveal .slides>section.past, .reveal .slides>section.future, -.reveal.linear .slides>section, .reveal.linear .slides>section>section, -.reveal.linear .slides>section.past, .reveal.linear .slides>section.future { +.reveal .slides>section, +.reveal .slides>section>section { - visibility: visible; - position: static; - width: 90%; - height: auto; - display: block; - overflow: visible; + visibility: visible !important; + position: static !important; + width: 90% !important; + height: auto !important; + display: block !important; + overflow: visible !important; - left: 0%; - top: 0%; - margin-left: 0px; - margin-top: 0px; - padding: 20px 0px; + left: 0% !important; + top: 0% !important; + margin-left: 0px !important; + margin-top: 0px !important; + padding: 20px 0px !important; - opacity: 1; + opacity: 1 !important; - -webkit-transform-style: flat; - -moz-transform-style: flat; - -ms-transform-style: flat; - transform-style: flat; + -webkit-transform-style: flat !important; + -moz-transform-style: flat !important; + -ms-transform-style: flat !important; + transform-style: flat !important; - -webkit-transform: none; - -moz-transform: none; - -ms-transform: none; - transform: none; + -webkit-transform: none !important; + -moz-transform: none !important; + -ms-transform: none !important; + transform: none !important; } .reveal section { page-break-after: always !important; @@ -161,6 +161,9 @@ ul, ol, div, p { .reveal section .fragment { opacity: 1 !important; } +.reveal section:last-of-type { + page-break-after: avoid !important; +} .reveal section img { display: block; margin: 15px 0px; diff --git a/css/print/pdf.css b/css/print/pdf.css index ec03eda..7c1a496 100644 --- a/css/print/pdf.css +++ b/css/print/pdf.css @@ -23,7 +23,7 @@ body { padding: 0; float: none !important; overflow: visible; - background: #333; + background-image: none; } html { @@ -35,13 +35,13 @@ html { /* SECTION 2: Remove any elements not needed in print. This would include navigation, ads, sidebars, etc. */ .nestedarrow, -.controls a, +.controls, .reveal .progress, .reveal.overview, .fork-reveal, .share-reveal, .state-background { - display:none; + display: none !important; } /* SECTION 3: Set body font face, size, and color. @@ -102,36 +102,33 @@ ul, ol, div, p { -ms-perspective-origin: 50% 50%; perspective-origin: 50% 50%; } -.reveal .slides>section, .reveal .slides>section>section, -.reveal .slides>section.past, .reveal .slides>section.future, -.reveal.linear .slides>section, .reveal.linear .slides>section>section, -.reveal.linear .slides>section.past, .reveal.linear .slides>section.future { +.reveal .slides>section, .reveal .slides>section>section { - visibility: visible; - position: static; - width: 100%; - height: auto; - min-height: initial; - display: block; - overflow: visible; + visibility: visible !important; + position: static !important; + width: 100% !important; + height: auto !important; + min-height: initial !important; + display: block !important; + overflow: visible !important; - left: 0%; - top: 0%; - margin-left: 0px; - margin-top: 50px; - padding: 20px 0px; + left: 0% !important; + top: 0% !important; + margin-left: 0px !important; + margin-top: 50px !important; + padding: 20px 0px !important; - opacity: 1; + opacity: 1 !important; - -webkit-transform-style: flat; - -moz-transform-style: flat; - -ms-transform-style: flat; - transform-style: flat; + -webkit-transform-style: flat !important; + -moz-transform-style: flat !important; + -ms-transform-style: flat !important; + transform-style: flat !important; - -webkit-transform: none; - -moz-transform: none; - -ms-transform: none; - transform: none; + -webkit-transform: none !important; + -moz-transform: none !important; + -ms-transform: none !important; + transform: none !important; } .reveal section { page-break-after: always !important; diff --git a/css/theme/beige.css b/css/theme/beige.css index fe0e460..727be44 100644 --- a/css/theme/beige.css +++ b/css/theme/beige.css @@ -23,6 +23,7 @@ body { background: -o-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%); background: -ms-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%); background: radial-gradient(center, circle cover, white 0%, #f7f2d3 100%); + background-color: #f7f3de; } .reveal { diff --git a/css/theme/default.css b/css/theme/default.css index 563e4d9..c8f2eff 100644 --- a/css/theme/default.css +++ b/css/theme/default.css @@ -23,6 +23,7 @@ body { background: -o-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%); background: -ms-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%); background: radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%); + background-color: #2b2b2b; } .reveal { diff --git a/css/theme/serif.css b/css/theme/serif.css index 3957b5d..86710c6 100644 --- a/css/theme/serif.css +++ b/css/theme/serif.css @@ -10,6 +10,7 @@ *********************************************/ body { background: #f0f1eb; + background-color: #f0f1eb; } .reveal { diff --git a/css/theme/simple.css b/css/theme/simple.css index 926bbc5..848ca93 100644 --- a/css/theme/simple.css +++ b/css/theme/simple.css @@ -12,6 +12,7 @@ *********************************************/ body { background: white; + background-color: white; } .reveal { diff --git a/css/theme/sky.css b/css/theme/sky.css index 6618c0d..a6d94eb 100644 --- a/css/theme/sky.css +++ b/css/theme/sky.css @@ -16,6 +16,7 @@ body { background: -o-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%); background: -ms-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%); background: radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%); + background-color: #f7fbfc; } .reveal { diff --git a/css/theme/template/theme.scss b/css/theme/template/theme.scss index 600c8e3..c53df39 100644 --- a/css/theme/template/theme.scss +++ b/css/theme/template/theme.scss @@ -6,6 +6,7 @@ body { @include bodyBackground(); + background-color: $backgroundColor; } .reveal { -- cgit v1.2.3 From 5c5b3d34d9031f08fb6b8a8e16345c36e2891c9d Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Mon, 29 Oct 2012 00:10:14 -0400 Subject: fix rolling links glitch in firefox --- css/reveal.css | 18 +++++++++--------- css/theme/beige.css | 1 - css/theme/default.css | 1 - css/theme/serif.css | 1 - css/theme/simple.css | 1 - css/theme/sky.css | 1 - css/theme/template/theme.scss | 1 - 7 files changed, 9 insertions(+), 15 deletions(-) (limited to 'css/theme/serif.css') diff --git a/css/reveal.css b/css/reveal.css index ad2e33e..412e8ec 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -1157,15 +1157,15 @@ body { .zoomed .reveal *, .zoomed .reveal *:before, .zoomed .reveal *:after { - -webkit-transform: initial !important; - -moz-transform: initial !important; - -ms-transform: initial !important; - transform: initial !important; - - -webkit-backface-visibility: initial !important; - -moz-backface-visibility: initial !important; - -ms-backface-visibility: initial !important; - backface-visibility: initial !important; + -webkit-transform: none !important; + -moz-transform: none !important; + -ms-transform: none !important; + transform: none !important; + + -webkit-backface-visibility: visible !important; + -moz-backface-visibility: visible !important; + -ms-backface-visibility: visible !important; + backface-visibility: visible !important; } .zoomed .reveal .progress, diff --git a/css/theme/beige.css b/css/theme/beige.css index 727be44..5e40883 100644 --- a/css/theme/beige.css +++ b/css/theme/beige.css @@ -79,7 +79,6 @@ body { color: #c0a86e; text-shadow: none; border: none; - border-radius: 2px; } .reveal .roll span:after { diff --git a/css/theme/default.css b/css/theme/default.css index c8f2eff..28ed7d3 100644 --- a/css/theme/default.css +++ b/css/theme/default.css @@ -79,7 +79,6 @@ body { color: #71e9f4; text-shadow: none; border: none; - border-radius: 2px; } .reveal .roll span:after { diff --git a/css/theme/serif.css b/css/theme/serif.css index 86710c6..ece6124 100644 --- a/css/theme/serif.css +++ b/css/theme/serif.css @@ -66,7 +66,6 @@ body { color: #8b7c69; text-shadow: none; border: none; - border-radius: 2px; } .reveal .roll span:after { diff --git a/css/theme/simple.css b/css/theme/simple.css index 848ca93..6d0771a 100644 --- a/css/theme/simple.css +++ b/css/theme/simple.css @@ -68,7 +68,6 @@ body { color: #0000f1; text-shadow: none; border: none; - border-radius: 2px; } .reveal .roll span:after { diff --git a/css/theme/sky.css b/css/theme/sky.css index a6d94eb..18a4863 100644 --- a/css/theme/sky.css +++ b/css/theme/sky.css @@ -72,7 +72,6 @@ body { color: #74a7cb; text-shadow: none; border: none; - border-radius: 2px; } .reveal .roll span:after { diff --git a/css/theme/template/theme.scss b/css/theme/template/theme.scss index c53df39..6a80b62 100644 --- a/css/theme/template/theme.scss +++ b/css/theme/template/theme.scss @@ -68,7 +68,6 @@ body { text-shadow: none; border: none; - border-radius: 2px; } .reveal .roll span:after { -- cgit v1.2.3 From c79376dab2998cdaf906bb281ae4fc220e2a2e3a Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Sat, 10 Nov 2012 11:40:19 -0500 Subject: allow multiple control elements, document usage of global controls (#184, #204) --- README.md | 13 ++++ css/reveal.css | 8 +-- css/theme/beige.css | 24 +++---- css/theme/default.css | 24 +++---- css/theme/serif.css | 24 +++---- css/theme/simple.css | 24 +++---- css/theme/sky.css | 24 +++---- css/theme/template/theme.scss | 24 +++---- index.html | 14 ++-- js/reveal.js | 71 ++++++++++++------ js/reveal.min.js | 163 ++++++++++++++++++++++-------------------- 11 files changed, 231 insertions(+), 182 deletions(-) (limited to 'css/theme/serif.css') diff --git a/README.md b/README.md index 4cb15eb..ef3e406 100644 --- a/README.md +++ b/README.md @@ -186,6 +186,19 @@ It's easy to link between slides. The first example below targets the index of a Link Link ``` + +You can also add relative navigation links, similar to the built in reveal.js controls, by appending one of the following classes on any element. Note that each element is automatically given an ```enabled``` class when its a valid navigation route based on the current slide. + +```html + + + + + + +``` + + ### Fullscreen mode Just press »F« on your keyboard to show your presentation in fullscreen mode. Press the »ESC« key to exit fullscreen mode. diff --git a/css/reveal.css b/css/reveal.css index 2e72aca..c4c2991 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -346,14 +346,14 @@ body { margin-top: 1px; } -.reveal .controls div.left { +.reveal .controls div.navigate-left { top: 42px; border-right-width: 22px; border-right-color: #eee; } -.reveal .controls div.right { +.reveal .controls div.navigate-right { left: 74px; top: 42px; @@ -361,14 +361,14 @@ body { border-left-color: #eee; } -.reveal .controls div.up { +.reveal .controls div.navigate-up { left: 42px; border-bottom-width: 22px; border-bottom-color: #eee; } -.reveal .controls div.down { +.reveal .controls div.navigate-down { left: 42px; top: 74px; diff --git a/css/theme/beige.css b/css/theme/beige.css index 5e40883..c8d38f2 100644 --- a/css/theme/beige.css +++ b/css/theme/beige.css @@ -110,39 +110,39 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.left, -.reveal .controls div.left.enabled { +.reveal .controls div.navigate-left, +.reveal .controls div.navigate-left.enabled { border-right-color: #8b743d; } -.reveal .controls div.right, -.reveal .controls div.right.enabled { +.reveal .controls div.navigate-right, +.reveal .controls div.navigate-right.enabled { border-left-color: #8b743d; } -.reveal .controls div.up, -.reveal .controls div.up.enabled { +.reveal .controls div.navigate-up, +.reveal .controls div.navigate-up.enabled { border-bottom-color: #8b743d; } -.reveal .controls div.down, -.reveal .controls div.down.enabled { +.reveal .controls div.navigate-down, +.reveal .controls div.navigate-down.enabled { border-top-color: #8b743d; } -.reveal .controls div.left.enabled:hover { +.reveal .controls div.navigate-left.enabled:hover { border-right-color: #c0a86e; } -.reveal .controls div.right.enabled:hover { +.reveal .controls div.navigate-right.enabled:hover { border-left-color: #c0a86e; } -.reveal .controls div.up.enabled:hover { +.reveal .controls div.navigate-up.enabled:hover { border-bottom-color: #c0a86e; } -.reveal .controls div.down.enabled:hover { +.reveal .controls div.navigate-down.enabled:hover { border-top-color: #c0a86e; } diff --git a/css/theme/default.css b/css/theme/default.css index 28ed7d3..30d7463 100644 --- a/css/theme/default.css +++ b/css/theme/default.css @@ -110,39 +110,39 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.left, -.reveal .controls div.left.enabled { +.reveal .controls div.navigate-left, +.reveal .controls div.navigate-left.enabled { border-right-color: #13daec; } -.reveal .controls div.right, -.reveal .controls div.right.enabled { +.reveal .controls div.navigate-right, +.reveal .controls div.navigate-right.enabled { border-left-color: #13daec; } -.reveal .controls div.up, -.reveal .controls div.up.enabled { +.reveal .controls div.navigate-up, +.reveal .controls div.navigate-up.enabled { border-bottom-color: #13daec; } -.reveal .controls div.down, -.reveal .controls div.down.enabled { +.reveal .controls div.navigate-down, +.reveal .controls div.navigate-down.enabled { border-top-color: #13daec; } -.reveal .controls div.left.enabled:hover { +.reveal .controls div.navigate-left.enabled:hover { border-right-color: #71e9f4; } -.reveal .controls div.right.enabled:hover { +.reveal .controls div.navigate-right.enabled:hover { border-left-color: #71e9f4; } -.reveal .controls div.up.enabled:hover { +.reveal .controls div.navigate-up.enabled:hover { border-bottom-color: #71e9f4; } -.reveal .controls div.down.enabled:hover { +.reveal .controls div.navigate-down.enabled:hover { border-top-color: #71e9f4; } diff --git a/css/theme/serif.css b/css/theme/serif.css index ece6124..3d406af 100644 --- a/css/theme/serif.css +++ b/css/theme/serif.css @@ -97,39 +97,39 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.left, -.reveal .controls div.left.enabled { +.reveal .controls div.navigate-left, +.reveal .controls div.navigate-left.enabled { border-right-color: #51483d; } -.reveal .controls div.right, -.reveal .controls div.right.enabled { +.reveal .controls div.navigate-right, +.reveal .controls div.navigate-right.enabled { border-left-color: #51483d; } -.reveal .controls div.up, -.reveal .controls div.up.enabled { +.reveal .controls div.navigate-up, +.reveal .controls div.navigate-up.enabled { border-bottom-color: #51483d; } -.reveal .controls div.down, -.reveal .controls div.down.enabled { +.reveal .controls div.navigate-down, +.reveal .controls div.navigate-down.enabled { border-top-color: #51483d; } -.reveal .controls div.left.enabled:hover { +.reveal .controls div.navigate-left.enabled:hover { border-right-color: #8b7c69; } -.reveal .controls div.right.enabled:hover { +.reveal .controls div.navigate-right.enabled:hover { border-left-color: #8b7c69; } -.reveal .controls div.up.enabled:hover { +.reveal .controls div.navigate-up.enabled:hover { border-bottom-color: #8b7c69; } -.reveal .controls div.down.enabled:hover { +.reveal .controls div.navigate-down.enabled:hover { border-top-color: #8b7c69; } diff --git a/css/theme/simple.css b/css/theme/simple.css index 6d0771a..cf4f042 100644 --- a/css/theme/simple.css +++ b/css/theme/simple.css @@ -99,39 +99,39 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.left, -.reveal .controls div.left.enabled { +.reveal .controls div.navigate-left, +.reveal .controls div.navigate-left.enabled { border-right-color: darkblue; } -.reveal .controls div.right, -.reveal .controls div.right.enabled { +.reveal .controls div.navigate-right, +.reveal .controls div.navigate-right.enabled { border-left-color: darkblue; } -.reveal .controls div.up, -.reveal .controls div.up.enabled { +.reveal .controls div.navigate-up, +.reveal .controls div.navigate-up.enabled { border-bottom-color: darkblue; } -.reveal .controls div.down, -.reveal .controls div.down.enabled { +.reveal .controls div.navigate-down, +.reveal .controls div.navigate-down.enabled { border-top-color: darkblue; } -.reveal .controls div.left.enabled:hover { +.reveal .controls div.navigate-left.enabled:hover { border-right-color: #0000f1; } -.reveal .controls div.right.enabled:hover { +.reveal .controls div.navigate-right.enabled:hover { border-left-color: #0000f1; } -.reveal .controls div.up.enabled:hover { +.reveal .controls div.navigate-up.enabled:hover { border-bottom-color: #0000f1; } -.reveal .controls div.down.enabled:hover { +.reveal .controls div.navigate-down.enabled:hover { border-top-color: #0000f1; } diff --git a/css/theme/sky.css b/css/theme/sky.css index 18a4863..43bb4f4 100644 --- a/css/theme/sky.css +++ b/css/theme/sky.css @@ -103,39 +103,39 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.left, -.reveal .controls div.left.enabled { +.reveal .controls div.navigate-left, +.reveal .controls div.navigate-left.enabled { border-right-color: #3b759e; } -.reveal .controls div.right, -.reveal .controls div.right.enabled { +.reveal .controls div.navigate-right, +.reveal .controls div.navigate-right.enabled { border-left-color: #3b759e; } -.reveal .controls div.up, -.reveal .controls div.up.enabled { +.reveal .controls div.navigate-up, +.reveal .controls div.navigate-up.enabled { border-bottom-color: #3b759e; } -.reveal .controls div.down, -.reveal .controls div.down.enabled { +.reveal .controls div.navigate-down, +.reveal .controls div.navigate-down.enabled { border-top-color: #3b759e; } -.reveal .controls div.left.enabled:hover { +.reveal .controls div.navigate-left.enabled:hover { border-right-color: #74a7cb; } -.reveal .controls div.right.enabled:hover { +.reveal .controls div.navigate-right.enabled:hover { border-left-color: #74a7cb; } -.reveal .controls div.up.enabled:hover { +.reveal .controls div.navigate-up.enabled:hover { border-bottom-color: #74a7cb; } -.reveal .controls div.down.enabled:hover { +.reveal .controls div.navigate-down.enabled:hover { border-top-color: #74a7cb; } diff --git a/css/theme/template/theme.scss b/css/theme/template/theme.scss index 6a80b62..a818ec2 100644 --- a/css/theme/template/theme.scss +++ b/css/theme/template/theme.scss @@ -106,39 +106,39 @@ body { * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.left, -.reveal .controls div.left.enabled { +.reveal .controls div.navigate-left, +.reveal .controls div.navigate-left.enabled { border-right-color: $linkColor; } -.reveal .controls div.right, -.reveal .controls div.right.enabled { +.reveal .controls div.navigate-right, +.reveal .controls div.navigate-right.enabled { border-left-color: $linkColor; } -.reveal .controls div.up, -.reveal .controls div.up.enabled { +.reveal .controls div.navigate-up, +.reveal .controls div.navigate-up.enabled { border-bottom-color: $linkColor; } -.reveal .controls div.down, -.reveal .controls div.down.enabled { +.reveal .controls div.navigate-down, +.reveal .controls div.navigate-down.enabled { border-top-color: $linkColor; } -.reveal .controls div.left.enabled:hover { +.reveal .controls div.navigate-left.enabled:hover { border-right-color: $linkColorHover; } -.reveal .controls div.right.enabled:hover { +.reveal .controls div.navigate-right.enabled:hover { border-left-color: $linkColorHover; } -.reveal .controls div.up.enabled:hover { +.reveal .controls div.navigate-up.enabled:hover { border-bottom-color: $linkColorHover; } -.reveal .controls div.down.enabled:hover { +.reveal .controls div.navigate-down.enabled:hover { border-top-color: $linkColorHover; } diff --git a/index.html b/index.html index 82570f3..426b8cf 100644 --- a/index.html +++ b/index.html @@ -61,9 +61,9 @@

Vertical Slides

Slides can be nested inside of other slides, - try pressing down. + try pressing down.

- + Down arrow @@ -181,20 +181,20 @@ will be added as a class to the document element when the slide is open. This lets you apply broader style changes, like switching the background.

- + Down arrow

"blackout"

- + Down arrow

"soothe"

- - Up arrow + + Up arrow
@@ -340,7 +340,7 @@ function linkify( selector ) { - +