├── .gitignore
├── img
├── favicon.png
├── gesture.jpg
├── saber-qr.png
├── weinre-demo.jpg
├── chrome-debug.jpg
├── firefox-debug.jpg
├── weinre-debug.jpg
├── weinre-server.jpg
├── devicePiexelRatio.jpg
├── goldensecond_mini.png
└── responsive-illustrations.png
├── lib
├── font
│ ├── league-gothic
│ │ ├── LICENSE
│ │ ├── league-gothic.eot
│ │ ├── league-gothic.ttf
│ │ ├── league-gothic.woff
│ │ └── league-gothic.css
│ └── source-sans-pro
│ │ ├── source-sans-pro-italic.eot
│ │ ├── source-sans-pro-italic.ttf
│ │ ├── source-sans-pro-italic.woff
│ │ ├── source-sans-pro-regular.eot
│ │ ├── source-sans-pro-regular.ttf
│ │ ├── source-sans-pro-regular.woff
│ │ ├── source-sans-pro-semibold.eot
│ │ ├── source-sans-pro-semibold.ttf
│ │ ├── source-sans-pro-semibold.woff
│ │ ├── source-sans-pro-semibolditalic.eot
│ │ ├── source-sans-pro-semibolditalic.ttf
│ │ ├── source-sans-pro-semibolditalic.woff
│ │ ├── source-sans-pro.css
│ │ └── LICENSE
├── js
│ ├── html5shiv.js
│ ├── classList.js
│ └── head.min.js
└── css
│ └── zenburn.css
├── plugin
├── markdown
│ ├── example.md
│ ├── example.html
│ ├── markdown.js
│ └── marked.js
├── multiplex
│ ├── client.js
│ ├── master.js
│ └── index.js
├── print-pdf
│ └── print-pdf.js
├── remotes
│ └── remotes.js
├── math
│ └── math.js
├── notes-server
│ ├── client.js
│ ├── index.js
│ └── notes.html
├── notes
│ ├── notes.js
│ └── notes.html
├── search
│ └── search.js
└── zoom-js
│ └── zoom.js
├── readme.md
├── css
├── theme
│ ├── README.md
│ ├── night.css
│ ├── serif.css
│ ├── moon.css
│ ├── solarized.css
│ ├── simple.css
│ ├── white.css
│ ├── black.css
│ ├── sky.css
│ ├── beige.css
│ ├── league.css
│ └── blood.css
└── print
│ ├── pdf.css
│ └── paper.css
└── index.md
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .idea
3 | *.scss
4 |
--------------------------------------------------------------------------------
/img/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junmer/mobile-dev-get-started/HEAD/img/favicon.png
--------------------------------------------------------------------------------
/img/gesture.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junmer/mobile-dev-get-started/HEAD/img/gesture.jpg
--------------------------------------------------------------------------------
/img/saber-qr.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junmer/mobile-dev-get-started/HEAD/img/saber-qr.png
--------------------------------------------------------------------------------
/img/weinre-demo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junmer/mobile-dev-get-started/HEAD/img/weinre-demo.jpg
--------------------------------------------------------------------------------
/img/chrome-debug.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junmer/mobile-dev-get-started/HEAD/img/chrome-debug.jpg
--------------------------------------------------------------------------------
/img/firefox-debug.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junmer/mobile-dev-get-started/HEAD/img/firefox-debug.jpg
--------------------------------------------------------------------------------
/img/weinre-debug.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junmer/mobile-dev-get-started/HEAD/img/weinre-debug.jpg
--------------------------------------------------------------------------------
/img/weinre-server.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junmer/mobile-dev-get-started/HEAD/img/weinre-server.jpg
--------------------------------------------------------------------------------
/img/devicePiexelRatio.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junmer/mobile-dev-get-started/HEAD/img/devicePiexelRatio.jpg
--------------------------------------------------------------------------------
/img/goldensecond_mini.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junmer/mobile-dev-get-started/HEAD/img/goldensecond_mini.png
--------------------------------------------------------------------------------
/img/responsive-illustrations.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junmer/mobile-dev-get-started/HEAD/img/responsive-illustrations.png
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/lib/font/league-gothic/league-gothic.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junmer/mobile-dev-get-started/HEAD/lib/font/league-gothic/league-gothic.eot
--------------------------------------------------------------------------------
/lib/font/league-gothic/league-gothic.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junmer/mobile-dev-get-started/HEAD/lib/font/league-gothic/league-gothic.ttf
--------------------------------------------------------------------------------
/lib/font/league-gothic/league-gothic.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junmer/mobile-dev-get-started/HEAD/lib/font/league-gothic/league-gothic.woff
--------------------------------------------------------------------------------
/lib/font/source-sans-pro/source-sans-pro-italic.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junmer/mobile-dev-get-started/HEAD/lib/font/source-sans-pro/source-sans-pro-italic.eot
--------------------------------------------------------------------------------
/lib/font/source-sans-pro/source-sans-pro-italic.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junmer/mobile-dev-get-started/HEAD/lib/font/source-sans-pro/source-sans-pro-italic.ttf
--------------------------------------------------------------------------------
/lib/font/source-sans-pro/source-sans-pro-italic.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junmer/mobile-dev-get-started/HEAD/lib/font/source-sans-pro/source-sans-pro-italic.woff
--------------------------------------------------------------------------------
/lib/font/source-sans-pro/source-sans-pro-regular.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junmer/mobile-dev-get-started/HEAD/lib/font/source-sans-pro/source-sans-pro-regular.eot
--------------------------------------------------------------------------------
/lib/font/source-sans-pro/source-sans-pro-regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junmer/mobile-dev-get-started/HEAD/lib/font/source-sans-pro/source-sans-pro-regular.ttf
--------------------------------------------------------------------------------
/lib/font/source-sans-pro/source-sans-pro-regular.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junmer/mobile-dev-get-started/HEAD/lib/font/source-sans-pro/source-sans-pro-regular.woff
--------------------------------------------------------------------------------
/lib/font/source-sans-pro/source-sans-pro-semibold.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junmer/mobile-dev-get-started/HEAD/lib/font/source-sans-pro/source-sans-pro-semibold.eot
--------------------------------------------------------------------------------
/lib/font/source-sans-pro/source-sans-pro-semibold.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junmer/mobile-dev-get-started/HEAD/lib/font/source-sans-pro/source-sans-pro-semibold.ttf
--------------------------------------------------------------------------------
/lib/font/source-sans-pro/source-sans-pro-semibold.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junmer/mobile-dev-get-started/HEAD/lib/font/source-sans-pro/source-sans-pro-semibold.woff
--------------------------------------------------------------------------------
/lib/font/source-sans-pro/source-sans-pro-semibolditalic.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junmer/mobile-dev-get-started/HEAD/lib/font/source-sans-pro/source-sans-pro-semibolditalic.eot
--------------------------------------------------------------------------------
/lib/font/source-sans-pro/source-sans-pro-semibolditalic.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junmer/mobile-dev-get-started/HEAD/lib/font/source-sans-pro/source-sans-pro-semibolditalic.ttf
--------------------------------------------------------------------------------
/lib/font/source-sans-pro/source-sans-pro-semibolditalic.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junmer/mobile-dev-get-started/HEAD/lib/font/source-sans-pro/source-sans-pro-semibolditalic.woff
--------------------------------------------------------------------------------
/lib/js/html5shiv.js:
--------------------------------------------------------------------------------
1 | document.createElement('header');
2 | document.createElement('nav');
3 | document.createElement('section');
4 | document.createElement('article');
5 | document.createElement('aside');
6 | document.createElement('footer');
7 | document.createElement('hgroup');
--------------------------------------------------------------------------------
/lib/font/league-gothic/league-gothic.css:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: 'League Gothic';
3 | src: url('league-gothic.eot');
4 | src: url('league-gothic.eot?#iefix') format('embedded-opentype'),
5 | url('league-gothic.woff') format('woff'),
6 | url('league-gothic.ttf') format('truetype');
7 |
8 | font-weight: normal;
9 | font-style: normal;
10 | }
--------------------------------------------------------------------------------
/plugin/markdown/example.md:
--------------------------------------------------------------------------------
1 | # Markdown Demo
2 |
3 |
4 |
5 | ## External 1.1
6 |
7 | Content 1.1
8 |
9 | Note: This will only appear in the speaker notes window.
10 |
11 |
12 | ## External 1.2
13 |
14 | Content 1.2
15 |
16 |
17 |
18 | ## External 2
19 |
20 | Content 2.1
21 |
22 |
23 |
24 | ## External 3.1
25 |
26 | Content 3.1
27 |
28 |
29 | ## External 3.2
30 |
31 | Content 3.2
32 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
1 | # 移动端快速开发指南
2 |
3 | > [markdown](index.md) , [reveal](http://junmer.github.io/mobile-dev-get-started)
4 |
5 | ## run
6 |
7 | ```
8 | $ npm i -g reveal-md
9 | $ reveal-md index.md
10 | ```
11 |
12 | ## build reveal
13 |
14 | ```
15 | $ npm install reveal.js
16 | $ cp -r node_modules/reveal.js/{js,css,lib,plugin} .
17 | $ wget http://localhost:1948/index.md -O index.html
18 | ```
19 |
20 | 替换路径
21 |
22 | ```
23 | $ cat index.html | sed \
24 | -e "s#'/lib/#'lib/#g" \
25 | -e "s#\"/lib/#\"lib/#g" \
26 | -e "s#\"/js/#\"js/#g" \
27 | -e "s#\"/css/#\"css/#g" \
28 | -e "s#'/plugin/#'plugin/#g" \
29 | -e "s#default.css#black.css#g" \
30 | > _index.html && mv _index.html index.html
31 |
32 | ```
33 |
--------------------------------------------------------------------------------
/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 | var slideWidth = system.args[3] ? system.args[3].split( 'x' )[0] : 960;
15 | var slideHeight = system.args[3] ? system.args[3].split( 'x' )[1] : 700;
16 |
17 | page.viewportSize = {
18 | width: slideWidth,
19 | height: slideHeight
20 | };
21 |
22 | // TODO
23 | // Something is wrong with these config values. An input
24 | // paper width of 1920px actually results in a 756px wide
25 | // PDF.
26 | page.paperSize = {
27 | width: Math.round( slideWidth * 2 ),
28 | height: Math.round( slideHeight * 2 ),
29 | border: 0
30 | };
31 |
32 | var inputFile = system.args[1] || 'index.html?print-pdf';
33 | var outputFile = system.args[2] || 'slides.pdf';
34 |
35 | if( outputFile.match( /\.pdf$/gi ) === null ) {
36 | outputFile += '.pdf';
37 | }
38 |
39 | console.log( 'Printing PDF (Paper size: '+ page.paperSize.width + 'x' + page.paperSize.height +')' );
40 |
41 | page.open( inputFile, function( status ) {
42 | window.setTimeout( function() {
43 | console.log( 'Printed succesfully' );
44 | page.render( outputFile );
45 | phantom.exit();
46 | }, 1000 );
47 | } );
48 |
49 |
--------------------------------------------------------------------------------
/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
4 | based on dark.css by Ivan Sagalaev
5 |
6 | */
7 |
8 | .hljs {
9 | display: block; padding: 0.5em;
10 | background: #3F3F3F;
11 | color: #DCDCDC;
12 | }
13 |
14 | .hljs-keyword,
15 | .hljs-tag,
16 | .css .hljs-class,
17 | .css .hljs-id,
18 | .lisp .hljs-title,
19 | .nginx .hljs-title,
20 | .hljs-request,
21 | .hljs-status,
22 | .clojure .hljs-attribute {
23 | color: #E3CEAB;
24 | }
25 |
26 | .django .hljs-template_tag,
27 | .django .hljs-variable,
28 | .django .hljs-filter .hljs-argument {
29 | color: #DCDCDC;
30 | }
31 |
32 | .hljs-number,
33 | .hljs-date {
34 | color: #8CD0D3;
35 | }
36 |
37 | .dos .hljs-envvar,
38 | .dos .hljs-stream,
39 | .hljs-variable,
40 | .apache .hljs-sqbracket {
41 | color: #EFDCBC;
42 | }
43 |
44 | .dos .hljs-flow,
45 | .diff .hljs-change,
46 | .python .exception,
47 | .python .hljs-built_in,
48 | .hljs-literal,
49 | .tex .hljs-special {
50 | color: #EFEFAF;
51 | }
52 |
53 | .diff .hljs-chunk,
54 | .hljs-subst {
55 | color: #8F8F8F;
56 | }
57 |
58 | .dos .hljs-keyword,
59 | .python .hljs-decorator,
60 | .hljs-title,
61 | .haskell .hljs-type,
62 | .diff .hljs-header,
63 | .ruby .hljs-class .hljs-parent,
64 | .apache .hljs-tag,
65 | .nginx .hljs-built_in,
66 | .tex .hljs-command,
67 | .hljs-prompt {
68 | color: #efef8f;
69 | }
70 |
71 | .dos .hljs-winutils,
72 | .ruby .hljs-symbol,
73 | .ruby .hljs-symbol .hljs-string,
74 | .ruby .hljs-string {
75 | color: #DCA3A3;
76 | }
77 |
78 | .diff .hljs-deletion,
79 | .hljs-string,
80 | .hljs-tag .hljs-value,
81 | .hljs-preprocessor,
82 | .hljs-pragma,
83 | .hljs-built_in,
84 | .sql .hljs-aggregate,
85 | .hljs-javadoc,
86 | .smalltalk .hljs-class,
87 | .smalltalk .hljs-localvars,
88 | .smalltalk .hljs-array,
89 | .css .hljs-rules .hljs-value,
90 | .hljs-attr_selector,
91 | .hljs-pseudo,
92 | .apache .hljs-cbracket,
93 | .tex .hljs-formula,
94 | .coffeescript .hljs-attribute {
95 | color: #CC9393;
96 | }
97 |
98 | .hljs-shebang,
99 | .diff .hljs-addition,
100 | .hljs-comment,
101 | .java .hljs-annotation,
102 | .hljs-template_comment,
103 | .hljs-pi,
104 | .hljs-doctype {
105 | color: #7F9F7F;
106 | }
107 |
108 | .coffeescript .javascript,
109 | .javascript .xml,
110 | .tex .hljs-formula,
111 | .xml .javascript,
112 | .xml .vbscript,
113 | .xml .css,
114 | .xml .hljs-cdata {
115 | opacity: 0.5;
116 | }
117 |
118 |
--------------------------------------------------------------------------------
/lib/js/head.min.js:
--------------------------------------------------------------------------------
1 | /**
2 | Head JS The only script in your
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* {
154 | position: relative;
155 | z-index: 1;
156 | }
157 |
158 |
--------------------------------------------------------------------------------
/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() {
15 | var jsFileLocation = document.querySelector('script[src$="notes.js"]').src; // this js file path
16 | jsFileLocation = jsFileLocation.replace(/notes\.js(\?.*)?$/, ''); // the js folder path
17 | var notesPopup = window.open( jsFileLocation + 'notes.html', 'reveal.js - Notes', 'width=1100,height=700' );
18 |
19 | /**
20 | * Connect to the notes window through a postmessage handshake.
21 | * Using postmessage enables us to work in situations where the
22 | * origins differ, such as a presentation being opened from the
23 | * file system.
24 | */
25 | function connect() {
26 | // Keep trying to connect until we get a 'connected' message back
27 | var connectInterval = setInterval( function() {
28 | notesPopup.postMessage( JSON.stringify( {
29 | namespace: 'reveal-notes',
30 | type: 'connect',
31 | url: window.location.protocol + '//' + window.location.host + window.location.pathname,
32 | state: Reveal.getState()
33 | } ), '*' );
34 | }, 500 );
35 |
36 | window.addEventListener( 'message', function( event ) {
37 | var data = JSON.parse( event.data );
38 | if( data && data.namespace === 'reveal-notes' && data.type === 'connected' ) {
39 | clearInterval( connectInterval );
40 | onConnected();
41 | }
42 | } );
43 | }
44 |
45 | /**
46 | * Posts the current slide data to the notes window
47 | */
48 | function post() {
49 |
50 | var slideElement = Reveal.getCurrentSlide(),
51 | notesElement = slideElement.querySelector( 'aside.notes' );
52 |
53 | var messageData = {
54 | namespace: 'reveal-notes',
55 | type: 'state',
56 | notes: '',
57 | markdown: false,
58 | state: Reveal.getState()
59 | };
60 |
61 | // Look for notes defined in a slide attribute
62 | if( slideElement.hasAttribute( 'data-notes' ) ) {
63 | messageData.notes = slideElement.getAttribute( 'data-notes' );
64 | }
65 |
66 | // Look for notes defined in an aside element
67 | if( notesElement ) {
68 | messageData.notes = notesElement.innerHTML;
69 | messageData.markdown = typeof notesElement.getAttribute( 'data-markdown' ) === 'string';
70 | }
71 |
72 | notesPopup.postMessage( JSON.stringify( messageData ), '*' );
73 |
74 | }
75 |
76 | /**
77 | * Called once we have established a connection to the notes
78 | * window.
79 | */
80 | function onConnected() {
81 |
82 | // Monitor events that trigger a change in state
83 | Reveal.addEventListener( 'slidechanged', post );
84 | Reveal.addEventListener( 'fragmentshown', post );
85 | Reveal.addEventListener( 'fragmenthidden', post );
86 | Reveal.addEventListener( 'overviewhidden', post );
87 | Reveal.addEventListener( 'overviewshown', post );
88 | Reveal.addEventListener( 'paused', post );
89 | Reveal.addEventListener( 'resumed', post );
90 |
91 | // Post the initial state
92 | post();
93 |
94 | }
95 |
96 | connect();
97 | }
98 |
99 | if( !/receiver/i.test( window.location.search ) ) {
100 |
101 | // If the there's a 'notes' query set, open directly
102 | if( window.location.search.match( /(\?|\&)notes/gi ) !== null ) {
103 | openNotes();
104 | }
105 |
106 | // Open the notes when the 's' key is hit
107 | document.addEventListener( 'keydown', function( event ) {
108 | // Disregard the event if the target is editable or a
109 | // modifier is present
110 | if ( document.querySelector( ':focus' ) !== null || event.shiftKey || event.altKey || event.ctrlKey || event.metaKey ) return;
111 |
112 | if( event.keyCode === 83 ) {
113 | event.preventDefault();
114 | openNotes();
115 | }
116 | }, false );
117 |
118 | }
119 |
120 | return { open: openNotes };
121 |
122 | })();
123 |
--------------------------------------------------------------------------------
/lib/font/source-sans-pro/LICENSE:
--------------------------------------------------------------------------------
1 | SIL Open Font License
2 |
3 | Copyright 2010, 2012 Adobe Systems Incorporated (http://www.adobe.com/), with Reserved Font Name ‘Source’. All Rights Reserved. Source is a trademark of Adobe Systems Incorporated in the United States and/or other countries.
4 |
5 | This Font Software is licensed under the SIL Open Font License, Version 1.1.
6 | This license is copied below, and is also available with a FAQ at: http://scripts.sil.org/OFL
7 |
8 | —————————————————————————————-
9 | SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
10 | —————————————————————————————-
11 |
12 | PREAMBLE
13 | The goals of the Open Font License (OFL) are to stimulate worldwide development of collaborative font projects, to support the font creation efforts of academic and linguistic communities, and to provide a free and open framework in which fonts may be shared and improved in partnership with others.
14 |
15 | The OFL allows the licensed fonts to be used, studied, modified and redistributed freely as long as they are not sold by themselves. The fonts, including any derivative works, can be bundled, embedded, redistributed and/or sold with any software provided that any reserved names are not used by derivative works. The fonts and derivatives, however, cannot be released under any other type of license. The requirement for fonts to remain under this license does not apply to any document created using the fonts or their derivatives.
16 |
17 | DEFINITIONS
18 | “Font Software” refers to the set of files released by the Copyright Holder(s) under this license and clearly marked as such. This may include source files, build scripts and documentation.
19 |
20 | “Reserved Font Name” refers to any names specified as such after the copyright statement(s).
21 |
22 | “Original Version” refers to the collection of Font Software components as distributed by the Copyright Holder(s).
23 |
24 | “Modified Version” refers to any derivative made by adding to, deleting, or substituting—in part or in whole—any of the components of the Original Version, by changing formats or by porting the Font Software to a new environment.
25 |
26 | “Author” refers to any designer, engineer, programmer, technical writer or other person who contributed to the Font Software.
27 |
28 | PERMISSION & CONDITIONS
29 | Permission is hereby granted, free of charge, to any person obtaining a copy of the Font Software, to use, study, copy, merge, embed, modify, redistribute, and sell modified and unmodified copies of the Font Software, subject to the following conditions:
30 |
31 | 1) Neither the Font Software nor any of its individual components, in Original or Modified Versions, may be sold by itself.
32 |
33 | 2) Original or Modified Versions of the Font Software may be bundled, redistributed and/or sold with any software, provided that each copy contains the above copyright notice and this license. These can be included either as stand-alone text files, human-readable headers or in the appropriate machine-readable metadata fields within text or binary files as long as those fields can be easily viewed by the user.
34 |
35 | 3) No Modified Version of the Font Software may use the Reserved Font Name(s) unless explicit written permission is granted by the corresponding Copyright Holder. This restriction only applies to the primary font name as presented to the users.
36 |
37 | 4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font Software shall not be used to promote, endorse or advertise any Modified Version, except to acknowledge the contribution(s) of the Copyright Holder(s) and the Author(s) or with their explicit written permission.
38 |
39 | 5) The Font Software, modified or unmodified, in part or in whole, must be distributed entirely under this license, and must not be distributed under any other license. The requirement for fonts to remain under this license does not apply to any document created using the Font Software.
40 |
41 | TERMINATION
42 | This license becomes null and void if any of the above conditions are not met.
43 |
44 | DISCLAIMER
45 | THE FONT SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM OTHER DEALINGS IN THE FONT SOFTWARE.
--------------------------------------------------------------------------------
/plugin/markdown/example.html:
--------------------------------------------------------------------------------
1 |
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 |
25 |
37 |
38 |
39 |
55 |
56 |
57 |
70 |
71 |
72 |
78 |
79 |
80 |
87 |
88 |
89 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |
108 |
127 |
128 |
129 |
130 |
--------------------------------------------------------------------------------
/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 | display: none !important;
43 | }
44 |
45 | /* SECTION 3: Set body font face, size, and color.
46 | Consider using a serif font for readability. */
47 | body, p, td, li, div {
48 | font-size: 20pt!important;
49 | font-family: Georgia, "Times New Roman", Times, serif !important;
50 | color: #000;
51 | }
52 |
53 | /* SECTION 4: Set heading font face, sizes, and color.
54 | Differentiate your headings from your body text.
55 | Perhaps use a large sans-serif for distinction. */
56 | h1,h2,h3,h4,h5,h6 {
57 | color: #000!important;
58 | height: auto;
59 | line-height: normal;
60 | font-family: Georgia, "Times New Roman", Times, serif !important;
61 | text-shadow: 0 0 0 #000 !important;
62 | text-align: left;
63 | letter-spacing: normal;
64 | }
65 | /* Need to reduce the size of the fonts for printing */
66 | h1 { font-size: 28pt !important; }
67 | h2 { font-size: 24pt !important; }
68 | h3 { font-size: 22pt !important; }
69 | h4 { font-size: 22pt !important; font-variant: small-caps; }
70 | h5 { font-size: 21pt !important; }
71 | h6 { font-size: 20pt !important; font-style: italic; }
72 |
73 | /* SECTION 5: Make hyperlinks more usable.
74 | Ensure links are underlined, and consider appending
75 | the URL to the end of the link for usability. */
76 | a:link,
77 | a:visited {
78 | color: #000 !important;
79 | font-weight: bold;
80 | text-decoration: underline;
81 | }
82 | /*
83 | .reveal a:link:after,
84 | .reveal a:visited:after {
85 | content: " (" attr(href) ") ";
86 | color: #222 !important;
87 | font-size: 90%;
88 | }
89 | */
90 |
91 |
92 | /* SECTION 6: more reveal.js specific additions by @skypanther */
93 | ul, ol, div, p {
94 | visibility: visible;
95 | position: static;
96 | width: auto;
97 | height: auto;
98 | display: block;
99 | overflow: visible;
100 | margin: 0;
101 | text-align: left !important;
102 | }
103 | .reveal pre,
104 | .reveal table {
105 | margin-left: 0;
106 | margin-right: 0;
107 | }
108 | .reveal pre code {
109 | padding: 20px;
110 | border: 1px solid #ddd;
111 | }
112 | .reveal blockquote {
113 | margin: 20px 0;
114 | }
115 | .reveal .slides {
116 | position: static !important;
117 | width: auto !important;
118 | height: auto !important;
119 |
120 | left: 0 !important;
121 | top: 0 !important;
122 | margin-left: 0 !important;
123 | margin-top: 0 !important;
124 | padding: 0 !important;
125 | zoom: 1 !important;
126 |
127 | overflow: visible !important;
128 | display: block !important;
129 |
130 | text-align: left !important;
131 | -webkit-perspective: none;
132 | -moz-perspective: none;
133 | -ms-perspective: none;
134 | perspective: none;
135 |
136 | -webkit-perspective-origin: 50% 50%;
137 | -moz-perspective-origin: 50% 50%;
138 | -ms-perspective-origin: 50% 50%;
139 | perspective-origin: 50% 50%;
140 | }
141 | .reveal .slides section {
142 | visibility: visible !important;
143 | position: static !important;
144 | width: 100% !important;
145 | height: auto !important;
146 | display: block !important;
147 | overflow: visible !important;
148 |
149 | left: 0 !important;
150 | top: 0 !important;
151 | margin-left: 0 !important;
152 | margin-top: 0 !important;
153 | padding: 60px 20px !important;
154 | z-index: auto !important;
155 |
156 | opacity: 1 !important;
157 |
158 | page-break-after: always !important;
159 |
160 | -webkit-transform-style: flat !important;
161 | -moz-transform-style: flat !important;
162 | -ms-transform-style: flat !important;
163 | transform-style: flat !important;
164 |
165 | -webkit-transform: none !important;
166 | -moz-transform: none !important;
167 | -ms-transform: none !important;
168 | transform: none !important;
169 |
170 | -webkit-transition: none !important;
171 | -moz-transition: none !important;
172 | -ms-transition: none !important;
173 | transition: none !important;
174 | }
175 | .reveal .slides section.stack {
176 | padding: 0 !important;
177 | }
178 | .reveal section:last-of-type {
179 | page-break-after: avoid !important;
180 | }
181 | .reveal section .fragment {
182 | opacity: 1 !important;
183 | visibility: visible !important;
184 |
185 | -webkit-transform: none !important;
186 | -moz-transform: none !important;
187 | -ms-transform: none !important;
188 | transform: none !important;
189 | }
190 | .reveal section img {
191 | display: block;
192 | margin: 15px 0px;
193 | background: rgba(255,255,255,1);
194 | border: 1px solid #666;
195 | box-shadow: none;
196 | }
197 |
198 | .reveal section small {
199 | font-size: 0.8em;
200 | }
201 |
202 | }
--------------------------------------------------------------------------------
/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: #111;
13 | background-color: #111; }
14 |
15 | .reveal {
16 | font-family: 'Open Sans', sans-serif;
17 | font-size: 30px;
18 | font-weight: normal;
19 | color: #eee; }
20 |
21 | ::selection {
22 | color: #fff;
23 | background: #e7ad52;
24 | text-shadow: none; }
25 |
26 | .reveal .slides > section, .reveal .slides > section > section {
27 | line-height: 1.3;
28 | font-weight: inherit; }
29 |
30 | /*********************************************
31 | * HEADERS
32 | *********************************************/
33 | .reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 {
34 | margin: 0 0 20px 0;
35 | color: #eee;
36 | font-family: 'Montserrat', Impact, sans-serif;
37 | font-weight: normal;
38 | line-height: 1.2;
39 | letter-spacing: -0.03em;
40 | text-transform: none;
41 | text-shadow: none;
42 | word-wrap: break-word; }
43 |
44 | .reveal h1 {
45 | font-size: 3.77em; }
46 |
47 | .reveal h2 {
48 | font-size: 2.11em; }
49 |
50 | .reveal h3 {
51 | font-size: 1.55em; }
52 |
53 | .reveal h4 {
54 | font-size: 1em; }
55 |
56 | .reveal h1 {
57 | text-shadow: none; }
58 |
59 | /*********************************************
60 | * OTHER
61 | *********************************************/
62 | .reveal p {
63 | margin: 20px 0;
64 | line-height: 1.3; }
65 |
66 | /* Ensure certain elements are never larger than the slide itself */
67 | .reveal img, .reveal video, .reveal iframe {
68 | max-width: 95%;
69 | max-height: 95%; }
70 |
71 | .reveal strong, .reveal b {
72 | font-weight: bold; }
73 |
74 | .reveal em {
75 | font-style: italic; }
76 |
77 | .reveal ol, .reveal dl, .reveal ul {
78 | display: inline-block;
79 | text-align: left;
80 | margin: 0 0 0 1em; }
81 |
82 | .reveal ol {
83 | list-style-type: decimal; }
84 |
85 | .reveal ul {
86 | list-style-type: disc; }
87 |
88 | .reveal ul ul {
89 | list-style-type: square; }
90 |
91 | .reveal ul ul ul {
92 | list-style-type: circle; }
93 |
94 | .reveal ul ul, .reveal ul ol, .reveal ol ol, .reveal ol ul {
95 | display: block;
96 | margin-left: 40px; }
97 |
98 | .reveal dt {
99 | font-weight: bold; }
100 |
101 | .reveal dd {
102 | margin-left: 40px; }
103 |
104 | .reveal q, .reveal blockquote {
105 | quotes: none; }
106 |
107 | .reveal blockquote {
108 | display: block;
109 | position: relative;
110 | width: 70%;
111 | margin: 20px auto;
112 | padding: 5px;
113 | font-style: italic;
114 | background: rgba(255, 255, 255, 0.05);
115 | box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); }
116 |
117 | .reveal blockquote p:first-child, .reveal blockquote p:last-child {
118 | display: inline-block; }
119 |
120 | .reveal q {
121 | font-style: italic; }
122 |
123 | .reveal pre {
124 | display: block;
125 | position: relative;
126 | width: 90%;
127 | margin: 20px auto;
128 | text-align: left;
129 | font-size: 0.55em;
130 | font-family: monospace;
131 | line-height: 1.2em;
132 | word-wrap: break-word;
133 | box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }
134 |
135 | .reveal code {
136 | font-family: monospace; }
137 |
138 | .reveal pre code {
139 | display: block;
140 | padding: 5px;
141 | overflow: auto;
142 | max-height: 400px;
143 | word-wrap: normal;
144 | background: #3F3F3F;
145 | color: #DCDCDC; }
146 |
147 | .reveal table {
148 | margin: auto;
149 | border-collapse: collapse;
150 | border-spacing: 0; }
151 |
152 | .reveal table th {
153 | font-weight: bold; }
154 |
155 | .reveal table th, .reveal table td {
156 | text-align: left;
157 | padding: 0.2em 0.5em 0.2em 0.5em;
158 | border-bottom: 1px solid; }
159 |
160 | .reveal table tr:last-child td {
161 | border-bottom: none; }
162 |
163 | .reveal sup {
164 | vertical-align: super; }
165 |
166 | .reveal sub {
167 | vertical-align: sub; }
168 |
169 | .reveal small {
170 | display: inline-block;
171 | font-size: 0.6em;
172 | line-height: 1.2em;
173 | vertical-align: top; }
174 |
175 | .reveal small * {
176 | vertical-align: top; }
177 |
178 | /*********************************************
179 | * LINKS
180 | *********************************************/
181 | .reveal a {
182 | color: #e7ad52;
183 | text-decoration: none;
184 | -webkit-transition: color 0.15s ease;
185 | -moz-transition: color 0.15s ease;
186 | transition: color 0.15s ease; }
187 |
188 | .reveal a:hover {
189 | color: #f3d7ac;
190 | text-shadow: none;
191 | border: none; }
192 |
193 | .reveal .roll span:after {
194 | color: #fff;
195 | background: #d0881d; }
196 |
197 | /*********************************************
198 | * IMAGES
199 | *********************************************/
200 | .reveal section img {
201 | margin: 15px 0px;
202 | background: rgba(255, 255, 255, 0.12);
203 | border: 4px solid #eee;
204 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
205 |
206 | .reveal a img {
207 | -webkit-transition: all 0.15s linear;
208 | -moz-transition: all 0.15s linear;
209 | transition: all 0.15s linear; }
210 |
211 | .reveal a:hover img {
212 | background: rgba(255, 255, 255, 0.2);
213 | border-color: #e7ad52;
214 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
215 |
216 | /*********************************************
217 | * NAVIGATION CONTROLS
218 | *********************************************/
219 | .reveal .controls div.navigate-left, .reveal .controls div.navigate-left.enabled {
220 | border-right-color: #e7ad52; }
221 |
222 | .reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled {
223 | border-left-color: #e7ad52; }
224 |
225 | .reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled {
226 | border-bottom-color: #e7ad52; }
227 |
228 | .reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled {
229 | border-top-color: #e7ad52; }
230 |
231 | .reveal .controls div.navigate-left.enabled:hover {
232 | border-right-color: #f3d7ac; }
233 |
234 | .reveal .controls div.navigate-right.enabled:hover {
235 | border-left-color: #f3d7ac; }
236 |
237 | .reveal .controls div.navigate-up.enabled:hover {
238 | border-bottom-color: #f3d7ac; }
239 |
240 | .reveal .controls div.navigate-down.enabled:hover {
241 | border-top-color: #f3d7ac; }
242 |
243 | /*********************************************
244 | * PROGRESS BAR
245 | *********************************************/
246 | .reveal .progress {
247 | background: rgba(0, 0, 0, 0.2); }
248 |
249 | .reveal .progress span {
250 | background: #e7ad52;
251 | -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
252 | -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
253 | transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
254 |
255 | /*********************************************
256 | * SLIDE NUMBER
257 | *********************************************/
258 | .reveal .slide-number {
259 | color: #e7ad52; }
260 |
--------------------------------------------------------------------------------
/css/theme/serif.css:
--------------------------------------------------------------------------------
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 | .reveal a {
8 | line-height: 1.3em; }
9 |
10 | /*********************************************
11 | * GLOBAL STYLES
12 | *********************************************/
13 | body {
14 | background: #F0F1EB;
15 | background-color: #F0F1EB; }
16 |
17 | .reveal {
18 | font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif;
19 | font-size: 36px;
20 | font-weight: normal;
21 | color: #000; }
22 |
23 | ::selection {
24 | color: #fff;
25 | background: #26351C;
26 | text-shadow: none; }
27 |
28 | .reveal .slides > section, .reveal .slides > section > section {
29 | line-height: 1.3;
30 | font-weight: inherit; }
31 |
32 | /*********************************************
33 | * HEADERS
34 | *********************************************/
35 | .reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 {
36 | margin: 0 0 20px 0;
37 | color: #383D3D;
38 | font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif;
39 | font-weight: normal;
40 | line-height: 1.2;
41 | letter-spacing: normal;
42 | text-transform: none;
43 | text-shadow: none;
44 | word-wrap: break-word; }
45 |
46 | .reveal h1 {
47 | font-size: 3.77em; }
48 |
49 | .reveal h2 {
50 | font-size: 2.11em; }
51 |
52 | .reveal h3 {
53 | font-size: 1.55em; }
54 |
55 | .reveal h4 {
56 | font-size: 1em; }
57 |
58 | .reveal h1 {
59 | text-shadow: none; }
60 |
61 | /*********************************************
62 | * OTHER
63 | *********************************************/
64 | .reveal p {
65 | margin: 20px 0;
66 | line-height: 1.3; }
67 |
68 | /* Ensure certain elements are never larger than the slide itself */
69 | .reveal img, .reveal video, .reveal iframe {
70 | max-width: 95%;
71 | max-height: 95%; }
72 |
73 | .reveal strong, .reveal b {
74 | font-weight: bold; }
75 |
76 | .reveal em {
77 | font-style: italic; }
78 |
79 | .reveal ol, .reveal dl, .reveal ul {
80 | display: inline-block;
81 | text-align: left;
82 | margin: 0 0 0 1em; }
83 |
84 | .reveal ol {
85 | list-style-type: decimal; }
86 |
87 | .reveal ul {
88 | list-style-type: disc; }
89 |
90 | .reveal ul ul {
91 | list-style-type: square; }
92 |
93 | .reveal ul ul ul {
94 | list-style-type: circle; }
95 |
96 | .reveal ul ul, .reveal ul ol, .reveal ol ol, .reveal ol ul {
97 | display: block;
98 | margin-left: 40px; }
99 |
100 | .reveal dt {
101 | font-weight: bold; }
102 |
103 | .reveal dd {
104 | margin-left: 40px; }
105 |
106 | .reveal q, .reveal blockquote {
107 | quotes: none; }
108 |
109 | .reveal blockquote {
110 | display: block;
111 | position: relative;
112 | width: 70%;
113 | margin: 20px auto;
114 | padding: 5px;
115 | font-style: italic;
116 | background: rgba(255, 255, 255, 0.05);
117 | box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); }
118 |
119 | .reveal blockquote p:first-child, .reveal blockquote p:last-child {
120 | display: inline-block; }
121 |
122 | .reveal q {
123 | font-style: italic; }
124 |
125 | .reveal pre {
126 | display: block;
127 | position: relative;
128 | width: 90%;
129 | margin: 20px auto;
130 | text-align: left;
131 | font-size: 0.55em;
132 | font-family: monospace;
133 | line-height: 1.2em;
134 | word-wrap: break-word;
135 | box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }
136 |
137 | .reveal code {
138 | font-family: monospace; }
139 |
140 | .reveal pre code {
141 | display: block;
142 | padding: 5px;
143 | overflow: auto;
144 | max-height: 400px;
145 | word-wrap: normal;
146 | background: #3F3F3F;
147 | color: #DCDCDC; }
148 |
149 | .reveal table {
150 | margin: auto;
151 | border-collapse: collapse;
152 | border-spacing: 0; }
153 |
154 | .reveal table th {
155 | font-weight: bold; }
156 |
157 | .reveal table th, .reveal table td {
158 | text-align: left;
159 | padding: 0.2em 0.5em 0.2em 0.5em;
160 | border-bottom: 1px solid; }
161 |
162 | .reveal table tr:last-child td {
163 | border-bottom: none; }
164 |
165 | .reveal sup {
166 | vertical-align: super; }
167 |
168 | .reveal sub {
169 | vertical-align: sub; }
170 |
171 | .reveal small {
172 | display: inline-block;
173 | font-size: 0.6em;
174 | line-height: 1.2em;
175 | vertical-align: top; }
176 |
177 | .reveal small * {
178 | vertical-align: top; }
179 |
180 | /*********************************************
181 | * LINKS
182 | *********************************************/
183 | .reveal a {
184 | color: #51483D;
185 | text-decoration: none;
186 | -webkit-transition: color 0.15s ease;
187 | -moz-transition: color 0.15s ease;
188 | transition: color 0.15s ease; }
189 |
190 | .reveal a:hover {
191 | color: #8b7b69;
192 | text-shadow: none;
193 | border: none; }
194 |
195 | .reveal .roll span:after {
196 | color: #fff;
197 | background: #25211c; }
198 |
199 | /*********************************************
200 | * IMAGES
201 | *********************************************/
202 | .reveal section img {
203 | margin: 15px 0px;
204 | background: rgba(255, 255, 255, 0.12);
205 | border: 4px solid #000;
206 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
207 |
208 | .reveal a img {
209 | -webkit-transition: all 0.15s linear;
210 | -moz-transition: all 0.15s linear;
211 | transition: all 0.15s linear; }
212 |
213 | .reveal a:hover img {
214 | background: rgba(255, 255, 255, 0.2);
215 | border-color: #51483D;
216 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
217 |
218 | /*********************************************
219 | * NAVIGATION CONTROLS
220 | *********************************************/
221 | .reveal .controls div.navigate-left, .reveal .controls div.navigate-left.enabled {
222 | border-right-color: #51483D; }
223 |
224 | .reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled {
225 | border-left-color: #51483D; }
226 |
227 | .reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled {
228 | border-bottom-color: #51483D; }
229 |
230 | .reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled {
231 | border-top-color: #51483D; }
232 |
233 | .reveal .controls div.navigate-left.enabled:hover {
234 | border-right-color: #8b7b69; }
235 |
236 | .reveal .controls div.navigate-right.enabled:hover {
237 | border-left-color: #8b7b69; }
238 |
239 | .reveal .controls div.navigate-up.enabled:hover {
240 | border-bottom-color: #8b7b69; }
241 |
242 | .reveal .controls div.navigate-down.enabled:hover {
243 | border-top-color: #8b7b69; }
244 |
245 | /*********************************************
246 | * PROGRESS BAR
247 | *********************************************/
248 | .reveal .progress {
249 | background: rgba(0, 0, 0, 0.2); }
250 |
251 | .reveal .progress span {
252 | background: #51483D;
253 | -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
254 | -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
255 | transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
256 |
257 | /*********************************************
258 | * SLIDE NUMBER
259 | *********************************************/
260 | .reveal .slide-number {
261 | color: #51483D; }
262 |
--------------------------------------------------------------------------------
/css/theme/moon.css:
--------------------------------------------------------------------------------
1 | @import url(../../lib/font/league-gothic/league-gothic.css);
2 | @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
3 | /**
4 | * Solarized Dark theme for reveal.js.
5 | * Author: Achim Staebler
6 | */
7 | /**
8 | * Solarized colors by Ethan Schoonover
9 | */
10 | html * {
11 | color-profile: sRGB;
12 | rendering-intent: auto; }
13 |
14 | /*********************************************
15 | * GLOBAL STYLES
16 | *********************************************/
17 | body {
18 | background: #002b36;
19 | background-color: #002b36; }
20 |
21 | .reveal {
22 | font-family: 'Lato', sans-serif;
23 | font-size: 36px;
24 | font-weight: normal;
25 | color: #93a1a1; }
26 |
27 | ::selection {
28 | color: #fff;
29 | background: #d33682;
30 | text-shadow: none; }
31 |
32 | .reveal .slides > section, .reveal .slides > section > section {
33 | line-height: 1.3;
34 | font-weight: inherit; }
35 |
36 | /*********************************************
37 | * HEADERS
38 | *********************************************/
39 | .reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 {
40 | margin: 0 0 20px 0;
41 | color: #eee8d5;
42 | font-family: 'League Gothic', Impact, sans-serif;
43 | font-weight: normal;
44 | line-height: 1.2;
45 | letter-spacing: normal;
46 | text-transform: uppercase;
47 | text-shadow: none;
48 | word-wrap: break-word; }
49 |
50 | .reveal h1 {
51 | font-size: 3.77em; }
52 |
53 | .reveal h2 {
54 | font-size: 2.11em; }
55 |
56 | .reveal h3 {
57 | font-size: 1.55em; }
58 |
59 | .reveal h4 {
60 | font-size: 1em; }
61 |
62 | .reveal h1 {
63 | text-shadow: none; }
64 |
65 | /*********************************************
66 | * OTHER
67 | *********************************************/
68 | .reveal p {
69 | margin: 20px 0;
70 | line-height: 1.3; }
71 |
72 | /* Ensure certain elements are never larger than the slide itself */
73 | .reveal img, .reveal video, .reveal iframe {
74 | max-width: 95%;
75 | max-height: 95%; }
76 |
77 | .reveal strong, .reveal b {
78 | font-weight: bold; }
79 |
80 | .reveal em {
81 | font-style: italic; }
82 |
83 | .reveal ol, .reveal dl, .reveal ul {
84 | display: inline-block;
85 | text-align: left;
86 | margin: 0 0 0 1em; }
87 |
88 | .reveal ol {
89 | list-style-type: decimal; }
90 |
91 | .reveal ul {
92 | list-style-type: disc; }
93 |
94 | .reveal ul ul {
95 | list-style-type: square; }
96 |
97 | .reveal ul ul ul {
98 | list-style-type: circle; }
99 |
100 | .reveal ul ul, .reveal ul ol, .reveal ol ol, .reveal ol ul {
101 | display: block;
102 | margin-left: 40px; }
103 |
104 | .reveal dt {
105 | font-weight: bold; }
106 |
107 | .reveal dd {
108 | margin-left: 40px; }
109 |
110 | .reveal q, .reveal blockquote {
111 | quotes: none; }
112 |
113 | .reveal blockquote {
114 | display: block;
115 | position: relative;
116 | width: 70%;
117 | margin: 20px auto;
118 | padding: 5px;
119 | font-style: italic;
120 | background: rgba(255, 255, 255, 0.05);
121 | box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); }
122 |
123 | .reveal blockquote p:first-child, .reveal blockquote p:last-child {
124 | display: inline-block; }
125 |
126 | .reveal q {
127 | font-style: italic; }
128 |
129 | .reveal pre {
130 | display: block;
131 | position: relative;
132 | width: 90%;
133 | margin: 20px auto;
134 | text-align: left;
135 | font-size: 0.55em;
136 | font-family: monospace;
137 | line-height: 1.2em;
138 | word-wrap: break-word;
139 | box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }
140 |
141 | .reveal code {
142 | font-family: monospace; }
143 |
144 | .reveal pre code {
145 | display: block;
146 | padding: 5px;
147 | overflow: auto;
148 | max-height: 400px;
149 | word-wrap: normal;
150 | background: #3F3F3F;
151 | color: #DCDCDC; }
152 |
153 | .reveal table {
154 | margin: auto;
155 | border-collapse: collapse;
156 | border-spacing: 0; }
157 |
158 | .reveal table th {
159 | font-weight: bold; }
160 |
161 | .reveal table th, .reveal table td {
162 | text-align: left;
163 | padding: 0.2em 0.5em 0.2em 0.5em;
164 | border-bottom: 1px solid; }
165 |
166 | .reveal table tr:last-child td {
167 | border-bottom: none; }
168 |
169 | .reveal sup {
170 | vertical-align: super; }
171 |
172 | .reveal sub {
173 | vertical-align: sub; }
174 |
175 | .reveal small {
176 | display: inline-block;
177 | font-size: 0.6em;
178 | line-height: 1.2em;
179 | vertical-align: top; }
180 |
181 | .reveal small * {
182 | vertical-align: top; }
183 |
184 | /*********************************************
185 | * LINKS
186 | *********************************************/
187 | .reveal a {
188 | color: #268bd2;
189 | text-decoration: none;
190 | -webkit-transition: color 0.15s ease;
191 | -moz-transition: color 0.15s ease;
192 | transition: color 0.15s ease; }
193 |
194 | .reveal a:hover {
195 | color: #78bae6;
196 | text-shadow: none;
197 | border: none; }
198 |
199 | .reveal .roll span:after {
200 | color: #fff;
201 | background: #1a6291; }
202 |
203 | /*********************************************
204 | * IMAGES
205 | *********************************************/
206 | .reveal section img {
207 | margin: 15px 0px;
208 | background: rgba(255, 255, 255, 0.12);
209 | border: 4px solid #93a1a1;
210 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
211 |
212 | .reveal a img {
213 | -webkit-transition: all 0.15s linear;
214 | -moz-transition: all 0.15s linear;
215 | transition: all 0.15s linear; }
216 |
217 | .reveal a:hover img {
218 | background: rgba(255, 255, 255, 0.2);
219 | border-color: #268bd2;
220 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
221 |
222 | /*********************************************
223 | * NAVIGATION CONTROLS
224 | *********************************************/
225 | .reveal .controls div.navigate-left, .reveal .controls div.navigate-left.enabled {
226 | border-right-color: #268bd2; }
227 |
228 | .reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled {
229 | border-left-color: #268bd2; }
230 |
231 | .reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled {
232 | border-bottom-color: #268bd2; }
233 |
234 | .reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled {
235 | border-top-color: #268bd2; }
236 |
237 | .reveal .controls div.navigate-left.enabled:hover {
238 | border-right-color: #78bae6; }
239 |
240 | .reveal .controls div.navigate-right.enabled:hover {
241 | border-left-color: #78bae6; }
242 |
243 | .reveal .controls div.navigate-up.enabled:hover {
244 | border-bottom-color: #78bae6; }
245 |
246 | .reveal .controls div.navigate-down.enabled:hover {
247 | border-top-color: #78bae6; }
248 |
249 | /*********************************************
250 | * PROGRESS BAR
251 | *********************************************/
252 | .reveal .progress {
253 | background: rgba(0, 0, 0, 0.2); }
254 |
255 | .reveal .progress span {
256 | background: #268bd2;
257 | -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
258 | -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
259 | transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
260 |
261 | /*********************************************
262 | * SLIDE NUMBER
263 | *********************************************/
264 | .reveal .slide-number {
265 | color: #268bd2; }
266 |
--------------------------------------------------------------------------------
/css/theme/solarized.css:
--------------------------------------------------------------------------------
1 | @import url(../../lib/font/league-gothic/league-gothic.css);
2 | @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
3 | /**
4 | * Solarized Light theme for reveal.js.
5 | * Author: Achim Staebler
6 | */
7 | /**
8 | * Solarized colors by Ethan Schoonover
9 | */
10 | html * {
11 | color-profile: sRGB;
12 | rendering-intent: auto; }
13 |
14 | /*********************************************
15 | * GLOBAL STYLES
16 | *********************************************/
17 | body {
18 | background: #fdf6e3;
19 | background-color: #fdf6e3; }
20 |
21 | .reveal {
22 | font-family: 'Lato', sans-serif;
23 | font-size: 36px;
24 | font-weight: normal;
25 | color: #657b83; }
26 |
27 | ::selection {
28 | color: #fff;
29 | background: #d33682;
30 | text-shadow: none; }
31 |
32 | .reveal .slides > section, .reveal .slides > section > section {
33 | line-height: 1.3;
34 | font-weight: inherit; }
35 |
36 | /*********************************************
37 | * HEADERS
38 | *********************************************/
39 | .reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 {
40 | margin: 0 0 20px 0;
41 | color: #586e75;
42 | font-family: 'League Gothic', Impact, sans-serif;
43 | font-weight: normal;
44 | line-height: 1.2;
45 | letter-spacing: normal;
46 | text-transform: uppercase;
47 | text-shadow: none;
48 | word-wrap: break-word; }
49 |
50 | .reveal h1 {
51 | font-size: 3.77em; }
52 |
53 | .reveal h2 {
54 | font-size: 2.11em; }
55 |
56 | .reveal h3 {
57 | font-size: 1.55em; }
58 |
59 | .reveal h4 {
60 | font-size: 1em; }
61 |
62 | .reveal h1 {
63 | text-shadow: none; }
64 |
65 | /*********************************************
66 | * OTHER
67 | *********************************************/
68 | .reveal p {
69 | margin: 20px 0;
70 | line-height: 1.3; }
71 |
72 | /* Ensure certain elements are never larger than the slide itself */
73 | .reveal img, .reveal video, .reveal iframe {
74 | max-width: 95%;
75 | max-height: 95%; }
76 |
77 | .reveal strong, .reveal b {
78 | font-weight: bold; }
79 |
80 | .reveal em {
81 | font-style: italic; }
82 |
83 | .reveal ol, .reveal dl, .reveal ul {
84 | display: inline-block;
85 | text-align: left;
86 | margin: 0 0 0 1em; }
87 |
88 | .reveal ol {
89 | list-style-type: decimal; }
90 |
91 | .reveal ul {
92 | list-style-type: disc; }
93 |
94 | .reveal ul ul {
95 | list-style-type: square; }
96 |
97 | .reveal ul ul ul {
98 | list-style-type: circle; }
99 |
100 | .reveal ul ul, .reveal ul ol, .reveal ol ol, .reveal ol ul {
101 | display: block;
102 | margin-left: 40px; }
103 |
104 | .reveal dt {
105 | font-weight: bold; }
106 |
107 | .reveal dd {
108 | margin-left: 40px; }
109 |
110 | .reveal q, .reveal blockquote {
111 | quotes: none; }
112 |
113 | .reveal blockquote {
114 | display: block;
115 | position: relative;
116 | width: 70%;
117 | margin: 20px auto;
118 | padding: 5px;
119 | font-style: italic;
120 | background: rgba(255, 255, 255, 0.05);
121 | box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); }
122 |
123 | .reveal blockquote p:first-child, .reveal blockquote p:last-child {
124 | display: inline-block; }
125 |
126 | .reveal q {
127 | font-style: italic; }
128 |
129 | .reveal pre {
130 | display: block;
131 | position: relative;
132 | width: 90%;
133 | margin: 20px auto;
134 | text-align: left;
135 | font-size: 0.55em;
136 | font-family: monospace;
137 | line-height: 1.2em;
138 | word-wrap: break-word;
139 | box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }
140 |
141 | .reveal code {
142 | font-family: monospace; }
143 |
144 | .reveal pre code {
145 | display: block;
146 | padding: 5px;
147 | overflow: auto;
148 | max-height: 400px;
149 | word-wrap: normal;
150 | background: #3F3F3F;
151 | color: #DCDCDC; }
152 |
153 | .reveal table {
154 | margin: auto;
155 | border-collapse: collapse;
156 | border-spacing: 0; }
157 |
158 | .reveal table th {
159 | font-weight: bold; }
160 |
161 | .reveal table th, .reveal table td {
162 | text-align: left;
163 | padding: 0.2em 0.5em 0.2em 0.5em;
164 | border-bottom: 1px solid; }
165 |
166 | .reveal table tr:last-child td {
167 | border-bottom: none; }
168 |
169 | .reveal sup {
170 | vertical-align: super; }
171 |
172 | .reveal sub {
173 | vertical-align: sub; }
174 |
175 | .reveal small {
176 | display: inline-block;
177 | font-size: 0.6em;
178 | line-height: 1.2em;
179 | vertical-align: top; }
180 |
181 | .reveal small * {
182 | vertical-align: top; }
183 |
184 | /*********************************************
185 | * LINKS
186 | *********************************************/
187 | .reveal a {
188 | color: #268bd2;
189 | text-decoration: none;
190 | -webkit-transition: color 0.15s ease;
191 | -moz-transition: color 0.15s ease;
192 | transition: color 0.15s ease; }
193 |
194 | .reveal a:hover {
195 | color: #78bae6;
196 | text-shadow: none;
197 | border: none; }
198 |
199 | .reveal .roll span:after {
200 | color: #fff;
201 | background: #1a6291; }
202 |
203 | /*********************************************
204 | * IMAGES
205 | *********************************************/
206 | .reveal section img {
207 | margin: 15px 0px;
208 | background: rgba(255, 255, 255, 0.12);
209 | border: 4px solid #657b83;
210 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
211 |
212 | .reveal a img {
213 | -webkit-transition: all 0.15s linear;
214 | -moz-transition: all 0.15s linear;
215 | transition: all 0.15s linear; }
216 |
217 | .reveal a:hover img {
218 | background: rgba(255, 255, 255, 0.2);
219 | border-color: #268bd2;
220 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
221 |
222 | /*********************************************
223 | * NAVIGATION CONTROLS
224 | *********************************************/
225 | .reveal .controls div.navigate-left, .reveal .controls div.navigate-left.enabled {
226 | border-right-color: #268bd2; }
227 |
228 | .reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled {
229 | border-left-color: #268bd2; }
230 |
231 | .reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled {
232 | border-bottom-color: #268bd2; }
233 |
234 | .reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled {
235 | border-top-color: #268bd2; }
236 |
237 | .reveal .controls div.navigate-left.enabled:hover {
238 | border-right-color: #78bae6; }
239 |
240 | .reveal .controls div.navigate-right.enabled:hover {
241 | border-left-color: #78bae6; }
242 |
243 | .reveal .controls div.navigate-up.enabled:hover {
244 | border-bottom-color: #78bae6; }
245 |
246 | .reveal .controls div.navigate-down.enabled:hover {
247 | border-top-color: #78bae6; }
248 |
249 | /*********************************************
250 | * PROGRESS BAR
251 | *********************************************/
252 | .reveal .progress {
253 | background: rgba(0, 0, 0, 0.2); }
254 |
255 | .reveal .progress span {
256 | background: #268bd2;
257 | -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
258 | -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
259 | transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
260 |
261 | /*********************************************
262 | * SLIDE NUMBER
263 | *********************************************/
264 | .reveal .slide-number {
265 | color: #268bd2; }
266 |
--------------------------------------------------------------------------------
/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: #fff;
15 | background-color: #fff; }
16 |
17 | .reveal {
18 | font-family: 'Lato', sans-serif;
19 | font-size: 36px;
20 | font-weight: normal;
21 | color: #000; }
22 |
23 | ::selection {
24 | color: #fff;
25 | background: rgba(0, 0, 0, 0.99);
26 | text-shadow: none; }
27 |
28 | .reveal .slides > section, .reveal .slides > section > section {
29 | line-height: 1.3;
30 | font-weight: inherit; }
31 |
32 | /*********************************************
33 | * HEADERS
34 | *********************************************/
35 | .reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 {
36 | margin: 0 0 20px 0;
37 | color: #000;
38 | font-family: 'News Cycle', Impact, sans-serif;
39 | font-weight: normal;
40 | line-height: 1.2;
41 | letter-spacing: normal;
42 | text-transform: none;
43 | text-shadow: none;
44 | word-wrap: break-word; }
45 |
46 | .reveal h1 {
47 | font-size: 3.77em; }
48 |
49 | .reveal h2 {
50 | font-size: 2.11em; }
51 |
52 | .reveal h3 {
53 | font-size: 1.55em; }
54 |
55 | .reveal h4 {
56 | font-size: 1em; }
57 |
58 | .reveal h1 {
59 | text-shadow: none; }
60 |
61 | /*********************************************
62 | * OTHER
63 | *********************************************/
64 | .reveal p {
65 | margin: 20px 0;
66 | line-height: 1.3; }
67 |
68 | /* Ensure certain elements are never larger than the slide itself */
69 | .reveal img, .reveal video, .reveal iframe {
70 | max-width: 95%;
71 | max-height: 95%; }
72 |
73 | .reveal strong, .reveal b {
74 | font-weight: bold; }
75 |
76 | .reveal em {
77 | font-style: italic; }
78 |
79 | .reveal ol, .reveal dl, .reveal ul {
80 | display: inline-block;
81 | text-align: left;
82 | margin: 0 0 0 1em; }
83 |
84 | .reveal ol {
85 | list-style-type: decimal; }
86 |
87 | .reveal ul {
88 | list-style-type: disc; }
89 |
90 | .reveal ul ul {
91 | list-style-type: square; }
92 |
93 | .reveal ul ul ul {
94 | list-style-type: circle; }
95 |
96 | .reveal ul ul, .reveal ul ol, .reveal ol ol, .reveal ol ul {
97 | display: block;
98 | margin-left: 40px; }
99 |
100 | .reveal dt {
101 | font-weight: bold; }
102 |
103 | .reveal dd {
104 | margin-left: 40px; }
105 |
106 | .reveal q, .reveal blockquote {
107 | quotes: none; }
108 |
109 | .reveal blockquote {
110 | display: block;
111 | position: relative;
112 | width: 70%;
113 | margin: 20px auto;
114 | padding: 5px;
115 | font-style: italic;
116 | background: rgba(255, 255, 255, 0.05);
117 | box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); }
118 |
119 | .reveal blockquote p:first-child, .reveal blockquote p:last-child {
120 | display: inline-block; }
121 |
122 | .reveal q {
123 | font-style: italic; }
124 |
125 | .reveal pre {
126 | display: block;
127 | position: relative;
128 | width: 90%;
129 | margin: 20px auto;
130 | text-align: left;
131 | font-size: 0.55em;
132 | font-family: monospace;
133 | line-height: 1.2em;
134 | word-wrap: break-word;
135 | box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }
136 |
137 | .reveal code {
138 | font-family: monospace; }
139 |
140 | .reveal pre code {
141 | display: block;
142 | padding: 5px;
143 | overflow: auto;
144 | max-height: 400px;
145 | word-wrap: normal;
146 | background: #3F3F3F;
147 | color: #DCDCDC; }
148 |
149 | .reveal table {
150 | margin: auto;
151 | border-collapse: collapse;
152 | border-spacing: 0; }
153 |
154 | .reveal table th {
155 | font-weight: bold; }
156 |
157 | .reveal table th, .reveal table td {
158 | text-align: left;
159 | padding: 0.2em 0.5em 0.2em 0.5em;
160 | border-bottom: 1px solid; }
161 |
162 | .reveal table tr:last-child td {
163 | border-bottom: none; }
164 |
165 | .reveal sup {
166 | vertical-align: super; }
167 |
168 | .reveal sub {
169 | vertical-align: sub; }
170 |
171 | .reveal small {
172 | display: inline-block;
173 | font-size: 0.6em;
174 | line-height: 1.2em;
175 | vertical-align: top; }
176 |
177 | .reveal small * {
178 | vertical-align: top; }
179 |
180 | /*********************************************
181 | * LINKS
182 | *********************************************/
183 | .reveal a {
184 | color: #00008B;
185 | text-decoration: none;
186 | -webkit-transition: color 0.15s ease;
187 | -moz-transition: color 0.15s ease;
188 | transition: color 0.15s ease; }
189 |
190 | .reveal a:hover {
191 | color: #0000f1;
192 | text-shadow: none;
193 | border: none; }
194 |
195 | .reveal .roll span:after {
196 | color: #fff;
197 | background: #00003f; }
198 |
199 | /*********************************************
200 | * IMAGES
201 | *********************************************/
202 | .reveal section img {
203 | margin: 15px 0px;
204 | background: rgba(255, 255, 255, 0.12);
205 | border: 4px solid #000;
206 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
207 |
208 | .reveal a img {
209 | -webkit-transition: all 0.15s linear;
210 | -moz-transition: all 0.15s linear;
211 | transition: all 0.15s linear; }
212 |
213 | .reveal a:hover img {
214 | background: rgba(255, 255, 255, 0.2);
215 | border-color: #00008B;
216 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
217 |
218 | /*********************************************
219 | * NAVIGATION CONTROLS
220 | *********************************************/
221 | .reveal .controls div.navigate-left, .reveal .controls div.navigate-left.enabled {
222 | border-right-color: #00008B; }
223 |
224 | .reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled {
225 | border-left-color: #00008B; }
226 |
227 | .reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled {
228 | border-bottom-color: #00008B; }
229 |
230 | .reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled {
231 | border-top-color: #00008B; }
232 |
233 | .reveal .controls div.navigate-left.enabled:hover {
234 | border-right-color: #0000f1; }
235 |
236 | .reveal .controls div.navigate-right.enabled:hover {
237 | border-left-color: #0000f1; }
238 |
239 | .reveal .controls div.navigate-up.enabled:hover {
240 | border-bottom-color: #0000f1; }
241 |
242 | .reveal .controls div.navigate-down.enabled:hover {
243 | border-top-color: #0000f1; }
244 |
245 | /*********************************************
246 | * PROGRESS BAR
247 | *********************************************/
248 | .reveal .progress {
249 | background: rgba(0, 0, 0, 0.2); }
250 |
251 | .reveal .progress span {
252 | background: #00008B;
253 | -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
254 | -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
255 | transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
256 |
257 | /*********************************************
258 | * SLIDE NUMBER
259 | *********************************************/
260 | .reveal .slide-number {
261 | color: #00008B; }
262 |
--------------------------------------------------------------------------------
/css/theme/white.css:
--------------------------------------------------------------------------------
1 | @import url(../../lib/font/source-sans-pro/source-sans-pro.css);
2 | /**
3 | * White theme for reveal.js. This is the opposite of the 'black' theme.
4 | *
5 | * Copyright (C) 2015 Hakim El Hattab, http://hakim.se
6 | */
7 | section.has-dark-background, section.has-dark-background h1, section.has-dark-background h2, section.has-dark-background h3, section.has-dark-background h4, section.has-dark-background h5, section.has-dark-background h6 {
8 | color: #fff; }
9 |
10 | /*********************************************
11 | * GLOBAL STYLES
12 | *********************************************/
13 | body {
14 | background: #fff;
15 | background-color: #fff; }
16 |
17 | .reveal {
18 | font-family: 'Source Sans Pro', Helvetica, sans-serif;
19 | font-size: 38px;
20 | font-weight: normal;
21 | color: #222; }
22 |
23 | ::selection {
24 | color: #fff;
25 | background: #98bdef;
26 | text-shadow: none; }
27 |
28 | .reveal .slides > section, .reveal .slides > section > section {
29 | line-height: 1.3;
30 | font-weight: inherit; }
31 |
32 | /*********************************************
33 | * HEADERS
34 | *********************************************/
35 | .reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 {
36 | margin: 0 0 20px 0;
37 | color: #222;
38 | font-family: 'Source Sans Pro', Helvetica, sans-serif;
39 | font-weight: 600;
40 | line-height: 1.2;
41 | letter-spacing: normal;
42 | text-transform: uppercase;
43 | text-shadow: none;
44 | word-wrap: break-word; }
45 |
46 | .reveal h1 {
47 | font-size: 2.5em; }
48 |
49 | .reveal h2 {
50 | font-size: 1.6em; }
51 |
52 | .reveal h3 {
53 | font-size: 1.3em; }
54 |
55 | .reveal h4 {
56 | font-size: 1em; }
57 |
58 | .reveal h1 {
59 | text-shadow: none; }
60 |
61 | /*********************************************
62 | * OTHER
63 | *********************************************/
64 | .reveal p {
65 | margin: 20px 0;
66 | line-height: 1.3; }
67 |
68 | /* Ensure certain elements are never larger than the slide itself */
69 | .reveal img, .reveal video, .reveal iframe {
70 | max-width: 95%;
71 | max-height: 95%; }
72 |
73 | .reveal strong, .reveal b {
74 | font-weight: bold; }
75 |
76 | .reveal em {
77 | font-style: italic; }
78 |
79 | .reveal ol, .reveal dl, .reveal ul {
80 | display: inline-block;
81 | text-align: left;
82 | margin: 0 0 0 1em; }
83 |
84 | .reveal ol {
85 | list-style-type: decimal; }
86 |
87 | .reveal ul {
88 | list-style-type: disc; }
89 |
90 | .reveal ul ul {
91 | list-style-type: square; }
92 |
93 | .reveal ul ul ul {
94 | list-style-type: circle; }
95 |
96 | .reveal ul ul, .reveal ul ol, .reveal ol ol, .reveal ol ul {
97 | display: block;
98 | margin-left: 40px; }
99 |
100 | .reveal dt {
101 | font-weight: bold; }
102 |
103 | .reveal dd {
104 | margin-left: 40px; }
105 |
106 | .reveal q, .reveal blockquote {
107 | quotes: none; }
108 |
109 | .reveal blockquote {
110 | display: block;
111 | position: relative;
112 | width: 70%;
113 | margin: 20px auto;
114 | padding: 5px;
115 | font-style: italic;
116 | background: rgba(255, 255, 255, 0.05);
117 | box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); }
118 |
119 | .reveal blockquote p:first-child, .reveal blockquote p:last-child {
120 | display: inline-block; }
121 |
122 | .reveal q {
123 | font-style: italic; }
124 |
125 | .reveal pre {
126 | display: block;
127 | position: relative;
128 | width: 90%;
129 | margin: 20px auto;
130 | text-align: left;
131 | font-size: 0.55em;
132 | font-family: monospace;
133 | line-height: 1.2em;
134 | word-wrap: break-word;
135 | box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }
136 |
137 | .reveal code {
138 | font-family: monospace; }
139 |
140 | .reveal pre code {
141 | display: block;
142 | padding: 5px;
143 | overflow: auto;
144 | max-height: 400px;
145 | word-wrap: normal;
146 | background: #3F3F3F;
147 | color: #DCDCDC; }
148 |
149 | .reveal table {
150 | margin: auto;
151 | border-collapse: collapse;
152 | border-spacing: 0; }
153 |
154 | .reveal table th {
155 | font-weight: bold; }
156 |
157 | .reveal table th, .reveal table td {
158 | text-align: left;
159 | padding: 0.2em 0.5em 0.2em 0.5em;
160 | border-bottom: 1px solid; }
161 |
162 | .reveal table tr:last-child td {
163 | border-bottom: none; }
164 |
165 | .reveal sup {
166 | vertical-align: super; }
167 |
168 | .reveal sub {
169 | vertical-align: sub; }
170 |
171 | .reveal small {
172 | display: inline-block;
173 | font-size: 0.6em;
174 | line-height: 1.2em;
175 | vertical-align: top; }
176 |
177 | .reveal small * {
178 | vertical-align: top; }
179 |
180 | /*********************************************
181 | * LINKS
182 | *********************************************/
183 | .reveal a {
184 | color: #2a76dd;
185 | text-decoration: none;
186 | -webkit-transition: color 0.15s ease;
187 | -moz-transition: color 0.15s ease;
188 | transition: color 0.15s ease; }
189 |
190 | .reveal a:hover {
191 | color: #6ca2e8;
192 | text-shadow: none;
193 | border: none; }
194 |
195 | .reveal .roll span:after {
196 | color: #fff;
197 | background: #1a54a1; }
198 |
199 | /*********************************************
200 | * IMAGES
201 | *********************************************/
202 | .reveal section img {
203 | margin: 15px 0px;
204 | background: rgba(255, 255, 255, 0.12);
205 | border: 4px solid #222;
206 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
207 |
208 | .reveal a img {
209 | -webkit-transition: all 0.15s linear;
210 | -moz-transition: all 0.15s linear;
211 | transition: all 0.15s linear; }
212 |
213 | .reveal a:hover img {
214 | background: rgba(255, 255, 255, 0.2);
215 | border-color: #2a76dd;
216 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
217 |
218 | /*********************************************
219 | * NAVIGATION CONTROLS
220 | *********************************************/
221 | .reveal .controls div.navigate-left, .reveal .controls div.navigate-left.enabled {
222 | border-right-color: #2a76dd; }
223 |
224 | .reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled {
225 | border-left-color: #2a76dd; }
226 |
227 | .reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled {
228 | border-bottom-color: #2a76dd; }
229 |
230 | .reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled {
231 | border-top-color: #2a76dd; }
232 |
233 | .reveal .controls div.navigate-left.enabled:hover {
234 | border-right-color: #6ca2e8; }
235 |
236 | .reveal .controls div.navigate-right.enabled:hover {
237 | border-left-color: #6ca2e8; }
238 |
239 | .reveal .controls div.navigate-up.enabled:hover {
240 | border-bottom-color: #6ca2e8; }
241 |
242 | .reveal .controls div.navigate-down.enabled:hover {
243 | border-top-color: #6ca2e8; }
244 |
245 | /*********************************************
246 | * PROGRESS BAR
247 | *********************************************/
248 | .reveal .progress {
249 | background: rgba(0, 0, 0, 0.2); }
250 |
251 | .reveal .progress span {
252 | background: #2a76dd;
253 | -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
254 | -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
255 | transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
256 |
257 | /*********************************************
258 | * SLIDE NUMBER
259 | *********************************************/
260 | .reveal .slide-number {
261 | color: #2a76dd; }
262 |
--------------------------------------------------------------------------------
/css/theme/black.css:
--------------------------------------------------------------------------------
1 | @import url(../../lib/font/source-sans-pro/source-sans-pro.css);
2 | /**
3 | * Black theme for reveal.js. This is the opposite of the 'white' theme.
4 | *
5 | * Copyright (C) 2015 Hakim El Hattab, http://hakim.se
6 | */
7 | section.has-light-background, section.has-light-background h1, section.has-light-background h2, section.has-light-background h3, section.has-light-background h4, section.has-light-background h5, section.has-light-background h6 {
8 | color: #222; }
9 |
10 | /*********************************************
11 | * GLOBAL STYLES
12 | *********************************************/
13 | body {
14 | background: #222;
15 | background-color: #222; }
16 |
17 | .reveal {
18 | font-family: 'Source Sans Pro', Helvetica, sans-serif;
19 | font-size: 38px;
20 | font-weight: normal;
21 | color: #fff; }
22 |
23 | ::selection {
24 | color: #fff;
25 | background: #bee4fd;
26 | text-shadow: none; }
27 |
28 | .reveal .slides > section, .reveal .slides > section > section {
29 | line-height: 1.3;
30 | font-weight: inherit; }
31 |
32 | /*********************************************
33 | * HEADERS
34 | *********************************************/
35 | .reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 {
36 | margin: 0 0 20px 0;
37 | color: #fff;
38 | font-family: 'Source Sans Pro', Helvetica, sans-serif;
39 | font-weight: 600;
40 | line-height: 1.2;
41 | letter-spacing: normal;
42 | text-transform: uppercase;
43 | text-shadow: none;
44 | word-wrap: break-word; }
45 |
46 | .reveal h1 {
47 | font-size: 2.5em; }
48 |
49 | .reveal h2 {
50 | font-size: 1.6em; }
51 |
52 | .reveal h3 {
53 | font-size: 1.3em; }
54 |
55 | .reveal h4 {
56 | font-size: 1em; }
57 |
58 | .reveal h1 {
59 | text-shadow: none; }
60 |
61 | /*********************************************
62 | * OTHER
63 | *********************************************/
64 | .reveal p {
65 | margin: 20px 0;
66 | line-height: 1.3; }
67 |
68 | /* Ensure certain elements are never larger than the slide itself */
69 | .reveal img, .reveal video, .reveal iframe {
70 | max-width: 95%;
71 | max-height: 95%; }
72 |
73 | .reveal strong, .reveal b {
74 | font-weight: bold; }
75 |
76 | .reveal em {
77 | font-style: italic; }
78 |
79 | .reveal ol, .reveal dl, .reveal ul {
80 | display: inline-block;
81 | text-align: left;
82 | margin: 0 0 0 1em; }
83 |
84 | .reveal ol {
85 | list-style-type: decimal; }
86 |
87 | .reveal ul {
88 | list-style-type: disc; }
89 |
90 | .reveal ul ul {
91 | list-style-type: square; }
92 |
93 | .reveal ul ul ul {
94 | list-style-type: circle; }
95 |
96 | .reveal ul ul, .reveal ul ol, .reveal ol ol, .reveal ol ul {
97 | display: block;
98 | margin-left: 40px; }
99 |
100 | .reveal dt {
101 | font-weight: bold; }
102 |
103 | .reveal dd {
104 | margin-left: 40px; }
105 |
106 | .reveal q, .reveal blockquote {
107 | quotes: none; }
108 |
109 | .reveal blockquote {
110 | display: block;
111 | position: relative;
112 | width: 70%;
113 | margin: 20px auto;
114 | padding: 5px;
115 | font-style: italic;
116 | background: rgba(255, 255, 255, 0.05);
117 | box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); }
118 |
119 | .reveal blockquote p:first-child, .reveal blockquote p:last-child {
120 | display: inline-block; }
121 |
122 | .reveal q {
123 | font-style: italic; }
124 |
125 | .reveal pre {
126 | display: block;
127 | position: relative;
128 | width: 90%;
129 | margin: 20px auto;
130 | text-align: left;
131 | font-size: 0.55em;
132 | font-family: monospace;
133 | line-height: 1.2em;
134 | word-wrap: break-word;
135 | box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }
136 |
137 | .reveal code {
138 | font-family: monospace; }
139 |
140 | .reveal pre code {
141 | display: block;
142 | padding: 5px;
143 | overflow: auto;
144 | max-height: 400px;
145 | word-wrap: normal;
146 | background: #3F3F3F;
147 | color: #DCDCDC; }
148 |
149 | .reveal table {
150 | margin: auto;
151 | border-collapse: collapse;
152 | border-spacing: 0; }
153 |
154 | .reveal table th {
155 | font-weight: bold; }
156 |
157 | .reveal table th, .reveal table td {
158 | text-align: left;
159 | padding: 0.2em 0.5em 0.2em 0.5em;
160 | border-bottom: 1px solid; }
161 |
162 | .reveal table tr:last-child td {
163 | border-bottom: none; }
164 |
165 | .reveal sup {
166 | vertical-align: super; }
167 |
168 | .reveal sub {
169 | vertical-align: sub; }
170 |
171 | .reveal small {
172 | display: inline-block;
173 | font-size: 0.6em;
174 | line-height: 1.2em;
175 | vertical-align: top; }
176 |
177 | .reveal small * {
178 | vertical-align: top; }
179 |
180 | /*********************************************
181 | * LINKS
182 | *********************************************/
183 | .reveal a {
184 | color: #42affa;
185 | text-decoration: none;
186 | -webkit-transition: color 0.15s ease;
187 | -moz-transition: color 0.15s ease;
188 | transition: color 0.15s ease; }
189 |
190 | .reveal a:hover {
191 | color: #8dcffc;
192 | text-shadow: none;
193 | border: none; }
194 |
195 | .reveal .roll span:after {
196 | color: #fff;
197 | background: #068ee9; }
198 |
199 | /*********************************************
200 | * IMAGES
201 | *********************************************/
202 | .reveal section img {
203 | margin: 15px 0px;
204 | background: rgba(255, 255, 255, 0.12);
205 | border: 4px solid #fff;
206 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
207 |
208 | .reveal a img {
209 | -webkit-transition: all 0.15s linear;
210 | -moz-transition: all 0.15s linear;
211 | transition: all 0.15s linear; }
212 |
213 | .reveal a:hover img {
214 | background: rgba(255, 255, 255, 0.2);
215 | border-color: #42affa;
216 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
217 |
218 | /*********************************************
219 | * NAVIGATION CONTROLS
220 | *********************************************/
221 | .reveal .controls div.navigate-left, .reveal .controls div.navigate-left.enabled {
222 | border-right-color: #42affa; }
223 |
224 | .reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled {
225 | border-left-color: #42affa; }
226 |
227 | .reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled {
228 | border-bottom-color: #42affa; }
229 |
230 | .reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled {
231 | border-top-color: #42affa; }
232 |
233 | .reveal .controls div.navigate-left.enabled:hover {
234 | border-right-color: #8dcffc; }
235 |
236 | .reveal .controls div.navigate-right.enabled:hover {
237 | border-left-color: #8dcffc; }
238 |
239 | .reveal .controls div.navigate-up.enabled:hover {
240 | border-bottom-color: #8dcffc; }
241 |
242 | .reveal .controls div.navigate-down.enabled:hover {
243 | border-top-color: #8dcffc; }
244 |
245 | /*********************************************
246 | * PROGRESS BAR
247 | *********************************************/
248 | .reveal .progress {
249 | background: rgba(0, 0, 0, 0.2); }
250 |
251 | .reveal .progress span {
252 | background: #42affa;
253 | -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
254 | -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
255 | transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
256 |
257 | /*********************************************
258 | * SLIDE NUMBER
259 | *********************************************/
260 | .reveal .slide-number {
261 | color: #42affa; }
262 |
--------------------------------------------------------------------------------
/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 | .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: 36px;
27 | font-weight: normal;
28 | color: #333; }
29 |
30 | ::selection {
31 | color: #fff;
32 | background: #134674;
33 | text-shadow: none; }
34 |
35 | .reveal .slides > section, .reveal .slides > section > section {
36 | line-height: 1.3;
37 | font-weight: inherit; }
38 |
39 | /*********************************************
40 | * HEADERS
41 | *********************************************/
42 | .reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 {
43 | margin: 0 0 20px 0;
44 | color: #333;
45 | font-family: 'Quicksand', sans-serif;
46 | font-weight: normal;
47 | line-height: 1.2;
48 | letter-spacing: -0.08em;
49 | text-transform: uppercase;
50 | text-shadow: none;
51 | word-wrap: break-word; }
52 |
53 | .reveal h1 {
54 | font-size: 3.77em; }
55 |
56 | .reveal h2 {
57 | font-size: 2.11em; }
58 |
59 | .reveal h3 {
60 | font-size: 1.55em; }
61 |
62 | .reveal h4 {
63 | font-size: 1em; }
64 |
65 | .reveal h1 {
66 | text-shadow: none; }
67 |
68 | /*********************************************
69 | * OTHER
70 | *********************************************/
71 | .reveal p {
72 | margin: 20px 0;
73 | line-height: 1.3; }
74 |
75 | /* Ensure certain elements are never larger than the slide itself */
76 | .reveal img, .reveal video, .reveal iframe {
77 | max-width: 95%;
78 | max-height: 95%; }
79 |
80 | .reveal strong, .reveal b {
81 | font-weight: bold; }
82 |
83 | .reveal em {
84 | font-style: italic; }
85 |
86 | .reveal ol, .reveal dl, .reveal ul {
87 | display: inline-block;
88 | text-align: left;
89 | margin: 0 0 0 1em; }
90 |
91 | .reveal ol {
92 | list-style-type: decimal; }
93 |
94 | .reveal ul {
95 | list-style-type: disc; }
96 |
97 | .reveal ul ul {
98 | list-style-type: square; }
99 |
100 | .reveal ul ul ul {
101 | list-style-type: circle; }
102 |
103 | .reveal ul ul, .reveal ul ol, .reveal ol ol, .reveal ol ul {
104 | display: block;
105 | margin-left: 40px; }
106 |
107 | .reveal dt {
108 | font-weight: bold; }
109 |
110 | .reveal dd {
111 | margin-left: 40px; }
112 |
113 | .reveal q, .reveal blockquote {
114 | quotes: none; }
115 |
116 | .reveal blockquote {
117 | display: block;
118 | position: relative;
119 | width: 70%;
120 | margin: 20px auto;
121 | padding: 5px;
122 | font-style: italic;
123 | background: rgba(255, 255, 255, 0.05);
124 | box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); }
125 |
126 | .reveal blockquote p:first-child, .reveal blockquote p:last-child {
127 | display: inline-block; }
128 |
129 | .reveal q {
130 | font-style: italic; }
131 |
132 | .reveal pre {
133 | display: block;
134 | position: relative;
135 | width: 90%;
136 | margin: 20px auto;
137 | text-align: left;
138 | font-size: 0.55em;
139 | font-family: monospace;
140 | line-height: 1.2em;
141 | word-wrap: break-word;
142 | box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }
143 |
144 | .reveal code {
145 | font-family: monospace; }
146 |
147 | .reveal pre code {
148 | display: block;
149 | padding: 5px;
150 | overflow: auto;
151 | max-height: 400px;
152 | word-wrap: normal;
153 | background: #3F3F3F;
154 | color: #DCDCDC; }
155 |
156 | .reveal table {
157 | margin: auto;
158 | border-collapse: collapse;
159 | border-spacing: 0; }
160 |
161 | .reveal table th {
162 | font-weight: bold; }
163 |
164 | .reveal table th, .reveal table td {
165 | text-align: left;
166 | padding: 0.2em 0.5em 0.2em 0.5em;
167 | border-bottom: 1px solid; }
168 |
169 | .reveal table tr:last-child td {
170 | border-bottom: none; }
171 |
172 | .reveal sup {
173 | vertical-align: super; }
174 |
175 | .reveal sub {
176 | vertical-align: sub; }
177 |
178 | .reveal small {
179 | display: inline-block;
180 | font-size: 0.6em;
181 | line-height: 1.2em;
182 | vertical-align: top; }
183 |
184 | .reveal small * {
185 | vertical-align: top; }
186 |
187 | /*********************************************
188 | * LINKS
189 | *********************************************/
190 | .reveal a {
191 | color: #3b759e;
192 | text-decoration: none;
193 | -webkit-transition: color 0.15s ease;
194 | -moz-transition: color 0.15s ease;
195 | transition: color 0.15s ease; }
196 |
197 | .reveal a:hover {
198 | color: #74a8cb;
199 | text-shadow: none;
200 | border: none; }
201 |
202 | .reveal .roll span:after {
203 | color: #fff;
204 | background: #264d66; }
205 |
206 | /*********************************************
207 | * IMAGES
208 | *********************************************/
209 | .reveal section img {
210 | margin: 15px 0px;
211 | background: rgba(255, 255, 255, 0.12);
212 | border: 4px solid #333;
213 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
214 |
215 | .reveal a img {
216 | -webkit-transition: all 0.15s linear;
217 | -moz-transition: all 0.15s linear;
218 | transition: all 0.15s linear; }
219 |
220 | .reveal a:hover img {
221 | background: rgba(255, 255, 255, 0.2);
222 | border-color: #3b759e;
223 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
224 |
225 | /*********************************************
226 | * NAVIGATION CONTROLS
227 | *********************************************/
228 | .reveal .controls div.navigate-left, .reveal .controls div.navigate-left.enabled {
229 | border-right-color: #3b759e; }
230 |
231 | .reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled {
232 | border-left-color: #3b759e; }
233 |
234 | .reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled {
235 | border-bottom-color: #3b759e; }
236 |
237 | .reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled {
238 | border-top-color: #3b759e; }
239 |
240 | .reveal .controls div.navigate-left.enabled:hover {
241 | border-right-color: #74a8cb; }
242 |
243 | .reveal .controls div.navigate-right.enabled:hover {
244 | border-left-color: #74a8cb; }
245 |
246 | .reveal .controls div.navigate-up.enabled:hover {
247 | border-bottom-color: #74a8cb; }
248 |
249 | .reveal .controls div.navigate-down.enabled:hover {
250 | border-top-color: #74a8cb; }
251 |
252 | /*********************************************
253 | * PROGRESS BAR
254 | *********************************************/
255 | .reveal .progress {
256 | background: rgba(0, 0, 0, 0.2); }
257 |
258 | .reveal .progress span {
259 | background: #3b759e;
260 | -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
261 | -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
262 | transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
263 |
264 | /*********************************************
265 | * SLIDE NUMBER
266 | *********************************************/
267 | .reveal .slide-number {
268 | color: #3b759e; }
269 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/css/theme/beige.css:
--------------------------------------------------------------------------------
1 | @import url(../../lib/font/league-gothic/league-gothic.css);
2 | @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
3 | /**
4 | * Beige 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: #f7f2d3;
13 | background: -moz-radial-gradient(center, circle cover, #ffffff 0%, #f7f2d3 100%);
14 | background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #ffffff), color-stop(100%, #f7f2d3));
15 | background: -webkit-radial-gradient(center, circle cover, #ffffff 0%, #f7f2d3 100%);
16 | background: -o-radial-gradient(center, circle cover, #ffffff 0%, #f7f2d3 100%);
17 | background: -ms-radial-gradient(center, circle cover, #ffffff 0%, #f7f2d3 100%);
18 | background: radial-gradient(center, circle cover, #ffffff 0%, #f7f2d3 100%);
19 | background-color: #f7f3de; }
20 |
21 | .reveal {
22 | font-family: 'Lato', sans-serif;
23 | font-size: 36px;
24 | font-weight: normal;
25 | color: #333; }
26 |
27 | ::selection {
28 | color: #fff;
29 | background: rgba(79, 64, 28, 0.99);
30 | text-shadow: none; }
31 |
32 | .reveal .slides > section, .reveal .slides > section > section {
33 | line-height: 1.3;
34 | font-weight: inherit; }
35 |
36 | /*********************************************
37 | * HEADERS
38 | *********************************************/
39 | .reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 {
40 | margin: 0 0 20px 0;
41 | color: #333;
42 | font-family: 'League Gothic', Impact, sans-serif;
43 | font-weight: normal;
44 | line-height: 1.2;
45 | letter-spacing: normal;
46 | text-transform: uppercase;
47 | text-shadow: none;
48 | word-wrap: break-word; }
49 |
50 | .reveal h1 {
51 | font-size: 3.77em; }
52 |
53 | .reveal h2 {
54 | font-size: 2.11em; }
55 |
56 | .reveal h3 {
57 | font-size: 1.55em; }
58 |
59 | .reveal h4 {
60 | font-size: 1em; }
61 |
62 | .reveal h1 {
63 | text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 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); }
64 |
65 | /*********************************************
66 | * OTHER
67 | *********************************************/
68 | .reveal p {
69 | margin: 20px 0;
70 | line-height: 1.3; }
71 |
72 | /* Ensure certain elements are never larger than the slide itself */
73 | .reveal img, .reveal video, .reveal iframe {
74 | max-width: 95%;
75 | max-height: 95%; }
76 |
77 | .reveal strong, .reveal b {
78 | font-weight: bold; }
79 |
80 | .reveal em {
81 | font-style: italic; }
82 |
83 | .reveal ol, .reveal dl, .reveal ul {
84 | display: inline-block;
85 | text-align: left;
86 | margin: 0 0 0 1em; }
87 |
88 | .reveal ol {
89 | list-style-type: decimal; }
90 |
91 | .reveal ul {
92 | list-style-type: disc; }
93 |
94 | .reveal ul ul {
95 | list-style-type: square; }
96 |
97 | .reveal ul ul ul {
98 | list-style-type: circle; }
99 |
100 | .reveal ul ul, .reveal ul ol, .reveal ol ol, .reveal ol ul {
101 | display: block;
102 | margin-left: 40px; }
103 |
104 | .reveal dt {
105 | font-weight: bold; }
106 |
107 | .reveal dd {
108 | margin-left: 40px; }
109 |
110 | .reveal q, .reveal blockquote {
111 | quotes: none; }
112 |
113 | .reveal blockquote {
114 | display: block;
115 | position: relative;
116 | width: 70%;
117 | margin: 20px auto;
118 | padding: 5px;
119 | font-style: italic;
120 | background: rgba(255, 255, 255, 0.05);
121 | box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); }
122 |
123 | .reveal blockquote p:first-child, .reveal blockquote p:last-child {
124 | display: inline-block; }
125 |
126 | .reveal q {
127 | font-style: italic; }
128 |
129 | .reveal pre {
130 | display: block;
131 | position: relative;
132 | width: 90%;
133 | margin: 20px auto;
134 | text-align: left;
135 | font-size: 0.55em;
136 | font-family: monospace;
137 | line-height: 1.2em;
138 | word-wrap: break-word;
139 | box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }
140 |
141 | .reveal code {
142 | font-family: monospace; }
143 |
144 | .reveal pre code {
145 | display: block;
146 | padding: 5px;
147 | overflow: auto;
148 | max-height: 400px;
149 | word-wrap: normal;
150 | background: #3F3F3F;
151 | color: #DCDCDC; }
152 |
153 | .reveal table {
154 | margin: auto;
155 | border-collapse: collapse;
156 | border-spacing: 0; }
157 |
158 | .reveal table th {
159 | font-weight: bold; }
160 |
161 | .reveal table th, .reveal table td {
162 | text-align: left;
163 | padding: 0.2em 0.5em 0.2em 0.5em;
164 | border-bottom: 1px solid; }
165 |
166 | .reveal table tr:last-child td {
167 | border-bottom: none; }
168 |
169 | .reveal sup {
170 | vertical-align: super; }
171 |
172 | .reveal sub {
173 | vertical-align: sub; }
174 |
175 | .reveal small {
176 | display: inline-block;
177 | font-size: 0.6em;
178 | line-height: 1.2em;
179 | vertical-align: top; }
180 |
181 | .reveal small * {
182 | vertical-align: top; }
183 |
184 | /*********************************************
185 | * LINKS
186 | *********************************************/
187 | .reveal a {
188 | color: #8b743d;
189 | text-decoration: none;
190 | -webkit-transition: color 0.15s ease;
191 | -moz-transition: color 0.15s ease;
192 | transition: color 0.15s ease; }
193 |
194 | .reveal a:hover {
195 | color: #c0a76e;
196 | text-shadow: none;
197 | border: none; }
198 |
199 | .reveal .roll span:after {
200 | color: #fff;
201 | background: #564726; }
202 |
203 | /*********************************************
204 | * IMAGES
205 | *********************************************/
206 | .reveal section img {
207 | margin: 15px 0px;
208 | background: rgba(255, 255, 255, 0.12);
209 | border: 4px solid #333;
210 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
211 |
212 | .reveal a img {
213 | -webkit-transition: all 0.15s linear;
214 | -moz-transition: all 0.15s linear;
215 | transition: all 0.15s linear; }
216 |
217 | .reveal a:hover img {
218 | background: rgba(255, 255, 255, 0.2);
219 | border-color: #8b743d;
220 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
221 |
222 | /*********************************************
223 | * NAVIGATION CONTROLS
224 | *********************************************/
225 | .reveal .controls div.navigate-left, .reveal .controls div.navigate-left.enabled {
226 | border-right-color: #8b743d; }
227 |
228 | .reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled {
229 | border-left-color: #8b743d; }
230 |
231 | .reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled {
232 | border-bottom-color: #8b743d; }
233 |
234 | .reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled {
235 | border-top-color: #8b743d; }
236 |
237 | .reveal .controls div.navigate-left.enabled:hover {
238 | border-right-color: #c0a76e; }
239 |
240 | .reveal .controls div.navigate-right.enabled:hover {
241 | border-left-color: #c0a76e; }
242 |
243 | .reveal .controls div.navigate-up.enabled:hover {
244 | border-bottom-color: #c0a76e; }
245 |
246 | .reveal .controls div.navigate-down.enabled:hover {
247 | border-top-color: #c0a76e; }
248 |
249 | /*********************************************
250 | * PROGRESS BAR
251 | *********************************************/
252 | .reveal .progress {
253 | background: rgba(0, 0, 0, 0.2); }
254 |
255 | .reveal .progress span {
256 | background: #8b743d;
257 | -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
258 | -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
259 | transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
260 |
261 | /*********************************************
262 | * SLIDE NUMBER
263 | *********************************************/
264 | .reveal .slide-number {
265 | color: #8b743d; }
266 |
--------------------------------------------------------------------------------
/css/theme/league.css:
--------------------------------------------------------------------------------
1 | @import url(../../lib/font/league-gothic/league-gothic.css);
2 | @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
3 | /**
4 | * League theme for reveal.js.
5 | *
6 | * This was the default theme pre-3.0.0.
7 | *
8 | * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
9 | */
10 | /*********************************************
11 | * GLOBAL STYLES
12 | *********************************************/
13 | body {
14 | background: #1c1e20;
15 | background: -moz-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
16 | background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #555a5f), color-stop(100%, #1c1e20));
17 | background: -webkit-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
18 | background: -o-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
19 | background: -ms-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
20 | background: radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
21 | background-color: #2b2b2b; }
22 |
23 | .reveal {
24 | font-family: 'Lato', sans-serif;
25 | font-size: 36px;
26 | font-weight: normal;
27 | color: #eee; }
28 |
29 | ::selection {
30 | color: #fff;
31 | background: #FF5E99;
32 | text-shadow: none; }
33 |
34 | .reveal .slides > section, .reveal .slides > section > section {
35 | line-height: 1.3;
36 | font-weight: inherit; }
37 |
38 | /*********************************************
39 | * HEADERS
40 | *********************************************/
41 | .reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 {
42 | margin: 0 0 20px 0;
43 | color: #eee;
44 | font-family: 'League Gothic', Impact, sans-serif;
45 | font-weight: normal;
46 | line-height: 1.2;
47 | letter-spacing: normal;
48 | text-transform: uppercase;
49 | text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);
50 | word-wrap: break-word; }
51 |
52 | .reveal h1 {
53 | font-size: 3.77em; }
54 |
55 | .reveal h2 {
56 | font-size: 2.11em; }
57 |
58 | .reveal h3 {
59 | font-size: 1.55em; }
60 |
61 | .reveal h4 {
62 | font-size: 1em; }
63 |
64 | .reveal h1 {
65 | text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 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); }
66 |
67 | /*********************************************
68 | * OTHER
69 | *********************************************/
70 | .reveal p {
71 | margin: 20px 0;
72 | line-height: 1.3; }
73 |
74 | /* Ensure certain elements are never larger than the slide itself */
75 | .reveal img, .reveal video, .reveal iframe {
76 | max-width: 95%;
77 | max-height: 95%; }
78 |
79 | .reveal strong, .reveal b {
80 | font-weight: bold; }
81 |
82 | .reveal em {
83 | font-style: italic; }
84 |
85 | .reveal ol, .reveal dl, .reveal ul {
86 | display: inline-block;
87 | text-align: left;
88 | margin: 0 0 0 1em; }
89 |
90 | .reveal ol {
91 | list-style-type: decimal; }
92 |
93 | .reveal ul {
94 | list-style-type: disc; }
95 |
96 | .reveal ul ul {
97 | list-style-type: square; }
98 |
99 | .reveal ul ul ul {
100 | list-style-type: circle; }
101 |
102 | .reveal ul ul, .reveal ul ol, .reveal ol ol, .reveal ol ul {
103 | display: block;
104 | margin-left: 40px; }
105 |
106 | .reveal dt {
107 | font-weight: bold; }
108 |
109 | .reveal dd {
110 | margin-left: 40px; }
111 |
112 | .reveal q, .reveal blockquote {
113 | quotes: none; }
114 |
115 | .reveal blockquote {
116 | display: block;
117 | position: relative;
118 | width: 70%;
119 | margin: 20px auto;
120 | padding: 5px;
121 | font-style: italic;
122 | background: rgba(255, 255, 255, 0.05);
123 | box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); }
124 |
125 | .reveal blockquote p:first-child, .reveal blockquote p:last-child {
126 | display: inline-block; }
127 |
128 | .reveal q {
129 | font-style: italic; }
130 |
131 | .reveal pre {
132 | display: block;
133 | position: relative;
134 | width: 90%;
135 | margin: 20px auto;
136 | text-align: left;
137 | font-size: 0.55em;
138 | font-family: monospace;
139 | line-height: 1.2em;
140 | word-wrap: break-word;
141 | box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }
142 |
143 | .reveal code {
144 | font-family: monospace; }
145 |
146 | .reveal pre code {
147 | display: block;
148 | padding: 5px;
149 | overflow: auto;
150 | max-height: 400px;
151 | word-wrap: normal;
152 | background: #3F3F3F;
153 | color: #DCDCDC; }
154 |
155 | .reveal table {
156 | margin: auto;
157 | border-collapse: collapse;
158 | border-spacing: 0; }
159 |
160 | .reveal table th {
161 | font-weight: bold; }
162 |
163 | .reveal table th, .reveal table td {
164 | text-align: left;
165 | padding: 0.2em 0.5em 0.2em 0.5em;
166 | border-bottom: 1px solid; }
167 |
168 | .reveal table tr:last-child td {
169 | border-bottom: none; }
170 |
171 | .reveal sup {
172 | vertical-align: super; }
173 |
174 | .reveal sub {
175 | vertical-align: sub; }
176 |
177 | .reveal small {
178 | display: inline-block;
179 | font-size: 0.6em;
180 | line-height: 1.2em;
181 | vertical-align: top; }
182 |
183 | .reveal small * {
184 | vertical-align: top; }
185 |
186 | /*********************************************
187 | * LINKS
188 | *********************************************/
189 | .reveal a {
190 | color: #13DAEC;
191 | text-decoration: none;
192 | -webkit-transition: color 0.15s ease;
193 | -moz-transition: color 0.15s ease;
194 | transition: color 0.15s ease; }
195 |
196 | .reveal a:hover {
197 | color: #71ebf4;
198 | text-shadow: none;
199 | border: none; }
200 |
201 | .reveal .roll span:after {
202 | color: #fff;
203 | background: #0d9ba5; }
204 |
205 | /*********************************************
206 | * IMAGES
207 | *********************************************/
208 | .reveal section img {
209 | margin: 15px 0px;
210 | background: rgba(255, 255, 255, 0.12);
211 | border: 4px solid #eee;
212 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
213 |
214 | .reveal a img {
215 | -webkit-transition: all 0.15s linear;
216 | -moz-transition: all 0.15s linear;
217 | transition: all 0.15s linear; }
218 |
219 | .reveal a:hover img {
220 | background: rgba(255, 255, 255, 0.2);
221 | border-color: #13DAEC;
222 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
223 |
224 | /*********************************************
225 | * NAVIGATION CONTROLS
226 | *********************************************/
227 | .reveal .controls div.navigate-left, .reveal .controls div.navigate-left.enabled {
228 | border-right-color: #13DAEC; }
229 |
230 | .reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled {
231 | border-left-color: #13DAEC; }
232 |
233 | .reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled {
234 | border-bottom-color: #13DAEC; }
235 |
236 | .reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled {
237 | border-top-color: #13DAEC; }
238 |
239 | .reveal .controls div.navigate-left.enabled:hover {
240 | border-right-color: #71ebf4; }
241 |
242 | .reveal .controls div.navigate-right.enabled:hover {
243 | border-left-color: #71ebf4; }
244 |
245 | .reveal .controls div.navigate-up.enabled:hover {
246 | border-bottom-color: #71ebf4; }
247 |
248 | .reveal .controls div.navigate-down.enabled:hover {
249 | border-top-color: #71ebf4; }
250 |
251 | /*********************************************
252 | * PROGRESS BAR
253 | *********************************************/
254 | .reveal .progress {
255 | background: rgba(0, 0, 0, 0.2); }
256 |
257 | .reveal .progress span {
258 | background: #13DAEC;
259 | -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
260 | -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
261 | transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
262 |
263 | /*********************************************
264 | * SLIDE NUMBER
265 | *********************************************/
266 | .reveal .slide-number {
267 | color: #13DAEC; }
268 |
--------------------------------------------------------------------------------
/css/theme/blood.css:
--------------------------------------------------------------------------------
1 | @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,700,300italic,700italic);
2 | /**
3 | * Blood theme for reveal.js
4 | * Author: Walther http://github.com/Walther
5 | *
6 | * Designed to be used with highlight.js theme
7 | * "monokai_sublime.css" available from
8 | * https://github.com/isagalaev/highlight.js/
9 | *
10 | * For other themes, change $codeBackground accordingly.
11 | *
12 | */
13 | /*********************************************
14 | * GLOBAL STYLES
15 | *********************************************/
16 | body {
17 | background: #222;
18 | background: -moz-radial-gradient(center, circle cover, #626262 0%, #222 100%);
19 | background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #626262), color-stop(100%, #222));
20 | background: -webkit-radial-gradient(center, circle cover, #626262 0%, #222 100%);
21 | background: -o-radial-gradient(center, circle cover, #626262 0%, #222 100%);
22 | background: -ms-radial-gradient(center, circle cover, #626262 0%, #222 100%);
23 | background: radial-gradient(center, circle cover, #626262 0%, #222 100%);
24 | background-color: #2b2b2b; }
25 |
26 | .reveal {
27 | font-family: Ubuntu, 'sans-serif';
28 | font-size: 36px;
29 | font-weight: normal;
30 | color: #eee; }
31 |
32 | ::selection {
33 | color: #fff;
34 | background: #a23;
35 | text-shadow: none; }
36 |
37 | .reveal .slides > section, .reveal .slides > section > section {
38 | line-height: 1.3;
39 | font-weight: inherit; }
40 |
41 | /*********************************************
42 | * HEADERS
43 | *********************************************/
44 | .reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 {
45 | margin: 0 0 20px 0;
46 | color: #eee;
47 | font-family: Ubuntu, 'sans-serif';
48 | font-weight: normal;
49 | line-height: 1.2;
50 | letter-spacing: normal;
51 | text-transform: uppercase;
52 | text-shadow: 2px 2px 2px #222;
53 | word-wrap: break-word; }
54 |
55 | .reveal h1 {
56 | font-size: 3.77em; }
57 |
58 | .reveal h2 {
59 | font-size: 2.11em; }
60 |
61 | .reveal h3 {
62 | font-size: 1.55em; }
63 |
64 | .reveal h4 {
65 | font-size: 1em; }
66 |
67 | .reveal h1 {
68 | text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 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); }
69 |
70 | /*********************************************
71 | * OTHER
72 | *********************************************/
73 | .reveal p {
74 | margin: 20px 0;
75 | line-height: 1.3; }
76 |
77 | /* Ensure certain elements are never larger than the slide itself */
78 | .reveal img, .reveal video, .reveal iframe {
79 | max-width: 95%;
80 | max-height: 95%; }
81 |
82 | .reveal strong, .reveal b {
83 | font-weight: bold; }
84 |
85 | .reveal em {
86 | font-style: italic; }
87 |
88 | .reveal ol, .reveal dl, .reveal ul {
89 | display: inline-block;
90 | text-align: left;
91 | margin: 0 0 0 1em; }
92 |
93 | .reveal ol {
94 | list-style-type: decimal; }
95 |
96 | .reveal ul {
97 | list-style-type: disc; }
98 |
99 | .reveal ul ul {
100 | list-style-type: square; }
101 |
102 | .reveal ul ul ul {
103 | list-style-type: circle; }
104 |
105 | .reveal ul ul, .reveal ul ol, .reveal ol ol, .reveal ol ul {
106 | display: block;
107 | margin-left: 40px; }
108 |
109 | .reveal dt {
110 | font-weight: bold; }
111 |
112 | .reveal dd {
113 | margin-left: 40px; }
114 |
115 | .reveal q, .reveal blockquote {
116 | quotes: none; }
117 |
118 | .reveal blockquote {
119 | display: block;
120 | position: relative;
121 | width: 70%;
122 | margin: 20px auto;
123 | padding: 5px;
124 | font-style: italic;
125 | background: rgba(255, 255, 255, 0.05);
126 | box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); }
127 |
128 | .reveal blockquote p:first-child, .reveal blockquote p:last-child {
129 | display: inline-block; }
130 |
131 | .reveal q {
132 | font-style: italic; }
133 |
134 | .reveal pre {
135 | display: block;
136 | position: relative;
137 | width: 90%;
138 | margin: 20px auto;
139 | text-align: left;
140 | font-size: 0.55em;
141 | font-family: monospace;
142 | line-height: 1.2em;
143 | word-wrap: break-word;
144 | box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }
145 |
146 | .reveal code {
147 | font-family: monospace; }
148 |
149 | .reveal pre code {
150 | display: block;
151 | padding: 5px;
152 | overflow: auto;
153 | max-height: 400px;
154 | word-wrap: normal;
155 | background: #3F3F3F;
156 | color: #DCDCDC; }
157 |
158 | .reveal table {
159 | margin: auto;
160 | border-collapse: collapse;
161 | border-spacing: 0; }
162 |
163 | .reveal table th {
164 | font-weight: bold; }
165 |
166 | .reveal table th, .reveal table td {
167 | text-align: left;
168 | padding: 0.2em 0.5em 0.2em 0.5em;
169 | border-bottom: 1px solid; }
170 |
171 | .reveal table tr:last-child td {
172 | border-bottom: none; }
173 |
174 | .reveal sup {
175 | vertical-align: super; }
176 |
177 | .reveal sub {
178 | vertical-align: sub; }
179 |
180 | .reveal small {
181 | display: inline-block;
182 | font-size: 0.6em;
183 | line-height: 1.2em;
184 | vertical-align: top; }
185 |
186 | .reveal small * {
187 | vertical-align: top; }
188 |
189 | /*********************************************
190 | * LINKS
191 | *********************************************/
192 | .reveal a {
193 | color: #a23;
194 | text-decoration: none;
195 | -webkit-transition: color 0.15s ease;
196 | -moz-transition: color 0.15s ease;
197 | transition: color 0.15s ease; }
198 |
199 | .reveal a:hover {
200 | color: #dd5567;
201 | text-shadow: none;
202 | border: none; }
203 |
204 | .reveal .roll span:after {
205 | color: #fff;
206 | background: #6a1521; }
207 |
208 | /*********************************************
209 | * IMAGES
210 | *********************************************/
211 | .reveal section img {
212 | margin: 15px 0px;
213 | background: rgba(255, 255, 255, 0.12);
214 | border: 4px solid #eee;
215 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
216 |
217 | .reveal a img {
218 | -webkit-transition: all 0.15s linear;
219 | -moz-transition: all 0.15s linear;
220 | transition: all 0.15s linear; }
221 |
222 | .reveal a:hover img {
223 | background: rgba(255, 255, 255, 0.2);
224 | border-color: #a23;
225 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
226 |
227 | /*********************************************
228 | * NAVIGATION CONTROLS
229 | *********************************************/
230 | .reveal .controls div.navigate-left, .reveal .controls div.navigate-left.enabled {
231 | border-right-color: #a23; }
232 |
233 | .reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled {
234 | border-left-color: #a23; }
235 |
236 | .reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled {
237 | border-bottom-color: #a23; }
238 |
239 | .reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled {
240 | border-top-color: #a23; }
241 |
242 | .reveal .controls div.navigate-left.enabled:hover {
243 | border-right-color: #dd5567; }
244 |
245 | .reveal .controls div.navigate-right.enabled:hover {
246 | border-left-color: #dd5567; }
247 |
248 | .reveal .controls div.navigate-up.enabled:hover {
249 | border-bottom-color: #dd5567; }
250 |
251 | .reveal .controls div.navigate-down.enabled:hover {
252 | border-top-color: #dd5567; }
253 |
254 | /*********************************************
255 | * PROGRESS BAR
256 | *********************************************/
257 | .reveal .progress {
258 | background: rgba(0, 0, 0, 0.2); }
259 |
260 | .reveal .progress span {
261 | background: #a23;
262 | -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
263 | -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
264 | transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
265 |
266 | /*********************************************
267 | * SLIDE NUMBER
268 | *********************************************/
269 | .reveal .slide-number {
270 | color: #a23; }
271 |
272 | .reveal p {
273 | font-weight: 300;
274 | text-shadow: 1px 1px #222; }
275 |
276 | .reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 {
277 | font-weight: 700; }
278 |
279 | .reveal a, .reveal a:hover {
280 | text-shadow: 2px 2px 2px #000; }
281 |
282 | .reveal small a, .reveal small a:hover {
283 | text-shadow: 1px 1px 1px #000; }
284 |
285 | .reveal p code {
286 | background-color: #23241f;
287 | display: inline-block;
288 | border-radius: 7px; }
289 |
290 | .reveal small code {
291 | vertical-align: baseline; }
292 |
--------------------------------------------------------------------------------
/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 | var modifier = ( Reveal.getConfig().zoomKey ? Reveal.getConfig().zoomKey : 'alt' ) + 'Key';
7 |
8 | var zoomPadding = 20;
9 | var revealScale = Reveal.getScale();
10 |
11 | if( event[ modifier ] && isEnabled ) {
12 | event.preventDefault();
13 |
14 | var bounds = event.target.getBoundingClientRect();
15 |
16 | zoom.to({
17 | x: ( bounds.left * revealScale ) - zoomPadding,
18 | y: ( bounds.top * revealScale ) - zoomPadding,
19 | width: ( bounds.width * revealScale ) + ( zoomPadding * 2 ),
20 | height: ( bounds.height * revealScale ) + ( zoomPadding * 2 ),
21 | pan: false
22 | });
23 | }
24 | } );
25 |
26 | Reveal.addEventListener( 'overviewshown', function() { isEnabled = false; } );
27 | Reveal.addEventListener( 'overviewhidden', function() { isEnabled = true; } );
28 | })();
29 |
30 | /*!
31 | * zoom.js 0.3 (modified for use with reveal.js)
32 | * http://lab.hakim.se/zoom-js
33 | * MIT licensed
34 | *
35 | * Copyright (C) 2011-2014 Hakim El Hattab, http://hakim.se
36 | */
37 | var zoom = (function(){
38 |
39 | // The current zoom level (scale)
40 | var level = 1;
41 |
42 | // The current mouse position, used for panning
43 | var mouseX = 0,
44 | mouseY = 0;
45 |
46 | // Timeout before pan is activated
47 | var panEngageTimeout = -1,
48 | panUpdateInterval = -1;
49 |
50 | // Check for transform support so that we can fallback otherwise
51 | var supportsTransforms = 'WebkitTransform' in document.body.style ||
52 | 'MozTransform' in document.body.style ||
53 | 'msTransform' in document.body.style ||
54 | 'OTransform' in document.body.style ||
55 | 'transform' in document.body.style;
56 |
57 | if( supportsTransforms ) {
58 | // The easing that will be applied when we zoom in/out
59 | document.body.style.transition = 'transform 0.8s ease';
60 | document.body.style.OTransition = '-o-transform 0.8s ease';
61 | document.body.style.msTransition = '-ms-transform 0.8s ease';
62 | document.body.style.MozTransition = '-moz-transform 0.8s ease';
63 | document.body.style.WebkitTransition = '-webkit-transform 0.8s ease';
64 | }
65 |
66 | // Zoom out if the user hits escape
67 | document.addEventListener( 'keyup', function( event ) {
68 | if( level !== 1 && event.keyCode === 27 ) {
69 | zoom.out();
70 | }
71 | } );
72 |
73 | // Monitor mouse movement for panning
74 | document.addEventListener( 'mousemove', function( event ) {
75 | if( level !== 1 ) {
76 | mouseX = event.clientX;
77 | mouseY = event.clientY;
78 | }
79 | } );
80 |
81 | /**
82 | * Applies the CSS required to zoom in, prefers the use of CSS3
83 | * transforms but falls back on zoom for IE.
84 | *
85 | * @param {Object} rect
86 | * @param {Number} scale
87 | */
88 | function magnify( rect, scale ) {
89 |
90 | var scrollOffset = getScrollOffset();
91 |
92 | // Ensure a width/height is set
93 | rect.width = rect.width || 1;
94 | rect.height = rect.height || 1;
95 |
96 | // Center the rect within the zoomed viewport
97 | rect.x -= ( window.innerWidth - ( rect.width * scale ) ) / 2;
98 | rect.y -= ( window.innerHeight - ( rect.height * scale ) ) / 2;
99 |
100 | if( supportsTransforms ) {
101 | // Reset
102 | if( scale === 1 ) {
103 | document.body.style.transform = '';
104 | document.body.style.OTransform = '';
105 | document.body.style.msTransform = '';
106 | document.body.style.MozTransform = '';
107 | document.body.style.WebkitTransform = '';
108 | }
109 | // Scale
110 | else {
111 | var origin = scrollOffset.x +'px '+ scrollOffset.y +'px',
112 | transform = 'translate('+ -rect.x +'px,'+ -rect.y +'px) scale('+ scale +')';
113 |
114 | document.body.style.transformOrigin = origin;
115 | document.body.style.OTransformOrigin = origin;
116 | document.body.style.msTransformOrigin = origin;
117 | document.body.style.MozTransformOrigin = origin;
118 | document.body.style.WebkitTransformOrigin = origin;
119 |
120 | document.body.style.transform = transform;
121 | document.body.style.OTransform = transform;
122 | document.body.style.msTransform = transform;
123 | document.body.style.MozTransform = transform;
124 | document.body.style.WebkitTransform = transform;
125 | }
126 | }
127 | else {
128 | // Reset
129 | if( scale === 1 ) {
130 | document.body.style.position = '';
131 | document.body.style.left = '';
132 | document.body.style.top = '';
133 | document.body.style.width = '';
134 | document.body.style.height = '';
135 | document.body.style.zoom = '';
136 | }
137 | // Scale
138 | else {
139 | document.body.style.position = 'relative';
140 | document.body.style.left = ( - ( scrollOffset.x + rect.x ) / scale ) + 'px';
141 | document.body.style.top = ( - ( scrollOffset.y + rect.y ) / scale ) + 'px';
142 | document.body.style.width = ( scale * 100 ) + '%';
143 | document.body.style.height = ( scale * 100 ) + '%';
144 | document.body.style.zoom = scale;
145 | }
146 | }
147 |
148 | level = scale;
149 |
150 | if( document.documentElement.classList ) {
151 | if( level !== 1 ) {
152 | document.documentElement.classList.add( 'zoomed' );
153 | }
154 | else {
155 | document.documentElement.classList.remove( 'zoomed' );
156 | }
157 | }
158 | }
159 |
160 | /**
161 | * Pan the document when the mosue cursor approaches the edges
162 | * of the window.
163 | */
164 | function pan() {
165 | var range = 0.12,
166 | rangeX = window.innerWidth * range,
167 | rangeY = window.innerHeight * range,
168 | scrollOffset = getScrollOffset();
169 |
170 | // Up
171 | if( mouseY < rangeY ) {
172 | window.scroll( scrollOffset.x, scrollOffset.y - ( 1 - ( mouseY / rangeY ) ) * ( 14 / level ) );
173 | }
174 | // Down
175 | else if( mouseY > window.innerHeight - rangeY ) {
176 | window.scroll( scrollOffset.x, scrollOffset.y + ( 1 - ( window.innerHeight - mouseY ) / rangeY ) * ( 14 / level ) );
177 | }
178 |
179 | // Left
180 | if( mouseX < rangeX ) {
181 | window.scroll( scrollOffset.x - ( 1 - ( mouseX / rangeX ) ) * ( 14 / level ), scrollOffset.y );
182 | }
183 | // Right
184 | else if( mouseX > window.innerWidth - rangeX ) {
185 | window.scroll( scrollOffset.x + ( 1 - ( window.innerWidth - mouseX ) / rangeX ) * ( 14 / level ), scrollOffset.y );
186 | }
187 | }
188 |
189 | function getScrollOffset() {
190 | return {
191 | x: window.scrollX !== undefined ? window.scrollX : window.pageXOffset,
192 | y: window.scrollY !== undefined ? window.scrollY : window.pageYOffset
193 | }
194 | }
195 |
196 | return {
197 | /**
198 | * Zooms in on either a rectangle or HTML element.
199 | *
200 | * @param {Object} options
201 | * - element: HTML element to zoom in on
202 | * OR
203 | * - x/y: coordinates in non-transformed space to zoom in on
204 | * - width/height: the portion of the screen to zoom in on
205 | * - scale: can be used instead of width/height to explicitly set scale
206 | */
207 | to: function( options ) {
208 |
209 | // Due to an implementation limitation we can't zoom in
210 | // to another element without zooming out first
211 | if( level !== 1 ) {
212 | zoom.out();
213 | }
214 | else {
215 | options.x = options.x || 0;
216 | options.y = options.y || 0;
217 |
218 | // If an element is set, that takes precedence
219 | if( !!options.element ) {
220 | // Space around the zoomed in element to leave on screen
221 | var padding = 20;
222 | var bounds = options.element.getBoundingClientRect();
223 |
224 | options.x = bounds.left - padding;
225 | options.y = bounds.top - padding;
226 | options.width = bounds.width + ( padding * 2 );
227 | options.height = bounds.height + ( padding * 2 );
228 | }
229 |
230 | // If width/height values are set, calculate scale from those values
231 | if( options.width !== undefined && options.height !== undefined ) {
232 | options.scale = Math.max( Math.min( window.innerWidth / options.width, window.innerHeight / options.height ), 1 );
233 | }
234 |
235 | if( options.scale > 1 ) {
236 | options.x *= options.scale;
237 | options.y *= options.scale;
238 |
239 | magnify( options, options.scale );
240 |
241 | if( options.pan !== false ) {
242 |
243 | // Wait with engaging panning as it may conflict with the
244 | // zoom transition
245 | panEngageTimeout = setTimeout( function() {
246 | panUpdateInterval = setInterval( pan, 1000 / 60 );
247 | }, 800 );
248 |
249 | }
250 | }
251 | }
252 | },
253 |
254 | /**
255 | * Resets the document zoom state to its default.
256 | */
257 | out: function() {
258 | clearTimeout( panEngageTimeout );
259 | clearInterval( panUpdateInterval );
260 |
261 | magnify( { x: 0, y: 0 }, 1 );
262 |
263 | level = 1;
264 | },
265 |
266 | // Alias
267 | magnify: function( options ) { this.to( options ) },
268 | reset: function() { this.out() },
269 |
270 | zoomLevel: function() {
271 | return level;
272 | }
273 | }
274 |
275 | })();
276 |
277 |
278 |
279 |
--------------------------------------------------------------------------------
/plugin/notes-server/notes.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | reveal.js - Slide Notes
7 |
8 |
150 |
151 |
152 |
153 |
154 |
155 | UPCOMING:
156 |
157 |
158 |
Time Click to Reset
159 |
160 | 0:00 AM
161 |
162 |
163 | 00:00:00
164 |
165 |
166 |
167 |
168 |
172 |
173 |
174 |
175 |
176 |
177 |
394 |
395 |
396 |
397 |
--------------------------------------------------------------------------------
/plugin/notes/notes.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | reveal.js - Slide Notes
7 |
8 |
151 |
152 |
153 |
154 |
155 |
156 | UPCOMING:
157 |
158 |
159 |
Time Click to Reset
160 |
161 | 0:00 AM
162 |
163 |
164 | 00:00:00
165 |
166 |
167 |
168 |
169 |
173 |
174 |
175 |
176 |
405 |
406 |
407 |
--------------------------------------------------------------------------------
/index.md:
--------------------------------------------------------------------------------
1 | # 移动web开发入门
2 |
3 | ---
4 |
5 | # 目标
6 |
7 | * 建立基本的移动web开发知识体系
8 | * 常见问题的实践
9 |
10 | ---
11 |
12 | # 内容
13 |
14 | * 基本概念
15 | * 视觉
16 | * 交互
17 | * 实践
18 | * 调试
19 |
20 | ---
21 |
22 | # 基本概念
23 |
24 | ----
25 |
26 | ### native
27 |
28 | > 本地应用
29 | > 使用 `Java` \ `Objective-C` \ `Swift` 开发
30 |
31 |
32 | ----
33 |
34 | ### webapp
35 |
36 | > 网页应用
37 | > `html5` 开发
38 |
39 | ----
40 |
41 | ### hybrid
42 |
43 | > 混合应用
44 | > ooxx(native, web)
45 |
46 | ----
47 |
48 | ### 对比
49 |
50 | | | Web App | Hybrid App | Native App |
51 | |:---------------- |:----------------:|:----------:|:-----------:|
52 | | 开发成本 | 低 | 中 | 高 |
53 | | 维护更新 | 简单 | 简单 | 复杂 |
54 | | 体验 | 差 | 中 | 优 |
55 | | Store/market认可 | 不认可(轻应用?)| 认可 | 认可 |
56 | | 安装 | 不需要 | 需要 | 需要 |
57 | | 跨平台 | 优 | 优 | 差 |
58 |
59 | ---
60 |
61 | # 视觉
62 |
63 | ----
64 |
65 | ### devicePiexelRatio
66 |
67 | > `pixel` - px ( picture element )
68 |
69 | > `dpi` / `ppi` - 每英寸像素 ( dot per inch )
70 |
71 | > `dips` - 设备独立像素 ( device-independent pixels )
72 |
73 | > `devicePixelRatio` - 物理像素 / dips
74 |
75 | ----
76 |
77 | 
78 |
79 | ----
80 |
81 | ### 文字 px, rem
82 |
83 | > 固定大小 - px
84 |
85 | > 多屏适配,统一修改 - rem
86 |
87 | > rem - font size of the root element [(W3C)](http://www.w3.org/TR/css3-values/#rem-unit)
88 |
89 | > Q: why not em? A: r
90 |
91 | ----
92 |
93 | ### viewport
94 |
95 | ```
96 |
103 | ```
104 |
105 | > `width` - viewport的宽度
106 |
107 | > `height` - viewport的高度
108 |
109 | > `initial-scale` - 初始的缩放比例
110 |
111 | > `maximum-scale` - 允许用户缩放到的最大比例
112 |
113 | > `user-scalable` - 用户是否可以手动缩放
114 |
115 | ----
116 |
117 | ### 橫屏/竖屏
118 |
119 | ```
120 | window.addEventListener('orientationchange', function() {
121 | // rerender something
122 | });
123 |
124 | console.log(window.orientation); // 0, 90, 180, -90 顺时针角度
125 | ```
126 |
127 | ```
128 |
131 |
132 |
135 | ```
136 |
137 | > [matchMedia](https://github.com/ecomfe/saber-matchmedia)
138 |
139 | ----
140 |
141 | ### flex 伸缩布局
142 |
143 | ```
144 | .container {
145 | display: -webkit-flex;
146 | display: flex;
147 | }
148 | .initial {
149 | -webkit-flex: initial;
150 | flex: initial;
151 | width: 200px;
152 | min-width: 100px;
153 | }
154 | .none {
155 | -webkit-flex: none;
156 | flex: none;
157 | width: 200px;
158 | }
159 | .flex1 {
160 | -webkit-flex: 1;
161 | flex: 1;
162 | }
163 | .flex2 {
164 | -webkit-flex: 2;
165 | flex: 2;
166 | }
167 | ```
168 |
169 | ----
170 |
171 | demo
172 |
173 |
249 |
250 |
251 |
252 |
<div class="initial">
253 |
254 | 空间足够的时候,我的宽度是200px,如果空间不足,我会变窄到100px,但不会再窄了。
255 |
256 |
</div>
257 |
258 |
259 |
260 |
<div class="none">
261 |
262 | 无论窗口如何变化,我的宽度一直是200px。
263 |
264 |
</div>
265 |
266 |
267 |
268 |
<div class="flex1">
269 |
270 | 我会占满剩余宽度的1/3。
271 |
272 |
</div>
273 |
274 |
275 |
276 |
<div class="flex2">
277 |
278 | 我会占满剩余宽度的2/3。
279 |
280 |
</div>
281 |
282 |
283 |
284 |
285 |
286 | > [learn layout - flexbox](http://zh.learnlayout.com/flexbox.html)
287 |
288 | ----
289 |
290 | 主要历史版本
291 |
292 | > [20090723 WD](http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/) (display: box;)
293 |
294 | > [20110322 WD](http://www.w3.org/TR/2011/WD-css3-flexbox-20110322/) (display: flexbox;)
295 |
296 | > [20120918 CR](http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/) (display: flex;)
297 |
298 | ```
299 | .page-wrap {
300 | display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
301 | display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
302 | display: -ms-flexbox; /* TWEENER - IE 10 */
303 | display: -webkit-flex; /* NEW - Chrome */
304 | display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
305 | }
306 | ```
307 |
308 | > [Using Flexbox: Mixing Old and New for the Best Browser Support](http://css-tricks.com/using-flexbox/)
309 |
310 | ----
311 |
312 | ### 响应式Web设计(Responsive Web Design)
313 |
314 | 
315 |
316 | > [Media Type](http://www.w3.org/TR/CSS2/media.html#media-types)
317 |
318 | > [Media Query](http://www.w3.org/TR/css3-mediaqueries/)
319 |
320 | > [Breakpoint](https://github.com/lolmaus/breakpoint-slicer)
321 |
322 | ----
323 |
324 | ### 软键盘
325 |
326 | > 打开数字键盘
327 |
328 | ```
329 |
330 | ```
331 |
332 | ----
333 |
334 | ### 隐藏地址栏
335 |
336 | ```
337 | setTimeout(function(){ window.scrollTo(0, 1); }, 0);
338 | ```
339 |
340 | ----
341 |
342 | ### apple-touch-icon
343 |
344 | > 在iPhone,iPad,iTouch的safari上可以使用添加到主屏按钮将网站添加到主屏幕上
345 |
346 | ```
347 |
348 |
349 |
350 | ```
351 |
352 | ---
353 |
354 | # 交互
355 |
356 | ----
357 |
358 | ### touch
359 |
360 | > 摩擦、摩擦
361 |
362 | ----
363 |
364 | ### tap
365 |
366 | > `click` 有 300± ms 延迟
367 |
368 | > 服用 [fastclick](https://github.com/ftlabs/fastclick) 后, 可以解决 `click` 的延迟, 还可以防止 `穿透`(跨页面穿透除外), 嘿嘿嘿
369 |
370 | ----
371 |
372 | ### scroll
373 |
374 | > 区域滚动 `overflow:auto` 不靠谱
375 |
376 | > [iscroll](http://iscrolljs.com/)
377 |
378 | > [saber-scroll](https://github.com/ecomfe/saber-scroll)
379 |
380 | ----
381 |
382 | ### gestures
383 |
384 | 
385 |
386 | ----
387 |
388 | > [TouchGestureCards](http://static.lukew.com/TouchGestureCards.pdf) by [lukew](http://www.lukew.com/ff/entry.asp?1370)
389 |
390 | > [hammer](http://hammerjs.github.io/). A javascript library for multi-touch gestures
391 |
392 | ----
393 |
394 | ### A
395 |
396 | * block
397 | > 食指点击目标尺寸是44 x 44像素,拇指是72 x72像素 [finger friendly design](http://www.smashingmagazine.com/2012/02/21/finger-friendly-design-ideal-mobile-touchscreen-target-sizes/)
398 |
399 | * `tel:` / `sms:`
400 |
401 | ----
402 |
403 | ### HTML5 APIs [(W3C)](http://www.w3.org/2009/dap/)
404 |
405 | * 刮一刮 (canvas)
406 | * 摇一摇 (Device Orientation API)
407 | * 咻咻咻 (audio)
408 | * 啪啪啪 (getUserMedia)
409 |
410 | ---
411 |
412 | # 实践
413 |
414 | ----
415 |
416 | ### -webkit-tap-highlight-color: rgba(255,255,255,0)
417 |
418 | > 可以屏蔽点击元素时出现的阴影, 常用于有事件代理的父元素
419 |
420 | ----
421 |
422 | ### IMG
423 |
424 | * @2x, @3x
425 | > 感谢`apple`一次又次一次 重新发明像素
426 |
427 | * font icon
428 | > 矢量图标, 自由变化大小, 颜色;
429 | > 妈妈再也不用担心我的切图
430 |
431 | ----
432 |
433 | ### IMG
434 |
435 | * base64
436 | > 减少一个请求, 首屏图片无延迟;
437 | > 图片没法gzip,而css可以
438 |
439 | * lazyload
440 | > 有流量就会放肆,没流量就会克制
441 |
442 | ----
443 |
444 | ### css3
445 |
446 | * 合理使用渐变/圆角/阴影
447 | > 别太多, 低端机 hold 不住
448 |
449 | * 代替js动画
450 | > 性能好, 兼容好, why not?
451 |
452 | * translate3d
453 | > 开启GPU硬件加速, 提升动画渲染性能
454 |
455 | * backface-visibility: hidden
456 | > 解决动画闪烁问题
457 |
458 | ----
459 |
460 | ### localStorage
461 |
462 | * tpl
463 | * data
464 | * js
465 | * img
466 |
467 | > 每个域的最大长度为5MB
468 |
469 | ----
470 |
471 | ### 避免
472 |
473 | * iframe
474 | > 卡 cry, viewport 失效, iOS 宽高失效, fixed定位错误
475 |
476 | * fixed + input
477 | > 什么仇什么怨
478 |
479 | > 移动商桥 ios/android 分版本 hack
480 |
481 | ----
482 |
483 | ### SPA or Multi Page
484 |
485 | | | Multi Page (AJAX) | SPA | Isomorphic |
486 | |:---------|:-----------------:|:----------:|:----------:|
487 | | 模板 | 1+ | 1 | 1 |
488 | | 首屏数据 | 同步 | 异步 | both |
489 | | 渲染 | both | client | both |
490 | | 转场 | 差 | 优 | 优 |
491 | | SEO | 优 | 差 | 优 |
492 | | 路由 | 多个 | 多个 | 一致 |
493 |
494 | ----
495 |
496 | ### can i use
497 |
498 | | feature | can i use |
499 | | ------------ | ----------------------------- |
500 | | es5 | 那些年,每个库都有一个 `each` |
501 | | JSON parsing | 别了, `JSON2` |
502 | | localstorage | 存、存、存,有存,任性 |
503 | | canvas | 和 `Echarts` 愉快的玩耍 |
504 | | GeoLocation | 周围有啥好吃的 |
505 |
506 | > [caniuse.com](http://caniuse.com/)
507 |
508 | ----
509 |
510 | ### 压缩合并 gzip 14k
511 |
512 | > 初始拥塞窗口数 initcwnd = 10
513 |
514 | > 最大传输单元 MTU = 1500Bytes
515 |
516 | > 首次传输大小 10 * 1500 ~ 14.5Kb
517 |
518 | > 返回头 Response Header ~ 0.5Kb
519 |
520 | > 内容 Body ~ 14Kb
521 |
522 | ----
523 |
524 | ### 2G/3G 下建立连接时间
525 |
526 | 
527 |
528 |
529 | > [Creating High-Performance Mobile Websites](http://www.smashingmagazine.com/2013/08/12/creating-high-performance-mobile-websites/)
530 |
531 | ---
532 |
533 | # 调试
534 |
535 | ----
536 |
537 | ### 二维码
538 |
539 | 
540 |
541 | ----
542 |
543 | * [firefox aurora](https://www.mozilla.org/zh-CN/firefox/channel/#aurora)
544 |
545 | * [chrome 扩展](https://chrome.google.com/webstore/detail/uc-qr-code/nhelohnehpahakjoklmodmogclacjgdj)
546 |
547 | ----
548 |
549 | ### chrome
550 |
551 | 
552 |
553 | ----
554 |
555 | ### Remote Debugging with Chrome for Android(4.4+)
556 |
557 | >
558 |
559 | ----
560 |
561 | ### IOS (6.0.1+) + OS X (Mountain Lion+) + Safari
562 |
563 | `IOS端`:
564 | > 设置 → Safari → 高级 → Web 检查器 → 开
565 |
566 | `OS X`:
567 | > Safari → 偏好设置 → 高级 → 在菜单栏中显示`开发`菜单
568 |
569 | > Safari → 开发 → XXX's Phone → xxx.com
570 |
571 | ----
572 |
573 | ### weinre
574 |
575 | 
576 |
577 | ----
578 |
579 | > npm 安装
580 |
581 | ```
582 | npm install -g weinre
583 | ```
584 |
585 | ----
586 |
587 | > 启动 weinre 服务
588 |
589 | ```
590 | weinre --boundHost -all- --httpPort 8081
591 | ```
592 |
593 | ----
594 |
595 | > 打开 weinre 服务页面 `http://localhost:8081`
596 |
597 | 
598 |
599 | ----
600 |
601 | > 在需要调试页面嵌入 `target script`, 注意 `localhost` 要替换成手机可访问的 `IP`, 打开调试地址, 启动开发者工具, 开始调试吧
602 |
603 | ----
604 |
605 | 
606 |
607 | ----
608 |
609 | > [Weinre Doc](http://people.apache.org/~pmuellr/weinre/docs/latest/)
610 |
611 | ----
612 |
613 | ### edp
614 |
615 | 完成楼上的事情
616 |
617 | ```
618 | edpm start
619 | ```
620 |
621 | ---
622 |
623 | # efe mobile
624 |
625 | [](http://ecomfe.github.io/saber/)
626 |
627 | ---
628 |
629 | # thx
630 |
--------------------------------------------------------------------------------
/plugin/markdown/markdown.js:
--------------------------------------------------------------------------------
1 | /**
2 | * The reveal.js markdown plugin. Handles parsing of
3 | * markdown inside of presentations as well as loading
4 | * of external markdown documents.
5 | */
6 | (function( root, factory ) {
7 | if( typeof exports === 'object' ) {
8 | module.exports = factory( require( './marked' ) );
9 | }
10 | else {
11 | // Browser globals (root is window)
12 | root.RevealMarkdown = factory( root.marked );
13 | root.RevealMarkdown.initialize();
14 | }
15 | }( this, function( marked ) {
16 |
17 | if( typeof marked === 'undefined' ) {
18 | throw 'The reveal.js Markdown plugin requires marked to be loaded';
19 | }
20 |
21 | if( typeof hljs !== 'undefined' ) {
22 | marked.setOptions({
23 | highlight: function( lang, code ) {
24 | return hljs.highlightAuto( lang, code ).value;
25 | }
26 | });
27 | }
28 |
29 | var DEFAULT_SLIDE_SEPARATOR = '^\n---\n$',
30 | DEFAULT_NOTES_SEPARATOR = 'note:',
31 | DEFAULT_ELEMENT_ATTRIBUTES_SEPARATOR = '\\\.element\\\s*?(.+?)$',
32 | DEFAULT_SLIDE_ATTRIBUTES_SEPARATOR = '\\\.slide:\\\s*?(\\\S.+?)$';
33 |
34 |
35 | /**
36 | * Retrieves the markdown contents of a slide section
37 | * element. Normalizes leading tabs/whitespace.
38 | */
39 | function getMarkdownFromSlide( section ) {
40 |
41 | var template = section.querySelector( 'script' );
42 |
43 | // strip leading whitespace so it isn't evaluated as code
44 | var text = ( template || section ).textContent;
45 |
46 | var leadingWs = text.match( /^\n?(\s*)/ )[1].length,
47 | leadingTabs = text.match( /^\n?(\t*)/ )[1].length;
48 |
49 | if( leadingTabs > 0 ) {
50 | text = text.replace( new RegExp('\\n?\\t{' + leadingTabs + '}','g'), '\n' );
51 | }
52 | else if( leadingWs > 1 ) {
53 | text = text.replace( new RegExp('\\n? {' + leadingWs + '}'), '\n' );
54 | }
55 |
56 | return text;
57 |
58 | }
59 |
60 | /**
61 | * Given a markdown slide section element, this will
62 | * return all arguments that aren't related to markdown
63 | * parsing. Used to forward any other user-defined arguments
64 | * to the output markdown slide.
65 | */
66 | function getForwardedAttributes( section ) {
67 |
68 | var attributes = section.attributes;
69 | var result = [];
70 |
71 | for( var i = 0, len = attributes.length; i < len; i++ ) {
72 | var name = attributes[i].name,
73 | value = attributes[i].value;
74 |
75 | // disregard attributes that are used for markdown loading/parsing
76 | if( /data\-(markdown|separator|vertical|notes)/gi.test( name ) ) continue;
77 |
78 | if( value ) {
79 | result.push( name + '=' + value );
80 | }
81 | else {
82 | result.push( name );
83 | }
84 | }
85 |
86 | return result.join( ' ' );
87 |
88 | }
89 |
90 | /**
91 | * Inspects the given options and fills out default
92 | * values for what's not defined.
93 | */
94 | function getSlidifyOptions( options ) {
95 |
96 | options = options || {};
97 | options.separator = options.separator || DEFAULT_SLIDE_SEPARATOR;
98 | options.notesSeparator = options.notesSeparator || DEFAULT_NOTES_SEPARATOR;
99 | options.attributes = options.attributes || '';
100 |
101 | return options;
102 |
103 | }
104 |
105 | /**
106 | * Helper function for constructing a markdown slide.
107 | */
108 | function createMarkdownSlide( content, options ) {
109 |
110 | options = getSlidifyOptions( options );
111 |
112 | var notesMatch = content.split( new RegExp( options.notesSeparator, 'mgi' ) );
113 |
114 | if( notesMatch.length === 2 ) {
115 | content = notesMatch[0] + '';
116 | }
117 |
118 | return '';
119 |
120 | }
121 |
122 | /**
123 | * Parses a data string into multiple slides based
124 | * on the passed in separator arguments.
125 | */
126 | function slidify( markdown, options ) {
127 |
128 | options = getSlidifyOptions( options );
129 |
130 | var separatorRegex = new RegExp( options.separator + ( options.verticalSeparator ? '|' + options.verticalSeparator : '' ), 'mg' ),
131 | horizontalSeparatorRegex = new RegExp( options.separator );
132 |
133 | var matches,
134 | lastIndex = 0,
135 | isHorizontal,
136 | wasHorizontal = true,
137 | content,
138 | sectionStack = [];
139 |
140 | // iterate until all blocks between separators are stacked up
141 | while( matches = separatorRegex.exec( markdown ) ) {
142 | notes = null;
143 |
144 | // determine direction (horizontal by default)
145 | isHorizontal = horizontalSeparatorRegex.test( matches[0] );
146 |
147 | if( !isHorizontal && wasHorizontal ) {
148 | // create vertical stack
149 | sectionStack.push( [] );
150 | }
151 |
152 | // pluck slide content from markdown input
153 | content = markdown.substring( lastIndex, matches.index );
154 |
155 | if( isHorizontal && wasHorizontal ) {
156 | // add to horizontal stack
157 | sectionStack.push( content );
158 | }
159 | else {
160 | // add to vertical stack
161 | sectionStack[sectionStack.length-1].push( content );
162 | }
163 |
164 | lastIndex = separatorRegex.lastIndex;
165 | wasHorizontal = isHorizontal;
166 | }
167 |
168 | // add the remaining slide
169 | ( wasHorizontal ? sectionStack : sectionStack[sectionStack.length-1] ).push( markdown.substring( lastIndex ) );
170 |
171 | var markdownSections = '';
172 |
173 | // flatten the hierarchical stack, and insert tags
174 | for( var i = 0, len = sectionStack.length; i < len; i++ ) {
175 | // vertical
176 | if( sectionStack[i] instanceof Array ) {
177 | markdownSections += '';
178 |
179 | sectionStack[i].forEach( function( child ) {
180 | markdownSections += '' + createMarkdownSlide( child, options ) + '';
181 | } );
182 |
183 | markdownSections += '';
184 | }
185 | else {
186 | markdownSections += '' + createMarkdownSlide( sectionStack[i], options ) + '';
187 | }
188 | }
189 |
190 | return markdownSections;
191 |
192 | }
193 |
194 | /**
195 | * Parses any current data-markdown slides, splits
196 | * multi-slide markdown into separate sections and
197 | * handles loading of external markdown.
198 | */
199 | function processSlides() {
200 |
201 | var sections = document.querySelectorAll( '[data-markdown]'),
202 | section;
203 |
204 | for( var i = 0, len = sections.length; i < len; i++ ) {
205 |
206 | section = sections[i];
207 |
208 | if( section.getAttribute( 'data-markdown' ).length ) {
209 |
210 | var xhr = new XMLHttpRequest(),
211 | url = section.getAttribute( 'data-markdown' );
212 |
213 | datacharset = section.getAttribute( 'data-charset' );
214 |
215 | // see https://developer.mozilla.org/en-US/docs/Web/API/element.getAttribute#Notes
216 | if( datacharset != null && datacharset != '' ) {
217 | xhr.overrideMimeType( 'text/html; charset=' + datacharset );
218 | }
219 |
220 | xhr.onreadystatechange = function() {
221 | if( xhr.readyState === 4 ) {
222 | // file protocol yields status code 0 (useful for local debug, mobile applications etc.)
223 | if ( ( xhr.status >= 200 && xhr.status < 300 ) || xhr.status === 0 ) {
224 |
225 | section.outerHTML = slidify( xhr.responseText, {
226 | separator: section.getAttribute( 'data-separator' ),
227 | verticalSeparator: section.getAttribute( 'data-separator-vertical' ),
228 | notesSeparator: section.getAttribute( 'data-separator-notes' ),
229 | attributes: getForwardedAttributes( section )
230 | });
231 |
232 | }
233 | else {
234 |
235 | section.outerHTML = '' +
236 | 'ERROR: The attempt to fetch ' + url + ' failed with HTTP status ' + xhr.status + '.' +
237 | 'Check your browser\'s JavaScript console for more details.' +
238 | 'Remember that you need to serve the presentation HTML from a HTTP server.
' +
239 | '';
240 |
241 | }
242 | }
243 | };
244 |
245 | xhr.open( 'GET', url, false );
246 |
247 | try {
248 | xhr.send();
249 | }
250 | catch ( e ) {
251 | 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 );
252 | }
253 |
254 | }
255 | else if( section.getAttribute( 'data-separator' ) || section.getAttribute( 'data-separator-vertical' ) || section.getAttribute( 'data-separator-notes' ) ) {
256 |
257 | section.outerHTML = slidify( getMarkdownFromSlide( section ), {
258 | separator: section.getAttribute( 'data-separator' ),
259 | verticalSeparator: section.getAttribute( 'data-separator-vertical' ),
260 | notesSeparator: section.getAttribute( 'data-separator-notes' ),
261 | attributes: getForwardedAttributes( section )
262 | });
263 |
264 | }
265 | else {
266 | section.innerHTML = createMarkdownSlide( getMarkdownFromSlide( section ) );
267 | }
268 | }
269 |
270 | }
271 |
272 | /**
273 | * Check if a node value has the attributes pattern.
274 | * If yes, extract it and add that value as one or several attributes
275 | * the the terget element.
276 | *
277 | * You need Cache Killer on Chrome to see the effect on any FOM transformation
278 | * directly on refresh (F5)
279 | * http://stackoverflow.com/questions/5690269/disabling-chrome-cache-for-website-development/7000899#answer-11786277
280 | */
281 | function addAttributeInElement( node, elementTarget, separator ) {
282 |
283 | var mardownClassesInElementsRegex = new RegExp( separator, 'mg' );
284 | var mardownClassRegex = new RegExp( "([^\"= ]+?)=\"([^\"=]+?)\"", 'mg' );
285 | var nodeValue = node.nodeValue;
286 | if( matches = mardownClassesInElementsRegex.exec( nodeValue ) ) {
287 |
288 | var classes = matches[1];
289 | nodeValue = nodeValue.substring( 0, matches.index ) + nodeValue.substring( mardownClassesInElementsRegex.lastIndex );
290 | node.nodeValue = nodeValue;
291 | while( matchesClass = mardownClassRegex.exec( classes ) ) {
292 | elementTarget.setAttribute( matchesClass[1], matchesClass[2] );
293 | }
294 | return true;
295 | }
296 | return false;
297 | }
298 |
299 | /**
300 | * Add attributes to the parent element of a text node,
301 | * or the element of an attribute node.
302 | */
303 | function addAttributes( section, element, previousElement, separatorElementAttributes, separatorSectionAttributes ) {
304 |
305 | if ( element != null && element.childNodes != undefined && element.childNodes.length > 0 ) {
306 | previousParentElement = element;
307 | for( var i = 0; i < element.childNodes.length; i++ ) {
308 | childElement = element.childNodes[i];
309 | if ( i > 0 ) {
310 | j = i - 1;
311 | while ( j >= 0 ) {
312 | aPreviousChildElement = element.childNodes[j];
313 | if ( typeof aPreviousChildElement.setAttribute == 'function' && aPreviousChildElement.tagName != "BR" ) {
314 | previousParentElement = aPreviousChildElement;
315 | break;
316 | }
317 | j = j - 1;
318 | }
319 | }
320 | parentSection = section;
321 | if( childElement.nodeName == "section" ) {
322 | parentSection = childElement ;
323 | previousParentElement = childElement ;
324 | }
325 | if ( typeof childElement.setAttribute == 'function' || childElement.nodeType == Node.COMMENT_NODE ) {
326 | addAttributes( parentSection, childElement, previousParentElement, separatorElementAttributes, separatorSectionAttributes );
327 | }
328 | }
329 | }
330 |
331 | if ( element.nodeType == Node.COMMENT_NODE ) {
332 | if ( addAttributeInElement( element, previousElement, separatorElementAttributes ) == false ) {
333 | addAttributeInElement( element, section, separatorSectionAttributes );
334 | }
335 | }
336 | }
337 |
338 | /**
339 | * Converts any current data-markdown slides in the
340 | * DOM to HTML.
341 | */
342 | function convertSlides() {
343 |
344 | var sections = document.querySelectorAll( '[data-markdown]');
345 |
346 | for( var i = 0, len = sections.length; i < len; i++ ) {
347 |
348 | var section = sections[i];
349 |
350 | // Only parse the same slide once
351 | if( !section.getAttribute( 'data-markdown-parsed' ) ) {
352 |
353 | section.setAttribute( 'data-markdown-parsed', true )
354 |
355 | var notes = section.querySelector( 'aside.notes' );
356 | var markdown = getMarkdownFromSlide( section );
357 |
358 | section.innerHTML = marked( markdown );
359 | addAttributes( section, section, null, section.getAttribute( 'data-element-attributes' ) ||
360 | section.parentNode.getAttribute( 'data-element-attributes' ) ||
361 | DEFAULT_ELEMENT_ATTRIBUTES_SEPARATOR,
362 | section.getAttribute( 'data-attributes' ) ||
363 | section.parentNode.getAttribute( 'data-attributes' ) ||
364 | DEFAULT_SLIDE_ATTRIBUTES_SEPARATOR);
365 |
366 | // If there were notes, we need to re-add them after
367 | // having overwritten the section's HTML
368 | if( notes ) {
369 | section.appendChild( notes );
370 | }
371 |
372 | }
373 |
374 | }
375 |
376 | }
377 |
378 | // API
379 | return {
380 |
381 | initialize: function() {
382 | processSlides();
383 | convertSlides();
384 | },
385 |
386 | // TODO: Do these belong in the API?
387 | processSlides: processSlides,
388 | convertSlides: convertSlides,
389 | slidify: slidify
390 |
391 | };
392 |
393 | }));
394 |
--------------------------------------------------------------------------------
/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:/^ *\[([^\]]+)\]: *([^\s>]+)>?(?: +["(]([^\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'
"};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\n";for(j=0;j'+cell+"\n":""+cell+" | \n"}body+="\n"}body+="\n";return"\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+""+type+">\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 |
--------------------------------------------------------------------------------