diff --git a/.gitignore b/.gitignore index 7285a78..7c02c85 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,4 @@ reveal node_modules/ +*.iml +.idea/ diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..23a2d5a --- /dev/null +++ b/LICENSE @@ -0,0 +1,19 @@ +Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in +all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +THE SOFTWARE. \ No newline at end of file diff --git a/css/print/paper.css b/css/print/paper.css new file mode 100644 index 0000000..61fa0a9 --- /dev/null +++ b/css/print/paper.css @@ -0,0 +1,173 @@ +/* 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 */ +body { + background: #fff; + font-size: 13pt; + width: auto; + height: auto; + border: 0; + margin: 0 5%; + padding: 0; + float: none !important; + overflow: visible; +} +html { + background: #fff; + width: auto; + height: auto; + overflow: visible; +} + +/* 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, a { + font-size: 16pt!important; + font-family: Georgia, "Times New Roman", Times, serif !important; + color: #000; +} + +/* 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 { + color: #000!important; + height: auto; + line-height: normal; + font-family: Georgia, "Times New Roman", Times, serif !important; + text-shadow: 0 0 0 #000 !important; + text-align: left; + letter-spacing: normal; +} +/* Need to reduce the size of the fonts for printing */ +h1 { font-size: 26pt !important; } +h2 { font-size: 22pt !important; } +h3 { font-size: 20pt !important; } +h4 { font-size: 20pt !important; font-variant: small-caps; } +h5 { font-size: 19pt !important; } +h6 { font-size: 18pt !important; font-style: italic; } + +/* 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 { + color: #000 !important; + 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 */ +ul, ol, div, p { + visibility: visible; + position: static; + width: auto; + height: auto; + display: block; + overflow: visible; + margin: auto; + text-align: left !important; +} +.reveal .slides { + position: static; + width: auto; + height: auto; + + left: auto; + top: auto; + margin-left: 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, +.reveal .slides>section>section { + + visibility: visible !important; + position: static !important; + width: 90% !important; + height: auto !important; + display: block !important; + overflow: visible !important; + + left: 0% !important; + top: 0% !important; + margin-left: 0px !important; + margin-top: 0px !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 { + page-break-after: always !important; + display: block !important; +} +.reveal section.stack { + page-break-after: avoid !important; +} +.reveal section .fragment { + opacity: 1 !important; +} +.reveal section:last-of-type { + page-break-after: avoid !important; +} +.reveal section img { + display: block; + margin: 15px 0px; + background: rgba(255,255,255,1); + border: 1px solid #666; + box-shadow: none; +} \ No newline at end of file diff --git a/css/print/pdf.css b/css/print/pdf.css new file mode 100644 index 0000000..7c1a496 --- /dev/null +++ b/css/print/pdf.css @@ -0,0 +1,159 @@ +/* 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; + margin: 0 5%; + padding: 0; + float: none !important; + overflow: visible; + background-image: none; +} + +html { + width: auto; + height: auto; + overflow: visible; +} + +/* 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-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, .reveal .slides>section>section { + + 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 { + page-break-after: always !important; + display: block !important; +} +.reveal section.stack { + margin: 0px !important; + padding: 0px !important; + page-break-after: avoid !important; +} +.reveal section .fragment { + opacity: 1 !important; +} +.reveal img { + box-shadow: none; +} +.reveal .roll { + overflow: visible; + line-height: 1em; +} + +.reveal small a { + font-size: 16pt !important; +} + +pre { + font-size: 9pt !important; +} diff --git a/css/reveal.css b/css/reveal.css new file mode 100644 index 0000000..412e8ec --- /dev/null +++ b/css/reveal.css @@ -0,0 +1,1184 @@ +@charset "UTF-8"; + +/*! + * reveal.js + * http://lab.hakim.se/reveal-js + * MIT licensed + * + * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se + */ + + +/********************************************* + * RESET STYLES + *********************************************/ + +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; +} + + +/********************************************* + * GLOBAL STYLES + *********************************************/ + +html, +body { + width: 100%; + height: 100%; + min-height: 600px; + overflow: hidden; +} + +body { + position: relative; + line-height: 1; +} + +::selection { + background:#FF5E99; + color:#fff; + text-shadow: none; +} + +@media screen and (max-width: 900px) { + .reveal { + font-size: 30px; + } +} + +/********************************************* + * HEADERS + *********************************************/ + +.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 + *********************************************/ + +.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; + } + + +/********************************************* + * DEFAULT ELEMENT STYLES + *********************************************/ + +.reveal .slides section { + line-height: 1.2em; + font-weight: normal; +} + +.reveal img { + /* preserve aspect ratio and scale image so it's bound within the section */ + max-width: 100%; + max-height: 100%; +} + +.reveal strong, +.reveal b { + font-weight: bold; +} + +.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, 0.05); + box-shadow: 0px 0px 2px rgba(0,0,0,0.2); +} + .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: 0.55em; + font-family: monospace; + line-height: 1.2em; + + word-wrap: break-word; + + box-shadow: 0px 0px 6px rgba(0,0,0,0.3); +} +.reveal 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: rgb(255,255,255) 1px 1px 2px; +} + +.reveal sup { + vertical-align: super; +} +.reveal sub { + vertical-align: sub; +} + +.reveal small { + display: inline-block; + font-size: 0.6em; + line-height: 1.2em; + vertical-align: top; +} + +.reveal small * { + vertical-align: top; +} + + +/********************************************* + * CONTROLS + *********************************************/ + +.reveal .controls { + display: none; + position: fixed; + width: 110px; + height: 110px; + z-index: 30; + right: 10px; + bottom: 10px; +} + +.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 div.enabled { + opacity: 0.6; + cursor: pointer; +} + +.reveal .controls div.enabled:active { + margin-top: 1px; +} + +.reveal .controls div.left { + top: 42px; + + border-right-width: 22px; + border-right-color: #eee; +} + +.reveal .controls div.right { + left: 74px; + top: 42px; + + border-left-width: 22px; + border-left-color: #eee; +} + +.reveal .controls div.up { + left: 42px; + + border-bottom-width: 22px; + border-bottom-color: #eee; +} + +.reveal .controls div.down { + left: 42px; + top: 74px; + + border-top-width: 22px; + border-top-color: #eee; +} + + +/********************************************* + * PROGRESS BAR + *********************************************/ + +.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: 0px; + + -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); + } + + +/********************************************* + * ROLLING LINKS + *********************************************/ + +.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: none; + 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,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); + + 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%, 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 ); +} + + +/********************************************* + * SLIDES + *********************************************/ + +.reveal .slides { + position: absolute; + max-width: 900px; + width: 80%; + height: 60%; + left: 50%; + top: 50%; + margin-top: -320px; + padding: 20px 0px; + 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% 25%; + -moz-perspective-origin: 0% 25%; + -ms-perspective-origin: 0% 25%; + perspective-origin: 0% 25%; +} + +.reveal .slides>section, +.reveal .slides>section>section { + display: none; + position: absolute; + width: 100%; + min-height: 600px; + + 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 { + display: block; + z-index: 11; + opacity: 1; +} + +.reveal .slides>section { + margin-left: -50%; +} + + +/********************************************* + * DEFAULT TRANSITION + *********************************************/ + +.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, -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); +} +.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); +} + + +/********************************************* + * CONCAVE TRANSITION + *********************************************/ + +.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); +} + + +/********************************************* + * ZOOM TRANSITION + *********************************************/ + +.reveal.zoom .slides>section, +.reveal.zoom .slides>section>section { + -webkit-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + -moz-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + -ms-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + -o-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985); +} + +.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 + *********************************************/ + +.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%); +} + + +/********************************************* + * CUBE TRANSITION + *********************************************/ + +.reveal.cube .slides { + -webkit-perspective-origin: 0% 25%; + -moz-perspective-origin: 0% 25%; + -ms-perspective-origin: 0% 25%; + perspective-origin: 0% 25%; + + -webkit-perspective: 1300px; + -moz-perspective: 1300px; + -ms-perspective: 1300px; + perspective: 1300px; +} + +.reveal.cube .slides section { + padding: 30px; + + -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.cube .slides section:not(.stack):before { + content: ''; + position: absolute; + display: block; + width: 100%; + height: 100%; + left: 0; + top: 0; + background: rgba(0,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: none; + z-index: 1; + + border-radius: 4px; + box-shadow: 0px 95px 25px rgba(0,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: none; +} + +.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); +} + + +/********************************************* + * PAGE TRANSITION + *********************************************/ + +.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; + + -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,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: none; + z-index: 1; + + border-radius: 4px; + box-shadow: 0px 95px 25px rgba(0,0,0,0.2); + + -webkit-transform: translateZ(-90px) rotateX( 65deg ); + } + +.reveal.page .slides>section.stack { + padding: 0; + background: none; +} + +.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); +} + + +/********************************************* + * TILE-FLIP TRANSITION (CSS shader) + *********************************************/ + +.reveal.tileflip .slides section.present { + -webkit-transform: none; + -webkit-transition-duration: 800ms; + + -webkit-filter: custom( url(shaders/tile-flip.vs) mix(url(shaders/tile-flip.fs) multiply source-atop), 10 10 border-box detached, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg), + amount 0, randomness 0, flipAxis 0 1 0, tileOutline 1 + ); +} + +.reveal.tileflip .slides section.past { + -webkit-transform: none; + -webkit-transition-duration: 800ms; + + -webkit-filter: custom( url(shaders/tile-flip.vs) mix(url(shaders/tile-flip.fs) multiply source-atop), 10 10 border-box detached, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg), + amount 1, randomness 0, flipAxis 0 1 0, tileOutline 1 + ); +} + +.reveal.tileflip .slides section.future { + -webkit-transform: none; + -webkit-transition-duration: 800ms; + + -webkit-filter: custom( url(shaders/tile-flip.vs) mix(url(shaders/tile-flip.fs) multiply source-atop), 10 10 border-box detached, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg), + amount 1, randomness 0, flipAxis 0 1 0, tileOutline 1 + ); +} + +.reveal.tileflip .slides>section>section.present { + -webkit-filter: custom( url(shaders/tile-flip.vs) mix(url(shaders/tile-flip.fs) multiply source-atop), 10 10 border-box detached, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg), + amount 0, randomness 2, flipAxis 1 0 0, tileOutline 1 + ); +} + +.reveal.tileflip .slides>section>section.past { + -webkit-filter: custom( url(shaders/tile-flip.vs) mix(url(shaders/tile-flip.fs) multiply source-atop), 10 10 border-box detached, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg), + amount 1, randomness 2, flipAxis 1 0 0, tileOutline 1 + ); +} + +.reveal.tileflip .slides>section>section.future { + -webkit-filter: custom( url(shaders/tile-flip.vs) mix(url(shaders/tile-flip.fs) multiply source-atop), 10 10 border-box detached, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg), + amount 1, randomness 2, flipAxis 1 0 0, tileOutline 1 + ); +} + + +/********************************************* + * 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: 700px; + -moz-perspective: 700px; + -ms-perspective: 700px; + perspective: 700px; +} + +.reveal.overview .slides section { + padding: 20px 0; + max-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; +} +.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,0.3); + } + + .reveal.overview .slides section.present { + background: rgba(0,0,0,0.3); + } +.reveal.overview .slides>section.stack { + background: none; + padding: 0; + 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; +} + + +/********************************************* + * FALLBACK + *********************************************/ + +.no-transforms { + overflow-y: auto; +} + +.no-transforms .slides section { + display: block!important; + opacity: 1!important; + position: relative!important; + height: auto; + min-height: auto; + margin-bottom: 100px; + + -webkit-transform: none; + -moz-transform: none; + -ms-transform: none; + transform: none; +} + + +/********************************************* + * BACKGROUND STATES + *********************************************/ + +.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, 0.6 ); +} +.soothe .reveal .state-background { + background: rgba( 50, 200, 90, 0.4 ); +} +.blackout .reveal .state-background { + background: rgba( 0, 0, 0, 0.6 ); +} + + +/********************************************* + * SPEAKER NOTES + *********************************************/ + +.reveal aside.notes { + display: none; +} + + +/********************************************* + * ZOOM PLUGIN + *********************************************/ + +.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: none; +} + +.zoomed .reveal .roll span:after { + visibility: hidden; +} + + diff --git a/css/shaders/tile-flip.fs b/css/shaders/tile-flip.fs new file mode 100644 index 0000000..3481a48 --- /dev/null +++ b/css/shaders/tile-flip.fs @@ -0,0 +1,64 @@ +/* + * Copyright (c) 2012 Adobe Systems Incorporated. All rights reserved. + * Copyright (c) 2012 Branislav Ulicny + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +precision mediump float; + +// Uniform values from CSS + +uniform float amount; +uniform float tileOutline; + +// Built-in uniforms + +uniform vec2 u_meshSize; +uniform vec2 u_textureSize; + +// Varyings passed in from vertex shader + +varying float v_depth; +varying vec2 v_uv; + +// Main + +void main() +{ + // FIXME: Must swap x and y as a workaround for: + // https://bugs.webkit.org/show_bug.cgi?id=96285 + vec2 u_meshSize = u_meshSize.yx; + + vec4 c = vec4(1.0); + + // Fade out. + c.a = 1.0 - v_depth; + + // Show grid outline. + if (tileOutline >= 0.5) { + float cell_width = u_textureSize.x / u_meshSize.y; + float cell_height = u_textureSize.y / u_meshSize.x; + float dd = 1.0; + + if (mod(v_uv.x * u_textureSize.x + dd, cell_width) < 2.0 + || mod(v_uv.y * u_textureSize.y + dd, cell_height) < 2.0) { + if (amount > 0.0) + c.rgb = vec3(1.0 - sqrt(amount)); + } + } + css_ColorMatrix = mat4(c.r, 0.0, 0.0, 0.0, + 0.0, c.g, 0.0, 0.0, + 0.0, 0.0, c.b, 0.0, + 0.0, 0.0, 0.0, c.a); +} diff --git a/css/shaders/tile-flip.vs b/css/shaders/tile-flip.vs new file mode 100644 index 0000000..498e446 --- /dev/null +++ b/css/shaders/tile-flip.vs @@ -0,0 +1,141 @@ +/* + * Copyright (c)2012 Adobe Systems Incorporated. All rights reserved. + * Copyright (c)2012 Branislav Ulicny + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +precision mediump float; + +// Built-in attributes + +attribute vec4 a_position; +attribute vec2 a_texCoord; +attribute vec3 a_triangleCoord; + +// Built-in uniforms + +uniform mat4 u_projectionMatrix; +uniform vec2 u_meshSize; +uniform vec2 u_textureSize; + +// Uniform passed in from CSS + +uniform mat4 transform; +uniform float amount; +uniform float randomness; +uniform vec3 flipAxis; + +// Varyings + +varying float v_depth; +varying vec2 v_uv; + +// Constants + +const float PI2 = 1.5707963267948966; + +// Create perspective matrix + +mat4 perspectiveMatrix(float p) +{ + float perspective = - 1.0 / p; + return mat4( + 1.0, 0.0, 0.0, 0.0, + 0.0, 1.0, 0.0, 0.0, + 0.0, 0.0, 1.0, perspective, + 0.0, 0.0, 0.0, 1.0 + ); +} + +// Rotate vector + +vec3 rotateVectorByQuaternion(vec3 v, vec4 q) +{ + vec3 dest = vec3(0.0); + + float x = v.x, y = v.y, z = v.z; + float qx = q.x, qy = q.y, qz = q.z, qw = q.w; + + // Calculate quaternion * vector. + + float ix = qw * x + qy * z - qz * y, + iy = qw * y + qz * x - qx * z, + iz = qw * z + qx * y - qy * x, + iw = -qx * x - qy * y - qz * z; + + // Calculate result * inverse quaternion. + + dest.x = ix * qw + iw * -qx + iy * -qz - iz * -qy; + dest.y = iy * qw + iw * -qy + iz * -qx - ix * -qz; + dest.z = iz * qw + iw * -qz + ix * -qy - iy * -qx; + + return dest; +} + +// Convert rotation. + +vec4 axisAngleToQuaternion(vec3 axis, float angle) +{ + vec4 dest = vec4(0.0); + + float halfAngle = angle / 2.0; + float s = sin(halfAngle); + + dest.x = axis.x * s; + dest.y = axis.y * s; + dest.z = axis.z * s; + dest.w = cos(halfAngle); + + return dest; +} + +// Random function based on the tile coordinate. +// This will return the same value for all the vertices in the same tile (i.e. two triangles). + +float random(vec2 scale) +{ + // Use the fragment position as a different seed per-pixel. + return fract(sin(dot(vec2(a_triangleCoord.x, a_triangleCoord.y), scale)) * 4000.0); +} + +// Main + +void main() +{ + // FIXME: We must swap x and y as a workaround for: + // https://bugs.webkit.org/show_bug.cgi?id=96285 + vec2 u_meshSize = u_meshSize.yx; + + vec4 pos = a_position; + float aspect = u_textureSize.x / u_textureSize.y; + + float cx = a_triangleCoord.x / u_meshSize.y - 0.5 + 0.5 / u_meshSize.y; + float cy = a_triangleCoord.y / u_meshSize.x - 0.5 + 0.5 / u_meshSize.x; + + vec3 centroid = vec3(cx, cy, 0.0); + float r = random(vec2(10.0, 80.0)); + float rr = mix(0.0, PI2, amount * (1.0 + randomness * r)); + + vec4 rotation = vec4(flipAxis, rr); + vec4 qRotation = axisAngleToQuaternion(normalize(rotation.xyz), rotation.w); + + vec3 newPosition = rotateVectorByQuaternion((pos.xyz - centroid)* vec3(aspect, 1., 1.0), qRotation) * vec3(1.0 / aspect, 1.0, 1.0) + centroid; + pos.xyz = newPosition; + + gl_Position = u_projectionMatrix * transform * pos; + + // Pass varyings to the fragment shader. + v_depth = abs(rr)/ PI2; + v_uv = a_texCoord; +} diff --git a/css/theme/README.md b/css/theme/README.md new file mode 100644 index 0000000..137bdf2 --- /dev/null +++ b/css/theme/README.md @@ -0,0 +1,5 @@ +Themes are written using Sass to keep things modular and reduce the need for repeated selectors across files. Find out how to install Sass here http://sass-lang.com/, once Sass is installed run the follwing command to start monitoring the source files for changes. + +``` +sass --watch css/theme/source/:css/theme --style expanded +``` \ No newline at end of file diff --git a/css/theme/beige.css b/css/theme/beige.css new file mode 100644 index 0000000..5e40883 --- /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; + 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.left, +.reveal .controls div.left.enabled { + border-right-color: #8b743d; +} + +.reveal .controls div.right, +.reveal .controls div.right.enabled { + border-left-color: #8b743d; +} + +.reveal .controls div.up, +.reveal .controls div.up.enabled { + border-bottom-color: #8b743d; +} + +.reveal .controls div.down, +.reveal .controls div.down.enabled { + border-top-color: #8b743d; +} + +.reveal .controls div.left.enabled:hover { + border-right-color: #c0a86e; +} + +.reveal .controls div.right.enabled:hover { + border-left-color: #c0a86e; +} + +.reveal .controls div.up.enabled:hover { + border-bottom-color: #c0a86e; +} + +.reveal .controls div.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..28ed7d3 --- /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; + 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.left, +.reveal .controls div.left.enabled { + border-right-color: #13daec; +} + +.reveal .controls div.right, +.reveal .controls div.right.enabled { + border-left-color: #13daec; +} + +.reveal .controls div.up, +.reveal .controls div.up.enabled { + border-bottom-color: #13daec; +} + +.reveal .controls div.down, +.reveal .controls div.down.enabled { + border-top-color: #13daec; +} + +.reveal .controls div.left.enabled:hover { + border-right-color: #71e9f4; +} + +.reveal .controls div.right.enabled:hover { + border-left-color: #71e9f4; +} + +.reveal .controls div.up.enabled:hover { + border-bottom-color: #71e9f4; +} + +.reveal .controls div.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/serif.css b/css/theme/serif.css new file mode 100644 index 0000000..ece6124 --- /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; + 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.left, +.reveal .controls div.left.enabled { + border-right-color: #51483d; +} + +.reveal .controls div.right, +.reveal .controls div.right.enabled { + border-left-color: #51483d; +} + +.reveal .controls div.up, +.reveal .controls div.up.enabled { + border-bottom-color: #51483d; +} + +.reveal .controls div.down, +.reveal .controls div.down.enabled { + border-top-color: #51483d; +} + +.reveal .controls div.left.enabled:hover { + border-right-color: #8b7c69; +} + +.reveal .controls div.right.enabled:hover { + border-left-color: #8b7c69; +} + +.reveal .controls div.up.enabled:hover { + border-bottom-color: #8b7c69; +} + +.reveal .controls div.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..6d0771a --- /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; + 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.left, +.reveal .controls div.left.enabled { + border-right-color: darkblue; +} + +.reveal .controls div.right, +.reveal .controls div.right.enabled { + border-left-color: darkblue; +} + +.reveal .controls div.up, +.reveal .controls div.up.enabled { + border-bottom-color: darkblue; +} + +.reveal .controls div.down, +.reveal .controls div.down.enabled { + border-top-color: darkblue; +} + +.reveal .controls div.left.enabled:hover { + border-right-color: #0000f1; +} + +.reveal .controls div.right.enabled:hover { + border-left-color: #0000f1; +} + +.reveal .controls div.up.enabled:hover { + border-bottom-color: #0000f1; +} + +.reveal .controls div.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..18a4863 --- /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; + 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.left, +.reveal .controls div.left.enabled { + border-right-color: #3b759e; +} + +.reveal .controls div.right, +.reveal .controls div.right.enabled { + border-left-color: #3b759e; +} + +.reveal .controls div.up, +.reveal .controls div.up.enabled { + border-bottom-color: #3b759e; +} + +.reveal .controls div.down, +.reveal .controls div.down.enabled { + border-top-color: #3b759e; +} + +.reveal .controls div.left.enabled:hover { + border-right-color: #74a7cb; +} + +.reveal .controls div.right.enabled:hover { + border-left-color: #74a7cb; +} + +.reveal .controls div.up.enabled:hover { + border-bottom-color: #74a7cb; +} + +.reveal .controls div.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/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..6a80b62 --- /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; + 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.left, +.reveal .controls div.left.enabled { + border-right-color: $linkColor; +} + +.reveal .controls div.right, +.reveal .controls div.right.enabled { + border-left-color: $linkColor; +} + +.reveal .controls div.up, +.reveal .controls div.up.enabled { + border-bottom-color: $linkColor; +} + +.reveal .controls div.down, +.reveal .controls div.down.enabled { + border-top-color: $linkColor; +} + +.reveal .controls div.left.enabled:hover { + border-right-color: $linkColorHover; +} + +.reveal .controls div.right.enabled:hover { + border-left-color: $linkColorHover; +} + +.reveal .controls div.up.enabled:hover { + border-bottom-color: $linkColorHover; +} + +.reveal .controls div.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); + } + + diff --git a/index.html b/index.html new file mode 100644 index 0000000..08695db --- /dev/null +++ b/index.html @@ -0,0 +1,379 @@ + + + +
+ + +"+w.value+"
";u=v.firstChild.firstChild;v.firstChild.cN=r.cN;r.parentNode.replaceChild(v.firstChild,r)}else{u.innerHTML=w.value}u.className=t;u.result={language:s,kw:w.keyword_count,re:w.r};if(w.second_best){u.second_best={language:w.second_best.language,kw:w.second_best.keyword_count,re:w.second_best.r}}}function k(){if(k.called){return}k.called=true;var r=document.getElementsByTagName("pre");for(var p=0;p