Browse Source
Conflicts: README.md index.html js/reveal.js package.json plugin/speakernotes/client.jsembed
David Banham
12 years ago
50 changed files with 5714 additions and 2692 deletions
@ -0,0 +1,5 @@ |
|||
language: node_js |
|||
node_js: |
|||
- 0.8 |
|||
before_script: |
|||
- npm install -g grunt-cli |
@ -0,0 +1,82 @@ |
|||
/* global module:false */ |
|||
module.exports = function(grunt) { |
|||
|
|||
// Project configuration
|
|||
grunt.initConfig({ |
|||
pkg: grunt.file.readJSON('package.json'), |
|||
meta: { |
|||
banner: |
|||
'/*!\n' + |
|||
' * reveal.js <%= pkg.version %> (<%= grunt.template.today("yyyy-mm-dd, HH:MM") %>)\n' + |
|||
' * http://lab.hakim.se/reveal-js\n' + |
|||
' * MIT licensed\n' + |
|||
' *\n' + |
|||
' * Copyright (C) 2013 Hakim El Hattab, http://hakim.se\n' + |
|||
' */' |
|||
}, |
|||
|
|||
jshint: { |
|||
files: [ 'Gruntfile.js', 'js/reveal.js' ] |
|||
}, |
|||
|
|||
// Tests will be added soon
|
|||
qunit: { |
|||
files: [ 'test/**/*.html' ] |
|||
}, |
|||
|
|||
uglify: { |
|||
options: { |
|||
banner: '<%= meta.banner %>\n' |
|||
}, |
|||
build: { |
|||
src: 'js/reveal.js', |
|||
dest: 'js/reveal.min.js' |
|||
} |
|||
}, |
|||
|
|||
cssmin: { |
|||
compress: { |
|||
files: { |
|||
'css/reveal.min.css': [ 'css/reveal.css' ] |
|||
} |
|||
} |
|||
}, |
|||
|
|||
jshint: { |
|||
options: { |
|||
curly: false, |
|||
eqeqeq: true, |
|||
immed: true, |
|||
latedef: true, |
|||
newcap: true, |
|||
noarg: true, |
|||
sub: true, |
|||
undef: true, |
|||
eqnull: true, |
|||
browser: true, |
|||
expr: true |
|||
}, |
|||
globals: { |
|||
head: false, |
|||
module: false, |
|||
console: false |
|||
} |
|||
}, |
|||
|
|||
watch: { |
|||
files: [ 'Gruntfile.js', 'js/reveal.js', 'css/reveal.css' ], |
|||
tasks: 'default' |
|||
} |
|||
|
|||
}); |
|||
|
|||
// Dependencies
|
|||
grunt.loadNpmTasks( 'grunt-contrib-jshint' ); |
|||
grunt.loadNpmTasks( 'grunt-contrib-cssmin' ); |
|||
grunt.loadNpmTasks( 'grunt-contrib-uglify' ); |
|||
grunt.loadNpmTasks( 'grunt-contrib-watch' ); |
|||
|
|||
// Default task
|
|||
grunt.registerTask( 'default', [ 'jshint', 'cssmin', 'uglify' ] ); |
|||
|
|||
}; |
@ -0,0 +1,164 @@ |
|||
/* Default Print Stylesheet Template |
|||
by Rob Glazebrook of CSSnewbie.com |
|||
Last Updated: June 4, 2008 |
|||
|
|||
Feel free (nay, compelled) to edit, append, and |
|||
manipulate this file as you see fit. */ |
|||
|
|||
|
|||
/* SECTION 1: Set default width, margin, float, and |
|||
background. This prevents elements from extending |
|||
beyond the edge of the printed page, and prevents |
|||
unnecessary background images from printing */ |
|||
|
|||
* { |
|||
-webkit-print-color-adjust: exact; |
|||
} |
|||
|
|||
body { |
|||
font-size: 18pt; |
|||
width: auto; |
|||
height: auto; |
|||
border: 0; |
|||
padding: 0; |
|||
float: none !important; |
|||
overflow: visible; |
|||
} |
|||
|
|||
html { |
|||
width: 100%; |
|||
height: 100%; |
|||
overflow: visible; |
|||
} |
|||
|
|||
@page { |
|||
size: letter landscape; |
|||
margin: 0; |
|||
} |
|||
|
|||
/* SECTION 2: Remove any elements not needed in print. |
|||
This would include navigation, ads, sidebars, etc. */ |
|||
.nestedarrow, |
|||
.controls, |
|||
.reveal .progress, |
|||
.reveal.overview, |
|||
.fork-reveal, |
|||
.share-reveal, |
|||
.state-background { |
|||
display: none !important; |
|||
} |
|||
|
|||
/* SECTION 3: Set body font face, size, and color. |
|||
Consider using a serif font for readability. */ |
|||
body, p, td, li, div { |
|||
font-size: 18pt; |
|||
} |
|||
|
|||
/* SECTION 4: Set heading font face, sizes, and color. |
|||
Diffrentiate your headings from your body text. |
|||
Perhaps use a large sans-serif for distinction. */ |
|||
h1,h2,h3,h4,h5,h6 { |
|||
text-shadow: 0 0 0 #000 !important; |
|||
} |
|||
|
|||
/* SECTION 5: Make hyperlinks more usable. |
|||
Ensure links are underlined, and consider appending |
|||
the URL to the end of the link for usability. */ |
|||
a:link, |
|||
a:visited { |
|||
font-weight: bold; |
|||
text-decoration: underline; |
|||
} |
|||
|
|||
|
|||
/* SECTION 6: more reveal.js specific additions by @skypanther */ |
|||
ul, ol, div, p { |
|||
visibility: visible; |
|||
position: static; |
|||
width: auto; |
|||
height: auto; |
|||
display: block; |
|||
overflow: visible; |
|||
margin: auto; |
|||
} |
|||
.reveal .slides { |
|||
position: static; |
|||
width: 100%; |
|||
height: auto; |
|||
|
|||
left: auto; |
|||
top: auto; |
|||
margin-left: auto; |
|||
margin-right: auto; |
|||
margin-top: auto; |
|||
padding: auto; |
|||
|
|||
overflow: visible; |
|||
display: block; |
|||
|
|||
text-align: center; |
|||
|
|||
-webkit-perspective: none; |
|||
-moz-perspective: none; |
|||
-ms-perspective: none; |
|||
perspective: none; |
|||
|
|||
-webkit-perspective-origin: 50% 50%; /* there isn't a none/auto value but 50-50 is the default */ |
|||
-moz-perspective-origin: 50% 50%; |
|||
-ms-perspective-origin: 50% 50%; |
|||
perspective-origin: 50% 50%; |
|||
} |
|||
.reveal .slides section { |
|||
|
|||
page-break-after: always !important; |
|||
|
|||
visibility: visible !important; |
|||
position: static !important; |
|||
width: 100% !important; |
|||
height: auto !important; |
|||
min-height: initial !important; |
|||
display: block !important; |
|||
overflow: visible !important; |
|||
|
|||
left: 0 !important; |
|||
top: 0 !important; |
|||
margin-left: 0px !important; |
|||
margin-top: 50px !important; |
|||
padding: 20px 0px !important; |
|||
|
|||
opacity: 1 !important; |
|||
|
|||
-webkit-transform-style: flat !important; |
|||
-moz-transform-style: flat !important; |
|||
-ms-transform-style: flat !important; |
|||
transform-style: flat !important; |
|||
|
|||
-webkit-transform: none !important; |
|||
-moz-transform: none !important; |
|||
-ms-transform: none !important; |
|||
transform: none !important; |
|||
} |
|||
.reveal section.stack { |
|||
margin: 0px !important; |
|||
padding: 0px !important; |
|||
page-break-after: avoid !important; |
|||
} |
|||
.reveal section .fragment { |
|||
opacity: 1 !important; |
|||
visibility: visible !important; |
|||
|
|||
-webkit-transform: none !important; |
|||
-moz-transform: none !important; |
|||
-ms-transform: none !important; |
|||
transform: none !important; |
|||
} |
|||
.reveal img { |
|||
box-shadow: none; |
|||
} |
|||
.reveal .roll { |
|||
overflow: visible; |
|||
line-height: 1em; |
|||
} |
|||
.reveal small a { |
|||
font-size: 16pt !important; |
|||
} |
@ -1,57 +0,0 @@ |
|||
/* http://meyerweb.com/eric/tools/css/reset/ |
|||
v2.0 | 20110126 |
|||
License: none (public domain) |
|||
*/ |
|||
|
|||
html, body, div, span, applet, object, iframe, |
|||
h1, h2, h3, h4, h5, h6, p, blockquote, pre, |
|||
a, abbr, acronym, address, big, cite, code, |
|||
del, dfn, em, img, ins, kbd, q, s, samp, |
|||
small, strike, strong, sub, sup, tt, var, |
|||
b, u, i, center, |
|||
dl, dt, dd, ol, ul, li, |
|||
fieldset, form, label, legend, |
|||
table, caption, tbody, tfoot, thead, tr, th, td, |
|||
article, aside, canvas, details, embed, |
|||
figure, figcaption, footer, header, hgroup, |
|||
menu, nav, output, ruby, section, summary, |
|||
time, mark, audio, video { |
|||
margin: 0; |
|||
padding: 0; |
|||
border: 0; |
|||
font-size: 100%; |
|||
font: inherit; |
|||
vertical-align: baseline; |
|||
} |
|||
/* HTML5 display-role reset for older browsers */ |
|||
article, aside, details, figcaption, figure, |
|||
footer, header, hgroup, menu, nav, section { |
|||
display: block; |
|||
} |
|||
body { |
|||
line-height: 1; |
|||
} |
|||
ol, ul { |
|||
list-style: none; |
|||
} |
|||
blockquote, q { |
|||
quotes: none; |
|||
} |
|||
blockquote:before, blockquote:after, |
|||
q:before, q:after { |
|||
content: ''; |
|||
content: none; |
|||
} |
|||
table { |
|||
border-collapse: collapse; |
|||
border-spacing: 0; |
|||
} |
|||
|
|||
|
|||
/* HTML5BP: |
|||
These selection declarations have to be separate. |
|||
No text-shadow: twitter.com/miketaylr/status/12228805301 |
|||
Also: hot pink. */ |
|||
::-moz-selection{ background: #FF5E99; color:#fff; text-shadow: none; } |
|||
::selection { background:#FF5E99; color:#fff; text-shadow: none; } |
|||
|
File diff suppressed because it is too large
File diff suppressed because one or more lines are too long
@ -0,0 +1,25 @@ |
|||
## Dependencies |
|||
|
|||
Themes are written using Sass to keep things modular and reduce the need for repeated selectors across files. Find out how to install Sass here http://sass-lang.com/, once Sass is installed run the follwing command to start monitoring the source files for changes. |
|||
|
|||
``` |
|||
sass --watch css/theme/source/:css/theme --style expanded |
|||
``` |
|||
|
|||
|
|||
|
|||
## Creating a Theme |
|||
|
|||
To create your own theme, start by duplicating any ```.scss``` file in [/css/theme/source](https://github.com/hakimel/reveal.js/blob/master/css/theme/source). Each theme does four things in the following order: |
|||
|
|||
1. **Include [/css/theme/template/mixins.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/mixins.scss)** |
|||
Shared utility functions. |
|||
|
|||
2. **Include [/css/theme/template/settings.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/settings.scss)** |
|||
Declares a set of custom variables that the template file (step 4) expects. Can be overridden in step 3. |
|||
|
|||
3. **Override** |
|||
This is where you override the default theme. Either by specifying variables (see [settings.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/settings.scss) for reference) or by adding full selectors with hardcoded styles. |
|||
|
|||
4. **Include [/css/theme/template/theme.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/theme.scss)** |
|||
The template theme file which will generate final CSS output based on the currently defined variables. |
@ -0,0 +1,163 @@ |
|||
@import url(http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); |
|||
/** |
|||
* Beige theme for reveal.js. |
|||
* |
|||
* Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se |
|||
*/ |
|||
@font-face { |
|||
font-family: 'League Gothic'; |
|||
src: url("../../lib/font/league_gothic-webfont.eot"); |
|||
src: url("../../lib/font/league_gothic-webfont.eot?#iefix") format("embedded-opentype"), url("../../lib/font/league_gothic-webfont.woff") format("woff"), url("../../lib/font/league_gothic-webfont.ttf") format("truetype"), url("../../lib/font/league_gothic-webfont.svg#LeagueGothicRegular") format("svg"); |
|||
font-weight: normal; |
|||
font-style: normal; |
|||
} |
|||
|
|||
/********************************************* |
|||
* GLOBAL STYLES |
|||
*********************************************/ |
|||
body { |
|||
background: #f7f2d3; |
|||
background: -moz-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%); |
|||
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, white), color-stop(100%, #f7f2d3)); |
|||
background: -webkit-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%); |
|||
background: -o-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%); |
|||
background: -ms-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%); |
|||
background: radial-gradient(center, circle cover, white 0%, #f7f2d3 100%); |
|||
background-color: #f7f3de; |
|||
} |
|||
|
|||
.reveal { |
|||
font-family: "Lato", Times, "Times New Roman", serif; |
|||
font-size: 36px; |
|||
font-weight: 200; |
|||
letter-spacing: -0.02em; |
|||
color: #333333; |
|||
} |
|||
|
|||
::selection { |
|||
color: white; |
|||
background: rgba(79, 64, 28, 0.99); |
|||
text-shadow: none; |
|||
} |
|||
|
|||
/********************************************* |
|||
* HEADERS |
|||
*********************************************/ |
|||
.reveal h1, |
|||
.reveal h2, |
|||
.reveal h3, |
|||
.reveal h4, |
|||
.reveal h5, |
|||
.reveal h6 { |
|||
margin: 0 0 20px 0; |
|||
color: #333333; |
|||
font-family: "League Gothic", Impact, sans-serif; |
|||
line-height: 0.9em; |
|||
letter-spacing: 0.02em; |
|||
text-transform: uppercase; |
|||
text-shadow: none; |
|||
} |
|||
|
|||
.reveal h1 { |
|||
text-shadow: 0 1px 0 #cccccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbbbbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaaaaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 20px 20px rgba(0, 0, 0, 0.15); |
|||
} |
|||
|
|||
/********************************************* |
|||
* LINKS |
|||
*********************************************/ |
|||
.reveal a:not(.image) { |
|||
color: #8b743d; |
|||
text-decoration: none; |
|||
-webkit-transition: color .15s ease; |
|||
-moz-transition: color .15s ease; |
|||
-ms-transition: color .15s ease; |
|||
-o-transition: color .15s ease; |
|||
transition: color .15s ease; |
|||
} |
|||
|
|||
.reveal a:not(.image):hover { |
|||
color: #c0a86e; |
|||
text-shadow: none; |
|||
border: none; |
|||
} |
|||
|
|||
.reveal .roll span:after { |
|||
color: #fff; |
|||
background: #564826; |
|||
} |
|||
|
|||
/********************************************* |
|||
* IMAGES |
|||
*********************************************/ |
|||
.reveal section img { |
|||
margin: 15px 0px; |
|||
background: rgba(255, 255, 255, 0.12); |
|||
border: 4px solid #333333; |
|||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); |
|||
-webkit-transition: all .2s linear; |
|||
-moz-transition: all .2s linear; |
|||
-ms-transition: all .2s linear; |
|||
-o-transition: all .2s linear; |
|||
transition: all .2s linear; |
|||
} |
|||
|
|||
.reveal a:hover img { |
|||
background: rgba(255, 255, 255, 0.2); |
|||
border-color: #8b743d; |
|||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); |
|||
} |
|||
|
|||
/********************************************* |
|||
* NAVIGATION CONTROLS |
|||
*********************************************/ |
|||
.reveal .controls div.navigate-left, |
|||
.reveal .controls div.navigate-left.enabled { |
|||
border-right-color: #8b743d; |
|||
} |
|||
|
|||
.reveal .controls div.navigate-right, |
|||
.reveal .controls div.navigate-right.enabled { |
|||
border-left-color: #8b743d; |
|||
} |
|||
|
|||
.reveal .controls div.navigate-up, |
|||
.reveal .controls div.navigate-up.enabled { |
|||
border-bottom-color: #8b743d; |
|||
} |
|||
|
|||
.reveal .controls div.navigate-down, |
|||
.reveal .controls div.navigate-down.enabled { |
|||
border-top-color: #8b743d; |
|||
} |
|||
|
|||
.reveal .controls div.navigate-left.enabled:hover { |
|||
border-right-color: #c0a86e; |
|||
} |
|||
|
|||
.reveal .controls div.navigate-right.enabled:hover { |
|||
border-left-color: #c0a86e; |
|||
} |
|||
|
|||
.reveal .controls div.navigate-up.enabled:hover { |
|||
border-bottom-color: #c0a86e; |
|||
} |
|||
|
|||
.reveal .controls div.navigate-down.enabled:hover { |
|||
border-top-color: #c0a86e; |
|||
} |
|||
|
|||
/********************************************* |
|||
* PROGRESS BAR |
|||
*********************************************/ |
|||
.reveal .progress { |
|||
background: rgba(0, 0, 0, 0.2); |
|||
} |
|||
|
|||
.reveal .progress span { |
|||
background: #8b743d; |
|||
-webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); |
|||
-moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); |
|||
-ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); |
|||
-o-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); |
|||
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); |
|||
} |
@ -0,0 +1,163 @@ |
|||
@import url(http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); |
|||
/** |
|||
* Default theme for reveal.js. |
|||
* |
|||
* Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se |
|||
*/ |
|||
@font-face { |
|||
font-family: 'League Gothic'; |
|||
src: url("../../lib/font/league_gothic-webfont.eot"); |
|||
src: url("../../lib/font/league_gothic-webfont.eot?#iefix") format("embedded-opentype"), url("../../lib/font/league_gothic-webfont.woff") format("woff"), url("../../lib/font/league_gothic-webfont.ttf") format("truetype"), url("../../lib/font/league_gothic-webfont.svg#LeagueGothicRegular") format("svg"); |
|||
font-weight: normal; |
|||
font-style: normal; |
|||
} |
|||
|
|||
/********************************************* |
|||
* GLOBAL STYLES |
|||
*********************************************/ |
|||
body { |
|||
background: #1c1e20; |
|||
background: -moz-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%); |
|||
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #555a5f), color-stop(100%, #1c1e20)); |
|||
background: -webkit-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%); |
|||
background: -o-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%); |
|||
background: -ms-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%); |
|||
background: radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%); |
|||
background-color: #2b2b2b; |
|||
} |
|||
|
|||
.reveal { |
|||
font-family: "Lato", Times, "Times New Roman", serif; |
|||
font-size: 36px; |
|||
font-weight: 200; |
|||
letter-spacing: -0.02em; |
|||
color: #eeeeee; |
|||
} |
|||
|
|||
::selection { |
|||
color: white; |
|||
background: #ff5e99; |
|||
text-shadow: none; |
|||
} |
|||
|
|||
/********************************************* |
|||
* HEADERS |
|||
*********************************************/ |
|||
.reveal h1, |
|||
.reveal h2, |
|||
.reveal h3, |
|||
.reveal h4, |
|||
.reveal h5, |
|||
.reveal h6 { |
|||
margin: 0 0 20px 0; |
|||
color: #eeeeee; |
|||
font-family: "League Gothic", Impact, sans-serif; |
|||
line-height: 0.9em; |
|||
letter-spacing: 0.02em; |
|||
text-transform: uppercase; |
|||
text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); |
|||
} |
|||
|
|||
.reveal h1 { |
|||
text-shadow: 0 1px 0 #cccccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbbbbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaaaaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 20px 20px rgba(0, 0, 0, 0.15); |
|||
} |
|||
|
|||
/********************************************* |
|||
* LINKS |
|||
*********************************************/ |
|||
.reveal a:not(.image) { |
|||
color: #13daec; |
|||
text-decoration: none; |
|||
-webkit-transition: color .15s ease; |
|||
-moz-transition: color .15s ease; |
|||
-ms-transition: color .15s ease; |
|||
-o-transition: color .15s ease; |
|||
transition: color .15s ease; |
|||
} |
|||
|
|||
.reveal a:not(.image):hover { |
|||
color: #71e9f4; |
|||
text-shadow: none; |
|||
border: none; |
|||
} |
|||
|
|||
.reveal .roll span:after { |
|||
color: #fff; |
|||
background: #0d99a5; |
|||
} |
|||
|
|||
/********************************************* |
|||
* IMAGES |
|||
*********************************************/ |
|||
.reveal section img { |
|||
margin: 15px 0px; |
|||
background: rgba(255, 255, 255, 0.12); |
|||
border: 4px solid #eeeeee; |
|||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); |
|||
-webkit-transition: all .2s linear; |
|||
-moz-transition: all .2s linear; |
|||
-ms-transition: all .2s linear; |
|||
-o-transition: all .2s linear; |
|||
transition: all .2s linear; |
|||
} |
|||
|
|||
.reveal a:hover img { |
|||
background: rgba(255, 255, 255, 0.2); |
|||
border-color: #13daec; |
|||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); |
|||
} |
|||
|
|||
/********************************************* |
|||
* NAVIGATION CONTROLS |
|||
*********************************************/ |
|||
.reveal .controls div.navigate-left, |
|||
.reveal .controls div.navigate-left.enabled { |
|||
border-right-color: #13daec; |
|||
} |
|||
|
|||
.reveal .controls div.navigate-right, |
|||
.reveal .controls div.navigate-right.enabled { |
|||
border-left-color: #13daec; |
|||
} |
|||
|
|||
.reveal .controls div.navigate-up, |
|||
.reveal .controls div.navigate-up.enabled { |
|||
border-bottom-color: #13daec; |
|||
} |
|||
|
|||
.reveal .controls div.navigate-down, |
|||
.reveal .controls div.navigate-down.enabled { |
|||
border-top-color: #13daec; |
|||
} |
|||
|
|||
.reveal .controls div.navigate-left.enabled:hover { |
|||
border-right-color: #71e9f4; |
|||
} |
|||
|
|||
.reveal .controls div.navigate-right.enabled:hover { |
|||
border-left-color: #71e9f4; |
|||
} |
|||
|
|||
.reveal .controls div.navigate-up.enabled:hover { |
|||
border-bottom-color: #71e9f4; |
|||
} |
|||
|
|||
.reveal .controls div.navigate-down.enabled:hover { |
|||
border-top-color: #71e9f4; |
|||
} |
|||
|
|||
/********************************************* |
|||
* PROGRESS BAR |
|||
*********************************************/ |
|||
.reveal .progress { |
|||
background: rgba(0, 0, 0, 0.2); |
|||
} |
|||
|
|||
.reveal .progress span { |
|||
background: #13daec; |
|||
-webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); |
|||
-moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); |
|||
-ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); |
|||
-o-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); |
|||
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); |
|||
} |
@ -0,0 +1,150 @@ |
|||
@import url(http://fonts.googleapis.com/css?family=Montserrat:700); |
|||
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic); |
|||
/** |
|||
* Black theme for reveal.js. |
|||
* |
|||
* Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se |
|||
*/ |
|||
/********************************************* |
|||
* GLOBAL STYLES |
|||
*********************************************/ |
|||
body { |
|||
background: #111111; |
|||
background-color: #111111; |
|||
} |
|||
|
|||
.reveal { |
|||
font-family: "Open Sans", Times, "Times New Roman", serif; |
|||
font-size: 30px; |
|||
font-weight: 200; |
|||
letter-spacing: -0.02em; |
|||
color: #eeeeee; |
|||
} |
|||
|
|||
::selection { |
|||
color: white; |
|||
background: #e7ad52; |
|||
text-shadow: none; |
|||
} |
|||
|
|||
/********************************************* |
|||
* HEADERS |
|||
*********************************************/ |
|||
.reveal h1, |
|||
.reveal h2, |
|||
.reveal h3, |
|||
.reveal h4, |
|||
.reveal h5, |
|||
.reveal h6 { |
|||
margin: 0 0 20px 0; |
|||
color: #eeeeee; |
|||
font-family: "Montserrat", Impact, sans-serif; |
|||
line-height: 0.9em; |
|||
letter-spacing: -0.03em; |
|||
text-transform: none; |
|||
text-shadow: none; |
|||
} |
|||
|
|||
.reveal h1 { |
|||
text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); |
|||
} |
|||
|
|||
/********************************************* |
|||
* LINKS |
|||
*********************************************/ |
|||
.reveal a:not(.image) { |
|||
color: #e7ad52; |
|||
text-decoration: none; |
|||
-webkit-transition: color .15s ease; |
|||
-moz-transition: color .15s ease; |
|||
-ms-transition: color .15s ease; |
|||
-o-transition: color .15s ease; |
|||
transition: color .15s ease; |
|||
} |
|||
|
|||
.reveal a:not(.image):hover { |
|||
color: #f3d7ac; |
|||
text-shadow: none; |
|||
border: none; |
|||
} |
|||
|
|||
.reveal .roll span:after { |
|||
color: #fff; |
|||
background: #d08a1d; |
|||
} |
|||
|
|||
/********************************************* |
|||
* IMAGES |
|||
*********************************************/ |
|||
.reveal section img { |
|||
margin: 15px 0px; |
|||
background: rgba(255, 255, 255, 0.12); |
|||
border: 4px solid #eeeeee; |
|||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); |
|||
-webkit-transition: all .2s linear; |
|||
-moz-transition: all .2s linear; |
|||
-ms-transition: all .2s linear; |
|||
-o-transition: all .2s linear; |
|||
transition: all .2s linear; |
|||
} |
|||
|
|||
.reveal a:hover img { |
|||
background: rgba(255, 255, 255, 0.2); |
|||
border-color: #e7ad52; |
|||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); |
|||
} |
|||
|
|||
/********************************************* |
|||
* NAVIGATION CONTROLS |
|||
*********************************************/ |
|||
.reveal .controls div.navigate-left, |
|||
.reveal .controls div.navigate-left.enabled { |
|||
border-right-color: #e7ad52; |
|||
} |
|||
|
|||
.reveal .controls div.navigate-right, |
|||
.reveal .controls div.navigate-right.enabled { |
|||
border-left-color: #e7ad52; |
|||
} |
|||
|
|||
.reveal .controls div.navigate-up, |
|||
.reveal .controls div.navigate-up.enabled { |
|||
border-bottom-color: #e7ad52; |
|||
} |
|||
|
|||
.reveal .controls div.navigate-down, |
|||
.reveal .controls div.navigate-down.enabled { |
|||
border-top-color: #e7ad52; |
|||
} |
|||
|
|||
.reveal .controls div.navigate-left.enabled:hover { |
|||
border-right-color: #f3d7ac; |
|||
} |
|||
|
|||
.reveal .controls div.navigate-right.enabled:hover { |
|||
border-left-color: #f3d7ac; |
|||
} |
|||
|
|||
.reveal .controls div.navigate-up.enabled:hover { |
|||
border-bottom-color: #f3d7ac; |
|||
} |
|||
|
|||
.reveal .controls div.navigate-down.enabled:hover { |
|||
border-top-color: #f3d7ac; |
|||
} |
|||
|
|||
/********************************************* |
|||
* PROGRESS BAR |
|||
*********************************************/ |
|||
.reveal .progress { |
|||
background: rgba(0, 0, 0, 0.2); |
|||
} |
|||
|
|||
.reveal .progress span { |
|||
background: #e7ad52; |
|||
-webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); |
|||
-moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); |
|||
-ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); |
|||
-o-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); |
|||
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); |
|||
} |
@ -0,0 +1,150 @@ |
|||
/** |
|||
* A simple theme for reveal.js presentations, similar |
|||
* to the default theme. The accent color is darkblue. |
|||
* |
|||
* This theme is Copyright (C) 2012 Owen Versteeg, https://github.com/StereotypicalApps. It is MIT licensed. |
|||
* reveal.js is Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se; so is the theme - beige.css - that this is based off of. |
|||
*/ |
|||
/********************************************* |
|||
* GLOBAL STYLES |
|||
*********************************************/ |
|||
body { |
|||
background: #f0f1eb; |
|||
background-color: #f0f1eb; |
|||
} |
|||
|
|||
.reveal { |
|||
font-family: "Palatino Linotype", "Book Antiqua", Palatino, FreeSerif, serif; |
|||
font-size: 36px; |
|||
font-weight: 200; |
|||
letter-spacing: -0.02em; |
|||
color: black; |
|||
} |
|||
|
|||
::selection { |
|||
color: white; |
|||
background: #26351c; |
|||
text-shadow: none; |
|||
} |
|||
|
|||
/********************************************* |
|||
* HEADERS |
|||
*********************************************/ |
|||
.reveal h1, |
|||
.reveal h2, |
|||
.reveal h3, |
|||
.reveal h4, |
|||
.reveal h5, |
|||
.reveal h6 { |
|||
margin: 0 0 20px 0; |
|||
color: #383d3d; |
|||
font-family: "Palatino Linotype", "Book Antiqua", Palatino, FreeSerif, serif; |
|||
line-height: 0.9em; |
|||
letter-spacing: 0.02em; |
|||
text-transform: none; |
|||
text-shadow: none; |
|||
} |
|||
|
|||
.reveal h1 { |
|||
text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); |
|||
} |
|||
|
|||
/********************************************* |
|||
* LINKS |
|||
*********************************************/ |
|||
.reveal a:not(.image) { |
|||
color: #51483d; |
|||
text-decoration: none; |
|||
-webkit-transition: color .15s ease; |
|||
-moz-transition: color .15s ease; |
|||
-ms-transition: color .15s ease; |
|||
-o-transition: color .15s ease; |
|||
transition: color .15s ease; |
|||
} |
|||
|
|||
.reveal a:not(.image):hover { |
|||
color: #8b7c69; |
|||
text-shadow: none; |
|||
border: none; |
|||
} |
|||
|
|||
.reveal .roll span:after { |
|||
color: #fff; |
|||
background: #25211c; |
|||
} |
|||
|
|||
/********************************************* |
|||
* IMAGES |
|||
*********************************************/ |
|||
.reveal section img { |
|||
margin: 15px 0px; |
|||
background: rgba(255, 255, 255, 0.12); |
|||
border: 4px solid black; |
|||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); |
|||
-webkit-transition: all .2s linear; |
|||
-moz-transition: all .2s linear; |
|||
-ms-transition: all .2s linear; |
|||
-o-transition: all .2s linear; |
|||
transition: all .2s linear; |
|||
} |
|||
|
|||
.reveal a:hover img { |
|||
background: rgba(255, 255, 255, 0.2); |
|||
border-color: #51483d; |
|||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); |
|||
} |
|||
|
|||
/********************************************* |
|||
* NAVIGATION CONTROLS |
|||
*********************************************/ |
|||
.reveal .controls div.navigate-left, |
|||
.reveal .controls div.navigate-left.enabled { |
|||
border-right-color: #51483d; |
|||
} |
|||
|
|||
.reveal .controls div.navigate-right, |
|||
.reveal .controls div.navigate-right.enabled { |
|||
border-left-color: #51483d; |
|||
} |
|||
|
|||
.reveal .controls div.navigate-up, |
|||
.reveal .controls div.navigate-up.enabled { |
|||
border-bottom-color: #51483d; |
|||
} |
|||
|
|||
.reveal .controls div.navigate-down, |
|||
.reveal .controls div.navigate-down.enabled { |
|||
border-top-color: #51483d; |
|||
} |
|||
|
|||
.reveal .controls div.navigate-left.enabled:hover { |
|||
border-right-color: #8b7c69; |
|||
} |
|||
|
|||
.reveal .controls div.navigate-right.enabled:hover { |
|||
border-left-color: #8b7c69; |
|||
} |
|||
|
|||
.reveal .controls div.navigate-up.enabled:hover { |
|||
border-bottom-color: #8b7c69; |
|||
} |
|||
|
|||
.reveal .controls div.navigate-down.enabled:hover { |
|||
border-top-color: #8b7c69; |
|||
} |
|||
|
|||
/********************************************* |
|||
* PROGRESS BAR |
|||
*********************************************/ |
|||
.reveal .progress { |
|||
background: rgba(0, 0, 0, 0.2); |
|||
} |
|||
|
|||
.reveal .progress span { |
|||
background: #51483d; |
|||
-webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); |
|||
-moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); |
|||
-ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); |
|||
-o-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); |
|||
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); |
|||
} |
@ -0,0 +1,152 @@ |
|||
@import url(http://fonts.googleapis.com/css?family=News+Cycle:400,700); |
|||
@import url(http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); |
|||
/** |
|||
* A simple theme for reveal.js presentations, similar |
|||
* to the default theme. The accent color is darkblue. |
|||
* |
|||
* This theme is Copyright (C) 2012 Owen Versteeg, https://github.com/StereotypicalApps. It is MIT licensed. |
|||
* reveal.js is Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se |
|||
*/ |
|||
/********************************************* |
|||
* GLOBAL STYLES |
|||
*********************************************/ |
|||
body { |
|||
background: white; |
|||
background-color: white; |
|||
} |
|||
|
|||
.reveal { |
|||
font-family: "Lato", Times, "Times New Roman", serif; |
|||
font-size: 36px; |
|||
font-weight: 200; |
|||
letter-spacing: -0.02em; |
|||
color: black; |
|||
} |
|||
|
|||
::selection { |
|||
color: white; |
|||
background: rgba(0, 0, 0, 0.99); |
|||
text-shadow: none; |
|||
} |
|||
|
|||
/********************************************* |
|||
* HEADERS |
|||
*********************************************/ |
|||
.reveal h1, |
|||
.reveal h2, |
|||
.reveal h3, |
|||
.reveal h4, |
|||
.reveal h5, |
|||
.reveal h6 { |
|||
margin: 0 0 20px 0; |
|||
color: black; |
|||
font-family: "News Cycle", Impact, sans-serif; |
|||
line-height: 0.9em; |
|||
letter-spacing: 0.02em; |
|||
text-transform: none; |
|||
text-shadow: none; |
|||
} |
|||
|
|||
.reveal h1 { |
|||
text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); |
|||
} |
|||
|
|||
/********************************************* |
|||
* LINKS |
|||
*********************************************/ |
|||
.reveal a:not(.image) { |
|||
color: darkblue; |
|||
text-decoration: none; |
|||
-webkit-transition: color .15s ease; |
|||
-moz-transition: color .15s ease; |
|||
-ms-transition: color .15s ease; |
|||
-o-transition: color .15s ease; |
|||
transition: color .15s ease; |
|||
} |
|||
|
|||
.reveal a:not(.image):hover { |
|||
color: #0000f1; |
|||
text-shadow: none; |
|||
border: none; |
|||
} |
|||
|
|||
.reveal .roll span:after { |
|||
color: #fff; |
|||
background: #00003f; |
|||
} |
|||
|
|||
/********************************************* |
|||
* IMAGES |
|||
*********************************************/ |
|||
.reveal section img { |
|||
margin: 15px 0px; |
|||
background: rgba(255, 255, 255, 0.12); |
|||
border: 4px solid black; |
|||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); |
|||
-webkit-transition: all .2s linear; |
|||
-moz-transition: all .2s linear; |
|||
-ms-transition: all .2s linear; |
|||
-o-transition: all .2s linear; |
|||
transition: all .2s linear; |
|||
} |
|||
|
|||
.reveal a:hover img { |
|||
background: rgba(255, 255, 255, 0.2); |
|||
border-color: darkblue; |
|||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); |
|||
} |
|||
|
|||
/********************************************* |
|||
* NAVIGATION CONTROLS |
|||
*********************************************/ |
|||
.reveal .controls div.navigate-left, |
|||
.reveal .controls div.navigate-left.enabled { |
|||
border-right-color: darkblue; |
|||
} |
|||
|
|||
.reveal .controls div.navigate-right, |
|||
.reveal .controls div.navigate-right.enabled { |
|||
border-left-color: darkblue; |
|||
} |
|||
|
|||
.reveal .controls div.navigate-up, |
|||
.reveal .controls div.navigate-up.enabled { |
|||
border-bottom-color: darkblue; |
|||
} |
|||
|
|||
.reveal .controls div.navigate-down, |
|||
.reveal .controls div.navigate-down.enabled { |
|||
border-top-color: darkblue; |
|||
} |
|||
|
|||
.reveal .controls div.navigate-left.enabled:hover { |
|||
border-right-color: #0000f1; |
|||
} |
|||
|
|||
.reveal .controls div.navigate-right.enabled:hover { |
|||
border-left-color: #0000f1; |
|||
} |
|||
|
|||
.reveal .controls div.navigate-up.enabled:hover { |
|||
border-bottom-color: #0000f1; |
|||
} |
|||
|
|||
.reveal .controls div.navigate-down.enabled:hover { |
|||
border-top-color: #0000f1; |
|||
} |
|||
|
|||
/********************************************* |
|||
* PROGRESS BAR |
|||
*********************************************/ |
|||
.reveal .progress { |
|||
background: rgba(0, 0, 0, 0.2); |
|||
} |
|||
|
|||
.reveal .progress span { |
|||
background: darkblue; |
|||
-webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); |
|||
-moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); |
|||
-ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); |
|||
-o-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); |
|||
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); |
|||
} |
@ -0,0 +1,156 @@ |
|||
@import url(http://fonts.googleapis.com/css?family=Quicksand:400,700,400italic,700italic); |
|||
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700); |
|||
/** |
|||
* Sky theme for reveal.js. |
|||
* |
|||
* Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se |
|||
*/ |
|||
/********************************************* |
|||
* GLOBAL STYLES |
|||
*********************************************/ |
|||
body { |
|||
background: #add9e4; |
|||
background: -moz-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%); |
|||
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #f7fbfc), color-stop(100%, #add9e4)); |
|||
background: -webkit-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%); |
|||
background: -o-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%); |
|||
background: -ms-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%); |
|||
background: radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%); |
|||
background-color: #f7fbfc; |
|||
} |
|||
|
|||
.reveal { |
|||
font-family: "Open Sans", sans-serif; |
|||
font-size: 36px; |
|||
font-weight: 200; |
|||
letter-spacing: -0.02em; |
|||
color: #333333; |
|||
} |
|||
|
|||
::selection { |
|||
color: white; |
|||
background: #134674; |
|||
text-shadow: none; |
|||
} |
|||
|
|||
/********************************************* |
|||
* HEADERS |
|||
*********************************************/ |
|||
.reveal h1, |
|||
.reveal h2, |
|||
.reveal h3, |
|||
.reveal h4, |
|||
.reveal h5, |
|||
.reveal h6 { |
|||
margin: 0 0 20px 0; |
|||
color: #333333; |
|||
font-family: "Quicksand", sans-serif; |
|||
line-height: 0.9em; |
|||
letter-spacing: -0.08em; |
|||
text-transform: uppercase; |
|||
text-shadow: none; |
|||
} |
|||
|
|||
.reveal h1 { |
|||
text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); |
|||
} |
|||
|
|||
/********************************************* |
|||
* LINKS |
|||
*********************************************/ |
|||
.reveal a:not(.image) { |
|||
color: #3b759e; |
|||
text-decoration: none; |
|||
-webkit-transition: color .15s ease; |
|||
-moz-transition: color .15s ease; |
|||
-ms-transition: color .15s ease; |
|||
-o-transition: color .15s ease; |
|||
transition: color .15s ease; |
|||
} |
|||
|
|||
.reveal a:not(.image):hover { |
|||
color: #74a7cb; |
|||
text-shadow: none; |
|||
border: none; |
|||
} |
|||
|
|||
.reveal .roll span:after { |
|||
color: #fff; |
|||
background: #264c66; |
|||
} |
|||
|
|||
/********************************************* |
|||
* IMAGES |
|||
*********************************************/ |
|||
.reveal section img { |
|||
margin: 15px 0px; |
|||
background: rgba(255, 255, 255, 0.12); |
|||
border: 4px solid #333333; |
|||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); |
|||
-webkit-transition: all .2s linear; |
|||
-moz-transition: all .2s linear; |
|||
-ms-transition: all .2s linear; |
|||
-o-transition: all .2s linear; |
|||
transition: all .2s linear; |
|||
} |
|||
|
|||
.reveal a:hover img { |
|||
background: rgba(255, 255, 255, 0.2); |
|||
border-color: #3b759e; |
|||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); |
|||
} |
|||
|
|||
/********************************************* |
|||
* NAVIGATION CONTROLS |
|||
*********************************************/ |
|||
.reveal .controls div.navigate-left, |
|||
.reveal .controls div.navigate-left.enabled { |
|||
border-right-color: #3b759e; |
|||
} |
|||
|
|||
.reveal .controls div.navigate-right, |
|||
.reveal .controls div.navigate-right.enabled { |
|||
border-left-color: #3b759e; |
|||
} |
|||
|
|||
.reveal .controls div.navigate-up, |
|||
.reveal .controls div.navigate-up.enabled { |
|||
border-bottom-color: #3b759e; |
|||
} |
|||
|
|||
.reveal .controls div.navigate-down, |
|||
.reveal .controls div.navigate-down.enabled { |
|||
border-top-color: #3b759e; |
|||
} |
|||
|
|||
.reveal .controls div.navigate-left.enabled:hover { |
|||
border-right-color: #74a7cb; |
|||
} |
|||
|
|||
.reveal .controls div.navigate-right.enabled:hover { |
|||
border-left-color: #74a7cb; |
|||
} |
|||
|
|||
.reveal .controls div.navigate-up.enabled:hover { |
|||
border-bottom-color: #74a7cb; |
|||
} |
|||
|
|||
.reveal .controls div.navigate-down.enabled:hover { |
|||
border-top-color: #74a7cb; |
|||
} |
|||
|
|||
/********************************************* |
|||
* PROGRESS BAR |
|||
*********************************************/ |
|||
.reveal .progress { |
|||
background: rgba(0, 0, 0, 0.2); |
|||
} |
|||
|
|||
.reveal .progress span { |
|||
background: #3b759e; |
|||
-webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); |
|||
-moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); |
|||
-ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); |
|||
-o-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); |
|||
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); |
|||
} |
@ -0,0 +1,50 @@ |
|||
/** |
|||
* Beige theme for reveal.js. |
|||
* |
|||
* Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se |
|||
*/ |
|||
|
|||
|
|||
// Default mixins and settings ----------------- |
|||
@import "../template/mixins"; |
|||
@import "../template/settings"; |
|||
// --------------------------------------------- |
|||
|
|||
|
|||
|
|||
// Include theme-specific fonts |
|||
@font-face { |
|||
font-family: 'League Gothic'; |
|||
src: url('../../lib/font/league_gothic-webfont.eot'); |
|||
src: url('../../lib/font/league_gothic-webfont.eot?#iefix') format('embedded-opentype'), |
|||
url('../../lib/font/league_gothic-webfont.woff') format('woff'), |
|||
url('../../lib/font/league_gothic-webfont.ttf') format('truetype'), |
|||
url('../../lib/font/league_gothic-webfont.svg#LeagueGothicRegular') format('svg'); |
|||
|
|||
font-weight: normal; |
|||
font-style: normal; |
|||
} |
|||
|
|||
@import url(http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); |
|||
|
|||
|
|||
// Override theme settings (see ../template/settings.scss) |
|||
$mainColor: #333; |
|||
$headingColor: #333; |
|||
$headingTextShadow: none; |
|||
$backgroundColor: #f7f3de; |
|||
$linkColor: #8b743d; |
|||
$linkColorHover: lighten( $linkColor, 20% ); |
|||
$selectionBackgroundColor: rgba(79, 64, 28, 0.99); |
|||
$heading1TextShadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 20px 20px rgba(0,0,0,.15); |
|||
|
|||
// Background generator |
|||
@mixin bodyBackground() { |
|||
@include radial-gradient( rgba(247,242,211,1), rgba(255,255,255,1) ); |
|||
} |
|||
|
|||
|
|||
|
|||
// Theme template ------------------------------ |
|||
@import "../template/theme"; |
|||
// --------------------------------------------- |
@ -0,0 +1,42 @@ |
|||
/** |
|||
* Default theme for reveal.js. |
|||
* |
|||
* Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se |
|||
*/ |
|||
|
|||
|
|||
// Default mixins and settings ----------------- |
|||
@import "../template/mixins"; |
|||
@import "../template/settings"; |
|||
// --------------------------------------------- |
|||
|
|||
|
|||
|
|||
// Include theme-specific fonts |
|||
@font-face { |
|||
font-family: 'League Gothic'; |
|||
src: url('../../lib/font/league_gothic-webfont.eot'); |
|||
src: url('../../lib/font/league_gothic-webfont.eot?#iefix') format('embedded-opentype'), |
|||
url('../../lib/font/league_gothic-webfont.woff') format('woff'), |
|||
url('../../lib/font/league_gothic-webfont.ttf') format('truetype'), |
|||
url('../../lib/font/league_gothic-webfont.svg#LeagueGothicRegular') format('svg'); |
|||
|
|||
font-weight: normal; |
|||
font-style: normal; |
|||
} |
|||
|
|||
@import url(http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); |
|||
|
|||
// Override theme settings (see ../template/settings.scss) |
|||
$heading1TextShadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 20px 20px rgba(0,0,0,.15); |
|||
|
|||
// Background generator |
|||
@mixin bodyBackground() { |
|||
@include radial-gradient( rgba(28,30,32,1), rgba(85,90,95,1) ); |
|||
} |
|||
|
|||
|
|||
|
|||
// Theme template ------------------------------ |
|||
@import "../template/theme"; |
|||
// --------------------------------------------- |
@ -0,0 +1,35 @@ |
|||
/** |
|||
* Black theme for reveal.js. |
|||
* |
|||
* Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se |
|||
*/ |
|||
|
|||
|
|||
// Default mixins and settings ----------------- |
|||
@import "../template/mixins"; |
|||
@import "../template/settings"; |
|||
// --------------------------------------------- |
|||
|
|||
|
|||
// Include theme-specific fonts |
|||
@import url(http://fonts.googleapis.com/css?family=Montserrat:700); |
|||
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic); |
|||
|
|||
|
|||
// Override theme settings (see ../template/settings.scss) |
|||
$backgroundColor: #111; |
|||
|
|||
$mainFont: 'Open Sans', Times, 'Times New Roman', serif; |
|||
$linkColor: #e7ad52; |
|||
$linkColorHover: lighten( $linkColor, 20% ); |
|||
$headingFont: 'Montserrat', Impact, sans-serif; |
|||
$headingTextShadow: none; |
|||
$headingLetterSpacing: -0.03em; |
|||
$headingTextTransform: none; |
|||
$selectionBackgroundColor: #e7ad52; |
|||
$mainFontSize: 30px; |
|||
|
|||
|
|||
// Theme template ------------------------------ |
|||
@import "../template/theme"; |
|||
// --------------------------------------------- |
@ -0,0 +1,33 @@ |
|||
/** |
|||
* A simple theme for reveal.js presentations, similar |
|||
* to the default theme. The accent color is darkblue. |
|||
* |
|||
* This theme is Copyright (C) 2012 Owen Versteeg, https://github.com/StereotypicalApps. It is MIT licensed. |
|||
* reveal.js is Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se; so is the theme - beige.css - that this is based off of. |
|||
*/ |
|||
|
|||
|
|||
// Default mixins and settings ----------------- |
|||
@import "../template/mixins"; |
|||
@import "../template/settings"; |
|||
// --------------------------------------------- |
|||
|
|||
|
|||
|
|||
// Override theme settings (see ../template/settings.scss) |
|||
$mainFont: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif; |
|||
$mainColor: #000; |
|||
$headingFont: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif; |
|||
$headingColor: #383D3D; |
|||
$headingTextShadow: none; |
|||
$headingTextTransform: none; |
|||
$backgroundColor: #F0F1EB; |
|||
$linkColor: #51483D; |
|||
$linkColorHover: lighten( $linkColor, 20% ); |
|||
$selectionBackgroundColor: #26351C; |
|||
|
|||
|
|||
|
|||
// Theme template ------------------------------ |
|||
@import "../template/theme"; |
|||
// --------------------------------------------- |
@ -0,0 +1,38 @@ |
|||
/** |
|||
* A simple theme for reveal.js presentations, similar |
|||
* to the default theme. The accent color is darkblue. |
|||
* |
|||
* This theme is Copyright (C) 2012 Owen Versteeg, https://github.com/StereotypicalApps. It is MIT licensed. |
|||
* reveal.js is Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se |
|||
*/ |
|||
|
|||
|
|||
// Default mixins and settings ----------------- |
|||
@import "../template/mixins"; |
|||
@import "../template/settings"; |
|||
// --------------------------------------------- |
|||
|
|||
|
|||
|
|||
// Include theme-specific fonts |
|||
@import url(http://fonts.googleapis.com/css?family=News+Cycle:400,700); |
|||
@import url(http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); |
|||
|
|||
|
|||
// Override theme settings (see ../template/settings.scss) |
|||
$mainFont: 'Lato', Times, 'Times New Roman', serif; |
|||
$mainColor: #000; |
|||
$headingFont: 'News Cycle', Impact, sans-serif; |
|||
$headingColor: #000; |
|||
$headingTextShadow: none; |
|||
$headingTextTransform: none; |
|||
$backgroundColor: #fff; |
|||
$linkColor: #00008B; |
|||
$linkColorHover: lighten( $linkColor, 20% ); |
|||
$selectionBackgroundColor: rgba(0, 0, 0, 0.99); |
|||
|
|||
|
|||
|
|||
// Theme template ------------------------------ |
|||
@import "../template/theme"; |
|||
// --------------------------------------------- |
@ -0,0 +1,41 @@ |
|||
/** |
|||
* Sky theme for reveal.js. |
|||
* |
|||
* Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se |
|||
*/ |
|||
|
|||
|
|||
// Default mixins and settings ----------------- |
|||
@import "../template/mixins"; |
|||
@import "../template/settings"; |
|||
// --------------------------------------------- |
|||
|
|||
|
|||
|
|||
// Include theme-specific fonts |
|||
@import url(http://fonts.googleapis.com/css?family=Quicksand:400,700,400italic,700italic); |
|||
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700); |
|||
|
|||
|
|||
// Override theme settings (see ../template/settings.scss) |
|||
$mainFont: 'Open Sans', sans-serif; |
|||
$mainColor: #333; |
|||
$headingFont: 'Quicksand', sans-serif; |
|||
$headingColor: #333; |
|||
$headingLetterSpacing: -0.08em; |
|||
$headingTextShadow: none; |
|||
$backgroundColor: #f7fbfc; |
|||
$linkColor: #3b759e; |
|||
$linkColorHover: lighten( $linkColor, 20% ); |
|||
$selectionBackgroundColor: #134674; |
|||
|
|||
// Background generator |
|||
@mixin bodyBackground() { |
|||
@include radial-gradient( #add9e4, #f7fbfc ); |
|||
} |
|||
|
|||
|
|||
|
|||
// Theme template ------------------------------ |
|||
@import "../template/theme"; |
|||
// --------------------------------------------- |
@ -0,0 +1,29 @@ |
|||
@mixin vertical-gradient( $top, $bottom ) { |
|||
background: $top; |
|||
background: -moz-linear-gradient( top, $top 0%, $bottom 100% ); |
|||
background: -webkit-gradient( linear, left top, left bottom, color-stop(0%,$top), color-stop(100%,$bottom) ); |
|||
background: -webkit-linear-gradient( top, $top 0%, $bottom 100% ); |
|||
background: -o-linear-gradient( top, $top 0%, $bottom 100% ); |
|||
background: -ms-linear-gradient( top, $top 0%, $bottom 100% ); |
|||
background: linear-gradient( top, $top 0%, $bottom 100% ); |
|||
} |
|||
|
|||
@mixin horizontal-gradient( $top, $bottom ) { |
|||
background: $top; |
|||
background: -moz-linear-gradient( left, $top 0%, $bottom 100% ); |
|||
background: -webkit-gradient( linear, left top, right top, color-stop(0%,$top), color-stop(100%,$bottom) ); |
|||
background: -webkit-linear-gradient( left, $top 0%, $bottom 100% ); |
|||
background: -o-linear-gradient( left, $top 0%, $bottom 100% ); |
|||
background: -ms-linear-gradient( left, $top 0%, $bottom 100% ); |
|||
background: linear-gradient( left, $top 0%, $bottom 100% ); |
|||
} |
|||
|
|||
@mixin radial-gradient( $outer, $inner, $type: circle ) { |
|||
background: $outer; |
|||
background: -moz-radial-gradient( center, $type cover, $inner 0%, $outer 100% ); |
|||
background: -webkit-gradient( radial, center center, 0px, center center, 100%, color-stop(0%,$inner), color-stop(100%,$outer) ); |
|||
background: -webkit-radial-gradient( center, $type cover, $inner 0%, $outer 100% ); |
|||
background: -o-radial-gradient( center, $type cover, $inner 0%, $outer 100% ); |
|||
background: -ms-radial-gradient( center, $type cover, $inner 0%, $outer 100% ); |
|||
background: radial-gradient( center, $type cover, $inner 0%, $outer 100% ); |
|||
} |
@ -0,0 +1,33 @@ |
|||
// Base settings for all themes that can optionally be |
|||
// overridden by the super-theme |
|||
|
|||
// Background of the presentation |
|||
$backgroundColor: #2b2b2b; |
|||
|
|||
// Primary/body text |
|||
$mainFont: 'Lato', Times, 'Times New Roman', serif; |
|||
$mainFontSize: 36px; |
|||
$mainColor: #eee; |
|||
|
|||
// Headings |
|||
$headingFont: 'League Gothic', Impact, sans-serif; |
|||
$headingColor: #eee; |
|||
$headingLineHeight: 0.9em; |
|||
$headingLetterSpacing: 0.02em; |
|||
$headingTextTransform: uppercase; |
|||
$headingTextShadow: 0px 0px 6px rgba(0,0,0,0.2); |
|||
$heading1TextShadow: $headingTextShadow; |
|||
|
|||
// Links and actions |
|||
$linkColor: #13DAEC; |
|||
$linkColorHover: lighten( $linkColor, 20% ); |
|||
|
|||
// Text selection |
|||
$selectionBackgroundColor: #FF5E99; |
|||
$selectionColor: #fff; |
|||
|
|||
// Generates the presentation background, can be overridden |
|||
// to return a background image or gradient |
|||
@mixin bodyBackground() { |
|||
background: $backgroundColor; |
|||
} |
@ -0,0 +1,163 @@ |
|||
// Base theme template for reveal.js |
|||
|
|||
/********************************************* |
|||
* GLOBAL STYLES |
|||
*********************************************/ |
|||
|
|||
body { |
|||
@include bodyBackground(); |
|||
background-color: $backgroundColor; |
|||
} |
|||
|
|||
.reveal { |
|||
font-family: $mainFont; |
|||
font-size: $mainFontSize; |
|||
font-weight: 200; |
|||
letter-spacing: -0.02em; |
|||
color: $mainColor; |
|||
} |
|||
|
|||
::selection { |
|||
color: $selectionColor; |
|||
background: $selectionBackgroundColor; |
|||
text-shadow: none; |
|||
} |
|||
|
|||
/********************************************* |
|||
* HEADERS |
|||
*********************************************/ |
|||
|
|||
.reveal h1, |
|||
.reveal h2, |
|||
.reveal h3, |
|||
.reveal h4, |
|||
.reveal h5, |
|||
.reveal h6 { |
|||
margin: 0 0 20px 0; |
|||
color: $headingColor; |
|||
|
|||
font-family: $headingFont; |
|||
line-height: $headingLineHeight; |
|||
letter-spacing: $headingLetterSpacing; |
|||
|
|||
text-transform: $headingTextTransform; |
|||
text-shadow: $headingTextShadow; |
|||
} |
|||
|
|||
.reveal h1 { |
|||
text-shadow: $heading1TextShadow; |
|||
} |
|||
|
|||
|
|||
/********************************************* |
|||
* LINKS |
|||
*********************************************/ |
|||
|
|||
.reveal a:not(.image) { |
|||
color: $linkColor; |
|||
text-decoration: none; |
|||
|
|||
-webkit-transition: color .15s ease; |
|||
-moz-transition: color .15s ease; |
|||
-ms-transition: color .15s ease; |
|||
-o-transition: color .15s ease; |
|||
transition: color .15s ease; |
|||
} |
|||
.reveal a:not(.image):hover { |
|||
color: $linkColorHover; |
|||
|
|||
text-shadow: none; |
|||
border: none; |
|||
} |
|||
|
|||
.reveal .roll span:after { |
|||
color: #fff; |
|||
background: darken( $linkColor, 15% ); |
|||
} |
|||
|
|||
|
|||
/********************************************* |
|||
* IMAGES |
|||
*********************************************/ |
|||
|
|||
.reveal section img { |
|||
margin: 15px 0px; |
|||
background: rgba(255,255,255,0.12); |
|||
border: 4px solid $mainColor; |
|||
|
|||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); |
|||
|
|||
-webkit-transition: all .2s linear; |
|||
-moz-transition: all .2s linear; |
|||
-ms-transition: all .2s linear; |
|||
-o-transition: all .2s linear; |
|||
transition: all .2s linear; |
|||
} |
|||
|
|||
.reveal a:hover img { |
|||
background: rgba(255,255,255,0.2); |
|||
border-color: $linkColor; |
|||
|
|||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); |
|||
} |
|||
|
|||
|
|||
/********************************************* |
|||
* NAVIGATION CONTROLS |
|||
*********************************************/ |
|||
|
|||
.reveal .controls div.navigate-left, |
|||
.reveal .controls div.navigate-left.enabled { |
|||
border-right-color: $linkColor; |
|||
} |
|||
|
|||
.reveal .controls div.navigate-right, |
|||
.reveal .controls div.navigate-right.enabled { |
|||
border-left-color: $linkColor; |
|||
} |
|||
|
|||
.reveal .controls div.navigate-up, |
|||
.reveal .controls div.navigate-up.enabled { |
|||
border-bottom-color: $linkColor; |
|||
} |
|||
|
|||
.reveal .controls div.navigate-down, |
|||
.reveal .controls div.navigate-down.enabled { |
|||
border-top-color: $linkColor; |
|||
} |
|||
|
|||
.reveal .controls div.navigate-left.enabled:hover { |
|||
border-right-color: $linkColorHover; |
|||
} |
|||
|
|||
.reveal .controls div.navigate-right.enabled:hover { |
|||
border-left-color: $linkColorHover; |
|||
} |
|||
|
|||
.reveal .controls div.navigate-up.enabled:hover { |
|||
border-bottom-color: $linkColorHover; |
|||
} |
|||
|
|||
.reveal .controls div.navigate-down.enabled:hover { |
|||
border-top-color: $linkColorHover; |
|||
} |
|||
|
|||
|
|||
/********************************************* |
|||
* PROGRESS BAR |
|||
*********************************************/ |
|||
|
|||
.reveal .progress { |
|||
background: rgba(0,0,0,0.2); |
|||
} |
|||
.reveal .progress span { |
|||
background: $linkColor; |
|||
|
|||
-webkit-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); |
|||
-moz-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); |
|||
-ms-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); |
|||
-o-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); |
|||
transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); |
|||
} |
|||
|
|||
|
File diff suppressed because it is too large
File diff suppressed because one or more lines are too long
After Width: | Height: | Size: 46 KiB |
Binary file not shown.
@ -1,27 +0,0 @@ |
|||
// From https://gist.github.com/1343518
|
|||
// Modified by Hakim to handle markdown indented with tabs
|
|||
(function(){ |
|||
|
|||
var slides = document.querySelectorAll('[data-markdown]'); |
|||
|
|||
for( var i = 0, len = slides.length; i < len; i++ ) { |
|||
var elem = slides[i]; |
|||
|
|||
// strip leading whitespace so it isn't evaluated as code
|
|||
var text = elem.innerHTML; |
|||
|
|||
var leadingWs = text.match(/^\n?(\s*)/)[1].length, |
|||
leadingTabs = text.match(/^\n?(\t*)/)[1].length; |
|||
|
|||
if( leadingTabs > 0 ) { |
|||
text = text.replace( new RegExp('\\n?\\t{' + leadingTabs + '}','g'), '\n' ); |
|||
} |
|||
else if( leadingWs > 1 ) { |
|||
text = text.replace( new RegExp('\\n? {' + leadingWs + '}','g'), '\n' ); |
|||
} |
|||
|
|||
// here, have sum HTML
|
|||
elem.innerHTML = (new Showdown.converter()).makeHtml(text); |
|||
} |
|||
|
|||
})(); |
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
@ -1,30 +1,34 @@ |
|||
{ |
|||
"author": "Hakim El Hattab", |
|||
"name": "reveal.js", |
|||
"description": "HTML5 Slideware with Presenter Notes", |
|||
"version": "1.5.1", |
|||
"version": "2.3.0", |
|||
"description": "The HTML Presentation Framework", |
|||
"homepage": "http://lab.hakim.se/reveal-js", |
|||
"author": { |
|||
"name": "Hakim El Hattab", |
|||
"email": "hakim.elhattab@gmail.com", |
|||
"web": "http://hakim.se" |
|||
}, |
|||
"repository": { |
|||
"type": "git", |
|||
"url": "git://github.com/hakimel/reveal.js.git" |
|||
}, |
|||
"engines": { |
|||
"node": "0.8.*" |
|||
"node": "~0.8.0" |
|||
}, |
|||
"scripts": { |
|||
"start": "node ./plugin/multiplex/index.js" |
|||
"test": "grunt jshint" |
|||
}, |
|||
"licenses": [ |
|||
{ |
|||
"type": "MIT", |
|||
"url": "https://github.com/hakimel/reveal.js/raw/master/LICENSE" |
|||
} |
|||
], |
|||
"dependencies": { |
|||
"underscore": "1.3.3", |
|||
"express": "2.5.9", |
|||
"socket.io": "0.9.6", |
|||
"mustache": "0.4.0" |
|||
"underscore": "~1.3.3", |
|||
"express": "~2.5.9", |
|||
"socket.io": "~0.9.6", |
|||
"mustache": "~0.4.0" |
|||
}, |
|||
"devDependencies": {}, |
|||
"subdomain": "revealjs" |
|||
"devDependencies": { |
|||
"grunt-contrib-jshint": "~0.2.0", |
|||
"grunt-contrib-cssmin": "~0.4.1", |
|||
"grunt-contrib-uglify": "~0.1.1", |
|||
"grunt-contrib-watch": "~0.2.0", |
|||
"grunt": "~0.4.0" |
|||
} |
|||
} |
|||
|
File diff suppressed because one or more lines are too long
@ -0,0 +1,97 @@ |
|||
<!doctype html> |
|||
<html lang="en"> |
|||
|
|||
<head> |
|||
<meta charset="utf-8"> |
|||
|
|||
<title>reveal.js - Markdown Demo</title> |
|||
|
|||
<link rel="stylesheet" href="../../css/reveal.css"> |
|||
<link rel="stylesheet" href="../../css/theme/default.css" id="theme"> |
|||
</head> |
|||
|
|||
<body> |
|||
|
|||
<div class="reveal"> |
|||
|
|||
<div class="slides"> |
|||
|
|||
<!-- Use external markdown resource, and separate slides by three newlines; vertical slides by two newlines --> |
|||
<section data-markdown="example.md" data-separator="^\n\n\n" data-vertical="^\n\n"></section> |
|||
|
|||
<!-- Slides are separated by three dashes (quick 'n dirty regular expression) --> |
|||
<section data-markdown data-separator="---"> |
|||
<script type="text/template"> |
|||
## Demo 1 |
|||
Slide 1 |
|||
--- |
|||
## Demo 1 |
|||
Slide 2 |
|||
--- |
|||
## Demo 1 |
|||
Slide 3 |
|||
</script> |
|||
</section> |
|||
|
|||
<!-- Slides are separated by newline + three dashes + newline, vertical slides identical but two dashes --> |
|||
<section data-markdown data-separator="^\n---\n$" data-vertical="^\n--\n$"> |
|||
<script type="text/template"> |
|||
## Demo 2 |
|||
Slide 1.1 |
|||
|
|||
-- |
|||
|
|||
## Demo 2 |
|||
Slide 1.2 |
|||
|
|||
--- |
|||
|
|||
## Demo 2 |
|||
Slide 2 |
|||
</script> |
|||
</section> |
|||
|
|||
<!-- No "extra" slides, since there are no separators defined (so they'll become horizontal rulers) --> |
|||
<section data-markdown> |
|||
<script type="text/template"> |
|||
A |
|||
|
|||
--- |
|||
|
|||
B |
|||
|
|||
--- |
|||
|
|||
C |
|||
</script> |
|||
</section> |
|||
|
|||
</div> |
|||
</div> |
|||
|
|||
<script src="../../lib/js/head.min.js"></script> |
|||
<script src="../../js/reveal.js"></script> |
|||
|
|||
<script> |
|||
|
|||
Reveal.initialize({ |
|||
controls: true, |
|||
progress: true, |
|||
history: true, |
|||
center: true, |
|||
|
|||
theme: Reveal.getQueryHash().theme, |
|||
transition: Reveal.getQueryHash().transition || 'default', |
|||
|
|||
// Optional libraries used to extend on reveal.js |
|||
dependencies: [ |
|||
{ src: '../../lib/js/classList.js', condition: function() { return !document.body.classList; } }, |
|||
{ src: 'showdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }, |
|||
{ src: 'markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } } |
|||
] |
|||
}); |
|||
|
|||
</script> |
|||
|
|||
</body> |
|||
</html> |
@ -0,0 +1,29 @@ |
|||
# Markdown Demo |
|||
|
|||
|
|||
|
|||
## External 1.1 |
|||
|
|||
Content 1.1 |
|||
|
|||
|
|||
## External 1.2 |
|||
|
|||
Content 1.2 |
|||
|
|||
|
|||
|
|||
## External 2 |
|||
|
|||
Content 2.1 |
|||
|
|||
|
|||
|
|||
## External 3.1 |
|||
|
|||
Content 3.1 |
|||
|
|||
|
|||
## External 3.2 |
|||
|
|||
Content 3.2 |
@ -0,0 +1,147 @@ |
|||
// From https://gist.github.com/1343518
|
|||
// Modified by Hakim to handle Markdown indented with tabs
|
|||
(function(){ |
|||
|
|||
if( typeof Showdown === 'undefined' ) { |
|||
throw 'The reveal.js Markdown plugin requires Showdown to be loaded'; |
|||
} |
|||
|
|||
var stripLeadingWhitespace = function(section) { |
|||
|
|||
var template = section.querySelector( 'script' ); |
|||
|
|||
// strip leading whitespace so it isn't evaluated as code
|
|||
var text = ( template || section ).textContent; |
|||
|
|||
var leadingWs = text.match(/^\n?(\s*)/)[1].length, |
|||
leadingTabs = text.match(/^\n?(\t*)/)[1].length; |
|||
|
|||
if( leadingTabs > 0 ) { |
|||
text = text.replace( new RegExp('\\n?\\t{' + leadingTabs + '}','g'), '\n' ); |
|||
} |
|||
else if( leadingWs > 1 ) { |
|||
text = text.replace( new RegExp('\\n? {' + leadingWs + '}','g'), '\n' ); |
|||
} |
|||
|
|||
return text; |
|||
|
|||
}; |
|||
|
|||
var slidifyMarkdown = function(markdown, separator, vertical) { |
|||
|
|||
separator = separator || '^\n---\n$'; |
|||
|
|||
var reSeparator = new RegExp(separator + (vertical ? '|' + vertical : ''), 'mg'), |
|||
reHorSeparator = new RegExp(separator), |
|||
matches, |
|||
lastIndex = 0, |
|||
isHorizontal, |
|||
wasHorizontal = true, |
|||
content, |
|||
sectionStack = [], |
|||
markdownSections = ''; |
|||
|
|||
// iterate until all blocks between separators are stacked up
|
|||
while( matches = reSeparator.exec(markdown) ) { |
|||
|
|||
// determine direction (horizontal by default)
|
|||
isHorizontal = reHorSeparator.test(matches[0]); |
|||
|
|||
if( !isHorizontal && wasHorizontal ) { |
|||
// create vertical stack
|
|||
sectionStack.push([]); |
|||
} |
|||
|
|||
// pluck slide content from markdown input
|
|||
content = markdown.substring(lastIndex, matches.index); |
|||
|
|||
if( isHorizontal && wasHorizontal ) { |
|||
// add to horizontal stack
|
|||
sectionStack.push(content); |
|||
} else { |
|||
// add to vertical stack
|
|||
sectionStack[sectionStack.length-1].push(content); |
|||
} |
|||
|
|||
lastIndex = reSeparator.lastIndex; |
|||
wasHorizontal = isHorizontal; |
|||
|
|||
} |
|||
|
|||
// add the remaining slide
|
|||
(wasHorizontal ? sectionStack : sectionStack[sectionStack.length-1]).push(markdown.substring(lastIndex)); |
|||
|
|||
// flatten the hierarchical stack, and insert <section data-markdown> tags
|
|||
for( var k = 0, klen = sectionStack.length; k < klen; k++ ) { |
|||
markdownSections += typeof sectionStack[k] === 'string' |
|||
? '<section data-markdown>' + sectionStack[k] + '</section>' |
|||
: '<section><section data-markdown>' + sectionStack[k].join('</section><section data-markdown>') + '</section></section>'; |
|||
} |
|||
|
|||
return markdownSections; |
|||
}; |
|||
|
|||
var querySlidingMarkdown = function() { |
|||
|
|||
var sections = document.querySelectorAll( '[data-markdown]'), |
|||
section; |
|||
|
|||
for( var j = 0, jlen = sections.length; j < jlen; j++ ) { |
|||
|
|||
section = sections[j]; |
|||
|
|||
if( section.getAttribute('data-markdown').length ) { |
|||
|
|||
var xhr = new XMLHttpRequest(), |
|||
url = section.getAttribute('data-markdown'); |
|||
|
|||
xhr.onreadystatechange = function () { |
|||
if( xhr.readyState === 4 ) { |
|||
section.outerHTML = slidifyMarkdown( xhr.responseText, section.getAttribute('data-separator'), section.getAttribute('data-vertical') ); |
|||
} |
|||
}; |
|||
|
|||
xhr.open('GET', url, false); |
|||
xhr.send(); |
|||
|
|||
} else if( section.getAttribute('data-separator') ) { |
|||
|
|||
var markdown = stripLeadingWhitespace(section); |
|||
section.outerHTML = slidifyMarkdown( markdown, section.getAttribute('data-separator'), section.getAttribute('data-vertical') ); |
|||
|
|||
} |
|||
} |
|||
|
|||
}; |
|||
|
|||
var queryMarkdownSlides = function() { |
|||
|
|||
var sections = document.querySelectorAll( '[data-markdown]'); |
|||
|
|||
for( var j = 0, jlen = sections.length; j < jlen; j++ ) { |
|||
|
|||
makeHtml(sections[j]); |
|||
|
|||
} |
|||
|
|||
}; |
|||
|
|||
var makeHtml = function(section) { |
|||
|
|||
var notes = section.querySelector( 'aside.notes' ); |
|||
|
|||
var markdown = stripLeadingWhitespace(section); |
|||
|
|||
section.innerHTML = (new Showdown.converter()).makeHtml(markdown); |
|||
|
|||
if( notes ) { |
|||
section.appendChild( notes ); |
|||
} |
|||
|
|||
}; |
|||
|
|||
querySlidingMarkdown(); |
|||
|
|||
queryMarkdownSlides(); |
|||
|
|||
})(); |
File diff suppressed because one or more lines are too long
@ -0,0 +1,252 @@ |
|||
<!doctype html> |
|||
<html lang="en"> |
|||
<head> |
|||
<meta charset="utf-8"> |
|||
|
|||
<title>reveal.js - Slide Notes</title> |
|||
|
|||
<style> |
|||
body { |
|||
font-family: Helvetica; |
|||
} |
|||
|
|||
#notes { |
|||
font-size: 24px; |
|||
width: 640px; |
|||
margin-top: 5px; |
|||
} |
|||
|
|||
#wrap-current-slide { |
|||
width: 640px; |
|||
height: 512px; |
|||
float: left; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
#current-slide { |
|||
width: 1280px; |
|||
height: 1024px; |
|||
border: none; |
|||
|
|||
-webkit-transform-origin: 0 0; |
|||
-moz-transform-origin: 0 0; |
|||
-ms-transform-origin: 0 0; |
|||
-o-transform-origin: 0 0; |
|||
transform-origin: 0 0; |
|||
|
|||
-webkit-transform: scale(0.5); |
|||
-moz-transform: scale(0.5); |
|||
-ms-transform: scale(0.5); |
|||
-o-transform: scale(0.5); |
|||
transform: scale(0.5); |
|||
} |
|||
|
|||
#wrap-next-slide { |
|||
width: 448px; |
|||
height: 358px; |
|||
float: left; |
|||
margin: 0 0 0 10px; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
#next-slide { |
|||
width: 1280px; |
|||
height: 1024px; |
|||
border: none; |
|||
|
|||
-webkit-transform-origin: 0 0; |
|||
-moz-transform-origin: 0 0; |
|||
-ms-transform-origin: 0 0; |
|||
-o-transform-origin: 0 0; |
|||
transform-origin: 0 0; |
|||
|
|||
-webkit-transform: scale(0.35); |
|||
-moz-transform: scale(0.35); |
|||
-ms-transform: scale(0.35); |
|||
-o-transform: scale(0.35); |
|||
transform: scale(0.35); |
|||
} |
|||
|
|||
.slides { |
|||
position: relative; |
|||
margin-bottom: 10px; |
|||
border: 1px solid black; |
|||
border-radius: 2px; |
|||
background: rgb(28, 30, 32); |
|||
} |
|||
|
|||
.slides span { |
|||
position: absolute; |
|||
top: 3px; |
|||
left: 3px; |
|||
font-weight: bold; |
|||
font-size: 14px; |
|||
color: rgba( 255, 255, 255, 0.9 ); |
|||
} |
|||
|
|||
.error { |
|||
font-weight: bold; |
|||
color: red; |
|||
font-size: 1.5em; |
|||
text-align: center; |
|||
margin-top: 10%; |
|||
} |
|||
|
|||
.error code { |
|||
font-family: monospace; |
|||
} |
|||
|
|||
.time { |
|||
width: 448px; |
|||
margin: 30px 0 0 10px; |
|||
float: left; |
|||
text-align: center; |
|||
opacity: 0; |
|||
|
|||
-webkit-transition: opacity 0.4s; |
|||
-moz-transition: opacity 0.4s; |
|||
-o-transition: opacity 0.4s; |
|||
transition: opacity 0.4s; |
|||
} |
|||
|
|||
.elapsed, |
|||
.clock { |
|||
color: #333; |
|||
font-size: 2em; |
|||
text-align: center; |
|||
display: inline-block; |
|||
padding: 0.5em; |
|||
background-color: #eee; |
|||
border-radius: 10px; |
|||
} |
|||
|
|||
.elapsed h2, |
|||
.clock h2 { |
|||
font-size: 0.8em; |
|||
line-height: 100%; |
|||
margin: 0; |
|||
color: #aaa; |
|||
} |
|||
|
|||
.elapsed .mute { |
|||
color: #ddd; |
|||
} |
|||
|
|||
</style> |
|||
</head> |
|||
|
|||
<body> |
|||
|
|||
<div id="wrap-current-slide" class="slides"> |
|||
<script>document.write( '<iframe width="1280" height="1024" id="current-slide" src="'+ window.opener.location.href +'"></iframe>' );</script> |
|||
</div> |
|||
|
|||
<div id="wrap-next-slide" class="slides"> |
|||
<script>document.write( '<iframe width="640" height="512" id="next-slide" src="'+ window.opener.location.href +'"></iframe>' );</script> |
|||
<span>UPCOMING:</span> |
|||
</div> |
|||
|
|||
<div class="time"> |
|||
<div class="clock"> |
|||
<h2>Time</h2> |
|||
<span id="clock">0:00:00 AM</span> |
|||
</div> |
|||
<div class="elapsed"> |
|||
<h2>Elapsed</h2> |
|||
<span id="hours">00</span><span id="minutes">:00</span><span id="seconds">:00</span> |
|||
</div> |
|||
</div> |
|||
|
|||
<div id="notes"></div> |
|||
|
|||
<script src="../../plugin/markdown/showdown.js"></script> |
|||
<script> |
|||
|
|||
window.addEventListener( 'load', function() { |
|||
|
|||
if( window.opener && window.opener.location && window.opener.location.href ) { |
|||
|
|||
var notes = document.getElementById( 'notes' ), |
|||
currentSlide = document.getElementById( 'current-slide' ), |
|||
nextSlide = document.getElementById( 'next-slide' ); |
|||
|
|||
window.addEventListener( 'message', function( event ) { |
|||
var data = JSON.parse( event.data ); |
|||
// No need for updating the notes in case of fragment changes |
|||
if ( data.notes !== undefined) { |
|||
if( data.markdown ) { |
|||
notes.innerHTML = (new Showdown.converter()).makeHtml( data.notes ); |
|||
} |
|||
else { |
|||
notes.innerHTML = data.notes; |
|||
} |
|||
} |
|||
|
|||
// Showing and hiding fragments |
|||
if( data.fragment === 'next' ) { |
|||
currentSlide.contentWindow.Reveal.nextFragment(); |
|||
} |
|||
else if( data.fragment === 'prev' ) { |
|||
currentSlide.contentWindow.Reveal.prevFragment(); |
|||
} |
|||
else { |
|||
// Update the note slides |
|||
currentSlide.contentWindow.Reveal.slide( data.indexh, data.indexv ); |
|||
nextSlide.contentWindow.Reveal.slide( data.nextindexh, data.nextindexv ); |
|||
} |
|||
|
|||
}, false ); |
|||
|
|||
var start = new Date(), |
|||
timeEl = document.querySelector( '.time' ), |
|||
clockEl = document.getElementById( 'clock' ), |
|||
hoursEl = document.getElementById( 'hours' ), |
|||
minutesEl = document.getElementById( 'minutes' ), |
|||
secondsEl = document.getElementById( 'seconds' ); |
|||
|
|||
setInterval( function() { |
|||
|
|||
timeEl.style.opacity = 1; |
|||
|
|||
var diff, hours, minutes, seconds, |
|||
now = new Date(); |
|||
|
|||
diff = now.getTime() - start.getTime(); |
|||
hours = parseInt( diff / ( 1000 * 60 * 60 ) ); |
|||
minutes = parseInt( ( diff / ( 1000 * 60 ) ) % 60 ); |
|||
seconds = parseInt( ( diff / 1000 ) % 60 ); |
|||
|
|||
clockEl.innerHTML = now.toLocaleTimeString(); |
|||
hoursEl.innerHTML = zeroPadInteger( hours ); |
|||
hoursEl.className = hours > 0 ? "" : "mute"; |
|||
minutesEl.innerHTML = ":" + zeroPadInteger( minutes ); |
|||
minutesEl.className = minutes > 0 ? "" : "mute"; |
|||
secondsEl.innerHTML = ":" + zeroPadInteger( seconds ); |
|||
|
|||
}, 1000 ); |
|||
|
|||
// Navigate the main window when the notes slide changes |
|||
currentSlide.contentWindow.Reveal.addEventListener( 'slidechanged', function( event ) { |
|||
|
|||
window.opener.Reveal.slide( event.indexh, event.indexv ); |
|||
|
|||
} ); |
|||
|
|||
} |
|||
else { |
|||
|
|||
document.body.innerHTML = '<p class="error">Unable to access <code>window.opener.location</code>.<br>Make sure the presentation is running on a web server.</p>'; |
|||
|
|||
} |
|||
|
|||
|
|||
}, false ); |
|||
|
|||
function zeroPadInteger( num ) { |
|||
var str = "00" + parseInt( num ); |
|||
return str.substring( str.length - 2 ); |
|||
} |
|||
|
|||
</script> |
|||
</body> |
|||
</html> |
@ -0,0 +1,100 @@ |
|||
/** |
|||
* Handles opening of and synchronization with the reveal.js |
|||
* notes window. |
|||
*/ |
|||
var RevealNotes = (function() { |
|||
|
|||
function openNotes() { |
|||
var jsFileLocation = document.querySelector('script[src$="notes.js"]').src; // this js file path
|
|||
jsFileLocation = jsFileLocation.replace(/notes\.js(\?.*)?$/, ''); // the js folder path
|
|||
var notesPopup = window.open( jsFileLocation + 'notes.html', 'reveal.js - Notes', 'width=1120,height=850' ); |
|||
|
|||
// Fires when slide is changed
|
|||
Reveal.addEventListener( 'slidechanged', function( event ) { |
|||
post('slidechanged'); |
|||
} ); |
|||
|
|||
// Fires when a fragment is shown
|
|||
Reveal.addEventListener( 'fragmentshown', function( event ) { |
|||
post('fragmentshown'); |
|||
} ); |
|||
|
|||
// Fires when a fragment is hidden
|
|||
Reveal.addEventListener( 'fragmenthidden', function( event ) { |
|||
post('fragmenthidden'); |
|||
} ); |
|||
|
|||
/** |
|||
* Posts the current slide data to the notes window |
|||
* |
|||
* @param {String} eventType Expecting 'slidechanged', 'fragmentshown' |
|||
* or 'fragmenthidden' set in the events above to define the needed |
|||
* slideDate. |
|||
*/ |
|||
function post( eventType ) { |
|||
var slideElement = Reveal.getCurrentSlide(), |
|||
messageData; |
|||
|
|||
if( eventType === 'slidechanged' ) { |
|||
var notes = slideElement.querySelector( 'aside.notes' ), |
|||
indexh = Reveal.getIndices().h, |
|||
indexv = Reveal.getIndices().v, |
|||
nextindexh, |
|||
nextindexv; |
|||
|
|||
if( slideElement.nextElementSibling && slideElement.parentNode.nodeName == 'SECTION' ) { |
|||
nextindexh = indexh; |
|||
nextindexv = indexv + 1; |
|||
} else { |
|||
nextindexh = indexh + 1; |
|||
nextindexv = 0; |
|||
} |
|||
|
|||
messageData = { |
|||
notes : notes ? notes.innerHTML : '', |
|||
indexh : indexh, |
|||
indexv : indexv, |
|||
nextindexh : nextindexh, |
|||
nextindexv : nextindexv, |
|||
markdown : notes ? typeof notes.getAttribute( 'data-markdown' ) === 'string' : false |
|||
}; |
|||
} |
|||
else if( eventType === 'fragmentshown' ) { |
|||
messageData = { |
|||
fragment : 'next' |
|||
}; |
|||
} |
|||
else if( eventType === 'fragmenthidden' ) { |
|||
messageData = { |
|||
fragment : 'prev' |
|||
}; |
|||
} |
|||
|
|||
notesPopup.postMessage( JSON.stringify( messageData ), '*' ); |
|||
} |
|||
|
|||
// Navigate to the current slide when the notes are loaded
|
|||
notesPopup.addEventListener( 'load', function( event ) { |
|||
post('slidechanged'); |
|||
}, false ); |
|||
} |
|||
|
|||
// If the there's a 'notes' query set, open directly
|
|||
if( window.location.search.match( /(\?|\&)notes/gi ) !== null ) { |
|||
openNotes(); |
|||
} |
|||
|
|||
// Open the notes when the 's' key is hit
|
|||
document.addEventListener( 'keydown', function( event ) { |
|||
// Disregard the event if the target is editable or a
|
|||
// modifier is present
|
|||
if ( document.querySelector( ':focus' ) !== null || event.shiftKey || event.altKey || event.ctrlKey || event.metaKey ) return; |
|||
|
|||
if( event.keyCode === 83 ) { |
|||
event.preventDefault(); |
|||
openNotes(); |
|||
} |
|||
}, false ); |
|||
|
|||
return { open: openNotes }; |
|||
})(); |
@ -0,0 +1,39 @@ |
|||
<html> |
|||
<body> |
|||
|
|||
<iframe id="reveal" src="../../index.html" style="border: 0;" width="500" height="500"></iframe> |
|||
|
|||
<div> |
|||
<input id="back" type="button" value="go back"/> |
|||
<input id="ahead" type="button" value="go ahead"/> |
|||
<input id="slideto" type="button" value="slideto 2-2"/> |
|||
</div> |
|||
|
|||
<script> |
|||
|
|||
(function (){ |
|||
|
|||
var back = document.getElementById( 'back' ), |
|||
ahead = document.getElementById( 'ahead' ), |
|||
slideto = document.getElementById( 'slideto' ), |
|||
reveal = window.frames[0]; |
|||
|
|||
back.addEventListener( 'click', function () { |
|||
|
|||
reveal.postMessage( JSON.stringify({method: 'prev', args: []}), '*' ); |
|||
}, false ); |
|||
|
|||
ahead.addEventListener( 'click', function (){ |
|||
reveal.postMessage( JSON.stringify({method: 'next', args: []}), '*' ); |
|||
}, false ); |
|||
|
|||
slideto.addEventListener( 'click', function (){ |
|||
reveal.postMessage( JSON.stringify({method: 'slide', args: [2,2]}), '*' ); |
|||
}, false ); |
|||
|
|||
}()); |
|||
|
|||
</script> |
|||
|
|||
</body> |
|||
</html> |
@ -0,0 +1,42 @@ |
|||
/* |
|||
|
|||
simple postmessage plugin |
|||
|
|||
Useful when a reveal slideshow is inside an iframe. |
|||
It allows to call reveal methods from outside. |
|||
|
|||
Example: |
|||
var reveal = window.frames[0]; |
|||
|
|||
// Reveal.prev();
|
|||
reveal.postMessage(JSON.stringify({method: 'prev', args: []}), '*'); |
|||
// Reveal.next();
|
|||
reveal.postMessage(JSON.stringify({method: 'next', args: []}), '*'); |
|||
// Reveal.slide(2, 2);
|
|||
reveal.postMessage(JSON.stringify({method: 'slide', args: [2,2]}), '*'); |
|||
|
|||
Add to the slideshow: |
|||
|
|||
dependencies: [ |
|||
... |
|||
{ src: 'plugin/postmessage/postmessage.js', async: true, condition: function() { return !!document.body.classList; } } |
|||
] |
|||
|
|||
*/ |
|||
|
|||
(function (){ |
|||
|
|||
window.addEventListener( "message", function ( event ) { |
|||
var data = JSON.parse( event.data ), |
|||
method = data.method, |
|||
args = data.args; |
|||
|
|||
if( typeof Reveal[method] === 'function' ) { |
|||
Reveal[method].apply( Reveal, data.args ); |
|||
} |
|||
}, false); |
|||
|
|||
}()); |
|||
|
|||
|
|||
|
@ -0,0 +1,39 @@ |
|||
/** |
|||
* phantomjs script for printing presentations to PDF. |
|||
* |
|||
* Example: |
|||
* phantomjs print-pdf.js "http://lab.hakim.se/reveal-js?print-pdf" reveal-demo.pdf |
|||
* |
|||
* By Manuel Bieh (https://github.com/manuelbieh)
|
|||
*/ |
|||
|
|||
// html2pdf.js
|
|||
var page = new WebPage(); |
|||
var system = require( 'system' ); |
|||
|
|||
page.paperSize = { |
|||
format: 'A4', |
|||
orientation: 'landscape', |
|||
margin: { |
|||
left: '0', |
|||
right: '0', |
|||
top: '0', |
|||
bottom: '0' |
|||
} |
|||
}; |
|||
page.zoomFactor = 1.5; |
|||
|
|||
var revealFile = system.args[1] || 'index.html?print-pdf'; |
|||
var slideFile = system.args[2] || 'slides.pdf'; |
|||
|
|||
if( slideFile.match( /\.pdf$/gi ) === null ) { |
|||
slideFile += '.pdf'; |
|||
} |
|||
|
|||
console.log( 'Printing PDF...' ); |
|||
|
|||
page.open( revealFile, function( status ) { |
|||
console.log( 'Printed succesfully' ); |
|||
page.render( slideFile ); |
|||
phantom.exit(); |
|||
} ); |
@ -0,0 +1,30 @@ |
|||
/** |
|||
* Touch-based remote controller for your presentation courtesy |
|||
* of the folks at http://remotes.io
|
|||
*/ |
|||
|
|||
(function(window){ |
|||
|
|||
/** |
|||
* Detects if we are dealing with a touch enabled device (with some false positives) |
|||
* Borrowed from modernizr: https://github.com/Modernizr/Modernizr/blob/master/feature-detects/touch.js
|
|||
*/ |
|||
var hasTouch = (function(){ |
|||
return ('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch; |
|||
})(); |
|||
|
|||
if(!hasTouch){ |
|||
head.ready( 'remotes.ne.min.js', function() { |
|||
new Remotes("preview") |
|||
.on("swipe-left", function(e){ Reveal.right(); }) |
|||
.on("swipe-right", function(e){ Reveal.left(); }) |
|||
.on("swipe-up", function(e){ Reveal.down(); }) |
|||
.on("swipe-down", function(e){ Reveal.up(); }) |
|||
.on("tap", function(e){ |
|||
Reveal.toggleOverview(); |
|||
}); |
|||
} ); |
|||
|
|||
head.js('https://raw.github.com/Remotes/Remotes/master/dist/remotes.ne.min.js'); |
|||
} |
|||
})(window); |
@ -0,0 +1,256 @@ |
|||
// Custom reveal.js integration
|
|||
(function(){ |
|||
var isEnabled = true; |
|||
|
|||
document.querySelector( '.reveal' ).addEventListener( 'mousedown', function( event ) { |
|||
if( event.altKey && isEnabled ) { |
|||
event.preventDefault(); |
|||
zoom.to({ element: event.target, pan: false }); |
|||
} |
|||
} ); |
|||
|
|||
Reveal.addEventListener( 'overviewshown', function() { isEnabled = false; } ); |
|||
Reveal.addEventListener( 'overviewhidden', function() { isEnabled = true; } ); |
|||
})(); |
|||
|
|||
/*! |
|||
* zoom.js 0.2 (modified version for use with reveal.js) |
|||
* http://lab.hakim.se/zoom-js
|
|||
* MIT licensed |
|||
* |
|||
* Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
|
|||
*/ |
|||
var zoom = (function(){ |
|||
|
|||
// The current zoom level (scale)
|
|||
var level = 1; |
|||
|
|||
// The current mouse position, used for panning
|
|||
var mouseX = 0, |
|||
mouseY = 0; |
|||
|
|||
// Timeout before pan is activated
|
|||
var panEngageTimeout = -1, |
|||
panUpdateInterval = -1; |
|||
|
|||
var currentOptions = null; |
|||
|
|||
// Check for transform support so that we can fallback otherwise
|
|||
var supportsTransforms = 'WebkitTransform' in document.body.style || |
|||
'MozTransform' in document.body.style || |
|||
'msTransform' in document.body.style || |
|||
'OTransform' in document.body.style || |
|||
'transform' in document.body.style; |
|||
|
|||
if( supportsTransforms ) { |
|||
// The easing that will be applied when we zoom in/out
|
|||
document.body.style.transition = 'transform 0.8s ease'; |
|||
document.body.style.OTransition = '-o-transform 0.8s ease'; |
|||
document.body.style.msTransition = '-ms-transform 0.8s ease'; |
|||
document.body.style.MozTransition = '-moz-transform 0.8s ease'; |
|||
document.body.style.WebkitTransition = '-webkit-transform 0.8s ease'; |
|||
} |
|||
|
|||
// Zoom out if the user hits escape
|
|||
document.addEventListener( 'keyup', function( event ) { |
|||
if( level !== 1 && event.keyCode === 27 ) { |
|||
zoom.out(); |
|||
} |
|||
}, false ); |
|||
|
|||
// Monitor mouse movement for panning
|
|||
document.addEventListener( 'mousemove', function( event ) { |
|||
if( level !== 1 ) { |
|||
mouseX = event.clientX; |
|||
mouseY = event.clientY; |
|||
} |
|||
}, false ); |
|||
|
|||
/** |
|||
* Applies the CSS required to zoom in, prioritizes use of CSS3 |
|||
* transforms but falls back on zoom for IE. |
|||
* |
|||
* @param {Number} pageOffsetX |
|||
* @param {Number} pageOffsetY |
|||
* @param {Number} elementOffsetX |
|||
* @param {Number} elementOffsetY |
|||
* @param {Number} scale |
|||
*/ |
|||
function magnify( pageOffsetX, pageOffsetY, elementOffsetX, elementOffsetY, scale ) { |
|||
|
|||
if( supportsTransforms ) { |
|||
var origin = pageOffsetX +'px '+ pageOffsetY +'px', |
|||
transform = 'translate('+ -elementOffsetX +'px,'+ -elementOffsetY +'px) scale('+ scale +')'; |
|||
|
|||
document.body.style.transformOrigin = origin; |
|||
document.body.style.OTransformOrigin = origin; |
|||
document.body.style.msTransformOrigin = origin; |
|||
document.body.style.MozTransformOrigin = origin; |
|||
document.body.style.WebkitTransformOrigin = origin; |
|||
|
|||
document.body.style.transform = transform; |
|||
document.body.style.OTransform = transform; |
|||
document.body.style.msTransform = transform; |
|||
document.body.style.MozTransform = transform; |
|||
document.body.style.WebkitTransform = transform; |
|||
} |
|||
else { |
|||
// Reset all values
|
|||
if( scale === 1 ) { |
|||
document.body.style.position = ''; |
|||
document.body.style.left = ''; |
|||
document.body.style.top = ''; |
|||
document.body.style.width = ''; |
|||
document.body.style.height = ''; |
|||
document.body.style.zoom = ''; |
|||
} |
|||
// Apply scale
|
|||
else { |
|||
document.body.style.position = 'relative'; |
|||
document.body.style.left = ( - ( pageOffsetX + elementOffsetX ) / scale ) + 'px'; |
|||
document.body.style.top = ( - ( pageOffsetY + elementOffsetY ) / scale ) + 'px'; |
|||
document.body.style.width = ( scale * 100 ) + '%'; |
|||
document.body.style.height = ( scale * 100 ) + '%'; |
|||
document.body.style.zoom = scale; |
|||
} |
|||
} |
|||
|
|||
level = scale; |
|||
|
|||
if( level !== 1 && document.documentElement.classList ) { |
|||
document.documentElement.classList.add( 'zoomed' ); |
|||
} |
|||
else { |
|||
document.documentElement.classList.remove( 'zoomed' ); |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* Pan the document when the mosue cursor approaches the edges |
|||
* of the window. |
|||
*/ |
|||
function pan() { |
|||
var range = 0.12, |
|||
rangeX = window.innerWidth * range, |
|||
rangeY = window.innerHeight * range, |
|||
scrollOffset = getScrollOffset(); |
|||
|
|||
// Up
|
|||
if( mouseY < rangeY ) { |
|||
window.scroll( scrollOffset.x, scrollOffset.y - ( 1 - ( mouseY / rangeY ) ) * ( 14 / level ) ); |
|||
} |
|||
// Down
|
|||
else if( mouseY > window.innerHeight - rangeY ) { |
|||
window.scroll( scrollOffset.x, scrollOffset.y + ( 1 - ( window.innerHeight - mouseY ) / rangeY ) * ( 14 / level ) ); |
|||
} |
|||
|
|||
// Left
|
|||
if( mouseX < rangeX ) { |
|||
window.scroll( scrollOffset.x - ( 1 - ( mouseX / rangeX ) ) * ( 14 / level ), scrollOffset.y ); |
|||
} |
|||
// Right
|
|||
else if( mouseX > window.innerWidth - rangeX ) { |
|||
window.scroll( scrollOffset.x + ( 1 - ( window.innerWidth - mouseX ) / rangeX ) * ( 14 / level ), scrollOffset.y ); |
|||
} |
|||
} |
|||
|
|||
function getScrollOffset() { |
|||
return { |
|||
x: window.scrollX !== undefined ? window.scrollX : window.pageXOffset, |
|||
y: window.scrollY !== undefined ? window.scrollY : window.pageXYffset |
|||
} |
|||
} |
|||
|
|||
return { |
|||
/** |
|||
* Zooms in on either a rectangle or HTML element. |
|||
* |
|||
* @param {Object} options |
|||
* - element: HTML element to zoom in on |
|||
* OR |
|||
* - x/y: coordinates in non-transformed space to zoom in on |
|||
* - width/height: the portion of the screen to zoom in on |
|||
* - scale: can be used instead of width/height to explicitly set scale |
|||
*/ |
|||
to: function( options ) { |
|||
// Due to an implementation limitation we can't zoom in
|
|||
// to another element without zooming out first
|
|||
if( level !== 1 ) { |
|||
zoom.out(); |
|||
} |
|||
else { |
|||
options.x = options.x || 0; |
|||
options.y = options.y || 0; |
|||
|
|||
// If an element is set, that takes precedence
|
|||
if( !!options.element ) { |
|||
// Space around the zoomed in element to leave on screen
|
|||
var padding = 20; |
|||
|
|||
options.width = options.element.getBoundingClientRect().width + ( padding * 2 ); |
|||
options.height = options.element.getBoundingClientRect().height + ( padding * 2 ); |
|||
options.x = options.element.getBoundingClientRect().left - padding; |
|||
options.y = options.element.getBoundingClientRect().top - padding; |
|||
} |
|||
|
|||
// If width/height values are set, calculate scale from those values
|
|||
if( options.width !== undefined && options.height !== undefined ) { |
|||
options.scale = Math.max( Math.min( window.innerWidth / options.width, window.innerHeight / options.height ), 1 ); |
|||
} |
|||
|
|||
if( options.scale > 1 ) { |
|||
options.x *= options.scale; |
|||
options.y *= options.scale; |
|||
|
|||
var scrollOffset = getScrollOffset(); |
|||
|
|||
if( options.element ) { |
|||
scrollOffset.x -= ( window.innerWidth - ( options.width * options.scale ) ) / 2; |
|||
} |
|||
|
|||
magnify( scrollOffset.x, scrollOffset.y, options.x, options.y, options.scale ); |
|||
|
|||
if( options.pan !== false ) { |
|||
|
|||
// Wait with engaging panning as it may conflict with the
|
|||
// zoom transition
|
|||
panEngageTimeout = setTimeout( function() { |
|||
panUpdateInterval = setInterval( pan, 1000 / 60 ); |
|||
}, 800 ); |
|||
|
|||
} |
|||
} |
|||
|
|||
currentOptions = options; |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* Resets the document zoom state to its default. |
|||
*/ |
|||
out: function() { |
|||
clearTimeout( panEngageTimeout ); |
|||
clearInterval( panUpdateInterval ); |
|||
|
|||
var scrollOffset = getScrollOffset(); |
|||
|
|||
if( currentOptions && currentOptions.element ) { |
|||
scrollOffset.x -= ( window.innerWidth - ( currentOptions.width * currentOptions.scale ) ) / 2; |
|||
} |
|||
|
|||
magnify( scrollOffset.x, scrollOffset.y, 0, 0, 1 ); |
|||
|
|||
level = 1; |
|||
}, |
|||
|
|||
// Alias
|
|||
magnify: function( options ) { this.to( options ) }, |
|||
reset: function() { this.out() }, |
|||
|
|||
zoomLevel: function() { |
|||
return level; |
|||
} |
|||
} |
|||
|
|||
})(); |
|||
|
Loading…
Reference in new issue