From eda54dcf7aa5d0ee829722dbfbebe0e60a1a2f82 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Fri, 28 Sep 2012 09:28:26 -0400 Subject: main.css > reveal.css --- css/reveal.css | 912 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 912 insertions(+) create mode 100644 css/reveal.css (limited to 'css/reveal.css') diff --git a/css/reveal.css b/css/reveal.css new file mode 100644 index 0000000..2a79a61 --- /dev/null +++ b/css/reveal.css @@ -0,0 +1,912 @@ +@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, 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; +} + +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} + + +/********************************************* + * GLOBAL STYLES + *********************************************/ + +html, +body { + padding: 0; + margin: 0; + width: 100%; + height: 100%; + min-height: 600px; + overflow: hidden; +} + +body { + position: relative; + line-height: 1; +} + +@media screen and (max-width: 900px) { + body { + font-size: 30px; + } +} + +::selection { + background:#FF5E99; + color:#fff; + text-shadow: none; +} + +/********************************************* + * 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; + } + + +/********************************************* + * 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: '“'; + } + .reveal blockquote:after { + content: '”'; + } + +.reveal q { + font-style: italic; +} + .reveal q:before { + content: '“'; + } + .reveal q:after { + content: '”'; + } + +.reveal pre { + display: block; + position: relative; + width: 90%; + margin: 10px auto; + + text-align: left; + font-size: 0.55em; + font-family: monospace; + line-height: 1.2em; + + word-wrap: break-word; + + box-shadow: 0px 0px 6px rgba(0,0,0,0.3); +} + +.reveal code { + font-family: monospace; + 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: 100px; + height: 100px; + z-index: 30; + + right: 0; + bottom: 0; +} + + .reveal .controls a { + font-family: Arial; + font-size: 0.83em; + position: absolute; + opacity: 0.1; + } + .reveal .controls a.enabled { + opacity: 0.6; + } + .reveal .controls a.enabled:active { + margin-top: 1px; + } + + .reveal .controls .left { + top: 30px; + } + + .reveal .controls .right { + left: 60px; + top: 30px; + } + + .reveal .controls .up { + left: 30px; + } + + .reveal .controls .down { + left: 30px; + top: 60px; + } + + +/********************************************* + * PROGRESS BAR + *********************************************/ + +.reveal .progress { + position: fixed; + display: none; + height: 3px; + width: 100%; + bottom: 0; + left: 0; +} + + .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; + + 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); +} + + +/********************************************* + * 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%); +} + +/********************************************* + * BOX 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; + 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: #232628; + 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 { + margin-top: -350px; + + -webkit-perspective-origin: 50% 50%; + -moz-perspective-origin: 50% 50%; + -ms-perspective-origin: 50% 50%; + perspective-origin: 50% 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.2); + + -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); +} + + +/********************************************* + * 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; + 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; +} + + +/********************************************* + * 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; +} + + +/********************************************* + * DEFAULT STATES + *********************************************/ + +.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 .state-background { + background: rgba( 200, 50, 30, 0.6 ); +} +.soothe .state-background { + background: rgba( 50, 200, 90, 0.4 ); +} +.blackout .state-background { + background: rgba( 0, 0, 0, 0.6 ); +} + + +/********************************************* + * SPEAKER NOTES + *********************************************/ + +.reveal aside.notes { + display: none; +} + -- cgit v1.2.3 From e014daa4f54fbca0ec972e7b4f2a59a23f11e625 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Sun, 30 Sep 2012 17:51:04 -0400 Subject: facility for css shader transitions, add css shader based tile-transition --- css/reveal.css | 55 +++++++++++++++++- css/shaders/tile-flip.fs | 64 +++++++++++++++++++++ css/shaders/tile-flip.vs | 141 +++++++++++++++++++++++++++++++++++++++++++++++ js/reveal.js | 2 +- js/reveal.min.js | 2 +- 5 files changed, 261 insertions(+), 3 deletions(-) create mode 100644 css/shaders/tile-flip.fs create mode 100644 css/shaders/tile-flip.vs (limited to 'css/reveal.css') diff --git a/css/reveal.css b/css/reveal.css index 2a79a61..8b33d59 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -317,6 +317,7 @@ body { transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); } + /********************************************* * ROLLING LINKS *********************************************/ @@ -571,8 +572,9 @@ body { transform: translate(0, 150%); } + /********************************************* - * BOX TRANSITION + * CUBE TRANSITION *********************************************/ .reveal.cube .slides { @@ -808,6 +810,56 @@ body { } +/********************************************* + * TILE-FLIP TRANSITION + *********************************************/ + +.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 + ); +} + + /********************************************* * OVERVIEW *********************************************/ @@ -910,3 +962,4 @@ body { display: none; } + 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/js/reveal.js b/js/reveal.js index 91d2511..11b8815 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -1,5 +1,5 @@ /*! - * reveal.js 2.1 r25 + * reveal.js 2.1 r26 * http://lab.hakim.se/reveal-js * MIT licensed * diff --git a/js/reveal.min.js b/js/reveal.min.js index fb55ef7..d6c6fd6 100644 --- a/js/reveal.min.js +++ b/js/reveal.min.js @@ -1,5 +1,5 @@ /*! - * reveal.js 2.1 r25 + * reveal.js 2.1 r26 * http://lab.hakim.se/reveal-js * MIT licensed * -- cgit v1.2.3 From b0cc9fee4516e1aff267622b66e35201c5713a7f Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Thu, 4 Oct 2012 08:14:51 -0400 Subject: add 'none'-transition (closes #159, #160) --- css/reveal.css | 21 ++++++++++++++++++++- 1 file changed, 20 insertions(+), 1 deletion(-) (limited to 'css/reveal.css') diff --git a/css/reveal.css b/css/reveal.css index 8b33d59..f6392de 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -811,7 +811,7 @@ body { /********************************************* - * TILE-FLIP TRANSITION + * TILE-FLIP TRANSITION (CSS shader) *********************************************/ .reveal.tileflip .slides section.present { @@ -860,6 +860,25 @@ body { } +/********************************************* + * 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 *********************************************/ -- cgit v1.2.3 From 1c726eed78e176b9e62096580f384a0342515d17 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Sun, 7 Oct 2012 14:31:20 -0400 Subject: remove duplicate padding/margin reset on html & body --- css/reveal.css | 2 -- 1 file changed, 2 deletions(-) (limited to 'css/reveal.css') diff --git a/css/reveal.css b/css/reveal.css index f6392de..9ac39d1 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -46,8 +46,6 @@ footer, header, hgroup, menu, nav, section { html, body { - padding: 0; - margin: 0; width: 100%; height: 100%; min-height: 600px; -- cgit v1.2.3 From 84b69b6b9a7275cdc83ba310dad777e69b8e8fec Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Sun, 7 Oct 2012 14:43:50 -0400 Subject: root reset styles at .reveal (#163) --- css/reveal.css | 42 +++++++++++++++++++++--------------------- 1 file changed, 21 insertions(+), 21 deletions(-) (limited to 'css/reveal.css') diff --git a/css/reveal.css b/css/reveal.css index 9ac39d1..2f280bc 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -13,19 +13,19 @@ * RESET STYLES *********************************************/ -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 { +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; @@ -34,8 +34,8 @@ time, mark, audio, video { vertical-align: baseline; } -article, aside, details, figcaption, figure, -footer, header, hgroup, menu, nav, section { +.reveal article, .reveal aside, .reveal details, .reveal figcaption, .reveal figure, +.reveal footer, .reveal header, .reveal hgroup, .reveal menu, .reveal nav, .reveal section { display: block; } @@ -57,18 +57,18 @@ body { line-height: 1; } -@media screen and (max-width: 900px) { - body { - font-size: 30px; - } -} - ::selection { background:#FF5E99; color:#fff; text-shadow: none; } +@media screen and (max-width: 900px) { + .reveal { + font-size: 30px; + } +} + /********************************************* * HEADERS *********************************************/ -- cgit v1.2.3 From f22e5f85e8284aaca724c372e8f9efdfd9b11943 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Mon, 8 Oct 2012 00:08:50 -0400 Subject: new paused mode feature (closes #144), controls and progress DOM elements are no longer required in HTML --- css/reveal.css | 38 ++++++++++++-- index.html | 24 ++++----- js/reveal.js | 154 +++++++++++++++++++++++++++++++++++++++++++------------ js/reveal.min.js | 136 +++++++++++++++++++++++++----------------------- 4 files changed, 234 insertions(+), 118 deletions(-) (limited to 'css/reveal.css') diff --git a/css/reveal.css b/css/reveal.css index 2f280bc..d493b22 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -410,6 +410,7 @@ body { margin-top: -320px; padding: 20px 0px; overflow: visible; + z-index: 1; text-align: center; @@ -921,6 +922,33 @@ body { } +/********************************************* + * 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 *********************************************/ @@ -945,10 +973,10 @@ body { /********************************************* - * DEFAULT STATES + * BACKGROUND STATES *********************************************/ -.state-background { +.reveal .state-background { position: absolute; width: 100%; height: 100%; @@ -960,13 +988,13 @@ 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 ); } diff --git a/index.html b/index.html index 1ebea32..b5625c9 100644 --- a/index.html +++ b/index.html @@ -34,9 +34,6 @@
- -
-
@@ -278,6 +275,14 @@ function linkify( selector ) {
+
+

Take a Moment

+

+ Press b or period on your keyboard to enter the 'paused' mode. This mode is helpful when you want to take disctracting slides off the screen + during a presentaion. +

+
+

Stellar Links

    @@ -310,17 +315,6 @@ function linkify( selector ) {

    BY Hakim El Hattab / hakim.se

- - - - - -
@@ -346,7 +340,7 @@ function linkify( selector ) { { src: 'lib/js/showdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }, { src: 'lib/js/data-markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }, { src: '/socket.io/socket.io.js', async: true, condition: function() { return window.location.host === 'localhost:1947'; } }, - { src: 'plugin/speakernotes/client.js', async: true, condition: function() { return window.location.host === 'localhost:1947'; } }, + { src: 'plugin/speakernotes/client.js', async: true, condition: function() { return window.location.host === 'localhost:1947'; } } ] }); diff --git a/js/reveal.js b/js/reveal.js index 06ecde6..c9ba7b1 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -1,5 +1,5 @@ /*! - * reveal.js 2.1 r28 + * reveal.js 2.1 r29 * http://lab.hakim.se/reveal-js * MIT licensed * @@ -116,9 +116,61 @@ var Reveal = (function(){ // Copy options over to our config object extend( config, options ); - // Cache references to DOM elements + // Make sure we've got all the DOM elements we need + setupDOM(); + + // Hide the address bar in mobile browsers + hideAddressBar(); + + // Loads the dependencies and continues to #start() once done + load(); + + } + + /** + * Finds and stores references to DOM elements which are + * required by the presentation. If a required element is + * not found, it is created. + */ + function setupDOM() { + // Cache references to key DOM elements dom.theme = document.querySelector( '#theme' ); dom.wrapper = document.querySelector( '.reveal' ); + + // Progress bar + if( !dom.wrapper.querySelector( '.progress' ) && config.progress ) { + var progressElement = document.createElement( 'div' ); + progressElement.classList.add( 'progress' ); + progressElement.innerHTML = ''; + dom.wrapper.appendChild( progressElement ); + } + + // Arrow controls + if( !dom.wrapper.querySelector( '.controls' ) && config.controls ) { + var controlsElement = document.createElement( 'aside' ); + controlsElement.classList.add( 'controls' ); + controlsElement.innerHTML = '◄' + + '►' + + '▲' + + '▼'; + dom.wrapper.appendChild( controlsElement ); + } + + // Presentation background element + if( !dom.wrapper.querySelector( '.state-background' ) ) { + var backgroundElement = document.createElement( 'div' ); + backgroundElement.classList.add( 'state-background' ); + dom.wrapper.appendChild( backgroundElement ); + } + + // Overlay graphic which is displayed during the paused mode + if( !dom.wrapper.querySelector( '.pause-overlay' ) ) { + var pausedElement = document.createElement( 'div' ); + pausedElement.classList.add( 'pause-overlay' ); + dom.wrapper.appendChild( pausedElement ); + } + + // Cache references to elements dom.progress = document.querySelector( '.reveal .progress' ); dom.progressbar = document.querySelector( '.reveal .progress span' ); @@ -129,11 +181,12 @@ var Reveal = (function(){ dom.controlsUp = document.querySelector( '.reveal .controls .up' ); dom.controlsDown = document.querySelector( '.reveal .controls .down' ); } + } - // Loads the dependencies and continues to #start() once done - load(); - - // Set up hiding of the browser address bar + /** + * Hides the address bar if we're on a mobile device. + */ + function hideAddressBar() { if( navigator.userAgent.match( /(iphone|ipod|android)/i ) ) { // Give the page some scrollable overflow document.documentElement.style.overflow = 'scroll'; @@ -143,7 +196,6 @@ var Reveal = (function(){ window.addEventListener( 'load', removeAddressBar, false ); window.addEventListener( 'orientationchange', removeAddressBar, false ); } - } /** @@ -378,9 +430,11 @@ var Reveal = (function(){ // end case 35: navigateTo( Number.MAX_VALUE ); break; // space - case 32: overviewIsActive() ? deactivateOverview() : navigateNext(); break; + case 32: isOverviewActive() ? deactivateOverview() : navigateNext(); break; // return - case 13: overviewIsActive() ? deactivateOverview() : triggered = false; break; + case 13: isOverviewActive() ? deactivateOverview() : triggered = false; break; + // b, period + case 66: case 190: togglePause(); break; default: triggered = false; } @@ -532,7 +586,7 @@ var Reveal = (function(){ function onOverviewSlideClicked( event ) { // TODO There's a bug here where the event listeners are not // removed after deactivating the overview. - if( overviewIsActive() ) { + if( isOverviewActive() ) { event.preventDefault(); deactivateOverview(); @@ -652,16 +706,66 @@ var Reveal = (function(){ } } + /** + * Toggles the slide overview mode on and off. + * + * @param {Boolean} override Optional flag which overrides the + * toggle logic and forcibly sets the desired state. True means + * overview is open, false means it's closed. + */ + function toggleOverview( override ) { + if( typeof override === 'boolean' ) { + override ? activateOverview() : deactivateOverview(); + } + else { + isOverviewActive() ? deactivateOverview() : activateOverview(); + } + } + /** * Checks if the overview is currently active. * * @return {Boolean} true if the overview is active, * false otherwise */ - function overviewIsActive() { + function isOverviewActive() { return dom.wrapper.classList.contains( 'overview' ); } + /** + * Enters the paused mode which fades everything on screen to + * black. + */ + function pause() { + dom.wrapper.classList.add( 'paused' ); + } + + /** + * Exits from the paused mode. + */ + function resume() { + dom.wrapper.classList.remove( 'paused' ); + } + + /** + * Toggles the paused mode on and off. + */ + function togglePause() { + if( isPaused() ) { + resume(); + } + else { + pause(); + } + } + + /** + * Checks if we are currently in the paused mode. + */ + function isPaused() { + return dom.wrapper.classList.contains( 'paused' ); + } + /** * Updates one dimension of slides by showing the slide * with the specified index. @@ -701,7 +805,7 @@ var Reveal = (function(){ // Optimization; hide all slides that are three or more steps // away from the present slide - if( overviewIsActive() === false ) { + if( isOverviewActive() === false ) { // The distance loops so that it measures 1 between the first // and last slides var distance = Math.abs( ( index - i ) % ( slidesLength - 3 ) ) || 0; @@ -801,7 +905,7 @@ var Reveal = (function(){ } // If the overview is active, re-activate it to update positions - if( overviewIsActive() ) { + if( isOverviewActive() ) { activateOverview(); } @@ -1024,28 +1128,28 @@ var Reveal = (function(){ function navigateLeft() { // Prioritize hiding fragments - if( overviewIsActive() || previousFragment() === false ) { + if( isOverviewActive() || previousFragment() === false ) { slide( indexh - 1, 0 ); } } function navigateRight() { // Prioritize revealing fragments - if( overviewIsActive() || nextFragment() === false ) { + if( isOverviewActive() || nextFragment() === false ) { slide( indexh + 1, 0 ); } } function navigateUp() { // Prioritize hiding fragments - if( overviewIsActive() || previousFragment() === false ) { + if( isOverviewActive() || previousFragment() === false ) { slide( indexh, indexv - 1 ); } } function navigateDown() { // Prioritize revealing fragments - if( overviewIsActive() || nextFragment() === false ) { + if( isOverviewActive() || nextFragment() === false ) { slide( indexh, indexv + 1 ); } } @@ -1088,22 +1192,6 @@ var Reveal = (function(){ // another timeout cueAutoSlide(); } - - /** - * Toggles the slide overview mode on and off. - * - * @param {Boolean} override Optional flag which overrides the - * toggle logic and forcibly sets the desired state. True means - * overview is open, false means it's closed. - */ - function toggleOverview( override ) { - if( typeof override === 'boolean' ) { - override ? activateOverview() : deactivateOverview(); - } - else { - overviewIsActive() ? deactivateOverview() : activateOverview(); - } - } // Expose some methods publicly return { diff --git a/js/reveal.min.js b/js/reveal.min.js index 1a84333..0b8f16f 100644 --- a/js/reveal.min.js +++ b/js/reveal.min.js @@ -1,72 +1,78 @@ /*! - * reveal.js 2.1 r28 + * reveal.js 2.1 r29 * http://lab.hakim.se/reveal-js * MIT licensed * * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se */ -var Reveal=(function(){var j=".reveal .slides>section",b=".reveal .slides>section.present>section",M={controls:true,progress:true,history:false,keyboard:true,overview:true,loop:false,autoSlide:0,mouseWheel:true,rollingLinks:true,theme:"default",transition:"default",dependencies:[]},k=0,c=0,v,D,ab=[],d={},O="WebkitPerspective" in document.body.style||"MozPerspective" in document.body.style||"msPerspective" in document.body.style||"OPerspective" in document.body.style||"perspective" in document.body.style,l="WebkitTransform" in document.body.style||"MozTransform" in document.body.style||"msTransform" in document.body.style||"OTransform" in document.body.style||"transform" in document.body.style,w=0,i=0,z=0,V={startX:0,startY:0,startSpan:0,startCount:0,handled:false,threshold:40}; -function g(ac){if((!l&&!O)){document.body.setAttribute("class","no-transforms");return;}q(M,ac);d.theme=document.querySelector("#theme");d.wrapper=document.querySelector(".reveal"); -d.progress=document.querySelector(".reveal .progress");d.progressbar=document.querySelector(".reveal .progress span");if(M.controls){d.controls=document.querySelector(".reveal .controls"); -d.controlsLeft=document.querySelector(".reveal .controls .left");d.controlsRight=document.querySelector(".reveal .controls .right");d.controlsUp=document.querySelector(".reveal .controls .up"); -d.controlsDown=document.querySelector(".reveal .controls .down");}Q();if(navigator.userAgent.match(/(iphone|ipod|android)/i)){document.documentElement.style.overflow="scroll"; -document.body.style.height="120%";window.addEventListener("load",W,false);window.addEventListener("orientationchange",W,false);}}function Q(){var ad=[],ah=[]; -for(var ae=0,ac=M.dependencies.length;aeV.threshold){V.handled=true;if(agV.threshold&&Math.abs(ad)>Math.abs(ac)){V.handled=true;y();}else{if(ad<-V.threshold&&Math.abs(ad)>Math.abs(ac)){V.handled=true;h();}else{if(ac>V.threshold){V.handled=true; -r();}else{if(ac<-V.threshold){V.handled=true;C();}}}}}}ah.preventDefault();}else{if(navigator.userAgent.match(/android/gi)){ah.preventDefault();}}}function R(ac){V.handled=false; -}function m(ac){clearTimeout(w);w=setTimeout(function(){var ad=ac.detail||-ac.wheelDelta;if(ad>0){u();}else{T();}},100);}function t(ac){G();}function A(ac){if(U()){ac.preventDefault(); -X();k=this.getAttribute("data-index-h");c=this.getAttribute("data-index-v");a();}}function I(){if(O&&!("msPerspective" in document.body.style)){var ad=document.querySelectorAll(".reveal .slides section a:not(.image)"); -for(var ae=0,ac=ad.length;ae'+af.innerHTML+"";}}}}function F(){if(M.overview){d.wrapper.classList.add("overview");var ac=document.querySelectorAll(j); -for(var ah=0,af=ac.length;ah3?"none":"block";}ah[ag].classList.remove("past");ah[ag].classList.remove("present");ah[ag].classList.remove("future");if(agaf){ah[ag].classList.add("future");}}if(ac.querySelector("section")){ah[ag].classList.add("stack");}}ah[af].classList.add("present");var ae=ah[af].getAttribute("data-state"); -if(ae){ab=ab.concat(ae.split(" "));}}else{af=0;}return af;}function a(ai,am){v=D;var af=ab.concat();ab.length=0;var al=k,ad=c;k=aa(j,ai===undefined?k:ai); -c=aa(b,am===undefined?c:am);stateLoop:for(var ag=0,aj=ab.length;ag0,right:k0,down:c0||c>0){ac+=k;}if(c>0){ac+="/"+c;}window.location.hash=ac;}}function s(){if(document.querySelector(b+".present")){var ad=document.querySelectorAll(b+".present .fragment:not(.visible)"); -if(ad.length){ad[0].classList.add("visible");o("fragmentshown",{fragment:ad[0]});return true;}}else{var ac=document.querySelectorAll(j+".present .fragment:not(.visible)"); -if(ac.length){ac[0].classList.add("visible");o("fragmentshown",{fragment:ac[0]});return true;}}return false;}function L(){if(document.querySelector(b+".present")){var ad=document.querySelectorAll(b+".present .fragment.visible"); -if(ad.length){ad[ad.length-1].classList.remove("visible");o("fragmenthidden",{fragment:ad[ad.length-1]});return true;}}else{var ac=document.querySelectorAll(j+".present .fragment.visible"); -if(ac.length){ac[ac.length-1].classList.remove("visible");o("fragmenthidden",{fragment:ac[ac.length-1]});return true;}}return false;}function J(){clearTimeout(i); -if(M.autoSlide){i=setTimeout(u,M.autoSlide);}}function K(ad,ac){a(ad,ac);}function y(){if(U()||L()===false){a(k-1,0);}}function h(){if(U()||s()===false){a(k+1,0); -}}function r(){if(U()||L()===false){a(k,c-1);}}function C(){if(U()||s()===false){a(k,c+1);}}function T(){if(L()===false){if(e().up){r();}else{var ac=document.querySelector(".reveal .slides>section.past:nth-child("+k+")"); -if(ac){c=(ac.querySelectorAll("section").length+1)||0;k--;a();}}}}function u(){if(s()===false){e().down?C():h();}J();}function S(ac){if(typeof ac==="boolean"){ac?F():X(); -}else{U()?X():F();}}return{initialize:g,navigateTo:K,navigateLeft:y,navigateRight:h,navigateUp:r,navigateDown:C,navigatePrev:T,navigateNext:u,toggleOverview:S,addEventListeners:B,removeEventListeners:P,getIndices:function(ac){var ag=k,ae=c; -if(ac){var ah=!!ac.parentNode.nodeName.match(/section/gi);var af=ah?ac.parentNode:ac;var ad=Array.prototype.slice.call(document.querySelectorAll(j));ag=Math.max(ad.indexOf(af),0); -if(ah){ae=Math.max(Array.prototype.slice.call(ac.parentNode.children).indexOf(ac),0);}}return{h:ag,v:ae};},getPreviousSlide:function(){return v;},getCurrentSlide:function(){return D; -},getQueryHash:function(){var ac={};location.search.replace(/[A-Z0-9]+?=(\w*)/gi,function(ad){ac[ad.split("=").shift()]=ad.split("=").pop();});return ac; -},addEventListener:function(ad,ae,ac){if("addEventListener" in window){(d.wrapper||document.querySelector(".reveal")).addEventListener(ad,ae,ac);}},removeEventListener:function(ad,ae,ac){if("addEventListener" in window){(d.wrapper||document.querySelector(".reveal")).removeEventListener(ad,ae,ac); +var Reveal=(function(){var l=".reveal .slides>section",b=".reveal .slides>section.present>section",R={controls:true,progress:true,history:false,keyboard:true,overview:true,loop:false,autoSlide:0,mouseWheel:true,rollingLinks:true,theme:"default",transition:"default",dependencies:[]},m=0,e=0,y,G,ah=[],f={},T="WebkitPerspective" in document.body.style||"MozPerspective" in document.body.style||"msPerspective" in document.body.style||"OPerspective" in document.body.style||"perspective" in document.body.style,n="WebkitTransform" in document.body.style||"MozTransform" in document.body.style||"msTransform" in document.body.style||"OTransform" in document.body.style||"transform" in document.body.style,z=0,k=0,C=0,aa={startX:0,startY:0,startSpan:0,startCount:0,handled:false,threshold:40}; +function i(ai){if((!n&&!T)){document.body.setAttribute("class","no-transforms");return;}t(R,ai);P();d();V();}function P(){f.theme=document.querySelector("#theme"); +f.wrapper=document.querySelector(".reveal");if(!f.wrapper.querySelector(".progress")&&R.progress){var al=document.createElement("div");al.classList.add("progress"); +al.innerHTML="";f.wrapper.appendChild(al);}if(!f.wrapper.querySelector(".controls")&&R.controls){var ak=document.createElement("aside");ak.classList.add("controls"); +ak.innerHTML='◄►▲▼'; +f.wrapper.appendChild(ak);}if(!f.wrapper.querySelector(".state-background")){var aj=document.createElement("div");aj.classList.add("state-background"); +f.wrapper.appendChild(aj);}if(!f.wrapper.querySelector(".pause-overlay")){var ai=document.createElement("div");ai.classList.add("pause-overlay");f.wrapper.appendChild(ai); +}f.progress=document.querySelector(".reveal .progress");f.progressbar=document.querySelector(".reveal .progress span");if(R.controls){f.controls=document.querySelector(".reveal .controls"); +f.controlsLeft=document.querySelector(".reveal .controls .left");f.controlsRight=document.querySelector(".reveal .controls .right");f.controlsUp=document.querySelector(".reveal .controls .up"); +f.controlsDown=document.querySelector(".reveal .controls .down");}}function d(){if(navigator.userAgent.match(/(iphone|ipod|android)/i)){document.documentElement.style.overflow="scroll"; +document.body.style.height="120%";window.addEventListener("load",ab,false);window.addEventListener("orientationchange",ab,false);}}function V(){var aj=[],an=[]; +for(var ak=0,ai=R.dependencies.length;akaa.threshold){aa.handled=true;if(amaa.threshold&&Math.abs(aj)>Math.abs(ai)){aa.handled=true;B();}else{if(aj<-aa.threshold&&Math.abs(aj)>Math.abs(ai)){aa.handled=true;j();}else{if(ai>aa.threshold){aa.handled=true; +u();}else{if(ai<-aa.threshold){aa.handled=true;F();}}}}}}an.preventDefault();}else{if(navigator.userAgent.match(/android/gi)){an.preventDefault();}}}function W(ai){aa.handled=false; +}function p(ai){clearTimeout(z);z=setTimeout(function(){var aj=ai.detail||-ai.wheelDelta;if(aj>0){x();}else{Y();}},100);}function w(ai){J();}function D(ai){if(L()){ai.preventDefault(); +ac();m=this.getAttribute("data-index-h");e=this.getAttribute("data-index-v");a();}}function M(){if(T&&!("msPerspective" in document.body.style)){var aj=document.querySelectorAll(".reveal .slides section a:not(.image)"); +for(var ak=0,ai=aj.length;ak'+al.innerHTML+"";}}}}function I(){if(R.overview){f.wrapper.classList.add("overview");var ai=document.querySelectorAll(l); +for(var an=0,al=ai.length;an3?"none":"block";}an[am].classList.remove("past"); +an[am].classList.remove("present");an[am].classList.remove("future");if(amal){an[am].classList.add("future"); +}}if(ai.querySelector("section")){an[am].classList.add("stack");}}an[al].classList.add("present");var ak=an[al].getAttribute("data-state");if(ak){ah=ah.concat(ak.split(" ")); +}}else{al=0;}return al;}function a(ao,at){y=G;var al=ah.concat();ah.length=0;var ar=m,aj=e;m=ag(l,ao===undefined?m:ao);e=ag(b,at===undefined?e:at);stateLoop:for(var am=0,ap=ah.length; +am0,right:m0,down:e0||e>0){ai+=m;}if(e>0){ai+="/"+e;}window.location.hash=ai;}}function v(){if(document.querySelector(b+".present")){var aj=document.querySelectorAll(b+".present .fragment:not(.visible)"); +if(aj.length){aj[0].classList.add("visible");r("fragmentshown",{fragment:aj[0]});return true;}}else{var ai=document.querySelectorAll(l+".present .fragment:not(.visible)"); +if(ai.length){ai[0].classList.add("visible");r("fragmentshown",{fragment:ai[0]});return true;}}return false;}function Q(){if(document.querySelector(b+".present")){var aj=document.querySelectorAll(b+".present .fragment.visible"); +if(aj.length){aj[aj.length-1].classList.remove("visible");r("fragmenthidden",{fragment:aj[aj.length-1]});return true;}}else{var ai=document.querySelectorAll(l+".present .fragment.visible"); +if(ai.length){ai[ai.length-1].classList.remove("visible");r("fragmenthidden",{fragment:ai[ai.length-1]});return true;}}return false;}function N(){clearTimeout(k); +if(R.autoSlide){k=setTimeout(x,R.autoSlide);}}function O(aj,ai){a(aj,ai);}function B(){if(L()||Q()===false){a(m-1,0);}}function j(){if(L()||v()===false){a(m+1,0); +}}function u(){if(L()||Q()===false){a(m,e-1);}}function F(){if(L()||v()===false){a(m,e+1);}}function Y(){if(Q()===false){if(g().up){u();}else{var ai=document.querySelector(".reveal .slides>section.past:nth-child("+m+")"); +if(ai){e=(ai.querySelectorAll("section").length+1)||0;m--;a();}}}}function x(){if(v()===false){g().down?F():j();}N();}return{initialize:i,navigateTo:O,navigateLeft:B,navigateRight:j,navigateUp:u,navigateDown:F,navigatePrev:Y,navigateNext:x,toggleOverview:X,addEventListeners:E,removeEventListeners:U,getIndices:function(ai){var am=m,ak=e; +if(ai){var an=!!ai.parentNode.nodeName.match(/section/gi);var al=an?ai.parentNode:ai;var aj=Array.prototype.slice.call(document.querySelectorAll(l));am=Math.max(aj.indexOf(al),0); +if(an){ak=Math.max(Array.prototype.slice.call(ai.parentNode.children).indexOf(ai),0);}}return{h:am,v:ak};},getPreviousSlide:function(){return y;},getCurrentSlide:function(){return G; +},getQueryHash:function(){var ai={};location.search.replace(/[A-Z0-9]+?=(\w*)/gi,function(aj){ai[aj.split("=").shift()]=aj.split("=").pop();});return ai; +},addEventListener:function(aj,ak,ai){if("addEventListener" in window){(f.wrapper||document.querySelector(".reveal")).addEventListener(aj,ak,ai);}},removeEventListener:function(aj,ak,ai){if("addEventListener" in window){(f.wrapper||document.querySelector(".reveal")).removeEventListener(aj,ak,ai); }}};})(); \ No newline at end of file -- cgit v1.2.3 From bb47678b27b3e1600009e664da9b19bce92f4839 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Sat, 13 Oct 2012 10:08:06 -0400 Subject: tweaks to page and cube transitions, change sky theme text-highlight color --- css/reveal.css | 24 ++++++++++-------------- css/theme/sky.css | 6 +++--- 2 files changed, 13 insertions(+), 17 deletions(-) (limited to 'css/reveal.css') diff --git a/css/reveal.css b/css/reveal.css index d493b22..00f7920 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -577,12 +577,10 @@ body { *********************************************/ .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-origin: 0% 25%; + -moz-perspective-origin: 0% 25%; + -ms-perspective-origin: 0% 25%; + perspective-origin: 0% 25%; -webkit-perspective: 1300px; -moz-perspective: 1300px; @@ -610,7 +608,7 @@ body { height: 100%; left: 0; top: 0; - background: #232628; + background: rgba(0,0,0,0.1); border-radius: 4px; -webkit-transform: translateZ( -20px ); @@ -699,12 +697,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; @@ -730,7 +726,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 ); diff --git a/css/theme/sky.css b/css/theme/sky.css index 2f2bee2..92a91af 100644 --- a/css/theme/sky.css +++ b/css/theme/sky.css @@ -35,15 +35,15 @@ body { } ::-moz-selection { - background:rgba(79, 64, 28, 0.99); + background: #134674; color: white; } ::-webkit-selection { - background:rgba(79, 64, 28, 0.99); + background: #134674; color: white; } ::selection { - background:rgba(79, 64, 28, 0.99); + background: #134674; color: white; } -- cgit v1.2.3 From 6619bc62bdde24bf79769c5ed63ac931e127d7f6 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Sat, 13 Oct 2012 10:28:34 -0400 Subject: add zoom transition --- README.md | 2 +- css/reveal.css | 50 ++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 4 +++- js/reveal.js | 4 ++-- js/reveal.min.js | 2 +- 5 files changed, 57 insertions(+), 5 deletions(-) (limited to 'css/reveal.css') diff --git a/README.md b/README.md index 5b1684e..c14ede9 100644 --- a/README.md +++ b/README.md @@ -85,7 +85,7 @@ Reveal.initialize({ rollingLinks: true, // Transition style - transition: 'default' // default/cube/page/concave/linear(2d) + transition: 'default' // default/cube/page/concave/zoom/linear/none }); ``` diff --git a/css/reveal.css b/css/reveal.css index 00f7920..358d954 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -537,6 +537,56 @@ body { } +/********************************************* + * 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 *********************************************/ diff --git a/index.html b/index.html index 5dba9a4..3ea2412 100644 --- a/index.html +++ b/index.html @@ -151,7 +151,9 @@ Cube - Page - Concave - + Zoom - Linear - + None - Default

@@ -335,7 +337,7 @@ function linkify( selector ) { history: true, theme: Reveal.getQueryHash().theme, // available themes are in /css/theme - transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/linear(2d) + transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/none // Optional libraries used to extend on reveal.js dependencies: [ diff --git a/js/reveal.js b/js/reveal.js index 3dcedf0..8b19c46 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -1,5 +1,5 @@ /*! - * reveal.js 2.1 r30 + * reveal.js 2.1 r31 * http://lab.hakim.se/reveal-js * MIT licensed * @@ -46,7 +46,7 @@ var Reveal = (function(){ theme: null, // Transition style - transition: 'default', // default/cube/page/concave/linear(2d), + transition: 'default', // default/cube/page/concave/zoom/linear/none // Script dependencies to load dependencies: [] diff --git a/js/reveal.min.js b/js/reveal.min.js index bb03527..5568ab3 100644 --- a/js/reveal.min.js +++ b/js/reveal.min.js @@ -1,5 +1,5 @@ /*! - * reveal.js 2.1 r30 + * reveal.js 2.1 r31 * http://lab.hakim.se/reveal-js * MIT licensed * -- cgit v1.2.3 From ecb4347ec1d9db8cceec1cb28385fc2326087b17 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Sat, 20 Oct 2012 10:57:51 -0400 Subject: modularize themes and convert them to sass (closes #191) --- .gitignore | 1 + css/reveal.css | 7 +- css/theme/README.md | 5 + css/theme/beige.css | 216 +++++++++++++++------------------------ css/theme/default.css | 211 +++++++++++++++----------------------- css/theme/serif.css | 191 +++++++++++++--------------------- css/theme/simple.css | 186 ++++++++++++++------------------- css/theme/sky.css | 203 ++++++++++++++---------------------- css/theme/source/beige.scss | 50 +++++++++ css/theme/source/default.scss | 42 ++++++++ css/theme/source/serif.scss | 33 ++++++ css/theme/source/simple.scss | 38 +++++++ css/theme/source/sky.scss | 41 ++++++++ css/theme/template/mixins.scss | 29 ++++++ css/theme/template/settings.scss | 33 ++++++ css/theme/template/theme.scss | 135 ++++++++++++++++++++++++ index.html | 6 +- js/reveal.js | 2 + 18 files changed, 805 insertions(+), 624 deletions(-) create mode 100644 css/theme/README.md create mode 100644 css/theme/source/beige.scss create mode 100644 css/theme/source/default.scss create mode 100644 css/theme/source/serif.scss create mode 100644 css/theme/source/simple.scss create mode 100644 css/theme/source/sky.scss create mode 100644 css/theme/template/mixins.scss create mode 100644 css/theme/template/settings.scss create mode 100644 css/theme/template/theme.scss (limited to 'css/reveal.css') diff --git a/.gitignore b/.gitignore index 34058c4..9ffdbc7 100644 --- a/.gitignore +++ b/.gitignore @@ -3,3 +3,4 @@ log/*.log tmp/** node_modules/ +.sass-cache \ No newline at end of file diff --git a/css/reveal.css b/css/reveal.css index 358d954..9831255 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -1,6 +1,6 @@ @charset "UTF-8"; -/** +/*! * reveal.js * http://lab.hakim.se/reveal-js * MIT licensed @@ -196,7 +196,7 @@ body { display: block; position: relative; width: 90%; - margin: 10px auto; + margin: 15px auto; text-align: left; font-size: 0.55em; @@ -207,6 +207,9 @@ body { box-shadow: 0px 0px 6px rgba(0,0,0,0.3); } +.reveal pre code { + padding: 5px; +} .reveal code { font-family: monospace; diff --git a/css/theme/README.md b/css/theme/README.md new file mode 100644 index 0000000..137bdf2 --- /dev/null +++ b/css/theme/README.md @@ -0,0 +1,5 @@ +Themes are written using Sass to keep things modular and reduce the need for repeated selectors across files. Find out how to install Sass here http://sass-lang.com/, once Sass is installed run the follwing command to start monitoring the source files for changes. + +``` +sass --watch css/theme/source/:css/theme --style expanded +``` \ No newline at end of file diff --git a/css/theme/beige.css b/css/theme/beige.css index 4e7a987..6b887f3 100644 --- a/css/theme/beige.css +++ b/css/theme/beige.css @@ -1,190 +1,136 @@ -/** - * A beige theme for reveal.js presentations, similar - * to the default theme. +@import url(http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); +/* + * Beige theme for reveal.js. * * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se */ - -/********************************************* - * FONTS - *********************************************/ - @font-face { - font-family: 'League Gothic'; - src: url('../../lib/font/league_gothic-webfont.eot'); - src: url('../../lib/font/league_gothic-webfont.eot?#iefix') format('embedded-opentype'), - url('../../lib/font/league_gothic-webfont.woff') format('woff'), - url('../../lib/font/league_gothic-webfont.ttf') format('truetype'), - url('../../lib/font/league_gothic-webfont.svg#LeagueGothicRegular') format('svg'); - - font-weight: normal; - font-style: normal; -} - -.reveal { - font-family: 'Lato', Times, 'Times New Roman', serif; - font-size: 36px; - font-weight: 200; - letter-spacing: -0.02em; + font-family: 'League Gothic'; + src: url("../../lib/font/league_gothic-webfont.eot"); + src: url("../../lib/font/league_gothic-webfont.eot?#iefix") format("embedded-opentype"), url("../../lib/font/league_gothic-webfont.woff") format("woff"), url("../../lib/font/league_gothic-webfont.ttf") format("truetype"), url("../../lib/font/league_gothic-webfont.svg#LeagueGothicRegular") format("svg"); + font-weight: normal; + font-style: normal; } -.reveal h1, -.reveal h2, -.reveal h3, -.reveal h4, -.reveal h5, -.reveal h6 { - font-family: 'League Gothic', Impact, sans-serif; - line-height: 0.9em; - letter-spacing: 0.02em; - - text-transform: uppercase; -} - - /********************************************* * GLOBAL STYLES *********************************************/ - body { - color: #333; - - background: #f7f3de; - background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(247,242,211,1) 100%); - background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(247,242,211,1))); - background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(247,242,211,1) 100%); - background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(247,242,211,1) 100%); - background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(247,242,211,1) 100%); - background: radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(247,242,211,1) 100%); + background: white; + background: -moz-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%); + background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, white), color-stop(100%, #f7f2d3)); + background: -webkit-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%); + background: -o-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%); + background: -ms-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%); + background: radial-gradient(center, circle cover, white 0%, #f7f2d3 100%); } -::-moz-selection { - background:rgba(79, 64, 28, 0.99); - color: white; -} -::-webkit-selection { - background:rgba(79, 64, 28, 0.99); - color: white; +.reveal { + font-family: "Lato", Times, "Times New Roman", serif; + font-size: 36px; + font-weight: 200; + letter-spacing: -0.02em; + color: #333333; } + ::selection { - background:rgba(79, 64, 28, 0.99); - color: white; + color: white; + background: rgba(79, 64, 28, 0.99); + text-shadow: none; } - /********************************************* * HEADERS *********************************************/ - -.reveal h1, -.reveal h2, -.reveal h3, -.reveal h4, -.reveal h5, +.reveal h1, +.reveal h2, +.reveal h3, +.reveal h4, +.reveal h5, .reveal h6 { - margin: 0 0 20px 0; - color: #333; + margin: 0 0 20px 0; + color: #333333; + font-family: "League Gothic", Impact, sans-serif; + line-height: 0.9em; + letter-spacing: 0.02em; + text-transform: uppercase; + text-shadow: none; } .reveal h1 { - text-shadow: 0 1px 0 #ccc, - 0 2px 0 #c9c9c9, - 0 3px 0 #bbb, - 0 4px 0 #b9b9b9, - 0 5px 0 #aaa, - 0 6px 1px rgba(0,0,0,.1), - 0 0 5px rgba(0,0,0,.1), - 0 1px 3px rgba(0,0,0,.3), - 0 3px 5px rgba(0,0,0,.2), - 0 5px 10px rgba(0,0,0,.25), - 0 20px 20px rgba(0,0,0,.15); + text-shadow: 0 1px 0 #cccccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbbbbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaaaaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 20px 20px rgba(0, 0, 0, 0.15); } - /********************************************* * LINKS *********************************************/ - .reveal a:not(.image) { - color: #8b743d; - text-decoration: none; + color: #8b743d; + text-decoration: none; + -webkit-transition: color .15s ease; + -moz-transition: color .15s ease; + -ms-transition: color .15s ease; + -o-transition: color .15s ease; + transition: color .15s ease; +} - -webkit-transition: color .15s ease; - -moz-transition: color .15s ease; - -ms-transition: color .15s ease; - -o-transition: color .15s ease; - transition: color .15s ease; +.reveal a:not(.image):hover { + color: #c0a86e; + text-shadow: none; + border: none; + border-radius: 2px; } - .reveal a:not(.image):hover { - text-shadow: none; - border: none; - border-radius: 2px; - } .reveal .roll span:after { - color: #fff; - background: #8b743d; + color: #fff; + background: #564826; } - /********************************************* * IMAGES *********************************************/ - .reveal section img { - margin: 30px 0 0 0; - background: rgba(255,255,255,0.12); - border: 4px solid #eee; - - -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); - -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); - box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); - - -webkit-transition: all .2s linear; - -moz-transition: all .2s linear; - -ms-transition: all .2s linear; - -o-transition: all .2s linear; - transition: all .2s linear; + margin: 15px; + background: rgba(255, 255, 255, 0.12); + border: 4px solid #333333; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); + -webkit-transition: all .2s linear; + -moz-transition: all .2s linear; + -ms-transition: all .2s linear; + -o-transition: all .2s linear; + transition: all .2s linear; } - .reveal a:hover img { - background: rgba(255,255,255,0.2); - border-color: #8b743d; - - -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); - -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); - box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); - } - +.reveal a:hover img { + background: rgba(255, 255, 255, 0.2); + border-color: #8b743d; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); +} /********************************************* * NAVIGATION CONTROLS *********************************************/ - .reveal .controls a { - color: #fff; + color: #333333; } - .reveal .controls a.enabled { - color: #8b743d; - text-shadow: 0px 0px 2px hsla(185, 45%, 70%, 0.3); - } +.reveal .controls a.enabled { + color: #c0a86e; + text-shadow: 0px 0px 2px rgba(144, 207, 213, 0.3); +} /********************************************* * PROGRESS BAR *********************************************/ - .reveal .progress { - background: rgba(0,0,0,0.2); + background: rgba(0, 0, 0, 0.2); } - .reveal .progress span { - background: #8b743d; - - -webkit-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); - -moz-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); - -ms-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); - -o-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); - transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); - } - +.reveal .progress span { + background: #8b743d; + -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); + -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); + -ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); + -o-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); + transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); +} diff --git a/css/theme/default.css b/css/theme/default.css index a937b8e..d8f9299 100644 --- a/css/theme/default.css +++ b/css/theme/default.css @@ -1,181 +1,136 @@ -/** - * The default theme for reveal.js presentations. +@import url(http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); +/* + * Default theme for reveal.js. * * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se */ - -/********************************************* - * FONTS - *********************************************/ - @font-face { - font-family: 'League Gothic'; - src: url('../../lib/font/league_gothic-webfont.eot'); - src: url('../../lib/font/league_gothic-webfont.eot?#iefix') format('embedded-opentype'), - url('../../lib/font/league_gothic-webfont.woff') format('woff'), - url('../../lib/font/league_gothic-webfont.ttf') format('truetype'), - url('../../lib/font/league_gothic-webfont.svg#LeagueGothicRegular') format('svg'); - - font-weight: normal; - font-style: normal; -} - -.reveal { - font-family: 'Lato', Times, 'Times New Roman', serif; - font-size: 36px; - font-weight: 200; - letter-spacing: -0.02em; + font-family: 'League Gothic'; + src: url("../../lib/font/league_gothic-webfont.eot"); + src: url("../../lib/font/league_gothic-webfont.eot?#iefix") format("embedded-opentype"), url("../../lib/font/league_gothic-webfont.woff") format("woff"), url("../../lib/font/league_gothic-webfont.ttf") format("truetype"), url("../../lib/font/league_gothic-webfont.svg#LeagueGothicRegular") format("svg"); + font-weight: normal; + font-style: normal; } -.reveal h1, -.reveal h2, -.reveal h3, -.reveal h4, -.reveal h5, -.reveal h6 { - font-family: 'League Gothic', Impact, sans-serif; - line-height: 0.9em; - letter-spacing: 0.02em; - - text-transform: uppercase; -} - - /********************************************* * GLOBAL STYLES *********************************************/ - body { - color: #eee; + background: #555a5f; + background: -moz-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%); + background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #555a5f), color-stop(100%, #1c1e20)); + background: -webkit-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%); + background: -o-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%); + background: -ms-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%); + background: radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%); +} - background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiM1NTVhNWYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMWMxZTIwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); - background-color: #2b2b2b; - background: -moz-radial-gradient(center, ellipse cover, rgba(85,90,95,1) 0%, rgba(28,30,32,1) 100%); - background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(85,90,95,1)), color-stop(100%,rgba(28,30,32,1))); - background: -webkit-radial-gradient(center, ellipse cover, rgba(85,90,95,1) 0%,rgba(28,30,32,1) 100%); - background: -o-radial-gradient(center, ellipse cover, rgba(85,90,95,1) 0%,rgba(28,30,32,1) 100%); - background: -ms-radial-gradient(center, ellipse cover, rgba(85,90,95,1) 0%,rgba(28,30,32,1) 100%); - background: radial-gradient(center, ellipse cover, rgba(85,90,95,1) 0%,rgba(28,30,32,1) 100%); +.reveal { + font-family: "Lato", Times, "Times New Roman", serif; + font-size: 36px; + font-weight: 200; + letter-spacing: -0.02em; + color: #eeeeee; } +::selection { + color: white; + background: #ff5e99; + text-shadow: none; +} /********************************************* * HEADERS *********************************************/ - -.reveal h1, -.reveal h2, -.reveal h3, -.reveal h4, -.reveal h5, +.reveal h1, +.reveal h2, +.reveal h3, +.reveal h4, +.reveal h5, .reveal h6 { - margin: 0 0 20px 0; - color: #eee; - - text-shadow: 0px 0px 6px rgba(0,0,0,0.2); + margin: 0 0 20px 0; + color: #eeeeee; + font-family: "League Gothic", Impact, sans-serif; + line-height: 0.9em; + letter-spacing: 0.02em; + text-transform: uppercase; + text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); } .reveal h1 { - text-shadow: 0 1px 0 #ccc, - 0 2px 0 #c9c9c9, - 0 3px 0 #bbb, - 0 4px 0 #b9b9b9, - 0 5px 0 #aaa, - 0 6px 1px rgba(0,0,0,.1), - 0 0 5px rgba(0,0,0,.1), - 0 1px 3px rgba(0,0,0,.3), - 0 3px 5px rgba(0,0,0,.2), - 0 5px 10px rgba(0,0,0,.25), - 0 20px 20px rgba(0,0,0,.15); + text-shadow: 0 1px 0 #cccccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbbbbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaaaaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 20px 20px rgba(0, 0, 0, 0.15); } - /********************************************* * LINKS *********************************************/ - .reveal a:not(.image) { - color: hsl(185, 85%, 50%); - text-decoration: none; + color: #13daec; + text-decoration: none; + -webkit-transition: color .15s ease; + -moz-transition: color .15s ease; + -ms-transition: color .15s ease; + -o-transition: color .15s ease; + transition: color .15s ease; +} - -webkit-transition: color .15s ease; - -moz-transition: color .15s ease; - -ms-transition: color .15s ease; - -o-transition: color .15s ease; - transition: color .15s ease; +.reveal a:not(.image):hover { + color: #71e9f4; + text-shadow: none; + border: none; + border-radius: 2px; } - .reveal a:not(.image):hover { - color: hsl(185, 85%, 70%); - - text-shadow: none; - border: none; - border-radius: 2px; - } .reveal .roll span:after { - color: #fff; - background: hsl(185, 60%, 35%); + color: #fff; + background: #0d99a5; } - /********************************************* * IMAGES *********************************************/ - .reveal section img { - margin: 30px 0 0 0; - background: rgba(255,255,255,0.12); - border: 4px solid #eee; - - -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); - -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); - box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); - - -webkit-transition: all .2s linear; - -moz-transition: all .2s linear; - -ms-transition: all .2s linear; - -o-transition: all .2s linear; - transition: all .2s linear; + margin: 15px; + background: rgba(255, 255, 255, 0.12); + border: 4px solid #eeeeee; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); + -webkit-transition: all .2s linear; + -moz-transition: all .2s linear; + -ms-transition: all .2s linear; + -o-transition: all .2s linear; + transition: all .2s linear; } - .reveal a:hover img { - background: rgba(255,255,255,0.2); - border-color: #13DAEC; - - -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); - -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); - box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); - } - +.reveal a:hover img { + background: rgba(255, 255, 255, 0.2); + border-color: #13daec; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); +} /********************************************* * NAVIGATION CONTROLS *********************************************/ - .reveal .controls a { - color: #fff; + color: #eeeeee; } - .reveal .controls a.enabled { - color: hsl(185, 85%, 70%); - text-shadow: 0px 0px 2px hsla(185, 45%, 70%, 0.3); - } +.reveal .controls a.enabled { + color: #71e9f4; + text-shadow: 0px 0px 2px rgba(144, 207, 213, 0.3); +} /********************************************* * PROGRESS BAR *********************************************/ - .reveal .progress { - background: rgba(0,0,0,0.2); + background: rgba(0, 0, 0, 0.2); } - .reveal .progress span { - background: hsl(185, 85%, 50%); - - -webkit-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); - -moz-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); - -ms-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); - -o-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); - transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); - } - +.reveal .progress span { + background: #13daec; + -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); + -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); + -ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); + -o-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); + transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); +} diff --git a/css/theme/serif.css b/css/theme/serif.css index 690ff2d..b9f2406 100644 --- a/css/theme/serif.css +++ b/css/theme/serif.css @@ -1,170 +1,123 @@ -/** +/* * A simple theme for reveal.js presentations, similar - * to the default theme. The accent color is darkblue; - * do a find-replace to change it. + * to the default theme. The accent color is darkblue. * * This theme is Copyright (C) 2012 Owen Versteeg, https://github.com/StereotypicalApps. It is MIT licensed. * reveal.js is Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se; so is the theme - beige.css - that this is based off of. */ - -/********************************************* - * FONTS - *********************************************/ - -.reveal { - font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif; - font-size: 36px; - font-weight: 200; - letter-spacing: -0.02em; -} - -.reveal h1, -.reveal h2, -.reveal h3, -.reveal h4, -.reveal h5, -.reveal h6 { - font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif; - line-height: 0.9em; -} - - /********************************************* * GLOBAL STYLES *********************************************/ - body { - color: black !important; - - background: #F0F1EB; + background: #f0f1eb; } -::-moz-selection { - background: #26351C; - color: rgba(255,255,255, 0.8); -} -::-webkit-selection { - background: #26351C; - color: rgba(255,255,255, 0.8); +.reveal { + font-family: "Palatino Linotype", "Book Antiqua", Palatino, FreeSerif, serif; + font-size: 36px; + font-weight: 200; + letter-spacing: -0.02em; + color: black; } + ::selection { - background: #26351C; - color: rgba(255,255,255, 0.8); + color: white; + background: #26351c; + text-shadow: none; } /********************************************* * HEADERS *********************************************/ - -.reveal h1, -.reveal h2, -.reveal h3, -.reveal h4, -.reveal h5, +.reveal h1, +.reveal h2, +.reveal h3, +.reveal h4, +.reveal h5, .reveal h6 { - margin: 0 0 40px 0; - color: #383D3D; + margin: 0 0 20px 0; + color: #383d3d; + font-family: "Palatino Linotype", "Book Antiqua", Palatino, FreeSerif, serif; + line-height: 0.9em; + letter-spacing: 0.02em; + text-transform: none; + text-shadow: none; +} + +.reveal h1 { + text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); } /********************************************* * LINKS *********************************************/ - .reveal a:not(.image) { - color: #51483D; - text-decoration: none; - font-weight: bold; - line-height: 1.4em; - -webkit-transition: color .15s ease; - -moz-transition: color .15s ease; - -ms-transition: color .15s ease; - -o-transition: color .15s ease; - transition: color .15s ease; + color: #51483d; + text-decoration: none; + -webkit-transition: color .15s ease; + -moz-transition: color .15s ease; + -ms-transition: color .15s ease; + -o-transition: color .15s ease; + transition: color .15s ease; } - .reveal a:not(.image):hover { - text-shadow: none; - border: none; - border-radius: 2px; - } -.reveal .roll span:after { - color: #fff; - background: #51483D; +.reveal a:not(.image):hover { + color: #8b7c69; + text-shadow: none; + border: none; + border-radius: 2px; } -/********************************************* - * MISC - *********************************************/ - -.reveal p { - line-height: 1.4em; - font-size: 1.15em; - color: #111; -} - -.reveal .subtitle { - font-style: italic; +.reveal .roll span:after { + color: #fff; + background: #25211c; } /********************************************* * IMAGES *********************************************/ - .reveal section img { - margin: 30px 0 0 0; - background: rgba(255,255,255,0.12); - border: 4px solid #eee; - - -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); - -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); - box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); - - -webkit-transition: all .2s linear; - -moz-transition: all .2s linear; - -ms-transition: all .2s linear; - -o-transition: all .2s linear; - transition: all .2s linear; + margin: 15px; + background: rgba(255, 255, 255, 0.12); + border: 4px solid black; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); + -webkit-transition: all .2s linear; + -moz-transition: all .2s linear; + -ms-transition: all .2s linear; + -o-transition: all .2s linear; + transition: all .2s linear; } - .reveal a:hover img { - background: rgba(255,255,255,0.2); - border-color: darkblue; - - -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); - -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); - box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); - } - +.reveal a:hover img { + background: rgba(255, 255, 255, 0.2); + border-color: #51483d; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); +} /********************************************* * NAVIGATION CONTROLS *********************************************/ - .reveal .controls a { - color: black; + color: black; } - .reveal .controls a.enabled { - color: #26351C; - opacity: 1; - text-shadow: 0px 0px 2px hsla(185, 45%, 70%, 0.3); - } +.reveal .controls a.enabled { + color: #8b7c69; + text-shadow: 0px 0px 2px rgba(144, 207, 213, 0.3); +} /********************************************* * PROGRESS BAR *********************************************/ - .reveal .progress { - background: rgba(0,0,0,0.2); + background: rgba(0, 0, 0, 0.2); } - .reveal .progress span { - background: #26351C; - - -webkit-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); - -moz-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); - -ms-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); - -o-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); - transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); - } - +.reveal .progress span { + background: #51483d; + -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); + -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); + -ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); + -o-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); + transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); +} diff --git a/css/theme/simple.css b/css/theme/simple.css index 2d782ae..53d665f 100644 --- a/css/theme/simple.css +++ b/css/theme/simple.css @@ -1,163 +1,125 @@ -/** +@import url(http://fonts.googleapis.com/css?family=News+Cycle:400,700); +@import url(http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); +/* * A simple theme for reveal.js presentations, similar - * to the default theme. The accent color is darkblue; - * do a find-replace to change it. + * to the default theme. The accent color is darkblue. * * This theme is Copyright (C) 2012 Owen Versteeg, https://github.com/StereotypicalApps. It is MIT licensed. - * reveal.js is Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se; so is the theme - beige.css - that this is based off of. + * reveal.js is Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se */ - -/********************************************* - * FONTS - *********************************************/ - -@import url(http://fonts.googleapis.com/css?family=News+Cycle:400,700); - -.reveal { - font-family: 'Lato', Times, 'Times New Roman', serif; - font-size: 36px; - font-weight: 200; - letter-spacing: -0.02em; -} - -.reveal h1, -.reveal h2, -.reveal h3, -.reveal h4, -.reveal h5, -.reveal h6 { - margin: 0 0 20px 0; - color: black; - font-family: 'News Cycle', Impact, sans-serif; - line-height: 0.9em; - - text-transform: uppercase; -} - - /********************************************* * GLOBAL STYLES *********************************************/ - body { - color: black !important; - - background: white; + background: white; } -::-moz-selection { - background:rgba(0, 0, 0, 0.99); - color: white; -} -::-webkit-selection { - background:rgba(0, 0, 0, 0.99); - color: white; +.reveal { + font-family: "Lato", Times, "Times New Roman", serif; + font-size: 36px; + font-weight: 200; + letter-spacing: -0.02em; + color: black; } + ::selection { - background:rgba(0, 0, 0, 0.99); - color: white; + color: white; + background: rgba(0, 0, 0, 0.99); + text-shadow: none; } /********************************************* * HEADERS *********************************************/ - -.reveal h1, -.reveal h2, -.reveal h3, -.reveal h4, -.reveal h5, +.reveal h1, +.reveal h2, +.reveal h3, +.reveal h4, +.reveal h5, .reveal h6 { - margin: 0 0 20px 0; - color: black; + margin: 0 0 20px 0; + color: black; + font-family: "News Cycle", Impact, sans-serif; + line-height: 0.9em; + letter-spacing: 0.02em; + text-transform: none; + text-shadow: none; } +.reveal h1 { + text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); +} /********************************************* * LINKS *********************************************/ - .reveal a:not(.image) { - color: darkblue; - text-decoration: none; + color: darkblue; + text-decoration: none; + -webkit-transition: color .15s ease; + -moz-transition: color .15s ease; + -ms-transition: color .15s ease; + -o-transition: color .15s ease; + transition: color .15s ease; +} - -webkit-transition: color .15s ease; - -moz-transition: color .15s ease; - -ms-transition: color .15s ease; - -o-transition: color .15s ease; - transition: color .15s ease; +.reveal a:not(.image):hover { + color: #0000f1; + text-shadow: none; + border: none; + border-radius: 2px; } - .reveal a:not(.image):hover { - text-shadow: none; - border: none; - border-radius: 2px; - } .reveal .roll span:after { - color: #fff; - background: darkblue; + color: #fff; + background: #00003f; } - /********************************************* * IMAGES *********************************************/ - .reveal section img { - margin: 30px 0 0 0; - background: rgba(255,255,255,0.12); - border: 4px solid #eee; - - -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); - -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); - box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); - - -webkit-transition: all .2s linear; - -moz-transition: all .2s linear; - -ms-transition: all .2s linear; - -o-transition: all .2s linear; - transition: all .2s linear; + margin: 15px; + background: rgba(255, 255, 255, 0.12); + border: 4px solid black; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); + -webkit-transition: all .2s linear; + -moz-transition: all .2s linear; + -ms-transition: all .2s linear; + -o-transition: all .2s linear; + transition: all .2s linear; } - .reveal a:hover img { - background: rgba(255,255,255,0.2); - border-color: darkblue; - - -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); - -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); - box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); - } - +.reveal a:hover img { + background: rgba(255, 255, 255, 0.2); + border-color: darkblue; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); +} /********************************************* * NAVIGATION CONTROLS *********************************************/ - .reveal .controls a { - color: black; + color: black; } - .reveal .controls a.enabled { - color: darkblue; - opacity: 1; - text-shadow: 0px 0px 2px hsla(185, 45%, 70%, 0.3); - } +.reveal .controls a.enabled { + color: #0000f1; + text-shadow: 0px 0px 2px rgba(144, 207, 213, 0.3); +} /********************************************* * PROGRESS BAR *********************************************/ - .reveal .progress { - background: rgba(0,0,0,0.2); + background: rgba(0, 0, 0, 0.2); } - .reveal .progress span { - background: darkblue; - - -webkit-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); - -moz-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); - -ms-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); - -o-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); - transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); - } - +.reveal .progress span { + background: darkblue; + -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); + -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); + -ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); + -o-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); + transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); +} diff --git a/css/theme/sky.css b/css/theme/sky.css index 71ebd2c..f3fb04f 100644 --- a/css/theme/sky.css +++ b/css/theme/sky.css @@ -1,174 +1,129 @@ -/** - * Sky theme for reveal.js presentations. +@import url(http://fonts.googleapis.com/css?family=Quicksand:400,700,400italic,700italic); +@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700); +/* + * Sky theme for reveal.js. * * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se */ - -/********************************************* - * FONTS - *********************************************/ - -@import url(http://fonts.googleapis.com/css?family=Quicksand:400,700,400italic,700italic); -@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700); - -.reveal { - font-family: 'Open Sans', sans-serif; - font-size: 36px; - font-weight: 200; - letter-spacing: -0.02em; -} - -.reveal h1, -.reveal h2, -.reveal h3, -.reveal h4, -.reveal h5, -.reveal h6 { - font-family: 'Quicksand', sans-serif; - line-height: 0.9em; - letter-spacing: -0.08em; - text-transform: uppercase; -} - - /********************************************* * GLOBAL STYLES *********************************************/ - body { - color: #333; - - background: #f7fbfc; - background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmN2ZiZmMiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYWRkOWU0IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); - background: -moz-radial-gradient(center, ellipse cover, #f7fbfc 0%, #add9e4 100%); - background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#f7fbfc), color-stop(100%,#add9e4)); - background: -webkit-radial-gradient(center, ellipse cover, #f7fbfc 0%,#add9e4 100%); - background: -o-radial-gradient(center, ellipse cover, #f7fbfc 0%,#add9e4 100%); - background: -ms-radial-gradient(center, ellipse cover, #f7fbfc 0%,#add9e4 100%); - background: radial-gradient(ellipse at center, #f7fbfc 0%,#add9e4 100%); + background: #f7fbfc; + background: -moz-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%); + background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #f7fbfc), color-stop(100%, #add9e4)); + background: -webkit-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%); + background: -o-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%); + background: -ms-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%); + background: radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%); } -::-moz-selection { - background: #134674; - color: white; -} -::-webkit-selection { - background: #134674; - color: white; +.reveal { + font-family: "Open Sans", sans-serif; + font-size: 36px; + font-weight: 200; + letter-spacing: -0.02em; + color: #333333; } + ::selection { - background: #134674; - color: white; + color: white; + background: #134674; + text-shadow: none; } - /********************************************* * HEADERS *********************************************/ - -.reveal h1, -.reveal h2, -.reveal h3, -.reveal h4, -.reveal h5, +.reveal h1, +.reveal h2, +.reveal h3, +.reveal h4, +.reveal h5, .reveal h6 { - margin: 0 0 20px 0; - color: #333; + margin: 0 0 20px 0; + color: #333333; + font-family: "Quicksand", sans-serif; + line-height: 0.9em; + letter-spacing: -0.08em; + text-transform: uppercase; + text-shadow: none; } +.reveal h1 { + text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); +} /********************************************* * LINKS *********************************************/ - .reveal a:not(.image) { - color: #3b759e; - text-decoration: none; + color: #3b759e; + text-decoration: none; + -webkit-transition: color .15s ease; + -moz-transition: color .15s ease; + -ms-transition: color .15s ease; + -o-transition: color .15s ease; + transition: color .15s ease; +} - -webkit-transition: color .15s ease; - -moz-transition: color .15s ease; - -ms-transition: color .15s ease; - -o-transition: color .15s ease; - transition: color .15s ease; +.reveal a:not(.image):hover { + color: #74a7cb; + text-shadow: none; + border: none; + border-radius: 2px; } - .reveal a:not(.image):hover { - text-shadow: none; - border: none; - border-radius: 2px; - } .reveal .roll span:after { - color: #fff; - background: #3b759e; + color: #fff; + background: #264c66; } - /********************************************* - * MISC + * IMAGES *********************************************/ - .reveal section img { - margin: 30px 0 0 0; - background: rgba(255,255,255,0.12); - border: 1px solid #ddd; - - -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); - -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); - box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); - - -webkit-transition: all .2s linear; - -moz-transition: all .2s linear; - -ms-transition: all .2s linear; - -o-transition: all .2s linear; - transition: all .2s linear; + margin: 15px; + background: rgba(255, 255, 255, 0.12); + border: 4px solid #333333; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); + -webkit-transition: all .2s linear; + -moz-transition: all .2s linear; + -ms-transition: all .2s linear; + -o-transition: all .2s linear; + transition: all .2s linear; } - .reveal a:hover img { - background: rgba(255,255,255,0.2); - border-color: #3b759e; - - -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); - -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); - box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); - } - -.reveal blockquote { - background: rgba(255, 255, 255, 0.4); +.reveal a:hover img { + background: rgba(255, 255, 255, 0.2); + border-color: #3b759e; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); } -.reveal p { - margin-bottom: 20px; -} - - /********************************************* * NAVIGATION CONTROLS *********************************************/ - .reveal .controls a { - color: #fff; + color: #333333; } - .reveal .controls a.enabled { - color: #3b759e; - text-shadow: 0px 0px 2px hsla(185, 45%, 70%, 0.3); - } +.reveal .controls a.enabled { + color: #74a7cb; + text-shadow: 0px 0px 2px rgba(144, 207, 213, 0.3); +} /********************************************* * PROGRESS BAR *********************************************/ - .reveal .progress { - background: rgba(0,0,0,0.2); + background: rgba(0, 0, 0, 0.2); } - .reveal .progress span { - background: #3b759e; - - -webkit-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); - -moz-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); - -ms-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); - -o-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); - transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); - } - +.reveal .progress span { + background: #3b759e; + -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); + -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); + -ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); + -o-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); + transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); +} diff --git a/css/theme/source/beige.scss b/css/theme/source/beige.scss new file mode 100644 index 0000000..177216f --- /dev/null +++ b/css/theme/source/beige.scss @@ -0,0 +1,50 @@ +/** + * Beige theme for reveal.js. + * + * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se + */ + + +// Default mixins and settings ----------------- +@import "../template/mixins"; +@import "../template/settings"; +// --------------------------------------------- + + + +// Include theme-specific fonts +@font-face { + font-family: 'League Gothic'; + src: url('../../lib/font/league_gothic-webfont.eot'); + src: url('../../lib/font/league_gothic-webfont.eot?#iefix') format('embedded-opentype'), + url('../../lib/font/league_gothic-webfont.woff') format('woff'), + url('../../lib/font/league_gothic-webfont.ttf') format('truetype'), + url('../../lib/font/league_gothic-webfont.svg#LeagueGothicRegular') format('svg'); + + font-weight: normal; + font-style: normal; +} + +@import url(http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); + + +// Override theme settings (see ../template/settings.scss) +$mainColor: #333; +$headingColor: #333; +$headingTextShadow: none; +$backgroundColor: #f7f3de; +$linkColor: #8b743d; +$linkColorHover: lighten( $linkColor, 20% ); +$selectionBackgroundColor: rgba(79, 64, 28, 0.99); +$heading1TextShadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 20px 20px rgba(0,0,0,.15); + +// Background generator +@mixin bodyBackground() { + @include radial-gradient( rgba(247,242,211,1), rgba(255,255,255,1) ); +} + + + +// Theme template ------------------------------ +@import "../template/theme"; +// --------------------------------------------- \ No newline at end of file diff --git a/css/theme/source/default.scss b/css/theme/source/default.scss new file mode 100644 index 0000000..da9b268 --- /dev/null +++ b/css/theme/source/default.scss @@ -0,0 +1,42 @@ +/** + * Default theme for reveal.js. + * + * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se + */ + + +// Default mixins and settings ----------------- +@import "../template/mixins"; +@import "../template/settings"; +// --------------------------------------------- + + + +// Include theme-specific fonts +@font-face { + font-family: 'League Gothic'; + src: url('../../lib/font/league_gothic-webfont.eot'); + src: url('../../lib/font/league_gothic-webfont.eot?#iefix') format('embedded-opentype'), + url('../../lib/font/league_gothic-webfont.woff') format('woff'), + url('../../lib/font/league_gothic-webfont.ttf') format('truetype'), + url('../../lib/font/league_gothic-webfont.svg#LeagueGothicRegular') format('svg'); + + font-weight: normal; + font-style: normal; +} + +@import url(http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); + +// Override theme settings (see ../template/settings.scss) +$heading1TextShadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 20px 20px rgba(0,0,0,.15); + +// Background generator +@mixin bodyBackground() { + @include radial-gradient( rgba(28,30,32,1), rgba(85,90,95,1) ); +} + + + +// Theme template ------------------------------ +@import "../template/theme"; +// --------------------------------------------- \ No newline at end of file diff --git a/css/theme/source/serif.scss b/css/theme/source/serif.scss new file mode 100644 index 0000000..dc0935f --- /dev/null +++ b/css/theme/source/serif.scss @@ -0,0 +1,33 @@ +/** + * A simple theme for reveal.js presentations, similar + * to the default theme. The accent color is darkblue. + * + * This theme is Copyright (C) 2012 Owen Versteeg, https://github.com/StereotypicalApps. It is MIT licensed. + * reveal.js is Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se; so is the theme - beige.css - that this is based off of. + */ + + +// Default mixins and settings ----------------- +@import "../template/mixins"; +@import "../template/settings"; +// --------------------------------------------- + + + +// Override theme settings (see ../template/settings.scss) +$mainFont: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif; +$mainColor: #000; +$headingFont: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif; +$headingColor: #383D3D; +$headingTextShadow: none; +$headingTextTransform: none; +$backgroundColor: #F0F1EB; +$linkColor: #51483D; +$linkColorHover: lighten( $linkColor, 20% ); +$selectionBackgroundColor: #26351C; + + + +// Theme template ------------------------------ +@import "../template/theme"; +// --------------------------------------------- \ No newline at end of file diff --git a/css/theme/source/simple.scss b/css/theme/source/simple.scss new file mode 100644 index 0000000..713ab44 --- /dev/null +++ b/css/theme/source/simple.scss @@ -0,0 +1,38 @@ +/** + * A simple theme for reveal.js presentations, similar + * to the default theme. The accent color is darkblue. + * + * This theme is Copyright (C) 2012 Owen Versteeg, https://github.com/StereotypicalApps. It is MIT licensed. + * reveal.js is Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se + */ + + +// Default mixins and settings ----------------- +@import "../template/mixins"; +@import "../template/settings"; +// --------------------------------------------- + + + +// Include theme-specific fonts +@import url(http://fonts.googleapis.com/css?family=News+Cycle:400,700); +@import url(http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); + + +// Override theme settings (see ../template/settings.scss) +$mainFont: 'Lato', Times, 'Times New Roman', serif; +$mainColor: #000; +$headingFont: 'News Cycle', Impact, sans-serif; +$headingColor: #000; +$headingTextShadow: none; +$headingTextTransform: none; +$backgroundColor: #fff; +$linkColor: #00008B; +$linkColorHover: lighten( $linkColor, 20% ); +$selectionBackgroundColor: rgba(0, 0, 0, 0.99); + + + +// Theme template ------------------------------ +@import "../template/theme"; +// --------------------------------------------- \ No newline at end of file diff --git a/css/theme/source/sky.scss b/css/theme/source/sky.scss new file mode 100644 index 0000000..77fd230 --- /dev/null +++ b/css/theme/source/sky.scss @@ -0,0 +1,41 @@ +/** + * Sky theme for reveal.js. + * + * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se + */ + + +// Default mixins and settings ----------------- +@import "../template/mixins"; +@import "../template/settings"; +// --------------------------------------------- + + + +// Include theme-specific fonts +@import url(http://fonts.googleapis.com/css?family=Quicksand:400,700,400italic,700italic); +@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700); + + +// Override theme settings (see ../template/settings.scss) +$mainFont: 'Open Sans', sans-serif; +$mainColor: #333; +$headingFont: 'Quicksand', sans-serif; +$headingColor: #333; +$headingLetterSpacing: -0.08em; +$headingTextShadow: none; +$backgroundColor: #f7fbfc; +$linkColor: #3b759e; +$linkColorHover: lighten( $linkColor, 20% ); +$selectionBackgroundColor: #134674; + +// Background generator +@mixin bodyBackground() { + @include radial-gradient( #add9e4, #f7fbfc ); +} + + + +// Theme template ------------------------------ +@import "../template/theme"; +// --------------------------------------------- \ No newline at end of file diff --git a/css/theme/template/mixins.scss b/css/theme/template/mixins.scss new file mode 100644 index 0000000..bc82419 --- /dev/null +++ b/css/theme/template/mixins.scss @@ -0,0 +1,29 @@ +@mixin vertical-gradient( $top, $bottom ) { + background: $top; + background: -moz-linear-gradient( top, $top 0%, $bottom 100% ); + background: -webkit-gradient( linear, left top, left bottom, color-stop(0%,$top), color-stop(100%,$bottom) ); + background: -webkit-linear-gradient( top, $top 0%, $bottom 100% ); + background: -o-linear-gradient( top, $top 0%, $bottom 100% ); + background: -ms-linear-gradient( top, $top 0%, $bottom 100% ); + background: linear-gradient( top, $top 0%, $bottom 100% ); +} + +@mixin horizontal-gradient( $top, $bottom ) { + background: $top; + background: -moz-linear-gradient( left, $top 0%, $bottom 100% ); + background: -webkit-gradient( linear, left top, right top, color-stop(0%,$top), color-stop(100%,$bottom) ); + background: -webkit-linear-gradient( left, $top 0%, $bottom 100% ); + background: -o-linear-gradient( left, $top 0%, $bottom 100% ); + background: -ms-linear-gradient( left, $top 0%, $bottom 100% ); + background: linear-gradient( left, $top 0%, $bottom 100% ); +} + +@mixin radial-gradient( $outer, $inner, $type: circle ) { + background: $inner; + background: -moz-radial-gradient( center, $type cover, $inner 0%, $outer 100% ); + background: -webkit-gradient( radial, center center, 0px, center center, 100%, color-stop(0%,$inner), color-stop(100%,$outer) ); + background: -webkit-radial-gradient( center, $type cover, $inner 0%, $outer 100% ); + background: -o-radial-gradient( center, $type cover, $inner 0%, $outer 100% ); + background: -ms-radial-gradient( center, $type cover, $inner 0%, $outer 100% ); + background: radial-gradient( center, $type cover, $inner 0%, $outer 100% ); +} \ No newline at end of file diff --git a/css/theme/template/settings.scss b/css/theme/template/settings.scss new file mode 100644 index 0000000..bc9f138 --- /dev/null +++ b/css/theme/template/settings.scss @@ -0,0 +1,33 @@ +// Base settings for all themes that can optionally be +// overridden by the super-theme + +// Background of the presentation +$backgroundColor: #2b2b2b; + +// Primary/body text +$mainFont: 'Lato', Times, 'Times New Roman', serif; +$mainFontSize: 36px; +$mainColor: #eee; + +// Headings +$headingFont: 'League Gothic', Impact, sans-serif; +$headingColor: #eee; +$headingLineHeight: 0.9em; +$headingLetterSpacing: 0.02em; +$headingTextTransform: uppercase; +$headingTextShadow: 0px 0px 6px rgba(0,0,0,0.2); +$heading1TextShadow: $headingTextShadow; + +// Links and actions +$linkColor: #13DAEC; +$linkColorHover: lighten( $linkColor, 20% ); + +// Text selection +$selectionBackgroundColor: #FF5E99; +$selectionColor: #fff; + +// Generates the presentation background, can be overridden +// to return a background image or gradient +@mixin bodyBackground() { + background: $backgroundColor; +} \ No newline at end of file diff --git a/css/theme/template/theme.scss b/css/theme/template/theme.scss new file mode 100644 index 0000000..353a98c --- /dev/null +++ b/css/theme/template/theme.scss @@ -0,0 +1,135 @@ +// Base theme template for reveal.js + +/********************************************* + * GLOBAL STYLES + *********************************************/ + +body { + @include bodyBackground(); +} + +.reveal { + font-family: $mainFont; + font-size: $mainFontSize; + font-weight: 200; + letter-spacing: -0.02em; + color: $mainColor; +} + +::selection { + color: $selectionColor; + background: $selectionBackgroundColor; + text-shadow: none; +} + +/********************************************* + * HEADERS + *********************************************/ + +.reveal h1, +.reveal h2, +.reveal h3, +.reveal h4, +.reveal h5, +.reveal h6 { + margin: 0 0 20px 0; + color: $headingColor; + + font-family: $headingFont; + line-height: $headingLineHeight; + letter-spacing: $headingLetterSpacing; + + text-transform: $headingTextTransform; + text-shadow: $headingTextShadow; +} + +.reveal h1 { + text-shadow: $heading1TextShadow; +} + + +/********************************************* + * LINKS + *********************************************/ + +.reveal a:not(.image) { + color: $linkColor; + text-decoration: none; + + -webkit-transition: color .15s ease; + -moz-transition: color .15s ease; + -ms-transition: color .15s ease; + -o-transition: color .15s ease; + transition: color .15s ease; +} + .reveal a:not(.image):hover { + color: $linkColorHover; + + text-shadow: none; + border: none; + border-radius: 2px; + } + +.reveal .roll span:after { + color: #fff; + background: darken( $linkColor, 15% ); +} + + +/********************************************* + * IMAGES + *********************************************/ + +.reveal section img { + margin: 15px; + background: rgba(255,255,255,0.12); + border: 4px solid $mainColor; + + box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); + + -webkit-transition: all .2s linear; + -moz-transition: all .2s linear; + -ms-transition: all .2s linear; + -o-transition: all .2s linear; + transition: all .2s linear; +} + + .reveal a:hover img { + background: rgba(255,255,255,0.2); + border-color: $linkColor; + + box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); + } + + +/********************************************* + * NAVIGATION CONTROLS + *********************************************/ + +.reveal .controls a { + color: $mainColor; +} + .reveal .controls a.enabled { + color: $linkColorHover; + text-shadow: 0px 0px 2px hsla(185, 45%, 70%, 0.3); + } + + +/********************************************* + * PROGRESS BAR + *********************************************/ + +.reveal .progress { + background: rgba(0,0,0,0.2); +} + .reveal .progress span { + background: $linkColor; + + -webkit-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + -moz-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + -ms-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + -o-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + } + + diff --git a/index.html b/index.html index 3ea2412..2becf4f 100644 --- a/index.html +++ b/index.html @@ -12,8 +12,6 @@ - - @@ -328,7 +326,7 @@ function linkify( selector ) { diff --git a/js/reveal.js b/js/reveal.js index c2769e5..b08580b 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -664,6 +664,8 @@ var Reveal = (function(){ updateControls(); + // Update the URL hash after a delay since updating it mid-transition + // is likely to cause visual lag clearTimeout( writeURLTimeout ); writeURLTimeout = setTimeout( writeURL, 1500 ); -- cgit v1.2.3 From 3241cb78d8f3d9fba19e8438df50bd29d0d0bc02 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Sat, 20 Oct 2012 12:51:12 -0400 Subject: progress bar can now be clicked to navigate (closes #181) --- css/reveal.css | 18 ++++++-- js/reveal.js | 29 ++++++++++-- js/reveal.min.js | 136 ++++++++++++++++++++++++++++--------------------------- 3 files changed, 107 insertions(+), 76 deletions(-) (limited to 'css/reveal.css') diff --git a/css/reveal.css b/css/reveal.css index 9831255..cd6e8e5 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -253,12 +253,12 @@ body { .reveal .controls { display: none; position: fixed; - width: 100px; - height: 100px; + width: 90px; + height: 90px; z-index: 30; - right: 0; - bottom: 0; + right: 10px; + bottom: 10px; } .reveal .controls a { @@ -304,8 +304,16 @@ body { 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%; diff --git a/js/reveal.js b/js/reveal.js index b08580b..14e4fd7 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -1,5 +1,5 @@ /*! - * reveal.js 2.1 r34 + * reveal.js 2.1 r35 * http://lab.hakim.se/reveal-js * MIT licensed * @@ -332,6 +332,10 @@ var Reveal = (function(){ document.addEventListener( 'keydown', onDocumentKeyDown, false ); } + if ( config.progress && dom.progress ) { + dom.progress.addEventListener( 'click', preventAndForward( onProgressClick ), false ); + } + if ( config.controls && dom.controls ) { dom.controlsLeft.addEventListener( 'click', preventAndForward( navigateLeft ), false ); dom.controlsRight.addEventListener( 'click', preventAndForward( navigateRight ), false ); @@ -349,6 +353,10 @@ var Reveal = (function(){ document.removeEventListener( 'touchmove', onDocumentTouchMove, false ); document.removeEventListener( 'touchend', onDocumentTouchEnd, false ); window.removeEventListener( 'hashchange', onWindowHashChange, false ); + + if ( config.progress && dom.progress ) { + dom.progress.removeEventListener( 'click', preventAndForward( onProgressClick ), false ); + } if ( config.controls && dom.controls ) { dom.controlsLeft.removeEventListener( 'click', preventAndForward( navigateLeft ), false ); @@ -392,7 +400,7 @@ var Reveal = (function(){ function preventAndForward( delegate ) { return function( event ) { event.preventDefault(); - delegate.call(); + delegate.call( null, event ); }; } @@ -1234,8 +1242,8 @@ var Reveal = (function(){ } /** - * Handles mouse wheel scrolling, throttled to avoid - * skipping multiple slides. + * Handles mouse wheel scrolling, throttled to avoid skipping + * multiple slides. */ function onDocumentMouseScroll( event ){ clearTimeout( mouseWheelTimeout ); @@ -1250,6 +1258,19 @@ var Reveal = (function(){ } }, 100 ); } + + /** + * Clicking on the progress bar results in a navigation to the + * closest approximate horizontal slide using this equation: + * + * ( clickX / presentationWidth ) * numberOfSlides + */ + function onProgressClick( event ) { + var slidesTotal = Array.prototype.slice.call( document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) ).length; + var slideIndex = Math.floor( ( event.clientX / dom.wrapper.offsetWidth ) * slidesTotal ); + + slide( slideIndex ); + } /** * Handler for the window level 'hashchange' event. diff --git a/js/reveal.min.js b/js/reveal.min.js index 73053d3..b7ffeab 100644 --- a/js/reveal.min.js +++ b/js/reveal.min.js @@ -1,81 +1,83 @@ /*! - * reveal.js 2.1 r34 + * reveal.js 2.1 r35 * http://lab.hakim.se/reveal-js * MIT licensed * * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se */ -var Reveal=(function(){var l=".reveal .slides>section",b=".reveal .slides>section.present>section",R={controls:true,progress:true,history:false,keyboard:true,overview:true,loop:false,autoSlide:0,mouseWheel:true,rollingLinks:true,theme:null,transition:"default",dependencies:[]},Y=R.autoSlide,m=0,e=0,y,G,aj=[],f={},T="WebkitPerspective" in document.body.style||"MozPerspective" in document.body.style||"msPerspective" in document.body.style||"OPerspective" in document.body.style||"perspective" in document.body.style,n="WebkitTransform" in document.body.style||"MozTransform" in document.body.style||"msTransform" in document.body.style||"OTransform" in document.body.style||"transform" in document.body.style,z=0,k=0,D=0,ac={startX:0,startY:0,startSpan:0,startCount:0,handled:false,threshold:80}; -function i(ak){if((!n&&!T)){document.body.setAttribute("class","no-transforms");return;}t(R,ak);d();V();}function P(){f.theme=document.querySelector("#theme"); -f.wrapper=document.querySelector(".reveal");if(!f.wrapper.querySelector(".progress")&&R.progress){var an=document.createElement("div");an.classList.add("progress"); -an.innerHTML="";f.wrapper.appendChild(an);}if(!f.wrapper.querySelector(".controls")&&R.controls){var am=document.createElement("aside");am.classList.add("controls"); -am.innerHTML='◄►▲▼'; -f.wrapper.appendChild(am);}if(!f.wrapper.querySelector(".state-background")){var al=document.createElement("div");al.classList.add("state-background"); -f.wrapper.appendChild(al);}if(!f.wrapper.querySelector(".pause-overlay")){var ak=document.createElement("div");ak.classList.add("pause-overlay");f.wrapper.appendChild(ak); +var Reveal=(function(){var l=".reveal .slides>section",b=".reveal .slides>section.present>section",R={controls:true,progress:true,history:false,keyboard:true,overview:true,loop:false,autoSlide:0,mouseWheel:true,rollingLinks:true,theme:null,transition:"default",dependencies:[]},Y=R.autoSlide,m=0,e=0,y,G,ak=[],f={},T="WebkitPerspective" in document.body.style||"MozPerspective" in document.body.style||"msPerspective" in document.body.style||"OPerspective" in document.body.style||"perspective" in document.body.style,n="WebkitTransform" in document.body.style||"MozTransform" in document.body.style||"msTransform" in document.body.style||"OTransform" in document.body.style||"transform" in document.body.style,z=0,k=0,D=0,ac={startX:0,startY:0,startSpan:0,startCount:0,handled:false,threshold:80}; +function i(al){if((!n&&!T)){document.body.setAttribute("class","no-transforms");return;}t(R,al);d();V();}function P(){f.theme=document.querySelector("#theme"); +f.wrapper=document.querySelector(".reveal");if(!f.wrapper.querySelector(".progress")&&R.progress){var ao=document.createElement("div");ao.classList.add("progress"); +ao.innerHTML="";f.wrapper.appendChild(ao);}if(!f.wrapper.querySelector(".controls")&&R.controls){var an=document.createElement("aside");an.classList.add("controls"); +an.innerHTML='◄►▲▼'; +f.wrapper.appendChild(an);}if(!f.wrapper.querySelector(".state-background")){var am=document.createElement("div");am.classList.add("state-background"); +f.wrapper.appendChild(am);}if(!f.wrapper.querySelector(".pause-overlay")){var al=document.createElement("div");al.classList.add("pause-overlay");f.wrapper.appendChild(al); }f.progress=document.querySelector(".reveal .progress");f.progressbar=document.querySelector(".reveal .progress span");if(R.controls){f.controls=document.querySelector(".reveal .controls"); f.controlsLeft=document.querySelector(".reveal .controls .left");f.controlsRight=document.querySelector(".reveal .controls .right");f.controlsUp=document.querySelector(".reveal .controls .up"); f.controlsDown=document.querySelector(".reveal .controls .down");}}function d(){if(navigator.userAgent.match(/(iphone|ipod|android)/i)){document.documentElement.style.overflow="scroll"; -document.body.style.height="120%";window.addEventListener("load",ad,false);window.addEventListener("orientationchange",ad,false);}}function V(){var al=[],ap=[]; -for(var am=0,ak=R.dependencies.length;am'+an.innerHTML+"";}}}}function I(){if(R.overview){f.wrapper.classList.add("overview");var ak=document.querySelectorAll(l); -for(var ap=0,an=ak.length;ap'+ao.innerHTML+"";}}}}function I(){if(R.overview){f.wrapper.classList.add("overview");var al=document.querySelectorAll(l); +for(var aq=0,ao=al.length;aq3?"none":"block"; -}al[ap].classList.remove("past");al[ap].classList.remove("present");al[ap].classList.remove("future");if(apat){al[ap].classList.add("future"); -}}if(aq.querySelector("section")){al[ap].classList.add("stack");}}al[at].classList.add("present");var am=al[at].getAttribute("data-state");if(am){aj=aj.concat(am.split(" ")); -}var ao=al[at].getAttribute("data-autoslide");if(ao){Y=parseInt(ao);}else{Y=R.autoSlide;}}else{at=0;}return at;}function s(){if(R.controls&&f.controls){var ak=g(); -[f.controlsLeft,f.controlsRight,f.controlsUp,f.controlsDown].forEach(function(al){al.classList.remove("enabled");});if(ak.left){f.controlsLeft.classList.add("enabled"); -}if(ak.right){f.controlsRight.classList.add("enabled");}if(ak.up){f.controlsUp.classList.add("enabled");}if(ak.down){f.controlsDown.classList.add("enabled"); -}}}function g(){var ak=document.querySelectorAll(l),al=document.querySelectorAll(b);return{left:m>0,right:m0,down:e0||e>0){ak+=m; -}if(e>0){ak+="/"+e;}window.location.hash=ak;}}function M(ak){var ao=m,am=e;if(ak){var ap=!!ak.parentNode.nodeName.match(/section/gi);var an=ap?ak.parentNode:ak; -var al=Array.prototype.slice.call(document.querySelectorAll(l));ao=Math.max(al.indexOf(an),0);if(ap){am=Math.max(Array.prototype.slice.call(ak.parentNode.children).indexOf(ak),0); -}}return{h:ao,v:am};}function v(){if(document.querySelector(b+".present")){var al=document.querySelectorAll(b+".present .fragment:not(.visible)");if(al.length){al[0].classList.add("visible"); -r("fragmentshown",{fragment:al[0]});return true;}}else{var ak=document.querySelectorAll(l+".present .fragment:not(.visible)");if(ak.length){ak[0].classList.add("visible"); -r("fragmentshown",{fragment:ak[0]});return true;}}return false;}function Q(){if(document.querySelector(b+".present")){var al=document.querySelectorAll(b+".present .fragment.visible"); -if(al.length){al[al.length-1].classList.remove("visible");r("fragmenthidden",{fragment:al[al.length-1]});return true;}}else{var ak=document.querySelectorAll(l+".present .fragment.visible"); -if(ak.length){ak[ak.length-1].classList.remove("visible");r("fragmenthidden",{fragment:ak[ak.length-1]});return true;}}return false;}function O(){clearTimeout(k); +}function a(ar,aw){y=G;var ao=ak.concat();ak.length=0;var av=m,am=e;m=aj(l,ar===undefined?m:ar);e=aj(b,aw===undefined?e:aw);stateLoop:for(var ap=0,at=ak.length; +ap3?"none":"block"; +}am[aq].classList.remove("past");am[aq].classList.remove("present");am[aq].classList.remove("future");if(aqau){am[aq].classList.add("future"); +}}if(ar.querySelector("section")){am[aq].classList.add("stack");}}am[au].classList.add("present");var an=am[au].getAttribute("data-state");if(an){ak=ak.concat(an.split(" ")); +}var ap=am[au].getAttribute("data-autoslide");if(ap){Y=parseInt(ap);}else{Y=R.autoSlide;}}else{au=0;}return au;}function s(){if(R.controls&&f.controls){var al=g(); +[f.controlsLeft,f.controlsRight,f.controlsUp,f.controlsDown].forEach(function(am){am.classList.remove("enabled");});if(al.left){f.controlsLeft.classList.add("enabled"); +}if(al.right){f.controlsRight.classList.add("enabled");}if(al.up){f.controlsUp.classList.add("enabled");}if(al.down){f.controlsDown.classList.add("enabled"); +}}}function g(){var al=document.querySelectorAll(l),am=document.querySelectorAll(b);return{left:m>0,right:m0,down:e0||e>0){al+=m; +}if(e>0){al+="/"+e;}window.location.hash=al;}}function M(al){var ap=m,an=e;if(al){var aq=!!al.parentNode.nodeName.match(/section/gi);var ao=aq?al.parentNode:al; +var am=Array.prototype.slice.call(document.querySelectorAll(l));ap=Math.max(am.indexOf(ao),0);if(aq){an=Math.max(Array.prototype.slice.call(al.parentNode.children).indexOf(al),0); +}}return{h:ap,v:an};}function v(){if(document.querySelector(b+".present")){var am=document.querySelectorAll(b+".present .fragment:not(.visible)");if(am.length){am[0].classList.add("visible"); +r("fragmentshown",{fragment:am[0]});return true;}}else{var al=document.querySelectorAll(l+".present .fragment:not(.visible)");if(al.length){al[0].classList.add("visible"); +r("fragmentshown",{fragment:al[0]});return true;}}return false;}function Q(){if(document.querySelector(b+".present")){var am=document.querySelectorAll(b+".present .fragment.visible"); +if(am.length){am[am.length-1].classList.remove("visible");r("fragmenthidden",{fragment:am[am.length-1]});return true;}}else{var al=document.querySelectorAll(l+".present .fragment.visible"); +if(al.length){al[al.length-1].classList.remove("visible");r("fragmenthidden",{fragment:al[al.length-1]});return true;}}return false;}function O(){clearTimeout(k); if(Y){k=setTimeout(x,Y);}}function B(){if(L()||Q()===false){a(m-1,0);}}function j(){if(L()||v()===false){a(m+1,0);}}function u(){if(L()||Q()===false){a(m,e-1); -}}function F(){if(L()||v()===false){a(m,e+1);}}function Z(){if(Q()===false){if(g().up){u();}else{var ak=document.querySelector(".reveal .slides>section.past:nth-child("+m+")"); -if(ak){e=(ak.querySelectorAll("section").length+1)||0;m--;a();}}}}function x(){if(v()===false){g().down?F():j();}O();}function ah(al){if(document.querySelector(":focus")!==null||al.shiftKey||al.altKey||al.ctrlKey||al.metaKey){return; -}var ak=true;switch(al.keyCode){case 80:case 33:Z();break;case 78:case 34:x();break;case 72:case 37:B();break;case 76:case 39:j();break;case 75:case 38:u(); -break;case 74:case 40:F();break;case 36:a(0);break;case 35:a(Number.MAX_VALUE);break;case 32:L()?ae():x();break;case 13:L()?ae():ak=false;break;case 66:case 190:aa(); -break;case 70:ab();break;default:ak=false;}if(ak){al.preventDefault();}else{if(al.keyCode===27&&T){X();al.preventDefault();}}O();}function A(ak){ac.startX=ak.touches[0].clientX; -ac.startY=ak.touches[0].clientY;ac.startCount=ak.touches.length;if(ak.touches.length===2&&R.overview){ac.startSpan=S({x:ak.touches[1].clientX,y:ak.touches[1].clientY},{x:ac.startX,y:ac.startY}); -}}function af(ap){if(!ac.handled){var an=ap.touches[0].clientX;var am=ap.touches[0].clientY;if(ap.touches.length===2&&ac.startCount===2&&R.overview){var ao=S({x:ap.touches[1].clientX,y:ap.touches[1].clientY},{x:ac.startX,y:ac.startY}); -if(Math.abs(ac.startSpan-ao)>ac.threshold){ac.handled=true;if(aoac.threshold&&Math.abs(al)>Math.abs(ak)){ac.handled=true;B();}else{if(al<-ac.threshold&&Math.abs(al)>Math.abs(ak)){ac.handled=true;j();}else{if(ak>ac.threshold){ac.handled=true; -u();}else{if(ak<-ac.threshold){ac.handled=true;F();}}}}ap.preventDefault();}}}else{if(navigator.userAgent.match(/android/gi)){ap.preventDefault();}}}function W(ak){ac.handled=false; -}function o(ak){clearTimeout(z);z=setTimeout(function(){var al=ak.detail||-ak.wheelDelta;if(al>0){x();}else{Z();}},100);}function w(ak){J();}function C(ak){if(L()){ak.preventDefault(); -ae();m=this.getAttribute("data-index-h");e=this.getAttribute("data-index-v");a();}}return{initialize:i,slide:a,left:B,right:j,up:u,down:F,prev:Z,next:x,navigateTo:a,navigateLeft:B,navigateRight:j,navigateUp:u,navigateDown:F,navigatePrev:Z,navigateNext:x,toggleOverview:X,addEventListeners:E,removeEventListeners:U,getIndices:M,getPreviousSlide:function(){return y; -},getCurrentSlide:function(){return G;},getQueryHash:function(){var ak={};location.search.replace(/[A-Z0-9]+?=(\w*)/gi,function(al){ak[al.split("=").shift()]=al.split("=").pop(); -});return ak;},addEventListener:function(al,am,ak){if("addEventListener" in window){(f.wrapper||document.querySelector(".reveal")).addEventListener(al,am,ak); -}},removeEventListener:function(al,am,ak){if("addEventListener" in window){(f.wrapper||document.querySelector(".reveal")).removeEventListener(al,am,ak); +}}function F(){if(L()||v()===false){a(m,e+1);}}function Z(){if(Q()===false){if(g().up){u();}else{var al=document.querySelector(".reveal .slides>section.past:nth-child("+m+")"); +if(al){e=(al.querySelectorAll("section").length+1)||0;m--;a();}}}}function x(){if(v()===false){g().down?F():j();}O();}function ah(am){if(document.querySelector(":focus")!==null||am.shiftKey||am.altKey||am.ctrlKey||am.metaKey){return; +}var al=true;switch(am.keyCode){case 80:case 33:Z();break;case 78:case 34:x();break;case 72:case 37:B();break;case 76:case 39:j();break;case 75:case 38:u(); +break;case 74:case 40:F();break;case 36:a(0);break;case 35:a(Number.MAX_VALUE);break;case 32:L()?ae():x();break;case 13:L()?ae():al=false;break;case 66:case 190:aa(); +break;case 70:ab();break;default:al=false;}if(al){am.preventDefault();}else{if(am.keyCode===27&&T){X();am.preventDefault();}}O();}function A(al){ac.startX=al.touches[0].clientX; +ac.startY=al.touches[0].clientY;ac.startCount=al.touches.length;if(al.touches.length===2&&R.overview){ac.startSpan=S({x:al.touches[1].clientX,y:al.touches[1].clientY},{x:ac.startX,y:ac.startY}); +}}function af(aq){if(!ac.handled){var ao=aq.touches[0].clientX;var an=aq.touches[0].clientY;if(aq.touches.length===2&&ac.startCount===2&&R.overview){var ap=S({x:aq.touches[1].clientX,y:aq.touches[1].clientY},{x:ac.startX,y:ac.startY}); +if(Math.abs(ac.startSpan-ap)>ac.threshold){ac.handled=true;if(apac.threshold&&Math.abs(am)>Math.abs(al)){ac.handled=true;B();}else{if(am<-ac.threshold&&Math.abs(am)>Math.abs(al)){ac.handled=true;j();}else{if(al>ac.threshold){ac.handled=true; +u();}else{if(al<-ac.threshold){ac.handled=true;F();}}}}aq.preventDefault();}}}else{if(navigator.userAgent.match(/android/gi)){aq.preventDefault();}}}function W(al){ac.handled=false; +}function o(al){clearTimeout(z);z=setTimeout(function(){var am=al.detail||-al.wheelDelta;if(am>0){x();}else{Z();}},100);}function ai(am){var al=Array.prototype.slice.call(document.querySelectorAll(l)).length; +var an=Math.floor((am.clientX/f.wrapper.offsetWidth)*al);a(an);}function w(al){J();}function C(al){if(L()){al.preventDefault();ae();m=this.getAttribute("data-index-h"); +e=this.getAttribute("data-index-v");a();}}return{initialize:i,slide:a,left:B,right:j,up:u,down:F,prev:Z,next:x,navigateTo:a,navigateLeft:B,navigateRight:j,navigateUp:u,navigateDown:F,navigatePrev:Z,navigateNext:x,toggleOverview:X,addEventListeners:E,removeEventListeners:U,getIndices:M,getPreviousSlide:function(){return y; +},getCurrentSlide:function(){return G;},getQueryHash:function(){var al={};location.search.replace(/[A-Z0-9]+?=(\w*)/gi,function(am){al[am.split("=").shift()]=am.split("=").pop(); +});return al;},addEventListener:function(am,an,al){if("addEventListener" in window){(f.wrapper||document.querySelector(".reveal")).addEventListener(am,an,al); +}},removeEventListener:function(am,an,al){if("addEventListener" in window){(f.wrapper||document.querySelector(".reveal")).removeEventListener(am,an,al); }}};})(); \ No newline at end of file -- cgit v1.2.3 From da40cf2172792ee56c787dc3e1ca5b65005156e3 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Sat, 20 Oct 2012 13:33:07 -0400 Subject: add support for fragment styles (#192) --- css/reveal.css | 63 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 29 +++++++++++++++++++-------- 2 files changed, 84 insertions(+), 8 deletions(-) (limited to 'css/reveal.css') diff --git a/css/reveal.css b/css/reveal.css index cd6e8e5..4d0bfa2 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -96,6 +96,69 @@ 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 diff --git a/index.html b/index.html index 2becf4f..6a3510e 100644 --- a/index.html +++ b/index.html @@ -252,14 +252,27 @@ function linkify( selector ) {
-

Fragmented Views

-

Hit the next arrow...

-

... to step through ...

-
    -
  1. any type
    2. -
  2. of view
    3. -
  3. fragments
    4. -
+
+

Fragmented Views

+

Hit the next arrow...

+

... to step through ...

+
    +
  1. any type
    2. +
  2. of view
    3. +
  3. fragments
    4. +
+
+
+

Fragment Styles

+

There's a few styles of fragments, like:

+

grow

+

shrink

+

roll-in

+

fade-out

+

highlight-red

+

highlight-green

+

highlight-blue

+
-- cgit v1.2.3 From d84aeeb9ae6eefea28c65a523140bc29f21902ee Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Sat, 20 Oct 2012 13:46:19 -0400 Subject: fix overview when zoom transition is active (#196) --- css/reveal.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'css/reveal.css') diff --git a/css/reveal.css b/css/reveal.css index 4d0bfa2..c355cc4 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -1013,7 +1013,8 @@ body { padding: 20px 0; max-height: 600px; overflow: hidden; - opacity: 1; + opacity: 1!important; + visibility: visible!important; cursor: pointer; background: rgba(0,0,0,0.1); } -- cgit v1.2.3 From 8576264574e0fc9f83b35a05840c0e0932951631 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Sat, 20 Oct 2012 21:14:50 -0400 Subject: remove traling whitespace (#197) --- css/reveal.css | 78 +++++++++++++++++++++++++++++----------------------------- index.html | 54 ++++++++++++++++++++-------------------- 2 files changed, 66 insertions(+), 66 deletions(-) (limited to 'css/reveal.css') diff --git a/css/reveal.css b/css/reveal.css index c355cc4..09a874e 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -4,7 +4,7 @@ * reveal.js * http://lab.hakim.se/reveal-js * MIT licensed - * + * * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se */ @@ -22,8 +22,8 @@ html, body, .reveal div, .reveal span, .reveal applet, .reveal object, .reveal i .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 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; @@ -34,7 +34,7 @@ html, body, .reveal div, .reveal span, .reveal applet, .reveal object, .reveal i vertical-align: baseline; } -.reveal article, .reveal aside, .reveal details, .reveal figcaption, .reveal figure, +.reveal article, .reveal aside, .reveal details, .reveal figcaption, .reveal figure, .reveal footer, .reveal header, .reveal hgroup, .reveal menu, .reveal nav, .reveal section { display: block; } @@ -44,7 +44,7 @@ html, body, .reveal div, .reveal span, .reveal applet, .reveal object, .reveal i * GLOBAL STYLES *********************************************/ -html, +html, body { width: 100%; height: 100%; @@ -57,10 +57,10 @@ body { line-height: 1; } -::selection { - background:#FF5E99; - color:#fff; - text-shadow: none; +::selection { + background:#FF5E99; + color:#fff; + text-shadow: none; } @media screen and (max-width: 900px) { @@ -173,19 +173,19 @@ body { /* preserve aspect ratio and scale image so it's bound within the section */ max-width: 100%; max-height: 100%; -} +} -.reveal strong, +.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; @@ -233,7 +233,7 @@ 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); @@ -245,7 +245,7 @@ body { content: '”'; } -.reveal q { +.reveal q { font-style: italic; } .reveal q:before { @@ -280,7 +280,7 @@ body { max-height: 400px; } -.reveal table th, +.reveal table th, .reveal table td { text-align: left; padding-right: .3em; @@ -290,10 +290,10 @@ body { text-shadow: rgb(255,255,255) 1px 1px 2px; } -.reveal sup { +.reveal sup { vertical-align: super; } -.reveal sub { +.reveal sub { vertical-align: sub; } @@ -323,7 +323,7 @@ body { right: 10px; bottom: 10px; } - + .reveal .controls a { font-family: Arial; font-size: 0.83em; @@ -485,7 +485,7 @@ body { padding: 20px 0px; overflow: visible; z-index: 1; - + text-align: center; -webkit-transition: -webkit-perspective .4s ease; @@ -493,7 +493,7 @@ 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; @@ -513,12 +513,12 @@ body { 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); @@ -544,7 +544,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); @@ -553,7 +553,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); @@ -563,7 +563,7 @@ 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); @@ -572,7 +572,7 @@ body { .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); @@ -719,7 +719,7 @@ body { -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; @@ -937,7 +937,7 @@ body { -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), + -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 ); } @@ -945,8 +945,8 @@ body { .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), + + -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 ); } @@ -955,25 +955,25 @@ body { -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), + -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), +.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), +.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), +.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 ); } @@ -1012,7 +1012,7 @@ body { .reveal.overview .slides section { padding: 20px 0; max-height: 600px; - overflow: hidden; + overflow: hidden; opacity: 1!important; visibility: visible!important; cursor: pointer; diff --git a/index.html b/index.html index 670eb5e..f785065 100644 --- a/index.html +++ b/index.html @@ -1,9 +1,9 @@ - + - + - + reveal.js - The HTML Presentation Framework @@ -11,7 +11,7 @@ - + @@ -27,9 +27,9 @@ - + - +
@@ -39,11 +39,11 @@

Reveal.js

HTML Presentations Made Easy

- +

Heads Up

- reveal.js is a framework for easily creating beautiful presentations using HTML. You'll need a browser with + reveal.js is a framework for easily creating beautiful presentations using HTML. You'll need a browser with support for CSS 3D transforms to see it in its full glory.

@@ -54,7 +54,7 @@ Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard).

- +
@@ -117,7 +117,7 @@
  • Or here
    • - +

    Fantastic Ordered List

      @@ -130,13 +130,13 @@
      @@ -149,9 +149,9 @@ Cube - Page - Concave - - Zoom - - Linear - - None - + Zoom - + Linear - + None - Default

      @@ -217,17 +217,17 @@ The nice thing about standards is that there are so many to choose from and block:

      - For years there has been a theory that millions of monkeys typing at random on millions of typewriters would + For years there has been a theory that millions of monkeys typing at random on millions of typewriters would reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.
    - +

    Pretty Code

    
 function linkify( selector ) {
   if( supports3DTransforms ) {
-    
+
     var nodes = document.querySelectorAll( selector );
 
     for( var i = 0, len = nodes.length; i < len; i++ ) {
@@ -242,7 +242,7 @@ function linkify( selector ) {

    Courtesy of highlight.js.

    - +

    Intergalactic Interconnections

    @@ -274,14 +274,14 @@ function linkify( selector ) {

    highlight-blue

    - +

    Spectacular image!

    Meny
    - +

    Export to PDF

    Presentations can be exported to PDF, below is an example that's been uploaded to SlideShare.

    @@ -290,11 +290,11 @@ function linkify( selector ) { document.getElementById('slideshare').attributeName = 'allowfullscreen';
    - +

    Take a Moment

    - Press b or period on your keyboard to enter the 'paused' mode. This mode is helpful when you want to take disctracting slides off the screen + Press b or period on your keyboard to enter the 'paused' mode. This mode is helpful when you want to take disctracting slides off the screen during a presentation.

    @@ -311,7 +311,7 @@ function linkify( selector ) {

    It's free

    - reveal.js and rvl.io are entirely free but if you'd like to support the projects you can donate below. + reveal.js and rvl.io are entirely free but if you'd like to support the projects you can donate below. Donations will go towards hosting and domain costs.

    @@ -325,14 +325,14 @@ function linkify( selector ) {
    - +

    THE END

    BY Hakim El Hattab / hakim.se

    - + @@ -346,7 +346,7 @@ function linkify( selector ) { controls: true, progress: true, history: true, - + theme: Reveal.getQueryHash().theme, // available themes are in /css/theme transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/none -- cgit v1.2.3 From b373425b694a3fd4d49716fe53e091b984ea1eab Mon Sep 17 00:00:00 2001 From: Russell Beattie Date: Mon, 22 Oct 2012 14:49:22 -0700 Subject: Updated Controls to use CSS triangles rather than unicode triangles (fix Android support) --- css/reveal.css | 66 +++++++++++++++++++++++++++++++++------------------------- js/reveal.js | 8 +++---- 2 files changed, 42 insertions(+), 32 deletions(-) (limited to 'css/reveal.css') diff --git a/css/reveal.css b/css/reveal.css index 09a874e..ce4765f 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -319,41 +319,51 @@ body { width: 90px; height: 90px; z-index: 30; - right: 10px; bottom: 10px; } - .reveal .controls a { - font-family: Arial; - font-size: 0.83em; - position: absolute; - opacity: 0.1; - } - .reveal .controls a.enabled { - opacity: 0.6; - } - .reveal .controls a.enabled:active { - margin-top: 1px; - } - - .reveal .controls .left { - top: 30px; - } +.reveal .controls div { + position: absolute; + opacity: 0.1; + width: 0; + height: 0; + border: 12px solid transparent; +} - .reveal .controls .right { - left: 60px; - top: 30px; - } +.reveal .controls div.enabled { + opacity: 0.6; +} - .reveal .controls .up { - left: 30px; - } +.reveal .controls div.enabled:active { + margin-top: 1px; +} - .reveal .controls .down { - left: 30px; - top: 60px; - } +.reveal .controls div.left { + top: 30px; + + border-right-color: #eee; +} + +.reveal .controls div.right { + left: 60px; + top: 30px; + + border-left-color: #eee; +} + +.reveal .controls div.up { + left: 30px; + + border-bottom-color: #eee; +} + +.reveal .controls div.down { + left: 30px; + top: 60px; + + border-top-color: #eee; +} /********************************************* diff --git a/js/reveal.js b/js/reveal.js index 0ae2ad1..cb0205e 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -150,10 +150,10 @@ var Reveal = (function(){ if( !dom.wrapper.querySelector( '.controls' ) && config.controls ) { var controlsElement = document.createElement( 'aside' ); controlsElement.classList.add( 'controls' ); - controlsElement.innerHTML = '◄' + - '►' + - '▲' + - '▼'; + controlsElement.innerHTML = '
    ' + + '
    ' + + '
    ' + + '
    '; dom.wrapper.appendChild( controlsElement ); } -- cgit v1.2.3 From aefe981040ea8c5c7875d9da1ac860def44a19e8 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Mon, 22 Oct 2012 23:16:14 -0400 Subject: use borders to generate control arrows (closes #137) --- css/reveal.css | 27 +++++++++++++++++++-------- css/theme/beige.css | 28 ++++++++++++++++------------ css/theme/default.css | 28 ++++++++++++++++------------ css/theme/serif.css | 28 ++++++++++++++++------------ css/theme/simple.css | 28 ++++++++++++++++------------ css/theme/sky.css | 28 ++++++++++++++++------------ css/theme/template/theme.scss | 28 ++++++++++++++++------------ js/reveal.min.js | 7 +++---- 8 files changed, 118 insertions(+), 84 deletions(-) (limited to 'css/reveal.css') diff --git a/css/reveal.css b/css/reveal.css index ce4765f..b39ea13 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -316,8 +316,8 @@ body { .reveal .controls { display: none; position: fixed; - width: 90px; - height: 90px; + width: 110px; + height: 110px; z-index: 30; right: 10px; bottom: 10px; @@ -329,10 +329,17 @@ body { width: 0; height: 0; border: 12px solid transparent; + + -webkit-transition: opacity 0.2s ease; + -moz-transition: opacity 0.2s ease; + -ms-transition: opacity 0.2s ease; + -o-transition: opacity 0.2s ease; + transition: opacity 0.2s ease; } .reveal .controls div.enabled { opacity: 0.6; + cursor: pointer; } .reveal .controls div.enabled:active { @@ -340,28 +347,32 @@ body { } .reveal .controls div.left { - top: 30px; + top: 42px; + border-right-width: 22px; border-right-color: #eee; } .reveal .controls div.right { - left: 60px; - top: 30px; + left: 74px; + top: 42px; + border-left-width: 22px; border-left-color: #eee; } .reveal .controls div.up { - left: 30px; + left: 42px; + border-bottom-width: 22px; border-bottom-color: #eee; } .reveal .controls div.down { - left: 30px; - top: 60px; + left: 42px; + top: 74px; + border-top-width: 22px; border-top-color: #eee; } diff --git a/css/theme/beige.css b/css/theme/beige.css index 6d2eea9..fe0e460 100644 --- a/css/theme/beige.css +++ b/css/theme/beige.css @@ -110,35 +110,39 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.left { - border-right-color: #333333; +.reveal .controls div.left, +.reveal .controls div.left.enabled { + border-right-color: #8b743d; } -.reveal .controls div.right { - border-left-color: #333333; +.reveal .controls div.right, +.reveal .controls div.right.enabled { + border-left-color: #8b743d; } -.reveal .controls div.up { - border-bottom-color: #333333; +.reveal .controls div.up, +.reveal .controls div.up.enabled { + border-bottom-color: #8b743d; } -.reveal .controls div.down { - border-top-color: #333333; +.reveal .controls div.down, +.reveal .controls div.down.enabled { + border-top-color: #8b743d; } -.reveal .controls div.left.enabled { +.reveal .controls div.left.enabled:hover { border-right-color: #c0a86e; } -.reveal .controls div.right.enabled { +.reveal .controls div.right.enabled:hover { border-left-color: #c0a86e; } -.reveal .controls div.up.enabled { +.reveal .controls div.up.enabled:hover { border-bottom-color: #c0a86e; } -.reveal .controls div.down.enabled { +.reveal .controls div.down.enabled:hover { border-top-color: #c0a86e; } diff --git a/css/theme/default.css b/css/theme/default.css index 0b393c2..563e4d9 100644 --- a/css/theme/default.css +++ b/css/theme/default.css @@ -110,35 +110,39 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.left { - border-right-color: #eeeeee; +.reveal .controls div.left, +.reveal .controls div.left.enabled { + border-right-color: #13daec; } -.reveal .controls div.right { - border-left-color: #eeeeee; +.reveal .controls div.right, +.reveal .controls div.right.enabled { + border-left-color: #13daec; } -.reveal .controls div.up { - border-bottom-color: #eeeeee; +.reveal .controls div.up, +.reveal .controls div.up.enabled { + border-bottom-color: #13daec; } -.reveal .controls div.down { - border-top-color: #eeeeee; +.reveal .controls div.down, +.reveal .controls div.down.enabled { + border-top-color: #13daec; } -.reveal .controls div.left.enabled { +.reveal .controls div.left.enabled:hover { border-right-color: #71e9f4; } -.reveal .controls div.right.enabled { +.reveal .controls div.right.enabled:hover { border-left-color: #71e9f4; } -.reveal .controls div.up.enabled { +.reveal .controls div.up.enabled:hover { border-bottom-color: #71e9f4; } -.reveal .controls div.down.enabled { +.reveal .controls div.down.enabled:hover { border-top-color: #71e9f4; } diff --git a/css/theme/serif.css b/css/theme/serif.css index 55a6b3a..3957b5d 100644 --- a/css/theme/serif.css +++ b/css/theme/serif.css @@ -97,35 +97,39 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.left { - border-right-color: black; +.reveal .controls div.left, +.reveal .controls div.left.enabled { + border-right-color: #51483d; } -.reveal .controls div.right { - border-left-color: black; +.reveal .controls div.right, +.reveal .controls div.right.enabled { + border-left-color: #51483d; } -.reveal .controls div.up { - border-bottom-color: black; +.reveal .controls div.up, +.reveal .controls div.up.enabled { + border-bottom-color: #51483d; } -.reveal .controls div.down { - border-top-color: black; +.reveal .controls div.down, +.reveal .controls div.down.enabled { + border-top-color: #51483d; } -.reveal .controls div.left.enabled { +.reveal .controls div.left.enabled:hover { border-right-color: #8b7c69; } -.reveal .controls div.right.enabled { +.reveal .controls div.right.enabled:hover { border-left-color: #8b7c69; } -.reveal .controls div.up.enabled { +.reveal .controls div.up.enabled:hover { border-bottom-color: #8b7c69; } -.reveal .controls div.down.enabled { +.reveal .controls div.down.enabled:hover { border-top-color: #8b7c69; } diff --git a/css/theme/simple.css b/css/theme/simple.css index 8fb23c4..926bbc5 100644 --- a/css/theme/simple.css +++ b/css/theme/simple.css @@ -99,35 +99,39 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.left { - border-right-color: black; +.reveal .controls div.left, +.reveal .controls div.left.enabled { + border-right-color: darkblue; } -.reveal .controls div.right { - border-left-color: black; +.reveal .controls div.right, +.reveal .controls div.right.enabled { + border-left-color: darkblue; } -.reveal .controls div.up { - border-bottom-color: black; +.reveal .controls div.up, +.reveal .controls div.up.enabled { + border-bottom-color: darkblue; } -.reveal .controls div.down { - border-top-color: black; +.reveal .controls div.down, +.reveal .controls div.down.enabled { + border-top-color: darkblue; } -.reveal .controls div.left.enabled { +.reveal .controls div.left.enabled:hover { border-right-color: #0000f1; } -.reveal .controls div.right.enabled { +.reveal .controls div.right.enabled:hover { border-left-color: #0000f1; } -.reveal .controls div.up.enabled { +.reveal .controls div.up.enabled:hover { border-bottom-color: #0000f1; } -.reveal .controls div.down.enabled { +.reveal .controls div.down.enabled:hover { border-top-color: #0000f1; } diff --git a/css/theme/sky.css b/css/theme/sky.css index d68fc8b..6618c0d 100644 --- a/css/theme/sky.css +++ b/css/theme/sky.css @@ -103,35 +103,39 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.left { - border-right-color: #333333; +.reveal .controls div.left, +.reveal .controls div.left.enabled { + border-right-color: #3b759e; } -.reveal .controls div.right { - border-left-color: #333333; +.reveal .controls div.right, +.reveal .controls div.right.enabled { + border-left-color: #3b759e; } -.reveal .controls div.up { - border-bottom-color: #333333; +.reveal .controls div.up, +.reveal .controls div.up.enabled { + border-bottom-color: #3b759e; } -.reveal .controls div.down { - border-top-color: #333333; +.reveal .controls div.down, +.reveal .controls div.down.enabled { + border-top-color: #3b759e; } -.reveal .controls div.left.enabled { +.reveal .controls div.left.enabled:hover { border-right-color: #74a7cb; } -.reveal .controls div.right.enabled { +.reveal .controls div.right.enabled:hover { border-left-color: #74a7cb; } -.reveal .controls div.up.enabled { +.reveal .controls div.up.enabled:hover { border-bottom-color: #74a7cb; } -.reveal .controls div.down.enabled { +.reveal .controls div.down.enabled:hover { border-top-color: #74a7cb; } diff --git a/css/theme/template/theme.scss b/css/theme/template/theme.scss index 9c22ecb..600c8e3 100644 --- a/css/theme/template/theme.scss +++ b/css/theme/template/theme.scss @@ -106,35 +106,39 @@ body { * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.left { - border-right-color: $mainColor; +.reveal .controls div.left, +.reveal .controls div.left.enabled { + border-right-color: $linkColor; } -.reveal .controls div.right { - border-left-color: $mainColor; +.reveal .controls div.right, +.reveal .controls div.right.enabled { + border-left-color: $linkColor; } -.reveal .controls div.up { - border-bottom-color: $mainColor; +.reveal .controls div.up, +.reveal .controls div.up.enabled { + border-bottom-color: $linkColor; } -.reveal .controls div.down { - border-top-color: $mainColor; +.reveal .controls div.down, +.reveal .controls div.down.enabled { + border-top-color: $linkColor; } -.reveal .controls div.left.enabled { +.reveal .controls div.left.enabled:hover { border-right-color: $linkColorHover; } -.reveal .controls div.right.enabled { +.reveal .controls div.right.enabled:hover { border-left-color: $linkColorHover; } -.reveal .controls div.up.enabled { +.reveal .controls div.up.enabled:hover { border-bottom-color: $linkColorHover; } -.reveal .controls div.down.enabled { +.reveal .controls div.down.enabled:hover { border-top-color: $linkColorHover; } diff --git a/js/reveal.min.js b/js/reveal.min.js index 7fb4f9a..278d5e8 100644 --- a/js/reveal.min.js +++ b/js/reveal.min.js @@ -9,10 +9,9 @@ var Reveal=(function(){var l=".reveal .slides>section",b=".reveal .slides>sectio function i(al){if((!n&&!T)){document.body.setAttribute("class","no-transforms");return;}t(R,al);d();V();}function P(){f.theme=document.querySelector("#theme"); f.wrapper=document.querySelector(".reveal");if(!f.wrapper.querySelector(".progress")&&R.progress){var ao=document.createElement("div");ao.classList.add("progress"); ao.innerHTML="";f.wrapper.appendChild(ao);}if(!f.wrapper.querySelector(".controls")&&R.controls){var an=document.createElement("aside");an.classList.add("controls"); -an.innerHTML='◄►▲▼'; -f.wrapper.appendChild(an);}if(!f.wrapper.querySelector(".state-background")){var am=document.createElement("div");am.classList.add("state-background"); -f.wrapper.appendChild(am);}if(!f.wrapper.querySelector(".pause-overlay")){var al=document.createElement("div");al.classList.add("pause-overlay");f.wrapper.appendChild(al); -}f.progress=document.querySelector(".reveal .progress");f.progressbar=document.querySelector(".reveal .progress span");if(R.controls){f.controls=document.querySelector(".reveal .controls"); +an.innerHTML='
    ';f.wrapper.appendChild(an);}if(!f.wrapper.querySelector(".state-background")){var am=document.createElement("div"); +am.classList.add("state-background");f.wrapper.appendChild(am);}if(!f.wrapper.querySelector(".pause-overlay")){var al=document.createElement("div");al.classList.add("pause-overlay"); +f.wrapper.appendChild(al);}f.progress=document.querySelector(".reveal .progress");f.progressbar=document.querySelector(".reveal .progress span");if(R.controls){f.controls=document.querySelector(".reveal .controls"); f.controlsLeft=document.querySelector(".reveal .controls .left");f.controlsRight=document.querySelector(".reveal .controls .right");f.controlsUp=document.querySelector(".reveal .controls .up"); f.controlsDown=document.querySelector(".reveal .controls .down");}}function d(){if(navigator.userAgent.match(/(iphone|ipod|android)/i)){document.documentElement.style.overflow="scroll"; document.body.style.height="120%";window.addEventListener("load",ad,false);window.addEventListener("orientationchange",ad,false);}}function V(){var am=[],aq=[]; -- cgit v1.2.3 From 6aafa0107dd75893db662b9f9e9178594c5e5c32 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Sat, 27 Oct 2012 21:20:13 -0400 Subject: escape quotes in css using unicode hex --- css/reveal.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'css/reveal.css') diff --git a/css/reveal.css b/css/reveal.css index b39ea13..6e2361b 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -239,20 +239,20 @@ body { box-shadow: 0px 0px 2px rgba(0,0,0,0.2); } .reveal blockquote:before { - content: '“'; + content: '\201C'; } .reveal blockquote:after { - content: '”'; + content: '\201D'; } .reveal q { font-style: italic; } .reveal q:before { - content: '“'; + content: '\201C'; } .reveal q:after { - content: '”'; + content: '\201D'; } .reveal pre { -- cgit v1.2.3 From e87d68923169cdff32c2ddf97981d2c7ac9efd2f Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Sun, 28 Oct 2012 23:55:19 -0400 Subject: content now re-renders after alt+click zoom (closes #195) --- css/reveal.css | 32 ++++++++++++++++++++++++++++++++ index.html | 6 +++--- plugin/zoom-js/zoom.js | 7 +++++++ 3 files changed, 42 insertions(+), 3 deletions(-) (limited to 'css/reveal.css') diff --git a/css/reveal.css b/css/reveal.css index 6e2361b..ad2e33e 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -1150,3 +1150,35 @@ body { } +/********************************************* + * ZOOM PLUGIN + *********************************************/ + +.zoomed .reveal *, +.zoomed .reveal *:before, +.zoomed .reveal *:after { + -webkit-transform: initial !important; + -moz-transform: initial !important; + -ms-transform: initial !important; + transform: initial !important; + + -webkit-backface-visibility: initial !important; + -moz-backface-visibility: initial !important; + -ms-backface-visibility: initial !important; + backface-visibility: initial !important; +} + +.zoomed .reveal .progress, +.zoomed .reveal .controls { + opacity: 0; +} + +.zoomed .reveal .roll span { + background: none; +} + +.zoomed .reveal .roll span:after { + visibility: hidden; +} + + diff --git a/index.html b/index.html index 89398c1..de0637c 100644 --- a/index.html +++ b/index.html @@ -38,6 +38,9 @@

    Reveal.js

    HTML Presentations Made Easy

    +

    + Created by Hakim El Hattab / @hakimel +

    @@ -46,9 +49,6 @@ reveal.js is a framework for easily creating beautiful presentations using HTML. You'll need a browser with support for CSS 3D transforms to see it in its full glory.

    -

    - - Hakim El Hattab / @hakimel -

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

    - + Down arrow

    "blackout"

    - + Down arrow

    "soothe"

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