15 |
16 |
29 |
30 |
31 |
32 |
33 |
34 |
39 |
40 |
41 |
42 |
--------------------------------------------------------------------------------
/example/plugin/multiplex/master.js:
--------------------------------------------------------------------------------
1 | (function() {
2 |
3 | // Don't emit events from inside of notes windows
4 | if ( window.location.search.match( /receiver/gi ) ) { return; }
5 |
6 | var multiplex = Reveal.getConfig().multiplex;
7 |
8 | var socket = io.connect( multiplex.url );
9 |
10 | function post() {
11 |
12 | var messageData = {
13 | state: Reveal.getState(),
14 | secret: multiplex.secret,
15 | socketId: multiplex.id
16 | };
17 |
18 | socket.emit( 'multiplex-statechanged', messageData );
19 |
20 | };
21 |
22 | // Monitor events that trigger a change in state
23 | Reveal.addEventListener( 'slidechanged', post );
24 | Reveal.addEventListener( 'fragmentshown', post );
25 | Reveal.addEventListener( 'fragmenthidden', post );
26 | Reveal.addEventListener( 'overviewhidden', post );
27 | Reveal.addEventListener( 'overviewshown', post );
28 | Reveal.addEventListener( 'paused', post );
29 | Reveal.addEventListener( 'resumed', post );
30 |
31 | }());
--------------------------------------------------------------------------------
/example/test/test-markdown-options.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
18 |
19 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
47 |
48 |
49 |
50 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2017 Jan Schoepke
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/example/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | ## Contributing
2 |
3 | Please keep the [issue tracker](http://github.com/hakimel/reveal.js/issues) limited to **bug reports**, **feature requests** and **pull requests**.
4 |
5 |
6 | ### Personal Support
7 | If you have personal support or setup questions the best place to ask those are [StackOverflow](http://stackoverflow.com/questions/tagged/reveal.js).
8 |
9 |
10 | ### Bug Reports
11 | When reporting a bug make sure to include information about which browser and operating system you are on as well as the necessary steps to reproduce the issue. If possible please include a link to a sample presentation where the bug can be tested.
12 |
13 |
14 | ### Pull Requests
15 | - Should follow the coding style of the file you work in, most importantly:
16 | - Tabs to indent
17 | - Single-quoted strings
18 | - Should be made towards the **dev branch**
19 | - Should be submitted from a feature/topic branch (not your master)
20 |
21 |
22 | ### Plugins
23 | Please do not submit plugins as pull requests. They should be maintained in their own separate repository. More information here: https://github.com/hakimel/reveal.js/wiki/Plugin-Guidelines
24 |
--------------------------------------------------------------------------------
/example/css/theme/source/serif.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * A simple theme for reveal.js presentations, similar
3 | * to the default theme. The accent color is brown.
4 | *
5 | * This theme is Copyright (C) 2012-2013 Owen Versteeg, http://owenversteeg.com - it is MIT licensed.
6 | */
7 |
8 |
9 | // Default mixins and settings -----------------
10 | @import "../template/mixins";
11 | @import "../template/settings";
12 | // ---------------------------------------------
13 |
14 |
15 |
16 | // Override theme settings (see ../template/settings.scss)
17 | $mainFont: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif;
18 | $mainColor: #000;
19 | $headingFont: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif;
20 | $headingColor: #383D3D;
21 | $headingTextShadow: none;
22 | $headingTextTransform: none;
23 | $backgroundColor: #F0F1EB;
24 | $linkColor: #51483D;
25 | $linkColorHover: lighten( $linkColor, 20% );
26 | $selectionBackgroundColor: #26351C;
27 |
28 | .reveal a {
29 | line-height: 1.3em;
30 | }
31 |
32 |
33 | // Theme template ------------------------------
34 | @import "../template/theme";
35 | // ---------------------------------------------
36 |
--------------------------------------------------------------------------------
/example/LICENSE:
--------------------------------------------------------------------------------
1 | Copyright (C) 2016 Hakim El Hattab, http://hakim.se, and reveal.js contributors
2 |
3 | Permission is hereby granted, free of charge, to any person obtaining a copy
4 | of this software and associated documentation files (the "Software"), to deal
5 | in the Software without restriction, including without limitation the rights
6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
7 | copies of the Software, and to permit persons to whom the Software is
8 | furnished to do so, subject to the following conditions:
9 |
10 | The above copyright notice and this permission notice shall be included in
11 | all copies or substantial portions of the Software.
12 |
13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
19 | THE SOFTWARE.
--------------------------------------------------------------------------------
/example/css/theme/template/settings.scss:
--------------------------------------------------------------------------------
1 | // Base settings for all themes that can optionally be
2 | // overridden by the super-theme
3 |
4 | // Background of the presentation
5 | $backgroundColor: #2b2b2b;
6 |
7 | // Primary/body text
8 | $mainFont: 'Lato', sans-serif;
9 | $mainFontSize: 40px;
10 | $mainColor: #eee;
11 |
12 | // Vertical spacing between blocks of text
13 | $blockMargin: 20px;
14 |
15 | // Headings
16 | $headingMargin: 0 0 $blockMargin 0;
17 | $headingFont: 'League Gothic', Impact, sans-serif;
18 | $headingColor: #eee;
19 | $headingLineHeight: 1.2;
20 | $headingLetterSpacing: normal;
21 | $headingTextTransform: uppercase;
22 | $headingTextShadow: none;
23 | $headingFontWeight: normal;
24 | $heading1TextShadow: $headingTextShadow;
25 |
26 | $heading1Size: 3.77em;
27 | $heading2Size: 2.11em;
28 | $heading3Size: 1.55em;
29 | $heading4Size: 1.00em;
30 |
31 | // Links and actions
32 | $linkColor: #13DAEC;
33 | $linkColorHover: lighten( $linkColor, 20% );
34 |
35 | // Text selection
36 | $selectionBackgroundColor: #FF5E99;
37 | $selectionColor: #fff;
38 |
39 | // Generates the presentation background, can be overridden
40 | // to return a background image or gradient
41 | @mixin bodyBackground() {
42 | background: $backgroundColor;
43 | }
--------------------------------------------------------------------------------
/example/css/theme/source/league.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * League theme for reveal.js.
3 | *
4 | * This was the default theme pre-3.0.0.
5 | *
6 | * 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(../../lib/font/league-gothic/league-gothic.css);
19 | @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
20 |
21 | // Override theme settings (see ../template/settings.scss)
22 | $headingTextShadow: 0px 0px 6px rgba(0,0,0,0.2);
23 | $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);
24 |
25 | // Background generator
26 | @mixin bodyBackground() {
27 | @include radial-gradient( rgba(28,30,32,1), rgba(85,90,95,1) );
28 | }
29 |
30 |
31 |
32 | // Theme template ------------------------------
33 | @import "../template/theme";
34 | // ---------------------------------------------
--------------------------------------------------------------------------------
/example/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "reveal.js",
3 | "version": "3.4.1",
4 | "description": "The HTML Presentation Framework",
5 | "homepage": "http://lab.hakim.se/reveal-js",
6 | "subdomain": "revealjs",
7 | "main": "js/reveal.js",
8 | "scripts": {
9 | "test": "grunt test",
10 | "start": "grunt serve"
11 | },
12 | "author": {
13 | "name": "Hakim El Hattab",
14 | "email": "hakim.elhattab@gmail.com",
15 | "web": "http://hakim.se"
16 | },
17 | "repository": {
18 | "type": "git",
19 | "url": "git://github.com/hakimel/reveal.js.git"
20 | },
21 | "engines": {
22 | "node": ">=4.0.0"
23 | },
24 | "dependencies": {
25 | "express": "~4.14.0",
26 | "grunt-cli": "~1.2.0",
27 | "mustache": "~2.2.1",
28 | "socket.io": "^1.4.8"
29 | },
30 | "devDependencies": {
31 | "grunt": "~1.0.1",
32 | "grunt-autoprefixer": "~3.0.3",
33 | "grunt-contrib-connect": "~0.11.2",
34 | "grunt-contrib-cssmin": "~0.14.0",
35 | "grunt-contrib-jshint": "~0.11.3",
36 | "grunt-contrib-qunit": "~1.2.0",
37 | "grunt-contrib-uglify": "~0.9.2",
38 | "grunt-contrib-watch": "~1.0.0",
39 | "grunt-sass": "~1.2.0",
40 | "grunt-retire": "~0.3.10",
41 | "grunt-zip": "~0.17.1",
42 | "node-sass": "~3.13.0"
43 | },
44 | "license": "MIT"
45 | }
46 |
--------------------------------------------------------------------------------
/example/lib/css/zenburn.css:
--------------------------------------------------------------------------------
1 | /*
2 |
3 | Zenburn style from voldmar.ru (c) Vladimir Epifanov 
26 | reveal.js multiplex server.
Generate token'); 38 | res.end(); 39 | }); 40 | stream.on('readable', function() { 41 | stream.pipe(res); 42 | }); 43 | }); 44 | 45 | app.get("/token", function(req,res) { 46 | var ts = new Date().getTime(); 47 | var rand = Math.floor(Math.random()*9999999); 48 | var secret = ts.toString() + rand.toString(); 49 | res.send({secret: secret, socketId: createHash(secret)}); 50 | }); 51 | 52 | var createHash = function(secret) { 53 | var cipher = crypto.createCipher('blowfish', secret); 54 | return(cipher.final('hex')); 55 | }; 56 | 57 | // Actually listen 58 | server.listen( opts.port || null ); 59 | 60 | var brown = '\033[33m', 61 | green = '\033[32m', 62 | reset = '\033[0m'; 63 | 64 | console.log( brown + "reveal.js:" + reset + " Multiplex running on port " + green + opts.port + reset ); -------------------------------------------------------------------------------- /example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |
26 |
32 |
33 |
34 |
35 |
36 |
37 |
58 |
59 |
60 |
--------------------------------------------------------------------------------
/example/plugin/notes-server/index.js:
--------------------------------------------------------------------------------
1 | var http = require('http');
2 | var express = require('express');
3 | var fs = require('fs');
4 | var io = require('socket.io');
5 | var Mustache = require('mustache');
6 |
7 | var app = express();
8 | var staticDir = express.static;
9 | var server = http.createServer(app);
10 |
11 | io = io(server);
12 |
13 | var opts = {
14 | port : 1947,
15 | baseDir : __dirname + '/../../'
16 | };
17 |
18 | io.on( 'connection', function( socket ) {
19 |
20 | socket.on( 'new-subscriber', function( data ) {
21 | socket.broadcast.emit( 'new-subscriber', data );
22 | });
23 |
24 | socket.on( 'statechanged', function( data ) {
25 | delete data.state.overview;
26 | socket.broadcast.emit( 'statechanged', data );
27 | });
28 |
29 | socket.on( 'statechanged-speaker', function( data ) {
30 | delete data.state.overview;
31 | socket.broadcast.emit( 'statechanged-speaker', data );
32 | });
33 |
34 | });
35 |
36 | [ 'css', 'js', 'images', 'plugin', 'lib' ].forEach( function( dir ) {
37 | app.use( '/' + dir, staticDir( opts.baseDir + dir ) );
38 | });
39 |
40 | app.get('/', function( req, res ) {
41 |
42 | res.writeHead( 200, { 'Content-Type': 'text/html' } );
43 | fs.createReadStream( opts.baseDir + '/index.html' ).pipe( res );
44 |
45 | });
46 |
47 | app.get( '/notes/:socketId', function( req, res ) {
48 |
49 | fs.readFile( opts.baseDir + 'plugin/notes-server/notes.html', function( err, data ) {
50 | res.send( Mustache.to_html( data.toString(), {
51 | socketId : req.params.socketId
52 | }));
53 | });
54 |
55 | });
56 |
57 | // Actually listen
58 | server.listen( opts.port || null );
59 |
60 | var brown = '\033[33m',
61 | green = '\033[32m',
62 | reset = '\033[0m';
63 |
64 | var slidesLocation = 'http://localhost' + ( opts.port ? ( ':' + opts.port ) : '' );
65 |
66 | console.log( brown + 'reveal.js - Speaker Notes' + reset );
67 | console.log( '1. Open the slides at ' + green + slidesLocation + reset );
68 | console.log( '2. Click on the link in your JS console to go to the notes page' );
69 | console.log( '3. Advance through your slides and your notes will advance automatically' );
70 |
--------------------------------------------------------------------------------
/example/css/theme/source/blood.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Blood theme for reveal.js
3 | * Author: Walther http://github.com/Walther
4 | *
5 | * Designed to be used with highlight.js theme
6 | * "monokai_sublime.css" available from
7 | * https://github.com/isagalaev/highlight.js/
8 | *
9 | * For other themes, change $codeBackground accordingly.
10 | *
11 | */
12 |
13 | // Default mixins and settings -----------------
14 | @import "../template/mixins";
15 | @import "../template/settings";
16 | // ---------------------------------------------
17 |
18 | // Include theme-specific fonts
19 |
20 | @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,700,300italic,700italic);
21 |
22 | // Colors used in the theme
23 | $blood: #a23;
24 | $coal: #222;
25 | $codeBackground: #23241f;
26 |
27 | $backgroundColor: $coal;
28 |
29 | // Main text
30 | $mainFont: Ubuntu, 'sans-serif';
31 | $mainColor: #eee;
32 |
33 | // Headings
34 | $headingFont: Ubuntu, 'sans-serif';
35 | $headingTextShadow: 2px 2px 2px $coal;
36 |
37 | // h1 shadow, borrowed humbly from
38 | // (c) Default theme by Hakim El Hattab
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 | // Links
42 | $linkColor: $blood;
43 | $linkColorHover: lighten( $linkColor, 20% );
44 |
45 | // Text selection
46 | $selectionBackgroundColor: $blood;
47 | $selectionColor: #fff;
48 |
49 |
50 | // Theme template ------------------------------
51 | @import "../template/theme";
52 | // ---------------------------------------------
53 |
54 | // some overrides after theme template import
55 |
56 | .reveal p {
57 | font-weight: 300;
58 | text-shadow: 1px 1px $coal;
59 | }
60 |
61 | .reveal h1,
62 | .reveal h2,
63 | .reveal h3,
64 | .reveal h4,
65 | .reveal h5,
66 | .reveal h6 {
67 | font-weight: 700;
68 | }
69 |
70 | .reveal p code {
71 | background-color: $codeBackground;
72 | display: inline-block;
73 | border-radius: 7px;
74 | }
75 |
76 | .reveal small code {
77 | vertical-align: baseline;
78 | }
--------------------------------------------------------------------------------
/example/plugin/notes-server/client.js:
--------------------------------------------------------------------------------
1 | (function() {
2 |
3 | // don't emit events from inside the previews themselves
4 | if( window.location.search.match( /receiver/gi ) ) { return; }
5 |
6 | var socket = io.connect( window.location.origin ),
7 | socketId = Math.random().toString().slice( 2 );
8 |
9 | console.log( 'View slide notes at ' + window.location.origin + '/notes/' + socketId );
10 |
11 | window.open( window.location.origin + '/notes/' + socketId, 'notes-' + socketId );
12 |
13 | /**
14 | * Posts the current slide data to the notes window
15 | */
16 | function post() {
17 |
18 | var slideElement = Reveal.getCurrentSlide(),
19 | notesElement = slideElement.querySelector( 'aside.notes' );
20 |
21 | var messageData = {
22 | notes: '',
23 | markdown: false,
24 | socketId: socketId,
25 | state: Reveal.getState()
26 | };
27 |
28 | // Look for notes defined in a slide attribute
29 | if( slideElement.hasAttribute( 'data-notes' ) ) {
30 | messageData.notes = slideElement.getAttribute( 'data-notes' );
31 | }
32 |
33 | // Look for notes defined in an aside element
34 | if( notesElement ) {
35 | messageData.notes = notesElement.innerHTML;
36 | messageData.markdown = typeof notesElement.getAttribute( 'data-markdown' ) === 'string';
37 | }
38 |
39 | socket.emit( 'statechanged', messageData );
40 |
41 | }
42 |
43 | // When a new notes window connects, post our current state
44 | socket.on( 'new-subscriber', function( data ) {
45 | post();
46 | } );
47 |
48 | // When the state changes from inside of the speaker view
49 | socket.on( 'statechanged-speaker', function( data ) {
50 | Reveal.setState( data.state );
51 | } );
52 |
53 | // Monitor events that trigger a change in state
54 | Reveal.addEventListener( 'slidechanged', post );
55 | Reveal.addEventListener( 'fragmentshown', post );
56 | Reveal.addEventListener( 'fragmenthidden', post );
57 | Reveal.addEventListener( 'overviewhidden', post );
58 | Reveal.addEventListener( 'overviewshown', post );
59 | Reveal.addEventListener( 'paused', post );
60 | Reveal.addEventListener( 'resumed', post );
61 |
62 | // Post the initial state
63 | post();
64 |
65 | }());
66 |
--------------------------------------------------------------------------------
/example/test/test.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
26 |
27 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
99 |
100 |
101 |
102 |
--------------------------------------------------------------------------------
/example/test/test-markdown-element-attributes.js:
--------------------------------------------------------------------------------
1 |
2 |
3 | Reveal.addEventListener( 'ready', function() {
4 |
5 | QUnit.module( 'Markdown' );
6 |
7 | test( 'Vertical separator', function() {
8 | strictEqual( document.querySelectorAll( '.reveal .slides>section>section' ).length, 4, 'found four slides' );
9 | });
10 |
11 |
12 | test( 'Attributes on element header in vertical slides', function() {
13 | strictEqual( document.querySelectorAll( '.reveal .slides section>section h2.fragment.fade-out' ).length, 1, 'found one vertical slide with class fragment.fade-out on header' );
14 | strictEqual( document.querySelectorAll( '.reveal .slides section>section h2.fragment.shrink' ).length, 1, 'found one vertical slide with class fragment.shrink on header' );
15 | });
16 |
17 | test( 'Attributes on element paragraphs in vertical slides', function() {
18 | strictEqual( document.querySelectorAll( '.reveal .slides section>section p.fragment.grow' ).length, 2, 'found a vertical slide with two paragraphs with class fragment.grow' );
19 | });
20 |
21 | test( 'Attributes on element list items in vertical slides', function() {
22 | strictEqual( document.querySelectorAll( '.reveal .slides section>section li.fragment.grow' ).length, 3, 'found a vertical slide with three list items with class fragment.grow' );
23 | });
24 |
25 | test( 'Attributes on element paragraphs in horizontal slides', function() {
26 | strictEqual( document.querySelectorAll( '.reveal .slides section p.fragment.highlight-red' ).length, 4, 'found a horizontal slide with four paragraphs with class fragment.grow' );
27 | });
28 | test( 'Attributes on element list items in horizontal slides', function() {
29 | strictEqual( document.querySelectorAll( '.reveal .slides section li.fragment.highlight-green' ).length, 5, 'found a horizontal slide with five list items with class fragment.roll-in' );
30 | });
31 | test( 'Attributes on element list items in horizontal slides', function() {
32 | strictEqual( document.querySelectorAll( '.reveal .slides section img.reveal.stretch' ).length, 1, 'found a horizontal slide with stretched image, class img.reveal.stretch' );
33 | });
34 |
35 | test( 'Attributes on elements in vertical slides with default element attribute separator', function() {
36 | strictEqual( document.querySelectorAll( '.reveal .slides section h2.fragment.highlight-red' ).length, 2, 'found two h2 titles with fragment highlight-red in vertical slides with default element attribute separator' );
37 | });
38 |
39 | test( 'Attributes on elements in single slides with default element attribute separator', function() {
40 | strictEqual( document.querySelectorAll( '.reveal .slides section p.fragment.highlight-blue' ).length, 3, 'found three elements with fragment highlight-blue in single slide with default element attribute separator' );
41 | });
42 |
43 | } );
44 |
45 | Reveal.initialize();
46 |
47 |
--------------------------------------------------------------------------------
/example/test/test-markdown-slide-attributes.js:
--------------------------------------------------------------------------------
1 |
2 |
3 | Reveal.addEventListener( 'ready', function() {
4 |
5 | QUnit.module( 'Markdown' );
6 |
7 | test( 'Vertical separator', function() {
8 | strictEqual( document.querySelectorAll( '.reveal .slides>section>section' ).length, 6, 'found six vertical slides' );
9 | });
10 |
11 | test( 'Id on slide', function() {
12 | strictEqual( document.querySelectorAll( '.reveal .slides>section>section#slide2' ).length, 1, 'found one slide with id slide2' );
13 | strictEqual( document.querySelectorAll( '.reveal .slides>section>section a[href="#/slide2"]' ).length, 1, 'found one slide with a link to slide2' );
14 | });
15 |
16 | test( 'data-background attributes', function() {
17 | strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-background="#A0C66B"]' ).length, 1, 'found one vertical slide with data-background="#A0C66B"' );
18 | strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-background="#ff0000"]' ).length, 1, 'found one vertical slide with data-background="#ff0000"' );
19 | strictEqual( document.querySelectorAll( '.reveal .slides>section[data-background="#C6916B"]' ).length, 1, 'found one slide with data-background="#C6916B"' );
20 | });
21 |
22 | test( 'data-transition attributes', function() {
23 | strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-transition="zoom"]' ).length, 1, 'found one vertical slide with data-transition="zoom"' );
24 | strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-transition="fade"]' ).length, 1, 'found one vertical slide with data-transition="fade"' );
25 | strictEqual( document.querySelectorAll( '.reveal .slides section [data-transition="zoom"]' ).length, 1, 'found one slide with data-transition="zoom"' );
26 | });
27 |
28 | test( 'data-background attributes with default separator', function() {
29 | strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-background="#A7C66B"]' ).length, 1, 'found one vertical slide with data-background="#A0C66B"' );
30 | strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-background="#f70000"]' ).length, 1, 'found one vertical slide with data-background="#ff0000"' );
31 | strictEqual( document.querySelectorAll( '.reveal .slides>section[data-background="#C7916B"]' ).length, 1, 'found one slide with data-background="#C6916B"' );
32 | });
33 |
34 | test( 'data-transition attributes with default separator', function() {
35 | strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-transition="concave"]' ).length, 1, 'found one vertical slide with data-transition="zoom"' );
36 | strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-transition="page"]' ).length, 1, 'found one vertical slide with data-transition="fade"' );
37 | strictEqual( document.querySelectorAll( '.reveal .slides section [data-transition="concave"]' ).length, 1, 'found one slide with data-transition="zoom"' );
38 | });
39 |
40 | test( 'data-transition attributes with inline content', function() {
41 | strictEqual( document.querySelectorAll( '.reveal .slides>section[data-background="#ff0000"]' ).length, 3, 'found three horizontal slides with data-background="#ff0000"' );
42 | });
43 |
44 | } );
45 |
46 | Reveal.initialize();
47 |
48 |
--------------------------------------------------------------------------------
/example/test/test-markdown-slide-attributes.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
101 |
102 |
103 |
108 |
109 |
110 | ...
111 | ```
112 |
113 | Now you may wish to include the subchapters 1.1 and 1.2 to the content of chapter 1. This would be the code of index_1.html:
114 |
115 | ```
116 | ...
117 |
18 |
19 |
103 |
104 |
105 |
106 |
107 |
108 |
127 |
128 |
129 |
130 |
--------------------------------------------------------------------------------
/example/test/examples/slide-backgrounds.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
28 |
29 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
142 |
143 |
144 |
145 |
--------------------------------------------------------------------------------
/example/plugin/notes/notes.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Handles opening of and synchronization with the reveal.js
3 | * notes window.
4 | *
5 | * Handshake process:
6 | * 1. This window posts 'connect' to notes window
7 | * - Includes URL of presentation to show
8 | * 2. Notes window responds with 'connected' when it is available
9 | * 3. This window proceeds to send the current presentation state
10 | * to the notes window
11 | */
12 | var RevealNotes = (function() {
13 |
14 | function openNotes( notesFilePath ) {
15 |
16 | if( !notesFilePath ) {
17 | var jsFileLocation = document.querySelector('script[src$="notes.js"]').src; // this js file path
18 | jsFileLocation = jsFileLocation.replace(/notes\.js(\?.*)?$/, ''); // the js folder path
19 | notesFilePath = jsFileLocation + 'notes.html';
20 | }
21 |
22 | var notesPopup = window.open( notesFilePath, 'reveal.js - Notes', 'width=1100,height=700' );
23 |
24 | /**
25 | * Connect to the notes window through a postmessage handshake.
26 | * Using postmessage enables us to work in situations where the
27 | * origins differ, such as a presentation being opened from the
28 | * file system.
29 | */
30 | function connect() {
31 | // Keep trying to connect until we get a 'connected' message back
32 | var connectInterval = setInterval( function() {
33 | notesPopup.postMessage( JSON.stringify( {
34 | namespace: 'reveal-notes',
35 | type: 'connect',
36 | url: window.location.protocol + '//' + window.location.host + window.location.pathname + window.location.search,
37 | state: Reveal.getState()
38 | } ), '*' );
39 | }, 500 );
40 |
41 | window.addEventListener( 'message', function( event ) {
42 | var data = JSON.parse( event.data );
43 | if( data && data.namespace === 'reveal-notes' && data.type === 'connected' ) {
44 | clearInterval( connectInterval );
45 | onConnected();
46 | }
47 | } );
48 | }
49 |
50 | /**
51 | * Posts the current slide data to the notes window
52 | */
53 | function post(event) {
54 |
55 | var slideElement = Reveal.getCurrentSlide(),
56 | notesElement = slideElement.querySelector( 'aside.notes' );
57 |
58 | var messageData = {
59 | namespace: 'reveal-notes',
60 | type: 'state',
61 | notes: '',
62 | markdown: false,
63 | whitespace: 'normal',
64 | state: Reveal.getState()
65 | };
66 |
67 | // Look for notes defined in a fragment, if it is a fragmentshown event
68 | if (event && event.hasOwnProperty('fragment')) {
69 | var innerNotes = event.fragment.querySelector( 'aside.notes' );
70 |
71 | if ( innerNotes) {
72 | notesElement = innerNotes;
73 | }
74 | }
75 |
76 | // Look for notes defined in a slide attribute
77 | if( slideElement.hasAttribute( 'data-notes' ) ) {
78 | messageData.notes = slideElement.getAttribute( 'data-notes' );
79 | messageData.whitespace = 'pre-wrap';
80 | }
81 |
82 | // Look for notes defined in an aside element
83 | if( notesElement ) {
84 | messageData.notes = notesElement.innerHTML;
85 | messageData.markdown = typeof notesElement.getAttribute( 'data-markdown' ) === 'string';
86 | }
87 |
88 | notesPopup.postMessage( JSON.stringify( messageData ), '*' );
89 |
90 | }
91 |
92 | /**
93 | * Called once we have established a connection to the notes
94 | * window.
95 | */
96 | function onConnected() {
97 |
98 | // Monitor events that trigger a change in state
99 | Reveal.addEventListener( 'slidechanged', post );
100 | Reveal.addEventListener( 'fragmentshown', post );
101 | Reveal.addEventListener( 'fragmenthidden', post );
102 | Reveal.addEventListener( 'overviewhidden', post );
103 | Reveal.addEventListener( 'overviewshown', post );
104 | Reveal.addEventListener( 'paused', post );
105 | Reveal.addEventListener( 'resumed', post );
106 |
107 | // Post the initial state
108 | post();
109 |
110 | }
111 |
112 | connect();
113 |
114 | }
115 |
116 | if( !/receiver/i.test( window.location.search ) ) {
117 |
118 | // If the there's a 'notes' query set, open directly
119 | if( window.location.search.match( /(\?|\&)notes/gi ) !== null ) {
120 | openNotes();
121 | }
122 |
123 | // Open the notes when the 's' key is hit
124 | document.addEventListener( 'keydown', function( event ) {
125 | // Disregard the event if the target is editable or a
126 | // modifier is present
127 | if ( document.querySelector( ':focus' ) !== null || event.shiftKey || event.altKey || event.ctrlKey || event.metaKey ) return;
128 |
129 | // Disregard the event if keyboard is disabled
130 | if ( Reveal.getConfig().keyboard === false ) return;
131 |
132 | if( event.keyCode === 83 ) {
133 | event.preventDefault();
134 | openNotes();
135 | }
136 | }, false );
137 |
138 | // Show our keyboard shortcut in the reveal.js help overlay
139 | if( window.Reveal ) Reveal.registerKeyboardShortcut( 'S', 'Speaker notes view' );
140 |
141 | }
142 |
143 | return { open: openNotes };
144 |
145 | })();
146 |
--------------------------------------------------------------------------------
/example/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 | @media print {
10 |
11 | /* SECTION 1: Set default width, margin, float, and
12 | background. This prevents elements from extending
13 | beyond the edge of the printed page, and prevents
14 | unnecessary background images from printing */
15 | html {
16 | background: #fff;
17 | width: auto;
18 | height: auto;
19 | overflow: visible;
20 | }
21 | body {
22 | background: #fff;
23 | font-size: 20pt;
24 | width: auto;
25 | height: auto;
26 | border: 0;
27 | margin: 0 5%;
28 | padding: 0;
29 | overflow: visible;
30 | float: none !important;
31 | }
32 |
33 | /* SECTION 2: Remove any elements not needed in print.
34 | This would include navigation, ads, sidebars, etc. */
35 | .nestedarrow,
36 | .controls,
37 | .fork-reveal,
38 | .share-reveal,
39 | .state-background,
40 | .reveal .progress,
41 | .reveal .backgrounds,
42 | .reveal .slide-number {
43 | display: none !important;
44 | }
45 |
46 | /* SECTION 3: Set body font face, size, and color.
47 | Consider using a serif font for readability. */
48 | body, p, td, li, div {
49 | font-size: 20pt!important;
50 | font-family: Georgia, "Times New Roman", Times, serif !important;
51 | color: #000;
52 | }
53 |
54 | /* SECTION 4: Set heading font face, sizes, and color.
55 | Differentiate your headings from your body text.
56 | Perhaps use a large sans-serif for distinction. */
57 | h1,h2,h3,h4,h5,h6 {
58 | color: #000!important;
59 | height: auto;
60 | line-height: normal;
61 | font-family: Georgia, "Times New Roman", Times, serif !important;
62 | text-shadow: 0 0 0 #000 !important;
63 | text-align: left;
64 | letter-spacing: normal;
65 | }
66 | /* Need to reduce the size of the fonts for printing */
67 | h1 { font-size: 28pt !important; }
68 | h2 { font-size: 24pt !important; }
69 | h3 { font-size: 22pt !important; }
70 | h4 { font-size: 22pt !important; font-variant: small-caps; }
71 | h5 { font-size: 21pt !important; }
72 | h6 { font-size: 20pt !important; font-style: italic; }
73 |
74 | /* SECTION 5: Make hyperlinks more usable.
75 | Ensure links are underlined, and consider appending
76 | the URL to the end of the link for usability. */
77 | a:link,
78 | a:visited {
79 | color: #000 !important;
80 | font-weight: bold;
81 | text-decoration: underline;
82 | }
83 | /*
84 | .reveal a:link:after,
85 | .reveal a:visited:after {
86 | content: " (" attr(href) ") ";
87 | color: #222 !important;
88 | font-size: 90%;
89 | }
90 | */
91 |
92 |
93 | /* SECTION 6: more reveal.js specific additions by @skypanther */
94 | ul, ol, div, p {
95 | visibility: visible;
96 | position: static;
97 | width: auto;
98 | height: auto;
99 | display: block;
100 | overflow: visible;
101 | margin: 0;
102 | text-align: left !important;
103 | }
104 | .reveal pre,
105 | .reveal table {
106 | margin-left: 0;
107 | margin-right: 0;
108 | }
109 | .reveal pre code {
110 | padding: 20px;
111 | border: 1px solid #ddd;
112 | }
113 | .reveal blockquote {
114 | margin: 20px 0;
115 | }
116 | .reveal .slides {
117 | position: static !important;
118 | width: auto !important;
119 | height: auto !important;
120 |
121 | left: 0 !important;
122 | top: 0 !important;
123 | margin-left: 0 !important;
124 | margin-top: 0 !important;
125 | padding: 0 !important;
126 | zoom: 1 !important;
127 |
128 | overflow: visible !important;
129 | display: block !important;
130 |
131 | text-align: left !important;
132 | -webkit-perspective: none;
133 | -moz-perspective: none;
134 | -ms-perspective: none;
135 | perspective: none;
136 |
137 | -webkit-perspective-origin: 50% 50%;
138 | -moz-perspective-origin: 50% 50%;
139 | -ms-perspective-origin: 50% 50%;
140 | perspective-origin: 50% 50%;
141 | }
142 | .reveal .slides section {
143 | visibility: visible !important;
144 | position: static !important;
145 | width: auto !important;
146 | height: auto !important;
147 | display: block !important;
148 | overflow: visible !important;
149 |
150 | left: 0 !important;
151 | top: 0 !important;
152 | margin-left: 0 !important;
153 | margin-top: 0 !important;
154 | padding: 60px 20px !important;
155 | z-index: auto !important;
156 |
157 | opacity: 1 !important;
158 |
159 | page-break-after: always !important;
160 |
161 | -webkit-transform-style: flat !important;
162 | -moz-transform-style: flat !important;
163 | -ms-transform-style: flat !important;
164 | transform-style: flat !important;
165 |
166 | -webkit-transform: none !important;
167 | -moz-transform: none !important;
168 | -ms-transform: none !important;
169 | transform: none !important;
170 |
171 | -webkit-transition: none !important;
172 | -moz-transition: none !important;
173 | -ms-transition: none !important;
174 | transition: none !important;
175 | }
176 | .reveal .slides section.stack {
177 | padding: 0 !important;
178 | }
179 | .reveal section:last-of-type {
180 | page-break-after: avoid !important;
181 | }
182 | .reveal section .fragment {
183 | opacity: 1 !important;
184 | visibility: visible !important;
185 |
186 | -webkit-transform: none !important;
187 | -moz-transform: none !important;
188 | -ms-transform: none !important;
189 | transform: none !important;
190 | }
191 | .reveal section img {
192 | display: block;
193 | margin: 15px 0px;
194 | background: rgba(255,255,255,1);
195 | border: 1px solid #666;
196 | box-shadow: none;
197 | }
198 |
199 | .reveal section small {
200 | font-size: 0.8em;
201 | }
202 |
203 | }
204 |
--------------------------------------------------------------------------------
/example/test/qunit-1.12.0.css:
--------------------------------------------------------------------------------
1 | /**
2 | * QUnit v1.12.0 - A JavaScript Unit Testing Framework
3 | *
4 | * http://qunitjs.com
5 | *
6 | * Copyright 2012 jQuery Foundation and other contributors
7 | * Released under the MIT license.
8 | * http://jquery.org/license
9 | */
10 |
11 | /** Font Family and Sizes */
12 |
13 | #qunit-tests, #qunit-header, #qunit-banner, #qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult {
14 | font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial, sans-serif;
15 | }
16 |
17 | #qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult, #qunit-tests li { font-size: small; }
18 | #qunit-tests { font-size: smaller; }
19 |
20 |
21 | /** Resets */
22 |
23 | #qunit-tests, #qunit-header, #qunit-banner, #qunit-userAgent, #qunit-testresult, #qunit-modulefilter {
24 | margin: 0;
25 | padding: 0;
26 | }
27 |
28 |
29 | /** Header */
30 |
31 | #qunit-header {
32 | padding: 0.5em 0 0.5em 1em;
33 |
34 | color: #8699a4;
35 | background-color: #0d3349;
36 |
37 | font-size: 1.5em;
38 | line-height: 1em;
39 | font-weight: normal;
40 |
41 | border-radius: 5px 5px 0 0;
42 | -moz-border-radius: 5px 5px 0 0;
43 | -webkit-border-top-right-radius: 5px;
44 | -webkit-border-top-left-radius: 5px;
45 | }
46 |
47 | #qunit-header a {
48 | text-decoration: none;
49 | color: #c2ccd1;
50 | }
51 |
52 | #qunit-header a:hover,
53 | #qunit-header a:focus {
54 | color: #fff;
55 | }
56 |
57 | #qunit-testrunner-toolbar label {
58 | display: inline-block;
59 | padding: 0 .5em 0 .1em;
60 | }
61 |
62 | #qunit-banner {
63 | height: 5px;
64 | }
65 |
66 | #qunit-testrunner-toolbar {
67 | padding: 0.5em 0 0.5em 2em;
68 | color: #5E740B;
69 | background-color: #eee;
70 | overflow: hidden;
71 | }
72 |
73 | #qunit-userAgent {
74 | padding: 0.5em 0 0.5em 2.5em;
75 | background-color: #2b81af;
76 | color: #fff;
77 | text-shadow: rgba(0, 0, 0, 0.5) 2px 2px 1px;
78 | }
79 |
80 | #qunit-modulefilter-container {
81 | float: right;
82 | }
83 |
84 | /** Tests: Pass/Fail */
85 |
86 | #qunit-tests {
87 | list-style-position: inside;
88 | }
89 |
90 | #qunit-tests li {
91 | padding: 0.4em 0.5em 0.4em 2.5em;
92 | border-bottom: 1px solid #fff;
93 | list-style-position: inside;
94 | }
95 |
96 | #qunit-tests.hidepass li.pass, #qunit-tests.hidepass li.running {
97 | display: none;
98 | }
99 |
100 | #qunit-tests li strong {
101 | cursor: pointer;
102 | }
103 |
104 | #qunit-tests li a {
105 | padding: 0.5em;
106 | color: #c2ccd1;
107 | text-decoration: none;
108 | }
109 | #qunit-tests li a:hover,
110 | #qunit-tests li a:focus {
111 | color: #000;
112 | }
113 |
114 | #qunit-tests li .runtime {
115 | float: right;
116 | font-size: smaller;
117 | }
118 |
119 | .qunit-assert-list {
120 | margin-top: 0.5em;
121 | padding: 0.5em;
122 |
123 | background-color: #fff;
124 |
125 | border-radius: 5px;
126 | -moz-border-radius: 5px;
127 | -webkit-border-radius: 5px;
128 | }
129 |
130 | .qunit-collapsed {
131 | display: none;
132 | }
133 |
134 | #qunit-tests table {
135 | border-collapse: collapse;
136 | margin-top: .2em;
137 | }
138 |
139 | #qunit-tests th {
140 | text-align: right;
141 | vertical-align: top;
142 | padding: 0 .5em 0 0;
143 | }
144 |
145 | #qunit-tests td {
146 | vertical-align: top;
147 | }
148 |
149 | #qunit-tests pre {
150 | margin: 0;
151 | white-space: pre-wrap;
152 | word-wrap: break-word;
153 | }
154 |
155 | #qunit-tests del {
156 | background-color: #e0f2be;
157 | color: #374e0c;
158 | text-decoration: none;
159 | }
160 |
161 | #qunit-tests ins {
162 | background-color: #ffcaca;
163 | color: #500;
164 | text-decoration: none;
165 | }
166 |
167 | /*** Test Counts */
168 |
169 | #qunit-tests b.counts { color: black; }
170 | #qunit-tests b.passed { color: #5E740B; }
171 | #qunit-tests b.failed { color: #710909; }
172 |
173 | #qunit-tests li li {
174 | padding: 5px;
175 | background-color: #fff;
176 | border-bottom: none;
177 | list-style-position: inside;
178 | }
179 |
180 | /*** Passing Styles */
181 |
182 | #qunit-tests li li.pass {
183 | color: #3c510c;
184 | background-color: #fff;
185 | border-left: 10px solid #C6E746;
186 | }
187 |
188 | #qunit-tests .pass { color: #528CE0; background-color: #D2E0E6; }
189 | #qunit-tests .pass .test-name { color: #366097; }
190 |
191 | #qunit-tests .pass .test-actual,
192 | #qunit-tests .pass .test-expected { color: #999999; }
193 |
194 | #qunit-banner.qunit-pass { background-color: #C6E746; }
195 |
196 | /*** Failing Styles */
197 |
198 | #qunit-tests li li.fail {
199 | color: #710909;
200 | background-color: #fff;
201 | border-left: 10px solid #EE5757;
202 | white-space: pre;
203 | }
204 |
205 | #qunit-tests > li:last-child {
206 | border-radius: 0 0 5px 5px;
207 | -moz-border-radius: 0 0 5px 5px;
208 | -webkit-border-bottom-right-radius: 5px;
209 | -webkit-border-bottom-left-radius: 5px;
210 | }
211 |
212 | #qunit-tests .fail { color: #000000; background-color: #EE5757; }
213 | #qunit-tests .fail .test-name,
214 | #qunit-tests .fail .module-name { color: #000000; }
215 |
216 | #qunit-tests .fail .test-actual { color: #EE5757; }
217 | #qunit-tests .fail .test-expected { color: green; }
218 |
219 | #qunit-banner.qunit-fail { background-color: #EE5757; }
220 |
221 |
222 | /** Result */
223 |
224 | #qunit-testresult {
225 | padding: 0.5em 0.5em 0.5em 2.5em;
226 |
227 | color: #2b81af;
228 | background-color: #D2E0E6;
229 |
230 | border-bottom: 1px solid white;
231 | }
232 | #qunit-testresult .module-name {
233 | font-weight: bold;
234 | }
235 |
236 | /** Fixture */
237 |
238 | #qunit-fixture {
239 | position: absolute;
240 | top: -10000px;
241 | left: -10000px;
242 | width: 1000px;
243 | height: 1000px;
244 | }
--------------------------------------------------------------------------------
/example/test/examples/math.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
18 |
19 |
159 |
160 |
161 |
162 |
163 |
164 |
165 |
183 |
184 |
185 |
186 |
--------------------------------------------------------------------------------
/external/external.js:
--------------------------------------------------------------------------------
1 | /*
2 | * external.js
3 | * Jan Schoepke 
';
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 |
--------------------------------------------------------------------------------
/example/css/theme/simple.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
7 | */
8 | @import url(https://fonts.googleapis.com/css?family=News+Cycle:400,700);
9 | @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
10 | section.has-dark-background, section.has-dark-background h1, section.has-dark-background h2, section.has-dark-background h3, section.has-dark-background h4, section.has-dark-background h5, section.has-dark-background h6 {
11 | color: #fff; }
12 |
13 | /*********************************************
14 | * GLOBAL STYLES
15 | *********************************************/
16 | body {
17 | background: #fff;
18 | background-color: #fff; }
19 |
20 | .reveal {
21 | font-family: "Lato", sans-serif;
22 | font-size: 40px;
23 | font-weight: normal;
24 | color: #000; }
25 |
26 | ::selection {
27 | color: #fff;
28 | background: rgba(0, 0, 0, 0.99);
29 | text-shadow: none; }
30 |
31 | ::-moz-selection {
32 | color: #fff;
33 | background: rgba(0, 0, 0, 0.99);
34 | text-shadow: none; }
35 |
36 | .reveal .slides > section,
37 | .reveal .slides > section > section {
38 | line-height: 1.3;
39 | font-weight: inherit; }
40 |
41 | /*********************************************
42 | * HEADERS
43 | *********************************************/
44 | .reveal h1,
45 | .reveal h2,
46 | .reveal h3,
47 | .reveal h4,
48 | .reveal h5,
49 | .reveal h6 {
50 | margin: 0 0 20px 0;
51 | color: #000;
52 | font-family: "News Cycle", Impact, sans-serif;
53 | font-weight: normal;
54 | line-height: 1.2;
55 | letter-spacing: normal;
56 | text-transform: none;
57 | text-shadow: none;
58 | word-wrap: break-word; }
59 |
60 | .reveal h1 {
61 | font-size: 3.77em; }
62 |
63 | .reveal h2 {
64 | font-size: 2.11em; }
65 |
66 | .reveal h3 {
67 | font-size: 1.55em; }
68 |
69 | .reveal h4 {
70 | font-size: 1em; }
71 |
72 | .reveal h1 {
73 | text-shadow: none; }
74 |
75 | /*********************************************
76 | * OTHER
77 | *********************************************/
78 | .reveal p {
79 | margin: 20px 0;
80 | line-height: 1.3; }
81 |
82 | /* Ensure certain elements are never larger than the slide itself */
83 | .reveal img,
84 | .reveal video,
85 | .reveal iframe {
86 | max-width: 95%;
87 | max-height: 95%; }
88 |
89 | .reveal strong,
90 | .reveal b {
91 | font-weight: bold; }
92 |
93 | .reveal em {
94 | font-style: italic; }
95 |
96 | .reveal ol,
97 | .reveal dl,
98 | .reveal ul {
99 | display: inline-block;
100 | text-align: left;
101 | margin: 0 0 0 1em; }
102 |
103 | .reveal ol {
104 | list-style-type: decimal; }
105 |
106 | .reveal ul {
107 | list-style-type: disc; }
108 |
109 | .reveal ul ul {
110 | list-style-type: square; }
111 |
112 | .reveal ul ul ul {
113 | list-style-type: circle; }
114 |
115 | .reveal ul ul,
116 | .reveal ul ol,
117 | .reveal ol ol,
118 | .reveal ol ul {
119 | display: block;
120 | margin-left: 40px; }
121 |
122 | .reveal dt {
123 | font-weight: bold; }
124 |
125 | .reveal dd {
126 | margin-left: 40px; }
127 |
128 | .reveal q,
129 | .reveal blockquote {
130 | quotes: none; }
131 |
132 | .reveal blockquote {
133 | display: block;
134 | position: relative;
135 | width: 70%;
136 | margin: 20px auto;
137 | padding: 5px;
138 | font-style: italic;
139 | background: rgba(255, 255, 255, 0.05);
140 | box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); }
141 |
142 | .reveal blockquote p:first-child,
143 | .reveal blockquote p:last-child {
144 | display: inline-block; }
145 |
146 | .reveal q {
147 | font-style: italic; }
148 |
149 | .reveal pre {
150 | display: block;
151 | position: relative;
152 | width: 90%;
153 | margin: 20px auto;
154 | text-align: left;
155 | font-size: 0.55em;
156 | font-family: monospace;
157 | line-height: 1.2em;
158 | word-wrap: break-word;
159 | box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }
160 |
161 | .reveal code {
162 | font-family: monospace; }
163 |
164 | .reveal pre code {
165 | display: block;
166 | padding: 5px;
167 | overflow: auto;
168 | max-height: 400px;
169 | word-wrap: normal; }
170 |
171 | .reveal table {
172 | margin: auto;
173 | border-collapse: collapse;
174 | border-spacing: 0; }
175 |
176 | .reveal table th {
177 | font-weight: bold; }
178 |
179 | .reveal table th,
180 | .reveal table td {
181 | text-align: left;
182 | padding: 0.2em 0.5em 0.2em 0.5em;
183 | border-bottom: 1px solid; }
184 |
185 | .reveal table th[align="center"],
186 | .reveal table td[align="center"] {
187 | text-align: center; }
188 |
189 | .reveal table th[align="right"],
190 | .reveal table td[align="right"] {
191 | text-align: right; }
192 |
193 | .reveal table tbody tr:last-child th,
194 | .reveal table tbody tr:last-child td {
195 | border-bottom: none; }
196 |
197 | .reveal sup {
198 | vertical-align: super; }
199 |
200 | .reveal sub {
201 | vertical-align: sub; }
202 |
203 | .reveal small {
204 | display: inline-block;
205 | font-size: 0.6em;
206 | line-height: 1.2em;
207 | vertical-align: top; }
208 |
209 | .reveal small * {
210 | vertical-align: top; }
211 |
212 | /*********************************************
213 | * LINKS
214 | *********************************************/
215 | .reveal a {
216 | color: #00008B;
217 | text-decoration: none;
218 | -webkit-transition: color .15s ease;
219 | -moz-transition: color .15s ease;
220 | transition: color .15s ease; }
221 |
222 | .reveal a:hover {
223 | color: #0000f1;
224 | text-shadow: none;
225 | border: none; }
226 |
227 | .reveal .roll span:after {
228 | color: #fff;
229 | background: #00003f; }
230 |
231 | /*********************************************
232 | * IMAGES
233 | *********************************************/
234 | .reveal section img {
235 | margin: 15px 0px;
236 | background: rgba(255, 255, 255, 0.12);
237 | border: 4px solid #000;
238 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
239 |
240 | .reveal section img.plain {
241 | border: 0;
242 | box-shadow: none; }
243 |
244 | .reveal a img {
245 | -webkit-transition: all .15s linear;
246 | -moz-transition: all .15s linear;
247 | transition: all .15s linear; }
248 |
249 | .reveal a:hover img {
250 | background: rgba(255, 255, 255, 0.2);
251 | border-color: #00008B;
252 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
253 |
254 | /*********************************************
255 | * NAVIGATION CONTROLS
256 | *********************************************/
257 | .reveal .controls .navigate-left,
258 | .reveal .controls .navigate-left.enabled {
259 | border-right-color: #00008B; }
260 |
261 | .reveal .controls .navigate-right,
262 | .reveal .controls .navigate-right.enabled {
263 | border-left-color: #00008B; }
264 |
265 | .reveal .controls .navigate-up,
266 | .reveal .controls .navigate-up.enabled {
267 | border-bottom-color: #00008B; }
268 |
269 | .reveal .controls .navigate-down,
270 | .reveal .controls .navigate-down.enabled {
271 | border-top-color: #00008B; }
272 |
273 | .reveal .controls .navigate-left.enabled:hover {
274 | border-right-color: #0000f1; }
275 |
276 | .reveal .controls .navigate-right.enabled:hover {
277 | border-left-color: #0000f1; }
278 |
279 | .reveal .controls .navigate-up.enabled:hover {
280 | border-bottom-color: #0000f1; }
281 |
282 | .reveal .controls .navigate-down.enabled:hover {
283 | border-top-color: #0000f1; }
284 |
285 | /*********************************************
286 | * PROGRESS BAR
287 | *********************************************/
288 | .reveal .progress {
289 | background: rgba(0, 0, 0, 0.2); }
290 |
291 | .reveal .progress span {
292 | background: #00008B;
293 | -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
294 | -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
295 | transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
296 |
--------------------------------------------------------------------------------
/example/css/theme/sky.css:
--------------------------------------------------------------------------------
1 | /**
2 | * Sky theme for reveal.js.
3 | *
4 | * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
5 | */
6 | @import url(https://fonts.googleapis.com/css?family=Quicksand:400,700,400italic,700italic);
7 | @import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700);
8 | .reveal a {
9 | line-height: 1.3em; }
10 |
11 | /*********************************************
12 | * GLOBAL STYLES
13 | *********************************************/
14 | body {
15 | background: #add9e4;
16 | background: -moz-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%);
17 | background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #f7fbfc), color-stop(100%, #add9e4));
18 | background: -webkit-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%);
19 | background: -o-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%);
20 | background: -ms-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%);
21 | background: radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%);
22 | background-color: #f7fbfc; }
23 |
24 | .reveal {
25 | font-family: "Open Sans", sans-serif;
26 | font-size: 40px;
27 | font-weight: normal;
28 | color: #333; }
29 |
30 | ::selection {
31 | color: #fff;
32 | background: #134674;
33 | text-shadow: none; }
34 |
35 | ::-moz-selection {
36 | color: #fff;
37 | background: #134674;
38 | text-shadow: none; }
39 |
40 | .reveal .slides > section,
41 | .reveal .slides > section > section {
42 | line-height: 1.3;
43 | font-weight: inherit; }
44 |
45 | /*********************************************
46 | * HEADERS
47 | *********************************************/
48 | .reveal h1,
49 | .reveal h2,
50 | .reveal h3,
51 | .reveal h4,
52 | .reveal h5,
53 | .reveal h6 {
54 | margin: 0 0 20px 0;
55 | color: #333;
56 | font-family: "Quicksand", sans-serif;
57 | font-weight: normal;
58 | line-height: 1.2;
59 | letter-spacing: -0.08em;
60 | text-transform: uppercase;
61 | text-shadow: none;
62 | word-wrap: break-word; }
63 |
64 | .reveal h1 {
65 | font-size: 3.77em; }
66 |
67 | .reveal h2 {
68 | font-size: 2.11em; }
69 |
70 | .reveal h3 {
71 | font-size: 1.55em; }
72 |
73 | .reveal h4 {
74 | font-size: 1em; }
75 |
76 | .reveal h1 {
77 | text-shadow: none; }
78 |
79 | /*********************************************
80 | * OTHER
81 | *********************************************/
82 | .reveal p {
83 | margin: 20px 0;
84 | line-height: 1.3; }
85 |
86 | /* Ensure certain elements are never larger than the slide itself */
87 | .reveal img,
88 | .reveal video,
89 | .reveal iframe {
90 | max-width: 95%;
91 | max-height: 95%; }
92 |
93 | .reveal strong,
94 | .reveal b {
95 | font-weight: bold; }
96 |
97 | .reveal em {
98 | font-style: italic; }
99 |
100 | .reveal ol,
101 | .reveal dl,
102 | .reveal ul {
103 | display: inline-block;
104 | text-align: left;
105 | margin: 0 0 0 1em; }
106 |
107 | .reveal ol {
108 | list-style-type: decimal; }
109 |
110 | .reveal ul {
111 | list-style-type: disc; }
112 |
113 | .reveal ul ul {
114 | list-style-type: square; }
115 |
116 | .reveal ul ul ul {
117 | list-style-type: circle; }
118 |
119 | .reveal ul ul,
120 | .reveal ul ol,
121 | .reveal ol ol,
122 | .reveal ol ul {
123 | display: block;
124 | margin-left: 40px; }
125 |
126 | .reveal dt {
127 | font-weight: bold; }
128 |
129 | .reveal dd {
130 | margin-left: 40px; }
131 |
132 | .reveal q,
133 | .reveal blockquote {
134 | quotes: none; }
135 |
136 | .reveal blockquote {
137 | display: block;
138 | position: relative;
139 | width: 70%;
140 | margin: 20px auto;
141 | padding: 5px;
142 | font-style: italic;
143 | background: rgba(255, 255, 255, 0.05);
144 | box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); }
145 |
146 | .reveal blockquote p:first-child,
147 | .reveal blockquote p:last-child {
148 | display: inline-block; }
149 |
150 | .reveal q {
151 | font-style: italic; }
152 |
153 | .reveal pre {
154 | display: block;
155 | position: relative;
156 | width: 90%;
157 | margin: 20px auto;
158 | text-align: left;
159 | font-size: 0.55em;
160 | font-family: monospace;
161 | line-height: 1.2em;
162 | word-wrap: break-word;
163 | box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }
164 |
165 | .reveal code {
166 | font-family: monospace; }
167 |
168 | .reveal pre code {
169 | display: block;
170 | padding: 5px;
171 | overflow: auto;
172 | max-height: 400px;
173 | word-wrap: normal; }
174 |
175 | .reveal table {
176 | margin: auto;
177 | border-collapse: collapse;
178 | border-spacing: 0; }
179 |
180 | .reveal table th {
181 | font-weight: bold; }
182 |
183 | .reveal table th,
184 | .reveal table td {
185 | text-align: left;
186 | padding: 0.2em 0.5em 0.2em 0.5em;
187 | border-bottom: 1px solid; }
188 |
189 | .reveal table th[align="center"],
190 | .reveal table td[align="center"] {
191 | text-align: center; }
192 |
193 | .reveal table th[align="right"],
194 | .reveal table td[align="right"] {
195 | text-align: right; }
196 |
197 | .reveal table tbody tr:last-child th,
198 | .reveal table tbody tr:last-child td {
199 | border-bottom: none; }
200 |
201 | .reveal sup {
202 | vertical-align: super; }
203 |
204 | .reveal sub {
205 | vertical-align: sub; }
206 |
207 | .reveal small {
208 | display: inline-block;
209 | font-size: 0.6em;
210 | line-height: 1.2em;
211 | vertical-align: top; }
212 |
213 | .reveal small * {
214 | vertical-align: top; }
215 |
216 | /*********************************************
217 | * LINKS
218 | *********************************************/
219 | .reveal a {
220 | color: #3b759e;
221 | text-decoration: none;
222 | -webkit-transition: color .15s ease;
223 | -moz-transition: color .15s ease;
224 | transition: color .15s ease; }
225 |
226 | .reveal a:hover {
227 | color: #74a7cb;
228 | text-shadow: none;
229 | border: none; }
230 |
231 | .reveal .roll span:after {
232 | color: #fff;
233 | background: #264c66; }
234 |
235 | /*********************************************
236 | * IMAGES
237 | *********************************************/
238 | .reveal section img {
239 | margin: 15px 0px;
240 | background: rgba(255, 255, 255, 0.12);
241 | border: 4px solid #333;
242 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
243 |
244 | .reveal section img.plain {
245 | border: 0;
246 | box-shadow: none; }
247 |
248 | .reveal a img {
249 | -webkit-transition: all .15s linear;
250 | -moz-transition: all .15s linear;
251 | transition: all .15s linear; }
252 |
253 | .reveal a:hover img {
254 | background: rgba(255, 255, 255, 0.2);
255 | border-color: #3b759e;
256 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
257 |
258 | /*********************************************
259 | * NAVIGATION CONTROLS
260 | *********************************************/
261 | .reveal .controls .navigate-left,
262 | .reveal .controls .navigate-left.enabled {
263 | border-right-color: #3b759e; }
264 |
265 | .reveal .controls .navigate-right,
266 | .reveal .controls .navigate-right.enabled {
267 | border-left-color: #3b759e; }
268 |
269 | .reveal .controls .navigate-up,
270 | .reveal .controls .navigate-up.enabled {
271 | border-bottom-color: #3b759e; }
272 |
273 | .reveal .controls .navigate-down,
274 | .reveal .controls .navigate-down.enabled {
275 | border-top-color: #3b759e; }
276 |
277 | .reveal .controls .navigate-left.enabled:hover {
278 | border-right-color: #74a7cb; }
279 |
280 | .reveal .controls .navigate-right.enabled:hover {
281 | border-left-color: #74a7cb; }
282 |
283 | .reveal .controls .navigate-up.enabled:hover {
284 | border-bottom-color: #74a7cb; }
285 |
286 | .reveal .controls .navigate-down.enabled:hover {
287 | border-top-color: #74a7cb; }
288 |
289 | /*********************************************
290 | * PROGRESS BAR
291 | *********************************************/
292 | .reveal .progress {
293 | background: rgba(0, 0, 0, 0.2); }
294 |
295 | .reveal .progress span {
296 | background: #3b759e;
297 | -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
298 | -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
299 | transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
300 |
--------------------------------------------------------------------------------