├── LICENSE.md ├── README.md ├── dummy ├── img │ └── sample.png └── index.html ├── index.html └── shared ├── css ├── additional.css ├── index.css ├── print │ ├── paper.css │ └── pdf.css ├── reveal.css ├── reveal.min.css └── theme │ ├── README.md │ ├── beige.css │ ├── default.css │ ├── moon.css │ ├── night.css │ ├── serif.css │ ├── simple.css │ ├── sky.css │ ├── solarized.css │ ├── source │ ├── beige.scss │ ├── default.scss │ ├── moon.scss │ ├── night.scss │ ├── serif.scss │ ├── simple.scss │ ├── sky.scss │ └── solarized.scss │ └── template │ ├── mixins.scss │ ├── settings.scss │ └── theme.scss ├── current_relative_sample_url_image.jpg ├── js └── reveal.min.js ├── lib ├── css │ └── zenburn.css ├── font │ ├── league_gothic-webfont.eot │ ├── league_gothic-webfont.svg │ ├── league_gothic-webfont.ttf │ ├── league_gothic-webfont.woff │ └── league_gothic_license └── js │ ├── classList.js │ ├── head.min.js │ └── html5shiv.js └── plugin ├── highlight └── highlight.js ├── markdown ├── example.html ├── example.md ├── markdown.js └── marked.js ├── multiplex ├── client.js ├── index.js └── master.js ├── notes-server ├── client.js ├── index.js └── notes.html ├── notes ├── notes.html └── notes.js ├── postmessage ├── example.html └── postmessage.js ├── print-pdf └── print-pdf.js ├── remotes └── remotes.js ├── search └── search.js └── zoom-js └── zoom.js /LICENSE.md: -------------------------------------------------------------------------------- 1 | Attribution 4.0 International 2 | 3 | ======================================================================= 4 | 5 | Creative Commons Corporation ("Creative Commons") is not a law firm and 6 | does not provide legal services or legal advice. Distribution of 7 | Creative Commons public licenses does not create a lawyer-client or 8 | other relationship. Creative Commons makes its licenses and related 9 | information available on an "as-is" basis. Creative Commons gives no 10 | warranties regarding its licenses, any material licensed under their 11 | terms and conditions, or any related information. Creative Commons 12 | disclaims all liability for damages resulting from their use to the 13 | fullest extent possible. 14 | 15 | Using Creative Commons Public Licenses 16 | 17 | Creative Commons public licenses provide a standard set of terms and 18 | conditions that creators and other rights holders may use to share 19 | original works of authorship and other material subject to copyright 20 | and certain other rights specified in the public license below. The 21 | following considerations are for informational purposes only, are not 22 | exhaustive, and do not form part of our licenses. 23 | 24 | Considerations for licensors: Our public licenses are 25 | intended for use by those authorized to give the public 26 | permission to use material in ways otherwise restricted by 27 | copyright and certain other rights. Our licenses are 28 | irrevocable. Licensors should read and understand the terms 29 | and conditions of the license they choose before applying it. 30 | Licensors should also secure all rights necessary before 31 | applying our licenses so that the public can reuse the 32 | material as expected. Licensors should clearly mark any 33 | material not subject to the license. This includes other CC- 34 | licensed material, or material used under an exception or 35 | limitation to copyright. More considerations for licensors: 36 | wiki.creativecommons.org/Considerations_for_licensors 37 | 38 | Considerations for the public: By using one of our public 39 | licenses, a licensor grants the public permission to use the 40 | licensed material under specified terms and conditions. If 41 | the licensor's permission is not necessary for any reason--for 42 | example, because of any applicable exception or limitation to 43 | copyright--then that use is not regulated by the license. Our 44 | licenses grant only permissions under copyright and certain 45 | other rights that a licensor has authority to grant. Use of 46 | the licensed material may still be restricted for other 47 | reasons, including because others have copyright or other 48 | rights in the material. A licensor may make special requests, 49 | such as asking that all changes be marked or described. 50 | Although not required by our licenses, you are encouraged to 51 | respect those requests where reasonable. More_considerations 52 | for the public: 53 | wiki.creativecommons.org/Considerations_for_licensees 54 | 55 | ======================================================================= 56 | 57 | Creative Commons Attribution 4.0 International Public License 58 | 59 | By exercising the Licensed Rights (defined below), You accept and agree 60 | to be bound by the terms and conditions of this Creative Commons 61 | Attribution 4.0 International Public License ("Public License"). To the 62 | extent this Public License may be interpreted as a contract, You are 63 | granted the Licensed Rights in consideration of Your acceptance of 64 | these terms and conditions, and the Licensor grants You such rights in 65 | consideration of benefits the Licensor receives from making the 66 | Licensed Material available under these terms and conditions. 67 | 68 | 69 | Section 1 -- Definitions. 70 | 71 | a. Adapted Material means material subject to Copyright and Similar 72 | Rights that is derived from or based upon the Licensed Material 73 | and in which the Licensed Material is translated, altered, 74 | arranged, transformed, or otherwise modified in a manner requiring 75 | permission under the Copyright and Similar Rights held by the 76 | Licensor. For purposes of this Public License, where the Licensed 77 | Material is a musical work, performance, or sound recording, 78 | Adapted Material is always produced where the Licensed Material is 79 | synched in timed relation with a moving image. 80 | 81 | b. Adapter's License means the license You apply to Your Copyright 82 | and Similar Rights in Your contributions to Adapted Material in 83 | accordance with the terms and conditions of this Public License. 84 | 85 | c. Copyright and Similar Rights means copyright and/or similar rights 86 | closely related to copyright including, without limitation, 87 | performance, broadcast, sound recording, and Sui Generis Database 88 | Rights, without regard to how the rights are labeled or 89 | categorized. For purposes of this Public License, the rights 90 | specified in Section 2(b)(1)-(2) are not Copyright and Similar 91 | Rights. 92 | 93 | d. Effective Technological Measures means those measures that, in the 94 | absence of proper authority, may not be circumvented under laws 95 | fulfilling obligations under Article 11 of the WIPO Copyright 96 | Treaty adopted on December 20, 1996, and/or similar international 97 | agreements. 98 | 99 | e. Exceptions and Limitations means fair use, fair dealing, and/or 100 | any other exception or limitation to Copyright and Similar Rights 101 | that applies to Your use of the Licensed Material. 102 | 103 | f. Licensed Material means the artistic or literary work, database, 104 | or other material to which the Licensor applied this Public 105 | License. 106 | 107 | g. Licensed Rights means the rights granted to You subject to the 108 | terms and conditions of this Public License, which are limited to 109 | all Copyright and Similar Rights that apply to Your use of the 110 | Licensed Material and that the Licensor has authority to license. 111 | 112 | h. Licensor means the individual(s) or entity(ies) granting rights 113 | under this Public License. 114 | 115 | i. Share means to provide material to the public by any means or 116 | process that requires permission under the Licensed Rights, such 117 | as reproduction, public display, public performance, distribution, 118 | dissemination, communication, or importation, and to make material 119 | available to the public including in ways that members of the 120 | public may access the material from a place and at a time 121 | individually chosen by them. 122 | 123 | j. Sui Generis Database Rights means rights other than copyright 124 | resulting from Directive 96/9/EC of the European Parliament and of 125 | the Council of 11 March 1996 on the legal protection of databases, 126 | as amended and/or succeeded, as well as other essentially 127 | equivalent rights anywhere in the world. 128 | 129 | k. You means the individual or entity exercising the Licensed Rights 130 | under this Public License. Your has a corresponding meaning. 131 | 132 | 133 | Section 2 -- Scope. 134 | 135 | a. License grant. 136 | 137 | 1. Subject to the terms and conditions of this Public License, 138 | the Licensor hereby grants You a worldwide, royalty-free, 139 | non-sublicensable, non-exclusive, irrevocable license to 140 | exercise the Licensed Rights in the Licensed Material to: 141 | 142 | a. reproduce and Share the Licensed Material, in whole or 143 | in part; and 144 | 145 | b. produce, reproduce, and Share Adapted Material. 146 | 147 | 2. Exceptions and Limitations. For the avoidance of doubt, where 148 | Exceptions and Limitations apply to Your use, this Public 149 | License does not apply, and You do not need to comply with 150 | its terms and conditions. 151 | 152 | 3. Term. The term of this Public License is specified in Section 153 | 6(a). 154 | 155 | 4. Media and formats; technical modifications allowed. The 156 | Licensor authorizes You to exercise the Licensed Rights in 157 | all media and formats whether now known or hereafter created, 158 | and to make technical modifications necessary to do so. The 159 | Licensor waives and/or agrees not to assert any right or 160 | authority to forbid You from making technical modifications 161 | necessary to exercise the Licensed Rights, including 162 | technical modifications necessary to circumvent Effective 163 | Technological Measures. For purposes of this Public License, 164 | simply making modifications authorized by this Section 2(a) 165 | (4) never produces Adapted Material. 166 | 167 | 5. Downstream recipients. 168 | 169 | a. Offer from the Licensor -- Licensed Material. Every 170 | recipient of the Licensed Material automatically 171 | receives an offer from the Licensor to exercise the 172 | Licensed Rights under the terms and conditions of this 173 | Public License. 174 | 175 | b. No downstream restrictions. You may not offer or impose 176 | any additional or different terms or conditions on, or 177 | apply any Effective Technological Measures to, the 178 | Licensed Material if doing so restricts exercise of the 179 | Licensed Rights by any recipient of the Licensed 180 | Material. 181 | 182 | 6. No endorsement. Nothing in this Public License constitutes or 183 | may be construed as permission to assert or imply that You 184 | are, or that Your use of the Licensed Material is, connected 185 | with, or sponsored, endorsed, or granted official status by, 186 | the Licensor or others designated to receive attribution as 187 | provided in Section 3(a)(1)(A)(i). 188 | 189 | b. Other rights. 190 | 191 | 1. Moral rights, such as the right of integrity, are not 192 | licensed under this Public License, nor are publicity, 193 | privacy, and/or other similar personality rights; however, to 194 | the extent possible, the Licensor waives and/or agrees not to 195 | assert any such rights held by the Licensor to the limited 196 | extent necessary to allow You to exercise the Licensed 197 | Rights, but not otherwise. 198 | 199 | 2. Patent and trademark rights are not licensed under this 200 | Public License. 201 | 202 | 3. To the extent possible, the Licensor waives any right to 203 | collect royalties from You for the exercise of the Licensed 204 | Rights, whether directly or through a collecting society 205 | under any voluntary or waivable statutory or compulsory 206 | licensing scheme. In all other cases the Licensor expressly 207 | reserves any right to collect such royalties. 208 | 209 | 210 | Section 3 -- License Conditions. 211 | 212 | Your exercise of the Licensed Rights is expressly made subject to the 213 | following conditions. 214 | 215 | a. Attribution. 216 | 217 | 1. If You Share the Licensed Material (including in modified 218 | form), You must: 219 | 220 | a. retain the following if it is supplied by the Licensor 221 | with the Licensed Material: 222 | 223 | i. identification of the creator(s) of the Licensed 224 | Material and any others designated to receive 225 | attribution, in any reasonable manner requested by 226 | the Licensor (including by pseudonym if 227 | designated); 228 | 229 | ii. a copyright notice; 230 | 231 | iii. a notice that refers to this Public License; 232 | 233 | iv. a notice that refers to the disclaimer of 234 | warranties; 235 | 236 | v. a URI or hyperlink to the Licensed Material to the 237 | extent reasonably practicable; 238 | 239 | b. indicate if You modified the Licensed Material and 240 | retain an indication of any previous modifications; and 241 | 242 | c. indicate the Licensed Material is licensed under this 243 | Public License, and include the text of, or the URI or 244 | hyperlink to, this Public License. 245 | 246 | 2. You may satisfy the conditions in Section 3(a)(1) in any 247 | reasonable manner based on the medium, means, and context in 248 | which You Share the Licensed Material. For example, it may be 249 | reasonable to satisfy the conditions by providing a URI or 250 | hyperlink to a resource that includes the required 251 | information. 252 | 253 | 3. If requested by the Licensor, You must remove any of the 254 | information required by Section 3(a)(1)(A) to the extent 255 | reasonably practicable. 256 | 257 | 4. If You Share Adapted Material You produce, the Adapter's 258 | License You apply must not prevent recipients of the Adapted 259 | Material from complying with this Public License. 260 | 261 | 262 | Section 4 -- Sui Generis Database Rights. 263 | 264 | Where the Licensed Rights include Sui Generis Database Rights that 265 | apply to Your use of the Licensed Material: 266 | 267 | a. for the avoidance of doubt, Section 2(a)(1) grants You the right 268 | to extract, reuse, reproduce, and Share all or a substantial 269 | portion of the contents of the database; 270 | 271 | b. if You include all or a substantial portion of the database 272 | contents in a database in which You have Sui Generis Database 273 | Rights, then the database in which You have Sui Generis Database 274 | Rights (but not its individual contents) is Adapted Material; and 275 | 276 | c. You must comply with the conditions in Section 3(a) if You Share 277 | all or a substantial portion of the contents of the database. 278 | 279 | For the avoidance of doubt, this Section 4 supplements and does not 280 | replace Your obligations under this Public License where the Licensed 281 | Rights include other Copyright and Similar Rights. 282 | 283 | 284 | Section 5 -- Disclaimer of Warranties and Limitation of Liability. 285 | 286 | a. UNLESS OTHERWISE SEPARATELY UNDERTAKEN BY THE LICENSOR, TO THE 287 | EXTENT POSSIBLE, THE LICENSOR OFFERS THE LICENSED MATERIAL AS-IS 288 | AND AS-AVAILABLE, AND MAKES NO REPRESENTATIONS OR WARRANTIES OF 289 | ANY KIND CONCERNING THE LICENSED MATERIAL, WHETHER EXPRESS, 290 | IMPLIED, STATUTORY, OR OTHER. THIS INCLUDES, WITHOUT LIMITATION, 291 | WARRANTIES OF TITLE, MERCHANTABILITY, FITNESS FOR A PARTICULAR 292 | PURPOSE, NON-INFRINGEMENT, ABSENCE OF LATENT OR OTHER DEFECTS, 293 | ACCURACY, OR THE PRESENCE OR ABSENCE OF ERRORS, WHETHER OR NOT 294 | KNOWN OR DISCOVERABLE. WHERE DISCLAIMERS OF WARRANTIES ARE NOT 295 | ALLOWED IN FULL OR IN PART, THIS DISCLAIMER MAY NOT APPLY TO YOU. 296 | 297 | b. TO THE EXTENT POSSIBLE, IN NO EVENT WILL THE LICENSOR BE LIABLE 298 | TO YOU ON ANY LEGAL THEORY (INCLUDING, WITHOUT LIMITATION, 299 | NEGLIGENCE) OR OTHERWISE FOR ANY DIRECT, SPECIAL, INDIRECT, 300 | INCIDENTAL, CONSEQUENTIAL, PUNITIVE, EXEMPLARY, OR OTHER LOSSES, 301 | COSTS, EXPENSES, OR DAMAGES ARISING OUT OF THIS PUBLIC LICENSE OR 302 | USE OF THE LICENSED MATERIAL, EVEN IF THE LICENSOR HAS BEEN 303 | ADVISED OF THE POSSIBILITY OF SUCH LOSSES, COSTS, EXPENSES, OR 304 | DAMAGES. WHERE A LIMITATION OF LIABILITY IS NOT ALLOWED IN FULL OR 305 | IN PART, THIS LIMITATION MAY NOT APPLY TO YOU. 306 | 307 | c. The disclaimer of warranties and limitation of liability provided 308 | above shall be interpreted in a manner that, to the extent 309 | possible, most closely approximates an absolute disclaimer and 310 | waiver of all liability. 311 | 312 | 313 | Section 6 -- Term and Termination. 314 | 315 | a. This Public License applies for the term of the Copyright and 316 | Similar Rights licensed here. However, if You fail to comply with 317 | this Public License, then Your rights under this Public License 318 | terminate automatically. 319 | 320 | b. Where Your right to use the Licensed Material has terminated under 321 | Section 6(a), it reinstates: 322 | 323 | 1. automatically as of the date the violation is cured, provided 324 | it is cured within 30 days of Your discovery of the 325 | violation; or 326 | 327 | 2. upon express reinstatement by the Licensor. 328 | 329 | For the avoidance of doubt, this Section 6(b) does not affect any 330 | right the Licensor may have to seek remedies for Your violations 331 | of this Public License. 332 | 333 | c. For the avoidance of doubt, the Licensor may also offer the 334 | Licensed Material under separate terms or conditions or stop 335 | distributing the Licensed Material at any time; however, doing so 336 | will not terminate this Public License. 337 | 338 | d. Sections 1, 5, 6, 7, and 8 survive termination of this Public 339 | License. 340 | 341 | 342 | Section 7 -- Other Terms and Conditions. 343 | 344 | a. The Licensor shall not be bound by any additional or different 345 | terms or conditions communicated by You unless expressly agreed. 346 | 347 | b. Any arrangements, understandings, or agreements regarding the 348 | Licensed Material not stated herein are separate from and 349 | independent of the terms and conditions of this Public License. 350 | 351 | 352 | Section 8 -- Interpretation. 353 | 354 | a. For the avoidance of doubt, this Public License does not, and 355 | shall not be interpreted to, reduce, limit, restrict, or impose 356 | conditions on any use of the Licensed Material that could lawfully 357 | be made without permission under this Public License. 358 | 359 | b. To the extent possible, if any provision of this Public License is 360 | deemed unenforceable, it shall be automatically reformed to the 361 | minimum extent necessary to make it enforceable. If the provision 362 | cannot be reformed, it shall be severed from this Public License 363 | without affecting the enforceability of the remaining terms and 364 | conditions. 365 | 366 | c. No term or condition of this Public License will be waived and no 367 | failure to comply consented to unless expressly agreed to by the 368 | Licensor. 369 | 370 | d. Nothing in this Public License constitutes or may be interpreted 371 | as a limitation upon, or waiver of, any privileges and immunities 372 | that apply to the Licensor or You, including from the legal 373 | processes of any jurisdiction or authority. 374 | 375 | 376 | ======================================================================= 377 | 378 | Creative Commons is not a party to its public 379 | licenses. Notwithstanding, Creative Commons may elect to apply one of 380 | its public licenses to material it publishes and in those instances 381 | will be considered the “Licensor.” The text of the Creative Commons 382 | public licenses is dedicated to the public domain under the CC0 Public 383 | Domain Dedication. Except for the limited purpose of indicating that 384 | material is shared under a Creative Commons public license or as 385 | otherwise permitted by the Creative Commons policies published at 386 | creativecommons.org/policies, Creative Commons does not authorize the 387 | use of the trademark "Creative Commons" or any other trademark or logo 388 | of Creative Commons without its prior written consent including, 389 | without limitation, in connection with any unauthorized modifications 390 | to any of its public licenses or any other arrangements, 391 | understandings, or agreements concerning use of licensed material. For 392 | the avoidance of doubt, this paragraph does not form part of the 393 | public licenses. 394 | 395 | Creative Commons may be contacted at creativecommons.org. 396 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![License: CC BY 4.0](https://img.shields.io/badge/License-CC%20BY%204.0-lightgrey.svg)](https://creativecommons.org/licenses/by/4.0/) 2 | 3 | Kottans also have JS chat room [![Join the chat at https://gitter.im/Kottans/kottans.github.io](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/Kottans/js-slides) 4 | 5 | A bunch of presenatations for Kottans JS, available at [gh-pages](http://kottans.github.io/js-slides/). 6 | 7 | Possible ways to contribute: 8 | - Fix a typo/error in slides via regular PR 9 | - Add slides link to the index.html page 10 | - Add slides, following steps, described in [dummy presentation](http://kottans.org/js-slides/dummy/). 11 | - Use [cleaver](https://github.com/jdan/cleaver): 12 | 1. Install cleaver (`npm i -g cleaver`). 13 | 2. Create folder and .md file in it ([sample](https://raw.githubusercontent.com/Kottans/js-slides/9ab0fb21964055027697ea3935025b894d576bc7/angular/index.md)). 14 | 3. Run `cleaver watch index.md` and serve/access that file locally. 15 | 16 | 17 | [![Join the chat at https://gitter.im/Kottans/js-slides](https://badges.gitter.im/Kottans/js-slides.svg)](https://gitter.im/Kottans/js-slides?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) 18 | -------------------------------------------------------------------------------- /dummy/img/sample.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kottans/js-slides/6645e6b42269ab0fa91b24ef661075e0f4cc6eb6/dummy/img/sample.png -------------------------------------------------------------------------------- /dummy/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Template presentation based on reveal.js intro 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 28 | 29 | 32 | 33 | 34 | 35 | 36 |
37 | 38 |
39 |
40 |

Creating presentation

41 |

Step 1. Get source

42 |
    43 |
  1. Go to slides project 44 |
    2. 45 | 46 |
  2. git clone it
    3. 47 |
  3. open folder with slides, copy the Dummy folder
    4. 48 |
  4. fire up server (see next slide)
    5. 49 |
50 |
51 |
52 |

Step 1.5 Firing up server

53 |

To serve your local assets, you can use one of the following commands:

54 |
55 | ruby -run -e httpd . -p
56 | or
57 | python -m SimpleHTTPServer 8080
58 | or
59 | npm install -g node-static && static -p 8080 60 |
61 |
62 |

Step 2. Edit presentation

63 |
    64 |
  1. add more sections to div.slides, embed your own javascript for current page, css, images, etc
    2. 65 |
  2. check if it runs okay and there're no errors in the console
    3. 66 |
  3. ready for pull request - be sure to push to your fork or remote branch
    4. 67 |
68 |
69 |
70 |

Arbitrary image

71 | this here for showing how to embed 72 | arbitrary images not from web 73 |

Check out reveal.js author's original presentation ->

74 |
75 |
76 |

Reveal.js

77 |

HTML Presentations Made Easy

78 |

79 | Created by Hakim El Hattab / @hakimel 80 |

81 |
82 | 83 |
84 |

Heads Up

85 |

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

89 | 90 | 93 |
94 | 95 | 96 |
97 |
98 |

Vertical Slides

99 |

100 | Slides can be nested inside of other slides, 101 | try pressing down. 102 |

103 | 104 | Down arrow 105 | 106 |
107 |
108 |

Basement Level 1

109 |

Press down or up to navigate.

110 |
111 |
112 |

Basement Level 2

113 |

Cornify

114 | 115 | Unicorn 116 | 117 |
118 |
119 |

Basement Level 3

120 |

That's it, time to go back up.

121 | 122 | Up arrow 123 | 124 |
125 |
126 | 127 |
128 |

Slides

129 |

130 | Not a coder? No problem. There's a fully-featured visual editor for authoring these, try it out at http://slid.es. 131 |

132 |
133 | 134 |
135 |

Point of View

136 |

137 | Press ESC to enter the slide overview. 138 |

139 |

140 | Hold down alt and click on any element to zoom in on it using zoom.js. Alt + click anywhere to zoom back out. 141 |

142 |
143 | 144 |
145 |

Works in Mobile Safari

146 |

147 | Try it out! You can swipe through the slides and pinch your way to the overview. 148 |

149 |
150 | 151 |
152 |

Marvelous Unordered List

153 |
    154 |
  • No order here
    • 155 |
  • Or here
    • 156 |
  • Or here
    • 157 |
  • Or here
    • 158 |
159 |
160 | 161 |
162 |

Fantastic Ordered List

163 |
    164 |
  1. One is smaller than...
    2. 165 |
  2. Two is smaller than...
    3. 166 |
  3. Three!
    4. 167 |
168 |
169 | 170 |
171 | 185 |
186 | 187 |
188 |

Transition Styles

189 |

190 | You can select from different transitions, like:
191 | Cube - 192 | Page - 193 | Concave - 194 | Zoom - 195 | Linear - 196 | Fade - 197 | None - 198 | Default 199 |

200 |
201 | 202 |
203 |

Themes

204 |

205 | Reveal.js comes with a few themes built in:
206 | Sky - 207 | Beige - 208 | Simple - 209 | Serif - 210 | Night - 211 | Default 212 |

213 |

214 | 215 | * Theme demos are loaded after the presentation which leads to flicker. In production you should load your theme in the <head> using a <link>. 216 | 217 |

218 |
219 | 220 |
221 |
222 |

Global State

223 |

224 | Set data-state="something" on a slide and "something" 225 | will be added as a class to the document element when the slide is open. This lets you 226 | apply broader style changes, like switching the background. 227 |

228 | 229 | Down arrow 230 | 231 |
232 |
233 |

"blackout"

234 | 235 | Down arrow 236 | 237 |
238 |
239 |

"soothe"

240 | 241 | Up arrow 242 | 243 |
244 |
245 | 246 |
247 |

Custom Events

248 |

249 | Additionally custom events can be triggered on a per slide basis by binding to the data-state name. 250 |

251 | 

252 | Reveal.addEventListener( 'customevent', function() {
253 | 	console.log( '"customevent" has fired' );
254 | } );
255 |
256 |
257 | 258 |
259 |

Clever Quotes

260 |

261 | These guys come in two forms, inline: 262 | “The nice thing about standards is that there are so many to choose from” and block: 263 |

264 |
265 | “For years there has been a theory that millions of monkeys typing at random on millions of typewriters would 266 | reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.” 267 |
268 |
269 | 270 |
271 |

Pretty Code

272 | 

273 | function linkify( selector ) {
274 |   if( supports3DTransforms ) {
275 | 
276 |     var nodes = document.querySelectorAll( selector );
277 | 
278 |     for( var i = 0, len = nodes.length; i < len; i++ ) {
279 |       var node = nodes[i];
280 | 
281 |       if( !node.className ) ) {
282 |         node.className += ' roll';
283 |       }
284 |     };
285 |   }
286 | }
287 |
288 |

Courtesy of highlight.js.

289 |
290 | 291 |
292 |

Intergalactic Interconnections

293 |

294 | You can link between slides internally, 295 | like this. 296 |

297 |
298 | 299 |
300 |
301 |

Fragmented Views

302 |

Hit the next arrow...

303 |

... to step through ...

304 |
    305 |
  1. any type
    2. 306 |
  2. of view
    3. 307 |
  3. fragments
    4. 308 |
309 | 310 | 313 |
314 |
315 |

Fragment Styles

316 |

There's a few styles of fragments, like:

317 |

grow

318 |

shrink

319 |

roll-in

320 |

fade-out

321 |

highlight-red

322 |

highlight-green

323 |

highlight-blue

324 |
325 |
326 | 327 |
328 |

Spectacular image!

329 | 330 | Meny 331 | 332 |
333 | 334 |
335 |

Export to PDF

336 |

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

337 | 338 | 341 |
342 | 343 |
344 |

Take a Moment

345 |

346 | Press b or period on your keyboard to enter the 'paused' mode. This mode is helpful when you want to take distracting slides off the screen 347 | during a presentation. 348 |

349 |
350 | 351 |
352 |

Stellar Links

353 | 358 |
359 | 360 |
361 |

THE END

362 |

BY Hakim El Hattab / hakim.se

363 |
  • Now, go back to Kottans.
    • 364 | 365 |
    366 | 367 |
    368 | 369 |
    370 | 371 | 372 | 373 | 374 | 399 | 400 | 401 | 402 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | JS presentations 6 | 7 | 8 | 9 | 10 | 11 | Fork me on GitHub 12 |
    13 |

    JS Presentations

    14 |
    15 |
    16 |
    17 |

    Dummy presentation

    18 |

    19 | Check this template out. It also demonstrates reveal.js capabilities. 20 |

    21 |

    22 | Take me there 23 |

    24 |
    25 |
    26 |

    Archive

    27 |

    28 | Slides from past courses 29 |

    30 |

    31 | Take me there 32 |

    33 |
    34 |
    35 |
    36 |
    37 | 38 | -------------------------------------------------------------------------------- /shared/css/additional.css: -------------------------------------------------------------------------------- 1 | .text-left { 2 | text-align: left; 3 | } 4 | 5 | .reveal ul.plain-list { 6 | list-style-type: none; 7 | } 8 | 9 | .annotated code { 10 | width: 49%; 11 | float: left; 12 | } 13 | 14 | .annotated .comments { 15 | font-size: 80%; 16 | width: -webkit-calc(49% - 40px); 17 | float: left; 18 | margin: 0 0 0 40px; 19 | padding: 0; 20 | } 21 | 22 | section .inline-code { 23 | display: inline-block; 24 | position: relative; 25 | text-align: left; 26 | margin: 0 5px; 27 | font-size: .55em; 28 | font-family: monospace; 29 | line-height: 1.2em; 30 | word-wrap: break-word; 31 | box-shadow: 0 0 6px rgba(0,0,0,.3); 32 | } 33 | 34 | ul.small-list li, 35 | ol.small-list li { 36 | margin: 12px 0; 37 | font-size: 80%; 38 | } 39 | 40 | table.table, table.table td, table.table th { 41 | border: 1px solid white; 42 | border-collapse:collapse; 43 | } 44 | 45 | .final { 46 | -webkit-transform: rotate(90deg); 47 | -moz-transform: rotate(90deg); 48 | transform: rotate(90deg); 49 | } 50 | 51 | .final:first-letter { 52 | background-color: purple; 53 | } 54 | 55 | .final:after { 56 | content: ')'; 57 | } 58 | 59 | span.small { 60 | display: inline-block; 61 | font-size: 0.5em; 62 | vertical-align: top; 63 | } 64 | 65 | abbr.dotted { 66 | border-bottom:1px dotted; 67 | } 68 | .reveal section pre.narrow { 69 | width: 50%; 70 | float: left; 71 | } 72 | 73 | .annotated code.comments { 74 | font-size: 1em; 75 | } -------------------------------------------------------------------------------- /shared/css/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: "Gill Sans","Gill Sans MT", Calibri, sans-serif; 3 | line-height: 1.25; 4 | color: #444; 5 | background: url("data:image/png;base64,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") repeat fixed 0 0 white; 6 | } 7 | 8 | h2 { 9 | font-family: Georgia, serif; 10 | font-weight: normal; 11 | padding: 42px 0 15px; 12 | color: #000; 13 | text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2); 14 | font-size: 36px; 15 | text-align: center; 16 | } 17 | 18 | h3 { 19 | color: #aaa; 20 | font-size: 24px; 21 | font-weight: 100; 22 | margin-bottom: 8px; 23 | } 24 | 25 | .presentations { 26 | width: 940px; 27 | margin: 0 auto; 28 | } 29 | 30 | .presentations .list { 31 | border-radius: 10px 10px 10px 10px; 32 | box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2); 33 | background: none repeat scroll 0 0 #fff; 34 | border: 1px solid #eee; 35 | text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); 36 | } 37 | 38 | .presentations .clmn { 39 | padding: 2% 4%; 40 | width: 25%; 41 | float: left; 42 | } 43 | 44 | .presentations .row:after { 45 | clear: both; 46 | content: ""; 47 | display: table; 48 | line-height: 0; 49 | } 50 | 51 | a.btn { 52 | display: inline-block; 53 | background: none repeat scroll 0 0 #559999; 54 | color: #fff; 55 | margin-right: 4px; 56 | padding: 5px 10px; 57 | font-weight: bold; 58 | text-decoration: none; 59 | box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3); 60 | border-radius: 3px 3px 3px 3px; 61 | } 62 | a.btn + a.btn { 63 | margin-top: 5px; 64 | } 65 | a.btn.secondary { 66 | background-color: #444; 67 | } 68 | a.uc { 69 | font-style:italic; 70 | color: #aaa; 71 | } -------------------------------------------------------------------------------- /shared/css/print/paper.css: -------------------------------------------------------------------------------- 1 | /* Default Print Stylesheet Template 2 | by Rob Glazebrook of CSSnewbie.com 3 | Last Updated: June 4, 2008 4 | 5 | Feel free (nay, compelled) to edit, append, and 6 | manipulate this file as you see fit. */ 7 | 8 | 9 | /* SECTION 1: Set default width, margin, float, and 10 | background. This prevents elements from extending 11 | beyond the edge of the printed page, and prevents 12 | unnecessary background images from printing */ 13 | body { 14 | background: #fff; 15 | font-size: 13pt; 16 | width: auto; 17 | height: auto; 18 | border: 0; 19 | margin: 0 5%; 20 | padding: 0; 21 | float: none !important; 22 | overflow: visible; 23 | } 24 | html { 25 | background: #fff; 26 | width: auto; 27 | height: auto; 28 | overflow: visible; 29 | } 30 | 31 | /* SECTION 2: Remove any elements not needed in print. 32 | This would include navigation, ads, sidebars, etc. */ 33 | .nestedarrow, 34 | .controls, 35 | .reveal .progress, 36 | .reveal.overview, 37 | .fork-reveal, 38 | .share-reveal, 39 | .state-background { 40 | display: none !important; 41 | } 42 | 43 | /* SECTION 3: Set body font face, size, and color. 44 | Consider using a serif font for readability. */ 45 | body, p, td, li, div, a { 46 | font-size: 16pt!important; 47 | font-family: Georgia, "Times New Roman", Times, serif !important; 48 | color: #000; 49 | } 50 | 51 | /* SECTION 4: Set heading font face, sizes, and color. 52 | Diffrentiate your headings from your body text. 53 | Perhaps use a large sans-serif for distinction. */ 54 | h1,h2,h3,h4,h5,h6 { 55 | color: #000!important; 56 | height: auto; 57 | line-height: normal; 58 | font-family: Georgia, "Times New Roman", Times, serif !important; 59 | text-shadow: 0 0 0 #000 !important; 60 | text-align: left; 61 | letter-spacing: normal; 62 | } 63 | /* Need to reduce the size of the fonts for printing */ 64 | h1 { font-size: 26pt !important; } 65 | h2 { font-size: 22pt !important; } 66 | h3 { font-size: 20pt !important; } 67 | h4 { font-size: 20pt !important; font-variant: small-caps; } 68 | h5 { font-size: 19pt !important; } 69 | h6 { font-size: 18pt !important; font-style: italic; } 70 | 71 | /* SECTION 5: Make hyperlinks more usable. 72 | Ensure links are underlined, and consider appending 73 | the URL to the end of the link for usability. */ 74 | a:link, 75 | a:visited { 76 | color: #000 !important; 77 | font-weight: bold; 78 | text-decoration: underline; 79 | } 80 | /* 81 | .reveal a:link:after, 82 | .reveal a:visited:after { 83 | content: " (" attr(href) ") "; 84 | color: #222 !important; 85 | font-size: 90%; 86 | } 87 | */ 88 | 89 | 90 | /* SECTION 6: more reveal.js specific additions by @skypanther */ 91 | ul, ol, div, p { 92 | visibility: visible; 93 | position: static; 94 | width: auto; 95 | height: auto; 96 | display: block; 97 | overflow: visible; 98 | margin: auto; 99 | text-align: left !important; 100 | } 101 | .reveal .slides { 102 | position: static; 103 | width: auto; 104 | height: auto; 105 | 106 | left: auto; 107 | top: auto; 108 | margin-left: auto; 109 | margin-top: auto; 110 | padding: auto; 111 | 112 | overflow: visible; 113 | display: block; 114 | 115 | text-align: center; 116 | -webkit-perspective: none; 117 | -moz-perspective: none; 118 | -ms-perspective: none; 119 | perspective: none; 120 | 121 | -webkit-perspective-origin: 50% 50%; /* there isn't a none/auto value but 50-50 is the default */ 122 | -moz-perspective-origin: 50% 50%; 123 | -ms-perspective-origin: 50% 50%; 124 | perspective-origin: 50% 50%; 125 | } 126 | .reveal .slides>section, 127 | .reveal .slides>section>section { 128 | 129 | visibility: visible !important; 130 | position: static !important; 131 | width: 90% !important; 132 | height: auto !important; 133 | display: block !important; 134 | overflow: visible !important; 135 | 136 | left: 0% !important; 137 | top: 0% !important; 138 | margin-left: 0px !important; 139 | margin-top: 0px !important; 140 | padding: 20px 0px !important; 141 | 142 | opacity: 1 !important; 143 | 144 | -webkit-transform-style: flat !important; 145 | -moz-transform-style: flat !important; 146 | -ms-transform-style: flat !important; 147 | transform-style: flat !important; 148 | 149 | -webkit-transform: none !important; 150 | -moz-transform: none !important; 151 | -ms-transform: none !important; 152 | transform: none !important; 153 | } 154 | .reveal section { 155 | page-break-after: always !important; 156 | display: block !important; 157 | } 158 | .reveal section .fragment { 159 | opacity: 1 !important; 160 | visibility: visible !important; 161 | 162 | -webkit-transform: none !important; 163 | -moz-transform: none !important; 164 | -ms-transform: none !important; 165 | transform: none !important; 166 | } 167 | .reveal section:last-of-type { 168 | page-break-after: avoid !important; 169 | } 170 | .reveal section img { 171 | display: block; 172 | margin: 15px 0px; 173 | background: rgba(255,255,255,1); 174 | border: 1px solid #666; 175 | box-shadow: none; 176 | } -------------------------------------------------------------------------------- /shared/css/print/pdf.css: -------------------------------------------------------------------------------- 1 | /* Default Print Stylesheet Template 2 | by Rob Glazebrook of CSSnewbie.com 3 | Last Updated: June 4, 2008 4 | 5 | Feel free (nay, compelled) to edit, append, and 6 | manipulate this file as you see fit. */ 7 | 8 | 9 | /* SECTION 1: Set default width, margin, float, and 10 | background. This prevents elements from extending 11 | beyond the edge of the printed page, and prevents 12 | unnecessary background images from printing */ 13 | 14 | * { 15 | -webkit-print-color-adjust: exact; 16 | } 17 | 18 | body { 19 | font-size: 18pt; 20 | width: auto; 21 | height: auto; 22 | border: 0; 23 | padding: 0; 24 | float: none !important; 25 | overflow: visible; 26 | } 27 | 28 | html { 29 | width: 100%; 30 | height: 100%; 31 | overflow: visible; 32 | } 33 | 34 | @page { 35 | size: letter landscape; 36 | margin: 0; 37 | } 38 | 39 | /* SECTION 2: Remove any elements not needed in print. 40 | This would include navigation, ads, sidebars, etc. */ 41 | .nestedarrow, 42 | .controls, 43 | .reveal .progress, 44 | .reveal.overview, 45 | .fork-reveal, 46 | .share-reveal, 47 | .state-background { 48 | display: none !important; 49 | } 50 | 51 | /* SECTION 3: Set body font face, size, and color. 52 | Consider using a serif font for readability. */ 53 | body, p, td, li, div { 54 | font-size: 18pt; 55 | } 56 | 57 | /* SECTION 4: Set heading font face, sizes, and color. 58 | Diffrentiate your headings from your body text. 59 | Perhaps use a large sans-serif for distinction. */ 60 | h1,h2,h3,h4,h5,h6 { 61 | text-shadow: 0 0 0 #000 !important; 62 | } 63 | 64 | /* SECTION 5: Make hyperlinks more usable. 65 | Ensure links are underlined, and consider appending 66 | the URL to the end of the link for usability. */ 67 | a:link, 68 | a:visited { 69 | font-weight: bold; 70 | text-decoration: underline; 71 | } 72 | 73 | 74 | /* SECTION 6: more reveal.js specific additions by @skypanther */ 75 | ul, ol, div, p { 76 | visibility: visible; 77 | position: static; 78 | width: auto; 79 | height: auto; 80 | display: block; 81 | overflow: visible; 82 | margin: auto; 83 | } 84 | .reveal .slides { 85 | position: static; 86 | width: 100%; 87 | height: auto; 88 | 89 | left: auto; 90 | top: auto; 91 | margin-left: auto; 92 | margin-right: auto; 93 | margin-top: auto; 94 | padding: auto; 95 | 96 | overflow: visible; 97 | display: block; 98 | 99 | text-align: center; 100 | 101 | -webkit-perspective: none; 102 | -moz-perspective: none; 103 | -ms-perspective: none; 104 | perspective: none; 105 | 106 | -webkit-perspective-origin: 50% 50%; /* there isn't a none/auto value but 50-50 is the default */ 107 | -moz-perspective-origin: 50% 50%; 108 | -ms-perspective-origin: 50% 50%; 109 | perspective-origin: 50% 50%; 110 | } 111 | .reveal .slides section { 112 | 113 | page-break-after: always !important; 114 | 115 | visibility: visible !important; 116 | position: static !important; 117 | width: 100% !important; 118 | height: auto !important; 119 | min-height: initial !important; 120 | display: block !important; 121 | overflow: visible !important; 122 | 123 | left: 0 !important; 124 | top: 0 !important; 125 | margin-left: 0px !important; 126 | margin-top: 50px !important; 127 | padding: 20px 0px !important; 128 | 129 | opacity: 1 !important; 130 | 131 | -webkit-transform-style: flat !important; 132 | -moz-transform-style: flat !important; 133 | -ms-transform-style: flat !important; 134 | transform-style: flat !important; 135 | 136 | -webkit-transform: none !important; 137 | -moz-transform: none !important; 138 | -ms-transform: none !important; 139 | transform: none !important; 140 | } 141 | .reveal section.stack { 142 | margin: 0px !important; 143 | padding: 0px !important; 144 | page-break-after: avoid !important; 145 | } 146 | .reveal section .fragment { 147 | opacity: 1 !important; 148 | visibility: visible !important; 149 | 150 | -webkit-transform: none !important; 151 | -moz-transform: none !important; 152 | -ms-transform: none !important; 153 | transform: none !important; 154 | } 155 | .reveal img { 156 | box-shadow: none; 157 | } 158 | .reveal .roll { 159 | overflow: visible; 160 | line-height: 1em; 161 | } 162 | .reveal small a { 163 | font-size: 16pt !important; 164 | } 165 | -------------------------------------------------------------------------------- /shared/css/theme/README.md: -------------------------------------------------------------------------------- 1 | ## Dependencies 2 | 3 | Themes are written using Sass to keep things modular and reduce the need for repeated selectors across files. Make sure that you have the reveal.js development environment including the Grunt dependencies installed before proceding: https://github.com/hakimel/reveal.js#development-environment 4 | 5 | 6 | 7 | ## Creating a Theme 8 | 9 | To create your own theme, start by duplicating any ```.scss``` file in [/css/theme/source](https://github.com/hakimel/reveal.js/blob/master/css/theme/source) and adding it to the compilation list in the [Gruntfile](https://github.com/hakimel/reveal.js/blob/master/Gruntfile.js). 10 | 11 | Each theme file does four things in the following order: 12 | 13 | 1. **Include [/css/theme/template/mixins.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/mixins.scss)** 14 | Shared utility functions. 15 | 16 | 2. **Include [/css/theme/template/settings.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/settings.scss)** 17 | Declares a set of custom variables that the template file (step 4) expects. Can be overridden in step 3. 18 | 19 | 3. **Override** 20 | This is where you override the default theme. Either by specifying variables (see [settings.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/settings.scss) for reference) or by adding full selectors with hardcoded styles. 21 | 22 | 4. **Include [/css/theme/template/theme.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/theme.scss)** 23 | The template theme file which will generate final CSS output based on the currently defined variables. -------------------------------------------------------------------------------- /shared/css/theme/beige.css: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); 2 | /** 3 | * Beige theme for reveal.js. 4 | * 5 | * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se 6 | */ 7 | @font-face { 8 | font-family: 'League Gothic'; 9 | src: url("../../lib/font/league_gothic-webfont.eot"); 10 | src: url("../../lib/font/league_gothic-webfont.eot?#iefix") format("embedded-opentype"), url("../../lib/font/league_gothic-webfont.woff") format("woff"), url("../../lib/font/league_gothic-webfont.ttf") format("truetype"), url("../../lib/font/league_gothic-webfont.svg#LeagueGothicRegular") format("svg"); 11 | font-weight: normal; 12 | font-style: normal; } 13 | 14 | /********************************************* 15 | * GLOBAL STYLES 16 | *********************************************/ 17 | body { 18 | background: #f7f2d3; 19 | background: -moz-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%); 20 | background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, white), color-stop(100%, #f7f2d3)); 21 | background: -webkit-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%); 22 | background: -o-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%); 23 | background: -ms-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%); 24 | background: radial-gradient(center, circle cover, white 0%, #f7f2d3 100%); 25 | background-color: #f7f3de; } 26 | 27 | .reveal { 28 | font-family: "Lato", sans-serif; 29 | font-size: 36px; 30 | font-weight: 200; 31 | letter-spacing: -0.02em; 32 | color: #333333; } 33 | 34 | ::selection { 35 | color: white; 36 | background: rgba(79, 64, 28, 0.99); 37 | text-shadow: none; } 38 | 39 | /********************************************* 40 | * HEADERS 41 | *********************************************/ 42 | .reveal h1, 43 | .reveal h2, 44 | .reveal h3, 45 | .reveal h4, 46 | .reveal h5, 47 | .reveal h6 { 48 | margin: 0 0 20px 0; 49 | color: #333333; 50 | font-family: "League Gothic", Impact, sans-serif; 51 | line-height: 0.9em; 52 | letter-spacing: 0.02em; 53 | text-transform: uppercase; 54 | text-shadow: none; } 55 | 56 | .reveal h1 { 57 | text-shadow: 0 1px 0 #cccccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbbbbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaaaaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 20px 20px rgba(0, 0, 0, 0.15); } 58 | 59 | /********************************************* 60 | * LINKS 61 | *********************************************/ 62 | .reveal a:not(.image) { 63 | color: #8b743d; 64 | text-decoration: none; 65 | -webkit-transition: color .15s ease; 66 | -moz-transition: color .15s ease; 67 | -ms-transition: color .15s ease; 68 | -o-transition: color .15s ease; 69 | transition: color .15s ease; } 70 | 71 | .reveal a:not(.image):hover { 72 | color: #c0a86e; 73 | text-shadow: none; 74 | border: none; } 75 | 76 | .reveal .roll span:after { 77 | color: #fff; 78 | background: #564826; } 79 | 80 | /********************************************* 81 | * IMAGES 82 | *********************************************/ 83 | .reveal section img { 84 | margin: 15px 0px; 85 | background: rgba(255, 255, 255, 0.12); 86 | border: 4px solid #333333; 87 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); 88 | -webkit-transition: all .2s linear; 89 | -moz-transition: all .2s linear; 90 | -ms-transition: all .2s linear; 91 | -o-transition: all .2s linear; 92 | transition: all .2s linear; } 93 | 94 | .reveal a:hover img { 95 | background: rgba(255, 255, 255, 0.2); 96 | border-color: #8b743d; 97 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); } 98 | 99 | /********************************************* 100 | * NAVIGATION CONTROLS 101 | *********************************************/ 102 | .reveal .controls div.navigate-left, 103 | .reveal .controls div.navigate-left.enabled { 104 | border-right-color: #8b743d; } 105 | 106 | .reveal .controls div.navigate-right, 107 | .reveal .controls div.navigate-right.enabled { 108 | border-left-color: #8b743d; } 109 | 110 | .reveal .controls div.navigate-up, 111 | .reveal .controls div.navigate-up.enabled { 112 | border-bottom-color: #8b743d; } 113 | 114 | .reveal .controls div.navigate-down, 115 | .reveal .controls div.navigate-down.enabled { 116 | border-top-color: #8b743d; } 117 | 118 | .reveal .controls div.navigate-left.enabled:hover { 119 | border-right-color: #c0a86e; } 120 | 121 | .reveal .controls div.navigate-right.enabled:hover { 122 | border-left-color: #c0a86e; } 123 | 124 | .reveal .controls div.navigate-up.enabled:hover { 125 | border-bottom-color: #c0a86e; } 126 | 127 | .reveal .controls div.navigate-down.enabled:hover { 128 | border-top-color: #c0a86e; } 129 | 130 | /********************************************* 131 | * PROGRESS BAR 132 | *********************************************/ 133 | .reveal .progress { 134 | background: rgba(0, 0, 0, 0.2); } 135 | 136 | .reveal .progress span { 137 | background: #8b743d; 138 | -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 139 | -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 140 | -ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 141 | -o-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 142 | transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } 143 | -------------------------------------------------------------------------------- /shared/css/theme/default.css: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); 2 | /** 3 | * Default theme for reveal.js. 4 | * 5 | * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se 6 | */ 7 | @font-face { 8 | font-family: 'League Gothic'; 9 | src: url("../../lib/font/league_gothic-webfont.eot"); 10 | src: url("../../lib/font/league_gothic-webfont.eot?#iefix") format("embedded-opentype"), url("../../lib/font/league_gothic-webfont.woff") format("woff"), url("../../lib/font/league_gothic-webfont.ttf") format("truetype"), url("../../lib/font/league_gothic-webfont.svg#LeagueGothicRegular") format("svg"); 11 | font-weight: normal; 12 | font-style: normal; } 13 | 14 | /********************************************* 15 | * GLOBAL STYLES 16 | *********************************************/ 17 | body { 18 | background: #1c1e20; 19 | background: -moz-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%); 20 | background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #555a5f), color-stop(100%, #1c1e20)); 21 | background: -webkit-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%); 22 | background: -o-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%); 23 | background: -ms-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%); 24 | background: radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%); 25 | background-color: #2b2b2b; } 26 | 27 | .reveal { 28 | font-family: "Lato", sans-serif; 29 | font-size: 36px; 30 | font-weight: 200; 31 | letter-spacing: -0.02em; 32 | color: #eeeeee; } 33 | 34 | ::selection { 35 | color: white; 36 | background: #ff5e99; 37 | text-shadow: none; } 38 | 39 | /********************************************* 40 | * HEADERS 41 | *********************************************/ 42 | .reveal h1, 43 | .reveal h2, 44 | .reveal h3, 45 | .reveal h4, 46 | .reveal h5, 47 | .reveal h6 { 48 | margin: 0 0 20px 0; 49 | color: #eeeeee; 50 | font-family: "League Gothic", Impact, sans-serif; 51 | line-height: 0.9em; 52 | letter-spacing: 0.02em; 53 | text-transform: uppercase; 54 | text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); } 55 | 56 | .reveal h1 { 57 | text-shadow: 0 1px 0 #cccccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbbbbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaaaaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 20px 20px rgba(0, 0, 0, 0.15); } 58 | 59 | /********************************************* 60 | * LINKS 61 | *********************************************/ 62 | .reveal a:not(.image) { 63 | color: #13daec; 64 | text-decoration: none; 65 | -webkit-transition: color .15s ease; 66 | -moz-transition: color .15s ease; 67 | -ms-transition: color .15s ease; 68 | -o-transition: color .15s ease; 69 | transition: color .15s ease; } 70 | 71 | .reveal a:not(.image):hover { 72 | color: #71e9f4; 73 | text-shadow: none; 74 | border: none; } 75 | 76 | .reveal .roll span:after { 77 | color: #fff; 78 | background: #0d99a5; } 79 | 80 | /********************************************* 81 | * IMAGES 82 | *********************************************/ 83 | .reveal section img { 84 | margin: 15px 0px; 85 | background: rgba(255, 255, 255, 0.12); 86 | border: 4px solid #eeeeee; 87 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); 88 | -webkit-transition: all .2s linear; 89 | -moz-transition: all .2s linear; 90 | -ms-transition: all .2s linear; 91 | -o-transition: all .2s linear; 92 | transition: all .2s linear; } 93 | 94 | .reveal a:hover img { 95 | background: rgba(255, 255, 255, 0.2); 96 | border-color: #13daec; 97 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); } 98 | 99 | /********************************************* 100 | * NAVIGATION CONTROLS 101 | *********************************************/ 102 | .reveal .controls div.navigate-left, 103 | .reveal .controls div.navigate-left.enabled { 104 | border-right-color: #13daec; } 105 | 106 | .reveal .controls div.navigate-right, 107 | .reveal .controls div.navigate-right.enabled { 108 | border-left-color: #13daec; } 109 | 110 | .reveal .controls div.navigate-up, 111 | .reveal .controls div.navigate-up.enabled { 112 | border-bottom-color: #13daec; } 113 | 114 | .reveal .controls div.navigate-down, 115 | .reveal .controls div.navigate-down.enabled { 116 | border-top-color: #13daec; } 117 | 118 | .reveal .controls div.navigate-left.enabled:hover { 119 | border-right-color: #71e9f4; } 120 | 121 | .reveal .controls div.navigate-right.enabled:hover { 122 | border-left-color: #71e9f4; } 123 | 124 | .reveal .controls div.navigate-up.enabled:hover { 125 | border-bottom-color: #71e9f4; } 126 | 127 | .reveal .controls div.navigate-down.enabled:hover { 128 | border-top-color: #71e9f4; } 129 | 130 | /********************************************* 131 | * PROGRESS BAR 132 | *********************************************/ 133 | .reveal .progress { 134 | background: rgba(0, 0, 0, 0.2); } 135 | 136 | .reveal .progress span { 137 | background: #13daec; 138 | -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 139 | -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 140 | -ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 141 | -o-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 142 | transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } 143 | 144 | .text-left { 145 | text-align: left; 146 | } 147 | 148 | .reveal ul.plain-list { 149 | list-style-type: none; 150 | } 151 | 152 | .annotated code { 153 | width: 49%; 154 | float: left; 155 | } 156 | 157 | .annotated .comments { 158 | font-size: 80%; 159 | width: -webkit-calc(49% - 40px); 160 | float: left; 161 | margin: 0 0 0 40px; 162 | padding: 0; 163 | } 164 | 165 | section .inline-code { 166 | display: inline-block; 167 | position: relative; 168 | text-align: left; 169 | margin: 0 5px; 170 | font-size: .55em; 171 | font-family: monospace; 172 | line-height: 1.2em; 173 | word-wrap: break-word; 174 | box-shadow: 0 0 6px rgba(0,0,0,.3); 175 | } 176 | ul.small-list li, 177 | ol.small-list li { 178 | margin: 12px 0; 179 | font-size: 80%; 180 | } 181 | table.table, table.table td, table.table th { 182 | border: 1px solid white; 183 | border-collapse:collapse; 184 | } 185 | 186 | .final { 187 | -webkit-transform: rotate(90deg); 188 | -moz-transform: rotate(90deg); 189 | transform: rotate(90deg); 190 | } 191 | .final:first-letter { 192 | background-color: purple; 193 | } 194 | .final:after { 195 | content: ')'; 196 | } 197 | 198 | span.small { 199 | display: inline-block; 200 | font-size: 0.5em; 201 | vertical-align: top; 202 | } 203 | -------------------------------------------------------------------------------- /shared/css/theme/moon.css: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); 2 | /** 3 | * Solarized Dark theme for reveal.js. 4 | * Author: Achim Staebler 5 | */ 6 | @font-face { 7 | font-family: 'League Gothic'; 8 | src: url("../../lib/font/league_gothic-webfont.eot"); 9 | src: url("../../lib/font/league_gothic-webfont.eot?#iefix") format("embedded-opentype"), url("../../lib/font/league_gothic-webfont.woff") format("woff"), url("../../lib/font/league_gothic-webfont.ttf") format("truetype"), url("../../lib/font/league_gothic-webfont.svg#LeagueGothicRegular") format("svg"); 10 | font-weight: normal; 11 | font-style: normal; } 12 | 13 | /** 14 | * Solarized colors by Ethan Schoonover 15 | */ 16 | html * { 17 | color-profile: sRGB; 18 | rendering-intent: auto; } 19 | 20 | /********************************************* 21 | * GLOBAL STYLES 22 | *********************************************/ 23 | body { 24 | background: #002b36; 25 | background-color: #002b36; } 26 | 27 | .reveal { 28 | font-family: "Lato", sans-serif; 29 | font-size: 36px; 30 | font-weight: 200; 31 | letter-spacing: -0.02em; 32 | color: #93a1a1; } 33 | 34 | ::selection { 35 | color: white; 36 | background: #d33682; 37 | text-shadow: none; } 38 | 39 | /********************************************* 40 | * HEADERS 41 | *********************************************/ 42 | .reveal h1, 43 | .reveal h2, 44 | .reveal h3, 45 | .reveal h4, 46 | .reveal h5, 47 | .reveal h6 { 48 | margin: 0 0 20px 0; 49 | color: #eee8d5; 50 | font-family: "League Gothic", Impact, sans-serif; 51 | line-height: 0.9em; 52 | letter-spacing: 0.02em; 53 | text-transform: uppercase; 54 | text-shadow: none; } 55 | 56 | .reveal h1 { 57 | text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); } 58 | 59 | /********************************************* 60 | * LINKS 61 | *********************************************/ 62 | .reveal a:not(.image) { 63 | color: #268bd2; 64 | text-decoration: none; 65 | -webkit-transition: color .15s ease; 66 | -moz-transition: color .15s ease; 67 | -ms-transition: color .15s ease; 68 | -o-transition: color .15s ease; 69 | transition: color .15s ease; } 70 | 71 | .reveal a:not(.image):hover { 72 | color: #78b9e6; 73 | text-shadow: none; 74 | border: none; } 75 | 76 | .reveal .roll span:after { 77 | color: #fff; 78 | background: #1a6091; } 79 | 80 | /********************************************* 81 | * IMAGES 82 | *********************************************/ 83 | .reveal section img { 84 | margin: 15px 0px; 85 | background: rgba(255, 255, 255, 0.12); 86 | border: 4px solid #93a1a1; 87 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); 88 | -webkit-transition: all .2s linear; 89 | -moz-transition: all .2s linear; 90 | -ms-transition: all .2s linear; 91 | -o-transition: all .2s linear; 92 | transition: all .2s linear; } 93 | 94 | .reveal a:hover img { 95 | background: rgba(255, 255, 255, 0.2); 96 | border-color: #268bd2; 97 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); } 98 | 99 | /********************************************* 100 | * NAVIGATION CONTROLS 101 | *********************************************/ 102 | .reveal .controls div.navigate-left, 103 | .reveal .controls div.navigate-left.enabled { 104 | border-right-color: #268bd2; } 105 | 106 | .reveal .controls div.navigate-right, 107 | .reveal .controls div.navigate-right.enabled { 108 | border-left-color: #268bd2; } 109 | 110 | .reveal .controls div.navigate-up, 111 | .reveal .controls div.navigate-up.enabled { 112 | border-bottom-color: #268bd2; } 113 | 114 | .reveal .controls div.navigate-down, 115 | .reveal .controls div.navigate-down.enabled { 116 | border-top-color: #268bd2; } 117 | 118 | .reveal .controls div.navigate-left.enabled:hover { 119 | border-right-color: #78b9e6; } 120 | 121 | .reveal .controls div.navigate-right.enabled:hover { 122 | border-left-color: #78b9e6; } 123 | 124 | .reveal .controls div.navigate-up.enabled:hover { 125 | border-bottom-color: #78b9e6; } 126 | 127 | .reveal .controls div.navigate-down.enabled:hover { 128 | border-top-color: #78b9e6; } 129 | 130 | /********************************************* 131 | * PROGRESS BAR 132 | *********************************************/ 133 | .reveal .progress { 134 | background: rgba(0, 0, 0, 0.2); } 135 | 136 | .reveal .progress span { 137 | background: #268bd2; 138 | -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 139 | -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 140 | -ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 141 | -o-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 142 | transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } 143 | -------------------------------------------------------------------------------- /shared/css/theme/night.css: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=Montserrat:700); 2 | @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic); 3 | /** 4 | * Black theme for reveal.js. 5 | * 6 | * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se 7 | */ 8 | /********************************************* 9 | * GLOBAL STYLES 10 | *********************************************/ 11 | body { 12 | background: #111111; 13 | background-color: #111111; } 14 | 15 | .reveal { 16 | font-family: "Open Sans", sans-serif; 17 | font-size: 30px; 18 | font-weight: 200; 19 | letter-spacing: -0.02em; 20 | color: #eeeeee; } 21 | 22 | ::selection { 23 | color: white; 24 | background: #e7ad52; 25 | text-shadow: none; } 26 | 27 | /********************************************* 28 | * HEADERS 29 | *********************************************/ 30 | .reveal h1, 31 | .reveal h2, 32 | .reveal h3, 33 | .reveal h4, 34 | .reveal h5, 35 | .reveal h6 { 36 | margin: 0 0 20px 0; 37 | color: #eeeeee; 38 | font-family: "Montserrat", Impact, sans-serif; 39 | line-height: 0.9em; 40 | letter-spacing: -0.03em; 41 | text-transform: none; 42 | text-shadow: none; } 43 | 44 | .reveal h1 { 45 | text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); } 46 | 47 | /********************************************* 48 | * LINKS 49 | *********************************************/ 50 | .reveal a:not(.image) { 51 | color: #e7ad52; 52 | text-decoration: none; 53 | -webkit-transition: color .15s ease; 54 | -moz-transition: color .15s ease; 55 | -ms-transition: color .15s ease; 56 | -o-transition: color .15s ease; 57 | transition: color .15s ease; } 58 | 59 | .reveal a:not(.image):hover { 60 | color: #f3d7ac; 61 | text-shadow: none; 62 | border: none; } 63 | 64 | .reveal .roll span:after { 65 | color: #fff; 66 | background: #d08a1d; } 67 | 68 | /********************************************* 69 | * IMAGES 70 | *********************************************/ 71 | .reveal section img { 72 | margin: 15px 0px; 73 | background: rgba(255, 255, 255, 0.12); 74 | border: 4px solid #eeeeee; 75 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); 76 | -webkit-transition: all .2s linear; 77 | -moz-transition: all .2s linear; 78 | -ms-transition: all .2s linear; 79 | -o-transition: all .2s linear; 80 | transition: all .2s linear; } 81 | 82 | .reveal a:hover img { 83 | background: rgba(255, 255, 255, 0.2); 84 | border-color: #e7ad52; 85 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); } 86 | 87 | /********************************************* 88 | * NAVIGATION CONTROLS 89 | *********************************************/ 90 | .reveal .controls div.navigate-left, 91 | .reveal .controls div.navigate-left.enabled { 92 | border-right-color: #e7ad52; } 93 | 94 | .reveal .controls div.navigate-right, 95 | .reveal .controls div.navigate-right.enabled { 96 | border-left-color: #e7ad52; } 97 | 98 | .reveal .controls div.navigate-up, 99 | .reveal .controls div.navigate-up.enabled { 100 | border-bottom-color: #e7ad52; } 101 | 102 | .reveal .controls div.navigate-down, 103 | .reveal .controls div.navigate-down.enabled { 104 | border-top-color: #e7ad52; } 105 | 106 | .reveal .controls div.navigate-left.enabled:hover { 107 | border-right-color: #f3d7ac; } 108 | 109 | .reveal .controls div.navigate-right.enabled:hover { 110 | border-left-color: #f3d7ac; } 111 | 112 | .reveal .controls div.navigate-up.enabled:hover { 113 | border-bottom-color: #f3d7ac; } 114 | 115 | .reveal .controls div.navigate-down.enabled:hover { 116 | border-top-color: #f3d7ac; } 117 | 118 | /********************************************* 119 | * PROGRESS BAR 120 | *********************************************/ 121 | .reveal .progress { 122 | background: rgba(0, 0, 0, 0.2); } 123 | 124 | .reveal .progress span { 125 | background: #e7ad52; 126 | -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 127 | -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 128 | -ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 129 | -o-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 130 | transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } 131 | -------------------------------------------------------------------------------- /shared/css/theme/serif.css: -------------------------------------------------------------------------------- 1 | /** 2 | * A simple theme for reveal.js presentations, similar 3 | * to the default theme. The accent color is darkblue. 4 | * 5 | * This theme is Copyright (C) 2012 Owen Versteeg, https://github.com/StereotypicalApps. It is MIT licensed. 6 | * reveal.js is Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se; so is the theme - beige.css - that this is based off of. 7 | */ 8 | /********************************************* 9 | * GLOBAL STYLES 10 | *********************************************/ 11 | body { 12 | background: #f0f1eb; 13 | background-color: #f0f1eb; } 14 | 15 | .reveal { 16 | font-family: "Palatino Linotype", "Book Antiqua", Palatino, FreeSerif, serif; 17 | font-size: 36px; 18 | font-weight: 200; 19 | letter-spacing: -0.02em; 20 | color: black; } 21 | 22 | ::selection { 23 | color: white; 24 | background: #26351c; 25 | text-shadow: none; } 26 | 27 | /********************************************* 28 | * HEADERS 29 | *********************************************/ 30 | .reveal h1, 31 | .reveal h2, 32 | .reveal h3, 33 | .reveal h4, 34 | .reveal h5, 35 | .reveal h6 { 36 | margin: 0 0 20px 0; 37 | color: #383d3d; 38 | font-family: "Palatino Linotype", "Book Antiqua", Palatino, FreeSerif, serif; 39 | line-height: 0.9em; 40 | letter-spacing: 0.02em; 41 | text-transform: none; 42 | text-shadow: none; } 43 | 44 | .reveal h1 { 45 | text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); } 46 | 47 | /********************************************* 48 | * LINKS 49 | *********************************************/ 50 | .reveal a:not(.image) { 51 | color: #51483d; 52 | text-decoration: none; 53 | -webkit-transition: color .15s ease; 54 | -moz-transition: color .15s ease; 55 | -ms-transition: color .15s ease; 56 | -o-transition: color .15s ease; 57 | transition: color .15s ease; } 58 | 59 | .reveal a:not(.image):hover { 60 | color: #8b7c69; 61 | text-shadow: none; 62 | border: none; } 63 | 64 | .reveal .roll span:after { 65 | color: #fff; 66 | background: #25211c; } 67 | 68 | /********************************************* 69 | * IMAGES 70 | *********************************************/ 71 | .reveal section img { 72 | margin: 15px 0px; 73 | background: rgba(255, 255, 255, 0.12); 74 | border: 4px solid black; 75 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); 76 | -webkit-transition: all .2s linear; 77 | -moz-transition: all .2s linear; 78 | -ms-transition: all .2s linear; 79 | -o-transition: all .2s linear; 80 | transition: all .2s linear; } 81 | 82 | .reveal a:hover img { 83 | background: rgba(255, 255, 255, 0.2); 84 | border-color: #51483d; 85 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); } 86 | 87 | /********************************************* 88 | * NAVIGATION CONTROLS 89 | *********************************************/ 90 | .reveal .controls div.navigate-left, 91 | .reveal .controls div.navigate-left.enabled { 92 | border-right-color: #51483d; } 93 | 94 | .reveal .controls div.navigate-right, 95 | .reveal .controls div.navigate-right.enabled { 96 | border-left-color: #51483d; } 97 | 98 | .reveal .controls div.navigate-up, 99 | .reveal .controls div.navigate-up.enabled { 100 | border-bottom-color: #51483d; } 101 | 102 | .reveal .controls div.navigate-down, 103 | .reveal .controls div.navigate-down.enabled { 104 | border-top-color: #51483d; } 105 | 106 | .reveal .controls div.navigate-left.enabled:hover { 107 | border-right-color: #8b7c69; } 108 | 109 | .reveal .controls div.navigate-right.enabled:hover { 110 | border-left-color: #8b7c69; } 111 | 112 | .reveal .controls div.navigate-up.enabled:hover { 113 | border-bottom-color: #8b7c69; } 114 | 115 | .reveal .controls div.navigate-down.enabled:hover { 116 | border-top-color: #8b7c69; } 117 | 118 | /********************************************* 119 | * PROGRESS BAR 120 | *********************************************/ 121 | .reveal .progress { 122 | background: rgba(0, 0, 0, 0.2); } 123 | 124 | .reveal .progress span { 125 | background: #51483d; 126 | -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 127 | -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 128 | -ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 129 | -o-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 130 | transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } 131 | -------------------------------------------------------------------------------- /shared/css/theme/simple.css: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=News+Cycle:400,700); 2 | @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); 3 | /** 4 | * A simple theme for reveal.js presentations, similar 5 | * to the default theme. The accent color is darkblue. 6 | * 7 | * This theme is Copyright (C) 2012 Owen Versteeg, https://github.com/StereotypicalApps. It is MIT licensed. 8 | * reveal.js is Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se 9 | */ 10 | /********************************************* 11 | * GLOBAL STYLES 12 | *********************************************/ 13 | body { 14 | background: white; 15 | background-color: white; } 16 | 17 | .reveal { 18 | font-family: "Lato", sans-serif; 19 | font-size: 36px; 20 | font-weight: 200; 21 | letter-spacing: -0.02em; 22 | color: black; } 23 | 24 | ::selection { 25 | color: white; 26 | background: rgba(0, 0, 0, 0.99); 27 | text-shadow: none; } 28 | 29 | /********************************************* 30 | * HEADERS 31 | *********************************************/ 32 | .reveal h1, 33 | .reveal h2, 34 | .reveal h3, 35 | .reveal h4, 36 | .reveal h5, 37 | .reveal h6 { 38 | margin: 0 0 20px 0; 39 | color: black; 40 | font-family: "News Cycle", Impact, sans-serif; 41 | line-height: 0.9em; 42 | letter-spacing: 0.02em; 43 | text-transform: none; 44 | text-shadow: none; } 45 | 46 | .reveal h1 { 47 | text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); } 48 | 49 | /********************************************* 50 | * LINKS 51 | *********************************************/ 52 | .reveal a:not(.image) { 53 | color: darkblue; 54 | text-decoration: none; 55 | -webkit-transition: color .15s ease; 56 | -moz-transition: color .15s ease; 57 | -ms-transition: color .15s ease; 58 | -o-transition: color .15s ease; 59 | transition: color .15s ease; } 60 | 61 | .reveal a:not(.image):hover { 62 | color: #0000f1; 63 | text-shadow: none; 64 | border: none; } 65 | 66 | .reveal .roll span:after { 67 | color: #fff; 68 | background: #00003f; } 69 | 70 | /********************************************* 71 | * IMAGES 72 | *********************************************/ 73 | .reveal section img { 74 | margin: 15px 0px; 75 | background: rgba(255, 255, 255, 0.12); 76 | border: 4px solid black; 77 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); 78 | -webkit-transition: all .2s linear; 79 | -moz-transition: all .2s linear; 80 | -ms-transition: all .2s linear; 81 | -o-transition: all .2s linear; 82 | transition: all .2s linear; } 83 | 84 | .reveal a:hover img { 85 | background: rgba(255, 255, 255, 0.2); 86 | border-color: darkblue; 87 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); } 88 | 89 | /********************************************* 90 | * NAVIGATION CONTROLS 91 | *********************************************/ 92 | .reveal .controls div.navigate-left, 93 | .reveal .controls div.navigate-left.enabled { 94 | border-right-color: darkblue; } 95 | 96 | .reveal .controls div.navigate-right, 97 | .reveal .controls div.navigate-right.enabled { 98 | border-left-color: darkblue; } 99 | 100 | .reveal .controls div.navigate-up, 101 | .reveal .controls div.navigate-up.enabled { 102 | border-bottom-color: darkblue; } 103 | 104 | .reveal .controls div.navigate-down, 105 | .reveal .controls div.navigate-down.enabled { 106 | border-top-color: darkblue; } 107 | 108 | .reveal .controls div.navigate-left.enabled:hover { 109 | border-right-color: #0000f1; } 110 | 111 | .reveal .controls div.navigate-right.enabled:hover { 112 | border-left-color: #0000f1; } 113 | 114 | .reveal .controls div.navigate-up.enabled:hover { 115 | border-bottom-color: #0000f1; } 116 | 117 | .reveal .controls div.navigate-down.enabled:hover { 118 | border-top-color: #0000f1; } 119 | 120 | /********************************************* 121 | * PROGRESS BAR 122 | *********************************************/ 123 | .reveal .progress { 124 | background: rgba(0, 0, 0, 0.2); } 125 | 126 | .reveal .progress span { 127 | background: darkblue; 128 | -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 129 | -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 130 | -ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 131 | -o-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 132 | transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } 133 | -------------------------------------------------------------------------------- /shared/css/theme/sky.css: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=Quicksand:400,700,400italic,700italic); 2 | @import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700); 3 | /** 4 | * Sky theme for reveal.js. 5 | * 6 | * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se 7 | */ 8 | /********************************************* 9 | * GLOBAL STYLES 10 | *********************************************/ 11 | body { 12 | background: #add9e4; 13 | background: -moz-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%); 14 | background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #f7fbfc), color-stop(100%, #add9e4)); 15 | background: -webkit-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%); 16 | background: -o-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%); 17 | background: -ms-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%); 18 | background: radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%); 19 | background-color: #f7fbfc; } 20 | 21 | .reveal { 22 | font-family: "Open Sans", sans-serif; 23 | font-size: 36px; 24 | font-weight: 200; 25 | letter-spacing: -0.02em; 26 | color: #333333; } 27 | 28 | ::selection { 29 | color: white; 30 | background: #134674; 31 | text-shadow: none; } 32 | 33 | /********************************************* 34 | * HEADERS 35 | *********************************************/ 36 | .reveal h1, 37 | .reveal h2, 38 | .reveal h3, 39 | .reveal h4, 40 | .reveal h5, 41 | .reveal h6 { 42 | margin: 0 0 20px 0; 43 | color: #333333; 44 | font-family: "Quicksand", sans-serif; 45 | line-height: 0.9em; 46 | letter-spacing: -0.08em; 47 | text-transform: uppercase; 48 | text-shadow: none; } 49 | 50 | .reveal h1 { 51 | text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); } 52 | 53 | /********************************************* 54 | * LINKS 55 | *********************************************/ 56 | .reveal a:not(.image) { 57 | color: #3b759e; 58 | text-decoration: none; 59 | -webkit-transition: color .15s ease; 60 | -moz-transition: color .15s ease; 61 | -ms-transition: color .15s ease; 62 | -o-transition: color .15s ease; 63 | transition: color .15s ease; } 64 | 65 | .reveal a:not(.image):hover { 66 | color: #74a7cb; 67 | text-shadow: none; 68 | border: none; } 69 | 70 | .reveal .roll span:after { 71 | color: #fff; 72 | background: #264c66; } 73 | 74 | /********************************************* 75 | * IMAGES 76 | *********************************************/ 77 | .reveal section img { 78 | margin: 15px 0px; 79 | background: rgba(255, 255, 255, 0.12); 80 | border: 4px solid #333333; 81 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); 82 | -webkit-transition: all .2s linear; 83 | -moz-transition: all .2s linear; 84 | -ms-transition: all .2s linear; 85 | -o-transition: all .2s linear; 86 | transition: all .2s linear; } 87 | 88 | .reveal a:hover img { 89 | background: rgba(255, 255, 255, 0.2); 90 | border-color: #3b759e; 91 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); } 92 | 93 | /********************************************* 94 | * NAVIGATION CONTROLS 95 | *********************************************/ 96 | .reveal .controls div.navigate-left, 97 | .reveal .controls div.navigate-left.enabled { 98 | border-right-color: #3b759e; } 99 | 100 | .reveal .controls div.navigate-right, 101 | .reveal .controls div.navigate-right.enabled { 102 | border-left-color: #3b759e; } 103 | 104 | .reveal .controls div.navigate-up, 105 | .reveal .controls div.navigate-up.enabled { 106 | border-bottom-color: #3b759e; } 107 | 108 | .reveal .controls div.navigate-down, 109 | .reveal .controls div.navigate-down.enabled { 110 | border-top-color: #3b759e; } 111 | 112 | .reveal .controls div.navigate-left.enabled:hover { 113 | border-right-color: #74a7cb; } 114 | 115 | .reveal .controls div.navigate-right.enabled:hover { 116 | border-left-color: #74a7cb; } 117 | 118 | .reveal .controls div.navigate-up.enabled:hover { 119 | border-bottom-color: #74a7cb; } 120 | 121 | .reveal .controls div.navigate-down.enabled:hover { 122 | border-top-color: #74a7cb; } 123 | 124 | /********************************************* 125 | * PROGRESS BAR 126 | *********************************************/ 127 | .reveal .progress { 128 | background: rgba(0, 0, 0, 0.2); } 129 | 130 | .reveal .progress span { 131 | background: #3b759e; 132 | -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 133 | -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 134 | -ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 135 | -o-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 136 | transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } 137 | -------------------------------------------------------------------------------- /shared/css/theme/solarized.css: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); 2 | /** 3 | * Solarized Light theme for reveal.js. 4 | * Author: Achim Staebler 5 | */ 6 | @font-face { 7 | font-family: 'League Gothic'; 8 | src: url("../../lib/font/league_gothic-webfont.eot"); 9 | src: url("../../lib/font/league_gothic-webfont.eot?#iefix") format("embedded-opentype"), url("../../lib/font/league_gothic-webfont.woff") format("woff"), url("../../lib/font/league_gothic-webfont.ttf") format("truetype"), url("../../lib/font/league_gothic-webfont.svg#LeagueGothicRegular") format("svg"); 10 | font-weight: normal; 11 | font-style: normal; } 12 | 13 | /** 14 | * Solarized colors by Ethan Schoonover 15 | */ 16 | html * { 17 | color-profile: sRGB; 18 | rendering-intent: auto; } 19 | 20 | /********************************************* 21 | * GLOBAL STYLES 22 | *********************************************/ 23 | body { 24 | background: #fdf6e3; 25 | background-color: #fdf6e3; } 26 | 27 | .reveal { 28 | font-family: "Lato", sans-serif; 29 | font-size: 36px; 30 | font-weight: 200; 31 | letter-spacing: -0.02em; 32 | color: #657b83; } 33 | 34 | ::selection { 35 | color: white; 36 | background: #d33682; 37 | text-shadow: none; } 38 | 39 | /********************************************* 40 | * HEADERS 41 | *********************************************/ 42 | .reveal h1, 43 | .reveal h2, 44 | .reveal h3, 45 | .reveal h4, 46 | .reveal h5, 47 | .reveal h6 { 48 | margin: 0 0 20px 0; 49 | color: #586e75; 50 | font-family: "League Gothic", Impact, sans-serif; 51 | line-height: 0.9em; 52 | letter-spacing: 0.02em; 53 | text-transform: uppercase; 54 | text-shadow: none; } 55 | 56 | .reveal h1 { 57 | text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); } 58 | 59 | /********************************************* 60 | * LINKS 61 | *********************************************/ 62 | .reveal a:not(.image) { 63 | color: #268bd2; 64 | text-decoration: none; 65 | -webkit-transition: color .15s ease; 66 | -moz-transition: color .15s ease; 67 | -ms-transition: color .15s ease; 68 | -o-transition: color .15s ease; 69 | transition: color .15s ease; } 70 | 71 | .reveal a:not(.image):hover { 72 | color: #78b9e6; 73 | text-shadow: none; 74 | border: none; } 75 | 76 | .reveal .roll span:after { 77 | color: #fff; 78 | background: #1a6091; } 79 | 80 | /********************************************* 81 | * IMAGES 82 | *********************************************/ 83 | .reveal section img { 84 | margin: 15px 0px; 85 | background: rgba(255, 255, 255, 0.12); 86 | border: 4px solid #657b83; 87 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); 88 | -webkit-transition: all .2s linear; 89 | -moz-transition: all .2s linear; 90 | -ms-transition: all .2s linear; 91 | -o-transition: all .2s linear; 92 | transition: all .2s linear; } 93 | 94 | .reveal a:hover img { 95 | background: rgba(255, 255, 255, 0.2); 96 | border-color: #268bd2; 97 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); } 98 | 99 | /********************************************* 100 | * NAVIGATION CONTROLS 101 | *********************************************/ 102 | .reveal .controls div.navigate-left, 103 | .reveal .controls div.navigate-left.enabled { 104 | border-right-color: #268bd2; } 105 | 106 | .reveal .controls div.navigate-right, 107 | .reveal .controls div.navigate-right.enabled { 108 | border-left-color: #268bd2; } 109 | 110 | .reveal .controls div.navigate-up, 111 | .reveal .controls div.navigate-up.enabled { 112 | border-bottom-color: #268bd2; } 113 | 114 | .reveal .controls div.navigate-down, 115 | .reveal .controls div.navigate-down.enabled { 116 | border-top-color: #268bd2; } 117 | 118 | .reveal .controls div.navigate-left.enabled:hover { 119 | border-right-color: #78b9e6; } 120 | 121 | .reveal .controls div.navigate-right.enabled:hover { 122 | border-left-color: #78b9e6; } 123 | 124 | .reveal .controls div.navigate-up.enabled:hover { 125 | border-bottom-color: #78b9e6; } 126 | 127 | .reveal .controls div.navigate-down.enabled:hover { 128 | border-top-color: #78b9e6; } 129 | 130 | /********************************************* 131 | * PROGRESS BAR 132 | *********************************************/ 133 | .reveal .progress { 134 | background: rgba(0, 0, 0, 0.2); } 135 | 136 | .reveal .progress span { 137 | background: #268bd2; 138 | -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 139 | -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 140 | -ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 141 | -o-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 142 | transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } 143 | -------------------------------------------------------------------------------- /shared/css/theme/source/beige.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Beige theme for reveal.js. 3 | * 4 | * Copyright (C) 2011-2012 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 | 15 | // Include theme-specific fonts 16 | @font-face { 17 | font-family: 'League Gothic'; 18 | src: url('../../lib/font/league_gothic-webfont.eot'); 19 | src: url('../../lib/font/league_gothic-webfont.eot?#iefix') format('embedded-opentype'), 20 | url('../../lib/font/league_gothic-webfont.woff') format('woff'), 21 | url('../../lib/font/league_gothic-webfont.ttf') format('truetype'), 22 | url('../../lib/font/league_gothic-webfont.svg#LeagueGothicRegular') format('svg'); 23 | 24 | font-weight: normal; 25 | font-style: normal; 26 | } 27 | 28 | @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); 29 | 30 | 31 | // Override theme settings (see ../template/settings.scss) 32 | $mainColor: #333; 33 | $headingColor: #333; 34 | $headingTextShadow: none; 35 | $backgroundColor: #f7f3de; 36 | $linkColor: #8b743d; 37 | $linkColorHover: lighten( $linkColor, 20% ); 38 | $selectionBackgroundColor: rgba(79, 64, 28, 0.99); 39 | $heading1TextShadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 20px 20px rgba(0,0,0,.15); 40 | 41 | // Background generator 42 | @mixin bodyBackground() { 43 | @include radial-gradient( rgba(247,242,211,1), rgba(255,255,255,1) ); 44 | } 45 | 46 | 47 | 48 | // Theme template ------------------------------ 49 | @import "../template/theme"; 50 | // --------------------------------------------- -------------------------------------------------------------------------------- /shared/css/theme/source/default.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Default theme for reveal.js. 3 | * 4 | * Copyright (C) 2011-2012 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 | 15 | // Include theme-specific fonts 16 | @font-face { 17 | font-family: 'League Gothic'; 18 | src: url('../../lib/font/league_gothic-webfont.eot'); 19 | src: url('../../lib/font/league_gothic-webfont.eot?#iefix') format('embedded-opentype'), 20 | url('../../lib/font/league_gothic-webfont.woff') format('woff'), 21 | url('../../lib/font/league_gothic-webfont.ttf') format('truetype'), 22 | url('../../lib/font/league_gothic-webfont.svg#LeagueGothicRegular') format('svg'); 23 | 24 | font-weight: normal; 25 | font-style: normal; 26 | } 27 | 28 | @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); 29 | 30 | // Override theme settings (see ../template/settings.scss) 31 | $heading1TextShadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 20px 20px rgba(0,0,0,.15); 32 | 33 | // Background generator 34 | @mixin bodyBackground() { 35 | @include radial-gradient( rgba(28,30,32,1), rgba(85,90,95,1) ); 36 | } 37 | 38 | 39 | 40 | // Theme template ------------------------------ 41 | @import "../template/theme"; 42 | // --------------------------------------------- -------------------------------------------------------------------------------- /shared/css/theme/source/moon.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Solarized Dark theme for reveal.js. 3 | * Author: Achim Staebler 4 | */ 5 | 6 | 7 | // Default mixins and settings ----------------- 8 | @import "../template/mixins"; 9 | @import "../template/settings"; 10 | // --------------------------------------------- 11 | 12 | 13 | 14 | // Include theme-specific fonts 15 | @font-face { 16 | font-family: 'League Gothic'; 17 | src: url('../../lib/font/league_gothic-webfont.eot'); 18 | src: url('../../lib/font/league_gothic-webfont.eot?#iefix') format('embedded-opentype'), 19 | url('../../lib/font/league_gothic-webfont.woff') format('woff'), 20 | url('../../lib/font/league_gothic-webfont.ttf') format('truetype'), 21 | url('../../lib/font/league_gothic-webfont.svg#LeagueGothicRegular') format('svg'); 22 | 23 | font-weight: normal; 24 | font-style: normal; 25 | } 26 | 27 | @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); 28 | 29 | /** 30 | * Solarized colors by Ethan Schoonover 31 | */ 32 | html * { 33 | color-profile: sRGB; 34 | rendering-intent: auto; 35 | } 36 | 37 | // Solarized colors 38 | $base03: #002b36; 39 | $base02: #073642; 40 | $base01: #586e75; 41 | $base00: #657b83; 42 | $base0: #839496; 43 | $base1: #93a1a1; 44 | $base2: #eee8d5; 45 | $base3: #fdf6e3; 46 | $yellow: #b58900; 47 | $orange: #cb4b16; 48 | $red: #dc322f; 49 | $magenta: #d33682; 50 | $violet: #6c71c4; 51 | $blue: #268bd2; 52 | $cyan: #2aa198; 53 | $green: #859900; 54 | 55 | // Override theme settings (see ../template/settings.scss) 56 | $mainColor: $base1; 57 | $headingColor: $base2; 58 | $headingTextShadow: none; 59 | $backgroundColor: $base03; 60 | $linkColor: $blue; 61 | $linkColorHover: lighten( $linkColor, 20% ); 62 | $selectionBackgroundColor: $magenta; 63 | 64 | 65 | 66 | // Theme template ------------------------------ 67 | @import "../template/theme"; 68 | // --------------------------------------------- 69 | -------------------------------------------------------------------------------- /shared/css/theme/source/night.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Black theme for reveal.js. 3 | * 4 | * Copyright (C) 2011-2012 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(https://fonts.googleapis.com/css?family=Montserrat:700); 16 | @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic); 17 | 18 | 19 | // Override theme settings (see ../template/settings.scss) 20 | $backgroundColor: #111; 21 | 22 | $mainFont: 'Open Sans', sans-serif; 23 | $linkColor: #e7ad52; 24 | $linkColorHover: lighten( $linkColor, 20% ); 25 | $headingFont: 'Montserrat', Impact, sans-serif; 26 | $headingTextShadow: none; 27 | $headingLetterSpacing: -0.03em; 28 | $headingTextTransform: none; 29 | $selectionBackgroundColor: #e7ad52; 30 | $mainFontSize: 30px; 31 | 32 | 33 | // Theme template ------------------------------ 34 | @import "../template/theme"; 35 | // --------------------------------------------- -------------------------------------------------------------------------------- /shared/css/theme/source/serif.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * A simple theme for reveal.js presentations, similar 3 | * to the default theme. The accent color is darkblue. 4 | * 5 | * This theme is Copyright (C) 2012 Owen Versteeg, https://github.com/StereotypicalApps. It is MIT licensed. 6 | * reveal.js is Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se; so is the theme - beige.css - that this is based off of. 7 | */ 8 | 9 | 10 | // Default mixins and settings ----------------- 11 | @import "../template/mixins"; 12 | @import "../template/settings"; 13 | // --------------------------------------------- 14 | 15 | 16 | 17 | // Override theme settings (see ../template/settings.scss) 18 | $mainFont: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif; 19 | $mainColor: #000; 20 | $headingFont: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif; 21 | $headingColor: #383D3D; 22 | $headingTextShadow: none; 23 | $headingTextTransform: none; 24 | $backgroundColor: #F0F1EB; 25 | $linkColor: #51483D; 26 | $linkColorHover: lighten( $linkColor, 20% ); 27 | $selectionBackgroundColor: #26351C; 28 | 29 | 30 | 31 | // Theme template ------------------------------ 32 | @import "../template/theme"; 33 | // --------------------------------------------- -------------------------------------------------------------------------------- /shared/css/theme/source/simple.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * A simple theme for reveal.js presentations, similar 3 | * to the default theme. The accent color is darkblue. 4 | * 5 | * This theme is Copyright (C) 2012 Owen Versteeg, https://github.com/StereotypicalApps. It is MIT licensed. 6 | * reveal.js is Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se 7 | */ 8 | 9 | 10 | // Default mixins and settings ----------------- 11 | @import "../template/mixins"; 12 | @import "../template/settings"; 13 | // --------------------------------------------- 14 | 15 | 16 | 17 | // Include theme-specific fonts 18 | @import url(https://fonts.googleapis.com/css?family=News+Cycle:400,700); 19 | @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); 20 | 21 | 22 | // Override theme settings (see ../template/settings.scss) 23 | $mainFont: 'Lato', sans-serif; 24 | $mainColor: #000; 25 | $headingFont: 'News Cycle', Impact, sans-serif; 26 | $headingColor: #000; 27 | $headingTextShadow: none; 28 | $headingTextTransform: none; 29 | $backgroundColor: #fff; 30 | $linkColor: #00008B; 31 | $linkColorHover: lighten( $linkColor, 20% ); 32 | $selectionBackgroundColor: rgba(0, 0, 0, 0.99); 33 | 34 | 35 | 36 | // Theme template ------------------------------ 37 | @import "../template/theme"; 38 | // --------------------------------------------- -------------------------------------------------------------------------------- /shared/css/theme/source/sky.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Sky theme for reveal.js. 3 | * 4 | * Copyright (C) 2011-2012 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 | 15 | // Include theme-specific fonts 16 | @import url(https://fonts.googleapis.com/css?family=Quicksand:400,700,400italic,700italic); 17 | @import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700); 18 | 19 | 20 | // Override theme settings (see ../template/settings.scss) 21 | $mainFont: 'Open Sans', sans-serif; 22 | $mainColor: #333; 23 | $headingFont: 'Quicksand', sans-serif; 24 | $headingColor: #333; 25 | $headingLetterSpacing: -0.08em; 26 | $headingTextShadow: none; 27 | $backgroundColor: #f7fbfc; 28 | $linkColor: #3b759e; 29 | $linkColorHover: lighten( $linkColor, 20% ); 30 | $selectionBackgroundColor: #134674; 31 | 32 | // Background generator 33 | @mixin bodyBackground() { 34 | @include radial-gradient( #add9e4, #f7fbfc ); 35 | } 36 | 37 | 38 | 39 | // Theme template ------------------------------ 40 | @import "../template/theme"; 41 | // --------------------------------------------- -------------------------------------------------------------------------------- /shared/css/theme/source/solarized.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Solarized Light theme for reveal.js. 3 | * Author: Achim Staebler 4 | */ 5 | 6 | 7 | // Default mixins and settings ----------------- 8 | @import "../template/mixins"; 9 | @import "../template/settings"; 10 | // --------------------------------------------- 11 | 12 | 13 | 14 | // Include theme-specific fonts 15 | @font-face { 16 | font-family: 'League Gothic'; 17 | src: url('../../lib/font/league_gothic-webfont.eot'); 18 | src: url('../../lib/font/league_gothic-webfont.eot?#iefix') format('embedded-opentype'), 19 | url('../../lib/font/league_gothic-webfont.woff') format('woff'), 20 | url('../../lib/font/league_gothic-webfont.ttf') format('truetype'), 21 | url('../../lib/font/league_gothic-webfont.svg#LeagueGothicRegular') format('svg'); 22 | 23 | font-weight: normal; 24 | font-style: normal; 25 | } 26 | 27 | @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); 28 | 29 | 30 | /** 31 | * Solarized colors by Ethan Schoonover 32 | */ 33 | html * { 34 | color-profile: sRGB; 35 | rendering-intent: auto; 36 | } 37 | 38 | // Solarized colors 39 | $base03: #002b36; 40 | $base02: #073642; 41 | $base01: #586e75; 42 | $base00: #657b83; 43 | $base0: #839496; 44 | $base1: #93a1a1; 45 | $base2: #eee8d5; 46 | $base3: #fdf6e3; 47 | $yellow: #b58900; 48 | $orange: #cb4b16; 49 | $red: #dc322f; 50 | $magenta: #d33682; 51 | $violet: #6c71c4; 52 | $blue: #268bd2; 53 | $cyan: #2aa198; 54 | $green: #859900; 55 | 56 | // Override theme settings (see ../template/settings.scss) 57 | $mainColor: $base00; 58 | $headingColor: $base01; 59 | $headingTextShadow: none; 60 | $backgroundColor: $base3; 61 | $linkColor: $blue; 62 | $linkColorHover: lighten( $linkColor, 20% ); 63 | $selectionBackgroundColor: $magenta; 64 | 65 | // Background generator 66 | // @mixin bodyBackground() { 67 | // @include radial-gradient( rgba($base3,1), rgba(lighten($base3, 20%),1) ); 68 | // } 69 | 70 | 71 | 72 | // Theme template ------------------------------ 73 | @import "../template/theme"; 74 | // --------------------------------------------- 75 | -------------------------------------------------------------------------------- /shared/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 | } -------------------------------------------------------------------------------- /shared/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: 36px; 10 | $mainColor: #eee; 11 | 12 | // Headings 13 | $headingFont: 'League Gothic', Impact, sans-serif; 14 | $headingColor: #eee; 15 | $headingLineHeight: 0.9em; 16 | $headingLetterSpacing: 0.02em; 17 | $headingTextTransform: uppercase; 18 | $headingTextShadow: 0px 0px 6px rgba(0,0,0,0.2); 19 | $heading1TextShadow: $headingTextShadow; 20 | 21 | // Links and actions 22 | $linkColor: #13DAEC; 23 | $linkColorHover: lighten( $linkColor, 20% ); 24 | 25 | // Text selection 26 | $selectionBackgroundColor: #FF5E99; 27 | $selectionColor: #fff; 28 | 29 | // Generates the presentation background, can be overridden 30 | // to return a background image or gradient 31 | @mixin bodyBackground() { 32 | background: $backgroundColor; 33 | } -------------------------------------------------------------------------------- /shared/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: 200; 16 | letter-spacing: -0.02em; 17 | color: $mainColor; 18 | } 19 | 20 | ::selection { 21 | color: $selectionColor; 22 | background: $selectionBackgroundColor; 23 | text-shadow: none; 24 | } 25 | 26 | /********************************************* 27 | * HEADERS 28 | *********************************************/ 29 | 30 | .reveal h1, 31 | .reveal h2, 32 | .reveal h3, 33 | .reveal h4, 34 | .reveal h5, 35 | .reveal h6 { 36 | margin: 0 0 20px 0; 37 | color: $headingColor; 38 | 39 | font-family: $headingFont; 40 | line-height: $headingLineHeight; 41 | letter-spacing: $headingLetterSpacing; 42 | 43 | text-transform: $headingTextTransform; 44 | text-shadow: $headingTextShadow; 45 | } 46 | 47 | .reveal h1 { 48 | text-shadow: $heading1TextShadow; 49 | } 50 | 51 | 52 | /********************************************* 53 | * LINKS 54 | *********************************************/ 55 | 56 | .reveal a:not(.image) { 57 | color: $linkColor; 58 | text-decoration: none; 59 | 60 | -webkit-transition: color .15s ease; 61 | -moz-transition: color .15s ease; 62 | -ms-transition: color .15s ease; 63 | -o-transition: color .15s ease; 64 | transition: color .15s ease; 65 | } 66 | .reveal a:not(.image):hover { 67 | color: $linkColorHover; 68 | 69 | text-shadow: none; 70 | border: none; 71 | } 72 | 73 | .reveal .roll span:after { 74 | color: #fff; 75 | background: darken( $linkColor, 15% ); 76 | } 77 | 78 | 79 | /********************************************* 80 | * IMAGES 81 | *********************************************/ 82 | 83 | .reveal section img { 84 | margin: 15px 0px; 85 | background: rgba(255,255,255,0.12); 86 | border: 4px solid $mainColor; 87 | 88 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); 89 | 90 | -webkit-transition: all .2s linear; 91 | -moz-transition: all .2s linear; 92 | -ms-transition: all .2s linear; 93 | -o-transition: all .2s linear; 94 | transition: all .2s linear; 95 | } 96 | 97 | .reveal a:hover img { 98 | background: rgba(255,255,255,0.2); 99 | border-color: $linkColor; 100 | 101 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); 102 | } 103 | 104 | 105 | /********************************************* 106 | * NAVIGATION CONTROLS 107 | *********************************************/ 108 | 109 | .reveal .controls div.navigate-left, 110 | .reveal .controls div.navigate-left.enabled { 111 | border-right-color: $linkColor; 112 | } 113 | 114 | .reveal .controls div.navigate-right, 115 | .reveal .controls div.navigate-right.enabled { 116 | border-left-color: $linkColor; 117 | } 118 | 119 | .reveal .controls div.navigate-up, 120 | .reveal .controls div.navigate-up.enabled { 121 | border-bottom-color: $linkColor; 122 | } 123 | 124 | .reveal .controls div.navigate-down, 125 | .reveal .controls div.navigate-down.enabled { 126 | border-top-color: $linkColor; 127 | } 128 | 129 | .reveal .controls div.navigate-left.enabled:hover { 130 | border-right-color: $linkColorHover; 131 | } 132 | 133 | .reveal .controls div.navigate-right.enabled:hover { 134 | border-left-color: $linkColorHover; 135 | } 136 | 137 | .reveal .controls div.navigate-up.enabled:hover { 138 | border-bottom-color: $linkColorHover; 139 | } 140 | 141 | .reveal .controls div.navigate-down.enabled:hover { 142 | border-top-color: $linkColorHover; 143 | } 144 | 145 | 146 | /********************************************* 147 | * PROGRESS BAR 148 | *********************************************/ 149 | 150 | .reveal .progress { 151 | background: rgba(0,0,0,0.2); 152 | } 153 | .reveal .progress span { 154 | background: $linkColor; 155 | 156 | -webkit-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); 157 | -moz-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); 158 | -ms-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); 159 | -o-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); 160 | transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); 161 | } 162 | 163 | 164 | -------------------------------------------------------------------------------- /shared/current_relative_sample_url_image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kottans/js-slides/6645e6b42269ab0fa91b24ef661075e0f4cc6eb6/shared/current_relative_sample_url_image.jpg -------------------------------------------------------------------------------- /shared/js/reveal.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * reveal.js 2.4.0 (2013-04-29, 22:06) 3 | * http://lab.hakim.se/reveal-js 4 | * MIT licensed 5 | * 6 | * Copyright (C) 2013 Hakim El Hattab, http://hakim.se 7 | */ 8 | var Reveal=function(){"use strict";function e(e){return Mt||kt?(window.addEventListener("load",h,!1),c(bt,e),n(),r(),void 0):(document.body.setAttribute("class","no-transforms"),void 0)}function t(){if(Tt.theme=document.querySelector("#theme"),Tt.wrapper=document.querySelector(".reveal"),Tt.slides=document.querySelector(".reveal .slides"),!Tt.wrapper.querySelector(".progress")){var e=document.createElement("div");e.classList.add("progress"),e.innerHTML="",Tt.wrapper.appendChild(e)}if(!Tt.wrapper.querySelector(".controls")){var t=document.createElement("aside");t.classList.add("controls"),t.innerHTML='
    ',Tt.wrapper.appendChild(t)}if(!Tt.wrapper.querySelector(".state-background")){var n=document.createElement("div");n.classList.add("state-background"),Tt.wrapper.appendChild(n)}if(!Tt.wrapper.querySelector(".pause-overlay")){var r=document.createElement("div");r.classList.add("pause-overlay"),Tt.wrapper.appendChild(r)}Tt.progress=document.querySelector(".reveal .progress"),Tt.progressbar=document.querySelector(".reveal .progress span"),bt.controls&&(Tt.controls=document.querySelector(".reveal .controls"),Tt.controlsLeft=l(document.querySelectorAll(".navigate-left")),Tt.controlsRight=l(document.querySelectorAll(".navigate-right")),Tt.controlsUp=l(document.querySelectorAll(".navigate-up")),Tt.controlsDown=l(document.querySelectorAll(".navigate-down")),Tt.controlsPrev=l(document.querySelectorAll(".navigate-prev")),Tt.controlsNext=l(document.querySelectorAll(".navigate-next")))}function n(){/iphone|ipod|android/gi.test(navigator.userAgent)&&!/crios/gi.test(navigator.userAgent)&&(window.addEventListener("load",u,!1),window.addEventListener("orientationchange",u,!1))}function r(){function e(){n.length&&head.js.apply(null,n),o()}for(var t=[],n=[],r=0,a=bt.dependencies.length;a>r;r++){var s=bt.dependencies[r];(!s.condition||s.condition())&&(s.async?n.push(s.src):t.push(s.src),"function"==typeof s.callback&&head.ready(s.src.match(/([\w\d_\-]*)\.?js$|[^\\\/]*$/i)[0],s.callback))}t.length?(head.ready(e),head.js.apply(null,t)):e()}function o(){t(),a(),H(),setTimeout(function(){f("ready",{indexh:St,indexv:At,currentSlide:ht})},1)}function a(e){if(Tt.wrapper.classList.remove(bt.transition),"object"==typeof e&&c(bt,e),kt===!1&&(bt.transition="linear"),Tt.wrapper.classList.add(bt.transition),Tt.wrapper.setAttribute("data-transition-speed",bt.transitionSpeed),Tt.controls&&(Tt.controls.style.display=bt.controls&&Tt.controls?"block":"none"),Tt.progress&&(Tt.progress.style.display=bt.progress&&Tt.progress?"block":"none"),bt.rtl?Tt.wrapper.classList.add("rtl"):Tt.wrapper.classList.remove("rtl"),bt.center?Tt.wrapper.classList.add("center"):Tt.wrapper.classList.remove("center"),bt.mouseWheel?(document.addEventListener("DOMMouseScroll",ot,!1),document.addEventListener("mousewheel",ot,!1)):(document.removeEventListener("DOMMouseScroll",ot,!1),document.removeEventListener("mousewheel",ot,!1)),bt.rollingLinks?v():p(),bt.theme&&Tt.theme){var t=Tt.theme.getAttribute("href"),n=/[^\/]*?(?=\.css)/,r=t.match(n)[0];bt.theme!==r&&(t=t.replace(n,bt.theme),Tt.theme.setAttribute("href",t))}P()}function s(){Yt=!0,window.addEventListener("hashchange",ft,!1),window.addEventListener("resize",vt,!1),bt.touch&&(Tt.wrapper.addEventListener("touchstart",G,!1),Tt.wrapper.addEventListener("touchmove",J,!1),Tt.wrapper.addEventListener("touchend",et,!1),window.navigator.msPointerEnabled&&(Tt.wrapper.addEventListener("MSPointerDown",tt,!1),Tt.wrapper.addEventListener("MSPointerMove",nt,!1),Tt.wrapper.addEventListener("MSPointerUp",rt,!1))),bt.keyboard&&document.addEventListener("keydown",B,!1),bt.progress&&Tt.progress&&Tt.progress.addEventListener("click",at,!1),bt.controls&&Tt.controls&&["touchstart","click"].forEach(function(e){Tt.controlsLeft.forEach(function(t){t.addEventListener(e,st,!1)}),Tt.controlsRight.forEach(function(t){t.addEventListener(e,it,!1)}),Tt.controlsUp.forEach(function(t){t.addEventListener(e,ct,!1)}),Tt.controlsDown.forEach(function(t){t.addEventListener(e,lt,!1)}),Tt.controlsPrev.forEach(function(t){t.addEventListener(e,dt,!1)}),Tt.controlsNext.forEach(function(t){t.addEventListener(e,ut,!1)})})}function i(){Yt=!1,document.removeEventListener("keydown",B,!1),window.removeEventListener("hashchange",ft,!1),window.removeEventListener("resize",vt,!1),Tt.wrapper.removeEventListener("touchstart",G,!1),Tt.wrapper.removeEventListener("touchmove",J,!1),Tt.wrapper.removeEventListener("touchend",et,!1),window.navigator.msPointerEnabled&&(Tt.wrapper.removeEventListener("MSPointerDown",tt,!1),Tt.wrapper.removeEventListener("MSPointerMove",nt,!1),Tt.wrapper.removeEventListener("MSPointerUp",rt,!1)),bt.progress&&Tt.progress&&Tt.progress.removeEventListener("click",at,!1),bt.controls&&Tt.controls&&["touchstart","click"].forEach(function(e){Tt.controlsLeft.forEach(function(t){t.removeEventListener(e,st,!1)}),Tt.controlsRight.forEach(function(t){t.removeEventListener(e,it,!1)}),Tt.controlsUp.forEach(function(t){t.removeEventListener(e,ct,!1)}),Tt.controlsDown.forEach(function(t){t.removeEventListener(e,lt,!1)}),Tt.controlsPrev.forEach(function(t){t.removeEventListener(e,dt,!1)}),Tt.controlsNext.forEach(function(t){t.removeEventListener(e,ut,!1)})})}function c(e,t){for(var n in t)e[n]=t[n]}function l(e){return Array.prototype.slice.call(e)}function d(e,t){var n=e.x-t.x,r=e.y-t.y;return Math.sqrt(n*n+r*r)}function u(){0===window.orientation?(document.documentElement.style.overflow="scroll",document.body.style.height="120%"):(document.documentElement.style.overflow="",document.body.style.height="100%"),setTimeout(function(){window.scrollTo(0,1)},10)}function f(e,t){var n=document.createEvent("HTMLEvents",1,2);n.initEvent(e,!0,!0),c(n,t),Tt.wrapper.dispatchEvent(n)}function v(){if(kt&&!("msPerspective"in document.body.style))for(var e=document.querySelectorAll(gt+" a:not(.image)"),t=0,n=e.length;n>t;t++){var r=e[t];if(!(!r.textContent||r.querySelector("*")||r.className&&r.classList.contains(r,"roll"))){var o=document.createElement("span");o.setAttribute("data-title",r.text),o.innerHTML=r.innerHTML,r.classList.add("roll"),r.innerHTML="",r.appendChild(o)}}}function p(){for(var e=document.querySelectorAll(gt+" a.roll"),t=0,n=e.length;n>t;t++){var r=e[t],o=r.querySelector("span");o&&(r.classList.remove("roll"),r.innerHTML=o.innerHTML)}}function m(e){var t=l(e);return t.forEach(function(e,t){e.hasAttribute("data-fragment-index")||e.setAttribute("data-fragment-index",t)}),t.sort(function(e,t){return e.getAttribute("data-fragment-index")-t.getAttribute("data-fragment-index")}),t}function h(){if(Tt.wrapper){var e=Tt.wrapper.offsetWidth,t=Tt.wrapper.offsetHeight;e-=t*bt.margin,t-=t*bt.margin;var n=bt.width,r=bt.height;if("string"==typeof n&&/%$/.test(n)&&(n=parseInt(n,10)/100*e),"string"==typeof r&&/%$/.test(r)&&(r=parseInt(r,10)/100*t),Tt.slides.style.width=n+"px",Tt.slides.style.height=r+"px",xt=Math.min(e/n,t/r),xt=Math.max(xt,bt.minScale),xt=Math.min(xt,bt.maxScale),void 0===Tt.slides.style.zoom||navigator.userAgent.match(/(iphone|ipod|ipad|android)/gi)){var o="translate(-50%, -50%) scale("+xt+") translate(50%, 50%)";Tt.slides.style.WebkitTransform=o,Tt.slides.style.MozTransform=o,Tt.slides.style.msTransform=o,Tt.slides.style.OTransform=o,Tt.slides.style.transform=o}else Tt.slides.style.zoom=xt;for(var a=l(document.querySelectorAll(gt)),s=0,i=a.length;i>s;s++){var c=a[s];"none"!==c.style.display&&(c.style.top=bt.center?c.classList.contains("stack")?0:Math.max(-(c.offsetHeight/2)-20,-r/2)+"px":"")}N()}}function g(e,t){"object"==typeof e&&"function"==typeof e.setAttribute&&e.setAttribute("data-previous-indexv",t||0)}function y(e){return"object"==typeof e&&"function"==typeof e.setAttribute&&e.classList.contains("stack")?parseInt(e.getAttribute("data-previous-indexv")||0,10):0}function w(){if(bt.overview){_();var e=Tt.wrapper.classList.contains("overview");Tt.wrapper.classList.add("overview"),Tt.wrapper.classList.remove("exit-overview"),clearTimeout(Ct),clearTimeout(Ot),Ct=setTimeout(function(){for(var t=document.querySelectorAll(yt),n=0,r=t.length;r>n;n++){var o=t[n],a=bt.rtl?-105:105,s="translateZ(-2500px) translate("+(n-St)*a+"%, 0%)";if(o.setAttribute("data-index-h",n),o.style.display="block",o.style.WebkitTransform=s,o.style.MozTransform=s,o.style.msTransform=s,o.style.OTransform=s,o.style.transform=s,o.classList.contains("stack"))for(var i=o.querySelectorAll("section"),c=0,l=i.length;l>c;c++){var d=n===St?At:y(o),u=i[c],v="translate(0%, "+105*(c-d)+"%)";u.setAttribute("data-index-h",n),u.setAttribute("data-index-v",c),u.style.display="block",u.style.WebkitTransform=v,u.style.MozTransform=v,u.style.msTransform=v,u.style.OTransform=v,u.style.transform=v,u.addEventListener("click",pt,!0)}else o.addEventListener("click",pt,!0)}h(),e||f("overviewshown",{indexh:St,indexv:At,currentSlide:ht})},10)}}function L(){if(bt.overview){clearTimeout(Ct),clearTimeout(Ot),Tt.wrapper.classList.remove("overview"),Tt.wrapper.classList.add("exit-overview"),Ot=setTimeout(function(){Tt.wrapper.classList.remove("exit-overview")},10);for(var e=l(document.querySelectorAll(gt)),t=0,n=e.length;n>t;t++){var r=e[t];r.style.display="",r.style.WebkitTransform="",r.style.MozTransform="",r.style.msTransform="",r.style.OTransform="",r.style.transform="",r.removeEventListener("click",pt,!0)}M(St,At),F(),f("overviewhidden",{indexh:St,indexv:At,currentSlide:ht})}}function b(e){"boolean"==typeof e?e?w():L():E()?L():w()}function E(){return Tt.wrapper.classList.contains("overview")}function S(e){return e=e?e:ht,e&&!!e.parentNode.nodeName.match(/section/i)}function A(){var e=document.body,t=e.requestFullScreen||e.webkitRequestFullscreen||e.webkitRequestFullScreen||e.mozRequestFullScreen||e.msRequestFullScreen;t&&t.apply(e)}function q(){var e=Tt.wrapper.classList.contains("paused");_(),Tt.wrapper.classList.add("paused"),e===!1&&f("paused")}function x(){var e=Tt.wrapper.classList.contains("paused");Tt.wrapper.classList.remove("paused"),F(),e&&f("resumed")}function T(){k()?x():q()}function k(){return Tt.wrapper.classList.contains("paused")}function M(e,t,n,r){mt=ht;var o=document.querySelectorAll(yt);void 0===t&&(t=y(o[e])),mt&&mt.parentNode&&mt.parentNode.classList.contains("stack")&&g(mt.parentNode,At);var a=qt.concat();qt.length=0;var s=St,i=At;St=D(yt,void 0===e?St:e),At=D(wt,void 0===t?At:t),h();e:for(var c=0,d=qt.length;d>c;c++){for(var u=0;a.length>u;u++)if(a[u]===qt[c]){a.splice(u,1);continue e}document.documentElement.classList.add(qt[c]),f(qt[c])}for(;a.length;)document.documentElement.classList.remove(a.pop());E()&&w(),I(1500);var v=o[St],p=v.querySelectorAll("section");if(ht=p[At]||v,n!==void 0){var L=m(ht.querySelectorAll(".fragment"));l(L).forEach(function(e,t){n>t?e.classList.add("visible"):e.classList.remove("visible")})}St!==s||At!==i?f("slidechanged",{indexh:St,indexv:At,previousSlide:mt,currentSlide:ht,origin:r}):mt=null,mt&&(mt.classList.remove("present"),document.querySelector(Lt).classList.contains("present")&&setTimeout(function(){var e,t=l(document.querySelectorAll(yt+".stack"));for(e in t)t[e]&&g(t[e],0)},0)),X(mt),R(ht),C(),N()}function P(){i(),s(),h(),Et=bt.autoSlide,F(),C(),N()}function D(e,t){var n=l(document.querySelectorAll(e)),r=n.length;if(r){bt.loop&&(t%=r,0>t&&(t=r+t)),t=Math.max(Math.min(t,r-1),0);for(var o=0;r>o;o++){var a=n[o];if(E()===!1){var s=Math.abs((t-o)%(r-3))||0;a.style.display=s>3?"none":"block"}var i=bt.rtl&&!S(a);a.classList.remove("past"),a.classList.remove("present"),a.classList.remove("future"),t>o?a.classList.add(i?"future":"past"):o>t&&a.classList.add(i?"past":"future"),a.querySelector("section")&&a.classList.add("stack")}n[t].classList.add("present");var c=n[t].getAttribute("data-state");c&&(qt=qt.concat(c.split(" ")));var d=n[t].getAttribute("data-autoslide");Et=d?parseInt(d,10):bt.autoSlide}else t=0;return t}function N(){if(bt.progress&&Tt.progress){var e=l(document.querySelectorAll(yt)),t=document.querySelectorAll(gt+":not(.stack)").length,n=0;e:for(var r=0;e.length>r;r++){for(var o=e[r],a=l(o.querySelectorAll("section")),s=0;a.length>s;s++){if(a[s].classList.contains("present"))break e;n++}if(o.classList.contains("present"))break;o.classList.contains("stack")===!1&&n++}Tt.progressbar.style.width=n/(t-1)*window.innerWidth+"px"}}function C(){if(bt.controls&&Tt.controls){var e=O(),t=Y();Tt.controlsLeft.concat(Tt.controlsRight).concat(Tt.controlsUp).concat(Tt.controlsDown).concat(Tt.controlsPrev).concat(Tt.controlsNext).forEach(function(e){e.classList.remove("enabled"),e.classList.remove("fragmented")}),e.left&&Tt.controlsLeft.forEach(function(e){e.classList.add("enabled")}),e.right&&Tt.controlsRight.forEach(function(e){e.classList.add("enabled")}),e.up&&Tt.controlsUp.forEach(function(e){e.classList.add("enabled")}),e.down&&Tt.controlsDown.forEach(function(e){e.classList.add("enabled")}),(e.left||e.up)&&Tt.controlsPrev.forEach(function(e){e.classList.add("enabled")}),(e.right||e.down)&&Tt.controlsNext.forEach(function(e){e.classList.add("enabled")}),ht&&(t.prev&&Tt.controlsPrev.forEach(function(e){e.classList.add("fragmented","enabled")}),t.next&&Tt.controlsNext.forEach(function(e){e.classList.add("fragmented","enabled")}),S(ht)?(t.prev&&Tt.controlsUp.forEach(function(e){e.classList.add("fragmented","enabled")}),t.next&&Tt.controlsDown.forEach(function(e){e.classList.add("fragmented","enabled")})):(t.prev&&Tt.controlsLeft.forEach(function(e){e.classList.add("fragmented","enabled")}),t.next&&Tt.controlsRight.forEach(function(e){e.classList.add("fragmented","enabled")})))}}function O(){var e=document.querySelectorAll(yt),t=document.querySelectorAll(wt),n={left:St>0||bt.loop,right:e.length-1>St||bt.loop,up:At>0,down:t.length-1>At};if(bt.rtl){var r=n.left;n.left=n.right,n.right=r}return n}function Y(){if(ht&&bt.fragments){var e=ht.querySelectorAll(".fragment"),t=ht.querySelectorAll(".fragment:not(.visible)");return{prev:e.length-t.length>0,next:!!t.length}}return{prev:!1,next:!1}}function R(e){e&&(l(e.querySelectorAll("video, audio")).forEach(function(e){e.hasAttribute("data-autoplay")&&e.play()}),l(e.querySelectorAll('iframe[src*="youtube.com/embed/"]')).forEach(function(e){e.hasAttribute("data-autoplay")&&e.contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}',"*")}))}function X(e){e&&(l(e.querySelectorAll("video, audio")).forEach(function(e){e.hasAttribute("data-ignore")||e.pause()}),l(e.querySelectorAll('iframe[src*="youtube.com/embed/"]')).forEach(function(e){e.hasAttribute("data-ignore")||"function"!=typeof e.contentWindow.postMessage||e.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}',"*")}))}function H(){var e=window.location.hash,t=e.slice(2).split("/"),n=e.replace(/#|\//gi,"");if(isNaN(parseInt(t[0],10))&&n.length){var r=document.querySelector("#"+n);if(r){var o=Reveal.getIndices(r);M(o.h,o.v)}else M(St,At)}else{var a=parseInt(t[0],10)||0,s=parseInt(t[1],10)||0;M(a,s)}}function I(e){if(bt.history)if(clearTimeout(Nt),"number"==typeof e)Nt=setTimeout(I,e);else{var t="/";ht&&"string"==typeof ht.getAttribute("id")?t="/"+ht.getAttribute("id"):((St>0||At>0)&&(t+=St),At>0&&(t+="/"+At)),window.location.hash=t}}function W(e){var t,n=St,r=At;if(e){var o=S(e),a=o?e.parentNode:e,s=l(document.querySelectorAll(yt));n=Math.max(s.indexOf(a),0),o&&(r=Math.max(l(e.parentNode.querySelectorAll("section")).indexOf(e),0))}if(!e&&ht){var i=ht.querySelectorAll(".fragment.visible");i.length&&(t=i.length)}return{h:n,v:r,f:t}}function U(){if(ht&&bt.fragments){var e=m(ht.querySelectorAll(".fragment:not(.visible)"));if(e.length)return e[0].classList.add("visible"),f("fragmentshown",{fragment:e[0]}),C(),!0}return!1}function z(){if(ht&&bt.fragments){var e=m(ht.querySelectorAll(".fragment.visible"));if(e.length)return e[e.length-1].classList.remove("visible"),f("fragmenthidden",{fragment:e[e.length-1]}),C(),!0}return!1}function F(){clearTimeout(Dt),!Et||k()||E()||(Dt=setTimeout(Q,Et))}function _(){clearTimeout(Dt)}function j(){bt.rtl?(E()||U()===!1)&&O().left&&M(St+1):(E()||z()===!1)&&O().left&&M(St-1)}function K(){bt.rtl?(E()||z()===!1)&&O().right&&M(St-1):(E()||U()===!1)&&O().right&&M(St+1)}function $(){(E()||z()===!1)&&O().up&&M(St,At-1)}function V(){(E()||U()===!1)&&O().down&&M(St,At+1)}function Z(){if(z()===!1)if(O().up)$();else{var e=document.querySelector(yt+".past:nth-child("+St+")");e&&(At=e.querySelectorAll("section").length+1||void 0,St--,M(St,At))}}function Q(){U()===!1&&(O().down?V():K()),F()}function B(e){document.activeElement;var t=!(!document.activeElement||!document.activeElement.type&&!document.activeElement.href&&"inherit"===document.activeElement.contentEditable);if(!(t||e.shiftKey&&32!==e.keyCode||e.altKey||e.ctrlKey||e.metaKey)){var n=!0;if(k()&&-1===[66,190,191].indexOf(e.keyCode))return!1;switch(e.keyCode){case 80:case 33:Z();break;case 78:case 34:Q();break;case 72:case 37:j();break;case 76:case 39:K();break;case 75:case 38:$();break;case 74:case 40:V();break;case 36:M(0);break;case 35:M(Number.MAX_VALUE);break;case 32:E()?L():e.shiftKey?Z():Q();break;case 13:E()?L():n=!1;break;case 66:case 190:case 191:T();break;case 70:A();break;default:n=!1}n?e.preventDefault():27===e.keyCode&&kt&&(b(),e.preventDefault()),F()}}function G(e){Rt.startX=e.touches[0].clientX,Rt.startY=e.touches[0].clientY,Rt.startCount=e.touches.length,2===e.touches.length&&bt.overview&&(Rt.startSpan=d({x:e.touches[1].clientX,y:e.touches[1].clientY},{x:Rt.startX,y:Rt.startY}))}function J(e){if(Rt.handled)navigator.userAgent.match(/android/gi)&&e.preventDefault();else{var t=e.touches[0].clientX,n=e.touches[0].clientY;if(2===e.touches.length&&2===Rt.startCount&&bt.overview){var r=d({x:e.touches[1].clientX,y:e.touches[1].clientY},{x:Rt.startX,y:Rt.startY});Math.abs(Rt.startSpan-r)>Rt.threshold&&(Rt.handled=!0,Rt.startSpan>r?w():L()),e.preventDefault()}else if(1===e.touches.length&&2!==Rt.startCount){var o=t-Rt.startX,a=n-Rt.startY;o>Rt.threshold&&Math.abs(o)>Math.abs(a)?(Rt.handled=!0,j()):-Rt.threshold>o&&Math.abs(o)>Math.abs(a)?(Rt.handled=!0,K()):a>Rt.threshold?(Rt.handled=!0,$()):-Rt.threshold>a&&(Rt.handled=!0,V()),e.preventDefault()}}}function et(){Rt.handled=!1}function tt(e){e.pointerType===e.MSPOINTER_TYPE_TOUCH&&(e.touches=[{clientX:e.clientX,clientY:e.clientY}],G(e))}function nt(e){e.pointerType===e.MSPOINTER_TYPE_TOUCH&&(e.touches=[{clientX:e.clientX,clientY:e.clientY}],J(e))}function rt(e){e.pointerType===e.MSPOINTER_TYPE_TOUCH&&(e.touches=[{clientX:e.clientX,clientY:e.clientY}],et(e))}function ot(e){clearTimeout(Pt),Pt=setTimeout(function(){var t=e.detail||-e.wheelDelta;t>0?Q():Z()},100)}function at(e){e.preventDefault();var t=l(document.querySelectorAll(yt)).length,n=Math.floor(e.clientX/Tt.wrapper.offsetWidth*t);M(n)}function st(e){e.preventDefault(),j()}function it(e){e.preventDefault(),K()}function ct(e){e.preventDefault(),$()}function lt(e){e.preventDefault(),V()}function dt(e){e.preventDefault(),Z()}function ut(e){e.preventDefault(),Q()}function ft(){H()}function vt(){h()}function pt(e){if(Yt&&E()){e.preventDefault();for(var t=e.target;t&&!t.nodeName.match(/section/gi);)t=t.parentNode;if(t&&!t.classList.contains("disabled")&&(L(),t.nodeName.match(/section/gi))){var n=parseInt(t.getAttribute("data-index-h"),10),r=parseInt(t.getAttribute("data-index-v"),10);M(n,r)}}}var mt,ht,gt=".reveal .slides section",yt=".reveal .slides>section",wt=".reveal .slides>section.present>section",Lt=".reveal .slides>section:first-child",bt={width:960,height:700,margin:.1,minScale:.2,maxScale:1,controls:!0,progress:!0,history:!1,keyboard:!0,overview:!0,center:!0,touch:!0,loop:!1,rtl:!1,fragments:!0,autoSlide:0,mouseWheel:!1,rollingLinks:!0,theme:null,transition:"default",transitionSpeed:"default",dependencies:[]},Et=0,St=0,At=0,qt=[],xt=1,Tt={},kt="WebkitPerspective"in document.body.style||"MozPerspective"in document.body.style||"msPerspective"in document.body.style||"OPerspective"in document.body.style||"perspective"in document.body.style,Mt="WebkitTransform"in document.body.style||"MozTransform"in document.body.style||"msTransform"in document.body.style||"OTransform"in document.body.style||"transform"in document.body.style,Pt=0,Dt=0,Nt=0,Ct=0,Ot=0,Yt=!1,Rt={startX:0,startY:0,startSpan:0,startCount:0,handled:!1,threshold:80};return{initialize:e,configure:a,sync:P,slide:M,left:j,right:K,up:$,down:V,prev:Z,next:Q,prevFragment:z,nextFragment:U,navigateTo:M,navigateLeft:j,navigateRight:K,navigateUp:$,navigateDown:V,navigatePrev:Z,navigateNext:Q,layout:h,availableRoutes:O,availableFragments:Y,toggleOverview:b,togglePause:T,isOverview:E,isPaused:k,addEventListeners:s,removeEventListeners:i,getIndices:W,getSlide:function(e,t){var n=document.querySelectorAll(yt)[e],r=n&&n.querySelectorAll("section");return t!==void 0?r?r[t]:void 0:n},getPreviousSlide:function(){return mt},getCurrentSlide:function(){return ht},getScale:function(){return xt},getConfig:function(){return bt},getQueryHash:function(){var e={};return location.search.replace(/[A-Z0-9]+?=(\w*)/gi,function(t){e[t.split("=").shift()]=t.split("=").pop()}),e},isFirstSlide:function(){return null==document.querySelector(gt+".past")?!0:!1},isLastSlide:function(){return ht&&ht.classList.contains(".stack")?null==ht.querySelector(gt+".future")?!0:!1:null==document.querySelector(gt+".future")?!0:!1},addEventListener:function(e,t,n){"addEventListener"in window&&(Tt.wrapper||document.querySelector(".reveal")).addEventListener(e,t,n)},removeEventListener:function(e,t,n){"addEventListener"in window&&(Tt.wrapper||document.querySelector(".reveal")).removeEventListener(e,t,n)}}}(); -------------------------------------------------------------------------------- /shared/lib/css/zenburn.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Zenburn style from voldmar.ru (c) Vladimir Epifanov 4 | based on dark.css by Ivan Sagalaev 5 | 6 | */ 7 | 8 | pre code { 9 | display: block; padding: 0.5em; 10 | background: #3F3F3F; 11 | color: #DCDCDC; 12 | } 13 | 14 | pre .keyword, 15 | pre .tag, 16 | pre .django .tag, 17 | pre .django .keyword, 18 | pre .css .class, 19 | pre .css .id, 20 | pre .lisp .title { 21 | color: #E3CEAB; 22 | } 23 | 24 | pre .django .template_tag, 25 | pre .django .variable, 26 | pre .django .filter .argument { 27 | color: #DCDCDC; 28 | } 29 | 30 | pre .number, 31 | pre .date { 32 | color: #8CD0D3; 33 | } 34 | 35 | pre .dos .envvar, 36 | pre .dos .stream, 37 | pre .variable, 38 | pre .apache .sqbracket { 39 | color: #EFDCBC; 40 | } 41 | 42 | pre .dos .flow, 43 | pre .diff .change, 44 | pre .python .exception, 45 | pre .python .built_in, 46 | pre .literal, 47 | pre .tex .special { 48 | color: #EFEFAF; 49 | } 50 | 51 | pre .diff .chunk, 52 | pre .ruby .subst { 53 | color: #8F8F8F; 54 | } 55 | 56 | pre .dos .keyword, 57 | pre .python .decorator, 58 | pre .class .title, 59 | pre .haskell .label, 60 | pre .function .title, 61 | pre .ini .title, 62 | pre .diff .header, 63 | pre .ruby .class .parent, 64 | pre .apache .tag, 65 | pre .nginx .built_in, 66 | pre .tex .command, 67 | pre .input_number { 68 | color: #efef8f; 69 | } 70 | 71 | pre .dos .winutils, 72 | pre .ruby .symbol, 73 | pre .ruby .symbol .string, 74 | pre .ruby .symbol .keyword, 75 | pre .ruby .symbol .keymethods, 76 | pre .ruby .string, 77 | pre .ruby .instancevar { 78 | color: #DCA3A3; 79 | } 80 | 81 | pre .diff .deletion, 82 | pre .string, 83 | pre .tag .value, 84 | pre .preprocessor, 85 | pre .built_in, 86 | pre .sql .aggregate, 87 | pre .javadoc, 88 | pre .smalltalk .class, 89 | pre .smalltalk .localvars, 90 | pre .smalltalk .array, 91 | pre .css .rules .value, 92 | pre .attr_selector, 93 | pre .pseudo, 94 | pre .apache .cbracket, 95 | pre .tex .formula { 96 | color: #CC9393; 97 | } 98 | 99 | pre .shebang, 100 | pre .diff .addition, 101 | pre .comment, 102 | pre .java .annotation, 103 | pre .template_comment, 104 | pre .pi, 105 | pre .doctype { 106 | color: #7F9F7F; 107 | } 108 | 109 | pre .xml .css, 110 | pre .xml .javascript, 111 | pre .xml .vbscript, 112 | pre .tex .formula { 113 | opacity: 0.5; 114 | } 115 | 116 | -------------------------------------------------------------------------------- /shared/lib/font/league_gothic-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kottans/js-slides/6645e6b42269ab0fa91b24ef661075e0f4cc6eb6/shared/lib/font/league_gothic-webfont.eot -------------------------------------------------------------------------------- /shared/lib/font/league_gothic-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kottans/js-slides/6645e6b42269ab0fa91b24ef661075e0f4cc6eb6/shared/lib/font/league_gothic-webfont.ttf -------------------------------------------------------------------------------- /shared/lib/font/league_gothic-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kottans/js-slides/6645e6b42269ab0fa91b24ef661075e0f4cc6eb6/shared/lib/font/league_gothic-webfont.woff -------------------------------------------------------------------------------- /shared/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 | -------------------------------------------------------------------------------- /shared/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(;p 3 | Copyright Tero Piirainen (tipiirai) 4 | License MIT / http://bit.ly/mit-license 5 | Version 0.96 6 | 7 | http://headjs.com 8 | */(function(a){function z(){d||(d=!0,s(e,function(a){p(a)}))}function y(c,d){var e=a.createElement("script");e.type="text/"+(c.type||"javascript"),e.src=c.src||c,e.async=!1,e.onreadystatechange=e.onload=function(){var a=e.readyState;!d.done&&(!a||/loaded|complete/.test(a))&&(d.done=!0,d())},(a.body||b).appendChild(e)}function x(a,b){if(a.state==o)return b&&b();if(a.state==n)return k.ready(a.name,b);if(a.state==m)return a.onpreload.push(function(){x(a,b)});a.state=n,y(a.url,function(){a.state=o,b&&b(),s(g[a.name],function(a){p(a)}),u()&&d&&s(g.ALL,function(a){p(a)})})}function w(a,b){a.state===undefined&&(a.state=m,a.onpreload=[],y({src:a.url,type:"cache"},function(){v(a)}))}function v(a){a.state=l,s(a.onpreload,function(a){a.call()})}function u(a){a=a||h;var b;for(var c in a){if(a.hasOwnProperty(c)&&a[c].state!=o)return!1;b=!0}return b}function t(a){return Object.prototype.toString.call(a)=="[object Function]"}function s(a,b){if(!!a){typeof a=="object"&&(a=[].slice.call(a));for(var c=0;c 2 | 3 | 4 | 5 | 6 | 7 | reveal.js - Markdown Demo 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
    16 | 17 |
    18 | 19 | 20 |
    21 | 22 | 23 |
    24 | 34 |
    35 | 36 | 37 |
    38 | 52 |
    53 | 54 | 55 |
    56 | 67 |
    68 | 69 |
    70 |
    71 | 72 | 73 | 74 | 75 | 95 | 96 | 97 | 98 | -------------------------------------------------------------------------------- /shared/plugin/markdown/example.md: -------------------------------------------------------------------------------- 1 | # Markdown Demo 2 | 3 | 4 | 5 | ## External 1.1 6 | 7 | Content 1.1 8 | 9 | 10 | ## External 1.2 11 | 12 | Content 1.2 13 | 14 | 15 | 16 | ## External 2 17 | 18 | Content 2.1 19 | 20 | 21 | 22 | ## External 3.1 23 | 24 | Content 3.1 25 | 26 | 27 | ## External 3.2 28 | 29 | Content 3.2 30 | -------------------------------------------------------------------------------- /shared/plugin/markdown/markdown.js: -------------------------------------------------------------------------------- 1 | // From https://gist.github.com/1343518 2 | // Modified by Hakim to handle Markdown indented with tabs 3 | (function(){ 4 | 5 | if( typeof marked === 'undefined' ) { 6 | throw 'The reveal.js Markdown plugin requires marked to be loaded'; 7 | } 8 | 9 | var stripLeadingWhitespace = function(section) { 10 | 11 | var template = section.querySelector( 'script' ); 12 | 13 | // strip leading whitespace so it isn't evaluated as code 14 | var text = ( template || section ).textContent; 15 | 16 | var leadingWs = text.match(/^\n?(\s*)/)[1].length, 17 | leadingTabs = text.match(/^\n?(\t*)/)[1].length; 18 | 19 | if( leadingTabs > 0 ) { 20 | text = text.replace( new RegExp('\\n?\\t{' + leadingTabs + '}','g'), '\n' ); 21 | } 22 | else if( leadingWs > 1 ) { 23 | text = text.replace( new RegExp('\\n? {' + leadingWs + '}','g'), '\n' ); 24 | } 25 | 26 | return text; 27 | 28 | }; 29 | 30 | var twrap = function(el) { 31 | return ''; 32 | }; 33 | 34 | var getForwardedAttributes = function(section) { 35 | var attributes = section.attributes; 36 | var result = []; 37 | 38 | for( var i = 0, len = attributes.length; i < len; i++ ) { 39 | var name = attributes[i].name, 40 | value = attributes[i].value; 41 | 42 | // disregard attributes that are used for markdown loading/parsing 43 | if( /data\-(markdown|separator|vertical)/gi.test( name ) ) continue; 44 | 45 | if( value ) { 46 | result.push( name + '=' + value ); 47 | } 48 | else { 49 | result.push( name ); 50 | } 51 | } 52 | 53 | return result.join( ' ' ); 54 | } 55 | 56 | var slidifyMarkdown = function(markdown, separator, vertical, attributes) { 57 | 58 | separator = separator || '^\n---\n$'; 59 | 60 | var reSeparator = new RegExp(separator + (vertical ? '|' + vertical : ''), 'mg'), 61 | reHorSeparator = new RegExp(separator), 62 | matches, 63 | lastIndex = 0, 64 | isHorizontal, 65 | wasHorizontal = true, 66 | content, 67 | sectionStack = [], 68 | markdownSections = ''; 69 | 70 | // iterate until all blocks between separators are stacked up 71 | while( matches = reSeparator.exec(markdown) ) { 72 | 73 | // determine direction (horizontal by default) 74 | isHorizontal = reHorSeparator.test(matches[0]); 75 | 76 | if( !isHorizontal && wasHorizontal ) { 77 | // create vertical stack 78 | sectionStack.push([]); 79 | } 80 | 81 | // pluck slide content from markdown input 82 | content = markdown.substring(lastIndex, matches.index); 83 | 84 | if( isHorizontal && wasHorizontal ) { 85 | // add to horizontal stack 86 | sectionStack.push(content); 87 | } else { 88 | // add to vertical stack 89 | sectionStack[sectionStack.length-1].push(content); 90 | } 91 | 92 | lastIndex = reSeparator.lastIndex; 93 | wasHorizontal = isHorizontal; 94 | 95 | } 96 | 97 | // add the remaining slide 98 | (wasHorizontal ? sectionStack : sectionStack[sectionStack.length-1]).push(markdown.substring(lastIndex)); 99 | 100 | // flatten the hierarchical stack, and insert
    tags 101 | for( var k = 0, klen = sectionStack.length; k < klen; k++ ) { 102 | // horizontal 103 | if( typeof sectionStack[k] === 'string' ) { 104 | markdownSections += '
    ' + twrap( sectionStack[k] ) + '
    '; 105 | } 106 | // vertical 107 | else { 108 | markdownSections += '
    ' + 109 | '
    ' + sectionStack[k].map(twrap).join('
    ') + '
    ' + 110 | '
    '; 111 | } 112 | } 113 | 114 | return markdownSections; 115 | }; 116 | 117 | var querySlidingMarkdown = function() { 118 | 119 | var sections = document.querySelectorAll( '[data-markdown]'), 120 | section; 121 | 122 | for( var j = 0, jlen = sections.length; j < jlen; j++ ) { 123 | 124 | section = sections[j]; 125 | 126 | if( section.getAttribute('data-markdown').length ) { 127 | 128 | var xhr = new XMLHttpRequest(), 129 | url = section.getAttribute('data-markdown'); 130 | 131 | xhr.onreadystatechange = function () { 132 | if( xhr.readyState === 4 ) { 133 | if (xhr.status >= 200 && xhr.status < 300) { 134 | section.outerHTML = slidifyMarkdown( xhr.responseText, section.getAttribute('data-separator'), section.getAttribute('data-vertical'), getForwardedAttributes(section) ); 135 | } else { 136 | section.outerHTML = '
    ERROR: The attempt to fetch ' + url + ' failed with the HTTP status ' + xhr.status + 137 | '. Check your browser\'s JavaScript console for more details.' + 138 | '

    Remember that you need to serve the presentation HTML from a HTTP server and the Markdown file must be there too.

    '; 139 | } 140 | } 141 | }; 142 | 143 | xhr.open('GET', url, false); 144 | try { 145 | xhr.send(); 146 | } catch (e) { 147 | alert('Failed to get the Markdown file ' + url + '. Make sure that the presentation and the file are served by a HTTP server and the file can be found there. ' + e); 148 | } 149 | 150 | } else if( section.getAttribute('data-separator') ) { 151 | 152 | var markdown = stripLeadingWhitespace(section); 153 | section.outerHTML = slidifyMarkdown( markdown, section.getAttribute('data-separator'), section.getAttribute('data-vertical'), getForwardedAttributes(section) ); 154 | 155 | } 156 | } 157 | 158 | }; 159 | 160 | var queryMarkdownSlides = function() { 161 | 162 | var sections = document.querySelectorAll( '[data-markdown]'); 163 | 164 | for( var j = 0, jlen = sections.length; j < jlen; j++ ) { 165 | 166 | makeHtml(sections[j]); 167 | 168 | } 169 | 170 | }; 171 | 172 | var makeHtml = function(section) { 173 | 174 | var notes = section.querySelector( 'aside.notes' ); 175 | 176 | var markdown = stripLeadingWhitespace(section); 177 | 178 | section.innerHTML = marked(markdown); 179 | 180 | if( notes ) { 181 | section.appendChild( notes ); 182 | } 183 | 184 | }; 185 | 186 | querySlidingMarkdown(); 187 | 188 | queryMarkdownSlides(); 189 | 190 | })(); 191 | -------------------------------------------------------------------------------- /shared/plugin/markdown/marked.js: -------------------------------------------------------------------------------- 1 | /** 2 | * marked - a markdown parser 3 | * Copyright (c) 2011-2013, Christopher Jeffrey. (MIT Licensed) 4 | * https://github.com/chjj/marked 5 | */ 6 | 7 | (function(){var block={newline:/^\n+/,code:/^( {4}[^\n]+\n*)+/,fences:noop,hr:/^( *[-*_]){3,} *(?:\n+|$)/,heading:/^ *(#{1,6}) *([^\n]+?) *#* *(?:\n+|$)/,nptable:noop,lheading:/^([^\n]+)\n *(=|-){3,} *\n*/,blockquote:/^( *>[^\n]+(\n[^\n]+)*\n*)+/,list:/^( *)(bull) [\s\S]+?(?:hr|\n{2,}(?! )(?!\1bull )\n*|\s*$)/,html:/^ *(?:comment|closed|closing) *(?:\n{2,}|\s*$)/,def:/^ *\[([^\]]+)\]: *]+)>?(?: +["(]([^\n]+)[")])? *(?:\n+|$)/,table:noop,paragraph:/^((?:[^\n]+\n?(?!hr|heading|lheading|blockquote|tag|def))+)\n*/, 8 | text:/^[^\n]+/};block.bullet=/(?:[*+-]|\d+\.)/;block.item=/^( *)(bull) [^\n]*(?:\n(?!\1bull )[^\n]*)*/;block.item=replace(block.item,"gm")(/bull/g,block.bullet)();block.list=replace(block.list)(/bull/g,block.bullet)("hr",/\n+(?=(?: *[-*_]){3,} *(?:\n+|$))/)();block._tag="(?!(?:"+"a|em|strong|small|s|cite|q|dfn|abbr|data|time|code"+"|var|samp|kbd|sub|sup|i|b|u|mark|ruby|rt|rp|bdi|bdo"+"|span|br|wbr|ins|del|img)\\b)\\w+(?!:/|@)\\b";block.html=replace(block.html)("comment",/\x3c!--[\s\S]*?--\x3e/)("closed", 9 | /<(tag)[\s\S]+?<\/\1>/)("closing",/])*?>/)(/tag/g,block._tag)();block.paragraph=replace(block.paragraph)("hr",block.hr)("heading",block.heading)("lheading",block.lheading)("blockquote",block.blockquote)("tag","<"+block._tag)("def",block.def)();block.normal=merge({},block);block.gfm=merge({},block.normal,{fences:/^ *(`{3,}|~{3,}) *(\S+)? *\n([\s\S]+?)\s*\1 *(?:\n+|$)/,paragraph:/^/});block.gfm.paragraph=replace(block.paragraph)("(?!","(?!"+block.gfm.fences.source.replace("\\1", 10 | "\\2")+"|")();block.tables=merge({},block.gfm,{nptable:/^ *(\S.*\|.*)\n *([-:]+ *\|[-| :]*)\n((?:.*\|.*(?:\n|$))*)\n*/,table:/^ *\|(.+)\n *\|( *[-:]+[-| :]*)\n((?: *\|.*(?:\n|$))*)\n*/});function Lexer(options){this.tokens=[];this.tokens.links={};this.options=options||marked.defaults;this.rules=block.normal;if(this.options.gfm)if(this.options.tables)this.rules=block.tables;else this.rules=block.gfm}Lexer.rules=block;Lexer.lex=function(src,options){var lexer=new Lexer(options);return lexer.lex(src)}; 11 | Lexer.prototype.lex=function(src){src=src.replace(/\r\n|\r/g,"\n").replace(/\t/g," ").replace(/\u00a0/g," ").replace(/\u2424/g,"\n");return this.token(src,true)};Lexer.prototype.token=function(src,top){var src=src.replace(/^ +$/gm,""),next,loose,cap,bull,b,item,space,i,l;while(src){if(cap=this.rules.newline.exec(src)){src=src.substring(cap[0].length);if(cap[0].length>1)this.tokens.push({type:"space"})}if(cap=this.rules.code.exec(src)){src=src.substring(cap[0].length);cap=cap[0].replace(/^ {4}/gm, 12 | "");this.tokens.push({type:"code",text:!this.options.pedantic?cap.replace(/\n+$/,""):cap});continue}if(cap=this.rules.fences.exec(src)){src=src.substring(cap[0].length);this.tokens.push({type:"code",lang:cap[2],text:cap[3]});continue}if(cap=this.rules.heading.exec(src)){src=src.substring(cap[0].length);this.tokens.push({type:"heading",depth:cap[1].length,text:cap[2]});continue}if(top&&(cap=this.rules.nptable.exec(src))){src=src.substring(cap[0].length);item={type:"table",header:cap[1].replace(/^ *| *\| *$/g, 13 | "").split(/ *\| */),align:cap[2].replace(/^ *|\| *$/g,"").split(/ *\| */),cells:cap[3].replace(/\n$/,"").split("\n")};for(i=0;i ?/gm,"");this.token(cap,top);this.tokens.push({type:"blockquote_end"});continue}if(cap=this.rules.list.exec(src)){src=src.substring(cap[0].length); 15 | bull=cap[2];this.tokens.push({type:"list_start",ordered:bull.length>1});cap=cap[0].match(this.rules.item);next=false;l=cap.length;i=0;for(;i1&&b.length>1)){src=cap.slice(i+ 16 | 1).join("\n")+src;i=l-1}}loose=next||/\n\n(?!\s*$)/.test(item);if(i!==l-1){next=item[item.length-1]==="\n";if(!loose)loose=next}this.tokens.push({type:loose?"loose_item_start":"list_item_start"});this.token(item,false);this.tokens.push({type:"list_item_end"})}this.tokens.push({type:"list_end"});continue}if(cap=this.rules.html.exec(src)){src=src.substring(cap[0].length);this.tokens.push({type:this.options.sanitize?"paragraph":"html",pre:cap[1]==="pre"||cap[1]==="script",text:cap[0]});continue}if(top&& 17 | (cap=this.rules.def.exec(src))){src=src.substring(cap[0].length);this.tokens.links[cap[1].toLowerCase()]={href:cap[2],title:cap[3]};continue}if(top&&(cap=this.rules.table.exec(src))){src=src.substring(cap[0].length);item={type:"table",header:cap[1].replace(/^ *| *\| *$/g,"").split(/ *\| */),align:cap[2].replace(/^ *|\| *$/g,"").split(/ *\| */),cells:cap[3].replace(/(?: *\| *)?\n$/,"").split("\n")};for(i=0;i])/,autolink:/^<([^ >]+(@|:\/)[^ >]+)>/,url:noop,tag:/^\x3c!--[\s\S]*?--\x3e|^<\/?\w+(?:"[^"]*"|'[^']*'|[^'">])*?>/,link:/^!?\[(inside)\]\(href\)/,reflink:/^!?\[(inside)\]\s*\[([^\]]*)\]/,nolink:/^!?\[((?:\[[^\]]*\]|[^\[\]])*)\]/,strong:/^__([\s\S]+?)__(?!_)|^\*\*([\s\S]+?)\*\*(?!\*)/,em:/^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/, 20 | code:/^(`+)\s*([\s\S]*?[^`])\s*\1(?!`)/,br:/^ {2,}\n(?!\s*$)/,del:noop,text:/^[\s\S]+?(?=[\\?(?:\s+['"]([\s\S]*?)['"])?\s*/;inline.link=replace(inline.link)("inside",inline._inside)("href",inline._href)();inline.reflink=replace(inline.reflink)("inside",inline._inside)();inline.normal=merge({},inline);inline.pedantic=merge({},inline.normal,{strong:/^__(?=\S)([\s\S]*?\S)__(?!_)|^\*\*(?=\S)([\s\S]*?\S)\*\*(?!\*)/, 21 | em:/^_(?=\S)([\s\S]*?\S)_(?!_)|^\*(?=\S)([\s\S]*?\S)\*(?!\*)/});inline.gfm=merge({},inline.normal,{escape:replace(inline.escape)("])","~|])")(),url:/^(https?:\/\/[^\s<]+[^<.,:;"')\]\s])/,del:/^~~(?=\S)([\s\S]*?\S)~~/,text:replace(inline.text)("]|","~]|")("|","|https?://|")()});inline.breaks=merge({},inline.gfm,{br:replace(inline.br)("{2,}","*")(),text:replace(inline.gfm.text)("{2,}","*")()});function InlineLexer(links,options){this.options=options||marked.defaults;this.links=links;this.rules=inline.normal; 22 | if(!this.links)throw new Error("Tokens array requires a `links` property.");if(this.options.gfm)if(this.options.breaks)this.rules=inline.breaks;else this.rules=inline.gfm;else if(this.options.pedantic)this.rules=inline.pedantic}InlineLexer.rules=inline;InlineLexer.output=function(src,links,options){var inline=new InlineLexer(links,options);return inline.output(src)};InlineLexer.prototype.output=function(src){var out="",link,text,href,cap;while(src){if(cap=this.rules.escape.exec(src)){src=src.substring(cap[0].length); 23 | out+=cap[1];continue}if(cap=this.rules.autolink.exec(src)){src=src.substring(cap[0].length);if(cap[2]==="@"){text=cap[1][6]===":"?this.mangle(cap[1].substring(7)):this.mangle(cap[1]);href=this.mangle("mailto:")+text}else{text=escape(cap[1]);href=text}out+=''+text+"";continue}if(cap=this.rules.url.exec(src)){src=src.substring(cap[0].length);text=escape(cap[1]);href=text;out+=''+text+"";continue}if(cap=this.rules.tag.exec(src)){src=src.substring(cap[0].length); 24 | out+=this.options.sanitize?escape(cap[0]):cap[0];continue}if(cap=this.rules.link.exec(src)){src=src.substring(cap[0].length);out+=this.outputLink(cap,{href:cap[2],title:cap[3]});continue}if((cap=this.rules.reflink.exec(src))||(cap=this.rules.nolink.exec(src))){src=src.substring(cap[0].length);link=(cap[2]||cap[1]).replace(/\s+/g," ");link=this.links[link.toLowerCase()];if(!link||!link.href){out+=cap[0][0];src=cap[0].substring(1)+src;continue}out+=this.outputLink(cap,link);continue}if(cap=this.rules.strong.exec(src)){src= 25 | src.substring(cap[0].length);out+=""+this.output(cap[2]||cap[1])+"";continue}if(cap=this.rules.em.exec(src)){src=src.substring(cap[0].length);out+=""+this.output(cap[2]||cap[1])+"";continue}if(cap=this.rules.code.exec(src)){src=src.substring(cap[0].length);out+=""+escape(cap[2],true)+"";continue}if(cap=this.rules.br.exec(src)){src=src.substring(cap[0].length);out+="
    ";continue}if(cap=this.rules.del.exec(src)){src=src.substring(cap[0].length);out+=""+ 26 | this.output(cap[1])+"";continue}if(cap=this.rules.text.exec(src)){src=src.substring(cap[0].length);out+=escape(cap[0]);continue}if(src)throw new Error("Infinite loop on byte: "+src.charCodeAt(0));}return out};InlineLexer.prototype.outputLink=function(cap,link){if(cap[0][0]!=="!")return'"+this.output(cap[1])+"";else return''+escape(cap[1])+'"};InlineLexer.prototype.smartypants=function(text){if(!this.options.smartypants)return text;return text.replace(/--/g,"\u2014").replace(/'([^']*)'/g,"\u2018$1\u2019").replace(/"([^"]*)"/g,"\u201c$1\u201d").replace(/\.{3}/g,"\u2026")};InlineLexer.prototype.mangle=function(text){var out="",l=text.length,i=0,ch;for(;i0.5)ch="x"+ch.toString(16);out+="&#"+ch+";"}return out};function Parser(options){this.tokens=[];this.token=null; 28 | this.options=options||marked.defaults}Parser.parse=function(src,options){var parser=new Parser(options);return parser.parse(src)};Parser.prototype.parse=function(src){this.inline=new InlineLexer(src.links,this.options);this.tokens=src.reverse();var out="";while(this.next())out+=this.tok();return out};Parser.prototype.next=function(){return this.token=this.tokens.pop()};Parser.prototype.peek=function(){return this.tokens[this.tokens.length-1]||0};Parser.prototype.parseText=function(){var body=this.token.text; 29 | while(this.peek().type==="text")body+="\n"+this.next().text;return this.inline.output(body)};Parser.prototype.tok=function(){switch(this.token.type){case "space":return"";case "hr":return"
    \n";case "heading":return""+this.inline.output(this.token.text)+"\n";case "code":if(this.options.highlight){var code=this.options.highlight(this.token.text,this.token.lang);if(code!=null&&code!==this.token.text){this.token.escaped=true;this.token.text=code}}if(!this.token.escaped)this.token.text= 30 | escape(this.token.text,true);return"
    "+this.token.text+"
    \n";case "table":var body="",heading,i,row,cell,j;body+="\n\n";for(i=0;i'+heading+"\n":""+heading+"\n"}body+="\n\n";body+="\n";for(i=0;i'+cell+"\n":""+cell+"\n"}body+="\n"}body+="\n";return"\n"+body+"
    \n";case "blockquote_start":var body="";while(this.next().type!=="blockquote_end")body+=this.tok();return"
    \n"+body+"
    \n";case "list_start":var type=this.token.ordered?"ol":"ul",body="";while(this.next().type!=="list_end")body+= 32 | this.tok();return"<"+type+">\n"+body+"\n";case "list_item_start":var body="";while(this.next().type!=="list_item_end")body+=this.token.type==="text"?this.parseText():this.tok();return"
  • "+body+"
    • \n";case "loose_item_start":var body="";while(this.next().type!=="list_item_end")body+=this.tok();return"
  • "+body+"
    • \n";case "html":return!this.token.pre&&!this.options.pedantic?this.inline.output(this.token.text):this.token.text;case "paragraph":return"

    "+this.inline.output(this.token.text)+ 33 | "

    \n";case "text":return"

    "+this.parseText()+"

    \n"}};function escape(html,encode){return html.replace(!encode?/&(?!#?\w+;)/g:/&/g,"&").replace(//g,">").replace(/"/g,""").replace(/'/g,"'")}function replace(regex,opt){regex=regex.source;opt=opt||"";return function self(name,val){if(!name)return new RegExp(regex,opt);val=val.source||val;val=val.replace(/(^|[^\[])\^/g,"$1");regex=regex.replace(name,val);return self}}function noop(){}noop.exec=noop;function merge(obj){var i= 34 | 1,target,key;for(;iAn error occured:

    "+escape(e.message+"",true)+"
    ";throw e;}}marked.options=marked.setOptions=function(opt){merge(marked.defaults,opt);return marked};marked.defaults={gfm:true,tables:true,breaks:false,pedantic:false,sanitize:false,smartLists:false,silent:false,highlight:null,langPrefix:""};marked.Parser=Parser;marked.parser=Parser.parse;marked.Lexer=Lexer;marked.lexer=Lexer.lex;marked.InlineLexer=InlineLexer;marked.inlineLexer=InlineLexer.output; 37 | marked.parse=marked;if(typeof exports==="object")module.exports=marked;else if(typeof define==="function"&&define.amd)define(function(){return marked});else this.marked=marked}).call(function(){return this||(typeof window!=="undefined"?window:global)}()); 38 | -------------------------------------------------------------------------------- /shared/plugin/multiplex/client.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | var multiplex = Reveal.getConfig().multiplex; 3 | var socketId = multiplex.id; 4 | var socket = io.connect(multiplex.url); 5 | 6 | socket.on(multiplex.id, function(data) { 7 | // ignore data from sockets that aren't ours 8 | if (data.socketId !== socketId) { return; } 9 | if( window.location.host === 'localhost:1947' ) return; 10 | 11 | Reveal.slide(data.indexh, data.indexv, data.indexf, 'remote'); 12 | }); 13 | }()); 14 | -------------------------------------------------------------------------------- /shared/plugin/multiplex/index.js: -------------------------------------------------------------------------------- 1 | var express = require('express'); 2 | var fs = require('fs'); 3 | var io = require('socket.io'); 4 | var crypto = require('crypto'); 5 | 6 | var app = express.createServer(); 7 | var staticDir = express.static; 8 | 9 | io = io.listen(app); 10 | 11 | var opts = { 12 | port: 1948, 13 | baseDir : __dirname + '/../../' 14 | }; 15 | 16 | io.sockets.on('connection', function(socket) { 17 | socket.on('slidechanged', function(slideData) { 18 | if (typeof slideData.secret == 'undefined' || slideData.secret == null || slideData.secret === '') return; 19 | if (createHash(slideData.secret) === slideData.socketId) { 20 | slideData.secret = null; 21 | socket.broadcast.emit(slideData.socketId, slideData); 22 | }; 23 | }); 24 | }); 25 | 26 | app.configure(function() { 27 | [ 'css', 'js', 'plugin', 'lib' ].forEach(function(dir) { 28 | app.use('/' + dir, staticDir(opts.baseDir + dir)); 29 | }); 30 | }); 31 | 32 | app.get("/", function(req, res) { 33 | fs.createReadStream(opts.baseDir + '/index.html').pipe(res); 34 | }); 35 | 36 | app.get("/token", function(req,res) { 37 | var ts = new Date().getTime(); 38 | var rand = Math.floor(Math.random()*9999999); 39 | var secret = ts.toString() + rand.toString(); 40 | res.send({secret: secret, socketId: createHash(secret)}); 41 | }); 42 | 43 | var createHash = function(secret) { 44 | var cipher = crypto.createCipher('blowfish', secret); 45 | return(cipher.final('hex')); 46 | }; 47 | 48 | // Actually listen 49 | app.listen(opts.port || null); 50 | 51 | var brown = '\033[33m', 52 | green = '\033[32m', 53 | reset = '\033[0m'; 54 | 55 | console.log( brown + "reveal.js:" + reset + " Multiplex running on port " + green + opts.port + reset ); -------------------------------------------------------------------------------- /shared/plugin/multiplex/master.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | // don't emit events from inside the previews themselves 3 | if ( window.location.search.match( /receiver/gi ) ) { return; } 4 | var multiplex = Reveal.getConfig().multiplex; 5 | 6 | var socket = io.connect(multiplex.url); 7 | 8 | var notify = function( slideElement, indexh, indexv, origin ) { 9 | if( typeof origin === 'undefined' && origin !== 'remote' ) { 10 | var nextindexh; 11 | var nextindexv; 12 | 13 | var fragmentindex = Reveal.getIndices().f; 14 | if (typeof fragmentindex == 'undefined') { 15 | fragmentindex = 0; 16 | } 17 | 18 | if (slideElement.nextElementSibling && slideElement.parentNode.nodeName == 'SECTION') { 19 | nextindexh = indexh; 20 | nextindexv = indexv + 1; 21 | } else { 22 | nextindexh = indexh + 1; 23 | nextindexv = 0; 24 | } 25 | 26 | var slideData = { 27 | indexh : indexh, 28 | indexv : indexv, 29 | indexf : fragmentindex, 30 | nextindexh : nextindexh, 31 | nextindexv : nextindexv, 32 | secret: multiplex.secret, 33 | socketId : multiplex.id 34 | }; 35 | 36 | socket.emit('slidechanged', slideData); 37 | } 38 | } 39 | 40 | Reveal.addEventListener( 'slidechanged', function( event ) { 41 | notify( event.currentSlide, event.indexh, event.indexv, event.origin ); 42 | } ); 43 | 44 | var fragmentNotify = function( event ) { 45 | notify( Reveal.getCurrentSlide(), Reveal.getIndices().h, Reveal.getIndices().v, event.origin ); 46 | }; 47 | 48 | Reveal.addEventListener( 'fragmentshown', fragmentNotify ); 49 | Reveal.addEventListener( 'fragmenthidden', fragmentNotify ); 50 | }()); -------------------------------------------------------------------------------- /shared/plugin/notes-server/client.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | // don't emit events from inside the previews themselves 3 | if ( window.location.search.match( /receiver/gi ) ) { return; } 4 | 5 | var socket = io.connect(window.location.origin); 6 | var socketId = Math.random().toString().slice(2); 7 | 8 | console.log('View slide notes at ' + window.location.origin + '/notes/' + socketId); 9 | window.open(window.location.origin + '/notes/' + socketId, 'notes-' + socketId); 10 | 11 | // Fires when a fragment is shown 12 | Reveal.addEventListener( 'fragmentshown', function( event ) { 13 | var fragmentData = { 14 | fragment : 'next', 15 | socketId : socketId 16 | }; 17 | socket.emit('fragmentchanged', fragmentData); 18 | } ); 19 | 20 | // Fires when a fragment is hidden 21 | Reveal.addEventListener( 'fragmenthidden', function( event ) { 22 | var fragmentData = { 23 | fragment : 'previous', 24 | socketId : socketId 25 | }; 26 | socket.emit('fragmentchanged', fragmentData); 27 | } ); 28 | 29 | // Fires when slide is changed 30 | Reveal.addEventListener( 'slidechanged', function( event ) { 31 | var nextindexh; 32 | var nextindexv; 33 | var slideElement = event.currentSlide; 34 | 35 | if (slideElement.nextElementSibling && slideElement.parentNode.nodeName == 'SECTION') { 36 | nextindexh = event.indexh; 37 | nextindexv = event.indexv + 1; 38 | } else { 39 | nextindexh = event.indexh + 1; 40 | nextindexv = 0; 41 | } 42 | 43 | var notes = slideElement.querySelector('aside.notes'); 44 | var slideData = { 45 | notes : notes ? notes.innerHTML : '', 46 | indexh : event.indexh, 47 | indexv : event.indexv, 48 | nextindexh : nextindexh, 49 | nextindexv : nextindexv, 50 | socketId : socketId, 51 | markdown : notes ? typeof notes.getAttribute('data-markdown') === 'string' : false 52 | 53 | }; 54 | 55 | socket.emit('slidechanged', slideData); 56 | } ); 57 | }()); 58 | -------------------------------------------------------------------------------- /shared/plugin/notes-server/index.js: -------------------------------------------------------------------------------- 1 | var express = require('express'); 2 | var fs = require('fs'); 3 | var io = require('socket.io'); 4 | var _ = require('underscore'); 5 | var Mustache = require('mustache'); 6 | 7 | var app = express.createServer(); 8 | var staticDir = express.static; 9 | 10 | io = io.listen(app); 11 | 12 | var opts = { 13 | port : 1947, 14 | baseDir : __dirname + '/../../' 15 | }; 16 | 17 | io.sockets.on('connection', function(socket) { 18 | socket.on('slidechanged', function(slideData) { 19 | socket.broadcast.emit('slidedata', slideData); 20 | }); 21 | socket.on('fragmentchanged', function(fragmentData) { 22 | socket.broadcast.emit('fragmentdata', fragmentData); 23 | }); 24 | }); 25 | 26 | app.configure(function() { 27 | [ 'css', 'js', 'images', 'plugin', 'lib' ].forEach(function(dir) { 28 | app.use('/' + dir, staticDir(opts.baseDir + dir)); 29 | }); 30 | }); 31 | 32 | app.get("/", function(req, res) { 33 | fs.createReadStream(opts.baseDir + '/index.html').pipe(res); 34 | }); 35 | 36 | app.get("/notes/:socketId", function(req, res) { 37 | 38 | fs.readFile(opts.baseDir + 'plugin/notes-server/notes.html', function(err, data) { 39 | res.send(Mustache.to_html(data.toString(), { 40 | socketId : req.params.socketId 41 | })); 42 | }); 43 | // fs.createReadStream(opts.baseDir + 'notes-server/notes.html').pipe(res); 44 | }); 45 | 46 | // Actually listen 47 | app.listen(opts.port || null); 48 | 49 | var brown = '\033[33m', 50 | green = '\033[32m', 51 | reset = '\033[0m'; 52 | 53 | var slidesLocation = "http://localhost" + ( opts.port ? ( ':' + opts.port ) : '' ); 54 | 55 | console.log( brown + "reveal.js - Speaker Notes" + reset ); 56 | console.log( "1. Open the slides at " + green + slidesLocation + reset ); 57 | console.log( "2. Click on the link your JS console to go to the notes page" ); 58 | console.log( "3. Advance through your slides and your notes will advance automatically" ); 59 | -------------------------------------------------------------------------------- /shared/plugin/notes-server/notes.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | reveal.js - Slide Notes 7 | 8 | 87 | 88 | 89 | 90 | 91 |
    92 | 93 |
    94 | 95 |
    96 | 97 | UPCOMING: 98 |
    99 |
    100 | 101 | 102 | 103 | 104 | 137 | 138 | 139 | 140 | -------------------------------------------------------------------------------- /shared/plugin/notes/notes.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | reveal.js - Slide Notes 7 | 8 | 136 | 137 | 138 | 139 | 140 |
    141 | 142 |
    143 | 144 |
    145 | 146 | UPCOMING: 147 |
    148 | 149 |
    150 |
    151 |

    Time

    152 | 0:00:00 AM 153 |
    154 |
    155 |

    Elapsed

    156 | 00:00:00 157 |
    158 |
    159 | 160 |
    161 | 162 | 163 | 251 | 252 | 253 | -------------------------------------------------------------------------------- /shared/plugin/notes/notes.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Handles opening of and synchronization with the reveal.js 3 | * notes window. 4 | */ 5 | var RevealNotes = (function() { 6 | 7 | function openNotes() { 8 | var jsFileLocation = document.querySelector('script[src$="notes.js"]').src; // this js file path 9 | jsFileLocation = jsFileLocation.replace(/notes\.js(\?.*)?$/, ''); // the js folder path 10 | var notesPopup = window.open( jsFileLocation + 'notes.html', 'reveal.js - Notes', 'width=1120,height=850' ); 11 | 12 | // Fires when slide is changed 13 | Reveal.addEventListener( 'slidechanged', function( event ) { 14 | post('slidechanged'); 15 | } ); 16 | 17 | // Fires when a fragment is shown 18 | Reveal.addEventListener( 'fragmentshown', function( event ) { 19 | post('fragmentshown'); 20 | } ); 21 | 22 | // Fires when a fragment is hidden 23 | Reveal.addEventListener( 'fragmenthidden', function( event ) { 24 | post('fragmenthidden'); 25 | } ); 26 | 27 | /** 28 | * Posts the current slide data to the notes window 29 | * 30 | * @param {String} eventType Expecting 'slidechanged', 'fragmentshown' 31 | * or 'fragmenthidden' set in the events above to define the needed 32 | * slideDate. 33 | */ 34 | function post( eventType ) { 35 | var slideElement = Reveal.getCurrentSlide(), 36 | messageData; 37 | 38 | if( eventType === 'slidechanged' ) { 39 | var notes = slideElement.querySelector( 'aside.notes' ), 40 | indexh = Reveal.getIndices().h, 41 | indexv = Reveal.getIndices().v, 42 | nextindexh, 43 | nextindexv; 44 | 45 | if( slideElement.nextElementSibling && slideElement.parentNode.nodeName == 'SECTION' ) { 46 | nextindexh = indexh; 47 | nextindexv = indexv + 1; 48 | } else { 49 | nextindexh = indexh + 1; 50 | nextindexv = 0; 51 | } 52 | 53 | messageData = { 54 | notes : notes ? notes.innerHTML : '', 55 | indexh : indexh, 56 | indexv : indexv, 57 | nextindexh : nextindexh, 58 | nextindexv : nextindexv, 59 | markdown : notes ? typeof notes.getAttribute( 'data-markdown' ) === 'string' : false 60 | }; 61 | } 62 | else if( eventType === 'fragmentshown' ) { 63 | messageData = { 64 | fragment : 'next' 65 | }; 66 | } 67 | else if( eventType === 'fragmenthidden' ) { 68 | messageData = { 69 | fragment : 'prev' 70 | }; 71 | } 72 | 73 | notesPopup.postMessage( JSON.stringify( messageData ), '*' ); 74 | } 75 | 76 | // Navigate to the current slide when the notes are loaded 77 | notesPopup.addEventListener( 'load', function( event ) { 78 | post('slidechanged'); 79 | }, false ); 80 | } 81 | 82 | // If the there's a 'notes' query set, open directly 83 | if( window.location.search.match( /(\?|\&)notes/gi ) !== null ) { 84 | openNotes(); 85 | } 86 | 87 | // Open the notes when the 's' key is hit 88 | document.addEventListener( 'keydown', function( event ) { 89 | // Disregard the event if the target is editable or a 90 | // modifier is present 91 | if ( document.querySelector( ':focus' ) !== null || event.shiftKey || event.altKey || event.ctrlKey || event.metaKey ) return; 92 | 93 | if( event.keyCode === 83 ) { 94 | event.preventDefault(); 95 | openNotes(); 96 | } 97 | }, false ); 98 | 99 | return { open: openNotes }; 100 | })(); 101 | -------------------------------------------------------------------------------- /shared/plugin/postmessage/example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
    7 | 8 | 9 | 10 |
    11 | 12 | 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /shared/plugin/postmessage/postmessage.js: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | simple postmessage plugin 4 | 5 | Useful when a reveal slideshow is inside an iframe. 6 | It allows to call reveal methods from outside. 7 | 8 | Example: 9 | var reveal = window.frames[0]; 10 | 11 | // Reveal.prev(); 12 | reveal.postMessage(JSON.stringify({method: 'prev', args: []}), '*'); 13 | // Reveal.next(); 14 | reveal.postMessage(JSON.stringify({method: 'next', args: []}), '*'); 15 | // Reveal.slide(2, 2); 16 | reveal.postMessage(JSON.stringify({method: 'slide', args: [2,2]}), '*'); 17 | 18 | Add to the slideshow: 19 | 20 | dependencies: [ 21 | ... 22 | { src: 'plugin/postmessage/postmessage.js', async: true, condition: function() { return !!document.body.classList; } } 23 | ] 24 | 25 | */ 26 | 27 | (function (){ 28 | 29 | window.addEventListener( "message", function ( event ) { 30 | var data = JSON.parse( event.data ), 31 | method = data.method, 32 | args = data.args; 33 | 34 | if( typeof Reveal[method] === 'function' ) { 35 | Reveal[method].apply( Reveal, data.args ); 36 | } 37 | }, false); 38 | 39 | }()); 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /shared/plugin/print-pdf/print-pdf.js: -------------------------------------------------------------------------------- 1 | /** 2 | * phantomjs script for printing presentations to PDF. 3 | * 4 | * Example: 5 | * phantomjs print-pdf.js "http://lab.hakim.se/reveal-js?print-pdf" reveal-demo.pdf 6 | * 7 | * By Manuel Bieh (https://github.com/manuelbieh) 8 | */ 9 | 10 | // html2pdf.js 11 | var page = new WebPage(); 12 | var system = require( 'system' ); 13 | 14 | page.paperSize = { 15 | format: 'A4', 16 | orientation: 'landscape', 17 | margin: { 18 | left: '0', 19 | right: '0', 20 | top: '0', 21 | bottom: '0' 22 | } 23 | }; 24 | page.zoomFactor = 1.5; 25 | 26 | var revealFile = system.args[1] || 'index.html?print-pdf'; 27 | var slideFile = system.args[2] || 'slides.pdf'; 28 | 29 | if( slideFile.match( /\.pdf$/gi ) === null ) { 30 | slideFile += '.pdf'; 31 | } 32 | 33 | console.log( 'Printing PDF...' ); 34 | 35 | page.open( revealFile, function( status ) { 36 | console.log( 'Printed succesfully' ); 37 | page.render( slideFile ); 38 | phantom.exit(); 39 | } ); -------------------------------------------------------------------------------- /shared/plugin/remotes/remotes.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Touch-based remote controller for your presentation courtesy 3 | * of the folks at http://remotes.io 4 | */ 5 | 6 | (function(window){ 7 | 8 | /** 9 | * Detects if we are dealing with a touch enabled device (with some false positives) 10 | * Borrowed from modernizr: https://github.com/Modernizr/Modernizr/blob/master/feature-detects/touch.js 11 | */ 12 | var hasTouch = (function(){ 13 | return ('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch; 14 | })(); 15 | 16 | /** 17 | * Detects if notes are enable and the current page is opened inside an /iframe 18 | * this prevents loading Remotes.io several times 19 | */ 20 | var remotesAndIsNotes = (function(){ 21 | return !(window.RevealNotes && self == top); 22 | })(); 23 | 24 | if(!hasTouch && !remotesAndIsNotes){ 25 | head.ready( 'remotes.ne.min.js', function() { 26 | new Remotes("preview") 27 | .on("swipe-left", function(e){ Reveal.right(); }) 28 | .on("swipe-right", function(e){ Reveal.left(); }) 29 | .on("swipe-up", function(e){ Reveal.down(); }) 30 | .on("swipe-down", function(e){ Reveal.up(); }) 31 | .on("tap", function(e){ Reveal.next(); }) 32 | .on("zoom-out", function(e){ Reveal.toggleOverview(true); }) 33 | .on("zoom-in", function(e){ Reveal.toggleOverview(false); }) 34 | ; 35 | } ); 36 | 37 | head.js('https://raw.github.com/Remotes/Remotes/master/dist/remotes.ne.min.js'); 38 | } 39 | })(window); -------------------------------------------------------------------------------- /shared/plugin/search/search.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Handles finding a text string anywhere in the slides and showing the next occurrence to the user 3 | * by navigatating to that slide and highlighting it. 4 | * 5 | * By Jon Snyder , February 2013 6 | */ 7 | 8 | var RevealSearch = (function() { 9 | 10 | var matchedSlides; 11 | var currentMatchedIndex; 12 | var searchboxDirty; 13 | var myHilitor; 14 | 15 | // Original JavaScript code by Chirp Internet: www.chirp.com.au 16 | // Please acknowledge use of this code by including this header. 17 | // 2/2013 jon: modified regex to display any match, not restricted to word boundaries. 18 | 19 | function Hilitor(id, tag) 20 | { 21 | 22 | var targetNode = document.getElementById(id) || document.body; 23 | var hiliteTag = tag || "EM"; 24 | var skipTags = new RegExp("^(?:" + hiliteTag + "|SCRIPT|FORM|SPAN)$"); 25 | var colors = ["#ff6", "#a0ffff", "#9f9", "#f99", "#f6f"]; 26 | var wordColor = []; 27 | var colorIdx = 0; 28 | var matchRegex = ""; 29 | var matchingSlides = []; 30 | 31 | this.setRegex = function(input) 32 | { 33 | input = input.replace(/^[^\w]+|[^\w]+$/g, "").replace(/[^\w'-]+/g, "|"); 34 | matchRegex = new RegExp("(" + input + ")","i"); 35 | } 36 | 37 | this.getRegex = function() 38 | { 39 | return matchRegex.toString().replace(/^\/\\b\(|\)\\b\/i$/g, "").replace(/\|/g, " "); 40 | } 41 | 42 | // recursively apply word highlighting 43 | this.hiliteWords = function(node) 44 | { 45 | if(node == undefined || !node) return; 46 | if(!matchRegex) return; 47 | if(skipTags.test(node.nodeName)) return; 48 | 49 | if(node.hasChildNodes()) { 50 | for(var i=0; i < node.childNodes.length; i++) 51 | this.hiliteWords(node.childNodes[i]); 52 | } 53 | if(node.nodeType == 3) { // NODE_TEXT 54 | if((nv = node.nodeValue) && (regs = matchRegex.exec(nv))) { 55 | //find the slide's section element and save it in our list of matching slides 56 | var secnode = node.parentNode; 57 | while (secnode.nodeName != 'SECTION') { 58 | secnode = secnode.parentNode; 59 | } 60 | 61 | var slideIndex = Reveal.getIndices(secnode); 62 | var slidelen = matchingSlides.length; 63 | var alreadyAdded = false; 64 | for (var i=0; i < slidelen; i++) { 65 | if ( (matchingSlides[i].h === slideIndex.h) && (matchingSlides[i].v === slideIndex.v) ) { 66 | alreadyAdded = true; 67 | } 68 | } 69 | if (! alreadyAdded) { 70 | matchingSlides.push(slideIndex); 71 | } 72 | 73 | if(!wordColor[regs[0].toLowerCase()]) { 74 | wordColor[regs[0].toLowerCase()] = colors[colorIdx++ % colors.length]; 75 | } 76 | 77 | var match = document.createElement(hiliteTag); 78 | match.appendChild(document.createTextNode(regs[0])); 79 | match.style.backgroundColor = wordColor[regs[0].toLowerCase()]; 80 | match.style.fontStyle = "inherit"; 81 | match.style.color = "#000"; 82 | 83 | var after = node.splitText(regs.index); 84 | after.nodeValue = after.nodeValue.substring(regs[0].length); 85 | node.parentNode.insertBefore(match, after); 86 | } 87 | } 88 | }; 89 | 90 | // remove highlighting 91 | this.remove = function() 92 | { 93 | var arr = document.getElementsByTagName(hiliteTag); 94 | while(arr.length && (el = arr[0])) { 95 | el.parentNode.replaceChild(el.firstChild, el); 96 | } 97 | }; 98 | 99 | // start highlighting at target node 100 | this.apply = function(input) 101 | { 102 | if(input == undefined || !input) return; 103 | this.remove(); 104 | this.setRegex(input); 105 | this.hiliteWords(targetNode); 106 | return matchingSlides; 107 | }; 108 | 109 | } 110 | 111 | function openSearch() { 112 | //ensure the search term input dialog is visible and has focus: 113 | var inputbox = document.getElementById("searchinput"); 114 | inputbox.style.display = "inline"; 115 | inputbox.focus(); 116 | inputbox.select(); 117 | } 118 | 119 | function toggleSearch() { 120 | var inputbox = document.getElementById("searchinput"); 121 | if (inputbox.style.display !== "inline") { 122 | openSearch(); 123 | } 124 | else { 125 | inputbox.style.display = "none"; 126 | myHilitor.remove(); 127 | } 128 | } 129 | 130 | function doSearch() { 131 | //if there's been a change in the search term, perform a new search: 132 | if (searchboxDirty) { 133 | var searchstring = document.getElementById("searchinput").value; 134 | 135 | //find the keyword amongst the slides 136 | myHilitor = new Hilitor("slidecontent"); 137 | matchedSlides = myHilitor.apply(searchstring); 138 | currentMatchedIndex = 0; 139 | } 140 | 141 | //navigate to the next slide that has the keyword, wrapping to the first if necessary 142 | if (matchedSlides.length && (matchedSlides.length <= currentMatchedIndex)) { 143 | currentMatchedIndex = 0; 144 | } 145 | if (matchedSlides.length > currentMatchedIndex) { 146 | Reveal.slide(matchedSlides[currentMatchedIndex].h, matchedSlides[currentMatchedIndex].v); 147 | currentMatchedIndex++; 148 | } 149 | } 150 | 151 | var dom = {}; 152 | dom.wrapper = document.querySelector( '.reveal' ); 153 | 154 | if( !dom.wrapper.querySelector( '.searchbox' ) ) { 155 | var searchElement = document.createElement( 'div' ); 156 | searchElement.id = "searchinputdiv"; 157 | searchElement.classList.add( 'searchdiv' ); 158 | searchElement.style.position = 'absolute'; 159 | searchElement.style.top = '10px'; 160 | searchElement.style.left = '10px'; 161 | //embedded base64 search icon Designed by Sketchdock - http://www.sketchdock.com/: 162 | searchElement.innerHTML = ''; 163 | dom.wrapper.appendChild( searchElement ); 164 | } 165 | 166 | document.getElementById("searchbutton").addEventListener( 'click', function(event) { 167 | doSearch(); 168 | }, false ); 169 | 170 | document.getElementById("searchinput").addEventListener( 'keyup', function( event ) { 171 | switch (event.keyCode) { 172 | case 13: 173 | event.preventDefault(); 174 | doSearch(); 175 | searchboxDirty = false; 176 | break; 177 | default: 178 | searchboxDirty = true; 179 | } 180 | }, false ); 181 | 182 | // Open the search when the 's' key is hit (yes, this conflicts with the notes plugin, disabling for now) 183 | /* 184 | document.addEventListener( 'keydown', function( event ) { 185 | // Disregard the event if the target is editable or a 186 | // modifier is present 187 | if ( document.querySelector( ':focus' ) !== null || event.shiftKey || event.altKey || event.ctrlKey || event.metaKey ) return; 188 | 189 | if( event.keyCode === 83 ) { 190 | event.preventDefault(); 191 | openSearch(); 192 | } 193 | }, false ); 194 | */ 195 | return { open: openSearch }; 196 | })(); 197 | -------------------------------------------------------------------------------- /shared/plugin/zoom-js/zoom.js: -------------------------------------------------------------------------------- 1 | // Custom reveal.js integration 2 | (function(){ 3 | var isEnabled = true; 4 | 5 | document.querySelector( '.reveal' ).addEventListener( 'mousedown', function( event ) { 6 | if( event.altKey && isEnabled ) { 7 | event.preventDefault(); 8 | zoom.to({ element: event.target, pan: false }); 9 | } 10 | } ); 11 | 12 | Reveal.addEventListener( 'overviewshown', function() { isEnabled = false; } ); 13 | Reveal.addEventListener( 'overviewhidden', function() { isEnabled = true; } ); 14 | })(); 15 | 16 | /*! 17 | * zoom.js 0.2 (modified version for use with reveal.js) 18 | * http://lab.hakim.se/zoom-js 19 | * MIT licensed 20 | * 21 | * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se 22 | */ 23 | var zoom = (function(){ 24 | 25 | // The current zoom level (scale) 26 | var level = 1; 27 | 28 | // The current mouse position, used for panning 29 | var mouseX = 0, 30 | mouseY = 0; 31 | 32 | // Timeout before pan is activated 33 | var panEngageTimeout = -1, 34 | panUpdateInterval = -1; 35 | 36 | var currentOptions = null; 37 | 38 | // Check for transform support so that we can fallback otherwise 39 | var supportsTransforms = 'WebkitTransform' in document.body.style || 40 | 'MozTransform' in document.body.style || 41 | 'msTransform' in document.body.style || 42 | 'OTransform' in document.body.style || 43 | 'transform' in document.body.style; 44 | 45 | if( supportsTransforms ) { 46 | // The easing that will be applied when we zoom in/out 47 | document.body.style.transition = 'transform 0.8s ease'; 48 | document.body.style.OTransition = '-o-transform 0.8s ease'; 49 | document.body.style.msTransition = '-ms-transform 0.8s ease'; 50 | document.body.style.MozTransition = '-moz-transform 0.8s ease'; 51 | document.body.style.WebkitTransition = '-webkit-transform 0.8s ease'; 52 | } 53 | 54 | // Zoom out if the user hits escape 55 | document.addEventListener( 'keyup', function( event ) { 56 | if( level !== 1 && event.keyCode === 27 ) { 57 | zoom.out(); 58 | } 59 | }, false ); 60 | 61 | // Monitor mouse movement for panning 62 | document.addEventListener( 'mousemove', function( event ) { 63 | if( level !== 1 ) { 64 | mouseX = event.clientX; 65 | mouseY = event.clientY; 66 | } 67 | }, false ); 68 | 69 | /** 70 | * Applies the CSS required to zoom in, prioritizes use of CSS3 71 | * transforms but falls back on zoom for IE. 72 | * 73 | * @param {Number} pageOffsetX 74 | * @param {Number} pageOffsetY 75 | * @param {Number} elementOffsetX 76 | * @param {Number} elementOffsetY 77 | * @param {Number} scale 78 | */ 79 | function magnify( pageOffsetX, pageOffsetY, elementOffsetX, elementOffsetY, scale ) { 80 | 81 | if( supportsTransforms ) { 82 | var origin = pageOffsetX +'px '+ pageOffsetY +'px', 83 | transform = 'translate('+ -elementOffsetX +'px,'+ -elementOffsetY +'px) scale('+ scale +')'; 84 | 85 | document.body.style.transformOrigin = origin; 86 | document.body.style.OTransformOrigin = origin; 87 | document.body.style.msTransformOrigin = origin; 88 | document.body.style.MozTransformOrigin = origin; 89 | document.body.style.WebkitTransformOrigin = origin; 90 | 91 | document.body.style.transform = transform; 92 | document.body.style.OTransform = transform; 93 | document.body.style.msTransform = transform; 94 | document.body.style.MozTransform = transform; 95 | document.body.style.WebkitTransform = transform; 96 | } 97 | else { 98 | // Reset all values 99 | if( scale === 1 ) { 100 | document.body.style.position = ''; 101 | document.body.style.left = ''; 102 | document.body.style.top = ''; 103 | document.body.style.width = ''; 104 | document.body.style.height = ''; 105 | document.body.style.zoom = ''; 106 | } 107 | // Apply scale 108 | else { 109 | document.body.style.position = 'relative'; 110 | document.body.style.left = ( - ( pageOffsetX + elementOffsetX ) / scale ) + 'px'; 111 | document.body.style.top = ( - ( pageOffsetY + elementOffsetY ) / scale ) + 'px'; 112 | document.body.style.width = ( scale * 100 ) + '%'; 113 | document.body.style.height = ( scale * 100 ) + '%'; 114 | document.body.style.zoom = scale; 115 | } 116 | } 117 | 118 | level = scale; 119 | 120 | if( level !== 1 && document.documentElement.classList ) { 121 | document.documentElement.classList.add( 'zoomed' ); 122 | } 123 | else { 124 | document.documentElement.classList.remove( 'zoomed' ); 125 | } 126 | } 127 | 128 | /** 129 | * Pan the document when the mosue cursor approaches the edges 130 | * of the window. 131 | */ 132 | function pan() { 133 | var range = 0.12, 134 | rangeX = window.innerWidth * range, 135 | rangeY = window.innerHeight * range, 136 | scrollOffset = getScrollOffset(); 137 | 138 | // Up 139 | if( mouseY < rangeY ) { 140 | window.scroll( scrollOffset.x, scrollOffset.y - ( 1 - ( mouseY / rangeY ) ) * ( 14 / level ) ); 141 | } 142 | // Down 143 | else if( mouseY > window.innerHeight - rangeY ) { 144 | window.scroll( scrollOffset.x, scrollOffset.y + ( 1 - ( window.innerHeight - mouseY ) / rangeY ) * ( 14 / level ) ); 145 | } 146 | 147 | // Left 148 | if( mouseX < rangeX ) { 149 | window.scroll( scrollOffset.x - ( 1 - ( mouseX / rangeX ) ) * ( 14 / level ), scrollOffset.y ); 150 | } 151 | // Right 152 | else if( mouseX > window.innerWidth - rangeX ) { 153 | window.scroll( scrollOffset.x + ( 1 - ( window.innerWidth - mouseX ) / rangeX ) * ( 14 / level ), scrollOffset.y ); 154 | } 155 | } 156 | 157 | function getScrollOffset() { 158 | return { 159 | x: window.scrollX !== undefined ? window.scrollX : window.pageXOffset, 160 | y: window.scrollY !== undefined ? window.scrollY : window.pageXYffset 161 | } 162 | } 163 | 164 | return { 165 | /** 166 | * Zooms in on either a rectangle or HTML element. 167 | * 168 | * @param {Object} options 169 | * - element: HTML element to zoom in on 170 | * OR 171 | * - x/y: coordinates in non-transformed space to zoom in on 172 | * - width/height: the portion of the screen to zoom in on 173 | * - scale: can be used instead of width/height to explicitly set scale 174 | */ 175 | to: function( options ) { 176 | // Due to an implementation limitation we can't zoom in 177 | // to another element without zooming out first 178 | if( level !== 1 ) { 179 | zoom.out(); 180 | } 181 | else { 182 | options.x = options.x || 0; 183 | options.y = options.y || 0; 184 | 185 | // If an element is set, that takes precedence 186 | if( !!options.element ) { 187 | // Space around the zoomed in element to leave on screen 188 | var padding = 20; 189 | 190 | options.width = options.element.getBoundingClientRect().width + ( padding * 2 ); 191 | options.height = options.element.getBoundingClientRect().height + ( padding * 2 ); 192 | options.x = options.element.getBoundingClientRect().left - padding; 193 | options.y = options.element.getBoundingClientRect().top - padding; 194 | } 195 | 196 | // If width/height values are set, calculate scale from those values 197 | if( options.width !== undefined && options.height !== undefined ) { 198 | options.scale = Math.max( Math.min( window.innerWidth / options.width, window.innerHeight / options.height ), 1 ); 199 | } 200 | 201 | if( options.scale > 1 ) { 202 | options.x *= options.scale; 203 | options.y *= options.scale; 204 | 205 | var scrollOffset = getScrollOffset(); 206 | 207 | if( options.element ) { 208 | scrollOffset.x -= ( window.innerWidth - ( options.width * options.scale ) ) / 2; 209 | } 210 | 211 | magnify( scrollOffset.x, scrollOffset.y, options.x, options.y, options.scale ); 212 | 213 | if( options.pan !== false ) { 214 | 215 | // Wait with engaging panning as it may conflict with the 216 | // zoom transition 217 | panEngageTimeout = setTimeout( function() { 218 | panUpdateInterval = setInterval( pan, 1000 / 60 ); 219 | }, 800 ); 220 | 221 | } 222 | } 223 | 224 | currentOptions = options; 225 | } 226 | }, 227 | 228 | /** 229 | * Resets the document zoom state to its default. 230 | */ 231 | out: function() { 232 | clearTimeout( panEngageTimeout ); 233 | clearInterval( panUpdateInterval ); 234 | 235 | var scrollOffset = getScrollOffset(); 236 | 237 | if( currentOptions && currentOptions.element ) { 238 | scrollOffset.x -= ( window.innerWidth - ( currentOptions.width * currentOptions.scale ) ) / 2; 239 | } 240 | 241 | magnify( scrollOffset.x, scrollOffset.y, 0, 0, 1 ); 242 | 243 | level = 1; 244 | }, 245 | 246 | // Alias 247 | magnify: function( options ) { this.to( options ) }, 248 | reset: function() { this.out() }, 249 | 250 | zoomLevel: function() { 251 | return level; 252 | } 253 | } 254 | 255 | })(); 256 | 257 | --------------------------------------------------------------------------------