diff options
Diffstat (limited to 'css')
| -rw-r--r-- | css/print/paper.css (renamed from css/print.css) | 75 | ||||
| -rw-r--r-- | css/print/pdf.css | 164 | ||||
| -rw-r--r-- | css/reset.css | 57 | ||||
| -rw-r--r-- | css/reveal.css (renamed from css/main.css) | 945 | ||||
| -rw-r--r-- | css/reveal.min.css | 7 | ||||
| -rw-r--r-- | css/theme/README.md | 25 | ||||
| -rw-r--r-- | css/theme/beige.css | 163 | ||||
| -rw-r--r-- | css/theme/default.css | 163 | ||||
| -rw-r--r-- | css/theme/night.css | 150 | ||||
| -rw-r--r-- | css/theme/serif.css | 150 | ||||
| -rw-r--r-- | css/theme/simple.css | 152 | ||||
| -rw-r--r-- | css/theme/sky.css | 156 | ||||
| -rw-r--r-- | css/theme/source/beige.scss | 50 | ||||
| -rw-r--r-- | css/theme/source/default.scss | 42 | ||||
| -rw-r--r-- | css/theme/source/night.scss | 35 | ||||
| -rw-r--r-- | css/theme/source/serif.scss | 33 | ||||
| -rw-r--r-- | css/theme/source/simple.scss | 38 | ||||
| -rw-r--r-- | css/theme/source/sky.scss | 41 | ||||
| -rw-r--r-- | css/theme/template/mixins.scss | 29 | ||||
| -rw-r--r-- | css/theme/template/settings.scss | 33 | ||||
| -rw-r--r-- | css/theme/template/theme.scss | 163 |
21 files changed, 2227 insertions, 444 deletions
diff --git a/css/print.css b/css/print/paper.css index 519120e..ec8a8bd 100644 --- a/css/print.css +++ b/css/print/paper.css @@ -11,7 +11,7 @@ beyond the edge of the printed page, and prevents unnecessary background images from printing */ body { - background: #fff url(none); + background: #fff; font-size: 13pt; width: auto; height: auto; @@ -31,16 +31,19 @@ html { /* SECTION 2: Remove any elements not needed in print. This would include navigation, ads, sidebars, etc. */ .nestedarrow, -.controls a, -.reveal .progress span, -.reveal.overview { - display:none; +.controls, +.reveal .progress, +.reveal.overview, +.fork-reveal, +.share-reveal, +.state-background { + 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; } @@ -74,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 */ @@ -118,45 +123,49 @@ 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; display: block !important; } -.reveal section.stack { - page-break-after: avoid !important; -} .reveal section .fragment { opacity: 1 !important; + visibility: visible !important; + + -webkit-transform: none !important; + -moz-transform: none !important; + -ms-transform: none !important; + transform: none !important; +} +.reveal section:last-of-type { + page-break-after: avoid !important; } .reveal section img { display: block; diff --git a/css/print/pdf.css b/css/print/pdf.css new file mode 100644 index 0000000..9811096 --- /dev/null +++ b/css/print/pdf.css @@ -0,0 +1,164 @@ +/* Default Print Stylesheet Template + by Rob Glazebrook of CSSnewbie.com + Last Updated: June 4, 2008 + + Feel free (nay, compelled) to edit, append, and + manipulate this file as you see fit. */ + + +/* SECTION 1: Set default width, margin, float, and + background. This prevents elements from extending + beyond the edge of the printed page, and prevents + unnecessary background images from printing */ + +* { + -webkit-print-color-adjust: exact; +} + +body { + font-size: 18pt; + width: auto; + height: auto; + border: 0; + padding: 0; + float: none !important; + overflow: visible; +} + +html { + width: 100%; + height: 100%; + overflow: visible; +} + +@page { + size: letter landscape; + margin: 0; +} + +/* SECTION 2: Remove any elements not needed in print. + This would include navigation, ads, sidebars, etc. */ +.nestedarrow, +.controls, +.reveal .progress, +.reveal.overview, +.fork-reveal, +.share-reveal, +.state-background { + display: none !important; +} + +/* SECTION 3: Set body font face, size, and color. + Consider using a serif font for readability. */ +body, p, td, li, div { + font-size: 18pt; +} + +/* SECTION 4: Set heading font face, sizes, and color. + Diffrentiate your headings from your body text. + Perhaps use a large sans-serif for distinction. */ +h1,h2,h3,h4,h5,h6 { + text-shadow: 0 0 0 #000 !important; +} + +/* SECTION 5: Make hyperlinks more usable. + Ensure links are underlined, and consider appending + the URL to the end of the link for usability. */ +a:link, +a:visited { + font-weight: bold; + text-decoration: underline; +} + + +/* SECTION 6: more reveal.js specific additions by @skypanther */ +ul, ol, div, p { + visibility: visible; + position: static; + width: auto; + height: auto; + display: block; + overflow: visible; + margin: auto; +} +.reveal .slides { + position: static; + width: 100%; + height: auto; + + left: auto; + top: auto; + margin-left: auto; + margin-right: auto; + margin-top: auto; + padding: auto; + + overflow: visible; + display: block; + + text-align: center; + + -webkit-perspective: none; + -moz-perspective: none; + -ms-perspective: none; + perspective: none; + + -webkit-perspective-origin: 50% 50%; /* there isn't a none/auto value but 50-50 is the default */ + -moz-perspective-origin: 50% 50%; + -ms-perspective-origin: 50% 50%; + perspective-origin: 50% 50%; +} +.reveal .slides section { + + page-break-after: always !important; + + visibility: visible !important; + position: static !important; + width: 100% !important; + height: auto !important; + min-height: initial !important; + display: block !important; + overflow: visible !important; + + left: 0 !important; + top: 0 !important; + margin-left: 0px !important; + margin-top: 50px !important; + padding: 20px 0px !important; + + opacity: 1 !important; + + -webkit-transform-style: flat !important; + -moz-transform-style: flat !important; + -ms-transform-style: flat !important; + transform-style: flat !important; + + -webkit-transform: none !important; + -moz-transform: none !important; + -ms-transform: none !important; + transform: none !important; +} +.reveal section.stack { + margin: 0px !important; + padding: 0px !important; + page-break-after: avoid !important; +} +.reveal section .fragment { + opacity: 1 !important; + visibility: visible !important; + + -webkit-transform: none !important; + -moz-transform: none !important; + -ms-transform: none !important; + transform: none !important; +} +.reveal img { + box-shadow: none; +} +.reveal .roll { + overflow: visible; + line-height: 1em; +} +.reveal small a { + font-size: 16pt !important; +} 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/main.css b/css/reveal.css index 73ac8b7..33fd206 100644 --- a/css/main.css +++ b/css/reveal.css @@ -1,22 +1,42 @@ @charset "UTF-8"; -/** - * Main styles for reveal.js + +/*! + * reveal.js + * http://lab.hakim.se/reveal-js + * MIT licensed * - * @author Hakim El Hattab + * Copyright (C) 2013 Hakim El Hattab, http://hakim.se */ /********************************************* - * 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.ttf') format('truetype'); - font-weight: normal; - font-style: normal; +html, body, .reveal div, .reveal span, .reveal applet, .reveal object, .reveal iframe, +.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6, .reveal p, .reveal blockquote, .reveal pre, +.reveal a, .reveal abbr, .reveal acronym, .reveal address, .reveal big, .reveal cite, .reveal code, +.reveal del, .reveal dfn, .reveal em, .reveal img, .reveal ins, .reveal kbd, .reveal q, .reveal s, .reveal samp, +.reveal small, .reveal strike, .reveal strong, .reveal sub, .reveal sup, .reveal tt, .reveal var, +.reveal b, .reveal u, .reveal i, .reveal center, +.reveal dl, .reveal dt, .reveal dd, .reveal ol, .reveal ul, .reveal li, +.reveal fieldset, .reveal form, .reveal label, .reveal legend, +.reveal table, .reveal caption, .reveal tbody, .reveal tfoot, .reveal thead, .reveal tr, .reveal th, .reveal td, +.reveal article, .reveal aside, .reveal canvas, .reveal details, .reveal embed, +.reveal figure, .reveal figcaption, .reveal footer, .reveal header, .reveal hgroup, +.reveal menu, .reveal nav, .reveal output, .reveal ruby, .reveal section, .reveal summary, +.reveal time, .reveal mark, .reveal audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} + +.reveal article, .reveal aside, .reveal details, .reveal figcaption, .reveal figure, +.reveal footer, .reveal header, .reveal hgroup, .reveal menu, .reveal nav, .reveal section { + display: block; } @@ -24,82 +44,47 @@ * GLOBAL STYLES *********************************************/ -html, body { - padding: 0; - margin: 0; +html, +body { width: 100%; height: 100%; - min-height: 600px; + overflow: hidden; } body { position: relative; - padding: 0; - margin: 0; - overflow: hidden; - - 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; +} + +::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', 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: 136px; } -.reveal h2 { font-size: 76px; } -.reveal h3 { font-size: 56px; } -.reveal h4 { font-size: 36px; } - -.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); +.reveal h1, +.reveal h2, +.reveal h3, +.reveal h4, +.reveal h5, +.reveal h6 { + -webkit-hyphens: auto; + -moz-hyphens: auto; + hyphens: auto; + + word-wrap: break-word; } +.reveal h1 { font-size: 3.77em; } +.reveal h2 { font-size: 2.11em; } +.reveal h3 { font-size: 1.55em; } +.reveal h4 { font-size: 1em; } + /********************************************* * VIEW FRAGMENTS @@ -118,32 +103,109 @@ body { opacity: 1; } +.reveal .slides section .fragment.grow { + opacity: 1; +} + .reveal .slides section .fragment.grow.visible { + -webkit-transform: scale( 1.3 ); + -moz-transform: scale( 1.3 ); + -ms-transform: scale( 1.3 ); + -o-transform: scale( 1.3 ); + transform: scale( 1.3 ); + } + +.reveal .slides section .fragment.shrink { + opacity: 1; +} + .reveal .slides section .fragment.shrink.visible { + -webkit-transform: scale( 0.7 ); + -moz-transform: scale( 0.7 ); + -ms-transform: scale( 0.7 ); + -o-transform: scale( 0.7 ); + transform: scale( 0.7 ); + } + +.reveal .slides section .fragment.roll-in { + opacity: 0; + + -webkit-transform: rotateX( 90deg ); + -moz-transform: rotateX( 90deg ); + -ms-transform: rotateX( 90deg ); + -o-transform: rotateX( 90deg ); + transform: rotateX( 90deg ); +} + .reveal .slides section .fragment.roll-in.visible { + opacity: 1; + + -webkit-transform: rotateX( 0 ); + -moz-transform: rotateX( 0 ); + -ms-transform: rotateX( 0 ); + -o-transform: rotateX( 0 ); + transform: rotateX( 0 ); + } + +.reveal .slides section .fragment.fade-out { + opacity: 1; +} + .reveal .slides section .fragment.fade-out.visible { + opacity: 0; + } + +.reveal .slides section .fragment.highlight-red, +.reveal .slides section .fragment.highlight-green, +.reveal .slides section .fragment.highlight-blue { + opacity: 1; +} + .reveal .slides section .fragment.highlight-red.visible { + color: #ff2c2d + } + .reveal .slides section .fragment.highlight-green.visible { + color: #17ff2e; + } + .reveal .slides section .fragment.highlight-blue.visible { + color: #1b91ff; + } + /********************************************* * DEFAULT ELEMENT STYLES *********************************************/ -.reveal .slides section { - line-height: 1.2em; - font-weight: normal; +/* Fixes issue in Chrome where italic fonts did not appear when printing to PDF */ +.reveal:after { + content: ''; + font-style: italic; +} + +/* Ensure certain elements are never larger than the slide itself */ +.reveal img, +.reveal video, +.reveal iframe { + max-width: 95%; + max-height: 95%; } -.reveal strong, +/** Prevents layering issues in certain browser/transition combinations */ +.reveal a { + position: relative; +} + +.reveal strong, .reveal b { font-weight: bold; } -.reveal em, +.reveal em, .reveal i { font-style: italic; } -.reveal ol, +.reveal ol, .reveal ul { display: inline-block; text-align: left; - margin: 0 auto; + margin: 0 0 0 1em; } .reveal ol { @@ -172,6 +234,12 @@ body { .reveal p { margin-bottom: 10px; + line-height: 1.2em; +} + +.reveal q, +.reveal blockquote { + quotes: none; } .reveal blockquote { @@ -180,26 +248,40 @@ body { width: 70%; margin: 5px auto; padding: 5px; - + font-style: italic; background: rgba(255, 255, 255, 0.05); box-shadow: 0px 0px 2px rgba(0,0,0,0.2); } + .reveal blockquote p:first-child, + .reveal blockquote p:last-child { + display: inline-block; + } .reveal blockquote:before { - content: '“'; + content: '\201C'; } .reveal blockquote:after { - content: '”'; + content: '\201D'; + } + +.reveal q { + font-style: italic; +} + .reveal q:before { + content: '\201C'; + } + .reveal q:after { + content: '\201D'; } .reveal pre { display: block; position: relative; width: 90%; - margin: 10px auto; + margin: 15px auto; text-align: left; - font-size: 20px; + font-size: 0.55em; font-family: monospace; line-height: 1.2em; @@ -207,31 +289,37 @@ body { box-shadow: 0px 0px 6px rgba(0,0,0,0.3); } +.reveal pre code { + padding: 5px; +} .reveal code { font-family: monospace; + overflow: auto; + max-height: 400px; } -.reveal table th, +.reveal table th, .reveal table td { - text-align: left; - padding-right: .3em; + text-align: left; + padding-right: .3em; } .reveal table th { - text-shadow: rgb(255,255,255) 1px 1px 2px; + text-shadow: rgb(255,255,255) 1px 1px 2px; } -.reveal sup { +.reveal sup { vertical-align: super; } -.reveal sub { +.reveal sub { vertical-align: sub; } .reveal small { - font-size: 60%; - line-height: 1em; + display: inline-block; + font-size: 0.6em; + line-height: 1.2em; vertical-align: top; } @@ -239,60 +327,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 @@ -301,48 +335,65 @@ body { .reveal .controls { display: none; position: fixed; - width: 100px; - height: 100px; + width: 110px; + height: 110px; z-index: 30; + right: 10px; + bottom: 10px; +} - right: 0; - bottom: 0; +.reveal .controls div { + position: absolute; + opacity: 0.1; + 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 a { - font-size: 30px; - 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; - } - - .reveal .controls .left { - top: 30px; - } - .reveal .controls .right { - left: 60px; - top: 30px; - } +.reveal .controls div.enabled { + opacity: 0.6; + cursor: pointer; +} - .reveal .controls .up { - left: 30px; - } +.reveal .controls div.enabled:active { + margin-top: 1px; +} - .reveal .controls .down { - left: 30px; - top: 60px; +.reveal .controls div.navigate-left { + top: 42px; - } + border-right-width: 22px; + border-right-color: #eee; +} + +.reveal .controls div.navigate-right { + left: 74px; + top: 42px; + + border-left-width: 22px; + border-left-color: #eee; +} + +.reveal .controls div.navigate-up { + left: 42px; + + border-bottom-width: 22px; + border-bottom-color: #eee; +} + +.reveal .controls div.navigate-down { + left: 42px; + top: 74px; + + border-top-width: 22px; + border-top-color: #eee; +} /********************************************* @@ -356,13 +407,18 @@ body { width: 100%; bottom: 0; left: 0; - - background: rgba(0,0,0,0.2); + z-index: 10; } - + .reveal .progress:after { + content: ''; + display: 'block'; + position: absolute; + height: 20px; + width: 100%; + top: -20px; + } .reveal .progress span { display: block; - background: hsl(185, 85%, 50%); height: 100%; width: 0px; @@ -373,85 +429,84 @@ body { transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); } + /********************************************* * ROLLING LINKS *********************************************/ .reveal .roll { - display: inline-block; - overflow: hidden; + display: inline-block; + line-height: 1.2; + overflow: hidden; - vertical-align: top; + vertical-align: top; - -webkit-perspective: 400px; - -moz-perspective: 400px; - -ms-perspective: 400px; - perspective: 400px; + -webkit-perspective: 400px; + -moz-perspective: 400px; + -ms-perspective: 400px; + perspective: 400px; - -webkit-perspective-origin: 50% 50%; - -moz-perspective-origin: 50% 50%; - -ms-perspective-origin: 50% 50%; - perspective-origin: 50% 50%; + -webkit-perspective-origin: 50% 50%; + -moz-perspective-origin: 50% 50%; + -ms-perspective-origin: 50% 50%; + perspective-origin: 50% 50%; } .reveal .roll:hover { background: none; text-shadow: none; } .reveal .roll span { - display: block; - position: relative; - padding: 0 2px; + display: block; + position: relative; + padding: 0 2px; pointer-events: none; - -webkit-transition: all 400ms ease; - -moz-transition: all 400ms ease; - -ms-transition: all 400ms ease; - transition: all 400ms ease; - - -webkit-transform-origin: 50% 0%; - -moz-transform-origin: 50% 0%; - -ms-transform-origin: 50% 0%; - transform-origin: 50% 0%; - - -webkit-transform-style: preserve-3d; - -moz-transform-style: preserve-3d; - -ms-transform-style: preserve-3d; - transform-style: preserve-3d; - - -webkit-backface-visibility: hidden; - -moz-backface-visibility: hidden; - backface-visibility: hidden; -} - .reveal .roll:hover span { - background: rgba(0,0,0,0.5); - - -webkit-transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg ); - -moz-transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg ); - -ms-transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg ); - transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg ); - } -.reveal .roll span:after { - content: attr(data-title); + -webkit-transition: all 400ms ease; + -moz-transition: all 400ms ease; + -ms-transition: all 400ms ease; + transition: all 400ms ease; + + -webkit-transform-origin: 50% 0%; + -moz-transform-origin: 50% 0%; + -ms-transform-origin: 50% 0%; + transform-origin: 50% 0%; - display: block; - position: absolute; - left: 0; - top: 0; - padding: 0 2px; + -webkit-transform-style: preserve-3d; + -moz-transform-style: preserve-3d; + -ms-transform-style: preserve-3d; + transform-style: preserve-3d; + + -webkit-backface-visibility: hidden; + -moz-backface-visibility: hidden; + backface-visibility: hidden; +} + .reveal .roll:hover span { + background: rgba(0,0,0,0.5); + + -webkit-transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg ); + -moz-transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg ); + -ms-transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg ); + transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg ); + } +.reveal .roll span:after { + content: attr(data-title); - color: #fff; - background: hsl(185, 60%, 35%); + display: block; + position: absolute; + left: 0; + top: 0; + padding: 0 2px; - -webkit-transform-origin: 50% 0%; - -moz-transform-origin: 50% 0%; - -ms-transform-origin: 50% 0%; - transform-origin: 50% 0%; + -webkit-transform-origin: 50% 0%; + -moz-transform-origin: 50% 0%; + -ms-transform-origin: 50% 0%; + transform-origin: 50% 0%; - -webkit-transform: translate3d( 0px, 110%, 0px ) rotateX( -90deg ); - -moz-transform: translate3d( 0px, 110%, 0px ) rotateX( -90deg ); - -ms-transform: translate3d( 0px, 110%, 0px ) rotateX( -90deg ); - transform: translate3d( 0px, 110%, 0px ) rotateX( -90deg ); + -webkit-transform: translate3d( 0px, 110%, 0px ) rotateX( -90deg ); + -moz-transform: translate3d( 0px, 110%, 0px ) rotateX( -90deg ); + -ms-transform: translate3d( 0px, 110%, 0px ) rotateX( -90deg ); + transform: translate3d( 0px, 110%, 0px ) rotateX( -90deg ); } @@ -459,17 +514,21 @@ body { * SLIDES *********************************************/ +.reveal { + position: relative; + width: 100%; + height: 100%; +} + .reveal .slides { position: absolute; - width: 900px; - height: 600px; - + width: 100%; + height: 100%; left: 50%; top: 50%; - margin-left: -450px; - margin-top: -320px; - padding: 20px 0px; - + + overflow: visible; + z-index: 1; text-align: center; -webkit-transition: -webkit-perspective .4s ease; @@ -477,16 +536,16 @@ body { -ms-transition: -ms-perspective .4s ease; -o-transition: -o-perspective .4s ease; transition: perspective .4s ease; - + -webkit-perspective: 600px; -moz-perspective: 600px; -ms-perspective: 600px; perspective: 600px; - -webkit-perspective-origin: 50% 25%; - -moz-perspective-origin: 50% 25%; - -ms-perspective-origin: 50% 25%; - perspective-origin: 50% 25%; + -webkit-perspective-origin: 0px -100px; + -moz-perspective-origin: 0px -100px; + -ms-perspective-origin: 0px -100px; + perspective-origin: 0px -100px; } .reveal .slides>section, @@ -494,28 +553,63 @@ body { display: none; position: absolute; width: 100%; - min-height: 600px; + padding: 20px 0px; + + z-index: 10; + line-height: 1.2em; + font-weight: normal; - z-index: 10; - -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; - - -webkit-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); - -moz-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); - -ms-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); - -o-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); - transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); -} -.reveal .slides>section.present { + -webkit-transition: -webkit-transform-origin 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985), + -webkit-transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985), + visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985), + opacity 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + -moz-transition: -moz-transform-origin 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985), + -moz-transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985), + visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985), + opacity 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + -ms-transition: -ms-transform-origin 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985), + -ms-transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985), + visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985), + opacity 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + -o-transition: -o-transform-origin 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985), + -o-transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985), + visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985), + opacity 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + transition: transform-origin 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985), + transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985), + visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985), + opacity 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); +} + +.reveal .slides>section { + left: -50%; + top: -50%; +} + +.reveal .slides>section.stack { + padding-top: 0; + padding-bottom: 0; +} + +.reveal .slides>section.present, +.reveal .slides>section>section.present { display: block; z-index: 11; opacity: 1; } +.reveal.center, +.reveal.center .slides, +.reveal.center .slides section { + min-height: auto !important; +} + + /********************************************* * DEFAULT TRANSITION @@ -524,7 +618,7 @@ body { .reveal .slides>section.past { display: block; opacity: 0; - + -webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); -moz-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); -ms-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); @@ -533,7 +627,7 @@ body { .reveal .slides>section.future { display: block; opacity: 0; - + -webkit-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0); -moz-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0); -ms-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0); @@ -543,20 +637,20 @@ body { .reveal .slides>section>section.past { display: block; opacity: 0; - - -webkit-transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0); - -moz-transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0); - -ms-transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0); - transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0); + + -webkit-transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0); + -moz-transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0); + -ms-transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0); + transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0); } .reveal .slides>section>section.future { display: block; opacity: 0; - - -webkit-transform: translate3d(0, 50%, 0) rotateX(-70deg) translate3d(0, 50%, 0); - -moz-transform: translate3d(0, 50%, 0) rotateX(-70deg) translate3d(0, 50%, 0); - -ms-transform: translate3d(0, 50%, 0) rotateX(-70deg) translate3d(0, 50%, 0); - transform: translate3d(0, 50%, 0) rotateX(-70deg) translate3d(0, 50%, 0); + + -webkit-transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0); + -moz-transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0); + -ms-transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0); + transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0); } @@ -592,6 +686,47 @@ body { /********************************************* + * ZOOM TRANSITION + *********************************************/ + +.reveal.zoom .slides>section.past { + opacity: 0; + visibility: hidden; + + -webkit-transform: scale(16); + -moz-transform: scale(16); + -ms-transform: scale(16); + -o-transform: scale(16); + transform: scale(16); +} +.reveal.zoom .slides>section.future { + opacity: 0; + visibility: hidden; + + -webkit-transform: scale(0.2); + -moz-transform: scale(0.2); + -ms-transform: scale(0.2); + -o-transform: scale(0.2); + transform: scale(0.2); +} + +.reveal.zoom .slides>section>section.past { + -webkit-transform: translate(0, -150%); + -moz-transform: translate(0, -150%); + -ms-transform: translate(0, -150%); + -o-transform: translate(0, -150%); + transform: translate(0, -150%); +} +.reveal.zoom .slides>section>section.future { + -webkit-transform: translate(0, 150%); + -moz-transform: translate(0, 150%); + -ms-transform: translate(0, 150%); + -o-transform: translate(0, 150%); + transform: translate(0, 150%); +} + + +/********************************************* * LINEAR TRANSITION *********************************************/ @@ -625,18 +760,12 @@ body { transform: translate(0, 150%); } + /********************************************* - * BOX TRANSITION + * CUBE TRANSITION *********************************************/ .reveal.cube .slides { - margin-top: -350px; - - -webkit-perspective-origin: 50% 25%; - -moz-perspective-origin: 50% 25%; - -ms-perspective-origin: 50% 25%; - perspective-origin: 50% 25%; - -webkit-perspective: 1300px; -moz-perspective: 1300px; -ms-perspective: 1300px; @@ -645,16 +774,20 @@ body { .reveal.cube .slides section { padding: 30px; + min-height: 600px; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; - + -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } + .reveal.center.cube .slides section { + min-height: auto; + } .reveal.cube .slides section:not(.stack):before { content: ''; position: absolute; @@ -663,7 +796,7 @@ body { height: 100%; left: 0; top: 0; - background: #232628; + background: rgba(0,0,0,0.1); border-radius: 4px; -webkit-transform: translateZ( -20px ); @@ -752,12 +885,10 @@ body { *********************************************/ .reveal.page .slides { - margin-top: -350px; - - -webkit-perspective-origin: 50% 50%; - -moz-perspective-origin: 50% 50%; - -ms-perspective-origin: 50% 50%; - perspective-origin: 50% 50%; + -webkit-perspective-origin: 0% 50%; + -moz-perspective-origin: 0% 50%; + -ms-perspective-origin: 0% 50%; + perspective-origin: 0% 50%; -webkit-perspective: 3000px; -moz-perspective: 3000px; @@ -767,6 +898,7 @@ body { .reveal.page .slides section { padding: 30px; + min-height: 600px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; @@ -783,7 +915,7 @@ body { height: 100%; left: 0; top: 0; - background: rgba(0,0,0,0.2); + background: rgba(0,0,0,0.1); -webkit-transform: translateZ( -20px ); -moz-transform: translateZ( -20px ); @@ -863,10 +995,66 @@ body { /********************************************* + * FADE TRANSITION + *********************************************/ + +.reveal.fade .slides section, +.reveal.fade .slides>section>section { + -webkit-transform: none; + -moz-transform: none; + -ms-transform: none; + -o-transform: none; + transform: none; + + -webkit-transition: opacity 0.5s; + -moz-transition: opacity 0.5s; + -ms-transition: opacity 0.5s; + -o-transition: opacity 0.5s; + transition: opacity 0.5s; +} + + +.reveal.fade.overview .slides section, +.reveal.fade.overview .slides>section>section, +.reveal.fade.exit-overview .slides section, +.reveal.fade.exit-overview .slides>section>section { + -webkit-transition: none; + -moz-transition: none; + -ms-transition: none; + -o-transition: none; + transition: none; +} + + +/********************************************* + * NO TRANSITION + *********************************************/ + +.reveal.none .slides section { + -webkit-transform: none; + -moz-transform: none; + -ms-transform: none; + -o-transform: none; + transform: none; + + -webkit-transition: none; + -moz-transition: none; + -ms-transition: none; + -o-transition: none; + transition: none; +} + + +/********************************************* * OVERVIEW *********************************************/ .reveal.overview .slides { + -webkit-perspective-origin: 0% 0%; + -moz-perspective-origin: 0% 0%; + -ms-perspective-origin: 0% 0%; + perspective-origin: 0% 0%; + -webkit-perspective: 700px; -moz-perspective: 700px; -ms-perspective: 700px; @@ -874,13 +1062,15 @@ body { } .reveal.overview .slides section { - padding: 20px 0; - opacity: 1; + height: 600px; + overflow: hidden; + opacity: 1!important; + visibility: visible!important; cursor: pointer; background: rgba(0,0,0,0.1); } .reveal.overview .slides section .fragment { - opacity: 1; + opacity: 1; } .reveal.overview .slides section:after, .reveal.overview .slides section:before { @@ -893,13 +1083,40 @@ body { .reveal.overview .slides section:hover { background: rgba(0,0,0,0.3); } - .reveal.overview .slides section.present { background: rgba(0,0,0,0.3); } .reveal.overview .slides>section.stack { - background: none; padding: 0; + background: none; + overflow: visible; +} + + +/********************************************* + * PAUSED MODE + *********************************************/ + +.reveal .pause-overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: black; + visibility: hidden; + opacity: 0; + z-index: 100; + + -webkit-transition: all 1s ease; + -moz-transition: all 1s ease; + -ms-transition: all 1s ease; + -o-transition: all 1s ease; + transition: all 1s ease; +} +.reveal.paused .pause-overlay { + visibility: visible; + opacity: 1; } @@ -911,13 +1128,23 @@ body { overflow-y: auto; } +.no-transforms .slides { + width: 80%; + top: 0; + left: 50%; + margin: 0; + text-align: center; +} + .no-transforms .slides section { display: block!important; opacity: 1!important; position: relative!important; height: auto; min-height: auto; - margin-bottom: 100px; + top: 0; + left: -50%; + margin: 70px 0; -webkit-transform: none; -moz-transform: none; @@ -925,12 +1152,24 @@ body { transform: none; } +.no-transforms .slides section section { + left: 0; +} + +.no-transition { + -webkit-transition: none; + -moz-transition: none; + -ms-transition: none; + -o-transition: none; + transition: none; +} + /********************************************* - * DEFAULT STATES + * BACKGROUND STATES *********************************************/ -.state-background { +.reveal .state-background { position: absolute; width: 100%; height: 100%; @@ -942,83 +1181,81 @@ body { -o-transition: background 800ms ease; transition: background 800ms ease; } -.alert .state-background { +.alert .reveal .state-background { background: rgba( 200, 50, 30, 0.6 ); } -.soothe .state-background { +.soothe .reveal .state-background { background: rgba( 50, 200, 90, 0.4 ); } -.blackout .state-background { +.blackout .reveal .state-background { background: rgba( 0, 0, 0, 0.6 ); } /********************************************* - * SPEAKER NOTES + * RTL SUPPORT *********************************************/ -.reveal aside.notes { - display: none; +.reveal.rtl .slides, +.reveal.rtl .slides h1, +.reveal.rtl .slides h2, +.reveal.rtl .slides h3, +.reveal.rtl .slides h4, +.reveal.rtl .slides h5, +.reveal.rtl .slides h6 { + direction: rtl; + font-family: sans-serif; } - -/********************************************* - * NEON THEME - *********************************************/ - -.theme-neon .reveal a, -.theme-neon .reveal a:hover, -.theme-neon .reveal .controls a.enabled { - color: #5de048; +.reveal.rtl pre, +.reveal.rtl code { + direction: ltr; } -.theme-neon .reveal .progress span, -.theme-neon .reveal .roll span:after { - background: #5de048; +.reveal.rtl ol, +.reveal.rtl ul { + text-align: right; } -.theme-neon .reveal a.image:hover img { - border-color: #5de048; + +/********************************************* + * SPEAKER NOTES + *********************************************/ + +.reveal aside.notes { + display: none; } /********************************************* - * BEIGE THEME + * ZOOM PLUGIN *********************************************/ -.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; +.zoomed .reveal *, +.zoomed .reveal *:before, +.zoomed .reveal *:after { + -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; } -.theme-beige .reveal a, -.theme-beige .reveal a:hover, -.theme-beige .reveal .controls a.enabled { - color: #8b743d; +.zoomed .reveal .progress, +.zoomed .reveal .controls { + opacity: 0; } -.theme-beige .reveal .progress span, -.theme-beige .reveal .roll span:after { - background: #8b743d; +.zoomed .reveal .roll span { + background: none; } -.theme-beige .reveal a.image:hover img { - border-color: #8b743d; +.zoomed .reveal .roll span:after { + visibility: hidden; } + + diff --git a/css/reveal.min.css b/css/reveal.min.css new file mode 100644 index 0000000..7dd814a --- /dev/null +++ b/css/reveal.min.css @@ -0,0 +1,7 @@ +@charset "UTF-8";/*! + * reveal.js + * http://lab.hakim.se/reveal-js + * MIT licensed + * + * Copyright (C) 2013 Hakim El Hattab, http://hakim.se + */ html,body,.reveal div,.reveal span,.reveal applet,.reveal object,.reveal iframe,.reveal h1,.reveal h2,.reveal h3,.reveal h4,.reveal h5,.reveal h6,.reveal p,.reveal blockquote,.reveal pre,.reveal a,.reveal abbr,.reveal acronym,.reveal address,.reveal big,.reveal cite,.reveal code,.reveal del,.reveal dfn,.reveal em,.reveal img,.reveal ins,.reveal kbd,.reveal q,.reveal s,.reveal samp,.reveal small,.reveal strike,.reveal strong,.reveal sub,.reveal sup,.reveal tt,.reveal var,.reveal b,.reveal u,.reveal i,.reveal center,.reveal dl,.reveal dt,.reveal dd,.reveal ol,.reveal ul,.reveal li,.reveal fieldset,.reveal form,.reveal label,.reveal legend,.reveal table,.reveal caption,.reveal tbody,.reveal tfoot,.reveal thead,.reveal tr,.reveal th,.reveal td,.reveal article,.reveal aside,.reveal canvas,.reveal details,.reveal embed,.reveal figure,.reveal figcaption,.reveal footer,.reveal header,.reveal hgroup,.reveal menu,.reveal nav,.reveal output,.reveal ruby,.reveal section,.reveal summary,.reveal time,.reveal mark,.reveal audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}.reveal article,.reveal aside,.reveal details,.reveal figcaption,.reveal figure,.reveal footer,.reveal header,.reveal hgroup,.reveal menu,.reveal nav,.reveal section{display:block}html,body{width:100%;height:100%;overflow:hidden}body{position:relative;line-height:1}::selection{background:#FF5E99;color:#fff;text-shadow:none}.reveal h1,.reveal h2,.reveal h3,.reveal h4,.reveal h5,.reveal h6{-webkit-hyphens:auto;-moz-hyphens:auto;hyphens:auto;word-wrap:break-word}.reveal h1{font-size:3.77em}.reveal h2{font-size:2.11em}.reveal h3{font-size:1.55em}.reveal h4{font-size:1em}.reveal .slides section .fragment{opacity:0;-webkit-transition:all .2s ease;-moz-transition:all .2s ease;-ms-transition:all .2s ease;-o-transition:all .2s ease;transition:all .2s ease}.reveal .slides section .fragment.visible{opacity:1}.reveal .slides section .fragment.grow{opacity:1}.reveal .slides section .fragment.grow.visible{-webkit-transform:scale(1.3);-moz-transform:scale(1.3);-ms-transform:scale(1.3);-o-transform:scale(1.3);transform:scale(1.3)}.reveal .slides section .fragment.shrink{opacity:1}.reveal .slides section .fragment.shrink.visible{-webkit-transform:scale(0.7);-moz-transform:scale(0.7);-ms-transform:scale(0.7);-o-transform:scale(0.7);transform:scale(0.7)}.reveal .slides section .fragment.roll-in{opacity:0;-webkit-transform:rotateX(90deg);-moz-transform:rotateX(90deg);-ms-transform:rotateX(90deg);-o-transform:rotateX(90deg);transform:rotateX(90deg)}.reveal .slides section .fragment.roll-in.visible{opacity:1;-webkit-transform:rotateX(0);-moz-transform:rotateX(0);-ms-transform:rotateX(0);-o-transform:rotateX(0);transform:rotateX(0)}.reveal .slides section .fragment.fade-out{opacity:1}.reveal .slides section .fragment.fade-out.visible{opacity:0}.reveal .slides section .fragment.highlight-red,.reveal .slides section .fragment.highlight-green,.reveal .slides section .fragment.highlight-blue{opacity:1}.reveal .slides section .fragment.highlight-red.visible{color:#ff2c2d}.reveal .slides section .fragment.highlight-green.visible{color:#17ff2e}.reveal .slides section .fragment.highlight-blue.visible{color:#1b91ff}.reveal:after{content:'';font-style:italic}.reveal img,.reveal video,.reveal iframe{max-width:95%;max-height:95%}.reveal a{position:relative}.reveal strong,.reveal b{font-weight:700}.reveal em,.reveal i{font-style:italic}.reveal ol,.reveal ul{display:inline-block;text-align:left;margin:0 0 0 1em}.reveal ol{list-style-type:decimal}.reveal ul{list-style-type:disc}.reveal ul ul{list-style-type:square}.reveal ul ul ul{list-style-type:circle}.reveal ul ul,.reveal ul ol,.reveal ol ol,.reveal ol ul{display:block;margin-left:40px}.reveal p{margin-bottom:10px;line-height:1.2em}.reveal q,.reveal blockquote{quotes:none}.reveal blockquote{display:block;position:relative;width:70%;margin:5px auto;padding:5px;font-style:italic;background:rgba(255,255,255,.05);box-shadow:0 0 2px rgba(0,0,0,.2)}.reveal blockquote p:first-child,.reveal blockquote p:last-child{display:inline-block}.reveal blockquote:before{content:'\201C'}.reveal blockquote:after{content:'\201D'}.reveal q{font-style:italic}.reveal q:before{content:'\201C'}.reveal q:after{content:'\201D'}.reveal pre{display:block;position:relative;width:90%;margin:15px auto;text-align:left;font-size:.55em;font-family:monospace;line-height:1.2em;word-wrap:break-word;box-shadow:0 0 6px rgba(0,0,0,.3)}.reveal pre code{padding:5px}.reveal code{font-family:monospace;overflow:auto;max-height:400px}.reveal table th,.reveal table td{text-align:left;padding-right:.3em}.reveal table th{text-shadow:#fff 1px 1px 2px}.reveal sup{vertical-align:super}.reveal sub{vertical-align:sub}.reveal small{display:inline-block;font-size:.6em;line-height:1.2em;vertical-align:top}.reveal small *{vertical-align:top}.reveal .controls{display:none;position:fixed;width:110px;height:110px;z-index:30;right:10px;bottom:10px}.reveal .controls div{position:absolute;opacity:.1;width:0;height:0;border:12px solid transparent;-webkit-transition:opacity .2s ease;-moz-transition:opacity .2s ease;-ms-transition:opacity .2s ease;-o-transition:opacity .2s ease;transition:opacity .2s ease}.reveal .controls div.enabled{opacity:.6;cursor:pointer}.reveal .controls div.enabled:active{margin-top:1px}.reveal .controls div.navigate-left{top:42px;border-right-width:22px;border-right-color:#eee}.reveal .controls div.navigate-right{left:74px;top:42px;border-left-width:22px;border-left-color:#eee}.reveal .controls div.navigate-up{left:42px;border-bottom-width:22px;border-bottom-color:#eee}.reveal .controls div.navigate-down{left:42px;top:74px;border-top-width:22px;border-top-color:#eee}.reveal .progress{position:fixed;display:none;height:3px;width:100%;bottom:0;left:0;z-index:10}.reveal .progress:after{content:'';display:'block';position:absolute;height:20px;width:100%;top:-20px}.reveal .progress span{display:block;height:100%;width:0;-webkit-transition:width 800ms cubic-bezier(0.26,.86,.44,.985);-moz-transition:width 800ms cubic-bezier(0.26,.86,.44,.985);-ms-transition:width 800ms cubic-bezier(0.26,.86,.44,.985);-o-transition:width 800ms cubic-bezier(0.26,.86,.44,.985);transition:width 800ms cubic-bezier(0.26,.86,.44,.985)}.reveal .roll{display:inline-block;line-height:1.2;overflow:hidden;vertical-align:top;-webkit-perspective:400px;-moz-perspective:400px;-ms-perspective:400px;perspective:400px;-webkit-perspective-origin:50% 50%;-moz-perspective-origin:50% 50%;-ms-perspective-origin:50% 50%;perspective-origin:50% 50%}.reveal .roll:hover{background:0;text-shadow:none}.reveal .roll span{display:block;position:relative;padding:0 2px;pointer-events:none;-webkit-transition:all 400ms ease;-moz-transition:all 400ms ease;-ms-transition:all 400ms ease;transition:all 400ms ease;-webkit-transform-origin:50% 0;-moz-transform-origin:50% 0;-ms-transform-origin:50% 0;transform-origin:50% 0;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;backface-visibility:hidden}.reveal .roll:hover span{background:rgba(0,0,0,.5);-webkit-transform:translate3d(0px,0,-45px) rotateX(90deg);-moz-transform:translate3d(0px,0,-45px) rotateX(90deg);-ms-transform:translate3d(0px,0,-45px) rotateX(90deg);transform:translate3d(0px,0,-45px) rotateX(90deg)}.reveal .roll span:after{content:attr(data-title);display:block;position:absolute;left:0;top:0;padding:0 2px;-webkit-transform-origin:50% 0;-moz-transform-origin:50% 0;-ms-transform-origin:50% 0;transform-origin:50% 0;-webkit-transform:translate3d(0px,110%,0) rotateX(-90deg);-moz-transform:translate3d(0px,110%,0) rotateX(-90deg);-ms-transform:translate3d(0px,110%,0) rotateX(-90deg);transform:translate3d(0px,110%,0) rotateX(-90deg)}.reveal{position:relative;width:100%;height:100%}.reveal .slides{position:absolute;width:100%;height:100%;left:50%;top:50%;overflow:visible;z-index:1;text-align:center;-webkit-transition:-webkit-perspective .4s ease;-moz-transition:-moz-perspective .4s ease;-ms-transition:-ms-perspective .4s ease;-o-transition:-o-perspective .4s ease;transition:perspective .4s ease;-webkit-perspective:600px;-moz-perspective:600px;-ms-perspective:600px;perspective:600px;-webkit-perspective-origin:0 -100px;-moz-perspective-origin:0 -100px;-ms-perspective-origin:0 -100px;perspective-origin:0 -100px}.reveal .slides>section,.reveal .slides>section>section{display:none;position:absolute;width:100%;padding:20px 0;z-index:10;line-height:1.2em;font-weight:400;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transition:-webkit-transform-origin 800ms cubic-bezier(0.26,.86,.44,.985),-webkit-transform 800ms cubic-bezier(0.26,.86,.44,.985),visibility 800ms cubic-bezier(0.26,.86,.44,.985),opacity 800ms cubic-bezier(0.26,.86,.44,.985);-moz-transition:-moz-transform-origin 800ms cubic-bezier(0.26,.86,.44,.985),-moz-transform 800ms cubic-bezier(0.26,.86,.44,.985),visibility 800ms cubic-bezier(0.26,.86,.44,.985),opacity 800ms cubic-bezier(0.26,.86,.44,.985);-ms-transition:-ms-transform-origin 800ms cubic-bezier(0.26,.86,.44,.985),-ms-transform 800ms cubic-bezier(0.26,.86,.44,.985),visibility 800ms cubic-bezier(0.26,.86,.44,.985),opacity 800ms cubic-bezier(0.26,.86,.44,.985);-o-transition:-o-transform-origin 800ms cubic-bezier(0.26,.86,.44,.985),-o-transform 800ms cubic-bezier(0.26,.86,.44,.985),visibility 800ms cubic-bezier(0.26,.86,.44,.985),opacity 800ms cubic-bezier(0.26,.86,.44,.985);transition:transform-origin 800ms cubic-bezier(0.26,.86,.44,.985),transform 800ms cubic-bezier(0.26,.86,.44,.985),visibility 800ms cubic-bezier(0.26,.86,.44,.985),opacity 800ms cubic-bezier(0.26,.86,.44,.985)}.reveal .slides>section{left:-50%;top:-50%}.reveal .slides>section.stack{padding-top:0;padding-bottom:0}.reveal .slides>section.present,.reveal .slides>section>section.present{display:block;z-index:11;opacity:1}.reveal.center,.reveal.center .slides,.reveal.center .slides section{min-height:auto!important}.reveal .slides>section.past{display:block;opacity:0;-webkit-transform:translate3d(-100%,0,0) rotateY(-90deg) translate3d(-100%,0,0);-moz-transform:translate3d(-100%,0,0) rotateY(-90deg) translate3d(-100%,0,0);-ms-transform:translate3d(-100%,0,0) rotateY(-90deg) translate3d(-100%,0,0);transform:translate3d(-100%,0,0) rotateY(-90deg) translate3d(-100%,0,0)}.reveal .slides>section.future{display:block;opacity:0;-webkit-transform:translate3d(100%,0,0) rotateY(90deg) translate3d(100%,0,0);-moz-transform:translate3d(100%,0,0) rotateY(90deg) translate3d(100%,0,0);-ms-transform:translate3d(100%,0,0) rotateY(90deg) translate3d(100%,0,0);transform:translate3d(100%,0,0) rotateY(90deg) translate3d(100%,0,0)}.reveal .slides>section>section.past{display:block;opacity:0;-webkit-transform:translate3d(0,-300px,0) rotateX(70deg) translate3d(0,-300px,0);-moz-transform:translate3d(0,-300px,0) rotateX(70deg) translate3d(0,-300px,0);-ms-transform:translate3d(0,-300px,0) rotateX(70deg) translate3d(0,-300px,0);transform:translate3d(0,-300px,0) rotateX(70deg) translate3d(0,-300px,0)}.reveal .slides>section>section.future{display:block;opacity:0;-webkit-transform:translate3d(0,300px,0) rotateX(-70deg) translate3d(0,300px,0);-moz-transform:translate3d(0,300px,0) rotateX(-70deg) translate3d(0,300px,0);-ms-transform:translate3d(0,300px,0) rotateX(-70deg) translate3d(0,300px,0);transform:translate3d(0,300px,0) rotateX(-70deg) translate3d(0,300px,0)}.reveal.concave .slides>section.past{-webkit-transform:translate3d(-100%,0,0) rotateY(90deg) translate3d(-100%,0,0);-moz-transform:translate3d(-100%,0,0) rotateY(90deg) translate3d(-100%,0,0);-ms-transform:translate3d(-100%,0,0) rotateY(90deg) translate3d(-100%,0,0);transform:translate3d(-100%,0,0) rotateY(90deg) translate3d(-100%,0,0)}.reveal.concave .slides>section.future{-webkit-transform:translate3d(100%,0,0) rotateY(-90deg) translate3d(100%,0,0);-moz-transform:translate3d(100%,0,0) rotateY(-90deg) translate3d(100%,0,0);-ms-transform:translate3d(100%,0,0) rotateY(-90deg) translate3d(100%,0,0);transform:translate3d(100%,0,0) rotateY(-90deg) translate3d(100%,0,0)}.reveal.concave .slides>section>section.past{-webkit-transform:translate3d(0,-80%,0) rotateX(-70deg) translate3d(0,-80%,0);-moz-transform:translate3d(0,-80%,0) rotateX(-70deg) translate3d(0,-80%,0);-ms-transform:translate3d(0,-80%,0) rotateX(-70deg) translate3d(0,-80%,0);transform:translate3d(0,-80%,0) rotateX(-70deg) translate3d(0,-80%,0)}.reveal.concave .slides>section>section.future{-webkit-transform:translate3d(0,80%,0) rotateX(70deg) translate3d(0,80%,0);-moz-transform:translate3d(0,80%,0) rotateX(70deg) translate3d(0,80%,0);-ms-transform:translate3d(0,80%,0) rotateX(70deg) translate3d(0,80%,0);transform:translate3d(0,80%,0) rotateX(70deg) translate3d(0,80%,0)}.reveal.zoom .slides>section.past{opacity:0;visibility:hidden;-webkit-transform:scale(16);-moz-transform:scale(16);-ms-transform:scale(16);-o-transform:scale(16);transform:scale(16)}.reveal.zoom .slides>section.future{opacity:0;visibility:hidden;-webkit-transform:scale(0.2);-moz-transform:scale(0.2);-ms-transform:scale(0.2);-o-transform:scale(0.2);transform:scale(0.2)}.reveal.zoom .slides>section>section.past{-webkit-transform:translate(0,-150%);-moz-transform:translate(0,-150%);-ms-transform:translate(0,-150%);-o-transform:translate(0,-150%);transform:translate(0,-150%)}.reveal.zoom .slides>section>section.future{-webkit-transform:translate(0,150%);-moz-transform:translate(0,150%);-ms-transform:translate(0,150%);-o-transform:translate(0,150%);transform:translate(0,150%)}.reveal.linear .slides>section.past{-webkit-transform:translate(-150%,0);-moz-transform:translate(-150%,0);-ms-transform:translate(-150%,0);-o-transform:translate(-150%,0);transform:translate(-150%,0)}.reveal.linear .slides>section.future{-webkit-transform:translate(150%,0);-moz-transform:translate(150%,0);-ms-transform:translate(150%,0);-o-transform:translate(150%,0);transform:translate(150%,0)}.reveal.linear .slides>section>section.past{-webkit-transform:translate(0,-150%);-moz-transform:translate(0,-150%);-ms-transform:translate(0,-150%);-o-transform:translate(0,-150%);transform:translate(0,-150%)}.reveal.linear .slides>section>section.future{-webkit-transform:translate(0,150%);-moz-transform:translate(0,150%);-ms-transform:translate(0,150%);-o-transform:translate(0,150%);transform:translate(0,150%)}.reveal.cube .slides{-webkit-perspective:1300px;-moz-perspective:1300px;-ms-perspective:1300px;perspective:1300px}.reveal.cube .slides section{padding:30px;min-height:600px;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;backface-visibility:hidden;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.reveal.center.cube .slides section{min-height:auto}.reveal.cube .slides section:not(.stack):before{content:'';position:absolute;display:block;width:100%;height:100%;left:0;top:0;background:rgba(0,0,0,.1);border-radius:4px;-webkit-transform:translateZ(-20px);-moz-transform:translateZ(-20px);-ms-transform:translateZ(-20px);-o-transform:translateZ(-20px);transform:translateZ(-20px)}.reveal.cube .slides section:not(.stack):after{content:'';position:absolute;display:block;width:90%;height:30px;left:5%;bottom:0;background:0;z-index:1;border-radius:4px;box-shadow:0 95px 25px rgba(0,0,0,.2);-webkit-transform:translateZ(-90px) rotateX(65deg);-moz-transform:translateZ(-90px) rotateX(65deg);-ms-transform:translateZ(-90px) rotateX(65deg);-o-transform:translateZ(-90px) rotateX(65deg);transform:translateZ(-90px) rotateX(65deg)}.reveal.cube .slides>section.stack{padding:0;background:0}.reveal.cube .slides>section.past{-webkit-transform-origin:100% 0;-moz-transform-origin:100% 0;-ms-transform-origin:100% 0;transform-origin:100% 0;-webkit-transform:translate3d(-100%,0,0) rotateY(-90deg);-moz-transform:translate3d(-100%,0,0) rotateY(-90deg);-ms-transform:translate3d(-100%,0,0) rotateY(-90deg);transform:translate3d(-100%,0,0) rotateY(-90deg)}.reveal.cube .slides>section.future{-webkit-transform-origin:0 0;-moz-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translate3d(100%,0,0) rotateY(90deg);-moz-transform:translate3d(100%,0,0) rotateY(90deg);-ms-transform:translate3d(100%,0,0) rotateY(90deg);transform:translate3d(100%,0,0) rotateY(90deg)}.reveal.cube .slides>section>section.past{-webkit-transform-origin:0 100%;-moz-transform-origin:0 100%;-ms-transform-origin:0 100%;transform-origin:0 100%;-webkit-transform:translate3d(0,-100%,0) rotateX(90deg);-moz-transform:translate3d(0,-100%,0) rotateX(90deg);-ms-transform:translate3d(0,-100%,0) rotateX(90deg);transform:translate3d(0,-100%,0) rotateX(90deg)}.reveal.cube .slides>section>section.future{-webkit-transform-origin:0 0;-moz-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translate3d(0,100%,0) rotateX(-90deg);-moz-transform:translate3d(0,100%,0) rotateX(-90deg);-ms-transform:translate3d(0,100%,0) rotateX(-90deg);transform:translate3d(0,100%,0) rotateX(-90deg)}.reveal.page .slides{-webkit-perspective-origin:0 50%;-moz-perspective-origin:0 50%;-ms-perspective-origin:0 50%;perspective-origin:0 50%;-webkit-perspective:3000px;-moz-perspective:3000px;-ms-perspective:3000px;perspective:3000px}.reveal.page .slides section{padding:30px;min-height:600px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.reveal.page .slides section.past{z-index:12}.reveal.page .slides section:not(.stack):before{content:'';position:absolute;display:block;width:100%;height:100%;left:0;top:0;background:rgba(0,0,0,.1);-webkit-transform:translateZ(-20px);-moz-transform:translateZ(-20px);-ms-transform:translateZ(-20px);-o-transform:translateZ(-20px);transform:translateZ(-20px)}.reveal.page .slides section:not(.stack):after{content:'';position:absolute;display:block;width:90%;height:30px;left:5%;bottom:0;background:0;z-index:1;border-radius:4px;box-shadow:0 95px 25px rgba(0,0,0,.2);-webkit-transform:translateZ(-90px) rotateX(65deg)}.reveal.page .slides>section.stack{padding:0;background:0}.reveal.page .slides>section.past{-webkit-transform-origin:0 0;-moz-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translate3d(-40%,0,0) rotateY(-80deg);-moz-transform:translate3d(-40%,0,0) rotateY(-80deg);-ms-transform:translate3d(-40%,0,0) rotateY(-80deg);transform:translate3d(-40%,0,0) rotateY(-80deg)}.reveal.page .slides>section.future{-webkit-transform-origin:100% 0;-moz-transform-origin:100% 0;-ms-transform-origin:100% 0;transform-origin:100% 0;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.reveal.page .slides>section>section.past{-webkit-transform-origin:0 0;-moz-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translate3d(0,-40%,0) rotateX(80deg);-moz-transform:translate3d(0,-40%,0) rotateX(80deg);-ms-transform:translate3d(0,-40%,0) rotateX(80deg);transform:translate3d(0,-40%,0) rotateX(80deg)}.reveal.page .slides>section>section.future{-webkit-transform-origin:0 100%;-moz-transform-origin:0 100%;-ms-transform-origin:0 100%;transform-origin:0 100%;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.reveal.fade .slides section,.reveal.fade .slides>section>section{-webkit-transform:none;-moz-transform:none;-ms-transform:none;-o-transform:none;transform:none;-webkit-transition:opacity .5s;-moz-transition:opacity .5s;-ms-transition:opacity .5s;-o-transition:opacity .5s;transition:opacity .5s}.reveal.fade.overview .slides section,.reveal.fade.overview .slides>section>section,.reveal.fade.exit-overview .slides section,.reveal.fade.exit-overview .slides>section>section{-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none}.reveal.none .slides section{-webkit-transform:none;-moz-transform:none;-ms-transform:none;-o-transform:none;transform:none;-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none}.reveal.overview .slides{-webkit-perspective-origin:0 0;-moz-perspective-origin:0 0;-ms-perspective-origin:0 0;perspective-origin:0 0;-webkit-perspective:700px;-moz-perspective:700px;-ms-perspective:700px;perspective:700px}.reveal.overview .slides section{height:600px;overflow:hidden;opacity:1!important;visibility:visible!important;cursor:pointer;background:rgba(0,0,0,.1)}.reveal.overview .slides section .fragment{opacity:1}.reveal.overview .slides section:after,.reveal.overview .slides section:before{display:none!important}.reveal.overview .slides section>section{opacity:1;cursor:pointer}.reveal.overview .slides section:hover{background:rgba(0,0,0,.3)}.reveal.overview .slides section.present{background:rgba(0,0,0,.3)}.reveal.overview .slides>section.stack{padding:0;background:0;overflow:visible}.reveal .pause-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#000;visibility:hidden;opacity:0;z-index:100;-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-ms-transition:all 1s ease;-o-transition:all 1s ease;transition:all 1s ease}.reveal.paused .pause-overlay{visibility:visible;opacity:1}.no-transforms{overflow-y:auto}.no-transforms .slides{width:80%;top:0;left:50%;margin:0;text-align:center}.no-transforms .slides section{display:block!important;opacity:1!important;position:relative!important;height:auto;min-height:auto;top:0;left:-50%;margin:70px 0;-webkit-transform:none;-moz-transform:none;-ms-transform:none;transform:none}.no-transforms .slides section section{left:0}.no-transition{-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none}.reveal .state-background{position:absolute;width:100%;height:100%;background:rgba(0,0,0,0);-webkit-transition:background 800ms ease;-moz-transition:background 800ms ease;-ms-transition:background 800ms ease;-o-transition:background 800ms ease;transition:background 800ms ease}.alert .reveal .state-background{background:rgba(200,50,30,.6)}.soothe .reveal .state-background{background:rgba(50,200,90,.4)}.blackout .reveal .state-background{background:rgba(0,0,0,.6)}.reveal.rtl .slides,.reveal.rtl .slides h1,.reveal.rtl .slides h2,.reveal.rtl .slides h3,.reveal.rtl .slides h4,.reveal.rtl .slides h5,.reveal.rtl .slides h6{direction:rtl;font-family:sans-serif}.reveal.rtl pre,.reveal.rtl code{direction:ltr}.reveal.rtl ol,.reveal.rtl ul{text-align:right}.reveal aside.notes{display:none}.zoomed .reveal *,.zoomed .reveal :before,.zoomed .reveal :after{-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,.zoomed .reveal .controls{opacity:0}.zoomed .reveal .roll span{background:0}.zoomed .reveal .roll span:after{visibility:hidden}
\ No newline at end of file diff --git a/css/theme/README.md b/css/theme/README.md new file mode 100644 index 0000000..f3a2a2b --- /dev/null +++ b/css/theme/README.md @@ -0,0 +1,25 @@ +## Dependencies + +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 +``` + + + +## Creating a Theme + +To create your own theme, start by duplicating any ```.scss``` file in [/css/theme/source](https://github.com/hakimel/reveal.js/blob/master/css/theme/source). Each theme does four things in the following order: + +1. **Include [/css/theme/template/mixins.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/mixins.scss)** +Shared utility functions. + +2. **Include [/css/theme/template/settings.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/settings.scss)** +Declares a set of custom variables that the template file (step 4) expects. Can be overridden in step 3. + +3. **Override** +This is where you override the default theme. Either by specifying variables (see [settings.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/settings.scss) for reference) or by adding full selectors with hardcoded styles. + +4. **Include [/css/theme/template/theme.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/theme.scss)** +The template theme file which will generate final CSS output based on the currently defined variables. diff --git a/css/theme/beige.css b/css/theme/beige.css new file mode 100644 index 0000000..d9f8501 --- /dev/null +++ b/css/theme/beige.css @@ -0,0 +1,163 @@ +@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 + */ +@font-face { + font-family: 'League Gothic'; + src: url("../../lib/font/league_gothic-webfont.eot"); + src: url("../../lib/font/league_gothic-webfont.eot?#iefix") format("embedded-opentype"), url("../../lib/font/league_gothic-webfont.woff") format("woff"), url("../../lib/font/league_gothic-webfont.ttf") format("truetype"), url("../../lib/font/league_gothic-webfont.svg#LeagueGothicRegular") format("svg"); + font-weight: normal; + font-style: normal; +} + +/********************************************* + * GLOBAL STYLES + *********************************************/ +body { + background: #f7f2d3; + background: -moz-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%); + background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, white), color-stop(100%, #f7f2d3)); + background: -webkit-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%); + background: -o-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%); + background: -ms-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%); + background: radial-gradient(center, circle cover, white 0%, #f7f2d3 100%); + background-color: #f7f3de; +} + +.reveal { + font-family: "Lato", Times, "Times New Roman", serif; + font-size: 36px; + font-weight: 200; + letter-spacing: -0.02em; + color: #333333; +} + +::selection { + color: white; + background: rgba(79, 64, 28, 0.99); + text-shadow: none; +} + +/********************************************* + * HEADERS + *********************************************/ +.reveal h1, +.reveal h2, +.reveal h3, +.reveal h4, +.reveal h5, +.reveal h6 { + margin: 0 0 20px 0; + color: #333333; + font-family: "League Gothic", Impact, sans-serif; + line-height: 0.9em; + letter-spacing: 0.02em; + text-transform: uppercase; + text-shadow: none; +} + +.reveal h1 { + text-shadow: 0 1px 0 #cccccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbbbbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaaaaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 20px 20px rgba(0, 0, 0, 0.15); +} + +/********************************************* + * LINKS + *********************************************/ +.reveal a:not(.image) { + color: #8b743d; + text-decoration: none; + -webkit-transition: color .15s ease; + -moz-transition: color .15s ease; + -ms-transition: color .15s ease; + -o-transition: color .15s ease; + transition: color .15s ease; +} + +.reveal a:not(.image):hover { + color: #c0a86e; + text-shadow: none; + border: none; +} + +.reveal .roll span:after { + color: #fff; + background: #564826; +} + +/********************************************* + * IMAGES + *********************************************/ +.reveal section img { + margin: 15px 0px; + background: rgba(255, 255, 255, 0.12); + border: 4px solid #333333; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); + -webkit-transition: all .2s linear; + -moz-transition: all .2s linear; + -ms-transition: all .2s linear; + -o-transition: all .2s linear; + transition: all .2s linear; +} + +.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 div.navigate-left, +.reveal .controls div.navigate-left.enabled { + border-right-color: #8b743d; +} + +.reveal .controls div.navigate-right, +.reveal .controls div.navigate-right.enabled { + border-left-color: #8b743d; +} + +.reveal .controls div.navigate-up, +.reveal .controls div.navigate-up.enabled { + border-bottom-color: #8b743d; +} + +.reveal .controls div.navigate-down, +.reveal .controls div.navigate-down.enabled { + border-top-color: #8b743d; +} + +.reveal .controls div.navigate-left.enabled:hover { + border-right-color: #c0a86e; +} + +.reveal .controls div.navigate-right.enabled:hover { + border-left-color: #c0a86e; +} + +.reveal .controls div.navigate-up.enabled:hover { + border-bottom-color: #c0a86e; +} + +.reveal .controls div.navigate-down.enabled:hover { + border-top-color: #c0a86e; +} + +/********************************************* + * PROGRESS BAR + *********************************************/ +.reveal .progress { + background: rgba(0, 0, 0, 0.2); +} + +.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 new file mode 100644 index 0000000..86e65ce --- /dev/null +++ b/css/theme/default.css @@ -0,0 +1,163 @@ +@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 + */ +@font-face { + font-family: 'League Gothic'; + src: url("../../lib/font/league_gothic-webfont.eot"); + src: url("../../lib/font/league_gothic-webfont.eot?#iefix") format("embedded-opentype"), url("../../lib/font/league_gothic-webfont.woff") format("woff"), url("../../lib/font/league_gothic-webfont.ttf") format("truetype"), url("../../lib/font/league_gothic-webfont.svg#LeagueGothicRegular") format("svg"); + font-weight: normal; + font-style: normal; +} + +/********************************************* + * GLOBAL STYLES + *********************************************/ +body { + background: #1c1e20; + background: -moz-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%); + background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #555a5f), color-stop(100%, #1c1e20)); + background: -webkit-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%); + background: -o-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%); + background: -ms-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%); + background: radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%); + background-color: #2b2b2b; +} + +.reveal { + font-family: "Lato", 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 h6 { + margin: 0 0 20px 0; + color: #eeeeee; + font-family: "League Gothic", Impact, sans-serif; + line-height: 0.9em; + letter-spacing: 0.02em; + text-transform: uppercase; + text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); +} + +.reveal h1 { + text-shadow: 0 1px 0 #cccccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbbbbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaaaaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 20px 20px rgba(0, 0, 0, 0.15); +} + +/********************************************* + * LINKS + *********************************************/ +.reveal a:not(.image) { + color: #13daec; + text-decoration: none; + -webkit-transition: color .15s ease; + -moz-transition: color .15s ease; + -ms-transition: color .15s ease; + -o-transition: color .15s ease; + transition: color .15s ease; +} + +.reveal a:not(.image):hover { + color: #71e9f4; + text-shadow: none; + border: none; +} + +.reveal .roll span:after { + color: #fff; + background: #0d99a5; +} + +/********************************************* + * IMAGES + *********************************************/ +.reveal section img { + margin: 15px 0px; + background: rgba(255, 255, 255, 0.12); + border: 4px solid #eeeeee; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); + -webkit-transition: all .2s linear; + -moz-transition: all .2s linear; + -ms-transition: all .2s linear; + -o-transition: all .2s linear; + transition: all .2s linear; +} + +.reveal a:hover img { + background: rgba(255, 255, 255, 0.2); + border-color: #13daec; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); +} + +/********************************************* + * NAVIGATION CONTROLS + *********************************************/ +.reveal .controls div.navigate-left, +.reveal .controls div.navigate-left.enabled { + border-right-color: #13daec; +} + +.reveal .controls div.navigate-right, +.reveal .controls div.navigate-right.enabled { + border-left-color: #13daec; +} + +.reveal .controls div.navigate-up, +.reveal .controls div.navigate-up.enabled { + border-bottom-color: #13daec; +} + +.reveal .controls div.navigate-down, +.reveal .controls div.navigate-down.enabled { + border-top-color: #13daec; +} + +.reveal .controls div.navigate-left.enabled:hover { + border-right-color: #71e9f4; +} + +.reveal .controls div.navigate-right.enabled:hover { + border-left-color: #71e9f4; +} + +.reveal .controls div.navigate-up.enabled:hover { + border-bottom-color: #71e9f4; +} + +.reveal .controls div.navigate-down.enabled:hover { + border-top-color: #71e9f4; +} + +/********************************************* + * PROGRESS BAR + *********************************************/ +.reveal .progress { + background: rgba(0, 0, 0, 0.2); +} + +.reveal .progress span { + background: #13daec; + -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); + -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); + -ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); + -o-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); + transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); +} diff --git a/css/theme/night.css b/css/theme/night.css new file mode 100644 index 0000000..f10598f --- /dev/null +++ b/css/theme/night.css @@ -0,0 +1,150 @@ +@import url(http://fonts.googleapis.com/css?family=Montserrat:700); +@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic); +/** + * Black theme for reveal.js. + * + * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se + */ +/********************************************* + * GLOBAL STYLES + *********************************************/ +body { + background: #111111; + background-color: #111111; +} + +.reveal { + font-family: "Open Sans", Times, "Times New Roman", serif; + font-size: 30px; + font-weight: 200; + letter-spacing: -0.02em; + color: #eeeeee; +} + +::selection { + color: white; + background: #e7ad52; + text-shadow: none; +} + +/********************************************* + * HEADERS + *********************************************/ +.reveal h1, +.reveal h2, +.reveal h3, +.reveal h4, +.reveal h5, +.reveal h6 { + margin: 0 0 20px 0; + color: #eeeeee; + font-family: "Montserrat", Impact, sans-serif; + line-height: 0.9em; + letter-spacing: -0.03em; + 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: #e7ad52; + text-decoration: none; + -webkit-transition: color .15s ease; + -moz-transition: color .15s ease; + -ms-transition: color .15s ease; + -o-transition: color .15s ease; + transition: color .15s ease; +} + +.reveal a:not(.image):hover { + color: #f3d7ac; + text-shadow: none; + border: none; +} + +.reveal .roll span:after { + color: #fff; + background: #d08a1d; +} + +/********************************************* + * IMAGES + *********************************************/ +.reveal section img { + margin: 15px 0px; + background: rgba(255, 255, 255, 0.12); + border: 4px solid #eeeeee; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); + -webkit-transition: all .2s linear; + -moz-transition: all .2s linear; + -ms-transition: all .2s linear; + -o-transition: all .2s linear; + transition: all .2s linear; +} + +.reveal a:hover img { + background: rgba(255, 255, 255, 0.2); + border-color: #e7ad52; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); +} + +/********************************************* + * NAVIGATION CONTROLS + *********************************************/ +.reveal .controls div.navigate-left, +.reveal .controls div.navigate-left.enabled { + border-right-color: #e7ad52; +} + +.reveal .controls div.navigate-right, +.reveal .controls div.navigate-right.enabled { + border-left-color: #e7ad52; +} + +.reveal .controls div.navigate-up, +.reveal .controls div.navigate-up.enabled { + border-bottom-color: #e7ad52; +} + +.reveal .controls div.navigate-down, +.reveal .controls div.navigate-down.enabled { + border-top-color: #e7ad52; +} + +.reveal .controls div.navigate-left.enabled:hover { + border-right-color: #f3d7ac; +} + +.reveal .controls div.navigate-right.enabled:hover { + border-left-color: #f3d7ac; +} + +.reveal .controls div.navigate-up.enabled:hover { + border-bottom-color: #f3d7ac; +} + +.reveal .controls div.navigate-down.enabled:hover { + border-top-color: #f3d7ac; +} + +/********************************************* + * PROGRESS BAR + *********************************************/ +.reveal .progress { + background: rgba(0, 0, 0, 0.2); +} + +.reveal .progress span { + background: #e7ad52; + -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); + -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); + -ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); + -o-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); + transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); +} diff --git a/css/theme/serif.css b/css/theme/serif.css new file mode 100644 index 0000000..aaabf47 --- /dev/null +++ b/css/theme/serif.css @@ -0,0 +1,150 @@ +/** + * 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. + */ +/********************************************* + * GLOBAL STYLES + *********************************************/ +body { + background: #f0f1eb; + background-color: #f0f1eb; +} + +.reveal { + font-family: "Palatino Linotype", "Book Antiqua", Palatino, FreeSerif, serif; + font-size: 36px; + font-weight: 200; + letter-spacing: -0.02em; + color: black; +} + +::selection { + color: white; + background: #26351c; + text-shadow: none; +} + +/********************************************* + * HEADERS + *********************************************/ +.reveal h1, +.reveal h2, +.reveal h3, +.reveal h4, +.reveal h5, +.reveal h6 { + margin: 0 0 20px 0; + color: #383d3d; + font-family: "Palatino Linotype", "Book Antiqua", Palatino, FreeSerif, serif; + line-height: 0.9em; + letter-spacing: 0.02em; + 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; + -webkit-transition: color .15s ease; + -moz-transition: color .15s ease; + -ms-transition: color .15s ease; + -o-transition: color .15s ease; + transition: color .15s ease; +} + +.reveal a:not(.image):hover { + color: #8b7c69; + text-shadow: none; + border: none; +} + +.reveal .roll span:after { + color: #fff; + background: #25211c; +} + +/********************************************* + * IMAGES + *********************************************/ +.reveal section img { + margin: 15px 0px; + background: rgba(255, 255, 255, 0.12); + border: 4px solid black; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); + -webkit-transition: all .2s linear; + -moz-transition: all .2s linear; + -ms-transition: all .2s linear; + -o-transition: all .2s linear; + transition: all .2s linear; +} + +.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 div.navigate-left, +.reveal .controls div.navigate-left.enabled { + border-right-color: #51483d; +} + +.reveal .controls div.navigate-right, +.reveal .controls div.navigate-right.enabled { + border-left-color: #51483d; +} + +.reveal .controls div.navigate-up, +.reveal .controls div.navigate-up.enabled { + border-bottom-color: #51483d; +} + +.reveal .controls div.navigate-down, +.reveal .controls div.navigate-down.enabled { + border-top-color: #51483d; +} + +.reveal .controls div.navigate-left.enabled:hover { + border-right-color: #8b7c69; +} + +.reveal .controls div.navigate-right.enabled:hover { + border-left-color: #8b7c69; +} + +.reveal .controls div.navigate-up.enabled:hover { + border-bottom-color: #8b7c69; +} + +.reveal .controls div.navigate-down.enabled:hover { + border-top-color: #8b7c69; +} + +/********************************************* + * PROGRESS BAR + *********************************************/ +.reveal .progress { + background: rgba(0, 0, 0, 0.2); +} + +.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 new file mode 100644 index 0000000..a68729f --- /dev/null +++ b/css/theme/simple.css @@ -0,0 +1,152 @@ +@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. + * + * 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 + */ +/********************************************* + * GLOBAL STYLES + *********************************************/ +body { + background: white; + background-color: white; +} + +.reveal { + font-family: "Lato", Times, "Times New Roman", serif; + font-size: 36px; + font-weight: 200; + letter-spacing: -0.02em; + color: black; +} + +::selection { + color: white; + background: rgba(0, 0, 0, 0.99); + text-shadow: none; +} + +/********************************************* + * HEADERS + *********************************************/ +.reveal h1, +.reveal h2, +.reveal h3, +.reveal h4, +.reveal h5, +.reveal h6 { + margin: 0 0 20px 0; + color: black; + font-family: "News Cycle", Impact, sans-serif; + line-height: 0.9em; + letter-spacing: 0.02em; + 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; + -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; +} + +.reveal .roll span:after { + color: #fff; + background: #00003f; +} + +/********************************************* + * IMAGES + *********************************************/ +.reveal section img { + margin: 15px 0px; + background: rgba(255, 255, 255, 0.12); + border: 4px solid black; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); + -webkit-transition: all .2s linear; + -moz-transition: all .2s linear; + -ms-transition: all .2s linear; + -o-transition: all .2s linear; + transition: all .2s linear; +} + +.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 div.navigate-left, +.reveal .controls div.navigate-left.enabled { + border-right-color: darkblue; +} + +.reveal .controls div.navigate-right, +.reveal .controls div.navigate-right.enabled { + border-left-color: darkblue; +} + +.reveal .controls div.navigate-up, +.reveal .controls div.navigate-up.enabled { + border-bottom-color: darkblue; +} + +.reveal .controls div.navigate-down, +.reveal .controls div.navigate-down.enabled { + border-top-color: darkblue; +} + +.reveal .controls div.navigate-left.enabled:hover { + border-right-color: #0000f1; +} + +.reveal .controls div.navigate-right.enabled:hover { + border-left-color: #0000f1; +} + +.reveal .controls div.navigate-up.enabled:hover { + border-bottom-color: #0000f1; +} + +.reveal .controls div.navigate-down.enabled:hover { + border-top-color: #0000f1; +} + +/********************************************* + * PROGRESS BAR + *********************************************/ +.reveal .progress { + background: rgba(0, 0, 0, 0.2); +} + +.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 new file mode 100644 index 0000000..a1b3b96 --- /dev/null +++ b/css/theme/sky.css @@ -0,0 +1,156 @@ +@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 + */ +/********************************************* + * GLOBAL STYLES + *********************************************/ +body { + 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%); + 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 { + font-family: "Open Sans", sans-serif; + font-size: 36px; + font-weight: 200; + letter-spacing: -0.02em; + color: #333333; +} + +::selection { + color: white; + background: #134674; + text-shadow: none; +} + +/********************************************* + * HEADERS + *********************************************/ +.reveal h1, +.reveal h2, +.reveal h3, +.reveal h4, +.reveal h5, +.reveal h6 { + margin: 0 0 20px 0; + color: #333333; + font-family: "Quicksand", sans-serif; + line-height: 0.9em; + 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; + -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; +} + +.reveal .roll span:after { + color: #fff; + background: #264c66; +} + +/********************************************* + * IMAGES + *********************************************/ +.reveal section img { + margin: 15px 0px; + background: rgba(255, 255, 255, 0.12); + border: 4px solid #333333; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); + -webkit-transition: all .2s linear; + -moz-transition: all .2s linear; + -ms-transition: all .2s linear; + -o-transition: all .2s linear; + transition: all .2s linear; +} + +.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); +} + +/********************************************* + * NAVIGATION CONTROLS + *********************************************/ +.reveal .controls div.navigate-left, +.reveal .controls div.navigate-left.enabled { + border-right-color: #3b759e; +} + +.reveal .controls div.navigate-right, +.reveal .controls div.navigate-right.enabled { + border-left-color: #3b759e; +} + +.reveal .controls div.navigate-up, +.reveal .controls div.navigate-up.enabled { + border-bottom-color: #3b759e; +} + +.reveal .controls div.navigate-down, +.reveal .controls div.navigate-down.enabled { + border-top-color: #3b759e; +} + +.reveal .controls div.navigate-left.enabled:hover { + border-right-color: #74a7cb; +} + +.reveal .controls div.navigate-right.enabled:hover { + border-left-color: #74a7cb; +} + +.reveal .controls div.navigate-up.enabled:hover { + border-bottom-color: #74a7cb; +} + +.reveal .controls div.navigate-down.enabled:hover { + border-top-color: #74a7cb; +} + +/********************************************* + * PROGRESS BAR + *********************************************/ +.reveal .progress { + background: rgba(0, 0, 0, 0.2); +} + +.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/night.scss b/css/theme/source/night.scss new file mode 100644 index 0000000..6646857 --- /dev/null +++ b/css/theme/source/night.scss @@ -0,0 +1,35 @@ +/** + * Black 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=Montserrat:700); +@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic); + + +// Override theme settings (see ../template/settings.scss) +$backgroundColor: #111; + +$mainFont: 'Open Sans', Times, 'Times New Roman', serif; +$linkColor: #e7ad52; +$linkColorHover: lighten( $linkColor, 20% ); +$headingFont: 'Montserrat', Impact, sans-serif; +$headingTextShadow: none; +$headingLetterSpacing: -0.03em; +$headingTextTransform: none; +$selectionBackgroundColor: #e7ad52; +$mainFontSize: 30px; + + +// 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..e0c5606 --- /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: $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% ); + 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..96148e3 --- /dev/null +++ b/css/theme/template/theme.scss @@ -0,0 +1,163 @@ +// Base theme template for reveal.js + +/********************************************* + * GLOBAL STYLES + *********************************************/ + +body { + @include bodyBackground(); + background-color: $backgroundColor; +} + +.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; + } + +.reveal .roll span:after { + color: #fff; + background: darken( $linkColor, 15% ); +} + + +/********************************************* + * IMAGES + *********************************************/ + +.reveal section img { + margin: 15px 0px; + 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 div.navigate-left, +.reveal .controls div.navigate-left.enabled { + border-right-color: $linkColor; +} + +.reveal .controls div.navigate-right, +.reveal .controls div.navigate-right.enabled { + border-left-color: $linkColor; +} + +.reveal .controls div.navigate-up, +.reveal .controls div.navigate-up.enabled { + border-bottom-color: $linkColor; +} + +.reveal .controls div.navigate-down, +.reveal .controls div.navigate-down.enabled { + border-top-color: $linkColor; +} + +.reveal .controls div.navigate-left.enabled:hover { + border-right-color: $linkColorHover; +} + +.reveal .controls div.navigate-right.enabled:hover { + border-left-color: $linkColorHover; +} + +.reveal .controls div.navigate-up.enabled:hover { + border-bottom-color: $linkColorHover; +} + +.reveal .controls div.navigate-down.enabled:hover { + border-top-color: $linkColorHover; +} + + +/********************************************* + * 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); + } + + |