From 25ad8adc68600ba9e77cbd7255a104c004126e21 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Wed, 8 Aug 2012 01:14:12 -0400 Subject: [PATCH] themes are now available as separate css files under css/theme/, old theme option in config is no longer supported (closes #104) --- css/main.css | 243 ++++++--------------------- css/{print.css => print/paper.css} | 0 css/{print-pdf.css => print/pdf.css} | 0 css/reset.css | 57 ------- css/theme/beige.css | 166 ++++++++++++++++++ css/theme/default.css | 169 +++++++++++++++++++ index.html | 18 +- js/reveal.js | 10 +- js/reveal.min.js | 11 +- 9 files changed, 400 insertions(+), 274 deletions(-) rename css/{print.css => print/paper.css} (100%) rename css/{print-pdf.css => print/pdf.css} (100%) delete mode 100644 css/reset.css create mode 100644 css/theme/beige.css create mode 100644 css/theme/default.css diff --git a/css/main.css b/css/main.css index cae560f..c846c37 100644 --- a/css/main.css +++ b/css/main.css @@ -10,21 +10,33 @@ /********************************************* - * FONT-FACE DEFINITIONS + * RESET STYLES *********************************************/ -@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; +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} - font-weight: normal; - font-style: normal; +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; } @@ -32,7 +44,8 @@ * GLOBAL STYLES *********************************************/ -html, body { +html, +body { padding: 0; margin: 0; width: 100%; @@ -43,23 +56,7 @@ html, body { body { position: relative; - padding: 0; - margin: 0; - - 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+); - 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%); + line-height: 1; } @media screen and (max-width: 900px) { @@ -68,52 +65,21 @@ body { } } +::selection { + background:#FF5E99; + color:#fff; + text-shadow: none; +} + /********************************************* * HEADERS *********************************************/ -.reveal h1, -.reveal h2, -.reveal h3, -.reveal h4 { - 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); -} -.reveal h1 { font-size: 3.77em; } +.reveal h1 { font-size: 3.77em; } .reveal h2 { font-size: 2.11em; } .reveal h3 { font-size: 1.55em; } .reveal h4 { font-size: 1em; } -.reveal h1.inverted, -.reveal h2.inverted, -.reveal h3.inverted, -.reveal h4.inverted { - color: #fff; - text-shadow: 0px 0px 2px 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); -} - /********************************************* * VIEW FRAGMENTS @@ -188,6 +154,11 @@ body { margin-bottom: 10px; } +.reveal q, +.reveal blockquote { + quotes: none; +} + .reveal blockquote { display: block; position: relative; @@ -206,6 +177,16 @@ body { content: '”'; } +.reveal q { + font-style: italic; +} + .reveal q:before { + content: '“'; + } + .reveal q:after { + content: '”'; + } + .reveal pre { display: block; position: relative; @@ -254,60 +235,6 @@ body { vertical-align: top; } -.reveal q { - font-style: italic; -} - .reveal q:before { - content: '“'; - } - .reveal q:after { - content: '”'; - } - -.reveal a:not(.image) { - color: hsl(185, 85%, 50%); - 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: hsl(185, 85%, 70%); - - text-shadow: none; - border: none; - border-radius: 2px; - } - -.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: #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); - } - /********************************************* * CONTROLS @@ -328,13 +255,9 @@ body { font-size: 0.83em; position: absolute; opacity: 0.1; - color: #fff; } .reveal .controls a.enabled { opacity: 0.6; - color: hsl(185, 85%, 70%); - - text-shadow: 0px 0px 2px hsla(185, 45%, 70%, 0.3); } .reveal .controls a.enabled:active { margin-top: 1px; @@ -356,7 +279,6 @@ body { .reveal .controls .down { left: 30px; top: 60px; - } @@ -371,13 +293,10 @@ body { width: 100%; bottom: 0; left: 0; - - background: rgba(0,0,0,0.2); } .reveal .progress span { display: block; - background: hsl(185, 85%, 50%); height: 100%; width: 0px; @@ -455,9 +374,6 @@ body { top: 0; padding: 0 2px; - color: #fff; - background: hsl(185, 60%, 35%); - -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; @@ -983,64 +899,3 @@ body { display: none; } - -/********************************************* - * NEON THEME - *********************************************/ - -.theme-neon .reveal a, -.theme-neon .reveal a:hover, -.theme-neon .reveal .controls a.enabled { - color: #5de048; -} - -.theme-neon .reveal .progress span, -.theme-neon .reveal .roll span:after { - background: #5de048; -} - -.theme-neon .reveal a.image:hover img { - border-color: #5de048; -} - - -/********************************************* - * BEIGE THEME - *********************************************/ - -.theme-beige 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%); -} - -.theme-beige .reveal h1, -.theme-beige .reveal h2, -.theme-beige .reveal h3, -.theme-beige .reveal h4, -.theme-beige .reveal h5, -.theme-beige .reveal h6 { - color: #333; - text-shadow: none; -} - -.theme-beige .reveal a, -.theme-beige .reveal a:hover, -.theme-beige .reveal .controls a.enabled { - color: #8b743d; -} - -.theme-beige .reveal .progress span, -.theme-beige .reveal .roll span:after { - background: #8b743d; -} - -.theme-beige .reveal a.image:hover img { - border-color: #8b743d; -} diff --git a/css/print.css b/css/print/paper.css similarity index 100% rename from css/print.css rename to css/print/paper.css diff --git a/css/print-pdf.css b/css/print/pdf.css similarity index 100% rename from css/print-pdf.css rename to css/print/pdf.css diff --git a/css/reset.css b/css/reset.css deleted file mode 100644 index 68f227a..0000000 --- a/css/reset.css +++ /dev/null @@ -1,57 +0,0 @@ -/* http://meyerweb.com/eric/tools/css/reset/ - v2.0 | 20110126 - License: none (public domain) -*/ - -html, body, div, span, applet, object, iframe, -h1, h2, h3, h4, h5, h6, p, blockquote, pre, -a, abbr, acronym, address, big, cite, code, -del, dfn, em, img, ins, kbd, q, s, samp, -small, strike, strong, sub, sup, tt, var, -b, u, i, center, -dl, dt, dd, ol, ul, li, -fieldset, form, label, legend, -table, caption, tbody, tfoot, thead, tr, th, td, -article, aside, canvas, details, embed, -figure, figcaption, footer, header, hgroup, -menu, nav, output, ruby, section, summary, -time, mark, audio, video { - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font: inherit; - vertical-align: baseline; -} -/* HTML5 display-role reset for older browsers */ -article, aside, details, figcaption, figure, -footer, header, hgroup, menu, nav, section { - display: block; -} -body { - line-height: 1; -} -ol, ul { - list-style: none; -} -blockquote, q { - quotes: none; -} -blockquote:before, blockquote:after, -q:before, q:after { - content: ''; - content: none; -} -table { - border-collapse: collapse; - border-spacing: 0; -} - - -/* HTML5BP: - These selection declarations have to be separate. - No text-shadow: twitter.com/miketaylr/status/12228805301 - Also: hot pink. */ -::-moz-selection{ background: #FF5E99; color:#fff; text-shadow: none; } -::selection { background:#FF5E99; color:#fff; text-shadow: none; } - diff --git a/css/theme/beige.css b/css/theme/beige.css new file mode 100644 index 0000000..35337e6 --- /dev/null +++ b/css/theme/beige.css @@ -0,0 +1,166 @@ +/** + * A beige theme for reveal.js presentations, similar + * to the default theme. + * + * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se + */ + +/********************************************* + * FONT-FACE DEFINITIONS + *********************************************/ + +@font-face { + font-family: 'League Gothic'; + src: url('../../lib/font/league_gothic-webfont.eot'); + src: url('../../lib/font/league_gothic-webfont.eot?#iefix') format('embedded-opentype'), + url('../../lib/font/league_gothic-webfont.woff') format('woff'), + url('../../lib/font/league_gothic-webfont.ttf') format('truetype'), + url('../../lib/font/league_gothic-webfont.svg#LeagueGothicRegular') format('svg'); + + font-weight: normal; + font-style: normal; +} + + +/********************************************* + * GLOBAL STYLES + *********************************************/ + +body { + font-family: 'Lato', Times, 'Times New Roman', serif; + font-size: 36px; + font-weight: 200; + letter-spacing: -0.02em; + 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%); +} + + +/********************************************* + * HEADERS + *********************************************/ + +.reveal h1, +.reveal h2, +.reveal h3, +.reveal h4, +.reveal h5, +.reveal h6 { + margin: 0 0 20px 0; + color: #333; + font-family: 'League Gothic', Impact, sans-serif; + line-height: 0.9em; + letter-spacing: 0.02em; + + text-transform: uppercase; +} + +.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); +} + + +/********************************************* + * LINKS + *********************************************/ + +.reveal a:not(.image) { + color: #8b743d; + text-decoration: none; + + -webkit-transition: color .15s ease; + -moz-transition: color .15s ease; + -ms-transition: color .15s ease; + -o-transition: color .15s ease; + transition: color .15s ease; +} + .reveal a:not(.image):hover { + text-shadow: none; + border: none; + border-radius: 2px; + } + +.reveal .roll span:after { + color: #fff; + background: #8b743d; +} + + +/********************************************* + * 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: #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); + } + + +/********************************************* + * NAVIGATION CONTROLS + *********************************************/ + +.reveal .controls a { + color: #fff; +} + .reveal .controls a.enabled { + color: #8b743d; + 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: #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); + } + + diff --git a/css/theme/default.css b/css/theme/default.css new file mode 100644 index 0000000..bd7caa7 --- /dev/null +++ b/css/theme/default.css @@ -0,0 +1,169 @@ +/** + * The default theme for reveal.js presentations. + * + * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se + */ + +/********************************************* + * FONT-FACE DEFINITIONS + *********************************************/ + +@font-face { + font-family: 'League Gothic'; + src: url('../../lib/font/league_gothic-webfont.eot'); + src: url('../../lib/font/league_gothic-webfont.eot?#iefix') format('embedded-opentype'), + url('../../lib/font/league_gothic-webfont.woff') format('woff'), + url('../../lib/font/league_gothic-webfont.ttf') format('truetype'), + url('../../lib/font/league_gothic-webfont.svg#LeagueGothicRegular') format('svg'); + + font-weight: normal; + font-style: normal; +} + + +/********************************************* + * GLOBAL STYLES + *********************************************/ + +body { + 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+); + 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%); +} + + +/********************************************* + * HEADERS + *********************************************/ + +.reveal h1, +.reveal h2, +.reveal h3, +.reveal h4, +.reveal h5, +.reveal h6 { + margin: 0 0 20px 0; + color: #eee; + font-family: 'League Gothic', Impact, sans-serif; + line-height: 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); +} + + +/********************************************* + * LINKS + *********************************************/ + +.reveal a:not(.image) { + color: hsl(185, 85%, 50%); + 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: hsl(185, 85%, 70%); + + text-shadow: none; + border: none; + border-radius: 2px; + } + +.reveal .roll span:after { + color: #fff; + background: hsl(185, 60%, 35%); +} + + +/********************************************* + * 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: #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); + } + + +/********************************************* + * NAVIGATION CONTROLS + *********************************************/ + +.reveal .controls a { + color: #fff; +} + .reveal .controls a.enabled { + color: hsl(185, 85%, 70%); + 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: 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); + } + + diff --git a/index.html b/index.html index 6e3ec07..d758f5f 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,7 @@ reveal.js - HTML5 Presentations - + @@ -14,13 +14,16 @@ - + + +