├── .gitignore ├── LICENSE ├── README.md ├── build.sbt ├── my-talk ├── css │ └── presentation.css ├── index.html ├── src │ └── main │ │ └── scala │ │ └── MyTalk.scala └── target │ └── scala-2.12 │ ├── mytalk-fastopt.js │ └── mytalk-jsdeps.js ├── project ├── build.properties └── plugins.sbt ├── reveal ├── css │ ├── presentation.css │ ├── reveal.css │ ├── reveal.scss │ └── theme │ │ ├── source │ │ └── white.scss │ │ ├── template │ │ ├── mixins.scss │ │ ├── settings.scss │ │ └── theme.scss │ │ └── white.css ├── img │ ├── dark-logo.svg │ └── logo.svg ├── js │ └── reveal.js ├── lib │ ├── css │ │ └── vscode.css │ ├── font │ │ ├── league-gothic │ │ │ ├── LICENSE │ │ │ ├── league-gothic.css │ │ │ ├── league-gothic.eot │ │ │ ├── league-gothic.ttf │ │ │ └── league-gothic.woff │ │ └── source-sans-pro │ │ │ ├── LICENSE │ │ │ ├── source-sans-pro-italic.eot │ │ │ ├── source-sans-pro-italic.ttf │ │ │ ├── source-sans-pro-italic.woff │ │ │ ├── source-sans-pro-regular.eot │ │ │ ├── source-sans-pro-regular.ttf │ │ │ ├── source-sans-pro-regular.woff │ │ │ ├── source-sans-pro-semibold.eot │ │ │ ├── source-sans-pro-semibold.ttf │ │ │ ├── source-sans-pro-semibold.woff │ │ │ ├── source-sans-pro-semibolditalic.eot │ │ │ ├── source-sans-pro-semibolditalic.ttf │ │ │ ├── source-sans-pro-semibolditalic.woff │ │ │ └── source-sans-pro.css │ └── js │ │ ├── classList.js │ │ ├── head.min.js │ │ └── html5shiv.js └── plugin │ ├── highlight │ └── highlight.js │ ├── math │ └── mathjax.js │ └── zoom-js │ └── zoom.js └── shared └── src └── main └── scala └── shared └── PresentationUtil.scala /.gitignore: -------------------------------------------------------------------------------- 1 | # sbt 2 | target 3 | project/project 4 | 5 | # ensime 6 | *.*~ 7 | 8 | # allow 9 | !/my-talk/target/scala-2.12/mytalk-fastopt.js 10 | !/my-talk/target/scala-2.12/mytalk-jsdeps.js -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Paul Heymann 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ScalaJS + reveal.js = ❤ 2 | This is a basic project setup to create beautiful [reveal.js](https://github.com/hakimel/reveal.js/) presentations with [ScalaJS](https://www.scala-js.org/). To use it just clone or fork this repository and simply start to write down your own slide-deck. 3 | 4 | ### How to use it 5 | 1. Create a new SBT sub-project for your presentation (see [my-talk](https://github.com/pheymann/scala-reveal-js/blob/master/build.sbt#L30) as an example). 6 | 2. Write down your slide-deck. For more information take a look at the [example](https://github.com/pheymann/scala-reveal-js/blob/master/my-talk/src/main/scala/MyTalk.scala) and [reveal.js](https://github.com/hakimel/reveal.js/). 7 | 3. Compile your presentations with `sbt "project myTalk" "fastOptJS"` or if it is the final state `sbt "project myTalk" "fullOptJS"`. Just make sure you reference the right JS files in the [index.html](https://github.com/pheymann/scala-reveal-js/blob/master/my-talk/index.html) - the root of your presentation. 8 | 9 | ### Make it available to anybody 10 | Best thing is, you can commit your compiled presentation and build a [Github page](https://help.github.com/articles/configuring-a-publishing-source-for-github-pages/#enabling-github-pages-to-publish-your-site-from-master-or-gh-pages) from it. Now you can share knowledge easily. 11 | 12 | Take a look at [https://pheymann.github.io/scala-reveal-js/my-talk](https://pheymann.github.io/scala-reveal-js/my-talk) which is build with this repository. It isn't particular beautiful but it works. Just keep in mind that this is plain HTML, JS and CSS in the end and you can do with it what ever your want. 13 | 14 | ### Why? 15 | Lately, I have to write a lot of slides for workshops and talks. I started to do that in reveal.js because it gave me a bunch of build-in features and the freedom to customize it as needed. But writing thousands of lines of HTML isn't really fun and adding headers to every slide - which also happen to change from slide to slide - is a real pain. 16 | 17 | To overcome this problems, I integrated reveal.js into a small ScalaJS-React project to refactor common task and to somehow get headers into my slides without going insane. 18 | -------------------------------------------------------------------------------- /build.sbt: -------------------------------------------------------------------------------- 1 | 2 | val reactV = "16.2.0" 3 | 4 | lazy val common = Seq( 5 | version := "-", 6 | libraryDependencies ++= Seq( 7 | "com.github.japgolly.scalajs-react" %%% "core" % "1.2.3", 8 | "org.scala-js" %%% "scalajs-dom" % "0.9.2" 9 | ), 10 | jsDependencies ++= Seq( 11 | "org.webjars.bower" % "react" % "15.2.1" / "react-with-addons.js" minified "react-with-addons.min.js" commonJSName "React", 12 | "org.webjars.bower" % "react" % "15.2.1" / "react-dom.js" minified "react-dom.min.js" dependsOn "react-with-addons.js" commonJSName "ReactDOM" 13 | ), 14 | 15 | scalaJSUseMainModuleInitializer := true 16 | ) 17 | 18 | lazy val root = project 19 | .in(file(".")) 20 | .aggregate( 21 | myTalk, 22 | shared 23 | ) 24 | 25 | lazy val shared = project 26 | .in(file("shared")) 27 | .enablePlugins(ScalaJSPlugin) 28 | .settings(common) 29 | 30 | lazy val myTalk = project 31 | .in(file("my-talk")) 32 | .enablePlugins(ScalaJSPlugin) 33 | .settings(common) 34 | .dependsOn(shared) 35 | -------------------------------------------------------------------------------- /my-talk/css/presentation.css: -------------------------------------------------------------------------------- 1 | @import "./../../reveal/css/presentation.css" 2 | -------------------------------------------------------------------------------- /my-talk/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Scala Reveal JS 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /my-talk/src/main/scala/MyTalk.scala: -------------------------------------------------------------------------------- 1 | 2 | import shared.PresentationUtil._ 3 | import japgolly.scalajs.react.ScalaComponent 4 | import japgolly.scalajs.react.vdom.html_<^._ 5 | import org.scalajs.dom 6 | 7 | import scala.scalajs.js.JSApp 8 | import scala.scalajs.js.annotation.JSExport 9 | 10 | object MyTalk extends JSApp { 11 | 12 | import Enumeration._ 13 | 14 | val chapter1 = chapter( 15 | chapterSlide( 16 | <.h2("Build your presentations with ScalaJS + reveal.js"), 17 | <.br, 18 | <.h4("move down (down-arrow)") 19 | ), 20 | 21 | headerSlide( 22 | "reveal.js commands", 23 | <.p("Press 'f' to go full-screen and ESC to see an overview of your slides."), 24 | <.br, 25 | <.p("You can navigate to the right and down.") 26 | ), 27 | 28 | headerSlide( 29 | "My Header", 30 | <.h3("Headers everywhere") 31 | ), 32 | 33 | headerSlide( 34 | "Enumeration", 35 | Enumeration( 36 | Item.stable("always show this item"), 37 | Item.fadeIn("I fade in"), 38 | Item.stable("I am also always here") 39 | ) 40 | ), 41 | 42 | headerSlide( 43 | "Code, so much code", 44 | scalaC(""" 45 | def main(args: Array[String]): Unit = { 46 | println("hello, world") 47 | } 48 | """), 49 | scalaFragment(""" 50 | def moreSideEffects(): Unit = { 51 | println("pop in") 52 | } 53 | """) 54 | ), 55 | 56 | noHeaderSlide( 57 | <.h3("Or have a blank slide") 58 | ) 59 | ) 60 | 61 | val chapter2 = chapter( 62 | chapterSlide( 63 | <.h2("Where can I find more information?") 64 | ), 65 | 66 | headerSlide( 67 | "about reveal.js", 68 | <.a( 69 | ^.href := "https://github.com/hakimel/reveal.js/", 70 | "reveal.js" 71 | ) 72 | ), 73 | 74 | headerSlide( 75 | "about ScalaJS", 76 | <.a( 77 | ^.href := "https://www.scala-js.org", 78 | "ScalaJS" 79 | ) 80 | ) 81 | ) 82 | 83 | val Talk = ScalaComponent 84 | .builder[Unit]("Presentation") 85 | .renderStatic( 86 | <.div( 87 | ^.cls := "reveal", 88 | <.div( 89 | ^.cls := "slides", 90 | chapter1, 91 | chapter2 92 | ) 93 | ) 94 | ) 95 | .build 96 | 97 | @JSExport 98 | override def main(): Unit = { 99 | Talk().renderIntoDOM(dom.document.body) 100 | } 101 | } 102 | -------------------------------------------------------------------------------- /project/build.properties: -------------------------------------------------------------------------------- 1 | sbt.version=1.1.5 -------------------------------------------------------------------------------- /project/plugins.sbt: -------------------------------------------------------------------------------- 1 | addSbtPlugin("org.scala-js" % "sbt-scalajs" % "0.6.24") 2 | -------------------------------------------------------------------------------- /reveal/css/presentation.css: -------------------------------------------------------------------------------- 1 | .no-box { 2 | background: none; 3 | border: none; 4 | box-shadow: none; 5 | } 6 | 7 | .slide-header { 8 | position: fixed; 9 | top: -3%; 10 | left: -16%; 11 | width: 140%; 12 | } 13 | 14 | .slide-header { 15 | background-color: #3e3e3b; 16 | } 17 | 18 | .slide-header > p { 19 | position: relative; 20 | float: left; 21 | margin: 0; 22 | padding-top: 15px; 23 | padding-bottom: 11px; 24 | padding-left: 50px; 25 | font-size: 70%; 26 | } 27 | 28 | .slide-header > p { 29 | color: #ffffff; 30 | } 31 | 32 | /* ########## Queries */ 33 | @media only screen and (min-width: 600px) { 34 | .slide-header > p { 35 | padding-left: 85px; 36 | } 37 | } 38 | 39 | @media only screen and (min-width: 1500px) { 40 | .slide-header > p { 41 | padding-left: 95px; 42 | } 43 | } 44 | 45 | -------------------------------------------------------------------------------- /reveal/css/reveal.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * reveal.js 3 | * http://lab.hakim.se/reveal-js 4 | * MIT licensed 5 | * 6 | * Copyright (C) 2017 Hakim El Hattab, http://hakim.se 7 | */ 8 | /********************************************* 9 | * RESET STYLES 10 | *********************************************/ 11 | html, body, .reveal div, .reveal span, .reveal applet, .reveal object, .reveal iframe, 12 | .reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6, .reveal p, .reveal blockquote, .reveal pre, 13 | .reveal a, .reveal abbr, .reveal acronym, .reveal address, .reveal big, .reveal cite, .reveal code, 14 | .reveal del, .reveal dfn, .reveal em, .reveal img, .reveal ins, .reveal kbd, .reveal q, .reveal s, .reveal samp, 15 | .reveal small, .reveal strike, .reveal strong, .reveal sub, .reveal sup, .reveal tt, .reveal var, 16 | .reveal b, .reveal u, .reveal center, 17 | .reveal dl, .reveal dt, .reveal dd, .reveal ol, .reveal ul, .reveal li, 18 | .reveal fieldset, .reveal form, .reveal label, .reveal legend, 19 | .reveal table, .reveal caption, .reveal tbody, .reveal tfoot, .reveal thead, .reveal tr, .reveal th, .reveal td, 20 | .reveal article, .reveal aside, .reveal canvas, .reveal details, .reveal embed, 21 | .reveal figure, .reveal figcaption, .reveal footer, .reveal header, .reveal hgroup, 22 | .reveal menu, .reveal nav, .reveal output, .reveal ruby, .reveal section, .reveal summary, 23 | .reveal time, .reveal mark, .reveal audio, .reveal video { 24 | margin: 0; 25 | padding: 0; 26 | border: 0; 27 | font-size: 100%; 28 | font: inherit; 29 | vertical-align: baseline; } 30 | 31 | .reveal article, .reveal aside, .reveal details, .reveal figcaption, .reveal figure, 32 | .reveal footer, .reveal header, .reveal hgroup, .reveal menu, .reveal nav, .reveal section { 33 | display: block; } 34 | 35 | /********************************************* 36 | * GLOBAL STYLES 37 | *********************************************/ 38 | html, 39 | body { 40 | width: 100%; 41 | height: 100%; 42 | overflow: hidden; } 43 | 44 | body { 45 | position: relative; 46 | line-height: 1; 47 | background-color: #fff; 48 | color: #000; } 49 | 50 | /********************************************* 51 | * VIEW FRAGMENTS 52 | *********************************************/ 53 | .reveal .slides section .fragment { 54 | opacity: 0; 55 | visibility: hidden; 56 | -webkit-transition: all .2s ease; 57 | transition: all .2s ease; } 58 | .reveal .slides section .fragment.visible { 59 | opacity: 1; 60 | visibility: inherit; } 61 | 62 | .reveal .slides section .fragment.grow { 63 | opacity: 1; 64 | visibility: inherit; } 65 | .reveal .slides section .fragment.grow.visible { 66 | -webkit-transform: scale(1.3); 67 | transform: scale(1.3); } 68 | 69 | .reveal .slides section .fragment.shrink { 70 | opacity: 1; 71 | visibility: inherit; } 72 | .reveal .slides section .fragment.shrink.visible { 73 | -webkit-transform: scale(0.7); 74 | transform: scale(0.7); } 75 | 76 | .reveal .slides section .fragment.zoom-in { 77 | -webkit-transform: scale(0.1); 78 | transform: scale(0.1); } 79 | .reveal .slides section .fragment.zoom-in.visible { 80 | -webkit-transform: none; 81 | transform: none; } 82 | 83 | .reveal .slides section .fragment.fade-out { 84 | opacity: 1; 85 | visibility: inherit; } 86 | .reveal .slides section .fragment.fade-out.visible { 87 | opacity: 0; 88 | visibility: hidden; } 89 | 90 | .reveal .slides section .fragment.semi-fade-out { 91 | opacity: 1; 92 | visibility: inherit; } 93 | .reveal .slides section .fragment.semi-fade-out.visible { 94 | opacity: 0.5; 95 | visibility: inherit; } 96 | 97 | .reveal .slides section .fragment.strike { 98 | opacity: 1; 99 | visibility: inherit; } 100 | .reveal .slides section .fragment.strike.visible { 101 | text-decoration: line-through; } 102 | 103 | .reveal .slides section .fragment.fade-up { 104 | -webkit-transform: translate(0, 20%); 105 | transform: translate(0, 20%); } 106 | .reveal .slides section .fragment.fade-up.visible { 107 | -webkit-transform: translate(0, 0); 108 | transform: translate(0, 0); } 109 | 110 | .reveal .slides section .fragment.fade-down { 111 | -webkit-transform: translate(0, -20%); 112 | transform: translate(0, -20%); } 113 | .reveal .slides section .fragment.fade-down.visible { 114 | -webkit-transform: translate(0, 0); 115 | transform: translate(0, 0); } 116 | 117 | .reveal .slides section .fragment.fade-right { 118 | -webkit-transform: translate(-20%, 0); 119 | transform: translate(-20%, 0); } 120 | .reveal .slides section .fragment.fade-right.visible { 121 | -webkit-transform: translate(0, 0); 122 | transform: translate(0, 0); } 123 | 124 | .reveal .slides section .fragment.fade-left { 125 | -webkit-transform: translate(20%, 0); 126 | transform: translate(20%, 0); } 127 | .reveal .slides section .fragment.fade-left.visible { 128 | -webkit-transform: translate(0, 0); 129 | transform: translate(0, 0); } 130 | 131 | .reveal .slides section .fragment.current-visible { 132 | opacity: 0; 133 | visibility: hidden; } 134 | .reveal .slides section .fragment.current-visible.current-fragment { 135 | opacity: 1; 136 | visibility: inherit; } 137 | 138 | .reveal .slides section .fragment.highlight-red, 139 | .reveal .slides section .fragment.highlight-current-red, 140 | .reveal .slides section .fragment.highlight-green, 141 | .reveal .slides section .fragment.highlight-current-green, 142 | .reveal .slides section .fragment.highlight-blue, 143 | .reveal .slides section .fragment.highlight-current-blue { 144 | opacity: 1; 145 | visibility: inherit; } 146 | 147 | .reveal .slides section .fragment.highlight-red.visible { 148 | color: #ff2c2d; } 149 | 150 | .reveal .slides section .fragment.highlight-green.visible { 151 | color: #17ff2e; } 152 | 153 | .reveal .slides section .fragment.highlight-blue.visible { 154 | color: #1b91ff; } 155 | 156 | .reveal .slides section .fragment.highlight-current-red.current-fragment { 157 | color: #ff2c2d; } 158 | 159 | .reveal .slides section .fragment.highlight-current-green.current-fragment { 160 | color: #17ff2e; } 161 | 162 | .reveal .slides section .fragment.highlight-current-blue.current-fragment { 163 | color: #1b91ff; } 164 | 165 | /********************************************* 166 | * DEFAULT ELEMENT STYLES 167 | *********************************************/ 168 | /* Fixes issue in Chrome where italic fonts did not appear when printing to PDF */ 169 | .reveal:after { 170 | content: ''; 171 | font-style: italic; } 172 | 173 | .reveal iframe { 174 | z-index: 1; } 175 | 176 | /** Prevents layering issues in certain browser/transition combinations */ 177 | .reveal a { 178 | position: relative; } 179 | 180 | .reveal .stretch { 181 | max-width: none; 182 | max-height: none; } 183 | 184 | .reveal pre.stretch code { 185 | height: 100%; 186 | max-height: 100%; 187 | box-sizing: border-box; } 188 | 189 | /********************************************* 190 | * CONTROLS 191 | *********************************************/ 192 | .reveal .controls { 193 | display: none; 194 | position: fixed; 195 | width: 110px; 196 | height: 110px; 197 | z-index: 30; 198 | right: 10px; 199 | bottom: 10px; 200 | -webkit-user-select: none; } 201 | 202 | .reveal .controls button { 203 | padding: 0; 204 | position: absolute; 205 | opacity: 0.05; 206 | width: 0; 207 | height: 0; 208 | background-color: transparent; 209 | border: 12px solid transparent; 210 | -webkit-transform: scale(0.9999); 211 | transform: scale(0.9999); 212 | -webkit-transition: all 0.2s ease; 213 | transition: all 0.2s ease; 214 | -webkit-appearance: none; 215 | -webkit-tap-highlight-color: transparent; } 216 | 217 | .reveal .controls .enabled { 218 | opacity: 0.7; 219 | cursor: pointer; } 220 | 221 | .reveal .controls .enabled:active { 222 | margin-top: 1px; } 223 | 224 | .reveal .controls .navigate-left { 225 | top: 42px; 226 | border-right-width: 22px; 227 | border-right-color: #000; } 228 | 229 | .reveal .controls .navigate-left.fragmented { 230 | opacity: 0.3; } 231 | 232 | .reveal .controls .navigate-right { 233 | left: 74px; 234 | top: 42px; 235 | border-left-width: 22px; 236 | border-left-color: #000; } 237 | 238 | .reveal .controls .navigate-right.fragmented { 239 | opacity: 0.3; } 240 | 241 | .reveal .controls .navigate-up { 242 | left: 42px; 243 | border-bottom-width: 22px; 244 | border-bottom-color: #000; } 245 | 246 | .reveal .controls .navigate-up.fragmented { 247 | opacity: 0.3; } 248 | 249 | .reveal .controls .navigate-down { 250 | left: 42px; 251 | top: 74px; 252 | border-top-width: 22px; 253 | border-top-color: #000; } 254 | 255 | .reveal .controls .navigate-down.fragmented { 256 | opacity: 0.3; } 257 | 258 | /********************************************* 259 | * PROGRESS BAR 260 | *********************************************/ 261 | .reveal .progress { 262 | position: fixed; 263 | display: none; 264 | height: 3px; 265 | width: 100%; 266 | bottom: 0; 267 | left: 0; 268 | z-index: 10; 269 | background-color: rgba(0, 0, 0, 0.2); } 270 | 271 | .reveal .progress:after { 272 | content: ''; 273 | display: block; 274 | position: absolute; 275 | height: 20px; 276 | width: 100%; 277 | top: -20px; } 278 | 279 | .reveal .progress span { 280 | display: block; 281 | height: 100%; 282 | width: 0px; 283 | background-color: #000; 284 | -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 285 | transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } 286 | 287 | /********************************************* 288 | * SLIDE NUMBER 289 | *********************************************/ 290 | .reveal .slide-number { 291 | position: fixed; 292 | display: block; 293 | right: 8px; 294 | bottom: 8px; 295 | z-index: 31; 296 | font-family: Helvetica, sans-serif; 297 | font-size: 12px; 298 | line-height: 1; 299 | color: #fff; 300 | background-color: rgba(0, 0, 0, 0.4); 301 | padding: 5px; } 302 | 303 | .reveal .slide-number-delimiter { 304 | margin: 0 3px; } 305 | 306 | /********************************************* 307 | * SLIDES 308 | *********************************************/ 309 | .reveal { 310 | position: relative; 311 | width: 100%; 312 | height: 100%; 313 | overflow: hidden; 314 | -ms-touch-action: none; 315 | touch-action: none; } 316 | 317 | .reveal .slides { 318 | position: absolute; 319 | width: 100%; 320 | height: 100%; 321 | top: 0; 322 | right: 0; 323 | bottom: 0; 324 | left: 0; 325 | margin: auto; 326 | pointer-events: none; 327 | overflow: visible; 328 | z-index: 1; 329 | text-align: center; 330 | -webkit-perspective: 600px; 331 | perspective: 600px; 332 | -webkit-perspective-origin: 50% 40%; 333 | perspective-origin: 50% 40%; } 334 | 335 | .reveal .slides > section { 336 | -ms-perspective: 600px; } 337 | 338 | .reveal .slides > section, 339 | .reveal .slides > section > section { 340 | display: none; 341 | position: absolute; 342 | width: 100%; 343 | padding: 20px 0px; 344 | pointer-events: auto; 345 | z-index: 10; 346 | -webkit-transform-style: flat; 347 | transform-style: flat; 348 | -webkit-transition: -webkit-transform-origin 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), -webkit-transform 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), visibility 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), opacity 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 349 | transition: transform-origin 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), transform 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), visibility 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), opacity 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } 350 | 351 | /* Global transition speed settings */ 352 | .reveal[data-transition-speed="fast"] .slides section { 353 | -webkit-transition-duration: 400ms; 354 | transition-duration: 400ms; } 355 | 356 | .reveal[data-transition-speed="slow"] .slides section { 357 | -webkit-transition-duration: 1200ms; 358 | transition-duration: 1200ms; } 359 | 360 | /* Slide-specific transition speed overrides */ 361 | .reveal .slides section[data-transition-speed="fast"] { 362 | -webkit-transition-duration: 400ms; 363 | transition-duration: 400ms; } 364 | 365 | .reveal .slides section[data-transition-speed="slow"] { 366 | -webkit-transition-duration: 1200ms; 367 | transition-duration: 1200ms; } 368 | 369 | .reveal .slides > section.stack { 370 | padding-top: 0; 371 | padding-bottom: 0; } 372 | 373 | .reveal .slides > section.present, 374 | .reveal .slides > section > section.present { 375 | display: block; 376 | z-index: 11; 377 | opacity: 1; } 378 | 379 | .reveal .slides > section:empty, 380 | .reveal .slides > section > section:empty, 381 | .reveal .slides > section[data-background-interactive], 382 | .reveal .slides > section > section[data-background-interactive] { 383 | pointer-events: none; } 384 | 385 | .reveal.center, 386 | .reveal.center .slides, 387 | .reveal.center .slides section { 388 | min-height: 0 !important; } 389 | 390 | /* Don't allow interaction with invisible slides */ 391 | .reveal .slides > section.future, 392 | .reveal .slides > section > section.future, 393 | .reveal .slides > section.past, 394 | .reveal .slides > section > section.past { 395 | pointer-events: none; } 396 | 397 | .reveal.overview .slides > section, 398 | .reveal.overview .slides > section > section { 399 | pointer-events: auto; } 400 | 401 | .reveal .slides > section.past, 402 | .reveal .slides > section.future, 403 | .reveal .slides > section > section.past, 404 | .reveal .slides > section > section.future { 405 | opacity: 0; } 406 | 407 | /********************************************* 408 | * Mixins for readability of transitions 409 | *********************************************/ 410 | /********************************************* 411 | * SLIDE TRANSITION 412 | * Aliased 'linear' for backwards compatibility 413 | *********************************************/ 414 | .reveal.slide section { 415 | -webkit-backface-visibility: hidden; 416 | backface-visibility: hidden; } 417 | 418 | .reveal .slides > section[data-transition=slide].past, 419 | .reveal .slides > section[data-transition~=slide-out].past, 420 | .reveal.slide .slides > section:not([data-transition]).past { 421 | -webkit-transform: translate(-150%, 0); 422 | transform: translate(-150%, 0); } 423 | 424 | .reveal .slides > section[data-transition=slide].future, 425 | .reveal .slides > section[data-transition~=slide-in].future, 426 | .reveal.slide .slides > section:not([data-transition]).future { 427 | -webkit-transform: translate(150%, 0); 428 | transform: translate(150%, 0); } 429 | 430 | .reveal .slides > section > section[data-transition=slide].past, 431 | .reveal .slides > section > section[data-transition~=slide-out].past, 432 | .reveal.slide .slides > section > section:not([data-transition]).past { 433 | -webkit-transform: translate(0, -150%); 434 | transform: translate(0, -150%); } 435 | 436 | .reveal .slides > section > section[data-transition=slide].future, 437 | .reveal .slides > section > section[data-transition~=slide-in].future, 438 | .reveal.slide .slides > section > section:not([data-transition]).future { 439 | -webkit-transform: translate(0, 150%); 440 | transform: translate(0, 150%); } 441 | 442 | .reveal.linear section { 443 | -webkit-backface-visibility: hidden; 444 | backface-visibility: hidden; } 445 | 446 | .reveal .slides > section[data-transition=linear].past, 447 | .reveal .slides > section[data-transition~=linear-out].past, 448 | .reveal.linear .slides > section:not([data-transition]).past { 449 | -webkit-transform: translate(-150%, 0); 450 | transform: translate(-150%, 0); } 451 | 452 | .reveal .slides > section[data-transition=linear].future, 453 | .reveal .slides > section[data-transition~=linear-in].future, 454 | .reveal.linear .slides > section:not([data-transition]).future { 455 | -webkit-transform: translate(150%, 0); 456 | transform: translate(150%, 0); } 457 | 458 | .reveal .slides > section > section[data-transition=linear].past, 459 | .reveal .slides > section > section[data-transition~=linear-out].past, 460 | .reveal.linear .slides > section > section:not([data-transition]).past { 461 | -webkit-transform: translate(0, -150%); 462 | transform: translate(0, -150%); } 463 | 464 | .reveal .slides > section > section[data-transition=linear].future, 465 | .reveal .slides > section > section[data-transition~=linear-in].future, 466 | .reveal.linear .slides > section > section:not([data-transition]).future { 467 | -webkit-transform: translate(0, 150%); 468 | transform: translate(0, 150%); } 469 | 470 | /********************************************* 471 | * CONVEX TRANSITION 472 | * Aliased 'default' for backwards compatibility 473 | *********************************************/ 474 | .reveal .slides section[data-transition=default].stack, 475 | .reveal.default .slides section.stack { 476 | -webkit-transform-style: preserve-3d; 477 | transform-style: preserve-3d; } 478 | 479 | .reveal .slides > section[data-transition=default].past, 480 | .reveal .slides > section[data-transition~=default-out].past, 481 | .reveal.default .slides > section:not([data-transition]).past { 482 | -webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); 483 | transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); } 484 | 485 | .reveal .slides > section[data-transition=default].future, 486 | .reveal .slides > section[data-transition~=default-in].future, 487 | .reveal.default .slides > section:not([data-transition]).future { 488 | -webkit-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0); 489 | transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0); } 490 | 491 | .reveal .slides > section > section[data-transition=default].past, 492 | .reveal .slides > section > section[data-transition~=default-out].past, 493 | .reveal.default .slides > section > section:not([data-transition]).past { 494 | -webkit-transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0); 495 | transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0); } 496 | 497 | .reveal .slides > section > section[data-transition=default].future, 498 | .reveal .slides > section > section[data-transition~=default-in].future, 499 | .reveal.default .slides > section > section:not([data-transition]).future { 500 | -webkit-transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0); 501 | transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0); } 502 | 503 | .reveal .slides section[data-transition=convex].stack, 504 | .reveal.convex .slides section.stack { 505 | -webkit-transform-style: preserve-3d; 506 | transform-style: preserve-3d; } 507 | 508 | .reveal .slides > section[data-transition=convex].past, 509 | .reveal .slides > section[data-transition~=convex-out].past, 510 | .reveal.convex .slides > section:not([data-transition]).past { 511 | -webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); 512 | transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); } 513 | 514 | .reveal .slides > section[data-transition=convex].future, 515 | .reveal .slides > section[data-transition~=convex-in].future, 516 | .reveal.convex .slides > section:not([data-transition]).future { 517 | -webkit-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0); 518 | transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0); } 519 | 520 | .reveal .slides > section > section[data-transition=convex].past, 521 | .reveal .slides > section > section[data-transition~=convex-out].past, 522 | .reveal.convex .slides > section > section:not([data-transition]).past { 523 | -webkit-transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0); 524 | transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0); } 525 | 526 | .reveal .slides > section > section[data-transition=convex].future, 527 | .reveal .slides > section > section[data-transition~=convex-in].future, 528 | .reveal.convex .slides > section > section:not([data-transition]).future { 529 | -webkit-transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0); 530 | transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0); } 531 | 532 | /********************************************* 533 | * CONCAVE TRANSITION 534 | *********************************************/ 535 | .reveal .slides section[data-transition=concave].stack, 536 | .reveal.concave .slides section.stack { 537 | -webkit-transform-style: preserve-3d; 538 | transform-style: preserve-3d; } 539 | 540 | .reveal .slides > section[data-transition=concave].past, 541 | .reveal .slides > section[data-transition~=concave-out].past, 542 | .reveal.concave .slides > section:not([data-transition]).past { 543 | -webkit-transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0); 544 | transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0); } 545 | 546 | .reveal .slides > section[data-transition=concave].future, 547 | .reveal .slides > section[data-transition~=concave-in].future, 548 | .reveal.concave .slides > section:not([data-transition]).future { 549 | -webkit-transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0); 550 | transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0); } 551 | 552 | .reveal .slides > section > section[data-transition=concave].past, 553 | .reveal .slides > section > section[data-transition~=concave-out].past, 554 | .reveal.concave .slides > section > section:not([data-transition]).past { 555 | -webkit-transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0); 556 | transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0); } 557 | 558 | .reveal .slides > section > section[data-transition=concave].future, 559 | .reveal .slides > section > section[data-transition~=concave-in].future, 560 | .reveal.concave .slides > section > section:not([data-transition]).future { 561 | -webkit-transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0); 562 | transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0); } 563 | 564 | /********************************************* 565 | * ZOOM TRANSITION 566 | *********************************************/ 567 | .reveal .slides section[data-transition=zoom], 568 | .reveal.zoom .slides section:not([data-transition]) { 569 | -webkit-transition-timing-function: ease; 570 | transition-timing-function: ease; } 571 | 572 | .reveal .slides > section[data-transition=zoom].past, 573 | .reveal .slides > section[data-transition~=zoom-out].past, 574 | .reveal.zoom .slides > section:not([data-transition]).past { 575 | visibility: hidden; 576 | -webkit-transform: scale(16); 577 | transform: scale(16); } 578 | 579 | .reveal .slides > section[data-transition=zoom].future, 580 | .reveal .slides > section[data-transition~=zoom-in].future, 581 | .reveal.zoom .slides > section:not([data-transition]).future { 582 | visibility: hidden; 583 | -webkit-transform: scale(0.2); 584 | transform: scale(0.2); } 585 | 586 | .reveal .slides > section > section[data-transition=zoom].past, 587 | .reveal .slides > section > section[data-transition~=zoom-out].past, 588 | .reveal.zoom .slides > section > section:not([data-transition]).past { 589 | -webkit-transform: translate(0, -150%); 590 | transform: translate(0, -150%); } 591 | 592 | .reveal .slides > section > section[data-transition=zoom].future, 593 | .reveal .slides > section > section[data-transition~=zoom-in].future, 594 | .reveal.zoom .slides > section > section:not([data-transition]).future { 595 | -webkit-transform: translate(0, 150%); 596 | transform: translate(0, 150%); } 597 | 598 | /********************************************* 599 | * CUBE TRANSITION 600 | * 601 | * WARNING: 602 | * this is deprecated and will be removed in a 603 | * future version. 604 | *********************************************/ 605 | .reveal.cube .slides { 606 | -webkit-perspective: 1300px; 607 | perspective: 1300px; } 608 | 609 | .reveal.cube .slides section { 610 | padding: 30px; 611 | min-height: 700px; 612 | -webkit-backface-visibility: hidden; 613 | backface-visibility: hidden; 614 | box-sizing: border-box; 615 | -webkit-transform-style: preserve-3d; 616 | transform-style: preserve-3d; } 617 | 618 | .reveal.center.cube .slides section { 619 | min-height: 0; } 620 | 621 | .reveal.cube .slides section:not(.stack):before { 622 | content: ''; 623 | position: absolute; 624 | display: block; 625 | width: 100%; 626 | height: 100%; 627 | left: 0; 628 | top: 0; 629 | background: rgba(0, 0, 0, 0.1); 630 | border-radius: 4px; 631 | -webkit-transform: translateZ(-20px); 632 | transform: translateZ(-20px); } 633 | 634 | .reveal.cube .slides section:not(.stack):after { 635 | content: ''; 636 | position: absolute; 637 | display: block; 638 | width: 90%; 639 | height: 30px; 640 | left: 5%; 641 | bottom: 0; 642 | background: none; 643 | z-index: 1; 644 | border-radius: 4px; 645 | box-shadow: 0px 95px 25px rgba(0, 0, 0, 0.2); 646 | -webkit-transform: translateZ(-90px) rotateX(65deg); 647 | transform: translateZ(-90px) rotateX(65deg); } 648 | 649 | .reveal.cube .slides > section.stack { 650 | padding: 0; 651 | background: none; } 652 | 653 | .reveal.cube .slides > section.past { 654 | -webkit-transform-origin: 100% 0%; 655 | transform-origin: 100% 0%; 656 | -webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg); 657 | transform: translate3d(-100%, 0, 0) rotateY(-90deg); } 658 | 659 | .reveal.cube .slides > section.future { 660 | -webkit-transform-origin: 0% 0%; 661 | transform-origin: 0% 0%; 662 | -webkit-transform: translate3d(100%, 0, 0) rotateY(90deg); 663 | transform: translate3d(100%, 0, 0) rotateY(90deg); } 664 | 665 | .reveal.cube .slides > section > section.past { 666 | -webkit-transform-origin: 0% 100%; 667 | transform-origin: 0% 100%; 668 | -webkit-transform: translate3d(0, -100%, 0) rotateX(90deg); 669 | transform: translate3d(0, -100%, 0) rotateX(90deg); } 670 | 671 | .reveal.cube .slides > section > section.future { 672 | -webkit-transform-origin: 0% 0%; 673 | transform-origin: 0% 0%; 674 | -webkit-transform: translate3d(0, 100%, 0) rotateX(-90deg); 675 | transform: translate3d(0, 100%, 0) rotateX(-90deg); } 676 | 677 | /********************************************* 678 | * PAGE TRANSITION 679 | * 680 | * WARNING: 681 | * this is deprecated and will be removed in a 682 | * future version. 683 | *********************************************/ 684 | .reveal.page .slides { 685 | -webkit-perspective-origin: 0% 50%; 686 | perspective-origin: 0% 50%; 687 | -webkit-perspective: 3000px; 688 | perspective: 3000px; } 689 | 690 | .reveal.page .slides section { 691 | padding: 30px; 692 | min-height: 700px; 693 | box-sizing: border-box; 694 | -webkit-transform-style: preserve-3d; 695 | transform-style: preserve-3d; } 696 | 697 | .reveal.page .slides section.past { 698 | z-index: 12; } 699 | 700 | .reveal.page .slides section:not(.stack):before { 701 | content: ''; 702 | position: absolute; 703 | display: block; 704 | width: 100%; 705 | height: 100%; 706 | left: 0; 707 | top: 0; 708 | background: rgba(0, 0, 0, 0.1); 709 | -webkit-transform: translateZ(-20px); 710 | transform: translateZ(-20px); } 711 | 712 | .reveal.page .slides section:not(.stack):after { 713 | content: ''; 714 | position: absolute; 715 | display: block; 716 | width: 90%; 717 | height: 30px; 718 | left: 5%; 719 | bottom: 0; 720 | background: none; 721 | z-index: 1; 722 | border-radius: 4px; 723 | box-shadow: 0px 95px 25px rgba(0, 0, 0, 0.2); 724 | -webkit-transform: translateZ(-90px) rotateX(65deg); } 725 | 726 | .reveal.page .slides > section.stack { 727 | padding: 0; 728 | background: none; } 729 | 730 | .reveal.page .slides > section.past { 731 | -webkit-transform-origin: 0% 0%; 732 | transform-origin: 0% 0%; 733 | -webkit-transform: translate3d(-40%, 0, 0) rotateY(-80deg); 734 | transform: translate3d(-40%, 0, 0) rotateY(-80deg); } 735 | 736 | .reveal.page .slides > section.future { 737 | -webkit-transform-origin: 100% 0%; 738 | transform-origin: 100% 0%; 739 | -webkit-transform: translate3d(0, 0, 0); 740 | transform: translate3d(0, 0, 0); } 741 | 742 | .reveal.page .slides > section > section.past { 743 | -webkit-transform-origin: 0% 0%; 744 | transform-origin: 0% 0%; 745 | -webkit-transform: translate3d(0, -40%, 0) rotateX(80deg); 746 | transform: translate3d(0, -40%, 0) rotateX(80deg); } 747 | 748 | .reveal.page .slides > section > section.future { 749 | -webkit-transform-origin: 0% 100%; 750 | transform-origin: 0% 100%; 751 | -webkit-transform: translate3d(0, 0, 0); 752 | transform: translate3d(0, 0, 0); } 753 | 754 | /********************************************* 755 | * FADE TRANSITION 756 | *********************************************/ 757 | .reveal .slides section[data-transition=fade], 758 | .reveal.fade .slides section:not([data-transition]), 759 | .reveal.fade .slides > section > section:not([data-transition]) { 760 | -webkit-transform: none; 761 | transform: none; 762 | -webkit-transition: opacity 0.5s; 763 | transition: opacity 0.5s; } 764 | 765 | .reveal.fade.overview .slides section, 766 | .reveal.fade.overview .slides > section > section { 767 | -webkit-transition: none; 768 | transition: none; } 769 | 770 | /********************************************* 771 | * NO TRANSITION 772 | *********************************************/ 773 | .reveal .slides section[data-transition=none], 774 | .reveal.none .slides section:not([data-transition]) { 775 | -webkit-transform: none; 776 | transform: none; 777 | -webkit-transition: none; 778 | transition: none; } 779 | 780 | /********************************************* 781 | * PAUSED MODE 782 | *********************************************/ 783 | .reveal .pause-overlay { 784 | position: absolute; 785 | top: 0; 786 | left: 0; 787 | width: 100%; 788 | height: 100%; 789 | background: black; 790 | visibility: hidden; 791 | opacity: 0; 792 | z-index: 100; 793 | -webkit-transition: all 1s ease; 794 | transition: all 1s ease; } 795 | 796 | .reveal.paused .pause-overlay { 797 | visibility: visible; 798 | opacity: 1; } 799 | 800 | /********************************************* 801 | * FALLBACK 802 | *********************************************/ 803 | .no-transforms { 804 | overflow-y: auto; } 805 | 806 | .no-transforms .reveal .slides { 807 | position: relative; 808 | width: 80%; 809 | height: auto !important; 810 | top: 0; 811 | left: 50%; 812 | margin: 0; 813 | text-align: center; } 814 | 815 | .no-transforms .reveal .controls, 816 | .no-transforms .reveal .progress { 817 | display: none !important; } 818 | 819 | .no-transforms .reveal .slides section { 820 | display: block !important; 821 | opacity: 1 !important; 822 | position: relative !important; 823 | height: auto; 824 | min-height: 0; 825 | top: 0; 826 | left: -50%; 827 | margin: 70px 0; 828 | -webkit-transform: none; 829 | transform: none; } 830 | 831 | .no-transforms .reveal .slides section section { 832 | left: 0; } 833 | 834 | .reveal .no-transition, 835 | .reveal .no-transition * { 836 | -webkit-transition: none !important; 837 | transition: none !important; } 838 | 839 | /********************************************* 840 | * PER-SLIDE BACKGROUNDS 841 | *********************************************/ 842 | .reveal .backgrounds { 843 | position: absolute; 844 | width: 100%; 845 | height: 100%; 846 | top: 0; 847 | left: 0; 848 | -webkit-perspective: 600px; 849 | perspective: 600px; } 850 | 851 | .reveal .slide-background { 852 | display: none; 853 | position: absolute; 854 | width: 100%; 855 | height: 100%; 856 | opacity: 0; 857 | visibility: hidden; 858 | overflow: hidden; 859 | background-color: transparent; 860 | background-position: 50% 50%; 861 | background-repeat: no-repeat; 862 | background-size: cover; 863 | -webkit-transition: all 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 864 | transition: all 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } 865 | 866 | .reveal .slide-background.stack { 867 | display: block; } 868 | 869 | .reveal .slide-background.present { 870 | opacity: 1; 871 | visibility: visible; 872 | z-index: 2; } 873 | 874 | .print-pdf .reveal .slide-background { 875 | opacity: 1 !important; 876 | visibility: visible !important; } 877 | 878 | /* Video backgrounds */ 879 | .reveal .slide-background video { 880 | position: absolute; 881 | width: 100%; 882 | height: 100%; 883 | max-width: none; 884 | max-height: none; 885 | top: 0; 886 | left: 0; 887 | -o-object-fit: cover; 888 | object-fit: cover; } 889 | 890 | .reveal .slide-background[data-background-size="contain"] video { 891 | -o-object-fit: contain; 892 | object-fit: contain; } 893 | 894 | /* Immediate transition style */ 895 | .reveal[data-background-transition=none] > .backgrounds .slide-background, 896 | .reveal > .backgrounds .slide-background[data-background-transition=none] { 897 | -webkit-transition: none; 898 | transition: none; } 899 | 900 | /* Slide */ 901 | .reveal[data-background-transition=slide] > .backgrounds .slide-background, 902 | .reveal > .backgrounds .slide-background[data-background-transition=slide] { 903 | opacity: 1; 904 | -webkit-backface-visibility: hidden; 905 | backface-visibility: hidden; } 906 | 907 | .reveal[data-background-transition=slide] > .backgrounds .slide-background.past, 908 | .reveal > .backgrounds .slide-background.past[data-background-transition=slide] { 909 | -webkit-transform: translate(-100%, 0); 910 | transform: translate(-100%, 0); } 911 | 912 | .reveal[data-background-transition=slide] > .backgrounds .slide-background.future, 913 | .reveal > .backgrounds .slide-background.future[data-background-transition=slide] { 914 | -webkit-transform: translate(100%, 0); 915 | transform: translate(100%, 0); } 916 | 917 | .reveal[data-background-transition=slide] > .backgrounds .slide-background > .slide-background.past, 918 | .reveal > .backgrounds .slide-background > .slide-background.past[data-background-transition=slide] { 919 | -webkit-transform: translate(0, -100%); 920 | transform: translate(0, -100%); } 921 | 922 | .reveal[data-background-transition=slide] > .backgrounds .slide-background > .slide-background.future, 923 | .reveal > .backgrounds .slide-background > .slide-background.future[data-background-transition=slide] { 924 | -webkit-transform: translate(0, 100%); 925 | transform: translate(0, 100%); } 926 | 927 | /* Convex */ 928 | .reveal[data-background-transition=convex] > .backgrounds .slide-background.past, 929 | .reveal > .backgrounds .slide-background.past[data-background-transition=convex] { 930 | opacity: 0; 931 | -webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); 932 | transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); } 933 | 934 | .reveal[data-background-transition=convex] > .backgrounds .slide-background.future, 935 | .reveal > .backgrounds .slide-background.future[data-background-transition=convex] { 936 | opacity: 0; 937 | -webkit-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0); 938 | transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0); } 939 | 940 | .reveal[data-background-transition=convex] > .backgrounds .slide-background > .slide-background.past, 941 | .reveal > .backgrounds .slide-background > .slide-background.past[data-background-transition=convex] { 942 | opacity: 0; 943 | -webkit-transform: translate3d(0, -100%, 0) rotateX(90deg) translate3d(0, -100%, 0); 944 | transform: translate3d(0, -100%, 0) rotateX(90deg) translate3d(0, -100%, 0); } 945 | 946 | .reveal[data-background-transition=convex] > .backgrounds .slide-background > .slide-background.future, 947 | .reveal > .backgrounds .slide-background > .slide-background.future[data-background-transition=convex] { 948 | opacity: 0; 949 | -webkit-transform: translate3d(0, 100%, 0) rotateX(-90deg) translate3d(0, 100%, 0); 950 | transform: translate3d(0, 100%, 0) rotateX(-90deg) translate3d(0, 100%, 0); } 951 | 952 | /* Concave */ 953 | .reveal[data-background-transition=concave] > .backgrounds .slide-background.past, 954 | .reveal > .backgrounds .slide-background.past[data-background-transition=concave] { 955 | opacity: 0; 956 | -webkit-transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0); 957 | transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0); } 958 | 959 | .reveal[data-background-transition=concave] > .backgrounds .slide-background.future, 960 | .reveal > .backgrounds .slide-background.future[data-background-transition=concave] { 961 | opacity: 0; 962 | -webkit-transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0); 963 | transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0); } 964 | 965 | .reveal[data-background-transition=concave] > .backgrounds .slide-background > .slide-background.past, 966 | .reveal > .backgrounds .slide-background > .slide-background.past[data-background-transition=concave] { 967 | opacity: 0; 968 | -webkit-transform: translate3d(0, -100%, 0) rotateX(-90deg) translate3d(0, -100%, 0); 969 | transform: translate3d(0, -100%, 0) rotateX(-90deg) translate3d(0, -100%, 0); } 970 | 971 | .reveal[data-background-transition=concave] > .backgrounds .slide-background > .slide-background.future, 972 | .reveal > .backgrounds .slide-background > .slide-background.future[data-background-transition=concave] { 973 | opacity: 0; 974 | -webkit-transform: translate3d(0, 100%, 0) rotateX(90deg) translate3d(0, 100%, 0); 975 | transform: translate3d(0, 100%, 0) rotateX(90deg) translate3d(0, 100%, 0); } 976 | 977 | /* Zoom */ 978 | .reveal[data-background-transition=zoom] > .backgrounds .slide-background, 979 | .reveal > .backgrounds .slide-background[data-background-transition=zoom] { 980 | -webkit-transition-timing-function: ease; 981 | transition-timing-function: ease; } 982 | 983 | .reveal[data-background-transition=zoom] > .backgrounds .slide-background.past, 984 | .reveal > .backgrounds .slide-background.past[data-background-transition=zoom] { 985 | opacity: 0; 986 | visibility: hidden; 987 | -webkit-transform: scale(16); 988 | transform: scale(16); } 989 | 990 | .reveal[data-background-transition=zoom] > .backgrounds .slide-background.future, 991 | .reveal > .backgrounds .slide-background.future[data-background-transition=zoom] { 992 | opacity: 0; 993 | visibility: hidden; 994 | -webkit-transform: scale(0.2); 995 | transform: scale(0.2); } 996 | 997 | .reveal[data-background-transition=zoom] > .backgrounds .slide-background > .slide-background.past, 998 | .reveal > .backgrounds .slide-background > .slide-background.past[data-background-transition=zoom] { 999 | opacity: 0; 1000 | visibility: hidden; 1001 | -webkit-transform: scale(16); 1002 | transform: scale(16); } 1003 | 1004 | .reveal[data-background-transition=zoom] > .backgrounds .slide-background > .slide-background.future, 1005 | .reveal > .backgrounds .slide-background > .slide-background.future[data-background-transition=zoom] { 1006 | opacity: 0; 1007 | visibility: hidden; 1008 | -webkit-transform: scale(0.2); 1009 | transform: scale(0.2); } 1010 | 1011 | /* Global transition speed settings */ 1012 | .reveal[data-transition-speed="fast"] > .backgrounds .slide-background { 1013 | -webkit-transition-duration: 400ms; 1014 | transition-duration: 400ms; } 1015 | 1016 | .reveal[data-transition-speed="slow"] > .backgrounds .slide-background { 1017 | -webkit-transition-duration: 1200ms; 1018 | transition-duration: 1200ms; } 1019 | 1020 | /********************************************* 1021 | * OVERVIEW 1022 | *********************************************/ 1023 | .reveal.overview { 1024 | -webkit-perspective-origin: 50% 50%; 1025 | perspective-origin: 50% 50%; 1026 | -webkit-perspective: 700px; 1027 | perspective: 700px; } 1028 | .reveal.overview .slides { 1029 | -moz-transform-style: preserve-3d; } 1030 | .reveal.overview .slides section { 1031 | height: 100%; 1032 | top: 0 !important; 1033 | opacity: 1 !important; 1034 | overflow: hidden; 1035 | visibility: visible !important; 1036 | cursor: pointer; 1037 | box-sizing: border-box; } 1038 | .reveal.overview .slides section:hover, 1039 | .reveal.overview .slides section.present { 1040 | outline: 10px solid rgba(150, 150, 150, 0.4); 1041 | outline-offset: 10px; } 1042 | .reveal.overview .slides section .fragment { 1043 | opacity: 1; 1044 | -webkit-transition: none; 1045 | transition: none; } 1046 | .reveal.overview .slides section:after, 1047 | .reveal.overview .slides section:before { 1048 | display: none !important; } 1049 | .reveal.overview .slides > section.stack { 1050 | padding: 0; 1051 | top: 0 !important; 1052 | background: none; 1053 | outline: none; 1054 | overflow: visible; } 1055 | .reveal.overview .backgrounds { 1056 | -webkit-perspective: inherit; 1057 | perspective: inherit; 1058 | -moz-transform-style: preserve-3d; } 1059 | .reveal.overview .backgrounds .slide-background { 1060 | opacity: 1; 1061 | visibility: visible; 1062 | outline: 10px solid rgba(150, 150, 150, 0.1); 1063 | outline-offset: 10px; } 1064 | .reveal.overview .backgrounds .slide-background.stack { 1065 | overflow: visible; } 1066 | 1067 | .reveal.overview .slides section, 1068 | .reveal.overview-deactivating .slides section { 1069 | -webkit-transition: none; 1070 | transition: none; } 1071 | 1072 | .reveal.overview .backgrounds .slide-background, 1073 | .reveal.overview-deactivating .backgrounds .slide-background { 1074 | -webkit-transition: none; 1075 | transition: none; } 1076 | 1077 | /********************************************* 1078 | * RTL SUPPORT 1079 | *********************************************/ 1080 | .reveal.rtl .slides, 1081 | .reveal.rtl .slides h1, 1082 | .reveal.rtl .slides h2, 1083 | .reveal.rtl .slides h3, 1084 | .reveal.rtl .slides h4, 1085 | .reveal.rtl .slides h5, 1086 | .reveal.rtl .slides h6 { 1087 | direction: rtl; 1088 | font-family: sans-serif; } 1089 | 1090 | .reveal.rtl pre, 1091 | .reveal.rtl code { 1092 | direction: ltr; } 1093 | 1094 | .reveal.rtl ol, 1095 | .reveal.rtl ul { 1096 | text-align: right; } 1097 | 1098 | .reveal.rtl .progress span { 1099 | float: right; } 1100 | 1101 | /********************************************* 1102 | * PARALLAX BACKGROUND 1103 | *********************************************/ 1104 | .reveal.has-parallax-background .backgrounds { 1105 | -webkit-transition: all 0.8s ease; 1106 | transition: all 0.8s ease; } 1107 | 1108 | /* Global transition speed settings */ 1109 | .reveal.has-parallax-background[data-transition-speed="fast"] .backgrounds { 1110 | -webkit-transition-duration: 400ms; 1111 | transition-duration: 400ms; } 1112 | 1113 | .reveal.has-parallax-background[data-transition-speed="slow"] .backgrounds { 1114 | -webkit-transition-duration: 1200ms; 1115 | transition-duration: 1200ms; } 1116 | 1117 | /********************************************* 1118 | * LINK PREVIEW OVERLAY 1119 | *********************************************/ 1120 | .reveal .overlay { 1121 | position: absolute; 1122 | top: 0; 1123 | left: 0; 1124 | width: 100%; 1125 | height: 100%; 1126 | z-index: 1000; 1127 | background: rgba(0, 0, 0, 0.9); 1128 | opacity: 0; 1129 | visibility: hidden; 1130 | -webkit-transition: all 0.3s ease; 1131 | transition: all 0.3s ease; } 1132 | 1133 | .reveal .overlay.visible { 1134 | opacity: 1; 1135 | visibility: visible; } 1136 | 1137 | .reveal .overlay .spinner { 1138 | position: absolute; 1139 | display: block; 1140 | top: 50%; 1141 | left: 50%; 1142 | width: 32px; 1143 | height: 32px; 1144 | margin: -16px 0 0 -16px; 1145 | z-index: 10; 1146 | background-image: url(data:image/gif;base64,R0lGODlhIAAgAPMAAJmZmf%2F%2F%2F6%2Bvr8nJybW1tcDAwOjo6Nvb26ioqKOjo7Ozs%2FLy8vz8%2FAAAAAAAAAAAACH%2FC05FVFNDQVBFMi4wAwEAAAAh%2FhpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh%2BQQJCgAAACwAAAAAIAAgAAAE5xDISWlhperN52JLhSSdRgwVo1ICQZRUsiwHpTJT4iowNS8vyW2icCF6k8HMMBkCEDskxTBDAZwuAkkqIfxIQyhBQBFvAQSDITM5VDW6XNE4KagNh6Bgwe60smQUB3d4Rz1ZBApnFASDd0hihh12BkE9kjAJVlycXIg7CQIFA6SlnJ87paqbSKiKoqusnbMdmDC2tXQlkUhziYtyWTxIfy6BE8WJt5YJvpJivxNaGmLHT0VnOgSYf0dZXS7APdpB309RnHOG5gDqXGLDaC457D1zZ%2FV%2FnmOM82XiHRLYKhKP1oZmADdEAAAh%2BQQJCgAAACwAAAAAIAAgAAAE6hDISWlZpOrNp1lGNRSdRpDUolIGw5RUYhhHukqFu8DsrEyqnWThGvAmhVlteBvojpTDDBUEIFwMFBRAmBkSgOrBFZogCASwBDEY%2FCZSg7GSE0gSCjQBMVG023xWBhklAnoEdhQEfyNqMIcKjhRsjEdnezB%2BA4k8gTwJhFuiW4dokXiloUepBAp5qaKpp6%2BHo7aWW54wl7obvEe0kRuoplCGepwSx2jJvqHEmGt6whJpGpfJCHmOoNHKaHx61WiSR92E4lbFoq%2BB6QDtuetcaBPnW6%2BO7wDHpIiK9SaVK5GgV543tzjgGcghAgAh%2BQQJCgAAACwAAAAAIAAgAAAE7hDISSkxpOrN5zFHNWRdhSiVoVLHspRUMoyUakyEe8PTPCATW9A14E0UvuAKMNAZKYUZCiBMuBakSQKG8G2FzUWox2AUtAQFcBKlVQoLgQReZhQlCIJesQXI5B0CBnUMOxMCenoCfTCEWBsJColTMANldx15BGs8B5wlCZ9Po6OJkwmRpnqkqnuSrayqfKmqpLajoiW5HJq7FL1Gr2mMMcKUMIiJgIemy7xZtJsTmsM4xHiKv5KMCXqfyUCJEonXPN2rAOIAmsfB3uPoAK%2B%2BG%2Bw48edZPK%2BM6hLJpQg484enXIdQFSS1u6UhksENEQAAIfkECQoAAAAsAAAAACAAIAAABOcQyEmpGKLqzWcZRVUQnZYg1aBSh2GUVEIQ2aQOE%2BG%2BcD4ntpWkZQj1JIiZIogDFFyHI0UxQwFugMSOFIPJftfVAEoZLBbcLEFhlQiqGp1Vd140AUklUN3eCA51C1EWMzMCezCBBmkxVIVHBWd3HHl9JQOIJSdSnJ0TDKChCwUJjoWMPaGqDKannasMo6WnM562R5YluZRwur0wpgqZE7NKUm%2BFNRPIhjBJxKZteWuIBMN4zRMIVIhffcgojwCF117i4nlLnY5ztRLsnOk%2BaV%2BoJY7V7m76PdkS4trKcdg0Zc0tTcKkRAAAIfkECQoAAAAsAAAAACAAIAAABO4QyEkpKqjqzScpRaVkXZWQEximw1BSCUEIlDohrft6cpKCk5xid5MNJTaAIkekKGQkWyKHkvhKsR7ARmitkAYDYRIbUQRQjWBwJRzChi9CRlBcY1UN4g0%2FVNB0AlcvcAYHRyZPdEQFYV8ccwR5HWxEJ02YmRMLnJ1xCYp0Y5idpQuhopmmC2KgojKasUQDk5BNAwwMOh2RtRq5uQuPZKGIJQIGwAwGf6I0JXMpC8C7kXWDBINFMxS4DKMAWVWAGYsAdNqW5uaRxkSKJOZKaU3tPOBZ4DuK2LATgJhkPJMgTwKCdFjyPHEnKxFCDhEAACH5BAkKAAAALAAAAAAgACAAAATzEMhJaVKp6s2nIkolIJ2WkBShpkVRWqqQrhLSEu9MZJKK9y1ZrqYK9WiClmvoUaF8gIQSNeF1Er4MNFn4SRSDARWroAIETg1iVwuHjYB1kYc1mwruwXKC9gmsJXliGxc%2BXiUCby9ydh1sOSdMkpMTBpaXBzsfhoc5l58Gm5yToAaZhaOUqjkDgCWNHAULCwOLaTmzswadEqggQwgHuQsHIoZCHQMMQgQGubVEcxOPFAcMDAYUA85eWARmfSRQCdcMe0zeP1AAygwLlJtPNAAL19DARdPzBOWSm1brJBi45soRAWQAAkrQIykShQ9wVhHCwCQCACH5BAkKAAAALAAAAAAgACAAAATrEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq%2BE71SRQeyqUToLA7VxF0JDyIQh%2FMVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiRMDjI0Fd30%2FiI2UA5GSS5UDj2l6NoqgOgN4gksEBgYFf0FDqKgHnyZ9OX8HrgYHdHpcHQULXAS2qKpENRg7eAMLC7kTBaixUYFkKAzWAAnLC7FLVxLWDBLKCwaKTULgEwbLA4hJtOkSBNqITT3xEgfLpBtzE%2FjiuL04RGEBgwWhShRgQExHBAAh%2BQQJCgAAACwAAAAAIAAgAAAE7xDISWlSqerNpyJKhWRdlSAVoVLCWk6JKlAqAavhO9UkUHsqlE6CwO1cRdCQ8iEIfzFVTzLdRAmZX3I2SfZiCqGk5dTESJeaOAlClzsJsqwiJwiqnFrb2nS9kmIcgEsjQydLiIlHehhpejaIjzh9eomSjZR%2BipslWIRLAgMDOR2DOqKogTB9pCUJBagDBXR6XB0EBkIIsaRsGGMMAxoDBgYHTKJiUYEGDAzHC9EACcUGkIgFzgwZ0QsSBcXHiQvOwgDdEwfFs0sDzt4S6BK4xYjkDOzn0unFeBzOBijIm1Dgmg5YFQwsCMjp1oJ8LyIAACH5BAkKAAAALAAAAAAgACAAAATwEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq%2BE71SRQeyqUToLA7VxF0JDyIQh%2FMVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiUd6GGl6NoiPOH16iZKNlH6KmyWFOggHhEEvAwwMA0N9GBsEC6amhnVcEwavDAazGwIDaH1ipaYLBUTCGgQDA8NdHz0FpqgTBwsLqAbWAAnIA4FWKdMLGdYGEgraigbT0OITBcg5QwPT4xLrROZL6AuQAPUS7bxLpoWidY0JtxLHKhwwMJBTHgPKdEQAACH5BAkKAAAALAAAAAAgACAAAATrEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq%2BE71SRQeyqUToLA7VxF0JDyIQh%2FMVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiUd6GAULDJCRiXo1CpGXDJOUjY%2BYip9DhToJA4RBLwMLCwVDfRgbBAaqqoZ1XBMHswsHtxtFaH1iqaoGNgAIxRpbFAgfPQSqpbgGBqUD1wBXeCYp1AYZ19JJOYgH1KwA4UBvQwXUBxPqVD9L3sbp2BNk2xvvFPJd%2BMFCN6HAAIKgNggY0KtEBAAh%2BQQJCgAAACwAAAAAIAAgAAAE6BDISWlSqerNpyJKhWRdlSAVoVLCWk6JKlAqAavhO9UkUHsqlE6CwO1cRdCQ8iEIfzFVTzLdRAmZX3I2SfYIDMaAFdTESJeaEDAIMxYFqrOUaNW4E4ObYcCXaiBVEgULe0NJaxxtYksjh2NLkZISgDgJhHthkpU4mW6blRiYmZOlh4JWkDqILwUGBnE6TYEbCgevr0N1gH4At7gHiRpFaLNrrq8HNgAJA70AWxQIH1%2BvsYMDAzZQPC9VCNkDWUhGkuE5PxJNwiUK4UfLzOlD4WvzAHaoG9nxPi5d%2BjYUqfAhhykOFwJWiAAAIfkECQoAAAAsAAAAACAAIAAABPAQyElpUqnqzaciSoVkXVUMFaFSwlpOCcMYlErAavhOMnNLNo8KsZsMZItJEIDIFSkLGQoQTNhIsFehRww2CQLKF0tYGKYSg%2BygsZIuNqJksKgbfgIGepNo2cIUB3V1B3IvNiBYNQaDSTtfhhx0CwVPI0UJe0%2Bbm4g5VgcGoqOcnjmjqDSdnhgEoamcsZuXO1aWQy8KAwOAuTYYGwi7w5h%2BKr0SJ8MFihpNbx%2B4Erq7BYBuzsdiH1jCAzoSfl0rVirNbRXlBBlLX%2BBP0XJLAPGzTkAuAOqb0WT5AH7OcdCm5B8TgRwSRKIHQtaLCwg1RAAAOwAAAAAAAAAAAA%3D%3D); 1147 | visibility: visible; 1148 | opacity: 0.6; 1149 | -webkit-transition: all 0.3s ease; 1150 | transition: all 0.3s ease; } 1151 | 1152 | .reveal .overlay header { 1153 | position: absolute; 1154 | left: 0; 1155 | top: 0; 1156 | width: 100%; 1157 | height: 40px; 1158 | z-index: 2; 1159 | border-bottom: 1px solid #222; } 1160 | 1161 | .reveal .overlay header a { 1162 | display: inline-block; 1163 | width: 40px; 1164 | height: 40px; 1165 | line-height: 36px; 1166 | padding: 0 10px; 1167 | float: right; 1168 | opacity: 0.6; 1169 | box-sizing: border-box; } 1170 | 1171 | .reveal .overlay header a:hover { 1172 | opacity: 1; } 1173 | 1174 | .reveal .overlay header a .icon { 1175 | display: inline-block; 1176 | width: 20px; 1177 | height: 20px; 1178 | background-position: 50% 50%; 1179 | background-size: 100%; 1180 | background-repeat: no-repeat; } 1181 | 1182 | .reveal .overlay header a.close .icon { 1183 | background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABkklEQVRYR8WX4VHDMAxG6wnoJrABZQPYBCaBTWAD2g1gE5gg6OOsXuxIlr40d81dfrSJ9V4c2VLK7spHuTJ/5wpM07QXuXc5X0opX2tEJcadjHuV80li/FgxTIEK/5QBCICBD6xEhSMGHgQPgBgLiYVAB1dpSqKDawxTohFw4JSEA3clzgIBPCURwE2JucBR7rhPJJv5OpJwDX+SfDjgx1wACQeJG1aChP9K/IMmdZ8DtESV1WyP3Bt4MwM6sj4NMxMYiqUWHQu4KYA/SYkIjOsm3BXYWMKFDwU2khjCQ4ELJUJ4SmClRArOCmSXGuKma0fYD5CbzHxFpCSGAhfAVSSUGDUk2BWZaff2g6GE15BsBQ9nwmpIGDiyHQddwNTMKkbZaf9fajXQca1EX44puJZUsnY0ObGmITE3GVLCbEhQUjGVt146j6oasWN+49Vph2w1pZ5EansNZqKBm1txbU57iRRcZ86RWMDdWtBJUHBHwoQPi1GV+JCbntmvok7iTX4/Up9mgyTc/FJYDTcndgH/AA5A/CHsyEkVAAAAAElFTkSuQmCC); } 1184 | 1185 | .reveal .overlay header a.external .icon { 1186 | background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAcElEQVRYR+2WSQoAIQwEzf8f7XiOMkUQxUPlGkM3hVmiQfQR9GYnH1SsAQlI4DiBqkCMoNb9y2e90IAEJPAcgdznU9+engMaeJ7Azh5Y1U67gAho4DqBqmB1buAf0MB1AlVBek83ZPkmJMGc1wAR+AAqod/B97TRpQAAAABJRU5ErkJggg==); } 1187 | 1188 | .reveal .overlay .viewport { 1189 | position: absolute; 1190 | display: -webkit-box; 1191 | display: -webkit-flex; 1192 | display: -ms-flexbox; 1193 | display: flex; 1194 | top: 40px; 1195 | right: 0; 1196 | bottom: 0; 1197 | left: 0; } 1198 | 1199 | .reveal .overlay.overlay-preview .viewport iframe { 1200 | width: 100%; 1201 | height: 100%; 1202 | max-width: 100%; 1203 | max-height: 100%; 1204 | border: 0; 1205 | opacity: 0; 1206 | visibility: hidden; 1207 | -webkit-transition: all 0.3s ease; 1208 | transition: all 0.3s ease; } 1209 | 1210 | .reveal .overlay.overlay-preview.loaded .viewport iframe { 1211 | opacity: 1; 1212 | visibility: visible; } 1213 | 1214 | .reveal .overlay.overlay-preview.loaded .viewport-inner { 1215 | position: absolute; 1216 | z-index: -1; 1217 | left: 0; 1218 | top: 45%; 1219 | width: 100%; 1220 | text-align: center; 1221 | letter-spacing: normal; } 1222 | 1223 | .reveal .overlay.overlay-preview .x-frame-error { 1224 | opacity: 0; 1225 | -webkit-transition: opacity 0.3s ease 0.3s; 1226 | transition: opacity 0.3s ease 0.3s; } 1227 | 1228 | .reveal .overlay.overlay-preview.loaded .x-frame-error { 1229 | opacity: 1; } 1230 | 1231 | .reveal .overlay.overlay-preview.loaded .spinner { 1232 | opacity: 0; 1233 | visibility: hidden; 1234 | -webkit-transform: scale(0.2); 1235 | transform: scale(0.2); } 1236 | 1237 | .reveal .overlay.overlay-help .viewport { 1238 | overflow: auto; 1239 | color: #fff; } 1240 | 1241 | .reveal .overlay.overlay-help .viewport .viewport-inner { 1242 | width: 600px; 1243 | margin: auto; 1244 | padding: 20px 20px 80px 20px; 1245 | text-align: center; 1246 | letter-spacing: normal; } 1247 | 1248 | .reveal .overlay.overlay-help .viewport .viewport-inner .title { 1249 | font-size: 20px; } 1250 | 1251 | .reveal .overlay.overlay-help .viewport .viewport-inner table { 1252 | border: 1px solid #fff; 1253 | border-collapse: collapse; 1254 | font-size: 16px; } 1255 | 1256 | .reveal .overlay.overlay-help .viewport .viewport-inner table th, 1257 | .reveal .overlay.overlay-help .viewport .viewport-inner table td { 1258 | width: 200px; 1259 | padding: 14px; 1260 | border: 1px solid #fff; 1261 | vertical-align: middle; } 1262 | 1263 | .reveal .overlay.overlay-help .viewport .viewport-inner table th { 1264 | padding-top: 20px; 1265 | padding-bottom: 20px; } 1266 | 1267 | /********************************************* 1268 | * PLAYBACK COMPONENT 1269 | *********************************************/ 1270 | .reveal .playback { 1271 | position: fixed; 1272 | left: 15px; 1273 | bottom: 20px; 1274 | z-index: 30; 1275 | cursor: pointer; 1276 | -webkit-transition: all 400ms ease; 1277 | transition: all 400ms ease; } 1278 | 1279 | .reveal.overview .playback { 1280 | opacity: 0; 1281 | visibility: hidden; } 1282 | 1283 | /********************************************* 1284 | * ROLLING LINKS 1285 | *********************************************/ 1286 | .reveal .roll { 1287 | display: inline-block; 1288 | line-height: 1.2; 1289 | overflow: hidden; 1290 | vertical-align: top; 1291 | -webkit-perspective: 400px; 1292 | perspective: 400px; 1293 | -webkit-perspective-origin: 50% 50%; 1294 | perspective-origin: 50% 50%; } 1295 | 1296 | .reveal .roll:hover { 1297 | background: none; 1298 | text-shadow: none; } 1299 | 1300 | .reveal .roll span { 1301 | display: block; 1302 | position: relative; 1303 | padding: 0 2px; 1304 | pointer-events: none; 1305 | -webkit-transition: all 400ms ease; 1306 | transition: all 400ms ease; 1307 | -webkit-transform-origin: 50% 0%; 1308 | transform-origin: 50% 0%; 1309 | -webkit-transform-style: preserve-3d; 1310 | transform-style: preserve-3d; 1311 | -webkit-backface-visibility: hidden; 1312 | backface-visibility: hidden; } 1313 | 1314 | .reveal .roll:hover span { 1315 | background: rgba(0, 0, 0, 0.5); 1316 | -webkit-transform: translate3d(0px, 0px, -45px) rotateX(90deg); 1317 | transform: translate3d(0px, 0px, -45px) rotateX(90deg); } 1318 | 1319 | .reveal .roll span:after { 1320 | content: attr(data-title); 1321 | display: block; 1322 | position: absolute; 1323 | left: 0; 1324 | top: 0; 1325 | padding: 0 2px; 1326 | -webkit-backface-visibility: hidden; 1327 | backface-visibility: hidden; 1328 | -webkit-transform-origin: 50% 0%; 1329 | transform-origin: 50% 0%; 1330 | -webkit-transform: translate3d(0px, 110%, 0px) rotateX(-90deg); 1331 | transform: translate3d(0px, 110%, 0px) rotateX(-90deg); } 1332 | 1333 | /********************************************* 1334 | * SPEAKER NOTES 1335 | *********************************************/ 1336 | .reveal aside.notes { 1337 | display: none; } 1338 | 1339 | .reveal .speaker-notes { 1340 | display: none; 1341 | position: absolute; 1342 | width: 70%; 1343 | max-height: 15%; 1344 | left: 15%; 1345 | bottom: 26px; 1346 | padding: 10px; 1347 | z-index: 1; 1348 | font-size: 18px; 1349 | line-height: 1.4; 1350 | color: #fff; 1351 | background-color: rgba(0, 0, 0, 0.5); 1352 | overflow: auto; 1353 | box-sizing: border-box; 1354 | text-align: left; 1355 | font-family: Helvetica, sans-serif; 1356 | -webkit-overflow-scrolling: touch; } 1357 | 1358 | .reveal .speaker-notes.visible:not(:empty) { 1359 | display: block; } 1360 | 1361 | @media screen and (max-width: 1024px) { 1362 | .reveal .speaker-notes { 1363 | font-size: 14px; } } 1364 | 1365 | @media screen and (max-width: 600px) { 1366 | .reveal .speaker-notes { 1367 | width: 90%; 1368 | left: 5%; } } 1369 | 1370 | /********************************************* 1371 | * ZOOM PLUGIN 1372 | *********************************************/ 1373 | .zoomed .reveal *, 1374 | .zoomed .reveal *:before, 1375 | .zoomed .reveal *:after { 1376 | -webkit-backface-visibility: visible !important; 1377 | backface-visibility: visible !important; } 1378 | 1379 | .zoomed .reveal .progress, 1380 | .zoomed .reveal .controls { 1381 | opacity: 0; } 1382 | 1383 | .zoomed .reveal .roll span { 1384 | background: none; } 1385 | 1386 | .zoomed .reveal .roll span:after { 1387 | visibility: hidden; } 1388 | -------------------------------------------------------------------------------- /reveal/css/reveal.scss: -------------------------------------------------------------------------------- 1 | /*! 2 | * reveal.js 3 | * http://lab.hakim.se/reveal-js 4 | * MIT licensed 5 | * 6 | * Copyright (C) 2017 Hakim El Hattab, http://hakim.se 7 | */ 8 | 9 | 10 | /********************************************* 11 | * RESET STYLES 12 | *********************************************/ 13 | 14 | html, body, .reveal div, .reveal span, .reveal applet, .reveal object, .reveal iframe, 15 | .reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6, .reveal p, .reveal blockquote, .reveal pre, 16 | .reveal a, .reveal abbr, .reveal acronym, .reveal address, .reveal big, .reveal cite, .reveal code, 17 | .reveal del, .reveal dfn, .reveal em, .reveal img, .reveal ins, .reveal kbd, .reveal q, .reveal s, .reveal samp, 18 | .reveal small, .reveal strike, .reveal strong, .reveal sub, .reveal sup, .reveal tt, .reveal var, 19 | .reveal b, .reveal u, .reveal center, 20 | .reveal dl, .reveal dt, .reveal dd, .reveal ol, .reveal ul, .reveal li, 21 | .reveal fieldset, .reveal form, .reveal label, .reveal legend, 22 | .reveal table, .reveal caption, .reveal tbody, .reveal tfoot, .reveal thead, .reveal tr, .reveal th, .reveal td, 23 | .reveal article, .reveal aside, .reveal canvas, .reveal details, .reveal embed, 24 | .reveal figure, .reveal figcaption, .reveal footer, .reveal header, .reveal hgroup, 25 | .reveal menu, .reveal nav, .reveal output, .reveal ruby, .reveal section, .reveal summary, 26 | .reveal time, .reveal mark, .reveal audio, .reveal video { 27 | margin: 0; 28 | padding: 0; 29 | border: 0; 30 | font-size: 100%; 31 | font: inherit; 32 | vertical-align: baseline; 33 | } 34 | 35 | .reveal article, .reveal aside, .reveal details, .reveal figcaption, .reveal figure, 36 | .reveal footer, .reveal header, .reveal hgroup, .reveal menu, .reveal nav, .reveal section { 37 | display: block; 38 | } 39 | 40 | 41 | /********************************************* 42 | * GLOBAL STYLES 43 | *********************************************/ 44 | 45 | html, 46 | body { 47 | width: 100%; 48 | height: 100%; 49 | overflow: hidden; 50 | } 51 | 52 | body { 53 | position: relative; 54 | line-height: 1; 55 | 56 | background-color: #fff; 57 | color: #000; 58 | } 59 | 60 | 61 | /********************************************* 62 | * VIEW FRAGMENTS 63 | *********************************************/ 64 | 65 | .reveal .slides section .fragment { 66 | opacity: 0; 67 | visibility: hidden; 68 | transition: all .2s ease; 69 | 70 | &.visible { 71 | opacity: 1; 72 | visibility: inherit; 73 | } 74 | } 75 | 76 | .reveal .slides section .fragment.grow { 77 | opacity: 1; 78 | visibility: inherit; 79 | 80 | &.visible { 81 | transform: scale( 1.3 ); 82 | } 83 | } 84 | 85 | .reveal .slides section .fragment.shrink { 86 | opacity: 1; 87 | visibility: inherit; 88 | 89 | &.visible { 90 | transform: scale( 0.7 ); 91 | } 92 | } 93 | 94 | .reveal .slides section .fragment.zoom-in { 95 | transform: scale( 0.1 ); 96 | 97 | &.visible { 98 | transform: none; 99 | } 100 | } 101 | 102 | .reveal .slides section .fragment.fade-out { 103 | opacity: 1; 104 | visibility: inherit; 105 | 106 | &.visible { 107 | opacity: 0; 108 | visibility: hidden; 109 | } 110 | } 111 | 112 | .reveal .slides section .fragment.semi-fade-out { 113 | opacity: 1; 114 | visibility: inherit; 115 | 116 | &.visible { 117 | opacity: 0.5; 118 | visibility: inherit; 119 | } 120 | } 121 | 122 | .reveal .slides section .fragment.strike { 123 | opacity: 1; 124 | visibility: inherit; 125 | 126 | &.visible { 127 | text-decoration: line-through; 128 | } 129 | } 130 | 131 | .reveal .slides section .fragment.fade-up { 132 | transform: translate(0, 20%); 133 | 134 | &.visible { 135 | transform: translate(0, 0); 136 | } 137 | } 138 | 139 | .reveal .slides section .fragment.fade-down { 140 | transform: translate(0, -20%); 141 | 142 | &.visible { 143 | transform: translate(0, 0); 144 | } 145 | } 146 | 147 | .reveal .slides section .fragment.fade-right { 148 | transform: translate(-20%, 0); 149 | 150 | &.visible { 151 | transform: translate(0, 0); 152 | } 153 | } 154 | 155 | .reveal .slides section .fragment.fade-left { 156 | transform: translate(20%, 0); 157 | 158 | &.visible { 159 | transform: translate(0, 0); 160 | } 161 | } 162 | 163 | .reveal .slides section .fragment.current-visible { 164 | opacity: 0; 165 | visibility: hidden; 166 | 167 | &.current-fragment { 168 | opacity: 1; 169 | visibility: inherit; 170 | } 171 | } 172 | 173 | .reveal .slides section .fragment.highlight-red, 174 | .reveal .slides section .fragment.highlight-current-red, 175 | .reveal .slides section .fragment.highlight-green, 176 | .reveal .slides section .fragment.highlight-current-green, 177 | .reveal .slides section .fragment.highlight-blue, 178 | .reveal .slides section .fragment.highlight-current-blue { 179 | opacity: 1; 180 | visibility: inherit; 181 | } 182 | .reveal .slides section .fragment.highlight-red.visible { 183 | color: #ff2c2d 184 | } 185 | .reveal .slides section .fragment.highlight-green.visible { 186 | color: #17ff2e; 187 | } 188 | .reveal .slides section .fragment.highlight-blue.visible { 189 | color: #1b91ff; 190 | } 191 | 192 | .reveal .slides section .fragment.highlight-current-red.current-fragment { 193 | color: #ff2c2d 194 | } 195 | .reveal .slides section .fragment.highlight-current-green.current-fragment { 196 | color: #17ff2e; 197 | } 198 | .reveal .slides section .fragment.highlight-current-blue.current-fragment { 199 | color: #1b91ff; 200 | } 201 | 202 | 203 | /********************************************* 204 | * DEFAULT ELEMENT STYLES 205 | *********************************************/ 206 | 207 | /* Fixes issue in Chrome where italic fonts did not appear when printing to PDF */ 208 | .reveal:after { 209 | content: ''; 210 | font-style: italic; 211 | } 212 | 213 | .reveal iframe { 214 | z-index: 1; 215 | } 216 | 217 | /** Prevents layering issues in certain browser/transition combinations */ 218 | .reveal a { 219 | position: relative; 220 | } 221 | 222 | .reveal .stretch { 223 | max-width: none; 224 | max-height: none; 225 | } 226 | 227 | .reveal pre.stretch code { 228 | height: 100%; 229 | max-height: 100%; 230 | box-sizing: border-box; 231 | } 232 | 233 | 234 | /********************************************* 235 | * CONTROLS 236 | *********************************************/ 237 | 238 | .reveal .controls { 239 | display: none; 240 | position: fixed; 241 | width: 110px; 242 | height: 110px; 243 | z-index: 30; 244 | right: 10px; 245 | bottom: 10px; 246 | 247 | -webkit-user-select: none; 248 | } 249 | 250 | .reveal .controls button { 251 | padding: 0; 252 | position: absolute; 253 | opacity: 0.05; 254 | width: 0; 255 | height: 0; 256 | background-color: transparent; 257 | border: 12px solid transparent; 258 | transform: scale(.9999); 259 | transition: all 0.2s ease; 260 | -webkit-appearance: none; 261 | -webkit-tap-highlight-color: rgba( 0, 0, 0, 0 ); 262 | } 263 | 264 | .reveal .controls .enabled { 265 | opacity: 0.7; 266 | cursor: pointer; 267 | } 268 | 269 | .reveal .controls .enabled:active { 270 | margin-top: 1px; 271 | } 272 | 273 | .reveal .controls .navigate-left { 274 | top: 42px; 275 | 276 | border-right-width: 22px; 277 | border-right-color: #000; 278 | } 279 | .reveal .controls .navigate-left.fragmented { 280 | opacity: 0.3; 281 | } 282 | 283 | .reveal .controls .navigate-right { 284 | left: 74px; 285 | top: 42px; 286 | 287 | border-left-width: 22px; 288 | border-left-color: #000; 289 | } 290 | .reveal .controls .navigate-right.fragmented { 291 | opacity: 0.3; 292 | } 293 | 294 | .reveal .controls .navigate-up { 295 | left: 42px; 296 | 297 | border-bottom-width: 22px; 298 | border-bottom-color: #000; 299 | } 300 | .reveal .controls .navigate-up.fragmented { 301 | opacity: 0.3; 302 | } 303 | 304 | .reveal .controls .navigate-down { 305 | left: 42px; 306 | top: 74px; 307 | 308 | border-top-width: 22px; 309 | border-top-color: #000; 310 | } 311 | .reveal .controls .navigate-down.fragmented { 312 | opacity: 0.3; 313 | } 314 | 315 | 316 | /********************************************* 317 | * PROGRESS BAR 318 | *********************************************/ 319 | 320 | .reveal .progress { 321 | position: fixed; 322 | display: none; 323 | height: 3px; 324 | width: 100%; 325 | bottom: 0; 326 | left: 0; 327 | z-index: 10; 328 | 329 | background-color: rgba( 0, 0, 0, 0.2 ); 330 | } 331 | .reveal .progress:after { 332 | content: ''; 333 | display: block; 334 | position: absolute; 335 | height: 20px; 336 | width: 100%; 337 | top: -20px; 338 | } 339 | .reveal .progress span { 340 | display: block; 341 | height: 100%; 342 | width: 0px; 343 | 344 | background-color: #000; 345 | transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); 346 | } 347 | 348 | /********************************************* 349 | * SLIDE NUMBER 350 | *********************************************/ 351 | 352 | .reveal .slide-number { 353 | position: fixed; 354 | display: block; 355 | right: 8px; 356 | bottom: 8px; 357 | z-index: 31; 358 | font-family: Helvetica, sans-serif; 359 | font-size: 12px; 360 | line-height: 1; 361 | color: #fff; 362 | background-color: rgba( 0, 0, 0, 0.4 ); 363 | padding: 5px; 364 | } 365 | 366 | .reveal .slide-number-delimiter { 367 | margin: 0 3px; 368 | } 369 | 370 | /********************************************* 371 | * SLIDES 372 | *********************************************/ 373 | 374 | .reveal { 375 | position: relative; 376 | width: 100%; 377 | height: 100%; 378 | overflow: hidden; 379 | touch-action: none; 380 | } 381 | 382 | .reveal .slides { 383 | position: absolute; 384 | width: 100%; 385 | height: 100%; 386 | top: 0; 387 | right: 0; 388 | bottom: 0; 389 | left: 0; 390 | margin: auto; 391 | pointer-events: none; 392 | 393 | overflow: visible; 394 | z-index: 1; 395 | text-align: center; 396 | perspective: 600px; 397 | perspective-origin: 50% 40%; 398 | } 399 | 400 | .reveal .slides>section { 401 | -ms-perspective: 600px; 402 | } 403 | 404 | .reveal .slides>section, 405 | .reveal .slides>section>section { 406 | display: none; 407 | position: absolute; 408 | width: 100%; 409 | padding: 20px 0px; 410 | pointer-events: auto; 411 | 412 | z-index: 10; 413 | transform-style: flat; 414 | transition: transform-origin 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985), 415 | transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985), 416 | visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985), 417 | opacity 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); 418 | } 419 | 420 | /* Global transition speed settings */ 421 | .reveal[data-transition-speed="fast"] .slides section { 422 | transition-duration: 400ms; 423 | } 424 | .reveal[data-transition-speed="slow"] .slides section { 425 | transition-duration: 1200ms; 426 | } 427 | 428 | /* Slide-specific transition speed overrides */ 429 | .reveal .slides section[data-transition-speed="fast"] { 430 | transition-duration: 400ms; 431 | } 432 | .reveal .slides section[data-transition-speed="slow"] { 433 | transition-duration: 1200ms; 434 | } 435 | 436 | .reveal .slides>section.stack { 437 | padding-top: 0; 438 | padding-bottom: 0; 439 | } 440 | 441 | .reveal .slides>section.present, 442 | .reveal .slides>section>section.present { 443 | display: block; 444 | z-index: 11; 445 | opacity: 1; 446 | } 447 | 448 | .reveal .slides>section:empty, 449 | .reveal .slides>section>section:empty, 450 | .reveal .slides>section[data-background-interactive], 451 | .reveal .slides>section>section[data-background-interactive] { 452 | pointer-events: none; 453 | } 454 | 455 | .reveal.center, 456 | .reveal.center .slides, 457 | .reveal.center .slides section { 458 | min-height: 0 !important; 459 | } 460 | 461 | /* Don't allow interaction with invisible slides */ 462 | .reveal .slides>section.future, 463 | .reveal .slides>section>section.future, 464 | .reveal .slides>section.past, 465 | .reveal .slides>section>section.past { 466 | pointer-events: none; 467 | } 468 | 469 | .reveal.overview .slides>section, 470 | .reveal.overview .slides>section>section { 471 | pointer-events: auto; 472 | } 473 | 474 | .reveal .slides>section.past, 475 | .reveal .slides>section.future, 476 | .reveal .slides>section>section.past, 477 | .reveal .slides>section>section.future { 478 | opacity: 0; 479 | } 480 | 481 | 482 | /********************************************* 483 | * Mixins for readability of transitions 484 | *********************************************/ 485 | 486 | @mixin transition-global($style) { 487 | .reveal .slides section[data-transition=#{$style}], 488 | .reveal.#{$style} .slides section:not([data-transition]) { 489 | @content; 490 | } 491 | } 492 | @mixin transition-stack($style) { 493 | .reveal .slides section[data-transition=#{$style}].stack, 494 | .reveal.#{$style} .slides section.stack { 495 | @content; 496 | } 497 | } 498 | @mixin transition-horizontal-past($style) { 499 | .reveal .slides>section[data-transition=#{$style}].past, 500 | .reveal .slides>section[data-transition~=#{$style}-out].past, 501 | .reveal.#{$style} .slides>section:not([data-transition]).past { 502 | @content; 503 | } 504 | } 505 | @mixin transition-horizontal-future($style) { 506 | .reveal .slides>section[data-transition=#{$style}].future, 507 | .reveal .slides>section[data-transition~=#{$style}-in].future, 508 | .reveal.#{$style} .slides>section:not([data-transition]).future { 509 | @content; 510 | } 511 | } 512 | 513 | @mixin transition-vertical-past($style) { 514 | .reveal .slides>section>section[data-transition=#{$style}].past, 515 | .reveal .slides>section>section[data-transition~=#{$style}-out].past, 516 | .reveal.#{$style} .slides>section>section:not([data-transition]).past { 517 | @content; 518 | } 519 | } 520 | @mixin transition-vertical-future($style) { 521 | .reveal .slides>section>section[data-transition=#{$style}].future, 522 | .reveal .slides>section>section[data-transition~=#{$style}-in].future, 523 | .reveal.#{$style} .slides>section>section:not([data-transition]).future { 524 | @content; 525 | } 526 | } 527 | 528 | /********************************************* 529 | * SLIDE TRANSITION 530 | * Aliased 'linear' for backwards compatibility 531 | *********************************************/ 532 | 533 | @each $stylename in slide, linear { 534 | .reveal.#{$stylename} section { 535 | backface-visibility: hidden; 536 | } 537 | @include transition-horizontal-past(#{$stylename}) { 538 | transform: translate(-150%, 0); 539 | } 540 | @include transition-horizontal-future(#{$stylename}) { 541 | transform: translate(150%, 0); 542 | } 543 | @include transition-vertical-past(#{$stylename}) { 544 | transform: translate(0, -150%); 545 | } 546 | @include transition-vertical-future(#{$stylename}) { 547 | transform: translate(0, 150%); 548 | } 549 | } 550 | 551 | /********************************************* 552 | * CONVEX TRANSITION 553 | * Aliased 'default' for backwards compatibility 554 | *********************************************/ 555 | 556 | @each $stylename in default, convex { 557 | @include transition-stack(#{$stylename}) { 558 | transform-style: preserve-3d; 559 | } 560 | 561 | @include transition-horizontal-past(#{$stylename}) { 562 | transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); 563 | } 564 | @include transition-horizontal-future(#{$stylename}) { 565 | transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0); 566 | } 567 | @include transition-vertical-past(#{$stylename}) { 568 | transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0); 569 | } 570 | @include transition-vertical-future(#{$stylename}) { 571 | transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0); 572 | } 573 | } 574 | 575 | /********************************************* 576 | * CONCAVE TRANSITION 577 | *********************************************/ 578 | 579 | @include transition-stack(concave) { 580 | transform-style: preserve-3d; 581 | } 582 | 583 | @include transition-horizontal-past(concave) { 584 | transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0); 585 | } 586 | @include transition-horizontal-future(concave) { 587 | transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0); 588 | } 589 | @include transition-vertical-past(concave) { 590 | transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0); 591 | } 592 | @include transition-vertical-future(concave) { 593 | transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0); 594 | } 595 | 596 | 597 | /********************************************* 598 | * ZOOM TRANSITION 599 | *********************************************/ 600 | 601 | @include transition-global(zoom) { 602 | transition-timing-function: ease; 603 | } 604 | @include transition-horizontal-past(zoom) { 605 | visibility: hidden; 606 | transform: scale(16); 607 | } 608 | @include transition-horizontal-future(zoom) { 609 | visibility: hidden; 610 | transform: scale(0.2); 611 | } 612 | @include transition-vertical-past(zoom) { 613 | transform: translate(0, -150%); 614 | } 615 | @include transition-vertical-future(zoom) { 616 | transform: translate(0, 150%); 617 | } 618 | 619 | 620 | /********************************************* 621 | * CUBE TRANSITION 622 | * 623 | * WARNING: 624 | * this is deprecated and will be removed in a 625 | * future version. 626 | *********************************************/ 627 | 628 | .reveal.cube .slides { 629 | perspective: 1300px; 630 | } 631 | 632 | .reveal.cube .slides section { 633 | padding: 30px; 634 | min-height: 700px; 635 | backface-visibility: hidden; 636 | box-sizing: border-box; 637 | transform-style: preserve-3d; 638 | } 639 | .reveal.center.cube .slides section { 640 | min-height: 0; 641 | } 642 | .reveal.cube .slides section:not(.stack):before { 643 | content: ''; 644 | position: absolute; 645 | display: block; 646 | width: 100%; 647 | height: 100%; 648 | left: 0; 649 | top: 0; 650 | background: rgba(0,0,0,0.1); 651 | border-radius: 4px; 652 | transform: translateZ( -20px ); 653 | } 654 | .reveal.cube .slides section:not(.stack):after { 655 | content: ''; 656 | position: absolute; 657 | display: block; 658 | width: 90%; 659 | height: 30px; 660 | left: 5%; 661 | bottom: 0; 662 | background: none; 663 | z-index: 1; 664 | 665 | border-radius: 4px; 666 | box-shadow: 0px 95px 25px rgba(0,0,0,0.2); 667 | transform: translateZ(-90px) rotateX( 65deg ); 668 | } 669 | 670 | .reveal.cube .slides>section.stack { 671 | padding: 0; 672 | background: none; 673 | } 674 | 675 | .reveal.cube .slides>section.past { 676 | transform-origin: 100% 0%; 677 | transform: translate3d(-100%, 0, 0) rotateY(-90deg); 678 | } 679 | 680 | .reveal.cube .slides>section.future { 681 | transform-origin: 0% 0%; 682 | transform: translate3d(100%, 0, 0) rotateY(90deg); 683 | } 684 | 685 | .reveal.cube .slides>section>section.past { 686 | transform-origin: 0% 100%; 687 | transform: translate3d(0, -100%, 0) rotateX(90deg); 688 | } 689 | 690 | .reveal.cube .slides>section>section.future { 691 | transform-origin: 0% 0%; 692 | transform: translate3d(0, 100%, 0) rotateX(-90deg); 693 | } 694 | 695 | 696 | /********************************************* 697 | * PAGE TRANSITION 698 | * 699 | * WARNING: 700 | * this is deprecated and will be removed in a 701 | * future version. 702 | *********************************************/ 703 | 704 | .reveal.page .slides { 705 | perspective-origin: 0% 50%; 706 | perspective: 3000px; 707 | } 708 | 709 | .reveal.page .slides section { 710 | padding: 30px; 711 | min-height: 700px; 712 | box-sizing: border-box; 713 | transform-style: preserve-3d; 714 | } 715 | .reveal.page .slides section.past { 716 | z-index: 12; 717 | } 718 | .reveal.page .slides section:not(.stack):before { 719 | content: ''; 720 | position: absolute; 721 | display: block; 722 | width: 100%; 723 | height: 100%; 724 | left: 0; 725 | top: 0; 726 | background: rgba(0,0,0,0.1); 727 | transform: translateZ( -20px ); 728 | } 729 | .reveal.page .slides section:not(.stack):after { 730 | content: ''; 731 | position: absolute; 732 | display: block; 733 | width: 90%; 734 | height: 30px; 735 | left: 5%; 736 | bottom: 0; 737 | background: none; 738 | z-index: 1; 739 | 740 | border-radius: 4px; 741 | box-shadow: 0px 95px 25px rgba(0,0,0,0.2); 742 | 743 | -webkit-transform: translateZ(-90px) rotateX( 65deg ); 744 | } 745 | 746 | .reveal.page .slides>section.stack { 747 | padding: 0; 748 | background: none; 749 | } 750 | 751 | .reveal.page .slides>section.past { 752 | transform-origin: 0% 0%; 753 | transform: translate3d(-40%, 0, 0) rotateY(-80deg); 754 | } 755 | 756 | .reveal.page .slides>section.future { 757 | transform-origin: 100% 0%; 758 | transform: translate3d(0, 0, 0); 759 | } 760 | 761 | .reveal.page .slides>section>section.past { 762 | transform-origin: 0% 0%; 763 | transform: translate3d(0, -40%, 0) rotateX(80deg); 764 | } 765 | 766 | .reveal.page .slides>section>section.future { 767 | transform-origin: 0% 100%; 768 | transform: translate3d(0, 0, 0); 769 | } 770 | 771 | 772 | /********************************************* 773 | * FADE TRANSITION 774 | *********************************************/ 775 | 776 | .reveal .slides section[data-transition=fade], 777 | .reveal.fade .slides section:not([data-transition]), 778 | .reveal.fade .slides>section>section:not([data-transition]) { 779 | transform: none; 780 | transition: opacity 0.5s; 781 | } 782 | 783 | 784 | .reveal.fade.overview .slides section, 785 | .reveal.fade.overview .slides>section>section { 786 | transition: none; 787 | } 788 | 789 | 790 | /********************************************* 791 | * NO TRANSITION 792 | *********************************************/ 793 | 794 | @include transition-global(none) { 795 | transform: none; 796 | transition: none; 797 | } 798 | 799 | 800 | /********************************************* 801 | * PAUSED MODE 802 | *********************************************/ 803 | 804 | .reveal .pause-overlay { 805 | position: absolute; 806 | top: 0; 807 | left: 0; 808 | width: 100%; 809 | height: 100%; 810 | background: black; 811 | visibility: hidden; 812 | opacity: 0; 813 | z-index: 100; 814 | transition: all 1s ease; 815 | } 816 | .reveal.paused .pause-overlay { 817 | visibility: visible; 818 | opacity: 1; 819 | } 820 | 821 | 822 | /********************************************* 823 | * FALLBACK 824 | *********************************************/ 825 | 826 | .no-transforms { 827 | overflow-y: auto; 828 | } 829 | 830 | .no-transforms .reveal .slides { 831 | position: relative; 832 | width: 80%; 833 | height: auto !important; 834 | top: 0; 835 | left: 50%; 836 | margin: 0; 837 | text-align: center; 838 | } 839 | 840 | .no-transforms .reveal .controls, 841 | .no-transforms .reveal .progress { 842 | display: none !important; 843 | } 844 | 845 | .no-transforms .reveal .slides section { 846 | display: block !important; 847 | opacity: 1 !important; 848 | position: relative !important; 849 | height: auto; 850 | min-height: 0; 851 | top: 0; 852 | left: -50%; 853 | margin: 70px 0; 854 | transform: none; 855 | } 856 | 857 | .no-transforms .reveal .slides section section { 858 | left: 0; 859 | } 860 | 861 | .reveal .no-transition, 862 | .reveal .no-transition * { 863 | transition: none !important; 864 | } 865 | 866 | 867 | /********************************************* 868 | * PER-SLIDE BACKGROUNDS 869 | *********************************************/ 870 | 871 | .reveal .backgrounds { 872 | position: absolute; 873 | width: 100%; 874 | height: 100%; 875 | top: 0; 876 | left: 0; 877 | perspective: 600px; 878 | } 879 | .reveal .slide-background { 880 | display: none; 881 | position: absolute; 882 | width: 100%; 883 | height: 100%; 884 | opacity: 0; 885 | visibility: hidden; 886 | overflow: hidden; 887 | 888 | background-color: rgba( 0, 0, 0, 0 ); 889 | background-position: 50% 50%; 890 | background-repeat: no-repeat; 891 | background-size: cover; 892 | 893 | transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); 894 | } 895 | 896 | .reveal .slide-background.stack { 897 | display: block; 898 | } 899 | 900 | .reveal .slide-background.present { 901 | opacity: 1; 902 | visibility: visible; 903 | z-index: 2; 904 | } 905 | 906 | .print-pdf .reveal .slide-background { 907 | opacity: 1 !important; 908 | visibility: visible !important; 909 | } 910 | 911 | /* Video backgrounds */ 912 | .reveal .slide-background video { 913 | position: absolute; 914 | width: 100%; 915 | height: 100%; 916 | max-width: none; 917 | max-height: none; 918 | top: 0; 919 | left: 0; 920 | object-fit: cover; 921 | } 922 | .reveal .slide-background[data-background-size="contain"] video { 923 | object-fit: contain; 924 | } 925 | 926 | /* Immediate transition style */ 927 | .reveal[data-background-transition=none]>.backgrounds .slide-background, 928 | .reveal>.backgrounds .slide-background[data-background-transition=none] { 929 | transition: none; 930 | } 931 | 932 | /* Slide */ 933 | .reveal[data-background-transition=slide]>.backgrounds .slide-background, 934 | .reveal>.backgrounds .slide-background[data-background-transition=slide] { 935 | opacity: 1; 936 | backface-visibility: hidden; 937 | } 938 | .reveal[data-background-transition=slide]>.backgrounds .slide-background.past, 939 | .reveal>.backgrounds .slide-background.past[data-background-transition=slide] { 940 | transform: translate(-100%, 0); 941 | } 942 | .reveal[data-background-transition=slide]>.backgrounds .slide-background.future, 943 | .reveal>.backgrounds .slide-background.future[data-background-transition=slide] { 944 | transform: translate(100%, 0); 945 | } 946 | 947 | .reveal[data-background-transition=slide]>.backgrounds .slide-background>.slide-background.past, 948 | .reveal>.backgrounds .slide-background>.slide-background.past[data-background-transition=slide] { 949 | transform: translate(0, -100%); 950 | } 951 | .reveal[data-background-transition=slide]>.backgrounds .slide-background>.slide-background.future, 952 | .reveal>.backgrounds .slide-background>.slide-background.future[data-background-transition=slide] { 953 | transform: translate(0, 100%); 954 | } 955 | 956 | 957 | /* Convex */ 958 | .reveal[data-background-transition=convex]>.backgrounds .slide-background.past, 959 | .reveal>.backgrounds .slide-background.past[data-background-transition=convex] { 960 | opacity: 0; 961 | transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); 962 | } 963 | .reveal[data-background-transition=convex]>.backgrounds .slide-background.future, 964 | .reveal>.backgrounds .slide-background.future[data-background-transition=convex] { 965 | opacity: 0; 966 | transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0); 967 | } 968 | 969 | .reveal[data-background-transition=convex]>.backgrounds .slide-background>.slide-background.past, 970 | .reveal>.backgrounds .slide-background>.slide-background.past[data-background-transition=convex] { 971 | opacity: 0; 972 | transform: translate3d(0, -100%, 0) rotateX(90deg) translate3d(0, -100%, 0); 973 | } 974 | .reveal[data-background-transition=convex]>.backgrounds .slide-background>.slide-background.future, 975 | .reveal>.backgrounds .slide-background>.slide-background.future[data-background-transition=convex] { 976 | opacity: 0; 977 | transform: translate3d(0, 100%, 0) rotateX(-90deg) translate3d(0, 100%, 0); 978 | } 979 | 980 | 981 | /* Concave */ 982 | .reveal[data-background-transition=concave]>.backgrounds .slide-background.past, 983 | .reveal>.backgrounds .slide-background.past[data-background-transition=concave] { 984 | opacity: 0; 985 | transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0); 986 | } 987 | .reveal[data-background-transition=concave]>.backgrounds .slide-background.future, 988 | .reveal>.backgrounds .slide-background.future[data-background-transition=concave] { 989 | opacity: 0; 990 | transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0); 991 | } 992 | 993 | .reveal[data-background-transition=concave]>.backgrounds .slide-background>.slide-background.past, 994 | .reveal>.backgrounds .slide-background>.slide-background.past[data-background-transition=concave] { 995 | opacity: 0; 996 | transform: translate3d(0, -100%, 0) rotateX(-90deg) translate3d(0, -100%, 0); 997 | } 998 | .reveal[data-background-transition=concave]>.backgrounds .slide-background>.slide-background.future, 999 | .reveal>.backgrounds .slide-background>.slide-background.future[data-background-transition=concave] { 1000 | opacity: 0; 1001 | transform: translate3d(0, 100%, 0) rotateX(90deg) translate3d(0, 100%, 0); 1002 | } 1003 | 1004 | /* Zoom */ 1005 | .reveal[data-background-transition=zoom]>.backgrounds .slide-background, 1006 | .reveal>.backgrounds .slide-background[data-background-transition=zoom] { 1007 | transition-timing-function: ease; 1008 | } 1009 | 1010 | .reveal[data-background-transition=zoom]>.backgrounds .slide-background.past, 1011 | .reveal>.backgrounds .slide-background.past[data-background-transition=zoom] { 1012 | opacity: 0; 1013 | visibility: hidden; 1014 | transform: scale(16); 1015 | } 1016 | .reveal[data-background-transition=zoom]>.backgrounds .slide-background.future, 1017 | .reveal>.backgrounds .slide-background.future[data-background-transition=zoom] { 1018 | opacity: 0; 1019 | visibility: hidden; 1020 | transform: scale(0.2); 1021 | } 1022 | 1023 | .reveal[data-background-transition=zoom]>.backgrounds .slide-background>.slide-background.past, 1024 | .reveal>.backgrounds .slide-background>.slide-background.past[data-background-transition=zoom] { 1025 | opacity: 0; 1026 | visibility: hidden; 1027 | transform: scale(16); 1028 | } 1029 | .reveal[data-background-transition=zoom]>.backgrounds .slide-background>.slide-background.future, 1030 | .reveal>.backgrounds .slide-background>.slide-background.future[data-background-transition=zoom] { 1031 | opacity: 0; 1032 | visibility: hidden; 1033 | transform: scale(0.2); 1034 | } 1035 | 1036 | 1037 | /* Global transition speed settings */ 1038 | .reveal[data-transition-speed="fast"]>.backgrounds .slide-background { 1039 | transition-duration: 400ms; 1040 | } 1041 | .reveal[data-transition-speed="slow"]>.backgrounds .slide-background { 1042 | transition-duration: 1200ms; 1043 | } 1044 | 1045 | 1046 | /********************************************* 1047 | * OVERVIEW 1048 | *********************************************/ 1049 | 1050 | .reveal.overview { 1051 | perspective-origin: 50% 50%; 1052 | perspective: 700px; 1053 | 1054 | .slides { 1055 | // Fixes overview rendering errors in FF48+, not applied to 1056 | // other browsers since it degrades performance 1057 | -moz-transform-style: preserve-3d; 1058 | } 1059 | 1060 | .slides section { 1061 | height: 100%; 1062 | top: 0 !important; 1063 | opacity: 1 !important; 1064 | overflow: hidden; 1065 | visibility: visible !important; 1066 | cursor: pointer; 1067 | box-sizing: border-box; 1068 | } 1069 | .slides section:hover, 1070 | .slides section.present { 1071 | outline: 10px solid rgba(150,150,150,0.4); 1072 | outline-offset: 10px; 1073 | } 1074 | .slides section .fragment { 1075 | opacity: 1; 1076 | transition: none; 1077 | } 1078 | .slides section:after, 1079 | .slides section:before { 1080 | display: none !important; 1081 | } 1082 | .slides>section.stack { 1083 | padding: 0; 1084 | top: 0 !important; 1085 | background: none; 1086 | outline: none; 1087 | overflow: visible; 1088 | } 1089 | 1090 | .backgrounds { 1091 | perspective: inherit; 1092 | 1093 | // Fixes overview rendering errors in FF48+, not applied to 1094 | // other browsers since it degrades performance 1095 | -moz-transform-style: preserve-3d; 1096 | } 1097 | 1098 | .backgrounds .slide-background { 1099 | opacity: 1; 1100 | visibility: visible; 1101 | 1102 | // This can't be applied to the slide itself in Safari 1103 | outline: 10px solid rgba(150,150,150,0.1); 1104 | outline-offset: 10px; 1105 | } 1106 | 1107 | .backgrounds .slide-background.stack { 1108 | overflow: visible; 1109 | } 1110 | } 1111 | 1112 | // Disable transitions transitions while we're activating 1113 | // or deactivating the overview mode. 1114 | .reveal.overview .slides section, 1115 | .reveal.overview-deactivating .slides section { 1116 | transition: none; 1117 | } 1118 | 1119 | .reveal.overview .backgrounds .slide-background, 1120 | .reveal.overview-deactivating .backgrounds .slide-background { 1121 | transition: none; 1122 | } 1123 | 1124 | 1125 | /********************************************* 1126 | * RTL SUPPORT 1127 | *********************************************/ 1128 | 1129 | .reveal.rtl .slides, 1130 | .reveal.rtl .slides h1, 1131 | .reveal.rtl .slides h2, 1132 | .reveal.rtl .slides h3, 1133 | .reveal.rtl .slides h4, 1134 | .reveal.rtl .slides h5, 1135 | .reveal.rtl .slides h6 { 1136 | direction: rtl; 1137 | font-family: sans-serif; 1138 | } 1139 | 1140 | .reveal.rtl pre, 1141 | .reveal.rtl code { 1142 | direction: ltr; 1143 | } 1144 | 1145 | .reveal.rtl ol, 1146 | .reveal.rtl ul { 1147 | text-align: right; 1148 | } 1149 | 1150 | .reveal.rtl .progress span { 1151 | float: right 1152 | } 1153 | 1154 | /********************************************* 1155 | * PARALLAX BACKGROUND 1156 | *********************************************/ 1157 | 1158 | .reveal.has-parallax-background .backgrounds { 1159 | transition: all 0.8s ease; 1160 | } 1161 | 1162 | /* Global transition speed settings */ 1163 | .reveal.has-parallax-background[data-transition-speed="fast"] .backgrounds { 1164 | transition-duration: 400ms; 1165 | } 1166 | .reveal.has-parallax-background[data-transition-speed="slow"] .backgrounds { 1167 | transition-duration: 1200ms; 1168 | } 1169 | 1170 | 1171 | /********************************************* 1172 | * LINK PREVIEW OVERLAY 1173 | *********************************************/ 1174 | 1175 | .reveal .overlay { 1176 | position: absolute; 1177 | top: 0; 1178 | left: 0; 1179 | width: 100%; 1180 | height: 100%; 1181 | z-index: 1000; 1182 | background: rgba( 0, 0, 0, 0.9 ); 1183 | opacity: 0; 1184 | visibility: hidden; 1185 | transition: all 0.3s ease; 1186 | } 1187 | .reveal .overlay.visible { 1188 | opacity: 1; 1189 | visibility: visible; 1190 | } 1191 | 1192 | .reveal .overlay .spinner { 1193 | position: absolute; 1194 | display: block; 1195 | top: 50%; 1196 | left: 50%; 1197 | width: 32px; 1198 | height: 32px; 1199 | margin: -16px 0 0 -16px; 1200 | z-index: 10; 1201 | background-image: url(data:image/gif;base64,R0lGODlhIAAgAPMAAJmZmf%2F%2F%2F6%2Bvr8nJybW1tcDAwOjo6Nvb26ioqKOjo7Ozs%2FLy8vz8%2FAAAAAAAAAAAACH%2FC05FVFNDQVBFMi4wAwEAAAAh%2FhpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh%2BQQJCgAAACwAAAAAIAAgAAAE5xDISWlhperN52JLhSSdRgwVo1ICQZRUsiwHpTJT4iowNS8vyW2icCF6k8HMMBkCEDskxTBDAZwuAkkqIfxIQyhBQBFvAQSDITM5VDW6XNE4KagNh6Bgwe60smQUB3d4Rz1ZBApnFASDd0hihh12BkE9kjAJVlycXIg7CQIFA6SlnJ87paqbSKiKoqusnbMdmDC2tXQlkUhziYtyWTxIfy6BE8WJt5YJvpJivxNaGmLHT0VnOgSYf0dZXS7APdpB309RnHOG5gDqXGLDaC457D1zZ%2FV%2FnmOM82XiHRLYKhKP1oZmADdEAAAh%2BQQJCgAAACwAAAAAIAAgAAAE6hDISWlZpOrNp1lGNRSdRpDUolIGw5RUYhhHukqFu8DsrEyqnWThGvAmhVlteBvojpTDDBUEIFwMFBRAmBkSgOrBFZogCASwBDEY%2FCZSg7GSE0gSCjQBMVG023xWBhklAnoEdhQEfyNqMIcKjhRsjEdnezB%2BA4k8gTwJhFuiW4dokXiloUepBAp5qaKpp6%2BHo7aWW54wl7obvEe0kRuoplCGepwSx2jJvqHEmGt6whJpGpfJCHmOoNHKaHx61WiSR92E4lbFoq%2BB6QDtuetcaBPnW6%2BO7wDHpIiK9SaVK5GgV543tzjgGcghAgAh%2BQQJCgAAACwAAAAAIAAgAAAE7hDISSkxpOrN5zFHNWRdhSiVoVLHspRUMoyUakyEe8PTPCATW9A14E0UvuAKMNAZKYUZCiBMuBakSQKG8G2FzUWox2AUtAQFcBKlVQoLgQReZhQlCIJesQXI5B0CBnUMOxMCenoCfTCEWBsJColTMANldx15BGs8B5wlCZ9Po6OJkwmRpnqkqnuSrayqfKmqpLajoiW5HJq7FL1Gr2mMMcKUMIiJgIemy7xZtJsTmsM4xHiKv5KMCXqfyUCJEonXPN2rAOIAmsfB3uPoAK%2B%2BG%2Bw48edZPK%2BM6hLJpQg484enXIdQFSS1u6UhksENEQAAIfkECQoAAAAsAAAAACAAIAAABOcQyEmpGKLqzWcZRVUQnZYg1aBSh2GUVEIQ2aQOE%2BG%2BcD4ntpWkZQj1JIiZIogDFFyHI0UxQwFugMSOFIPJftfVAEoZLBbcLEFhlQiqGp1Vd140AUklUN3eCA51C1EWMzMCezCBBmkxVIVHBWd3HHl9JQOIJSdSnJ0TDKChCwUJjoWMPaGqDKannasMo6WnM562R5YluZRwur0wpgqZE7NKUm%2BFNRPIhjBJxKZteWuIBMN4zRMIVIhffcgojwCF117i4nlLnY5ztRLsnOk%2BaV%2BoJY7V7m76PdkS4trKcdg0Zc0tTcKkRAAAIfkECQoAAAAsAAAAACAAIAAABO4QyEkpKqjqzScpRaVkXZWQEximw1BSCUEIlDohrft6cpKCk5xid5MNJTaAIkekKGQkWyKHkvhKsR7ARmitkAYDYRIbUQRQjWBwJRzChi9CRlBcY1UN4g0%2FVNB0AlcvcAYHRyZPdEQFYV8ccwR5HWxEJ02YmRMLnJ1xCYp0Y5idpQuhopmmC2KgojKasUQDk5BNAwwMOh2RtRq5uQuPZKGIJQIGwAwGf6I0JXMpC8C7kXWDBINFMxS4DKMAWVWAGYsAdNqW5uaRxkSKJOZKaU3tPOBZ4DuK2LATgJhkPJMgTwKCdFjyPHEnKxFCDhEAACH5BAkKAAAALAAAAAAgACAAAATzEMhJaVKp6s2nIkolIJ2WkBShpkVRWqqQrhLSEu9MZJKK9y1ZrqYK9WiClmvoUaF8gIQSNeF1Er4MNFn4SRSDARWroAIETg1iVwuHjYB1kYc1mwruwXKC9gmsJXliGxc%2BXiUCby9ydh1sOSdMkpMTBpaXBzsfhoc5l58Gm5yToAaZhaOUqjkDgCWNHAULCwOLaTmzswadEqggQwgHuQsHIoZCHQMMQgQGubVEcxOPFAcMDAYUA85eWARmfSRQCdcMe0zeP1AAygwLlJtPNAAL19DARdPzBOWSm1brJBi45soRAWQAAkrQIykShQ9wVhHCwCQCACH5BAkKAAAALAAAAAAgACAAAATrEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq%2BE71SRQeyqUToLA7VxF0JDyIQh%2FMVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiRMDjI0Fd30%2FiI2UA5GSS5UDj2l6NoqgOgN4gksEBgYFf0FDqKgHnyZ9OX8HrgYHdHpcHQULXAS2qKpENRg7eAMLC7kTBaixUYFkKAzWAAnLC7FLVxLWDBLKCwaKTULgEwbLA4hJtOkSBNqITT3xEgfLpBtzE%2FjiuL04RGEBgwWhShRgQExHBAAh%2BQQJCgAAACwAAAAAIAAgAAAE7xDISWlSqerNpyJKhWRdlSAVoVLCWk6JKlAqAavhO9UkUHsqlE6CwO1cRdCQ8iEIfzFVTzLdRAmZX3I2SfZiCqGk5dTESJeaOAlClzsJsqwiJwiqnFrb2nS9kmIcgEsjQydLiIlHehhpejaIjzh9eomSjZR%2BipslWIRLAgMDOR2DOqKogTB9pCUJBagDBXR6XB0EBkIIsaRsGGMMAxoDBgYHTKJiUYEGDAzHC9EACcUGkIgFzgwZ0QsSBcXHiQvOwgDdEwfFs0sDzt4S6BK4xYjkDOzn0unFeBzOBijIm1Dgmg5YFQwsCMjp1oJ8LyIAACH5BAkKAAAALAAAAAAgACAAAATwEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq%2BE71SRQeyqUToLA7VxF0JDyIQh%2FMVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiUd6GGl6NoiPOH16iZKNlH6KmyWFOggHhEEvAwwMA0N9GBsEC6amhnVcEwavDAazGwIDaH1ipaYLBUTCGgQDA8NdHz0FpqgTBwsLqAbWAAnIA4FWKdMLGdYGEgraigbT0OITBcg5QwPT4xLrROZL6AuQAPUS7bxLpoWidY0JtxLHKhwwMJBTHgPKdEQAACH5BAkKAAAALAAAAAAgACAAAATrEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq%2BE71SRQeyqUToLA7VxF0JDyIQh%2FMVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiUd6GAULDJCRiXo1CpGXDJOUjY%2BYip9DhToJA4RBLwMLCwVDfRgbBAaqqoZ1XBMHswsHtxtFaH1iqaoGNgAIxRpbFAgfPQSqpbgGBqUD1wBXeCYp1AYZ19JJOYgH1KwA4UBvQwXUBxPqVD9L3sbp2BNk2xvvFPJd%2BMFCN6HAAIKgNggY0KtEBAAh%2BQQJCgAAACwAAAAAIAAgAAAE6BDISWlSqerNpyJKhWRdlSAVoVLCWk6JKlAqAavhO9UkUHsqlE6CwO1cRdCQ8iEIfzFVTzLdRAmZX3I2SfYIDMaAFdTESJeaEDAIMxYFqrOUaNW4E4ObYcCXaiBVEgULe0NJaxxtYksjh2NLkZISgDgJhHthkpU4mW6blRiYmZOlh4JWkDqILwUGBnE6TYEbCgevr0N1gH4At7gHiRpFaLNrrq8HNgAJA70AWxQIH1%2BvsYMDAzZQPC9VCNkDWUhGkuE5PxJNwiUK4UfLzOlD4WvzAHaoG9nxPi5d%2BjYUqfAhhykOFwJWiAAAIfkECQoAAAAsAAAAACAAIAAABPAQyElpUqnqzaciSoVkXVUMFaFSwlpOCcMYlErAavhOMnNLNo8KsZsMZItJEIDIFSkLGQoQTNhIsFehRww2CQLKF0tYGKYSg%2BygsZIuNqJksKgbfgIGepNo2cIUB3V1B3IvNiBYNQaDSTtfhhx0CwVPI0UJe0%2Bbm4g5VgcGoqOcnjmjqDSdnhgEoamcsZuXO1aWQy8KAwOAuTYYGwi7w5h%2BKr0SJ8MFihpNbx%2B4Erq7BYBuzsdiH1jCAzoSfl0rVirNbRXlBBlLX%2BBP0XJLAPGzTkAuAOqb0WT5AH7OcdCm5B8TgRwSRKIHQtaLCwg1RAAAOwAAAAAAAAAAAA%3D%3D); 1202 | 1203 | visibility: visible; 1204 | opacity: 0.6; 1205 | transition: all 0.3s ease; 1206 | } 1207 | 1208 | .reveal .overlay header { 1209 | position: absolute; 1210 | left: 0; 1211 | top: 0; 1212 | width: 100%; 1213 | height: 40px; 1214 | z-index: 2; 1215 | border-bottom: 1px solid #222; 1216 | } 1217 | .reveal .overlay header a { 1218 | display: inline-block; 1219 | width: 40px; 1220 | height: 40px; 1221 | line-height: 36px; 1222 | padding: 0 10px; 1223 | float: right; 1224 | opacity: 0.6; 1225 | 1226 | box-sizing: border-box; 1227 | } 1228 | .reveal .overlay header a:hover { 1229 | opacity: 1; 1230 | } 1231 | .reveal .overlay header a .icon { 1232 | display: inline-block; 1233 | width: 20px; 1234 | height: 20px; 1235 | 1236 | background-position: 50% 50%; 1237 | background-size: 100%; 1238 | background-repeat: no-repeat; 1239 | } 1240 | .reveal .overlay header a.close .icon { 1241 | background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABkklEQVRYR8WX4VHDMAxG6wnoJrABZQPYBCaBTWAD2g1gE5gg6OOsXuxIlr40d81dfrSJ9V4c2VLK7spHuTJ/5wpM07QXuXc5X0opX2tEJcadjHuV80li/FgxTIEK/5QBCICBD6xEhSMGHgQPgBgLiYVAB1dpSqKDawxTohFw4JSEA3clzgIBPCURwE2JucBR7rhPJJv5OpJwDX+SfDjgx1wACQeJG1aChP9K/IMmdZ8DtESV1WyP3Bt4MwM6sj4NMxMYiqUWHQu4KYA/SYkIjOsm3BXYWMKFDwU2khjCQ4ELJUJ4SmClRArOCmSXGuKma0fYD5CbzHxFpCSGAhfAVSSUGDUk2BWZaff2g6GE15BsBQ9nwmpIGDiyHQddwNTMKkbZaf9fajXQca1EX44puJZUsnY0ObGmITE3GVLCbEhQUjGVt146j6oasWN+49Vph2w1pZ5EansNZqKBm1txbU57iRRcZ86RWMDdWtBJUHBHwoQPi1GV+JCbntmvok7iTX4/Up9mgyTc/FJYDTcndgH/AA5A/CHsyEkVAAAAAElFTkSuQmCC); 1242 | } 1243 | .reveal .overlay header a.external .icon { 1244 | background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAcElEQVRYR+2WSQoAIQwEzf8f7XiOMkUQxUPlGkM3hVmiQfQR9GYnH1SsAQlI4DiBqkCMoNb9y2e90IAEJPAcgdznU9+engMaeJ7Azh5Y1U67gAho4DqBqmB1buAf0MB1AlVBek83ZPkmJMGc1wAR+AAqod/B97TRpQAAAABJRU5ErkJggg==); 1245 | } 1246 | 1247 | .reveal .overlay .viewport { 1248 | position: absolute; 1249 | display: flex; 1250 | top: 40px; 1251 | right: 0; 1252 | bottom: 0; 1253 | left: 0; 1254 | } 1255 | 1256 | .reveal .overlay.overlay-preview .viewport iframe { 1257 | width: 100%; 1258 | height: 100%; 1259 | max-width: 100%; 1260 | max-height: 100%; 1261 | border: 0; 1262 | 1263 | opacity: 0; 1264 | visibility: hidden; 1265 | transition: all 0.3s ease; 1266 | } 1267 | 1268 | .reveal .overlay.overlay-preview.loaded .viewport iframe { 1269 | opacity: 1; 1270 | visibility: visible; 1271 | } 1272 | 1273 | .reveal .overlay.overlay-preview.loaded .viewport-inner { 1274 | position: absolute; 1275 | z-index: -1; 1276 | left: 0; 1277 | top: 45%; 1278 | width: 100%; 1279 | text-align: center; 1280 | letter-spacing: normal; 1281 | } 1282 | .reveal .overlay.overlay-preview .x-frame-error { 1283 | opacity: 0; 1284 | transition: opacity 0.3s ease 0.3s; 1285 | } 1286 | .reveal .overlay.overlay-preview.loaded .x-frame-error { 1287 | opacity: 1; 1288 | } 1289 | 1290 | .reveal .overlay.overlay-preview.loaded .spinner { 1291 | opacity: 0; 1292 | visibility: hidden; 1293 | transform: scale(0.2); 1294 | } 1295 | 1296 | .reveal .overlay.overlay-help .viewport { 1297 | overflow: auto; 1298 | color: #fff; 1299 | } 1300 | 1301 | .reveal .overlay.overlay-help .viewport .viewport-inner { 1302 | width: 600px; 1303 | margin: auto; 1304 | padding: 20px 20px 80px 20px; 1305 | text-align: center; 1306 | letter-spacing: normal; 1307 | } 1308 | 1309 | .reveal .overlay.overlay-help .viewport .viewport-inner .title { 1310 | font-size: 20px; 1311 | } 1312 | 1313 | .reveal .overlay.overlay-help .viewport .viewport-inner table { 1314 | border: 1px solid #fff; 1315 | border-collapse: collapse; 1316 | font-size: 16px; 1317 | } 1318 | 1319 | .reveal .overlay.overlay-help .viewport .viewport-inner table th, 1320 | .reveal .overlay.overlay-help .viewport .viewport-inner table td { 1321 | width: 200px; 1322 | padding: 14px; 1323 | border: 1px solid #fff; 1324 | vertical-align: middle; 1325 | } 1326 | 1327 | .reveal .overlay.overlay-help .viewport .viewport-inner table th { 1328 | padding-top: 20px; 1329 | padding-bottom: 20px; 1330 | } 1331 | 1332 | 1333 | 1334 | /********************************************* 1335 | * PLAYBACK COMPONENT 1336 | *********************************************/ 1337 | 1338 | .reveal .playback { 1339 | position: fixed; 1340 | left: 15px; 1341 | bottom: 20px; 1342 | z-index: 30; 1343 | cursor: pointer; 1344 | transition: all 400ms ease; 1345 | } 1346 | 1347 | .reveal.overview .playback { 1348 | opacity: 0; 1349 | visibility: hidden; 1350 | } 1351 | 1352 | 1353 | /********************************************* 1354 | * ROLLING LINKS 1355 | *********************************************/ 1356 | 1357 | .reveal .roll { 1358 | display: inline-block; 1359 | line-height: 1.2; 1360 | overflow: hidden; 1361 | 1362 | vertical-align: top; 1363 | perspective: 400px; 1364 | perspective-origin: 50% 50%; 1365 | } 1366 | .reveal .roll:hover { 1367 | background: none; 1368 | text-shadow: none; 1369 | } 1370 | .reveal .roll span { 1371 | display: block; 1372 | position: relative; 1373 | padding: 0 2px; 1374 | 1375 | pointer-events: none; 1376 | transition: all 400ms ease; 1377 | transform-origin: 50% 0%; 1378 | transform-style: preserve-3d; 1379 | backface-visibility: hidden; 1380 | } 1381 | .reveal .roll:hover span { 1382 | background: rgba(0,0,0,0.5); 1383 | transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg ); 1384 | } 1385 | .reveal .roll span:after { 1386 | content: attr(data-title); 1387 | 1388 | display: block; 1389 | position: absolute; 1390 | left: 0; 1391 | top: 0; 1392 | padding: 0 2px; 1393 | backface-visibility: hidden; 1394 | transform-origin: 50% 0%; 1395 | transform: translate3d( 0px, 110%, 0px ) rotateX( -90deg ); 1396 | } 1397 | 1398 | 1399 | /********************************************* 1400 | * SPEAKER NOTES 1401 | *********************************************/ 1402 | 1403 | // Hide on-page notes 1404 | .reveal aside.notes { 1405 | display: none; 1406 | } 1407 | 1408 | // An interface element that can optionally be used to show the 1409 | // speaker notes to all viewers, on top of the presentation 1410 | .reveal .speaker-notes { 1411 | display: none; 1412 | position: absolute; 1413 | width: 70%; 1414 | max-height: 15%; 1415 | left: 15%; 1416 | bottom: 26px; 1417 | padding: 10px; 1418 | z-index: 1; 1419 | font-size: 18px; 1420 | line-height: 1.4; 1421 | color: #fff; 1422 | background-color: rgba(0,0,0,0.5); 1423 | overflow: auto; 1424 | box-sizing: border-box; 1425 | text-align: left; 1426 | font-family: Helvetica, sans-serif; 1427 | -webkit-overflow-scrolling: touch; 1428 | } 1429 | 1430 | .reveal .speaker-notes.visible:not(:empty) { 1431 | display: block; 1432 | } 1433 | 1434 | @media screen and (max-width: 1024px) { 1435 | .reveal .speaker-notes { 1436 | font-size: 14px; 1437 | } 1438 | } 1439 | 1440 | @media screen and (max-width: 600px) { 1441 | .reveal .speaker-notes { 1442 | width: 90%; 1443 | left: 5%; 1444 | } 1445 | } 1446 | 1447 | 1448 | /********************************************* 1449 | * ZOOM PLUGIN 1450 | *********************************************/ 1451 | 1452 | .zoomed .reveal *, 1453 | .zoomed .reveal *:before, 1454 | .zoomed .reveal *:after { 1455 | backface-visibility: visible !important; 1456 | } 1457 | 1458 | .zoomed .reveal .progress, 1459 | .zoomed .reveal .controls { 1460 | opacity: 0; 1461 | } 1462 | 1463 | .zoomed .reveal .roll span { 1464 | background: none; 1465 | } 1466 | 1467 | .zoomed .reveal .roll span:after { 1468 | visibility: hidden; 1469 | } 1470 | -------------------------------------------------------------------------------- /reveal/css/theme/source/white.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * White theme for reveal.js. This is the opposite of the 'black' theme. 3 | * 4 | * By Hakim El Hattab, http://hakim.se 5 | */ 6 | 7 | 8 | // Default mixins and settings ----------------- 9 | @import "../template/mixins"; 10 | @import "../template/settings"; 11 | // --------------------------------------------- 12 | 13 | 14 | // Include theme-specific fonts 15 | @import url(../../lib/font/source-sans-pro/source-sans-pro.css); 16 | 17 | 18 | // Override theme settings (see ../template/settings.scss) 19 | $backgroundColor: #fff; 20 | 21 | $mainColor: #222; 22 | $headingColor: #222; 23 | 24 | $mainFontSize: 42px; 25 | $mainFont: 'Source Sans Pro', Helvetica, sans-serif; 26 | $headingFont: 'Source Sans Pro', Helvetica, sans-serif; 27 | $headingTextShadow: none; 28 | $headingLetterSpacing: normal; 29 | $headingTextTransform: uppercase; 30 | $headingFontWeight: 600; 31 | $linkColor: #2a76dd; 32 | $linkColorHover: lighten( $linkColor, 15% ); 33 | $selectionBackgroundColor: lighten( $linkColor, 25% ); 34 | 35 | $heading1Size: 2.5em; 36 | $heading2Size: 1.6em; 37 | $heading3Size: 1.3em; 38 | $heading4Size: 1.0em; 39 | 40 | section.has-dark-background { 41 | &, h1, h2, h3, h4, h5, h6 { 42 | color: #fff; 43 | } 44 | } 45 | 46 | 47 | // Theme template ------------------------------ 48 | @import "../template/theme"; 49 | // --------------------------------------------- -------------------------------------------------------------------------------- /reveal/css/theme/template/mixins.scss: -------------------------------------------------------------------------------- 1 | @mixin vertical-gradient( $top, $bottom ) { 2 | background: $top; 3 | background: -moz-linear-gradient( top, $top 0%, $bottom 100% ); 4 | background: -webkit-gradient( linear, left top, left bottom, color-stop(0%,$top), color-stop(100%,$bottom) ); 5 | background: -webkit-linear-gradient( top, $top 0%, $bottom 100% ); 6 | background: -o-linear-gradient( top, $top 0%, $bottom 100% ); 7 | background: -ms-linear-gradient( top, $top 0%, $bottom 100% ); 8 | background: linear-gradient( top, $top 0%, $bottom 100% ); 9 | } 10 | 11 | @mixin horizontal-gradient( $top, $bottom ) { 12 | background: $top; 13 | background: -moz-linear-gradient( left, $top 0%, $bottom 100% ); 14 | background: -webkit-gradient( linear, left top, right top, color-stop(0%,$top), color-stop(100%,$bottom) ); 15 | background: -webkit-linear-gradient( left, $top 0%, $bottom 100% ); 16 | background: -o-linear-gradient( left, $top 0%, $bottom 100% ); 17 | background: -ms-linear-gradient( left, $top 0%, $bottom 100% ); 18 | background: linear-gradient( left, $top 0%, $bottom 100% ); 19 | } 20 | 21 | @mixin radial-gradient( $outer, $inner, $type: circle ) { 22 | background: $outer; 23 | background: -moz-radial-gradient( center, $type cover, $inner 0%, $outer 100% ); 24 | background: -webkit-gradient( radial, center center, 0px, center center, 100%, color-stop(0%,$inner), color-stop(100%,$outer) ); 25 | background: -webkit-radial-gradient( center, $type cover, $inner 0%, $outer 100% ); 26 | background: -o-radial-gradient( center, $type cover, $inner 0%, $outer 100% ); 27 | background: -ms-radial-gradient( center, $type cover, $inner 0%, $outer 100% ); 28 | background: radial-gradient( center, $type cover, $inner 0%, $outer 100% ); 29 | } -------------------------------------------------------------------------------- /reveal/css/theme/template/settings.scss: -------------------------------------------------------------------------------- 1 | // Base settings for all themes that can optionally be 2 | // overridden by the super-theme 3 | 4 | // Background of the presentation 5 | $backgroundColor: #2b2b2b; 6 | 7 | // Primary/body text 8 | $mainFont: 'Lato', sans-serif; 9 | $mainFontSize: 40px; 10 | $mainColor: #eee; 11 | 12 | // Vertical spacing between blocks of text 13 | $blockMargin: 20px; 14 | 15 | // Headings 16 | $headingMargin: 0 0 $blockMargin 0; 17 | $headingFont: 'League Gothic', Impact, sans-serif; 18 | $headingColor: #eee; 19 | $headingLineHeight: 1.2; 20 | $headingLetterSpacing: normal; 21 | $headingTextTransform: uppercase; 22 | $headingTextShadow: none; 23 | $headingFontWeight: normal; 24 | $heading1TextShadow: $headingTextShadow; 25 | 26 | $heading1Size: 3.77em; 27 | $heading2Size: 2.11em; 28 | $heading3Size: 1.55em; 29 | $heading4Size: 1.00em; 30 | 31 | // Links and actions 32 | $linkColor: #13DAEC; 33 | $linkColorHover: lighten( $linkColor, 20% ); 34 | 35 | // Text selection 36 | $selectionBackgroundColor: #FF5E99; 37 | $selectionColor: #fff; 38 | 39 | // Generates the presentation background, can be overridden 40 | // to return a background image or gradient 41 | @mixin bodyBackground() { 42 | background: $backgroundColor; 43 | } -------------------------------------------------------------------------------- /reveal/css/theme/template/theme.scss: -------------------------------------------------------------------------------- 1 | // Base theme template for reveal.js 2 | 3 | /********************************************* 4 | * GLOBAL STYLES 5 | *********************************************/ 6 | 7 | body { 8 | @include bodyBackground(); 9 | background-color: $backgroundColor; 10 | } 11 | 12 | .reveal { 13 | font-family: $mainFont; 14 | font-size: $mainFontSize; 15 | font-weight: normal; 16 | color: $mainColor; 17 | } 18 | 19 | ::selection { 20 | color: $selectionColor; 21 | background: $selectionBackgroundColor; 22 | text-shadow: none; 23 | } 24 | 25 | ::-moz-selection { 26 | color: $selectionColor; 27 | background: $selectionBackgroundColor; 28 | text-shadow: none; 29 | } 30 | 31 | .reveal .slides>section, 32 | .reveal .slides>section>section { 33 | line-height: 1.3; 34 | font-weight: inherit; 35 | } 36 | 37 | /********************************************* 38 | * HEADERS 39 | *********************************************/ 40 | 41 | .reveal h1, 42 | .reveal h2, 43 | .reveal h3, 44 | .reveal h4, 45 | .reveal h5, 46 | .reveal h6 { 47 | margin: $headingMargin; 48 | color: $headingColor; 49 | 50 | font-family: $headingFont; 51 | font-weight: $headingFontWeight; 52 | line-height: $headingLineHeight; 53 | letter-spacing: $headingLetterSpacing; 54 | 55 | text-transform: $headingTextTransform; 56 | text-shadow: $headingTextShadow; 57 | 58 | word-wrap: break-word; 59 | } 60 | 61 | .reveal h1 {font-size: $heading1Size; } 62 | .reveal h2 {font-size: $heading2Size; } 63 | .reveal h3 {font-size: $heading3Size; } 64 | .reveal h4 {font-size: $heading4Size; } 65 | 66 | .reveal h1 { 67 | text-shadow: $heading1TextShadow; 68 | } 69 | 70 | 71 | /********************************************* 72 | * OTHER 73 | *********************************************/ 74 | 75 | .reveal p { 76 | margin: $blockMargin 0; 77 | line-height: 1.3; 78 | } 79 | 80 | /* Ensure certain elements are never larger than the slide itself */ 81 | .reveal img, 82 | .reveal video, 83 | .reveal iframe { 84 | max-width: 95%; 85 | max-height: 95%; 86 | } 87 | .reveal strong, 88 | .reveal b { 89 | font-weight: bold; 90 | } 91 | 92 | .reveal em { 93 | font-style: italic; 94 | } 95 | 96 | .reveal ol, 97 | .reveal dl, 98 | .reveal ul { 99 | display: inline-block; 100 | 101 | text-align: left; 102 | margin: 0 0 0 1em; 103 | } 104 | 105 | .reveal ol { 106 | list-style-type: decimal; 107 | } 108 | 109 | .reveal ul { 110 | list-style-type: disc; 111 | } 112 | 113 | .reveal ul ul { 114 | list-style-type: square; 115 | } 116 | 117 | .reveal ul ul ul { 118 | list-style-type: circle; 119 | } 120 | 121 | .reveal ul ul, 122 | .reveal ul ol, 123 | .reveal ol ol, 124 | .reveal ol ul { 125 | display: block; 126 | margin-left: 40px; 127 | } 128 | 129 | .reveal dt { 130 | font-weight: bold; 131 | } 132 | 133 | .reveal dd { 134 | margin-left: 40px; 135 | } 136 | 137 | .reveal q, 138 | .reveal blockquote { 139 | quotes: none; 140 | } 141 | 142 | .reveal blockquote { 143 | display: block; 144 | position: relative; 145 | width: 70%; 146 | margin: $blockMargin auto; 147 | padding: 5px; 148 | 149 | font-style: italic; 150 | background: rgba(255, 255, 255, 0.05); 151 | box-shadow: 0px 0px 2px rgba(0,0,0,0.2); 152 | } 153 | .reveal blockquote p:first-child, 154 | .reveal blockquote p:last-child { 155 | display: inline-block; 156 | } 157 | 158 | .reveal q { 159 | font-style: italic; 160 | } 161 | 162 | .reveal pre { 163 | display: block; 164 | position: relative; 165 | width: 90%; 166 | margin: $blockMargin auto; 167 | 168 | text-align: left; 169 | font-size: 0.55em; 170 | font-family: monospace; 171 | line-height: 1.2em; 172 | 173 | word-wrap: break-word; 174 | 175 | box-shadow: 0px 0px 6px rgba(0,0,0,0.3); 176 | } 177 | .reveal code { 178 | font-family: monospace; 179 | } 180 | 181 | .reveal pre code { 182 | display: block; 183 | padding: 5px; 184 | overflow: auto; 185 | max-height: 400px; 186 | word-wrap: normal; 187 | } 188 | 189 | .reveal table { 190 | margin: auto; 191 | border-collapse: collapse; 192 | border-spacing: 0; 193 | } 194 | 195 | .reveal table th { 196 | font-weight: bold; 197 | } 198 | 199 | .reveal table th, 200 | .reveal table td { 201 | text-align: left; 202 | padding: 0.2em 0.5em 0.2em 0.5em; 203 | border-bottom: 1px solid; 204 | } 205 | 206 | .reveal table th[align="center"], 207 | .reveal table td[align="center"] { 208 | text-align: center; 209 | } 210 | 211 | .reveal table th[align="right"], 212 | .reveal table td[align="right"] { 213 | text-align: right; 214 | } 215 | 216 | .reveal table tbody tr:last-child th, 217 | .reveal table tbody tr:last-child td { 218 | border-bottom: none; 219 | } 220 | 221 | .reveal sup { 222 | vertical-align: super; 223 | } 224 | .reveal sub { 225 | vertical-align: sub; 226 | } 227 | 228 | .reveal small { 229 | display: inline-block; 230 | font-size: 0.6em; 231 | line-height: 1.2em; 232 | vertical-align: top; 233 | } 234 | 235 | .reveal small * { 236 | vertical-align: top; 237 | } 238 | 239 | 240 | /********************************************* 241 | * LINKS 242 | *********************************************/ 243 | 244 | .reveal a { 245 | color: $linkColor; 246 | text-decoration: none; 247 | 248 | -webkit-transition: color .15s ease; 249 | -moz-transition: color .15s ease; 250 | transition: color .15s ease; 251 | } 252 | .reveal a:hover { 253 | color: $linkColorHover; 254 | 255 | text-shadow: none; 256 | border: none; 257 | } 258 | 259 | .reveal .roll span:after { 260 | color: #fff; 261 | background: darken( $linkColor, 15% ); 262 | } 263 | 264 | 265 | /********************************************* 266 | * IMAGES 267 | *********************************************/ 268 | 269 | .reveal section img { 270 | margin: 15px 0px; 271 | background: rgba(255,255,255,0.12); 272 | border: 4px solid $mainColor; 273 | 274 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); 275 | } 276 | 277 | .reveal section img.plain { 278 | border: 0; 279 | box-shadow: none; 280 | } 281 | 282 | .reveal a img { 283 | -webkit-transition: all .15s linear; 284 | -moz-transition: all .15s linear; 285 | transition: all .15s linear; 286 | } 287 | 288 | .reveal a:hover img { 289 | background: rgba(255,255,255,0.2); 290 | border-color: $linkColor; 291 | 292 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); 293 | } 294 | 295 | 296 | /********************************************* 297 | * NAVIGATION CONTROLS 298 | *********************************************/ 299 | 300 | .reveal .controls .navigate-left, 301 | .reveal .controls .navigate-left.enabled { 302 | border-right-color: $linkColor; 303 | } 304 | 305 | .reveal .controls .navigate-right, 306 | .reveal .controls .navigate-right.enabled { 307 | border-left-color: $linkColor; 308 | } 309 | 310 | .reveal .controls .navigate-up, 311 | .reveal .controls .navigate-up.enabled { 312 | border-bottom-color: $linkColor; 313 | } 314 | 315 | .reveal .controls .navigate-down, 316 | .reveal .controls .navigate-down.enabled { 317 | border-top-color: $linkColor; 318 | } 319 | 320 | .reveal .controls .navigate-left.enabled:hover { 321 | border-right-color: $linkColorHover; 322 | } 323 | 324 | .reveal .controls .navigate-right.enabled:hover { 325 | border-left-color: $linkColorHover; 326 | } 327 | 328 | .reveal .controls .navigate-up.enabled:hover { 329 | border-bottom-color: $linkColorHover; 330 | } 331 | 332 | .reveal .controls .navigate-down.enabled:hover { 333 | border-top-color: $linkColorHover; 334 | } 335 | 336 | 337 | /********************************************* 338 | * PROGRESS BAR 339 | *********************************************/ 340 | 341 | .reveal .progress { 342 | background: rgba(0,0,0,0.2); 343 | } 344 | .reveal .progress span { 345 | background: $linkColor; 346 | 347 | -webkit-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); 348 | -moz-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); 349 | transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); 350 | } 351 | 352 | 353 | -------------------------------------------------------------------------------- /reveal/css/theme/white.css: -------------------------------------------------------------------------------- 1 | /** 2 | * White theme for reveal.js. This is the opposite of the 'black' theme. 3 | * 4 | * By Hakim El Hattab, http://hakim.se 5 | */ 6 | @import url(../../lib/font/source-sans-pro/source-sans-pro.css); 7 | section.has-dark-background, section.has-dark-background h1, section.has-dark-background h2, section.has-dark-background h3, section.has-dark-background h4, section.has-dark-background h5, section.has-dark-background h6 { 8 | color: #fff; } 9 | 10 | /********************************************* 11 | * GLOBAL STYLES 12 | *********************************************/ 13 | body { 14 | background: #fff; 15 | background-color: #fff; } 16 | 17 | .reveal { 18 | font-family: "Source Sans Pro", Helvetica, sans-serif; 19 | font-size: 42px; 20 | font-weight: normal; 21 | color: #222; } 22 | 23 | ::selection { 24 | color: #fff; 25 | background: #98bdef; 26 | text-shadow: none; } 27 | 28 | ::-moz-selection { 29 | color: #fff; 30 | background: #98bdef; 31 | text-shadow: none; } 32 | 33 | .reveal .slides > section, 34 | .reveal .slides > section > section { 35 | line-height: 1.3; 36 | font-weight: inherit; } 37 | 38 | /********************************************* 39 | * HEADERS 40 | *********************************************/ 41 | .reveal h1, 42 | .reveal h2, 43 | .reveal h3, 44 | .reveal h4, 45 | .reveal h5, 46 | .reveal h6 { 47 | margin: 0 0 20px 0; 48 | color: #222; 49 | font-family: "Source Sans Pro", Helvetica, sans-serif; 50 | font-weight: 600; 51 | line-height: 1.2; 52 | letter-spacing: normal; 53 | text-transform: uppercase; 54 | text-shadow: none; 55 | word-wrap: break-word; } 56 | 57 | .reveal h1 { 58 | font-size: 2.5em; } 59 | 60 | .reveal h2 { 61 | font-size: 1.6em; } 62 | 63 | .reveal h3 { 64 | font-size: 1.3em; } 65 | 66 | .reveal h4 { 67 | font-size: 1em; } 68 | 69 | .reveal h1 { 70 | text-shadow: none; } 71 | 72 | /********************************************* 73 | * OTHER 74 | *********************************************/ 75 | .reveal p { 76 | margin: 20px 0; 77 | line-height: 1.3; } 78 | 79 | /* Ensure certain elements are never larger than the slide itself */ 80 | .reveal img, 81 | .reveal video, 82 | .reveal iframe { 83 | max-width: 95%; 84 | max-height: 95%; } 85 | 86 | .reveal strong, 87 | .reveal b { 88 | font-weight: bold; } 89 | 90 | .reveal em { 91 | font-style: italic; } 92 | 93 | .reveal ol, 94 | .reveal dl, 95 | .reveal ul { 96 | display: inline-block; 97 | text-align: left; 98 | margin: 0 0 0 1em; } 99 | 100 | .reveal ol { 101 | list-style-type: decimal; } 102 | 103 | .reveal ul { 104 | list-style-type: disc; } 105 | 106 | .reveal ul ul { 107 | list-style-type: square; } 108 | 109 | .reveal ul ul ul { 110 | list-style-type: circle; } 111 | 112 | .reveal ul ul, 113 | .reveal ul ol, 114 | .reveal ol ol, 115 | .reveal ol ul { 116 | display: block; 117 | margin-left: 40px; } 118 | 119 | .reveal dt { 120 | font-weight: bold; } 121 | 122 | .reveal dd { 123 | margin-left: 40px; } 124 | 125 | .reveal q, 126 | .reveal blockquote { 127 | quotes: none; } 128 | 129 | .reveal blockquote { 130 | display: block; 131 | position: relative; 132 | width: 70%; 133 | margin: 20px auto; 134 | padding: 5px; 135 | font-style: italic; 136 | background: rgba(255, 255, 255, 0.05); 137 | box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); } 138 | 139 | .reveal blockquote p:first-child, 140 | .reveal blockquote p:last-child { 141 | display: inline-block; } 142 | 143 | .reveal q { 144 | font-style: italic; } 145 | 146 | .reveal pre { 147 | display: block; 148 | position: relative; 149 | width: 90%; 150 | margin: 20px auto; 151 | text-align: left; 152 | font-size: 0.55em; 153 | font-family: monospace; 154 | line-height: 1.2em; 155 | word-wrap: break-word; 156 | box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); } 157 | 158 | .reveal code { 159 | font-family: monospace; } 160 | 161 | .reveal pre code { 162 | display: block; 163 | padding: 5px; 164 | overflow: auto; 165 | max-height: 400px; 166 | word-wrap: normal; } 167 | 168 | .reveal table { 169 | margin: auto; 170 | border-collapse: collapse; 171 | border-spacing: 0; } 172 | 173 | .reveal table th { 174 | font-weight: bold; } 175 | 176 | .reveal table th, 177 | .reveal table td { 178 | text-align: left; 179 | padding: 0.2em 0.5em 0.2em 0.5em; 180 | border-bottom: 1px solid; } 181 | 182 | .reveal table th[align="center"], 183 | .reveal table td[align="center"] { 184 | text-align: center; } 185 | 186 | .reveal table th[align="right"], 187 | .reveal table td[align="right"] { 188 | text-align: right; } 189 | 190 | .reveal table tbody tr:last-child th, 191 | .reveal table tbody tr:last-child td { 192 | border-bottom: none; } 193 | 194 | .reveal sup { 195 | vertical-align: super; } 196 | 197 | .reveal sub { 198 | vertical-align: sub; } 199 | 200 | .reveal small { 201 | display: inline-block; 202 | font-size: 0.6em; 203 | line-height: 1.2em; 204 | vertical-align: top; } 205 | 206 | .reveal small * { 207 | vertical-align: top; } 208 | 209 | /********************************************* 210 | * LINKS 211 | *********************************************/ 212 | .reveal a { 213 | color: #2a76dd; 214 | text-decoration: none; 215 | -webkit-transition: color .15s ease; 216 | -moz-transition: color .15s ease; 217 | transition: color .15s ease; } 218 | 219 | .reveal a:hover { 220 | color: #6ca0e8; 221 | text-shadow: none; 222 | border: none; } 223 | 224 | .reveal .roll span:after { 225 | color: #fff; 226 | background: #1a53a1; } 227 | 228 | /********************************************* 229 | * IMAGES 230 | *********************************************/ 231 | .reveal section img { 232 | margin: 15px 0px; 233 | background: rgba(255, 255, 255, 0.12); 234 | border: 4px solid #222; 235 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); } 236 | 237 | .reveal section img.plain { 238 | border: 0; 239 | box-shadow: none; } 240 | 241 | .reveal a img { 242 | -webkit-transition: all .15s linear; 243 | -moz-transition: all .15s linear; 244 | transition: all .15s linear; } 245 | 246 | .reveal a:hover img { 247 | background: rgba(255, 255, 255, 0.2); 248 | border-color: #2a76dd; 249 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); } 250 | 251 | /********************************************* 252 | * NAVIGATION CONTROLS 253 | *********************************************/ 254 | .reveal .controls .navigate-left, 255 | .reveal .controls .navigate-left.enabled { 256 | border-right-color: #2a76dd; } 257 | 258 | .reveal .controls .navigate-right, 259 | .reveal .controls .navigate-right.enabled { 260 | border-left-color: #2a76dd; } 261 | 262 | .reveal .controls .navigate-up, 263 | .reveal .controls .navigate-up.enabled { 264 | border-bottom-color: #2a76dd; } 265 | 266 | .reveal .controls .navigate-down, 267 | .reveal .controls .navigate-down.enabled { 268 | border-top-color: #2a76dd; } 269 | 270 | .reveal .controls .navigate-left.enabled:hover { 271 | border-right-color: #6ca0e8; } 272 | 273 | .reveal .controls .navigate-right.enabled:hover { 274 | border-left-color: #6ca0e8; } 275 | 276 | .reveal .controls .navigate-up.enabled:hover { 277 | border-bottom-color: #6ca0e8; } 278 | 279 | .reveal .controls .navigate-down.enabled:hover { 280 | border-top-color: #6ca0e8; } 281 | 282 | /********************************************* 283 | * PROGRESS BAR 284 | *********************************************/ 285 | .reveal .progress { 286 | background: rgba(0, 0, 0, 0.2); } 287 | 288 | .reveal .progress span { 289 | background: #2a76dd; 290 | -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 291 | -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 292 | transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } 293 | -------------------------------------------------------------------------------- /reveal/img/dark-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 19 | 21 | 43 | 45 | 46 | 48 | image/svg+xml 49 | 51 | 52 | 53 | 54 | 55 | 60 | 66 | 72 | 78 | 85 | 91 | 97 | 103 | 104 | 105 | -------------------------------------------------------------------------------- /reveal/img/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 19 | 21 | 43 | 45 | 46 | 48 | image/svg+xml 49 | 51 | 52 | 53 | 54 | 55 | 60 | 66 | 72 | 78 | 85 | 91 | 97 | 103 | 104 | 105 | -------------------------------------------------------------------------------- /reveal/lib/css/vscode.css: -------------------------------------------------------------------------------- 1 | .hljs{display:block;overflow-x:auto;padding:0.5em;background:white;color:black}.hljs-comment,.hljs-quote,.hljs-variable{color:#008000}.hljs-keyword,.hljs-selector-tag,.hljs-built_in,.hljs-name,.hljs-tag{color:#00f}.hljs-string,.hljs-title,.hljs-section,.hljs-attribute,.hljs-literal,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-addition{color:#a31515}.hljs-deletion,.hljs-selector-attr,.hljs-selector-pseudo,.hljs-meta{color:#2b91af}.hljs-doctag{color:#808080}.hljs-attr{color:#f00}.hljs-symbol,.hljs-bullet,.hljs-link{color:#00b0e8}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:bold} 2 | -------------------------------------------------------------------------------- /reveal/lib/font/league-gothic/LICENSE: -------------------------------------------------------------------------------- 1 | SIL Open Font License (OFL) 2 | http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL 3 | -------------------------------------------------------------------------------- /reveal/lib/font/league-gothic/league-gothic.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'League Gothic'; 3 | src: url('league-gothic.eot'); 4 | src: url('league-gothic.eot?#iefix') format('embedded-opentype'), 5 | url('league-gothic.woff') format('woff'), 6 | url('league-gothic.ttf') format('truetype'); 7 | 8 | font-weight: normal; 9 | font-style: normal; 10 | } -------------------------------------------------------------------------------- /reveal/lib/font/league-gothic/league-gothic.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pheymann/scala-reveal-js/cf79889f402f4d2705048ece4d99c6a076f8f84d/reveal/lib/font/league-gothic/league-gothic.eot -------------------------------------------------------------------------------- /reveal/lib/font/league-gothic/league-gothic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pheymann/scala-reveal-js/cf79889f402f4d2705048ece4d99c6a076f8f84d/reveal/lib/font/league-gothic/league-gothic.ttf -------------------------------------------------------------------------------- /reveal/lib/font/league-gothic/league-gothic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pheymann/scala-reveal-js/cf79889f402f4d2705048ece4d99c6a076f8f84d/reveal/lib/font/league-gothic/league-gothic.woff -------------------------------------------------------------------------------- /reveal/lib/font/source-sans-pro/LICENSE: -------------------------------------------------------------------------------- 1 | SIL Open Font License 2 | 3 | Copyright 2010, 2012 Adobe Systems Incorporated (http://www.adobe.com/), with Reserved Font Name ‘Source’. All Rights Reserved. Source is a trademark of Adobe Systems Incorporated in the United States and/or other countries. 4 | 5 | This Font Software is licensed under the SIL Open Font License, Version 1.1. 6 | This license is copied below, and is also available with a FAQ at: http://scripts.sil.org/OFL 7 | 8 | —————————————————————————————- 9 | SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 10 | —————————————————————————————- 11 | 12 | PREAMBLE 13 | The goals of the Open Font License (OFL) are to stimulate worldwide development of collaborative font projects, to support the font creation efforts of academic and linguistic communities, and to provide a free and open framework in which fonts may be shared and improved in partnership with others. 14 | 15 | The OFL allows the licensed fonts to be used, studied, modified and redistributed freely as long as they are not sold by themselves. The fonts, including any derivative works, can be bundled, embedded, redistributed and/or sold with any software provided that any reserved names are not used by derivative works. The fonts and derivatives, however, cannot be released under any other type of license. The requirement for fonts to remain under this license does not apply to any document created using the fonts or their derivatives. 16 | 17 | DEFINITIONS 18 | “Font Software” refers to the set of files released by the Copyright Holder(s) under this license and clearly marked as such. This may include source files, build scripts and documentation. 19 | 20 | “Reserved Font Name” refers to any names specified as such after the copyright statement(s). 21 | 22 | “Original Version” refers to the collection of Font Software components as distributed by the Copyright Holder(s). 23 | 24 | “Modified Version” refers to any derivative made by adding to, deleting, or substituting—in part or in whole—any of the components of the Original Version, by changing formats or by porting the Font Software to a new environment. 25 | 26 | “Author” refers to any designer, engineer, programmer, technical writer or other person who contributed to the Font Software. 27 | 28 | PERMISSION & CONDITIONS 29 | Permission is hereby granted, free of charge, to any person obtaining a copy of the Font Software, to use, study, copy, merge, embed, modify, redistribute, and sell modified and unmodified copies of the Font Software, subject to the following conditions: 30 | 31 | 1) Neither the Font Software nor any of its individual components, in Original or Modified Versions, may be sold by itself. 32 | 33 | 2) Original or Modified Versions of the Font Software may be bundled, redistributed and/or sold with any software, provided that each copy contains the above copyright notice and this license. These can be included either as stand-alone text files, human-readable headers or in the appropriate machine-readable metadata fields within text or binary files as long as those fields can be easily viewed by the user. 34 | 35 | 3) No Modified Version of the Font Software may use the Reserved Font Name(s) unless explicit written permission is granted by the corresponding Copyright Holder. This restriction only applies to the primary font name as presented to the users. 36 | 37 | 4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font Software shall not be used to promote, endorse or advertise any Modified Version, except to acknowledge the contribution(s) of the Copyright Holder(s) and the Author(s) or with their explicit written permission. 38 | 39 | 5) The Font Software, modified or unmodified, in part or in whole, must be distributed entirely under this license, and must not be distributed under any other license. The requirement for fonts to remain under this license does not apply to any document created using the Font Software. 40 | 41 | TERMINATION 42 | This license becomes null and void if any of the above conditions are not met. 43 | 44 | DISCLAIMER 45 | THE FONT SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM OTHER DEALINGS IN THE FONT SOFTWARE. -------------------------------------------------------------------------------- /reveal/lib/font/source-sans-pro/source-sans-pro-italic.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pheymann/scala-reveal-js/cf79889f402f4d2705048ece4d99c6a076f8f84d/reveal/lib/font/source-sans-pro/source-sans-pro-italic.eot -------------------------------------------------------------------------------- /reveal/lib/font/source-sans-pro/source-sans-pro-italic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pheymann/scala-reveal-js/cf79889f402f4d2705048ece4d99c6a076f8f84d/reveal/lib/font/source-sans-pro/source-sans-pro-italic.ttf -------------------------------------------------------------------------------- /reveal/lib/font/source-sans-pro/source-sans-pro-italic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pheymann/scala-reveal-js/cf79889f402f4d2705048ece4d99c6a076f8f84d/reveal/lib/font/source-sans-pro/source-sans-pro-italic.woff -------------------------------------------------------------------------------- /reveal/lib/font/source-sans-pro/source-sans-pro-regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pheymann/scala-reveal-js/cf79889f402f4d2705048ece4d99c6a076f8f84d/reveal/lib/font/source-sans-pro/source-sans-pro-regular.eot -------------------------------------------------------------------------------- /reveal/lib/font/source-sans-pro/source-sans-pro-regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pheymann/scala-reveal-js/cf79889f402f4d2705048ece4d99c6a076f8f84d/reveal/lib/font/source-sans-pro/source-sans-pro-regular.ttf -------------------------------------------------------------------------------- /reveal/lib/font/source-sans-pro/source-sans-pro-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pheymann/scala-reveal-js/cf79889f402f4d2705048ece4d99c6a076f8f84d/reveal/lib/font/source-sans-pro/source-sans-pro-regular.woff -------------------------------------------------------------------------------- /reveal/lib/font/source-sans-pro/source-sans-pro-semibold.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pheymann/scala-reveal-js/cf79889f402f4d2705048ece4d99c6a076f8f84d/reveal/lib/font/source-sans-pro/source-sans-pro-semibold.eot -------------------------------------------------------------------------------- /reveal/lib/font/source-sans-pro/source-sans-pro-semibold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pheymann/scala-reveal-js/cf79889f402f4d2705048ece4d99c6a076f8f84d/reveal/lib/font/source-sans-pro/source-sans-pro-semibold.ttf -------------------------------------------------------------------------------- /reveal/lib/font/source-sans-pro/source-sans-pro-semibold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pheymann/scala-reveal-js/cf79889f402f4d2705048ece4d99c6a076f8f84d/reveal/lib/font/source-sans-pro/source-sans-pro-semibold.woff -------------------------------------------------------------------------------- /reveal/lib/font/source-sans-pro/source-sans-pro-semibolditalic.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pheymann/scala-reveal-js/cf79889f402f4d2705048ece4d99c6a076f8f84d/reveal/lib/font/source-sans-pro/source-sans-pro-semibolditalic.eot -------------------------------------------------------------------------------- /reveal/lib/font/source-sans-pro/source-sans-pro-semibolditalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pheymann/scala-reveal-js/cf79889f402f4d2705048ece4d99c6a076f8f84d/reveal/lib/font/source-sans-pro/source-sans-pro-semibolditalic.ttf -------------------------------------------------------------------------------- /reveal/lib/font/source-sans-pro/source-sans-pro-semibolditalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pheymann/scala-reveal-js/cf79889f402f4d2705048ece4d99c6a076f8f84d/reveal/lib/font/source-sans-pro/source-sans-pro-semibolditalic.woff -------------------------------------------------------------------------------- /reveal/lib/font/source-sans-pro/source-sans-pro.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'Source Sans Pro'; 3 | src: url('source-sans-pro-regular.eot'); 4 | src: url('source-sans-pro-regular.eot?#iefix') format('embedded-opentype'), 5 | url('source-sans-pro-regular.woff') format('woff'), 6 | url('source-sans-pro-regular.ttf') format('truetype'); 7 | font-weight: normal; 8 | font-style: normal; 9 | } 10 | 11 | @font-face { 12 | font-family: 'Source Sans Pro'; 13 | src: url('source-sans-pro-italic.eot'); 14 | src: url('source-sans-pro-italic.eot?#iefix') format('embedded-opentype'), 15 | url('source-sans-pro-italic.woff') format('woff'), 16 | url('source-sans-pro-italic.ttf') format('truetype'); 17 | font-weight: normal; 18 | font-style: italic; 19 | } 20 | 21 | @font-face { 22 | font-family: 'Source Sans Pro'; 23 | src: url('source-sans-pro-semibold.eot'); 24 | src: url('source-sans-pro-semibold.eot?#iefix') format('embedded-opentype'), 25 | url('source-sans-pro-semibold.woff') format('woff'), 26 | url('source-sans-pro-semibold.ttf') format('truetype'); 27 | font-weight: 600; 28 | font-style: normal; 29 | } 30 | 31 | @font-face { 32 | font-family: 'Source Sans Pro'; 33 | src: url('source-sans-pro-semibolditalic.eot'); 34 | src: url('source-sans-pro-semibolditalic.eot?#iefix') format('embedded-opentype'), 35 | url('source-sans-pro-semibolditalic.woff') format('woff'), 36 | url('source-sans-pro-semibolditalic.ttf') format('truetype'); 37 | font-weight: 600; 38 | font-style: italic; 39 | } -------------------------------------------------------------------------------- /reveal/lib/js/classList.js: -------------------------------------------------------------------------------- 1 | /*! @source http://purl.eligrey.com/github/classList.js/blob/master/classList.js*/ 2 | if(typeof document!=="undefined"&&!("classList" in document.createElement("a"))){(function(j){var a="classList",f="prototype",m=(j.HTMLElement||j.Element)[f],b=Object,k=String[f].trim||function(){return this.replace(/^\s+|\s+$/g,"")},c=Array[f].indexOf||function(q){var p=0,o=this.length;for(;pn?(i.screensCss.gt&&r("gt-"+n),i.screensCss.gte&&r("gte-"+n)):tt);u.feature("landscape",fe?(i.browserCss.gt&&r("gt-"+f+e),i.browserCss.gte&&r("gte-"+f+e)):h2&&this[u+1]!==t)u&&r(this.slice(u,u+1).join("-").toLowerCase()+i.section);else{var f=n||"index",e=f.indexOf(".");e>0&&(f=f.substring(0,e));c.id=f.toLowerCase()+i.page;u||r("root"+i.section)}});u.screen={height:n.screen.height,width:n.screen.width};tt();b=0;n.addEventListener?n.addEventListener("resize",it,!1):n.attachEvent("onresize",it)})(window); 3 | /*! head.css3 - v1.0.0 */ 4 | (function(n,t){"use strict";function a(n){for(var r in n)if(i[n[r]]!==t)return!0;return!1}function r(n){var t=n.charAt(0).toUpperCase()+n.substr(1),i=(n+" "+c.join(t+" ")+t).split(" ");return!!a(i)}var h=n.document,o=h.createElement("i"),i=o.style,s=" -o- -moz- -ms- -webkit- -khtml- ".split(" "),c="Webkit Moz O ms Khtml".split(" "),l=n.head_conf&&n.head_conf.head||"head",u=n[l],f={gradient:function(){var n="background-image:";return i.cssText=(n+s.join("gradient(linear,left top,right bottom,from(#9f9),to(#fff));"+n)+s.join("linear-gradient(left top,#eee,#fff);"+n)).slice(0,-n.length),!!i.backgroundImage},rgba:function(){return i.cssText="background-color:rgba(0,0,0,0.5)",!!i.backgroundColor},opacity:function(){return o.style.opacity===""},textshadow:function(){return i.textShadow===""},multiplebgs:function(){i.cssText="background:url(https://),url(https://),red url(https://)";var n=(i.background||"").match(/url/g);return Object.prototype.toString.call(n)==="[object Array]"&&n.length===3},boxshadow:function(){return r("boxShadow")},borderimage:function(){return r("borderImage")},borderradius:function(){return r("borderRadius")},cssreflections:function(){return r("boxReflect")},csstransforms:function(){return r("transform")},csstransitions:function(){return r("transition")},touch:function(){return"ontouchstart"in n},retina:function(){return n.devicePixelRatio>1},fontface:function(){var t=u.browser.name,n=u.browser.version;switch(t){case"ie":return n>=9;case"chrome":return n>=13;case"ff":return n>=6;case"ios":return n>=5;case"android":return!1;case"webkit":return n>=5.1;case"opera":return n>=10;default:return!1}}};for(var e in f)f[e]&&u.feature(e,f[e].call(),!0);u.feature()})(window); 5 | /*! head.load - v1.0.3 */ 6 | (function(n,t){"use strict";function w(){}function u(n,t){if(n){typeof n=="object"&&(n=[].slice.call(n));for(var i=0,r=n.length;i window.innerHeight - rangeY ) { 186 | window.scroll( scrollOffset.x, scrollOffset.y + ( 1 - ( window.innerHeight - mouseY ) / rangeY ) * ( 14 / level ) ); 187 | } 188 | 189 | // Left 190 | if( mouseX < rangeX ) { 191 | window.scroll( scrollOffset.x - ( 1 - ( mouseX / rangeX ) ) * ( 14 / level ), scrollOffset.y ); 192 | } 193 | // Right 194 | else if( mouseX > window.innerWidth - rangeX ) { 195 | window.scroll( scrollOffset.x + ( 1 - ( window.innerWidth - mouseX ) / rangeX ) * ( 14 / level ), scrollOffset.y ); 196 | } 197 | } 198 | 199 | function getScrollOffset() { 200 | return { 201 | x: window.scrollX !== undefined ? window.scrollX : window.pageXOffset, 202 | y: window.scrollY !== undefined ? window.scrollY : window.pageYOffset 203 | } 204 | } 205 | 206 | return { 207 | /** 208 | * Zooms in on either a rectangle or HTML element. 209 | * 210 | * @param {Object} options 211 | * - element: HTML element to zoom in on 212 | * OR 213 | * - x/y: coordinates in non-transformed space to zoom in on 214 | * - width/height: the portion of the screen to zoom in on 215 | * - scale: can be used instead of width/height to explicitly set scale 216 | */ 217 | to: function( options ) { 218 | 219 | // Due to an implementation limitation we can't zoom in 220 | // to another element without zooming out first 221 | if( level !== 1 ) { 222 | zoom.out(); 223 | } 224 | else { 225 | options.x = options.x || 0; 226 | options.y = options.y || 0; 227 | 228 | // If an element is set, that takes precedence 229 | if( !!options.element ) { 230 | // Space around the zoomed in element to leave on screen 231 | var padding = 20; 232 | var bounds = options.element.getBoundingClientRect(); 233 | 234 | options.x = bounds.left - padding; 235 | options.y = bounds.top - padding; 236 | options.width = bounds.width + ( padding * 2 ); 237 | options.height = bounds.height + ( padding * 2 ); 238 | } 239 | 240 | // If width/height values are set, calculate scale from those values 241 | if( options.width !== undefined && options.height !== undefined ) { 242 | options.scale = Math.max( Math.min( window.innerWidth / options.width, window.innerHeight / options.height ), 1 ); 243 | } 244 | 245 | if( options.scale > 1 ) { 246 | options.x *= options.scale; 247 | options.y *= options.scale; 248 | 249 | magnify( options, options.scale ); 250 | 251 | if( options.pan !== false ) { 252 | 253 | // Wait with engaging panning as it may conflict with the 254 | // zoom transition 255 | panEngageTimeout = setTimeout( function() { 256 | panUpdateInterval = setInterval( pan, 1000 / 60 ); 257 | }, 800 ); 258 | 259 | } 260 | } 261 | } 262 | }, 263 | 264 | /** 265 | * Resets the document zoom state to its default. 266 | */ 267 | out: function() { 268 | clearTimeout( panEngageTimeout ); 269 | clearInterval( panUpdateInterval ); 270 | 271 | magnify( { x: 0, y: 0 }, 1 ); 272 | 273 | level = 1; 274 | }, 275 | 276 | // Alias 277 | magnify: function( options ) { this.to( options ) }, 278 | reset: function() { this.out() }, 279 | 280 | zoomLevel: function() { 281 | return level; 282 | } 283 | } 284 | 285 | })(); 286 | 287 | 288 | 289 | -------------------------------------------------------------------------------- /shared/src/main/scala/shared/PresentationUtil.scala: -------------------------------------------------------------------------------- 1 | package shared 2 | 3 | import japgolly.scalajs.react._ 4 | import japgolly.scalajs.react.vdom.html_<^._ 5 | import japgolly.scalajs.react.vdom.TagOf 6 | import org.scalajs.dom 7 | import dom.raw.HTMLElement 8 | 9 | object PresentationUtil { 10 | 11 | val font = HtmlTag("font") 12 | 13 | val dataBackground = VdomAttr("data-background") 14 | val dataBackgroundColor = VdomAttr("data-background-color") 15 | val dataBackgroundSize = VdomAttr("data-background-size") 16 | val dataTrim = VdomAttr("data-trim") := "" 17 | val dataNoEscape = VdomAttr("data-noescape") := "" 18 | 19 | def chapter(slides: TagOf[HTMLElement]*): TagOf[HTMLElement] = <.section(slides: _*) 20 | 21 | def header(text: String, cls: String): TagOf[HTMLElement] = 22 | <.div( 23 | ^.cls := cls, 24 | <.p(text) 25 | ) 26 | 27 | // 100% side-effect full 28 | private def removeHeader(): Unit = { 29 | val headerElements = dom.document.getElementsByClassName("slide-header") 30 | 31 | (0 until headerElements.length).foreach { id => 32 | val element = headerElements(id) 33 | 34 | element.parentNode.removeChild(element) 35 | } 36 | } 37 | 38 | private def cleanSlide(content: TagOf[HTMLElement]): TagOf[HTMLElement] = { 39 | removeHeader() 40 | 41 | content 42 | } 43 | 44 | private val ChapterSlideProps = Seq( 45 | (dataBackgroundColor := "#363633"), 46 | (dataBackgroundSize := "30%") 47 | ) 48 | 49 | def chapterSlide(content: TagOf[HTMLElement]*): TagOf[HTMLElement] = cleanSlide( 50 | <.section( 51 | (ChapterSlideProps ++: content): _* 52 | ) 53 | ) 54 | 55 | def noHeaderSlide(content: TagOf[HTMLElement]*): TagOf[HTMLElement] = cleanSlide( 56 | <.section( 57 | content: _* 58 | ) 59 | ) 60 | 61 | def headerSlide(headerStr: String, content: TagOf[HTMLElement]*): TagOf[HTMLElement] = cleanSlide( 62 | <.section( 63 | (header(headerStr, "slide-header") +: content): _* 64 | ) 65 | ) 66 | 67 | private def rawCode(language: String, codeStr: String): TagOf[HTMLElement] = 68 | <.code( 69 | ^.cls := language, 70 | dataTrim, 71 | dataNoEscape, 72 | codeStr 73 | ) 74 | 75 | def bash(codeStr: String): TagOf[HTMLElement] = <.pre(rawCode("Bash", codeStr)) 76 | def scalaC(codeStr: String): TagOf[HTMLElement] = <.pre(rawCode("Scala", codeStr)) 77 | def haskell(codeStr: String): TagOf[HTMLElement] = <.pre(rawCode("Haskell", codeStr)) 78 | def lisp(codeStr: String): TagOf[HTMLElement] = <.pre(rawCode("Lisp", codeStr)) 79 | 80 | private def rawCodeFragment(language: String, codeStr: String): TagOf[HTMLElement] = 81 | <.pre( 82 | ^.cls := "fragment fade-in", 83 | rawCode(language, codeStr) 84 | ) 85 | 86 | def scalaFragment(codeStr: String): TagOf[HTMLElement] = rawCodeFragment("Scala", codeStr) 87 | def haskellFragment(codeStr: String): TagOf[HTMLElement] = rawCodeFragment("Haskell", codeStr) 88 | def lispFragment(codeStr: String): TagOf[HTMLElement] = rawCodeFragment("Lisp", codeStr) 89 | 90 | object Enumeration { 91 | 92 | object Item { 93 | 94 | def stable(content: TagOf[HTMLElement]): TagOf[HTMLElement] = <.li(content) 95 | def stable(content: String): TagOf[HTMLElement] = <.li(<.p(content)) 96 | def fadeIn(content: TagOf[HTMLElement]): TagOf[HTMLElement] = <.li(^.cls := "fragment fade-in", content) 97 | def fadeIn(content: String): TagOf[HTMLElement] = <.li(^.cls := "fragment fade-in", <.p(content)) 98 | } 99 | 100 | def apply(head: TagOf[HTMLElement], tail: TagOf[HTMLElement]*): TagOf[HTMLElement] = { 101 | <.ul( 102 | (head +: tail): _* 103 | ) 104 | } 105 | } 106 | } 107 | --------------------------------------------------------------------------------