Hakim El Hattab
commit
20d858deb8
2
.gitignore
vendored
2
.gitignore
vendored
|
|
@ -4,3 +4,5 @@ log/*.log
|
||||||
tmp/**
|
tmp/**
|
||||||
node_modules/
|
node_modules/
|
||||||
.sass-cache
|
.sass-cache
|
||||||
|
css/reveal.min.css
|
||||||
|
js/reveal.min.js
|
||||||
|
|
|
||||||
|
|
@ -17,4 +17,3 @@ When reporting a bug make sure to include information about which browser and op
|
||||||
- Single-quoted strings
|
- Single-quoted strings
|
||||||
- Should be made towards the **dev branch**
|
- Should be made towards the **dev branch**
|
||||||
- Should be submitted from a feature/topic branch (not your master)
|
- Should be submitted from a feature/topic branch (not your master)
|
||||||
- Should not include the minified **reveal.min.js** or **reveal.min.css** files
|
|
||||||
|
|
|
||||||
75
Gruntfile.js
75
Gruntfile.js
|
|
@ -11,7 +11,7 @@ module.exports = function(grunt) {
|
||||||
' * http://lab.hakim.se/reveal-js\n' +
|
' * http://lab.hakim.se/reveal-js\n' +
|
||||||
' * MIT licensed\n' +
|
' * MIT licensed\n' +
|
||||||
' *\n' +
|
' *\n' +
|
||||||
' * Copyright (C) 2014 Hakim El Hattab, http://hakim.se\n' +
|
' * Copyright (C) 2015 Hakim El Hattab, http://hakim.se\n' +
|
||||||
' */'
|
' */'
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
@ -29,18 +29,17 @@ module.exports = function(grunt) {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
cssmin: {
|
sass: {
|
||||||
compress: {
|
core: {
|
||||||
files: {
|
files: {
|
||||||
'css/reveal.min.css': [ 'css/reveal.css' ]
|
'css/reveal.css': 'css/reveal.scss',
|
||||||
}
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
themes: {
|
||||||
sass: {
|
|
||||||
main: {
|
|
||||||
files: {
|
files: {
|
||||||
'css/theme/default.css': 'css/theme/source/default.scss',
|
'css/theme/black.css': 'css/theme/source/black.scss',
|
||||||
|
'css/theme/white.css': 'css/theme/source/white.scss',
|
||||||
|
'css/theme/league.css': 'css/theme/source/league.scss',
|
||||||
'css/theme/beige.css': 'css/theme/source/beige.scss',
|
'css/theme/beige.css': 'css/theme/source/beige.scss',
|
||||||
'css/theme/night.css': 'css/theme/source/night.scss',
|
'css/theme/night.css': 'css/theme/source/night.scss',
|
||||||
'css/theme/serif.css': 'css/theme/source/serif.scss',
|
'css/theme/serif.css': 'css/theme/source/serif.scss',
|
||||||
|
|
@ -53,6 +52,20 @@ module.exports = function(grunt) {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
autoprefixer: {
|
||||||
|
dist: {
|
||||||
|
src: 'css/reveal.css'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
cssmin: {
|
||||||
|
compress: {
|
||||||
|
files: {
|
||||||
|
'css/reveal.min.css': [ 'css/reveal.css' ]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
jshint: {
|
jshint: {
|
||||||
options: {
|
options: {
|
||||||
curly: false,
|
curly: false,
|
||||||
|
|
@ -70,7 +83,9 @@ module.exports = function(grunt) {
|
||||||
head: false,
|
head: false,
|
||||||
module: false,
|
module: false,
|
||||||
console: false,
|
console: false,
|
||||||
unescape: false
|
unescape: false,
|
||||||
|
define: false,
|
||||||
|
exports: false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
files: [ 'Gruntfile.js', 'js/reveal.js' ]
|
files: [ 'Gruntfile.js', 'js/reveal.js' ]
|
||||||
|
|
@ -80,7 +95,9 @@ module.exports = function(grunt) {
|
||||||
server: {
|
server: {
|
||||||
options: {
|
options: {
|
||||||
port: port,
|
port: port,
|
||||||
base: '.'
|
base: '.',
|
||||||
|
livereload: true,
|
||||||
|
open: true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -97,13 +114,23 @@ module.exports = function(grunt) {
|
||||||
},
|
},
|
||||||
|
|
||||||
watch: {
|
watch: {
|
||||||
main: {
|
options: {
|
||||||
files: [ 'Gruntfile.js', 'js/reveal.js', 'css/reveal.css' ],
|
livereload: true
|
||||||
tasks: 'default'
|
},
|
||||||
|
js: {
|
||||||
|
files: [ 'Gruntfile.js', 'js/reveal.js' ],
|
||||||
|
tasks: 'js'
|
||||||
},
|
},
|
||||||
theme: {
|
theme: {
|
||||||
files: [ 'css/theme/source/*.scss', 'css/theme/template/*.scss' ],
|
files: [ 'css/theme/source/*.scss', 'css/theme/template/*.scss' ],
|
||||||
tasks: 'themes'
|
tasks: 'css-themes'
|
||||||
|
},
|
||||||
|
css: {
|
||||||
|
files: [ 'css/reveal.scss' ],
|
||||||
|
tasks: 'css-core'
|
||||||
|
},
|
||||||
|
html: {
|
||||||
|
files: [ 'index.html']
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -115,15 +142,25 @@ module.exports = function(grunt) {
|
||||||
grunt.loadNpmTasks( 'grunt-contrib-cssmin' );
|
grunt.loadNpmTasks( 'grunt-contrib-cssmin' );
|
||||||
grunt.loadNpmTasks( 'grunt-contrib-uglify' );
|
grunt.loadNpmTasks( 'grunt-contrib-uglify' );
|
||||||
grunt.loadNpmTasks( 'grunt-contrib-watch' );
|
grunt.loadNpmTasks( 'grunt-contrib-watch' );
|
||||||
grunt.loadNpmTasks( 'grunt-contrib-sass' );
|
grunt.loadNpmTasks( 'grunt-sass' );
|
||||||
grunt.loadNpmTasks( 'grunt-contrib-connect' );
|
grunt.loadNpmTasks( 'grunt-contrib-connect' );
|
||||||
|
grunt.loadNpmTasks( 'grunt-autoprefixer' );
|
||||||
grunt.loadNpmTasks( 'grunt-zip' );
|
grunt.loadNpmTasks( 'grunt-zip' );
|
||||||
|
|
||||||
// Default task
|
// Default task
|
||||||
grunt.registerTask( 'default', [ 'jshint', 'cssmin', 'uglify', 'qunit' ] );
|
grunt.registerTask( 'default', [ 'css', 'js' ] );
|
||||||
|
|
||||||
// Theme task
|
// JS task
|
||||||
grunt.registerTask( 'themes', [ 'sass' ] );
|
grunt.registerTask( 'js', [ 'jshint', 'uglify', 'qunit' ] );
|
||||||
|
|
||||||
|
// Theme CSS
|
||||||
|
grunt.registerTask( 'css-themes', [ 'sass:themes' ] );
|
||||||
|
|
||||||
|
// Core framework CSS
|
||||||
|
grunt.registerTask( 'css-core', [ 'sass:core', 'autoprefixer', 'cssmin' ] );
|
||||||
|
|
||||||
|
// All CSS
|
||||||
|
grunt.registerTask( 'css', [ 'sass', 'autoprefixer', 'cssmin' ] );
|
||||||
|
|
||||||
// Package presentation to archive
|
// Package presentation to archive
|
||||||
grunt.registerTask( 'package', [ 'default', 'zip' ] );
|
grunt.registerTask( 'package', [ 'default', 'zip' ] );
|
||||||
|
|
|
||||||
2
LICENSE
2
LICENSE
|
|
@ -1,4 +1,4 @@
|
||||||
Copyright (C) 2014 Hakim El Hattab, http://hakim.se
|
Copyright (C) 2015 Hakim El Hattab, http://hakim.se
|
||||||
|
|
||||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
of this software and associated documentation files (the "Software"), to deal
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
|
|
||||||
|
|
@ -6,44 +6,46 @@
|
||||||
manipulate this file as you see fit. */
|
manipulate this file as you see fit. */
|
||||||
|
|
||||||
|
|
||||||
|
@media print {
|
||||||
|
|
||||||
/* SECTION 1: Set default width, margin, float, and
|
/* SECTION 1: Set default width, margin, float, and
|
||||||
background. This prevents elements from extending
|
background. This prevents elements from extending
|
||||||
beyond the edge of the printed page, and prevents
|
beyond the edge of the printed page, and prevents
|
||||||
unnecessary background images from printing */
|
unnecessary background images from printing */
|
||||||
body {
|
|
||||||
background: #fff;
|
|
||||||
font-size: 13pt;
|
|
||||||
width: auto;
|
|
||||||
height: auto;
|
|
||||||
border: 0;
|
|
||||||
margin: 0 5%;
|
|
||||||
padding: 0;
|
|
||||||
float: none !important;
|
|
||||||
overflow: visible;
|
|
||||||
}
|
|
||||||
html {
|
html {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
width: auto;
|
width: auto;
|
||||||
height: auto;
|
height: auto;
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
}
|
}
|
||||||
|
body {
|
||||||
|
background: #fff;
|
||||||
|
font-size: 20pt;
|
||||||
|
width: auto;
|
||||||
|
height: auto;
|
||||||
|
border: 0;
|
||||||
|
margin: 0 5%;
|
||||||
|
padding: 0;
|
||||||
|
overflow: visible;
|
||||||
|
float: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
/* SECTION 2: Remove any elements not needed in print.
|
/* SECTION 2: Remove any elements not needed in print.
|
||||||
This would include navigation, ads, sidebars, etc. */
|
This would include navigation, ads, sidebars, etc. */
|
||||||
.nestedarrow,
|
.nestedarrow,
|
||||||
.controls,
|
.controls,
|
||||||
.reveal .progress,
|
|
||||||
.reveal.overview,
|
|
||||||
.fork-reveal,
|
.fork-reveal,
|
||||||
.share-reveal,
|
.share-reveal,
|
||||||
.state-background {
|
.state-background,
|
||||||
|
.reveal .progress,
|
||||||
|
.reveal .backgrounds {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* SECTION 3: Set body font face, size, and color.
|
/* SECTION 3: Set body font face, size, and color.
|
||||||
Consider using a serif font for readability. */
|
Consider using a serif font for readability. */
|
||||||
body, p, td, li, div, a {
|
body, p, td, li, div {
|
||||||
font-size: 16pt!important;
|
font-size: 20pt!important;
|
||||||
font-family: Georgia, "Times New Roman", Times, serif !important;
|
font-family: Georgia, "Times New Roman", Times, serif !important;
|
||||||
color: #000;
|
color: #000;
|
||||||
}
|
}
|
||||||
|
|
@ -61,12 +63,12 @@ h1,h2,h3,h4,h5,h6 {
|
||||||
letter-spacing: normal;
|
letter-spacing: normal;
|
||||||
}
|
}
|
||||||
/* Need to reduce the size of the fonts for printing */
|
/* Need to reduce the size of the fonts for printing */
|
||||||
h1 { font-size: 26pt !important; }
|
h1 { font-size: 28pt !important; }
|
||||||
h2 { font-size: 22pt !important; }
|
h2 { font-size: 24pt !important; }
|
||||||
h3 { font-size: 20pt !important; }
|
h3 { font-size: 22pt !important; }
|
||||||
h4 { font-size: 20pt !important; font-variant: small-caps; }
|
h4 { font-size: 22pt !important; font-variant: small-caps; }
|
||||||
h5 { font-size: 19pt !important; }
|
h5 { font-size: 21pt !important; }
|
||||||
h6 { font-size: 18pt !important; font-style: italic; }
|
h6 { font-size: 20pt !important; font-style: italic; }
|
||||||
|
|
||||||
/* SECTION 5: Make hyperlinks more usable.
|
/* SECTION 5: Make hyperlinks more usable.
|
||||||
Ensure links are underlined, and consider appending
|
Ensure links are underlined, and consider appending
|
||||||
|
|
@ -95,52 +97,66 @@ ul, ol, div, p {
|
||||||
height: auto;
|
height: auto;
|
||||||
display: block;
|
display: block;
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
margin: auto;
|
margin: 0;
|
||||||
text-align: left !important;
|
text-align: left !important;
|
||||||
}
|
}
|
||||||
|
.reveal pre,
|
||||||
|
.reveal table {
|
||||||
|
margin-left: 0;
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
.reveal pre code {
|
||||||
|
padding: 20px;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
}
|
||||||
|
.reveal blockquote {
|
||||||
|
margin: 20px 0;
|
||||||
|
}
|
||||||
.reveal .slides {
|
.reveal .slides {
|
||||||
position: static;
|
position: static !important;
|
||||||
width: auto;
|
width: auto !important;
|
||||||
height: auto;
|
height: auto !important;
|
||||||
|
|
||||||
left: auto;
|
left: 0 !important;
|
||||||
top: auto;
|
top: 0 !important;
|
||||||
margin-left: auto;
|
margin-left: 0 !important;
|
||||||
margin-top: auto;
|
margin-top: 0 !important;
|
||||||
padding: auto;
|
padding: 0 !important;
|
||||||
|
zoom: 1 !important;
|
||||||
|
|
||||||
overflow: visible;
|
overflow: visible !important;
|
||||||
display: block;
|
display: block !important;
|
||||||
|
|
||||||
text-align: center;
|
text-align: left !important;
|
||||||
-webkit-perspective: none;
|
-webkit-perspective: none;
|
||||||
-moz-perspective: none;
|
-moz-perspective: none;
|
||||||
-ms-perspective: none;
|
-ms-perspective: none;
|
||||||
perspective: none;
|
perspective: none;
|
||||||
|
|
||||||
-webkit-perspective-origin: 50% 50%; /* there isn't a none/auto value but 50-50 is the default */
|
-webkit-perspective-origin: 50% 50%;
|
||||||
-moz-perspective-origin: 50% 50%;
|
-moz-perspective-origin: 50% 50%;
|
||||||
-ms-perspective-origin: 50% 50%;
|
-ms-perspective-origin: 50% 50%;
|
||||||
perspective-origin: 50% 50%;
|
perspective-origin: 50% 50%;
|
||||||
}
|
}
|
||||||
.reveal .slides>section,
|
.reveal .slides section {
|
||||||
.reveal .slides>section>section {
|
|
||||||
|
|
||||||
visibility: visible !important;
|
visibility: visible !important;
|
||||||
position: static !important;
|
position: static !important;
|
||||||
width: 90% !important;
|
width: 100% !important;
|
||||||
height: auto !important;
|
height: auto !important;
|
||||||
display: block !important;
|
display: block !important;
|
||||||
overflow: visible !important;
|
overflow: visible !important;
|
||||||
|
|
||||||
left: 0% !important;
|
left: 0 !important;
|
||||||
top: 0% !important;
|
top: 0 !important;
|
||||||
margin-left: 0px !important;
|
margin-left: 0 !important;
|
||||||
margin-top: 0px !important;
|
margin-top: 0 !important;
|
||||||
padding: 20px 0px !important;
|
padding: 60px 20px !important;
|
||||||
|
z-index: auto !important;
|
||||||
|
|
||||||
opacity: 1 !important;
|
opacity: 1 !important;
|
||||||
|
|
||||||
|
page-break-after: always !important;
|
||||||
|
|
||||||
-webkit-transform-style: flat !important;
|
-webkit-transform-style: flat !important;
|
||||||
-moz-transform-style: flat !important;
|
-moz-transform-style: flat !important;
|
||||||
-ms-transform-style: flat !important;
|
-ms-transform-style: flat !important;
|
||||||
|
|
@ -150,10 +166,17 @@ ul, ol, div, p {
|
||||||
-moz-transform: none !important;
|
-moz-transform: none !important;
|
||||||
-ms-transform: none !important;
|
-ms-transform: none !important;
|
||||||
transform: none !important;
|
transform: none !important;
|
||||||
|
|
||||||
|
-webkit-transition: none !important;
|
||||||
|
-moz-transition: none !important;
|
||||||
|
-ms-transition: none !important;
|
||||||
|
transition: none !important;
|
||||||
}
|
}
|
||||||
.reveal section {
|
.reveal .slides section.stack {
|
||||||
page-break-after: always !important;
|
padding: 0 !important;
|
||||||
display: block !important;
|
}
|
||||||
|
.reveal section:last-of-type {
|
||||||
|
page-break-after: avoid !important;
|
||||||
}
|
}
|
||||||
.reveal section .fragment {
|
.reveal section .fragment {
|
||||||
opacity: 1 !important;
|
opacity: 1 !important;
|
||||||
|
|
@ -164,9 +187,6 @@ ul, ol, div, p {
|
||||||
-ms-transform: none !important;
|
-ms-transform: none !important;
|
||||||
transform: none !important;
|
transform: none !important;
|
||||||
}
|
}
|
||||||
.reveal section:last-of-type {
|
|
||||||
page-break-after: avoid !important;
|
|
||||||
}
|
|
||||||
.reveal section img {
|
.reveal section img {
|
||||||
display: block;
|
display: block;
|
||||||
margin: 15px 0px;
|
margin: 15px 0px;
|
||||||
|
|
@ -174,3 +194,9 @@ ul, ol, div, p {
|
||||||
border: 1px solid #666;
|
border: 1px solid #666;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.reveal section small {
|
||||||
|
font-size: 0.8em;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -16,9 +16,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-size: 18pt;
|
|
||||||
width: 297mm;
|
|
||||||
height: 229mm;
|
|
||||||
margin: 0 auto !important;
|
margin: 0 auto !important;
|
||||||
border: 0;
|
border: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
@ -32,16 +29,13 @@ html {
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
}
|
}
|
||||||
|
|
||||||
@page {
|
|
||||||
size: letter landscape;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* SECTION 2: Remove any elements not needed in print.
|
/* SECTION 2: Remove any elements not needed in print.
|
||||||
This would include navigation, ads, sidebars, etc. */
|
This would include navigation, ads, sidebars, etc. */
|
||||||
.nestedarrow,
|
.nestedarrow,
|
||||||
.controls,
|
.reveal .controls,
|
||||||
.reveal .progress,
|
.reveal .progress,
|
||||||
|
.reveal .slide-number,
|
||||||
|
.reveal .playback,
|
||||||
.reveal.overview,
|
.reveal.overview,
|
||||||
.fork-reveal,
|
.fork-reveal,
|
||||||
.share-reveal,
|
.share-reveal,
|
||||||
|
|
@ -52,7 +46,7 @@ html {
|
||||||
/* SECTION 3: Set body font face, size, and color.
|
/* SECTION 3: Set body font face, size, and color.
|
||||||
Consider using a serif font for readability. */
|
Consider using a serif font for readability. */
|
||||||
body, p, td, li, div {
|
body, p, td, li, div {
|
||||||
font-size: 18pt;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* SECTION 4: Set heading font face, sizes, and color.
|
/* SECTION 4: Set heading font face, sizes, and color.
|
||||||
|
|
@ -62,22 +56,13 @@ h1,h2,h3,h4,h5,h6 {
|
||||||
text-shadow: 0 0 0 #000 !important;
|
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: normal;
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal pre code {
|
.reveal pre code {
|
||||||
overflow: hidden !important;
|
overflow: hidden !important;
|
||||||
font-family: monospace !important;
|
font-family: Courier, 'Courier New', monospace !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* SECTION 6: more reveal.js specific additions by @skypanther */
|
/* SECTION 5: more reveal.js specific additions by @skypanther */
|
||||||
ul, ol, div, p {
|
ul, ol, div, p {
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
position: static;
|
position: static;
|
||||||
|
|
@ -105,8 +90,6 @@ ul, ol, div, p {
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
display: block;
|
display: block;
|
||||||
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
-webkit-perspective: none;
|
-webkit-perspective: none;
|
||||||
-moz-perspective: none;
|
-moz-perspective: none;
|
||||||
-ms-perspective: none;
|
-ms-perspective: none;
|
||||||
|
|
@ -118,22 +101,17 @@ ul, ol, div, p {
|
||||||
perspective-origin: 50% 50%;
|
perspective-origin: 50% 50%;
|
||||||
}
|
}
|
||||||
.reveal .slides section {
|
.reveal .slides section {
|
||||||
|
|
||||||
page-break-after: always !important;
|
page-break-after: always !important;
|
||||||
|
|
||||||
visibility: visible !important;
|
visibility: visible !important;
|
||||||
position: relative !important;
|
position: relative !important;
|
||||||
width: 100% !important;
|
|
||||||
height: 229mm !important;
|
|
||||||
min-height: 229mm !important;
|
|
||||||
display: block !important;
|
display: block !important;
|
||||||
overflow: hidden !important;
|
position: relative !important;
|
||||||
|
|
||||||
left: 0 !important;
|
|
||||||
top: 0 !important;
|
|
||||||
margin: 0 !important;
|
margin: 0 !important;
|
||||||
padding: 2cm 2cm 0 2cm !important;
|
padding: 0 !important;
|
||||||
box-sizing: border-box !important;
|
box-sizing: border-box !important;
|
||||||
|
min-height: 1px;
|
||||||
|
|
||||||
opacity: 1 !important;
|
opacity: 1 !important;
|
||||||
|
|
||||||
|
|
@ -154,30 +132,6 @@ ul, ol, div, p {
|
||||||
height: auto !important;
|
height: auto !important;
|
||||||
min-height: auto !important;
|
min-height: auto !important;
|
||||||
}
|
}
|
||||||
.reveal .absolute-element {
|
|
||||||
margin-left: 2.2cm;
|
|
||||||
margin-top: 1.8cm;
|
|
||||||
}
|
|
||||||
.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 section .slide-background {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
z-index: 0;
|
|
||||||
}
|
|
||||||
.reveal section>* {
|
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
.reveal img {
|
.reveal img {
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
@ -185,6 +139,19 @@ ul, ol, div, p {
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
line-height: 1em;
|
line-height: 1em;
|
||||||
}
|
}
|
||||||
.reveal small a {
|
|
||||||
font-size: 16pt !important;
|
/* Slide backgrounds are placed inside of their slide when exporting to PDF */
|
||||||
|
.reveal section .slide-background {
|
||||||
|
display: block !important;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
z-index: -1;
|
||||||
}
|
}
|
||||||
|
/* All elements should be above the slide-background */
|
||||||
|
.reveal section>* {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
|
||||||
1553
css/reveal.css
1553
css/reveal.css
File diff suppressed because one or more lines are too long
7
css/reveal.min.css
vendored
7
css/reveal.min.css
vendored
File diff suppressed because one or more lines are too long
1316
css/reveal.scss
Normal file
1316
css/reveal.scss
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -1,81 +1,204 @@
|
||||||
|
@import url(../../lib/font/league-gothic/league-gothic.css);
|
||||||
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
|
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
|
||||||
/**
|
/**
|
||||||
* Beige theme for reveal.js.
|
* Beige theme for reveal.js.
|
||||||
*
|
*
|
||||||
* Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
|
* 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
|
* GLOBAL STYLES
|
||||||
*********************************************/
|
*********************************************/
|
||||||
body {
|
body {
|
||||||
background: #f7f2d3;
|
background: #f7f2d3;
|
||||||
background: -moz-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
|
background: -moz-radial-gradient(center, circle cover, #ffffff 0%, #f7f2d3 100%);
|
||||||
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, white), color-stop(100%, #f7f2d3));
|
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #ffffff), color-stop(100%, #f7f2d3));
|
||||||
background: -webkit-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
|
background: -webkit-radial-gradient(center, circle cover, #ffffff 0%, #f7f2d3 100%);
|
||||||
background: -o-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
|
background: -o-radial-gradient(center, circle cover, #ffffff 0%, #f7f2d3 100%);
|
||||||
background: -ms-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
|
background: -ms-radial-gradient(center, circle cover, #ffffff 0%, #f7f2d3 100%);
|
||||||
background: radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
|
background: radial-gradient(center, circle cover, #ffffff 0%, #f7f2d3 100%);
|
||||||
background-color: #f7f3de; }
|
background-color: #f7f3de; }
|
||||||
|
|
||||||
.reveal {
|
.reveal {
|
||||||
font-family: "Lato", sans-serif;
|
font-family: 'Lato', sans-serif;
|
||||||
font-size: 36px;
|
font-size: 36px;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
letter-spacing: -0.02em;
|
color: #333; }
|
||||||
color: #333333; }
|
|
||||||
|
|
||||||
::selection {
|
::selection {
|
||||||
color: white;
|
color: #fff;
|
||||||
background: rgba(79, 64, 28, 0.99);
|
background: rgba(79, 64, 28, 0.99);
|
||||||
text-shadow: none; }
|
text-shadow: none; }
|
||||||
|
|
||||||
|
.reveal .slides > section, .reveal .slides > section > section {
|
||||||
|
line-height: 1.3;
|
||||||
|
font-weight: inherit; }
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* HEADERS
|
* HEADERS
|
||||||
*********************************************/
|
*********************************************/
|
||||||
.reveal h1,
|
.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 {
|
||||||
.reveal h2,
|
|
||||||
.reveal h3,
|
|
||||||
.reveal h4,
|
|
||||||
.reveal h5,
|
|
||||||
.reveal h6 {
|
|
||||||
margin: 0 0 20px 0;
|
margin: 0 0 20px 0;
|
||||||
color: #333333;
|
color: #333;
|
||||||
font-family: "League Gothic", Impact, sans-serif;
|
font-family: 'League Gothic', Impact, sans-serif;
|
||||||
line-height: 0.9em;
|
font-weight: normal;
|
||||||
letter-spacing: 0.02em;
|
line-height: 1.2;
|
||||||
|
letter-spacing: normal;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
text-shadow: none; }
|
text-shadow: none;
|
||||||
|
word-wrap: break-word; }
|
||||||
|
|
||||||
.reveal h1 {
|
.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); }
|
font-size: 3.77em; }
|
||||||
|
|
||||||
|
.reveal h2 {
|
||||||
|
font-size: 2.11em; }
|
||||||
|
|
||||||
|
.reveal h3 {
|
||||||
|
font-size: 1.55em; }
|
||||||
|
|
||||||
|
.reveal h4 {
|
||||||
|
font-size: 1em; }
|
||||||
|
|
||||||
|
.reveal h1 {
|
||||||
|
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); }
|
||||||
|
|
||||||
|
/*********************************************
|
||||||
|
* OTHER
|
||||||
|
*********************************************/
|
||||||
|
.reveal p {
|
||||||
|
margin: 20px 0;
|
||||||
|
line-height: 1.3; }
|
||||||
|
|
||||||
|
/* Ensure certain elements are never larger than the slide itself */
|
||||||
|
.reveal img, .reveal video, .reveal iframe {
|
||||||
|
max-width: 95%;
|
||||||
|
max-height: 95%; }
|
||||||
|
|
||||||
|
.reveal strong, .reveal b {
|
||||||
|
font-weight: bold; }
|
||||||
|
|
||||||
|
.reveal em {
|
||||||
|
font-style: italic; }
|
||||||
|
|
||||||
|
.reveal ol, .reveal dl, .reveal ul {
|
||||||
|
display: inline-block;
|
||||||
|
text-align: left;
|
||||||
|
margin: 0 0 0 1em; }
|
||||||
|
|
||||||
|
.reveal ol {
|
||||||
|
list-style-type: decimal; }
|
||||||
|
|
||||||
|
.reveal ul {
|
||||||
|
list-style-type: disc; }
|
||||||
|
|
||||||
|
.reveal ul ul {
|
||||||
|
list-style-type: square; }
|
||||||
|
|
||||||
|
.reveal ul ul ul {
|
||||||
|
list-style-type: circle; }
|
||||||
|
|
||||||
|
.reveal ul ul, .reveal ul ol, .reveal ol ol, .reveal ol ul {
|
||||||
|
display: block;
|
||||||
|
margin-left: 40px; }
|
||||||
|
|
||||||
|
.reveal dt {
|
||||||
|
font-weight: bold; }
|
||||||
|
|
||||||
|
.reveal dd {
|
||||||
|
margin-left: 40px; }
|
||||||
|
|
||||||
|
.reveal q, .reveal blockquote {
|
||||||
|
quotes: none; }
|
||||||
|
|
||||||
|
.reveal blockquote {
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
width: 70%;
|
||||||
|
margin: 20px auto;
|
||||||
|
padding: 5px;
|
||||||
|
font-style: italic;
|
||||||
|
background: rgba(255, 255, 255, 0.05);
|
||||||
|
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); }
|
||||||
|
|
||||||
|
.reveal blockquote p:first-child, .reveal blockquote p:last-child {
|
||||||
|
display: inline-block; }
|
||||||
|
|
||||||
|
.reveal q {
|
||||||
|
font-style: italic; }
|
||||||
|
|
||||||
|
.reveal pre {
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
width: 90%;
|
||||||
|
margin: 20px auto;
|
||||||
|
text-align: left;
|
||||||
|
font-size: 0.55em;
|
||||||
|
font-family: monospace;
|
||||||
|
line-height: 1.2em;
|
||||||
|
word-wrap: break-word;
|
||||||
|
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }
|
||||||
|
|
||||||
|
.reveal code {
|
||||||
|
font-family: monospace; }
|
||||||
|
|
||||||
|
.reveal pre code {
|
||||||
|
display: block;
|
||||||
|
padding: 5px;
|
||||||
|
overflow: auto;
|
||||||
|
max-height: 400px;
|
||||||
|
word-wrap: normal;
|
||||||
|
background: #3F3F3F;
|
||||||
|
color: #DCDCDC; }
|
||||||
|
|
||||||
|
.reveal table {
|
||||||
|
margin: auto;
|
||||||
|
border-collapse: collapse;
|
||||||
|
border-spacing: 0; }
|
||||||
|
|
||||||
|
.reveal table th {
|
||||||
|
font-weight: bold; }
|
||||||
|
|
||||||
|
.reveal table th, .reveal table td {
|
||||||
|
text-align: left;
|
||||||
|
padding: 0.2em 0.5em 0.2em 0.5em;
|
||||||
|
border-bottom: 1px solid; }
|
||||||
|
|
||||||
|
.reveal table tr:last-child td {
|
||||||
|
border-bottom: none; }
|
||||||
|
|
||||||
|
.reveal sup {
|
||||||
|
vertical-align: super; }
|
||||||
|
|
||||||
|
.reveal sub {
|
||||||
|
vertical-align: sub; }
|
||||||
|
|
||||||
|
.reveal small {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 0.6em;
|
||||||
|
line-height: 1.2em;
|
||||||
|
vertical-align: top; }
|
||||||
|
|
||||||
|
.reveal small * {
|
||||||
|
vertical-align: top; }
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* LINKS
|
* LINKS
|
||||||
*********************************************/
|
*********************************************/
|
||||||
.reveal a:not(.image) {
|
.reveal a {
|
||||||
color: #8b743d;
|
color: #8b743d;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
-webkit-transition: color .15s ease;
|
-webkit-transition: color 0.15s ease;
|
||||||
-moz-transition: color .15s ease;
|
-moz-transition: color 0.15s ease;
|
||||||
-ms-transition: color .15s ease;
|
transition: color 0.15s ease; }
|
||||||
-o-transition: color .15s ease;
|
|
||||||
transition: color .15s ease; }
|
|
||||||
|
|
||||||
.reveal a:not(.image):hover {
|
.reveal a:hover {
|
||||||
color: #c0a86e;
|
color: #c0a76e;
|
||||||
text-shadow: none;
|
text-shadow: none;
|
||||||
border: none; }
|
border: none; }
|
||||||
|
|
||||||
.reveal .roll span:after {
|
.reveal .roll span:after {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
background: #564826; }
|
background: #564726; }
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* IMAGES
|
* IMAGES
|
||||||
|
|
@ -83,13 +206,13 @@ body {
|
||||||
.reveal section img {
|
.reveal section img {
|
||||||
margin: 15px 0px;
|
margin: 15px 0px;
|
||||||
background: rgba(255, 255, 255, 0.12);
|
background: rgba(255, 255, 255, 0.12);
|
||||||
border: 4px solid #333333;
|
border: 4px solid #333;
|
||||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
|
||||||
-webkit-transition: all .2s linear;
|
|
||||||
-moz-transition: all .2s linear;
|
.reveal a img {
|
||||||
-ms-transition: all .2s linear;
|
-webkit-transition: all 0.15s linear;
|
||||||
-o-transition: all .2s linear;
|
-moz-transition: all 0.15s linear;
|
||||||
transition: all .2s linear; }
|
transition: all 0.15s linear; }
|
||||||
|
|
||||||
.reveal a:hover img {
|
.reveal a:hover img {
|
||||||
background: rgba(255, 255, 255, 0.2);
|
background: rgba(255, 255, 255, 0.2);
|
||||||
|
|
@ -99,33 +222,29 @@ body {
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* NAVIGATION CONTROLS
|
* NAVIGATION CONTROLS
|
||||||
*********************************************/
|
*********************************************/
|
||||||
.reveal .controls div.navigate-left,
|
.reveal .controls div.navigate-left, .reveal .controls div.navigate-left.enabled {
|
||||||
.reveal .controls div.navigate-left.enabled {
|
|
||||||
border-right-color: #8b743d; }
|
border-right-color: #8b743d; }
|
||||||
|
|
||||||
.reveal .controls div.navigate-right,
|
.reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled {
|
||||||
.reveal .controls div.navigate-right.enabled {
|
|
||||||
border-left-color: #8b743d; }
|
border-left-color: #8b743d; }
|
||||||
|
|
||||||
.reveal .controls div.navigate-up,
|
.reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled {
|
||||||
.reveal .controls div.navigate-up.enabled {
|
|
||||||
border-bottom-color: #8b743d; }
|
border-bottom-color: #8b743d; }
|
||||||
|
|
||||||
.reveal .controls div.navigate-down,
|
.reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled {
|
||||||
.reveal .controls div.navigate-down.enabled {
|
|
||||||
border-top-color: #8b743d; }
|
border-top-color: #8b743d; }
|
||||||
|
|
||||||
.reveal .controls div.navigate-left.enabled:hover {
|
.reveal .controls div.navigate-left.enabled:hover {
|
||||||
border-right-color: #c0a86e; }
|
border-right-color: #c0a76e; }
|
||||||
|
|
||||||
.reveal .controls div.navigate-right.enabled:hover {
|
.reveal .controls div.navigate-right.enabled:hover {
|
||||||
border-left-color: #c0a86e; }
|
border-left-color: #c0a76e; }
|
||||||
|
|
||||||
.reveal .controls div.navigate-up.enabled:hover {
|
.reveal .controls div.navigate-up.enabled:hover {
|
||||||
border-bottom-color: #c0a86e; }
|
border-bottom-color: #c0a76e; }
|
||||||
|
|
||||||
.reveal .controls div.navigate-down.enabled:hover {
|
.reveal .controls div.navigate-down.enabled:hover {
|
||||||
border-top-color: #c0a86e; }
|
border-top-color: #c0a76e; }
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* PROGRESS BAR
|
* PROGRESS BAR
|
||||||
|
|
@ -137,8 +256,6 @@ body {
|
||||||
background: #8b743d;
|
background: #8b743d;
|
||||||
-webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
|
-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);
|
-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); }
|
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
|
|
|
||||||
261
css/theme/black.css
Normal file
261
css/theme/black.css
Normal file
|
|
@ -0,0 +1,261 @@
|
||||||
|
@import url(../../lib/font/source-sans-pro/source-sans-pro.css);
|
||||||
|
/**
|
||||||
|
* Black theme for reveal.js. This is the opposite of the 'white' theme.
|
||||||
|
*
|
||||||
|
* Copyright (C) 2015 Hakim El Hattab, http://hakim.se
|
||||||
|
*/
|
||||||
|
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 {
|
||||||
|
color: #222; }
|
||||||
|
|
||||||
|
/*********************************************
|
||||||
|
* GLOBAL STYLES
|
||||||
|
*********************************************/
|
||||||
|
body {
|
||||||
|
background: #222;
|
||||||
|
background-color: #222; }
|
||||||
|
|
||||||
|
.reveal {
|
||||||
|
font-family: 'Source Sans Pro', Helvetica, sans-serif;
|
||||||
|
font-size: 38px;
|
||||||
|
font-weight: normal;
|
||||||
|
color: #fff; }
|
||||||
|
|
||||||
|
::selection {
|
||||||
|
color: #fff;
|
||||||
|
background: #bee4fd;
|
||||||
|
text-shadow: none; }
|
||||||
|
|
||||||
|
.reveal .slides > section, .reveal .slides > section > section {
|
||||||
|
line-height: 1.3;
|
||||||
|
font-weight: inherit; }
|
||||||
|
|
||||||
|
/*********************************************
|
||||||
|
* HEADERS
|
||||||
|
*********************************************/
|
||||||
|
.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 {
|
||||||
|
margin: 0 0 20px 0;
|
||||||
|
color: #fff;
|
||||||
|
font-family: 'Source Sans Pro', Helvetica, sans-serif;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 1.2;
|
||||||
|
letter-spacing: normal;
|
||||||
|
text-transform: uppercase;
|
||||||
|
text-shadow: none;
|
||||||
|
word-wrap: break-word; }
|
||||||
|
|
||||||
|
.reveal h1 {
|
||||||
|
font-size: 2.5em; }
|
||||||
|
|
||||||
|
.reveal h2 {
|
||||||
|
font-size: 1.6em; }
|
||||||
|
|
||||||
|
.reveal h3 {
|
||||||
|
font-size: 1.3em; }
|
||||||
|
|
||||||
|
.reveal h4 {
|
||||||
|
font-size: 1em; }
|
||||||
|
|
||||||
|
.reveal h1 {
|
||||||
|
text-shadow: none; }
|
||||||
|
|
||||||
|
/*********************************************
|
||||||
|
* OTHER
|
||||||
|
*********************************************/
|
||||||
|
.reveal p {
|
||||||
|
margin: 20px 0;
|
||||||
|
line-height: 1.3; }
|
||||||
|
|
||||||
|
/* Ensure certain elements are never larger than the slide itself */
|
||||||
|
.reveal img, .reveal video, .reveal iframe {
|
||||||
|
max-width: 95%;
|
||||||
|
max-height: 95%; }
|
||||||
|
|
||||||
|
.reveal strong, .reveal b {
|
||||||
|
font-weight: bold; }
|
||||||
|
|
||||||
|
.reveal em {
|
||||||
|
font-style: italic; }
|
||||||
|
|
||||||
|
.reveal ol, .reveal dl, .reveal ul {
|
||||||
|
display: inline-block;
|
||||||
|
text-align: left;
|
||||||
|
margin: 0 0 0 1em; }
|
||||||
|
|
||||||
|
.reveal ol {
|
||||||
|
list-style-type: decimal; }
|
||||||
|
|
||||||
|
.reveal ul {
|
||||||
|
list-style-type: disc; }
|
||||||
|
|
||||||
|
.reveal ul ul {
|
||||||
|
list-style-type: square; }
|
||||||
|
|
||||||
|
.reveal ul ul ul {
|
||||||
|
list-style-type: circle; }
|
||||||
|
|
||||||
|
.reveal ul ul, .reveal ul ol, .reveal ol ol, .reveal ol ul {
|
||||||
|
display: block;
|
||||||
|
margin-left: 40px; }
|
||||||
|
|
||||||
|
.reveal dt {
|
||||||
|
font-weight: bold; }
|
||||||
|
|
||||||
|
.reveal dd {
|
||||||
|
margin-left: 40px; }
|
||||||
|
|
||||||
|
.reveal q, .reveal blockquote {
|
||||||
|
quotes: none; }
|
||||||
|
|
||||||
|
.reveal blockquote {
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
width: 70%;
|
||||||
|
margin: 20px auto;
|
||||||
|
padding: 5px;
|
||||||
|
font-style: italic;
|
||||||
|
background: rgba(255, 255, 255, 0.05);
|
||||||
|
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); }
|
||||||
|
|
||||||
|
.reveal blockquote p:first-child, .reveal blockquote p:last-child {
|
||||||
|
display: inline-block; }
|
||||||
|
|
||||||
|
.reveal q {
|
||||||
|
font-style: italic; }
|
||||||
|
|
||||||
|
.reveal pre {
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
width: 90%;
|
||||||
|
margin: 20px auto;
|
||||||
|
text-align: left;
|
||||||
|
font-size: 0.55em;
|
||||||
|
font-family: monospace;
|
||||||
|
line-height: 1.2em;
|
||||||
|
word-wrap: break-word;
|
||||||
|
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }
|
||||||
|
|
||||||
|
.reveal code {
|
||||||
|
font-family: monospace; }
|
||||||
|
|
||||||
|
.reveal pre code {
|
||||||
|
display: block;
|
||||||
|
padding: 5px;
|
||||||
|
overflow: auto;
|
||||||
|
max-height: 400px;
|
||||||
|
word-wrap: normal;
|
||||||
|
background: #3F3F3F;
|
||||||
|
color: #DCDCDC; }
|
||||||
|
|
||||||
|
.reveal table {
|
||||||
|
margin: auto;
|
||||||
|
border-collapse: collapse;
|
||||||
|
border-spacing: 0; }
|
||||||
|
|
||||||
|
.reveal table th {
|
||||||
|
font-weight: bold; }
|
||||||
|
|
||||||
|
.reveal table th, .reveal table td {
|
||||||
|
text-align: left;
|
||||||
|
padding: 0.2em 0.5em 0.2em 0.5em;
|
||||||
|
border-bottom: 1px solid; }
|
||||||
|
|
||||||
|
.reveal table tr:last-child td {
|
||||||
|
border-bottom: none; }
|
||||||
|
|
||||||
|
.reveal sup {
|
||||||
|
vertical-align: super; }
|
||||||
|
|
||||||
|
.reveal sub {
|
||||||
|
vertical-align: sub; }
|
||||||
|
|
||||||
|
.reveal small {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 0.6em;
|
||||||
|
line-height: 1.2em;
|
||||||
|
vertical-align: top; }
|
||||||
|
|
||||||
|
.reveal small * {
|
||||||
|
vertical-align: top; }
|
||||||
|
|
||||||
|
/*********************************************
|
||||||
|
* LINKS
|
||||||
|
*********************************************/
|
||||||
|
.reveal a {
|
||||||
|
color: #42affa;
|
||||||
|
text-decoration: none;
|
||||||
|
-webkit-transition: color 0.15s ease;
|
||||||
|
-moz-transition: color 0.15s ease;
|
||||||
|
transition: color 0.15s ease; }
|
||||||
|
|
||||||
|
.reveal a:hover {
|
||||||
|
color: #8dcffc;
|
||||||
|
text-shadow: none;
|
||||||
|
border: none; }
|
||||||
|
|
||||||
|
.reveal .roll span:after {
|
||||||
|
color: #fff;
|
||||||
|
background: #068ee9; }
|
||||||
|
|
||||||
|
/*********************************************
|
||||||
|
* IMAGES
|
||||||
|
*********************************************/
|
||||||
|
.reveal section img {
|
||||||
|
margin: 15px 0px;
|
||||||
|
background: rgba(255, 255, 255, 0.12);
|
||||||
|
border: 4px solid #fff;
|
||||||
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
|
||||||
|
|
||||||
|
.reveal a img {
|
||||||
|
-webkit-transition: all 0.15s linear;
|
||||||
|
-moz-transition: all 0.15s linear;
|
||||||
|
transition: all 0.15s linear; }
|
||||||
|
|
||||||
|
.reveal a:hover img {
|
||||||
|
background: rgba(255, 255, 255, 0.2);
|
||||||
|
border-color: #42affa;
|
||||||
|
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: #42affa; }
|
||||||
|
|
||||||
|
.reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled {
|
||||||
|
border-left-color: #42affa; }
|
||||||
|
|
||||||
|
.reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled {
|
||||||
|
border-bottom-color: #42affa; }
|
||||||
|
|
||||||
|
.reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled {
|
||||||
|
border-top-color: #42affa; }
|
||||||
|
|
||||||
|
.reveal .controls div.navigate-left.enabled:hover {
|
||||||
|
border-right-color: #8dcffc; }
|
||||||
|
|
||||||
|
.reveal .controls div.navigate-right.enabled:hover {
|
||||||
|
border-left-color: #8dcffc; }
|
||||||
|
|
||||||
|
.reveal .controls div.navigate-up.enabled:hover {
|
||||||
|
border-bottom-color: #8dcffc; }
|
||||||
|
|
||||||
|
.reveal .controls div.navigate-down.enabled:hover {
|
||||||
|
border-top-color: #8dcffc; }
|
||||||
|
|
||||||
|
/*********************************************
|
||||||
|
* PROGRESS BAR
|
||||||
|
*********************************************/
|
||||||
|
.reveal .progress {
|
||||||
|
background: rgba(0, 0, 0, 0.2); }
|
||||||
|
|
||||||
|
.reveal .progress span {
|
||||||
|
background: #42affa;
|
||||||
|
-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);
|
||||||
|
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
|
||||||
|
|
||||||
|
/*********************************************
|
||||||
|
* SLIDE NUMBER
|
||||||
|
*********************************************/
|
||||||
|
.reveal .slide-number {
|
||||||
|
color: #42affa; }
|
||||||
|
|
@ -14,67 +14,196 @@
|
||||||
* GLOBAL STYLES
|
* GLOBAL STYLES
|
||||||
*********************************************/
|
*********************************************/
|
||||||
body {
|
body {
|
||||||
background: #222222;
|
background: #222;
|
||||||
background: -moz-radial-gradient(center, circle cover, #626262 0%, #222222 100%);
|
background: -moz-radial-gradient(center, circle cover, #626262 0%, #222 100%);
|
||||||
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #626262), color-stop(100%, #222222));
|
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #626262), color-stop(100%, #222));
|
||||||
background: -webkit-radial-gradient(center, circle cover, #626262 0%, #222222 100%);
|
background: -webkit-radial-gradient(center, circle cover, #626262 0%, #222 100%);
|
||||||
background: -o-radial-gradient(center, circle cover, #626262 0%, #222222 100%);
|
background: -o-radial-gradient(center, circle cover, #626262 0%, #222 100%);
|
||||||
background: -ms-radial-gradient(center, circle cover, #626262 0%, #222222 100%);
|
background: -ms-radial-gradient(center, circle cover, #626262 0%, #222 100%);
|
||||||
background: radial-gradient(center, circle cover, #626262 0%, #222222 100%);
|
background: radial-gradient(center, circle cover, #626262 0%, #222 100%);
|
||||||
background-color: #2b2b2b; }
|
background-color: #2b2b2b; }
|
||||||
|
|
||||||
.reveal {
|
.reveal {
|
||||||
font-family: Ubuntu, "sans-serif";
|
font-family: Ubuntu, 'sans-serif';
|
||||||
font-size: 36px;
|
font-size: 36px;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
letter-spacing: -0.02em;
|
color: #eee; }
|
||||||
color: #eeeeee; }
|
|
||||||
|
|
||||||
::selection {
|
::selection {
|
||||||
color: white;
|
color: #fff;
|
||||||
background: #aa2233;
|
background: #a23;
|
||||||
text-shadow: none; }
|
text-shadow: none; }
|
||||||
|
|
||||||
|
.reveal .slides > section, .reveal .slides > section > section {
|
||||||
|
line-height: 1.3;
|
||||||
|
font-weight: inherit; }
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* HEADERS
|
* HEADERS
|
||||||
*********************************************/
|
*********************************************/
|
||||||
.reveal h1,
|
.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 {
|
||||||
.reveal h2,
|
|
||||||
.reveal h3,
|
|
||||||
.reveal h4,
|
|
||||||
.reveal h5,
|
|
||||||
.reveal h6 {
|
|
||||||
margin: 0 0 20px 0;
|
margin: 0 0 20px 0;
|
||||||
color: #eeeeee;
|
color: #eee;
|
||||||
font-family: Ubuntu, "sans-serif";
|
font-family: Ubuntu, 'sans-serif';
|
||||||
line-height: 0.9em;
|
font-weight: normal;
|
||||||
letter-spacing: 0.02em;
|
line-height: 1.2;
|
||||||
|
letter-spacing: normal;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
text-shadow: 2px 2px 2px #222222; }
|
text-shadow: 2px 2px 2px #222;
|
||||||
|
word-wrap: break-word; }
|
||||||
|
|
||||||
.reveal h1 {
|
.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); }
|
font-size: 3.77em; }
|
||||||
|
|
||||||
|
.reveal h2 {
|
||||||
|
font-size: 2.11em; }
|
||||||
|
|
||||||
|
.reveal h3 {
|
||||||
|
font-size: 1.55em; }
|
||||||
|
|
||||||
|
.reveal h4 {
|
||||||
|
font-size: 1em; }
|
||||||
|
|
||||||
|
.reveal h1 {
|
||||||
|
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); }
|
||||||
|
|
||||||
|
/*********************************************
|
||||||
|
* OTHER
|
||||||
|
*********************************************/
|
||||||
|
.reveal p {
|
||||||
|
margin: 20px 0;
|
||||||
|
line-height: 1.3; }
|
||||||
|
|
||||||
|
/* Ensure certain elements are never larger than the slide itself */
|
||||||
|
.reveal img, .reveal video, .reveal iframe {
|
||||||
|
max-width: 95%;
|
||||||
|
max-height: 95%; }
|
||||||
|
|
||||||
|
.reveal strong, .reveal b {
|
||||||
|
font-weight: bold; }
|
||||||
|
|
||||||
|
.reveal em {
|
||||||
|
font-style: italic; }
|
||||||
|
|
||||||
|
.reveal ol, .reveal dl, .reveal ul {
|
||||||
|
display: inline-block;
|
||||||
|
text-align: left;
|
||||||
|
margin: 0 0 0 1em; }
|
||||||
|
|
||||||
|
.reveal ol {
|
||||||
|
list-style-type: decimal; }
|
||||||
|
|
||||||
|
.reveal ul {
|
||||||
|
list-style-type: disc; }
|
||||||
|
|
||||||
|
.reveal ul ul {
|
||||||
|
list-style-type: square; }
|
||||||
|
|
||||||
|
.reveal ul ul ul {
|
||||||
|
list-style-type: circle; }
|
||||||
|
|
||||||
|
.reveal ul ul, .reveal ul ol, .reveal ol ol, .reveal ol ul {
|
||||||
|
display: block;
|
||||||
|
margin-left: 40px; }
|
||||||
|
|
||||||
|
.reveal dt {
|
||||||
|
font-weight: bold; }
|
||||||
|
|
||||||
|
.reveal dd {
|
||||||
|
margin-left: 40px; }
|
||||||
|
|
||||||
|
.reveal q, .reveal blockquote {
|
||||||
|
quotes: none; }
|
||||||
|
|
||||||
|
.reveal blockquote {
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
width: 70%;
|
||||||
|
margin: 20px auto;
|
||||||
|
padding: 5px;
|
||||||
|
font-style: italic;
|
||||||
|
background: rgba(255, 255, 255, 0.05);
|
||||||
|
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); }
|
||||||
|
|
||||||
|
.reveal blockquote p:first-child, .reveal blockquote p:last-child {
|
||||||
|
display: inline-block; }
|
||||||
|
|
||||||
|
.reveal q {
|
||||||
|
font-style: italic; }
|
||||||
|
|
||||||
|
.reveal pre {
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
width: 90%;
|
||||||
|
margin: 20px auto;
|
||||||
|
text-align: left;
|
||||||
|
font-size: 0.55em;
|
||||||
|
font-family: monospace;
|
||||||
|
line-height: 1.2em;
|
||||||
|
word-wrap: break-word;
|
||||||
|
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }
|
||||||
|
|
||||||
|
.reveal code {
|
||||||
|
font-family: monospace; }
|
||||||
|
|
||||||
|
.reveal pre code {
|
||||||
|
display: block;
|
||||||
|
padding: 5px;
|
||||||
|
overflow: auto;
|
||||||
|
max-height: 400px;
|
||||||
|
word-wrap: normal;
|
||||||
|
background: #3F3F3F;
|
||||||
|
color: #DCDCDC; }
|
||||||
|
|
||||||
|
.reveal table {
|
||||||
|
margin: auto;
|
||||||
|
border-collapse: collapse;
|
||||||
|
border-spacing: 0; }
|
||||||
|
|
||||||
|
.reveal table th {
|
||||||
|
font-weight: bold; }
|
||||||
|
|
||||||
|
.reveal table th, .reveal table td {
|
||||||
|
text-align: left;
|
||||||
|
padding: 0.2em 0.5em 0.2em 0.5em;
|
||||||
|
border-bottom: 1px solid; }
|
||||||
|
|
||||||
|
.reveal table tr:last-child td {
|
||||||
|
border-bottom: none; }
|
||||||
|
|
||||||
|
.reveal sup {
|
||||||
|
vertical-align: super; }
|
||||||
|
|
||||||
|
.reveal sub {
|
||||||
|
vertical-align: sub; }
|
||||||
|
|
||||||
|
.reveal small {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 0.6em;
|
||||||
|
line-height: 1.2em;
|
||||||
|
vertical-align: top; }
|
||||||
|
|
||||||
|
.reveal small * {
|
||||||
|
vertical-align: top; }
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* LINKS
|
* LINKS
|
||||||
*********************************************/
|
*********************************************/
|
||||||
.reveal a:not(.image) {
|
.reveal a {
|
||||||
color: #aa2233;
|
color: #a23;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
-webkit-transition: color .15s ease;
|
-webkit-transition: color 0.15s ease;
|
||||||
-moz-transition: color .15s ease;
|
-moz-transition: color 0.15s ease;
|
||||||
-ms-transition: color .15s ease;
|
transition: color 0.15s ease; }
|
||||||
-o-transition: color .15s ease;
|
|
||||||
transition: color .15s ease; }
|
|
||||||
|
|
||||||
.reveal a:not(.image):hover {
|
.reveal a:hover {
|
||||||
color: #dd5566;
|
color: #dd5567;
|
||||||
text-shadow: none;
|
text-shadow: none;
|
||||||
border: none; }
|
border: none; }
|
||||||
|
|
||||||
.reveal .roll span:after {
|
.reveal .roll span:after {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
background: #6a1520; }
|
background: #6a1521; }
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* IMAGES
|
* IMAGES
|
||||||
|
|
@ -82,49 +211,45 @@ body {
|
||||||
.reveal section img {
|
.reveal section img {
|
||||||
margin: 15px 0px;
|
margin: 15px 0px;
|
||||||
background: rgba(255, 255, 255, 0.12);
|
background: rgba(255, 255, 255, 0.12);
|
||||||
border: 4px solid #eeeeee;
|
border: 4px solid #eee;
|
||||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
|
||||||
-webkit-transition: all .2s linear;
|
|
||||||
-moz-transition: all .2s linear;
|
.reveal a img {
|
||||||
-ms-transition: all .2s linear;
|
-webkit-transition: all 0.15s linear;
|
||||||
-o-transition: all .2s linear;
|
-moz-transition: all 0.15s linear;
|
||||||
transition: all .2s linear; }
|
transition: all 0.15s linear; }
|
||||||
|
|
||||||
.reveal a:hover img {
|
.reveal a:hover img {
|
||||||
background: rgba(255, 255, 255, 0.2);
|
background: rgba(255, 255, 255, 0.2);
|
||||||
border-color: #aa2233;
|
border-color: #a23;
|
||||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
|
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* NAVIGATION CONTROLS
|
* NAVIGATION CONTROLS
|
||||||
*********************************************/
|
*********************************************/
|
||||||
.reveal .controls div.navigate-left,
|
.reveal .controls div.navigate-left, .reveal .controls div.navigate-left.enabled {
|
||||||
.reveal .controls div.navigate-left.enabled {
|
border-right-color: #a23; }
|
||||||
border-right-color: #aa2233; }
|
|
||||||
|
|
||||||
.reveal .controls div.navigate-right,
|
.reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled {
|
||||||
.reveal .controls div.navigate-right.enabled {
|
border-left-color: #a23; }
|
||||||
border-left-color: #aa2233; }
|
|
||||||
|
|
||||||
.reveal .controls div.navigate-up,
|
.reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled {
|
||||||
.reveal .controls div.navigate-up.enabled {
|
border-bottom-color: #a23; }
|
||||||
border-bottom-color: #aa2233; }
|
|
||||||
|
|
||||||
.reveal .controls div.navigate-down,
|
.reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled {
|
||||||
.reveal .controls div.navigate-down.enabled {
|
border-top-color: #a23; }
|
||||||
border-top-color: #aa2233; }
|
|
||||||
|
|
||||||
.reveal .controls div.navigate-left.enabled:hover {
|
.reveal .controls div.navigate-left.enabled:hover {
|
||||||
border-right-color: #dd5566; }
|
border-right-color: #dd5567; }
|
||||||
|
|
||||||
.reveal .controls div.navigate-right.enabled:hover {
|
.reveal .controls div.navigate-right.enabled:hover {
|
||||||
border-left-color: #dd5566; }
|
border-left-color: #dd5567; }
|
||||||
|
|
||||||
.reveal .controls div.navigate-up.enabled:hover {
|
.reveal .controls div.navigate-up.enabled:hover {
|
||||||
border-bottom-color: #dd5566; }
|
border-bottom-color: #dd5567; }
|
||||||
|
|
||||||
.reveal .controls div.navigate-down.enabled:hover {
|
.reveal .controls div.navigate-down.enabled:hover {
|
||||||
border-top-color: #dd5566; }
|
border-top-color: #dd5567; }
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* PROGRESS BAR
|
* PROGRESS BAR
|
||||||
|
|
@ -133,37 +258,28 @@ body {
|
||||||
background: rgba(0, 0, 0, 0.2); }
|
background: rgba(0, 0, 0, 0.2); }
|
||||||
|
|
||||||
.reveal .progress span {
|
.reveal .progress span {
|
||||||
background: #aa2233;
|
background: #a23;
|
||||||
-webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
|
-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);
|
-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); }
|
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* SLIDE NUMBER
|
* SLIDE NUMBER
|
||||||
*********************************************/
|
*********************************************/
|
||||||
.reveal .slide-number {
|
.reveal .slide-number {
|
||||||
color: #aa2233; }
|
color: #a23; }
|
||||||
|
|
||||||
.reveal p {
|
.reveal p {
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
text-shadow: 1px 1px #222222; }
|
text-shadow: 1px 1px #222; }
|
||||||
|
|
||||||
.reveal h1,
|
.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 {
|
||||||
.reveal h2,
|
|
||||||
.reveal h3,
|
|
||||||
.reveal h4,
|
|
||||||
.reveal h5,
|
|
||||||
.reveal h6 {
|
|
||||||
font-weight: 700; }
|
font-weight: 700; }
|
||||||
|
|
||||||
.reveal a:not(.image),
|
.reveal a, .reveal a:hover {
|
||||||
.reveal a:not(.image):hover {
|
|
||||||
text-shadow: 2px 2px 2px #000; }
|
text-shadow: 2px 2px 2px #000; }
|
||||||
|
|
||||||
.reveal small a:not(.image),
|
.reveal small a, .reveal small a:hover {
|
||||||
.reveal small a:not(.image):hover {
|
|
||||||
text-shadow: 1px 1px 1px #000; }
|
text-shadow: 1px 1px 1px #000; }
|
||||||
|
|
||||||
.reveal p code {
|
.reveal p code {
|
||||||
|
|
|
||||||
|
|
@ -1,148 +0,0 @@
|
||||||
@import url(https://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", sans-serif;
|
|
||||||
font-size: 36px;
|
|
||||||
font-weight: normal;
|
|
||||||
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); }
|
|
||||||
|
|
||||||
/*********************************************
|
|
||||||
* SLIDE NUMBER
|
|
||||||
*********************************************/
|
|
||||||
.reveal .slide-number {
|
|
||||||
color: #13daec; }
|
|
||||||
267
css/theme/league.css
Normal file
267
css/theme/league.css
Normal file
|
|
@ -0,0 +1,267 @@
|
||||||
|
@import url(../../lib/font/league-gothic/league-gothic.css);
|
||||||
|
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
|
||||||
|
/**
|
||||||
|
* League theme for reveal.js.
|
||||||
|
*
|
||||||
|
* This was the default theme pre-3.0.0.
|
||||||
|
*
|
||||||
|
* Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
|
||||||
|
*/
|
||||||
|
/*********************************************
|
||||||
|
* 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', sans-serif;
|
||||||
|
font-size: 36px;
|
||||||
|
font-weight: normal;
|
||||||
|
color: #eee; }
|
||||||
|
|
||||||
|
::selection {
|
||||||
|
color: #fff;
|
||||||
|
background: #FF5E99;
|
||||||
|
text-shadow: none; }
|
||||||
|
|
||||||
|
.reveal .slides > section, .reveal .slides > section > section {
|
||||||
|
line-height: 1.3;
|
||||||
|
font-weight: inherit; }
|
||||||
|
|
||||||
|
/*********************************************
|
||||||
|
* HEADERS
|
||||||
|
*********************************************/
|
||||||
|
.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 {
|
||||||
|
margin: 0 0 20px 0;
|
||||||
|
color: #eee;
|
||||||
|
font-family: 'League Gothic', Impact, sans-serif;
|
||||||
|
font-weight: normal;
|
||||||
|
line-height: 1.2;
|
||||||
|
letter-spacing: normal;
|
||||||
|
text-transform: uppercase;
|
||||||
|
text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);
|
||||||
|
word-wrap: break-word; }
|
||||||
|
|
||||||
|
.reveal h1 {
|
||||||
|
font-size: 3.77em; }
|
||||||
|
|
||||||
|
.reveal h2 {
|
||||||
|
font-size: 2.11em; }
|
||||||
|
|
||||||
|
.reveal h3 {
|
||||||
|
font-size: 1.55em; }
|
||||||
|
|
||||||
|
.reveal h4 {
|
||||||
|
font-size: 1em; }
|
||||||
|
|
||||||
|
.reveal h1 {
|
||||||
|
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); }
|
||||||
|
|
||||||
|
/*********************************************
|
||||||
|
* OTHER
|
||||||
|
*********************************************/
|
||||||
|
.reveal p {
|
||||||
|
margin: 20px 0;
|
||||||
|
line-height: 1.3; }
|
||||||
|
|
||||||
|
/* Ensure certain elements are never larger than the slide itself */
|
||||||
|
.reveal img, .reveal video, .reveal iframe {
|
||||||
|
max-width: 95%;
|
||||||
|
max-height: 95%; }
|
||||||
|
|
||||||
|
.reveal strong, .reveal b {
|
||||||
|
font-weight: bold; }
|
||||||
|
|
||||||
|
.reveal em {
|
||||||
|
font-style: italic; }
|
||||||
|
|
||||||
|
.reveal ol, .reveal dl, .reveal ul {
|
||||||
|
display: inline-block;
|
||||||
|
text-align: left;
|
||||||
|
margin: 0 0 0 1em; }
|
||||||
|
|
||||||
|
.reveal ol {
|
||||||
|
list-style-type: decimal; }
|
||||||
|
|
||||||
|
.reveal ul {
|
||||||
|
list-style-type: disc; }
|
||||||
|
|
||||||
|
.reveal ul ul {
|
||||||
|
list-style-type: square; }
|
||||||
|
|
||||||
|
.reveal ul ul ul {
|
||||||
|
list-style-type: circle; }
|
||||||
|
|
||||||
|
.reveal ul ul, .reveal ul ol, .reveal ol ol, .reveal ol ul {
|
||||||
|
display: block;
|
||||||
|
margin-left: 40px; }
|
||||||
|
|
||||||
|
.reveal dt {
|
||||||
|
font-weight: bold; }
|
||||||
|
|
||||||
|
.reveal dd {
|
||||||
|
margin-left: 40px; }
|
||||||
|
|
||||||
|
.reveal q, .reveal blockquote {
|
||||||
|
quotes: none; }
|
||||||
|
|
||||||
|
.reveal blockquote {
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
width: 70%;
|
||||||
|
margin: 20px auto;
|
||||||
|
padding: 5px;
|
||||||
|
font-style: italic;
|
||||||
|
background: rgba(255, 255, 255, 0.05);
|
||||||
|
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); }
|
||||||
|
|
||||||
|
.reveal blockquote p:first-child, .reveal blockquote p:last-child {
|
||||||
|
display: inline-block; }
|
||||||
|
|
||||||
|
.reveal q {
|
||||||
|
font-style: italic; }
|
||||||
|
|
||||||
|
.reveal pre {
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
width: 90%;
|
||||||
|
margin: 20px auto;
|
||||||
|
text-align: left;
|
||||||
|
font-size: 0.55em;
|
||||||
|
font-family: monospace;
|
||||||
|
line-height: 1.2em;
|
||||||
|
word-wrap: break-word;
|
||||||
|
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }
|
||||||
|
|
||||||
|
.reveal code {
|
||||||
|
font-family: monospace; }
|
||||||
|
|
||||||
|
.reveal pre code {
|
||||||
|
display: block;
|
||||||
|
padding: 5px;
|
||||||
|
overflow: auto;
|
||||||
|
max-height: 400px;
|
||||||
|
word-wrap: normal;
|
||||||
|
background: #3F3F3F;
|
||||||
|
color: #DCDCDC; }
|
||||||
|
|
||||||
|
.reveal table {
|
||||||
|
margin: auto;
|
||||||
|
border-collapse: collapse;
|
||||||
|
border-spacing: 0; }
|
||||||
|
|
||||||
|
.reveal table th {
|
||||||
|
font-weight: bold; }
|
||||||
|
|
||||||
|
.reveal table th, .reveal table td {
|
||||||
|
text-align: left;
|
||||||
|
padding: 0.2em 0.5em 0.2em 0.5em;
|
||||||
|
border-bottom: 1px solid; }
|
||||||
|
|
||||||
|
.reveal table tr:last-child td {
|
||||||
|
border-bottom: none; }
|
||||||
|
|
||||||
|
.reveal sup {
|
||||||
|
vertical-align: super; }
|
||||||
|
|
||||||
|
.reveal sub {
|
||||||
|
vertical-align: sub; }
|
||||||
|
|
||||||
|
.reveal small {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 0.6em;
|
||||||
|
line-height: 1.2em;
|
||||||
|
vertical-align: top; }
|
||||||
|
|
||||||
|
.reveal small * {
|
||||||
|
vertical-align: top; }
|
||||||
|
|
||||||
|
/*********************************************
|
||||||
|
* LINKS
|
||||||
|
*********************************************/
|
||||||
|
.reveal a {
|
||||||
|
color: #13DAEC;
|
||||||
|
text-decoration: none;
|
||||||
|
-webkit-transition: color 0.15s ease;
|
||||||
|
-moz-transition: color 0.15s ease;
|
||||||
|
transition: color 0.15s ease; }
|
||||||
|
|
||||||
|
.reveal a:hover {
|
||||||
|
color: #71ebf4;
|
||||||
|
text-shadow: none;
|
||||||
|
border: none; }
|
||||||
|
|
||||||
|
.reveal .roll span:after {
|
||||||
|
color: #fff;
|
||||||
|
background: #0d9ba5; }
|
||||||
|
|
||||||
|
/*********************************************
|
||||||
|
* IMAGES
|
||||||
|
*********************************************/
|
||||||
|
.reveal section img {
|
||||||
|
margin: 15px 0px;
|
||||||
|
background: rgba(255, 255, 255, 0.12);
|
||||||
|
border: 4px solid #eee;
|
||||||
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
|
||||||
|
|
||||||
|
.reveal a img {
|
||||||
|
-webkit-transition: all 0.15s linear;
|
||||||
|
-moz-transition: all 0.15s linear;
|
||||||
|
transition: all 0.15s 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: #71ebf4; }
|
||||||
|
|
||||||
|
.reveal .controls div.navigate-right.enabled:hover {
|
||||||
|
border-left-color: #71ebf4; }
|
||||||
|
|
||||||
|
.reveal .controls div.navigate-up.enabled:hover {
|
||||||
|
border-bottom-color: #71ebf4; }
|
||||||
|
|
||||||
|
.reveal .controls div.navigate-down.enabled:hover {
|
||||||
|
border-top-color: #71ebf4; }
|
||||||
|
|
||||||
|
/*********************************************
|
||||||
|
* 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);
|
||||||
|
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
|
||||||
|
|
||||||
|
/*********************************************
|
||||||
|
* SLIDE NUMBER
|
||||||
|
*********************************************/
|
||||||
|
.reveal .slide-number {
|
||||||
|
color: #13DAEC; }
|
||||||
|
|
@ -1,15 +1,9 @@
|
||||||
|
@import url(../../lib/font/league-gothic/league-gothic.css);
|
||||||
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
|
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
|
||||||
/**
|
/**
|
||||||
* Solarized Dark theme for reveal.js.
|
* Solarized Dark theme for reveal.js.
|
||||||
* Author: Achim Staebler
|
* Author: Achim Staebler
|
||||||
*/
|
*/
|
||||||
@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; }
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Solarized colors by Ethan Schoonover
|
* Solarized colors by Ethan Schoonover
|
||||||
*/
|
*/
|
||||||
|
|
@ -25,57 +19,186 @@ body {
|
||||||
background-color: #002b36; }
|
background-color: #002b36; }
|
||||||
|
|
||||||
.reveal {
|
.reveal {
|
||||||
font-family: "Lato", sans-serif;
|
font-family: 'Lato', sans-serif;
|
||||||
font-size: 36px;
|
font-size: 36px;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
letter-spacing: -0.02em;
|
|
||||||
color: #93a1a1; }
|
color: #93a1a1; }
|
||||||
|
|
||||||
::selection {
|
::selection {
|
||||||
color: white;
|
color: #fff;
|
||||||
background: #d33682;
|
background: #d33682;
|
||||||
text-shadow: none; }
|
text-shadow: none; }
|
||||||
|
|
||||||
|
.reveal .slides > section, .reveal .slides > section > section {
|
||||||
|
line-height: 1.3;
|
||||||
|
font-weight: inherit; }
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* HEADERS
|
* HEADERS
|
||||||
*********************************************/
|
*********************************************/
|
||||||
.reveal h1,
|
.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 {
|
||||||
.reveal h2,
|
|
||||||
.reveal h3,
|
|
||||||
.reveal h4,
|
|
||||||
.reveal h5,
|
|
||||||
.reveal h6 {
|
|
||||||
margin: 0 0 20px 0;
|
margin: 0 0 20px 0;
|
||||||
color: #eee8d5;
|
color: #eee8d5;
|
||||||
font-family: "League Gothic", Impact, sans-serif;
|
font-family: 'League Gothic', Impact, sans-serif;
|
||||||
line-height: 0.9em;
|
font-weight: normal;
|
||||||
letter-spacing: 0.02em;
|
line-height: 1.2;
|
||||||
|
letter-spacing: normal;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
text-shadow: none; }
|
text-shadow: none;
|
||||||
|
word-wrap: break-word; }
|
||||||
|
|
||||||
.reveal h1 {
|
.reveal h1 {
|
||||||
text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); }
|
font-size: 3.77em; }
|
||||||
|
|
||||||
|
.reveal h2 {
|
||||||
|
font-size: 2.11em; }
|
||||||
|
|
||||||
|
.reveal h3 {
|
||||||
|
font-size: 1.55em; }
|
||||||
|
|
||||||
|
.reveal h4 {
|
||||||
|
font-size: 1em; }
|
||||||
|
|
||||||
|
.reveal h1 {
|
||||||
|
text-shadow: none; }
|
||||||
|
|
||||||
|
/*********************************************
|
||||||
|
* OTHER
|
||||||
|
*********************************************/
|
||||||
|
.reveal p {
|
||||||
|
margin: 20px 0;
|
||||||
|
line-height: 1.3; }
|
||||||
|
|
||||||
|
/* Ensure certain elements are never larger than the slide itself */
|
||||||
|
.reveal img, .reveal video, .reveal iframe {
|
||||||
|
max-width: 95%;
|
||||||
|
max-height: 95%; }
|
||||||
|
|
||||||
|
.reveal strong, .reveal b {
|
||||||
|
font-weight: bold; }
|
||||||
|
|
||||||
|
.reveal em {
|
||||||
|
font-style: italic; }
|
||||||
|
|
||||||
|
.reveal ol, .reveal dl, .reveal ul {
|
||||||
|
display: inline-block;
|
||||||
|
text-align: left;
|
||||||
|
margin: 0 0 0 1em; }
|
||||||
|
|
||||||
|
.reveal ol {
|
||||||
|
list-style-type: decimal; }
|
||||||
|
|
||||||
|
.reveal ul {
|
||||||
|
list-style-type: disc; }
|
||||||
|
|
||||||
|
.reveal ul ul {
|
||||||
|
list-style-type: square; }
|
||||||
|
|
||||||
|
.reveal ul ul ul {
|
||||||
|
list-style-type: circle; }
|
||||||
|
|
||||||
|
.reveal ul ul, .reveal ul ol, .reveal ol ol, .reveal ol ul {
|
||||||
|
display: block;
|
||||||
|
margin-left: 40px; }
|
||||||
|
|
||||||
|
.reveal dt {
|
||||||
|
font-weight: bold; }
|
||||||
|
|
||||||
|
.reveal dd {
|
||||||
|
margin-left: 40px; }
|
||||||
|
|
||||||
|
.reveal q, .reveal blockquote {
|
||||||
|
quotes: none; }
|
||||||
|
|
||||||
|
.reveal blockquote {
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
width: 70%;
|
||||||
|
margin: 20px auto;
|
||||||
|
padding: 5px;
|
||||||
|
font-style: italic;
|
||||||
|
background: rgba(255, 255, 255, 0.05);
|
||||||
|
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); }
|
||||||
|
|
||||||
|
.reveal blockquote p:first-child, .reveal blockquote p:last-child {
|
||||||
|
display: inline-block; }
|
||||||
|
|
||||||
|
.reveal q {
|
||||||
|
font-style: italic; }
|
||||||
|
|
||||||
|
.reveal pre {
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
width: 90%;
|
||||||
|
margin: 20px auto;
|
||||||
|
text-align: left;
|
||||||
|
font-size: 0.55em;
|
||||||
|
font-family: monospace;
|
||||||
|
line-height: 1.2em;
|
||||||
|
word-wrap: break-word;
|
||||||
|
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }
|
||||||
|
|
||||||
|
.reveal code {
|
||||||
|
font-family: monospace; }
|
||||||
|
|
||||||
|
.reveal pre code {
|
||||||
|
display: block;
|
||||||
|
padding: 5px;
|
||||||
|
overflow: auto;
|
||||||
|
max-height: 400px;
|
||||||
|
word-wrap: normal;
|
||||||
|
background: #3F3F3F;
|
||||||
|
color: #DCDCDC; }
|
||||||
|
|
||||||
|
.reveal table {
|
||||||
|
margin: auto;
|
||||||
|
border-collapse: collapse;
|
||||||
|
border-spacing: 0; }
|
||||||
|
|
||||||
|
.reveal table th {
|
||||||
|
font-weight: bold; }
|
||||||
|
|
||||||
|
.reveal table th, .reveal table td {
|
||||||
|
text-align: left;
|
||||||
|
padding: 0.2em 0.5em 0.2em 0.5em;
|
||||||
|
border-bottom: 1px solid; }
|
||||||
|
|
||||||
|
.reveal table tr:last-child td {
|
||||||
|
border-bottom: none; }
|
||||||
|
|
||||||
|
.reveal sup {
|
||||||
|
vertical-align: super; }
|
||||||
|
|
||||||
|
.reveal sub {
|
||||||
|
vertical-align: sub; }
|
||||||
|
|
||||||
|
.reveal small {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 0.6em;
|
||||||
|
line-height: 1.2em;
|
||||||
|
vertical-align: top; }
|
||||||
|
|
||||||
|
.reveal small * {
|
||||||
|
vertical-align: top; }
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* LINKS
|
* LINKS
|
||||||
*********************************************/
|
*********************************************/
|
||||||
.reveal a:not(.image) {
|
.reveal a {
|
||||||
color: #268bd2;
|
color: #268bd2;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
-webkit-transition: color .15s ease;
|
-webkit-transition: color 0.15s ease;
|
||||||
-moz-transition: color .15s ease;
|
-moz-transition: color 0.15s ease;
|
||||||
-ms-transition: color .15s ease;
|
transition: color 0.15s ease; }
|
||||||
-o-transition: color .15s ease;
|
|
||||||
transition: color .15s ease; }
|
|
||||||
|
|
||||||
.reveal a:not(.image):hover {
|
.reveal a:hover {
|
||||||
color: #78b9e6;
|
color: #78bae6;
|
||||||
text-shadow: none;
|
text-shadow: none;
|
||||||
border: none; }
|
border: none; }
|
||||||
|
|
||||||
.reveal .roll span:after {
|
.reveal .roll span:after {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
background: #1a6091; }
|
background: #1a6291; }
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* IMAGES
|
* IMAGES
|
||||||
|
|
@ -84,12 +207,12 @@ body {
|
||||||
margin: 15px 0px;
|
margin: 15px 0px;
|
||||||
background: rgba(255, 255, 255, 0.12);
|
background: rgba(255, 255, 255, 0.12);
|
||||||
border: 4px solid #93a1a1;
|
border: 4px solid #93a1a1;
|
||||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
|
||||||
-webkit-transition: all .2s linear;
|
|
||||||
-moz-transition: all .2s linear;
|
.reveal a img {
|
||||||
-ms-transition: all .2s linear;
|
-webkit-transition: all 0.15s linear;
|
||||||
-o-transition: all .2s linear;
|
-moz-transition: all 0.15s linear;
|
||||||
transition: all .2s linear; }
|
transition: all 0.15s linear; }
|
||||||
|
|
||||||
.reveal a:hover img {
|
.reveal a:hover img {
|
||||||
background: rgba(255, 255, 255, 0.2);
|
background: rgba(255, 255, 255, 0.2);
|
||||||
|
|
@ -99,33 +222,29 @@ body {
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* NAVIGATION CONTROLS
|
* NAVIGATION CONTROLS
|
||||||
*********************************************/
|
*********************************************/
|
||||||
.reveal .controls div.navigate-left,
|
.reveal .controls div.navigate-left, .reveal .controls div.navigate-left.enabled {
|
||||||
.reveal .controls div.navigate-left.enabled {
|
|
||||||
border-right-color: #268bd2; }
|
border-right-color: #268bd2; }
|
||||||
|
|
||||||
.reveal .controls div.navigate-right,
|
.reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled {
|
||||||
.reveal .controls div.navigate-right.enabled {
|
|
||||||
border-left-color: #268bd2; }
|
border-left-color: #268bd2; }
|
||||||
|
|
||||||
.reveal .controls div.navigate-up,
|
.reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled {
|
||||||
.reveal .controls div.navigate-up.enabled {
|
|
||||||
border-bottom-color: #268bd2; }
|
border-bottom-color: #268bd2; }
|
||||||
|
|
||||||
.reveal .controls div.navigate-down,
|
.reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled {
|
||||||
.reveal .controls div.navigate-down.enabled {
|
|
||||||
border-top-color: #268bd2; }
|
border-top-color: #268bd2; }
|
||||||
|
|
||||||
.reveal .controls div.navigate-left.enabled:hover {
|
.reveal .controls div.navigate-left.enabled:hover {
|
||||||
border-right-color: #78b9e6; }
|
border-right-color: #78bae6; }
|
||||||
|
|
||||||
.reveal .controls div.navigate-right.enabled:hover {
|
.reveal .controls div.navigate-right.enabled:hover {
|
||||||
border-left-color: #78b9e6; }
|
border-left-color: #78bae6; }
|
||||||
|
|
||||||
.reveal .controls div.navigate-up.enabled:hover {
|
.reveal .controls div.navigate-up.enabled:hover {
|
||||||
border-bottom-color: #78b9e6; }
|
border-bottom-color: #78bae6; }
|
||||||
|
|
||||||
.reveal .controls div.navigate-down.enabled:hover {
|
.reveal .controls div.navigate-down.enabled:hover {
|
||||||
border-top-color: #78b9e6; }
|
border-top-color: #78bae6; }
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* PROGRESS BAR
|
* PROGRESS BAR
|
||||||
|
|
@ -137,8 +256,6 @@ body {
|
||||||
background: #268bd2;
|
background: #268bd2;
|
||||||
-webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
|
-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);
|
-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); }
|
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
|
|
|
||||||
|
|
@ -9,61 +9,190 @@
|
||||||
* GLOBAL STYLES
|
* GLOBAL STYLES
|
||||||
*********************************************/
|
*********************************************/
|
||||||
body {
|
body {
|
||||||
background: #111111;
|
background: #111;
|
||||||
background-color: #111111; }
|
background-color: #111; }
|
||||||
|
|
||||||
.reveal {
|
.reveal {
|
||||||
font-family: "Open Sans", sans-serif;
|
font-family: 'Open Sans', sans-serif;
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
letter-spacing: -0.02em;
|
color: #eee; }
|
||||||
color: #eeeeee; }
|
|
||||||
|
|
||||||
::selection {
|
::selection {
|
||||||
color: white;
|
color: #fff;
|
||||||
background: #e7ad52;
|
background: #e7ad52;
|
||||||
text-shadow: none; }
|
text-shadow: none; }
|
||||||
|
|
||||||
|
.reveal .slides > section, .reveal .slides > section > section {
|
||||||
|
line-height: 1.3;
|
||||||
|
font-weight: inherit; }
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* HEADERS
|
* HEADERS
|
||||||
*********************************************/
|
*********************************************/
|
||||||
.reveal h1,
|
.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 {
|
||||||
.reveal h2,
|
|
||||||
.reveal h3,
|
|
||||||
.reveal h4,
|
|
||||||
.reveal h5,
|
|
||||||
.reveal h6 {
|
|
||||||
margin: 0 0 20px 0;
|
margin: 0 0 20px 0;
|
||||||
color: #eeeeee;
|
color: #eee;
|
||||||
font-family: "Montserrat", Impact, sans-serif;
|
font-family: 'Montserrat', Impact, sans-serif;
|
||||||
line-height: 0.9em;
|
font-weight: normal;
|
||||||
|
line-height: 1.2;
|
||||||
letter-spacing: -0.03em;
|
letter-spacing: -0.03em;
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
text-shadow: none; }
|
text-shadow: none;
|
||||||
|
word-wrap: break-word; }
|
||||||
|
|
||||||
.reveal h1 {
|
.reveal h1 {
|
||||||
text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); }
|
font-size: 3.77em; }
|
||||||
|
|
||||||
|
.reveal h2 {
|
||||||
|
font-size: 2.11em; }
|
||||||
|
|
||||||
|
.reveal h3 {
|
||||||
|
font-size: 1.55em; }
|
||||||
|
|
||||||
|
.reveal h4 {
|
||||||
|
font-size: 1em; }
|
||||||
|
|
||||||
|
.reveal h1 {
|
||||||
|
text-shadow: none; }
|
||||||
|
|
||||||
|
/*********************************************
|
||||||
|
* OTHER
|
||||||
|
*********************************************/
|
||||||
|
.reveal p {
|
||||||
|
margin: 20px 0;
|
||||||
|
line-height: 1.3; }
|
||||||
|
|
||||||
|
/* Ensure certain elements are never larger than the slide itself */
|
||||||
|
.reveal img, .reveal video, .reveal iframe {
|
||||||
|
max-width: 95%;
|
||||||
|
max-height: 95%; }
|
||||||
|
|
||||||
|
.reveal strong, .reveal b {
|
||||||
|
font-weight: bold; }
|
||||||
|
|
||||||
|
.reveal em {
|
||||||
|
font-style: italic; }
|
||||||
|
|
||||||
|
.reveal ol, .reveal dl, .reveal ul {
|
||||||
|
display: inline-block;
|
||||||
|
text-align: left;
|
||||||
|
margin: 0 0 0 1em; }
|
||||||
|
|
||||||
|
.reveal ol {
|
||||||
|
list-style-type: decimal; }
|
||||||
|
|
||||||
|
.reveal ul {
|
||||||
|
list-style-type: disc; }
|
||||||
|
|
||||||
|
.reveal ul ul {
|
||||||
|
list-style-type: square; }
|
||||||
|
|
||||||
|
.reveal ul ul ul {
|
||||||
|
list-style-type: circle; }
|
||||||
|
|
||||||
|
.reveal ul ul, .reveal ul ol, .reveal ol ol, .reveal ol ul {
|
||||||
|
display: block;
|
||||||
|
margin-left: 40px; }
|
||||||
|
|
||||||
|
.reveal dt {
|
||||||
|
font-weight: bold; }
|
||||||
|
|
||||||
|
.reveal dd {
|
||||||
|
margin-left: 40px; }
|
||||||
|
|
||||||
|
.reveal q, .reveal blockquote {
|
||||||
|
quotes: none; }
|
||||||
|
|
||||||
|
.reveal blockquote {
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
width: 70%;
|
||||||
|
margin: 20px auto;
|
||||||
|
padding: 5px;
|
||||||
|
font-style: italic;
|
||||||
|
background: rgba(255, 255, 255, 0.05);
|
||||||
|
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); }
|
||||||
|
|
||||||
|
.reveal blockquote p:first-child, .reveal blockquote p:last-child {
|
||||||
|
display: inline-block; }
|
||||||
|
|
||||||
|
.reveal q {
|
||||||
|
font-style: italic; }
|
||||||
|
|
||||||
|
.reveal pre {
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
width: 90%;
|
||||||
|
margin: 20px auto;
|
||||||
|
text-align: left;
|
||||||
|
font-size: 0.55em;
|
||||||
|
font-family: monospace;
|
||||||
|
line-height: 1.2em;
|
||||||
|
word-wrap: break-word;
|
||||||
|
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }
|
||||||
|
|
||||||
|
.reveal code {
|
||||||
|
font-family: monospace; }
|
||||||
|
|
||||||
|
.reveal pre code {
|
||||||
|
display: block;
|
||||||
|
padding: 5px;
|
||||||
|
overflow: auto;
|
||||||
|
max-height: 400px;
|
||||||
|
word-wrap: normal;
|
||||||
|
background: #3F3F3F;
|
||||||
|
color: #DCDCDC; }
|
||||||
|
|
||||||
|
.reveal table {
|
||||||
|
margin: auto;
|
||||||
|
border-collapse: collapse;
|
||||||
|
border-spacing: 0; }
|
||||||
|
|
||||||
|
.reveal table th {
|
||||||
|
font-weight: bold; }
|
||||||
|
|
||||||
|
.reveal table th, .reveal table td {
|
||||||
|
text-align: left;
|
||||||
|
padding: 0.2em 0.5em 0.2em 0.5em;
|
||||||
|
border-bottom: 1px solid; }
|
||||||
|
|
||||||
|
.reveal table tr:last-child td {
|
||||||
|
border-bottom: none; }
|
||||||
|
|
||||||
|
.reveal sup {
|
||||||
|
vertical-align: super; }
|
||||||
|
|
||||||
|
.reveal sub {
|
||||||
|
vertical-align: sub; }
|
||||||
|
|
||||||
|
.reveal small {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 0.6em;
|
||||||
|
line-height: 1.2em;
|
||||||
|
vertical-align: top; }
|
||||||
|
|
||||||
|
.reveal small * {
|
||||||
|
vertical-align: top; }
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* LINKS
|
* LINKS
|
||||||
*********************************************/
|
*********************************************/
|
||||||
.reveal a:not(.image) {
|
.reveal a {
|
||||||
color: #e7ad52;
|
color: #e7ad52;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
-webkit-transition: color .15s ease;
|
-webkit-transition: color 0.15s ease;
|
||||||
-moz-transition: color .15s ease;
|
-moz-transition: color 0.15s ease;
|
||||||
-ms-transition: color .15s ease;
|
transition: color 0.15s ease; }
|
||||||
-o-transition: color .15s ease;
|
|
||||||
transition: color .15s ease; }
|
|
||||||
|
|
||||||
.reveal a:not(.image):hover {
|
.reveal a:hover {
|
||||||
color: #f3d7ac;
|
color: #f3d7ac;
|
||||||
text-shadow: none;
|
text-shadow: none;
|
||||||
border: none; }
|
border: none; }
|
||||||
|
|
||||||
.reveal .roll span:after {
|
.reveal .roll span:after {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
background: #d08a1d; }
|
background: #d0881d; }
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* IMAGES
|
* IMAGES
|
||||||
|
|
@ -71,13 +200,13 @@ body {
|
||||||
.reveal section img {
|
.reveal section img {
|
||||||
margin: 15px 0px;
|
margin: 15px 0px;
|
||||||
background: rgba(255, 255, 255, 0.12);
|
background: rgba(255, 255, 255, 0.12);
|
||||||
border: 4px solid #eeeeee;
|
border: 4px solid #eee;
|
||||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
|
||||||
-webkit-transition: all .2s linear;
|
|
||||||
-moz-transition: all .2s linear;
|
.reveal a img {
|
||||||
-ms-transition: all .2s linear;
|
-webkit-transition: all 0.15s linear;
|
||||||
-o-transition: all .2s linear;
|
-moz-transition: all 0.15s linear;
|
||||||
transition: all .2s linear; }
|
transition: all 0.15s linear; }
|
||||||
|
|
||||||
.reveal a:hover img {
|
.reveal a:hover img {
|
||||||
background: rgba(255, 255, 255, 0.2);
|
background: rgba(255, 255, 255, 0.2);
|
||||||
|
|
@ -87,20 +216,16 @@ body {
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* NAVIGATION CONTROLS
|
* NAVIGATION CONTROLS
|
||||||
*********************************************/
|
*********************************************/
|
||||||
.reveal .controls div.navigate-left,
|
.reveal .controls div.navigate-left, .reveal .controls div.navigate-left.enabled {
|
||||||
.reveal .controls div.navigate-left.enabled {
|
|
||||||
border-right-color: #e7ad52; }
|
border-right-color: #e7ad52; }
|
||||||
|
|
||||||
.reveal .controls div.navigate-right,
|
.reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled {
|
||||||
.reveal .controls div.navigate-right.enabled {
|
|
||||||
border-left-color: #e7ad52; }
|
border-left-color: #e7ad52; }
|
||||||
|
|
||||||
.reveal .controls div.navigate-up,
|
.reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled {
|
||||||
.reveal .controls div.navigate-up.enabled {
|
|
||||||
border-bottom-color: #e7ad52; }
|
border-bottom-color: #e7ad52; }
|
||||||
|
|
||||||
.reveal .controls div.navigate-down,
|
.reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled {
|
||||||
.reveal .controls div.navigate-down.enabled {
|
|
||||||
border-top-color: #e7ad52; }
|
border-top-color: #e7ad52; }
|
||||||
|
|
||||||
.reveal .controls div.navigate-left.enabled:hover {
|
.reveal .controls div.navigate-left.enabled:hover {
|
||||||
|
|
@ -125,8 +250,6 @@ body {
|
||||||
background: #e7ad52;
|
background: #e7ad52;
|
||||||
-webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
|
-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);
|
-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); }
|
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
|
|
|
||||||
|
|
@ -4,62 +4,191 @@
|
||||||
*
|
*
|
||||||
* This theme is Copyright (C) 2012-2013 Owen Versteeg, http://owenversteeg.com - it is MIT licensed.
|
* This theme is Copyright (C) 2012-2013 Owen Versteeg, http://owenversteeg.com - it is MIT licensed.
|
||||||
*/
|
*/
|
||||||
.reveal a:not(.image) {
|
.reveal a {
|
||||||
line-height: 1.3em; }
|
line-height: 1.3em; }
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* GLOBAL STYLES
|
* GLOBAL STYLES
|
||||||
*********************************************/
|
*********************************************/
|
||||||
body {
|
body {
|
||||||
background: #f0f1eb;
|
background: #F0F1EB;
|
||||||
background-color: #f0f1eb; }
|
background-color: #F0F1EB; }
|
||||||
|
|
||||||
.reveal {
|
.reveal {
|
||||||
font-family: "Palatino Linotype", "Book Antiqua", Palatino, FreeSerif, serif;
|
font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif;
|
||||||
font-size: 36px;
|
font-size: 36px;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
letter-spacing: -0.02em;
|
color: #000; }
|
||||||
color: black; }
|
|
||||||
|
|
||||||
::selection {
|
::selection {
|
||||||
color: white;
|
color: #fff;
|
||||||
background: #26351c;
|
background: #26351C;
|
||||||
text-shadow: none; }
|
text-shadow: none; }
|
||||||
|
|
||||||
|
.reveal .slides > section, .reveal .slides > section > section {
|
||||||
|
line-height: 1.3;
|
||||||
|
font-weight: inherit; }
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* HEADERS
|
* HEADERS
|
||||||
*********************************************/
|
*********************************************/
|
||||||
.reveal h1,
|
.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 {
|
||||||
.reveal h2,
|
|
||||||
.reveal h3,
|
|
||||||
.reveal h4,
|
|
||||||
.reveal h5,
|
|
||||||
.reveal h6 {
|
|
||||||
margin: 0 0 20px 0;
|
margin: 0 0 20px 0;
|
||||||
color: #383d3d;
|
color: #383D3D;
|
||||||
font-family: "Palatino Linotype", "Book Antiqua", Palatino, FreeSerif, serif;
|
font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif;
|
||||||
line-height: 0.9em;
|
font-weight: normal;
|
||||||
letter-spacing: 0.02em;
|
line-height: 1.2;
|
||||||
|
letter-spacing: normal;
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
text-shadow: none; }
|
text-shadow: none;
|
||||||
|
word-wrap: break-word; }
|
||||||
|
|
||||||
.reveal h1 {
|
.reveal h1 {
|
||||||
text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); }
|
font-size: 3.77em; }
|
||||||
|
|
||||||
|
.reveal h2 {
|
||||||
|
font-size: 2.11em; }
|
||||||
|
|
||||||
|
.reveal h3 {
|
||||||
|
font-size: 1.55em; }
|
||||||
|
|
||||||
|
.reveal h4 {
|
||||||
|
font-size: 1em; }
|
||||||
|
|
||||||
|
.reveal h1 {
|
||||||
|
text-shadow: none; }
|
||||||
|
|
||||||
|
/*********************************************
|
||||||
|
* OTHER
|
||||||
|
*********************************************/
|
||||||
|
.reveal p {
|
||||||
|
margin: 20px 0;
|
||||||
|
line-height: 1.3; }
|
||||||
|
|
||||||
|
/* Ensure certain elements are never larger than the slide itself */
|
||||||
|
.reveal img, .reveal video, .reveal iframe {
|
||||||
|
max-width: 95%;
|
||||||
|
max-height: 95%; }
|
||||||
|
|
||||||
|
.reveal strong, .reveal b {
|
||||||
|
font-weight: bold; }
|
||||||
|
|
||||||
|
.reveal em {
|
||||||
|
font-style: italic; }
|
||||||
|
|
||||||
|
.reveal ol, .reveal dl, .reveal ul {
|
||||||
|
display: inline-block;
|
||||||
|
text-align: left;
|
||||||
|
margin: 0 0 0 1em; }
|
||||||
|
|
||||||
|
.reveal ol {
|
||||||
|
list-style-type: decimal; }
|
||||||
|
|
||||||
|
.reveal ul {
|
||||||
|
list-style-type: disc; }
|
||||||
|
|
||||||
|
.reveal ul ul {
|
||||||
|
list-style-type: square; }
|
||||||
|
|
||||||
|
.reveal ul ul ul {
|
||||||
|
list-style-type: circle; }
|
||||||
|
|
||||||
|
.reveal ul ul, .reveal ul ol, .reveal ol ol, .reveal ol ul {
|
||||||
|
display: block;
|
||||||
|
margin-left: 40px; }
|
||||||
|
|
||||||
|
.reveal dt {
|
||||||
|
font-weight: bold; }
|
||||||
|
|
||||||
|
.reveal dd {
|
||||||
|
margin-left: 40px; }
|
||||||
|
|
||||||
|
.reveal q, .reveal blockquote {
|
||||||
|
quotes: none; }
|
||||||
|
|
||||||
|
.reveal blockquote {
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
width: 70%;
|
||||||
|
margin: 20px auto;
|
||||||
|
padding: 5px;
|
||||||
|
font-style: italic;
|
||||||
|
background: rgba(255, 255, 255, 0.05);
|
||||||
|
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); }
|
||||||
|
|
||||||
|
.reveal blockquote p:first-child, .reveal blockquote p:last-child {
|
||||||
|
display: inline-block; }
|
||||||
|
|
||||||
|
.reveal q {
|
||||||
|
font-style: italic; }
|
||||||
|
|
||||||
|
.reveal pre {
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
width: 90%;
|
||||||
|
margin: 20px auto;
|
||||||
|
text-align: left;
|
||||||
|
font-size: 0.55em;
|
||||||
|
font-family: monospace;
|
||||||
|
line-height: 1.2em;
|
||||||
|
word-wrap: break-word;
|
||||||
|
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }
|
||||||
|
|
||||||
|
.reveal code {
|
||||||
|
font-family: monospace; }
|
||||||
|
|
||||||
|
.reveal pre code {
|
||||||
|
display: block;
|
||||||
|
padding: 5px;
|
||||||
|
overflow: auto;
|
||||||
|
max-height: 400px;
|
||||||
|
word-wrap: normal;
|
||||||
|
background: #3F3F3F;
|
||||||
|
color: #DCDCDC; }
|
||||||
|
|
||||||
|
.reveal table {
|
||||||
|
margin: auto;
|
||||||
|
border-collapse: collapse;
|
||||||
|
border-spacing: 0; }
|
||||||
|
|
||||||
|
.reveal table th {
|
||||||
|
font-weight: bold; }
|
||||||
|
|
||||||
|
.reveal table th, .reveal table td {
|
||||||
|
text-align: left;
|
||||||
|
padding: 0.2em 0.5em 0.2em 0.5em;
|
||||||
|
border-bottom: 1px solid; }
|
||||||
|
|
||||||
|
.reveal table tr:last-child td {
|
||||||
|
border-bottom: none; }
|
||||||
|
|
||||||
|
.reveal sup {
|
||||||
|
vertical-align: super; }
|
||||||
|
|
||||||
|
.reveal sub {
|
||||||
|
vertical-align: sub; }
|
||||||
|
|
||||||
|
.reveal small {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 0.6em;
|
||||||
|
line-height: 1.2em;
|
||||||
|
vertical-align: top; }
|
||||||
|
|
||||||
|
.reveal small * {
|
||||||
|
vertical-align: top; }
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* LINKS
|
* LINKS
|
||||||
*********************************************/
|
*********************************************/
|
||||||
.reveal a:not(.image) {
|
.reveal a {
|
||||||
color: #51483d;
|
color: #51483D;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
-webkit-transition: color .15s ease;
|
-webkit-transition: color 0.15s ease;
|
||||||
-moz-transition: color .15s ease;
|
-moz-transition: color 0.15s ease;
|
||||||
-ms-transition: color .15s ease;
|
transition: color 0.15s ease; }
|
||||||
-o-transition: color .15s ease;
|
|
||||||
transition: color .15s ease; }
|
|
||||||
|
|
||||||
.reveal a:not(.image):hover {
|
.reveal a:hover {
|
||||||
color: #8b7c69;
|
color: #8b7b69;
|
||||||
text-shadow: none;
|
text-shadow: none;
|
||||||
border: none; }
|
border: none; }
|
||||||
|
|
||||||
|
|
@ -73,49 +202,45 @@ body {
|
||||||
.reveal section img {
|
.reveal section img {
|
||||||
margin: 15px 0px;
|
margin: 15px 0px;
|
||||||
background: rgba(255, 255, 255, 0.12);
|
background: rgba(255, 255, 255, 0.12);
|
||||||
border: 4px solid black;
|
border: 4px solid #000;
|
||||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
|
||||||
-webkit-transition: all .2s linear;
|
|
||||||
-moz-transition: all .2s linear;
|
.reveal a img {
|
||||||
-ms-transition: all .2s linear;
|
-webkit-transition: all 0.15s linear;
|
||||||
-o-transition: all .2s linear;
|
-moz-transition: all 0.15s linear;
|
||||||
transition: all .2s linear; }
|
transition: all 0.15s linear; }
|
||||||
|
|
||||||
.reveal a:hover img {
|
.reveal a:hover img {
|
||||||
background: rgba(255, 255, 255, 0.2);
|
background: rgba(255, 255, 255, 0.2);
|
||||||
border-color: #51483d;
|
border-color: #51483D;
|
||||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
|
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* NAVIGATION CONTROLS
|
* NAVIGATION CONTROLS
|
||||||
*********************************************/
|
*********************************************/
|
||||||
.reveal .controls div.navigate-left,
|
.reveal .controls div.navigate-left, .reveal .controls div.navigate-left.enabled {
|
||||||
.reveal .controls div.navigate-left.enabled {
|
border-right-color: #51483D; }
|
||||||
border-right-color: #51483d; }
|
|
||||||
|
|
||||||
.reveal .controls div.navigate-right,
|
.reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled {
|
||||||
.reveal .controls div.navigate-right.enabled {
|
border-left-color: #51483D; }
|
||||||
border-left-color: #51483d; }
|
|
||||||
|
|
||||||
.reveal .controls div.navigate-up,
|
.reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled {
|
||||||
.reveal .controls div.navigate-up.enabled {
|
border-bottom-color: #51483D; }
|
||||||
border-bottom-color: #51483d; }
|
|
||||||
|
|
||||||
.reveal .controls div.navigate-down,
|
.reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled {
|
||||||
.reveal .controls div.navigate-down.enabled {
|
border-top-color: #51483D; }
|
||||||
border-top-color: #51483d; }
|
|
||||||
|
|
||||||
.reveal .controls div.navigate-left.enabled:hover {
|
.reveal .controls div.navigate-left.enabled:hover {
|
||||||
border-right-color: #8b7c69; }
|
border-right-color: #8b7b69; }
|
||||||
|
|
||||||
.reveal .controls div.navigate-right.enabled:hover {
|
.reveal .controls div.navigate-right.enabled:hover {
|
||||||
border-left-color: #8b7c69; }
|
border-left-color: #8b7b69; }
|
||||||
|
|
||||||
.reveal .controls div.navigate-up.enabled:hover {
|
.reveal .controls div.navigate-up.enabled:hover {
|
||||||
border-bottom-color: #8b7c69; }
|
border-bottom-color: #8b7b69; }
|
||||||
|
|
||||||
.reveal .controls div.navigate-down.enabled:hover {
|
.reveal .controls div.navigate-down.enabled:hover {
|
||||||
border-top-color: #8b7c69; }
|
border-top-color: #8b7b69; }
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* PROGRESS BAR
|
* PROGRESS BAR
|
||||||
|
|
@ -124,15 +249,13 @@ body {
|
||||||
background: rgba(0, 0, 0, 0.2); }
|
background: rgba(0, 0, 0, 0.2); }
|
||||||
|
|
||||||
.reveal .progress span {
|
.reveal .progress span {
|
||||||
background: #51483d;
|
background: #51483D;
|
||||||
-webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
|
-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);
|
-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); }
|
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* SLIDE NUMBER
|
* SLIDE NUMBER
|
||||||
*********************************************/
|
*********************************************/
|
||||||
.reveal .slide-number {
|
.reveal .slide-number {
|
||||||
color: #51483d; }
|
color: #51483D; }
|
||||||
|
|
|
||||||
|
|
@ -11,54 +11,183 @@
|
||||||
* GLOBAL STYLES
|
* GLOBAL STYLES
|
||||||
*********************************************/
|
*********************************************/
|
||||||
body {
|
body {
|
||||||
background: white;
|
background: #fff;
|
||||||
background-color: white; }
|
background-color: #fff; }
|
||||||
|
|
||||||
.reveal {
|
.reveal {
|
||||||
font-family: "Lato", sans-serif;
|
font-family: 'Lato', sans-serif;
|
||||||
font-size: 36px;
|
font-size: 36px;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
letter-spacing: -0.02em;
|
color: #000; }
|
||||||
color: black; }
|
|
||||||
|
|
||||||
::selection {
|
::selection {
|
||||||
color: white;
|
color: #fff;
|
||||||
background: rgba(0, 0, 0, 0.99);
|
background: rgba(0, 0, 0, 0.99);
|
||||||
text-shadow: none; }
|
text-shadow: none; }
|
||||||
|
|
||||||
|
.reveal .slides > section, .reveal .slides > section > section {
|
||||||
|
line-height: 1.3;
|
||||||
|
font-weight: inherit; }
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* HEADERS
|
* HEADERS
|
||||||
*********************************************/
|
*********************************************/
|
||||||
.reveal h1,
|
.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 {
|
||||||
.reveal h2,
|
|
||||||
.reveal h3,
|
|
||||||
.reveal h4,
|
|
||||||
.reveal h5,
|
|
||||||
.reveal h6 {
|
|
||||||
margin: 0 0 20px 0;
|
margin: 0 0 20px 0;
|
||||||
color: black;
|
color: #000;
|
||||||
font-family: "News Cycle", Impact, sans-serif;
|
font-family: 'News Cycle', Impact, sans-serif;
|
||||||
line-height: 0.9em;
|
font-weight: normal;
|
||||||
letter-spacing: 0.02em;
|
line-height: 1.2;
|
||||||
|
letter-spacing: normal;
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
text-shadow: none; }
|
text-shadow: none;
|
||||||
|
word-wrap: break-word; }
|
||||||
|
|
||||||
.reveal h1 {
|
.reveal h1 {
|
||||||
text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); }
|
font-size: 3.77em; }
|
||||||
|
|
||||||
|
.reveal h2 {
|
||||||
|
font-size: 2.11em; }
|
||||||
|
|
||||||
|
.reveal h3 {
|
||||||
|
font-size: 1.55em; }
|
||||||
|
|
||||||
|
.reveal h4 {
|
||||||
|
font-size: 1em; }
|
||||||
|
|
||||||
|
.reveal h1 {
|
||||||
|
text-shadow: none; }
|
||||||
|
|
||||||
|
/*********************************************
|
||||||
|
* OTHER
|
||||||
|
*********************************************/
|
||||||
|
.reveal p {
|
||||||
|
margin: 20px 0;
|
||||||
|
line-height: 1.3; }
|
||||||
|
|
||||||
|
/* Ensure certain elements are never larger than the slide itself */
|
||||||
|
.reveal img, .reveal video, .reveal iframe {
|
||||||
|
max-width: 95%;
|
||||||
|
max-height: 95%; }
|
||||||
|
|
||||||
|
.reveal strong, .reveal b {
|
||||||
|
font-weight: bold; }
|
||||||
|
|
||||||
|
.reveal em {
|
||||||
|
font-style: italic; }
|
||||||
|
|
||||||
|
.reveal ol, .reveal dl, .reveal ul {
|
||||||
|
display: inline-block;
|
||||||
|
text-align: left;
|
||||||
|
margin: 0 0 0 1em; }
|
||||||
|
|
||||||
|
.reveal ol {
|
||||||
|
list-style-type: decimal; }
|
||||||
|
|
||||||
|
.reveal ul {
|
||||||
|
list-style-type: disc; }
|
||||||
|
|
||||||
|
.reveal ul ul {
|
||||||
|
list-style-type: square; }
|
||||||
|
|
||||||
|
.reveal ul ul ul {
|
||||||
|
list-style-type: circle; }
|
||||||
|
|
||||||
|
.reveal ul ul, .reveal ul ol, .reveal ol ol, .reveal ol ul {
|
||||||
|
display: block;
|
||||||
|
margin-left: 40px; }
|
||||||
|
|
||||||
|
.reveal dt {
|
||||||
|
font-weight: bold; }
|
||||||
|
|
||||||
|
.reveal dd {
|
||||||
|
margin-left: 40px; }
|
||||||
|
|
||||||
|
.reveal q, .reveal blockquote {
|
||||||
|
quotes: none; }
|
||||||
|
|
||||||
|
.reveal blockquote {
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
width: 70%;
|
||||||
|
margin: 20px auto;
|
||||||
|
padding: 5px;
|
||||||
|
font-style: italic;
|
||||||
|
background: rgba(255, 255, 255, 0.05);
|
||||||
|
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); }
|
||||||
|
|
||||||
|
.reveal blockquote p:first-child, .reveal blockquote p:last-child {
|
||||||
|
display: inline-block; }
|
||||||
|
|
||||||
|
.reveal q {
|
||||||
|
font-style: italic; }
|
||||||
|
|
||||||
|
.reveal pre {
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
width: 90%;
|
||||||
|
margin: 20px auto;
|
||||||
|
text-align: left;
|
||||||
|
font-size: 0.55em;
|
||||||
|
font-family: monospace;
|
||||||
|
line-height: 1.2em;
|
||||||
|
word-wrap: break-word;
|
||||||
|
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }
|
||||||
|
|
||||||
|
.reveal code {
|
||||||
|
font-family: monospace; }
|
||||||
|
|
||||||
|
.reveal pre code {
|
||||||
|
display: block;
|
||||||
|
padding: 5px;
|
||||||
|
overflow: auto;
|
||||||
|
max-height: 400px;
|
||||||
|
word-wrap: normal;
|
||||||
|
background: #3F3F3F;
|
||||||
|
color: #DCDCDC; }
|
||||||
|
|
||||||
|
.reveal table {
|
||||||
|
margin: auto;
|
||||||
|
border-collapse: collapse;
|
||||||
|
border-spacing: 0; }
|
||||||
|
|
||||||
|
.reveal table th {
|
||||||
|
font-weight: bold; }
|
||||||
|
|
||||||
|
.reveal table th, .reveal table td {
|
||||||
|
text-align: left;
|
||||||
|
padding: 0.2em 0.5em 0.2em 0.5em;
|
||||||
|
border-bottom: 1px solid; }
|
||||||
|
|
||||||
|
.reveal table tr:last-child td {
|
||||||
|
border-bottom: none; }
|
||||||
|
|
||||||
|
.reveal sup {
|
||||||
|
vertical-align: super; }
|
||||||
|
|
||||||
|
.reveal sub {
|
||||||
|
vertical-align: sub; }
|
||||||
|
|
||||||
|
.reveal small {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 0.6em;
|
||||||
|
line-height: 1.2em;
|
||||||
|
vertical-align: top; }
|
||||||
|
|
||||||
|
.reveal small * {
|
||||||
|
vertical-align: top; }
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* LINKS
|
* LINKS
|
||||||
*********************************************/
|
*********************************************/
|
||||||
.reveal a:not(.image) {
|
.reveal a {
|
||||||
color: darkblue;
|
color: #00008B;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
-webkit-transition: color .15s ease;
|
-webkit-transition: color 0.15s ease;
|
||||||
-moz-transition: color .15s ease;
|
-moz-transition: color 0.15s ease;
|
||||||
-ms-transition: color .15s ease;
|
transition: color 0.15s ease; }
|
||||||
-o-transition: color .15s ease;
|
|
||||||
transition: color .15s ease; }
|
|
||||||
|
|
||||||
.reveal a:not(.image):hover {
|
.reveal a:hover {
|
||||||
color: #0000f1;
|
color: #0000f1;
|
||||||
text-shadow: none;
|
text-shadow: none;
|
||||||
border: none; }
|
border: none; }
|
||||||
|
|
@ -73,37 +202,33 @@ body {
|
||||||
.reveal section img {
|
.reveal section img {
|
||||||
margin: 15px 0px;
|
margin: 15px 0px;
|
||||||
background: rgba(255, 255, 255, 0.12);
|
background: rgba(255, 255, 255, 0.12);
|
||||||
border: 4px solid black;
|
border: 4px solid #000;
|
||||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
|
||||||
-webkit-transition: all .2s linear;
|
|
||||||
-moz-transition: all .2s linear;
|
.reveal a img {
|
||||||
-ms-transition: all .2s linear;
|
-webkit-transition: all 0.15s linear;
|
||||||
-o-transition: all .2s linear;
|
-moz-transition: all 0.15s linear;
|
||||||
transition: all .2s linear; }
|
transition: all 0.15s linear; }
|
||||||
|
|
||||||
.reveal a:hover img {
|
.reveal a:hover img {
|
||||||
background: rgba(255, 255, 255, 0.2);
|
background: rgba(255, 255, 255, 0.2);
|
||||||
border-color: darkblue;
|
border-color: #00008B;
|
||||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
|
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* NAVIGATION CONTROLS
|
* NAVIGATION CONTROLS
|
||||||
*********************************************/
|
*********************************************/
|
||||||
.reveal .controls div.navigate-left,
|
.reveal .controls div.navigate-left, .reveal .controls div.navigate-left.enabled {
|
||||||
.reveal .controls div.navigate-left.enabled {
|
border-right-color: #00008B; }
|
||||||
border-right-color: darkblue; }
|
|
||||||
|
|
||||||
.reveal .controls div.navigate-right,
|
.reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled {
|
||||||
.reveal .controls div.navigate-right.enabled {
|
border-left-color: #00008B; }
|
||||||
border-left-color: darkblue; }
|
|
||||||
|
|
||||||
.reveal .controls div.navigate-up,
|
.reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled {
|
||||||
.reveal .controls div.navigate-up.enabled {
|
border-bottom-color: #00008B; }
|
||||||
border-bottom-color: darkblue; }
|
|
||||||
|
|
||||||
.reveal .controls div.navigate-down,
|
.reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled {
|
||||||
.reveal .controls div.navigate-down.enabled {
|
border-top-color: #00008B; }
|
||||||
border-top-color: darkblue; }
|
|
||||||
|
|
||||||
.reveal .controls div.navigate-left.enabled:hover {
|
.reveal .controls div.navigate-left.enabled:hover {
|
||||||
border-right-color: #0000f1; }
|
border-right-color: #0000f1; }
|
||||||
|
|
@ -124,15 +249,13 @@ body {
|
||||||
background: rgba(0, 0, 0, 0.2); }
|
background: rgba(0, 0, 0, 0.2); }
|
||||||
|
|
||||||
.reveal .progress span {
|
.reveal .progress span {
|
||||||
background: darkblue;
|
background: #00008B;
|
||||||
-webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
|
-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);
|
-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); }
|
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* SLIDE NUMBER
|
* SLIDE NUMBER
|
||||||
*********************************************/
|
*********************************************/
|
||||||
.reveal .slide-number {
|
.reveal .slide-number {
|
||||||
color: darkblue; }
|
color: #00008B; }
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@
|
||||||
*
|
*
|
||||||
* Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
|
* Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
|
||||||
*/
|
*/
|
||||||
.reveal a:not(.image) {
|
.reveal a {
|
||||||
line-height: 1.3em; }
|
line-height: 1.3em; }
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
|
|
@ -22,57 +22,186 @@ body {
|
||||||
background-color: #f7fbfc; }
|
background-color: #f7fbfc; }
|
||||||
|
|
||||||
.reveal {
|
.reveal {
|
||||||
font-family: "Open Sans", sans-serif;
|
font-family: 'Open Sans', sans-serif;
|
||||||
font-size: 36px;
|
font-size: 36px;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
letter-spacing: -0.02em;
|
color: #333; }
|
||||||
color: #333333; }
|
|
||||||
|
|
||||||
::selection {
|
::selection {
|
||||||
color: white;
|
color: #fff;
|
||||||
background: #134674;
|
background: #134674;
|
||||||
text-shadow: none; }
|
text-shadow: none; }
|
||||||
|
|
||||||
|
.reveal .slides > section, .reveal .slides > section > section {
|
||||||
|
line-height: 1.3;
|
||||||
|
font-weight: inherit; }
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* HEADERS
|
* HEADERS
|
||||||
*********************************************/
|
*********************************************/
|
||||||
.reveal h1,
|
.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 {
|
||||||
.reveal h2,
|
|
||||||
.reveal h3,
|
|
||||||
.reveal h4,
|
|
||||||
.reveal h5,
|
|
||||||
.reveal h6 {
|
|
||||||
margin: 0 0 20px 0;
|
margin: 0 0 20px 0;
|
||||||
color: #333333;
|
color: #333;
|
||||||
font-family: "Quicksand", sans-serif;
|
font-family: 'Quicksand', sans-serif;
|
||||||
line-height: 0.9em;
|
font-weight: normal;
|
||||||
|
line-height: 1.2;
|
||||||
letter-spacing: -0.08em;
|
letter-spacing: -0.08em;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
text-shadow: none; }
|
text-shadow: none;
|
||||||
|
word-wrap: break-word; }
|
||||||
|
|
||||||
.reveal h1 {
|
.reveal h1 {
|
||||||
text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); }
|
font-size: 3.77em; }
|
||||||
|
|
||||||
|
.reveal h2 {
|
||||||
|
font-size: 2.11em; }
|
||||||
|
|
||||||
|
.reveal h3 {
|
||||||
|
font-size: 1.55em; }
|
||||||
|
|
||||||
|
.reveal h4 {
|
||||||
|
font-size: 1em; }
|
||||||
|
|
||||||
|
.reveal h1 {
|
||||||
|
text-shadow: none; }
|
||||||
|
|
||||||
|
/*********************************************
|
||||||
|
* OTHER
|
||||||
|
*********************************************/
|
||||||
|
.reveal p {
|
||||||
|
margin: 20px 0;
|
||||||
|
line-height: 1.3; }
|
||||||
|
|
||||||
|
/* Ensure certain elements are never larger than the slide itself */
|
||||||
|
.reveal img, .reveal video, .reveal iframe {
|
||||||
|
max-width: 95%;
|
||||||
|
max-height: 95%; }
|
||||||
|
|
||||||
|
.reveal strong, .reveal b {
|
||||||
|
font-weight: bold; }
|
||||||
|
|
||||||
|
.reveal em {
|
||||||
|
font-style: italic; }
|
||||||
|
|
||||||
|
.reveal ol, .reveal dl, .reveal ul {
|
||||||
|
display: inline-block;
|
||||||
|
text-align: left;
|
||||||
|
margin: 0 0 0 1em; }
|
||||||
|
|
||||||
|
.reveal ol {
|
||||||
|
list-style-type: decimal; }
|
||||||
|
|
||||||
|
.reveal ul {
|
||||||
|
list-style-type: disc; }
|
||||||
|
|
||||||
|
.reveal ul ul {
|
||||||
|
list-style-type: square; }
|
||||||
|
|
||||||
|
.reveal ul ul ul {
|
||||||
|
list-style-type: circle; }
|
||||||
|
|
||||||
|
.reveal ul ul, .reveal ul ol, .reveal ol ol, .reveal ol ul {
|
||||||
|
display: block;
|
||||||
|
margin-left: 40px; }
|
||||||
|
|
||||||
|
.reveal dt {
|
||||||
|
font-weight: bold; }
|
||||||
|
|
||||||
|
.reveal dd {
|
||||||
|
margin-left: 40px; }
|
||||||
|
|
||||||
|
.reveal q, .reveal blockquote {
|
||||||
|
quotes: none; }
|
||||||
|
|
||||||
|
.reveal blockquote {
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
width: 70%;
|
||||||
|
margin: 20px auto;
|
||||||
|
padding: 5px;
|
||||||
|
font-style: italic;
|
||||||
|
background: rgba(255, 255, 255, 0.05);
|
||||||
|
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); }
|
||||||
|
|
||||||
|
.reveal blockquote p:first-child, .reveal blockquote p:last-child {
|
||||||
|
display: inline-block; }
|
||||||
|
|
||||||
|
.reveal q {
|
||||||
|
font-style: italic; }
|
||||||
|
|
||||||
|
.reveal pre {
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
width: 90%;
|
||||||
|
margin: 20px auto;
|
||||||
|
text-align: left;
|
||||||
|
font-size: 0.55em;
|
||||||
|
font-family: monospace;
|
||||||
|
line-height: 1.2em;
|
||||||
|
word-wrap: break-word;
|
||||||
|
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }
|
||||||
|
|
||||||
|
.reveal code {
|
||||||
|
font-family: monospace; }
|
||||||
|
|
||||||
|
.reveal pre code {
|
||||||
|
display: block;
|
||||||
|
padding: 5px;
|
||||||
|
overflow: auto;
|
||||||
|
max-height: 400px;
|
||||||
|
word-wrap: normal;
|
||||||
|
background: #3F3F3F;
|
||||||
|
color: #DCDCDC; }
|
||||||
|
|
||||||
|
.reveal table {
|
||||||
|
margin: auto;
|
||||||
|
border-collapse: collapse;
|
||||||
|
border-spacing: 0; }
|
||||||
|
|
||||||
|
.reveal table th {
|
||||||
|
font-weight: bold; }
|
||||||
|
|
||||||
|
.reveal table th, .reveal table td {
|
||||||
|
text-align: left;
|
||||||
|
padding: 0.2em 0.5em 0.2em 0.5em;
|
||||||
|
border-bottom: 1px solid; }
|
||||||
|
|
||||||
|
.reveal table tr:last-child td {
|
||||||
|
border-bottom: none; }
|
||||||
|
|
||||||
|
.reveal sup {
|
||||||
|
vertical-align: super; }
|
||||||
|
|
||||||
|
.reveal sub {
|
||||||
|
vertical-align: sub; }
|
||||||
|
|
||||||
|
.reveal small {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 0.6em;
|
||||||
|
line-height: 1.2em;
|
||||||
|
vertical-align: top; }
|
||||||
|
|
||||||
|
.reveal small * {
|
||||||
|
vertical-align: top; }
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* LINKS
|
* LINKS
|
||||||
*********************************************/
|
*********************************************/
|
||||||
.reveal a:not(.image) {
|
.reveal a {
|
||||||
color: #3b759e;
|
color: #3b759e;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
-webkit-transition: color .15s ease;
|
-webkit-transition: color 0.15s ease;
|
||||||
-moz-transition: color .15s ease;
|
-moz-transition: color 0.15s ease;
|
||||||
-ms-transition: color .15s ease;
|
transition: color 0.15s ease; }
|
||||||
-o-transition: color .15s ease;
|
|
||||||
transition: color .15s ease; }
|
|
||||||
|
|
||||||
.reveal a:not(.image):hover {
|
.reveal a:hover {
|
||||||
color: #74a7cb;
|
color: #74a8cb;
|
||||||
text-shadow: none;
|
text-shadow: none;
|
||||||
border: none; }
|
border: none; }
|
||||||
|
|
||||||
.reveal .roll span:after {
|
.reveal .roll span:after {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
background: #264c66; }
|
background: #264d66; }
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* IMAGES
|
* IMAGES
|
||||||
|
|
@ -80,13 +209,13 @@ body {
|
||||||
.reveal section img {
|
.reveal section img {
|
||||||
margin: 15px 0px;
|
margin: 15px 0px;
|
||||||
background: rgba(255, 255, 255, 0.12);
|
background: rgba(255, 255, 255, 0.12);
|
||||||
border: 4px solid #333333;
|
border: 4px solid #333;
|
||||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
|
||||||
-webkit-transition: all .2s linear;
|
|
||||||
-moz-transition: all .2s linear;
|
.reveal a img {
|
||||||
-ms-transition: all .2s linear;
|
-webkit-transition: all 0.15s linear;
|
||||||
-o-transition: all .2s linear;
|
-moz-transition: all 0.15s linear;
|
||||||
transition: all .2s linear; }
|
transition: all 0.15s linear; }
|
||||||
|
|
||||||
.reveal a:hover img {
|
.reveal a:hover img {
|
||||||
background: rgba(255, 255, 255, 0.2);
|
background: rgba(255, 255, 255, 0.2);
|
||||||
|
|
@ -96,33 +225,29 @@ body {
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* NAVIGATION CONTROLS
|
* NAVIGATION CONTROLS
|
||||||
*********************************************/
|
*********************************************/
|
||||||
.reveal .controls div.navigate-left,
|
.reveal .controls div.navigate-left, .reveal .controls div.navigate-left.enabled {
|
||||||
.reveal .controls div.navigate-left.enabled {
|
|
||||||
border-right-color: #3b759e; }
|
border-right-color: #3b759e; }
|
||||||
|
|
||||||
.reveal .controls div.navigate-right,
|
.reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled {
|
||||||
.reveal .controls div.navigate-right.enabled {
|
|
||||||
border-left-color: #3b759e; }
|
border-left-color: #3b759e; }
|
||||||
|
|
||||||
.reveal .controls div.navigate-up,
|
.reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled {
|
||||||
.reveal .controls div.navigate-up.enabled {
|
|
||||||
border-bottom-color: #3b759e; }
|
border-bottom-color: #3b759e; }
|
||||||
|
|
||||||
.reveal .controls div.navigate-down,
|
.reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled {
|
||||||
.reveal .controls div.navigate-down.enabled {
|
|
||||||
border-top-color: #3b759e; }
|
border-top-color: #3b759e; }
|
||||||
|
|
||||||
.reveal .controls div.navigate-left.enabled:hover {
|
.reveal .controls div.navigate-left.enabled:hover {
|
||||||
border-right-color: #74a7cb; }
|
border-right-color: #74a8cb; }
|
||||||
|
|
||||||
.reveal .controls div.navigate-right.enabled:hover {
|
.reveal .controls div.navigate-right.enabled:hover {
|
||||||
border-left-color: #74a7cb; }
|
border-left-color: #74a8cb; }
|
||||||
|
|
||||||
.reveal .controls div.navigate-up.enabled:hover {
|
.reveal .controls div.navigate-up.enabled:hover {
|
||||||
border-bottom-color: #74a7cb; }
|
border-bottom-color: #74a8cb; }
|
||||||
|
|
||||||
.reveal .controls div.navigate-down.enabled:hover {
|
.reveal .controls div.navigate-down.enabled:hover {
|
||||||
border-top-color: #74a7cb; }
|
border-top-color: #74a8cb; }
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* PROGRESS BAR
|
* PROGRESS BAR
|
||||||
|
|
@ -134,8 +259,6 @@ body {
|
||||||
background: #3b759e;
|
background: #3b759e;
|
||||||
-webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
|
-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);
|
-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); }
|
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
|
|
|
||||||
|
|
@ -1,15 +1,9 @@
|
||||||
|
@import url(../../lib/font/league-gothic/league-gothic.css);
|
||||||
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
|
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
|
||||||
/**
|
/**
|
||||||
* Solarized Light theme for reveal.js.
|
* Solarized Light theme for reveal.js.
|
||||||
* Author: Achim Staebler
|
* Author: Achim Staebler
|
||||||
*/
|
*/
|
||||||
@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; }
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Solarized colors by Ethan Schoonover
|
* Solarized colors by Ethan Schoonover
|
||||||
*/
|
*/
|
||||||
|
|
@ -25,57 +19,186 @@ body {
|
||||||
background-color: #fdf6e3; }
|
background-color: #fdf6e3; }
|
||||||
|
|
||||||
.reveal {
|
.reveal {
|
||||||
font-family: "Lato", sans-serif;
|
font-family: 'Lato', sans-serif;
|
||||||
font-size: 36px;
|
font-size: 36px;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
letter-spacing: -0.02em;
|
|
||||||
color: #657b83; }
|
color: #657b83; }
|
||||||
|
|
||||||
::selection {
|
::selection {
|
||||||
color: white;
|
color: #fff;
|
||||||
background: #d33682;
|
background: #d33682;
|
||||||
text-shadow: none; }
|
text-shadow: none; }
|
||||||
|
|
||||||
|
.reveal .slides > section, .reveal .slides > section > section {
|
||||||
|
line-height: 1.3;
|
||||||
|
font-weight: inherit; }
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* HEADERS
|
* HEADERS
|
||||||
*********************************************/
|
*********************************************/
|
||||||
.reveal h1,
|
.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 {
|
||||||
.reveal h2,
|
|
||||||
.reveal h3,
|
|
||||||
.reveal h4,
|
|
||||||
.reveal h5,
|
|
||||||
.reveal h6 {
|
|
||||||
margin: 0 0 20px 0;
|
margin: 0 0 20px 0;
|
||||||
color: #586e75;
|
color: #586e75;
|
||||||
font-family: "League Gothic", Impact, sans-serif;
|
font-family: 'League Gothic', Impact, sans-serif;
|
||||||
line-height: 0.9em;
|
font-weight: normal;
|
||||||
letter-spacing: 0.02em;
|
line-height: 1.2;
|
||||||
|
letter-spacing: normal;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
text-shadow: none; }
|
text-shadow: none;
|
||||||
|
word-wrap: break-word; }
|
||||||
|
|
||||||
.reveal h1 {
|
.reveal h1 {
|
||||||
text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); }
|
font-size: 3.77em; }
|
||||||
|
|
||||||
|
.reveal h2 {
|
||||||
|
font-size: 2.11em; }
|
||||||
|
|
||||||
|
.reveal h3 {
|
||||||
|
font-size: 1.55em; }
|
||||||
|
|
||||||
|
.reveal h4 {
|
||||||
|
font-size: 1em; }
|
||||||
|
|
||||||
|
.reveal h1 {
|
||||||
|
text-shadow: none; }
|
||||||
|
|
||||||
|
/*********************************************
|
||||||
|
* OTHER
|
||||||
|
*********************************************/
|
||||||
|
.reveal p {
|
||||||
|
margin: 20px 0;
|
||||||
|
line-height: 1.3; }
|
||||||
|
|
||||||
|
/* Ensure certain elements are never larger than the slide itself */
|
||||||
|
.reveal img, .reveal video, .reveal iframe {
|
||||||
|
max-width: 95%;
|
||||||
|
max-height: 95%; }
|
||||||
|
|
||||||
|
.reveal strong, .reveal b {
|
||||||
|
font-weight: bold; }
|
||||||
|
|
||||||
|
.reveal em {
|
||||||
|
font-style: italic; }
|
||||||
|
|
||||||
|
.reveal ol, .reveal dl, .reveal ul {
|
||||||
|
display: inline-block;
|
||||||
|
text-align: left;
|
||||||
|
margin: 0 0 0 1em; }
|
||||||
|
|
||||||
|
.reveal ol {
|
||||||
|
list-style-type: decimal; }
|
||||||
|
|
||||||
|
.reveal ul {
|
||||||
|
list-style-type: disc; }
|
||||||
|
|
||||||
|
.reveal ul ul {
|
||||||
|
list-style-type: square; }
|
||||||
|
|
||||||
|
.reveal ul ul ul {
|
||||||
|
list-style-type: circle; }
|
||||||
|
|
||||||
|
.reveal ul ul, .reveal ul ol, .reveal ol ol, .reveal ol ul {
|
||||||
|
display: block;
|
||||||
|
margin-left: 40px; }
|
||||||
|
|
||||||
|
.reveal dt {
|
||||||
|
font-weight: bold; }
|
||||||
|
|
||||||
|
.reveal dd {
|
||||||
|
margin-left: 40px; }
|
||||||
|
|
||||||
|
.reveal q, .reveal blockquote {
|
||||||
|
quotes: none; }
|
||||||
|
|
||||||
|
.reveal blockquote {
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
width: 70%;
|
||||||
|
margin: 20px auto;
|
||||||
|
padding: 5px;
|
||||||
|
font-style: italic;
|
||||||
|
background: rgba(255, 255, 255, 0.05);
|
||||||
|
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); }
|
||||||
|
|
||||||
|
.reveal blockquote p:first-child, .reveal blockquote p:last-child {
|
||||||
|
display: inline-block; }
|
||||||
|
|
||||||
|
.reveal q {
|
||||||
|
font-style: italic; }
|
||||||
|
|
||||||
|
.reveal pre {
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
width: 90%;
|
||||||
|
margin: 20px auto;
|
||||||
|
text-align: left;
|
||||||
|
font-size: 0.55em;
|
||||||
|
font-family: monospace;
|
||||||
|
line-height: 1.2em;
|
||||||
|
word-wrap: break-word;
|
||||||
|
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }
|
||||||
|
|
||||||
|
.reveal code {
|
||||||
|
font-family: monospace; }
|
||||||
|
|
||||||
|
.reveal pre code {
|
||||||
|
display: block;
|
||||||
|
padding: 5px;
|
||||||
|
overflow: auto;
|
||||||
|
max-height: 400px;
|
||||||
|
word-wrap: normal;
|
||||||
|
background: #3F3F3F;
|
||||||
|
color: #DCDCDC; }
|
||||||
|
|
||||||
|
.reveal table {
|
||||||
|
margin: auto;
|
||||||
|
border-collapse: collapse;
|
||||||
|
border-spacing: 0; }
|
||||||
|
|
||||||
|
.reveal table th {
|
||||||
|
font-weight: bold; }
|
||||||
|
|
||||||
|
.reveal table th, .reveal table td {
|
||||||
|
text-align: left;
|
||||||
|
padding: 0.2em 0.5em 0.2em 0.5em;
|
||||||
|
border-bottom: 1px solid; }
|
||||||
|
|
||||||
|
.reveal table tr:last-child td {
|
||||||
|
border-bottom: none; }
|
||||||
|
|
||||||
|
.reveal sup {
|
||||||
|
vertical-align: super; }
|
||||||
|
|
||||||
|
.reveal sub {
|
||||||
|
vertical-align: sub; }
|
||||||
|
|
||||||
|
.reveal small {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 0.6em;
|
||||||
|
line-height: 1.2em;
|
||||||
|
vertical-align: top; }
|
||||||
|
|
||||||
|
.reveal small * {
|
||||||
|
vertical-align: top; }
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* LINKS
|
* LINKS
|
||||||
*********************************************/
|
*********************************************/
|
||||||
.reveal a:not(.image) {
|
.reveal a {
|
||||||
color: #268bd2;
|
color: #268bd2;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
-webkit-transition: color .15s ease;
|
-webkit-transition: color 0.15s ease;
|
||||||
-moz-transition: color .15s ease;
|
-moz-transition: color 0.15s ease;
|
||||||
-ms-transition: color .15s ease;
|
transition: color 0.15s ease; }
|
||||||
-o-transition: color .15s ease;
|
|
||||||
transition: color .15s ease; }
|
|
||||||
|
|
||||||
.reveal a:not(.image):hover {
|
.reveal a:hover {
|
||||||
color: #78b9e6;
|
color: #78bae6;
|
||||||
text-shadow: none;
|
text-shadow: none;
|
||||||
border: none; }
|
border: none; }
|
||||||
|
|
||||||
.reveal .roll span:after {
|
.reveal .roll span:after {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
background: #1a6091; }
|
background: #1a6291; }
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* IMAGES
|
* IMAGES
|
||||||
|
|
@ -84,12 +207,12 @@ body {
|
||||||
margin: 15px 0px;
|
margin: 15px 0px;
|
||||||
background: rgba(255, 255, 255, 0.12);
|
background: rgba(255, 255, 255, 0.12);
|
||||||
border: 4px solid #657b83;
|
border: 4px solid #657b83;
|
||||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
|
||||||
-webkit-transition: all .2s linear;
|
|
||||||
-moz-transition: all .2s linear;
|
.reveal a img {
|
||||||
-ms-transition: all .2s linear;
|
-webkit-transition: all 0.15s linear;
|
||||||
-o-transition: all .2s linear;
|
-moz-transition: all 0.15s linear;
|
||||||
transition: all .2s linear; }
|
transition: all 0.15s linear; }
|
||||||
|
|
||||||
.reveal a:hover img {
|
.reveal a:hover img {
|
||||||
background: rgba(255, 255, 255, 0.2);
|
background: rgba(255, 255, 255, 0.2);
|
||||||
|
|
@ -99,33 +222,29 @@ body {
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* NAVIGATION CONTROLS
|
* NAVIGATION CONTROLS
|
||||||
*********************************************/
|
*********************************************/
|
||||||
.reveal .controls div.navigate-left,
|
.reveal .controls div.navigate-left, .reveal .controls div.navigate-left.enabled {
|
||||||
.reveal .controls div.navigate-left.enabled {
|
|
||||||
border-right-color: #268bd2; }
|
border-right-color: #268bd2; }
|
||||||
|
|
||||||
.reveal .controls div.navigate-right,
|
.reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled {
|
||||||
.reveal .controls div.navigate-right.enabled {
|
|
||||||
border-left-color: #268bd2; }
|
border-left-color: #268bd2; }
|
||||||
|
|
||||||
.reveal .controls div.navigate-up,
|
.reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled {
|
||||||
.reveal .controls div.navigate-up.enabled {
|
|
||||||
border-bottom-color: #268bd2; }
|
border-bottom-color: #268bd2; }
|
||||||
|
|
||||||
.reveal .controls div.navigate-down,
|
.reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled {
|
||||||
.reveal .controls div.navigate-down.enabled {
|
|
||||||
border-top-color: #268bd2; }
|
border-top-color: #268bd2; }
|
||||||
|
|
||||||
.reveal .controls div.navigate-left.enabled:hover {
|
.reveal .controls div.navigate-left.enabled:hover {
|
||||||
border-right-color: #78b9e6; }
|
border-right-color: #78bae6; }
|
||||||
|
|
||||||
.reveal .controls div.navigate-right.enabled:hover {
|
.reveal .controls div.navigate-right.enabled:hover {
|
||||||
border-left-color: #78b9e6; }
|
border-left-color: #78bae6; }
|
||||||
|
|
||||||
.reveal .controls div.navigate-up.enabled:hover {
|
.reveal .controls div.navigate-up.enabled:hover {
|
||||||
border-bottom-color: #78b9e6; }
|
border-bottom-color: #78bae6; }
|
||||||
|
|
||||||
.reveal .controls div.navigate-down.enabled:hover {
|
.reveal .controls div.navigate-down.enabled:hover {
|
||||||
border-top-color: #78b9e6; }
|
border-top-color: #78bae6; }
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* PROGRESS BAR
|
* PROGRESS BAR
|
||||||
|
|
@ -137,8 +256,6 @@ body {
|
||||||
background: #268bd2;
|
background: #268bd2;
|
||||||
-webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
|
-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);
|
-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); }
|
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
|
|
|
||||||
|
|
@ -13,18 +13,7 @@
|
||||||
|
|
||||||
|
|
||||||
// Include theme-specific fonts
|
// Include theme-specific fonts
|
||||||
@font-face {
|
@import url(../../lib/font/league-gothic/league-gothic.css);
|
||||||
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(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
|
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
49
css/theme/source/black.scss
Normal file
49
css/theme/source/black.scss
Normal file
|
|
@ -0,0 +1,49 @@
|
||||||
|
/**
|
||||||
|
* Black theme for reveal.js. This is the opposite of the 'white' theme.
|
||||||
|
*
|
||||||
|
* Copyright (C) 2015 Hakim El Hattab, http://hakim.se
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
// Default mixins and settings -----------------
|
||||||
|
@import "../template/mixins";
|
||||||
|
@import "../template/settings";
|
||||||
|
// ---------------------------------------------
|
||||||
|
|
||||||
|
|
||||||
|
// Include theme-specific fonts
|
||||||
|
@import url(../../lib/font/source-sans-pro/source-sans-pro.css);
|
||||||
|
|
||||||
|
|
||||||
|
// Override theme settings (see ../template/settings.scss)
|
||||||
|
$backgroundColor: #222;
|
||||||
|
|
||||||
|
$mainColor: #fff;
|
||||||
|
$headingColor: #fff;
|
||||||
|
|
||||||
|
$mainFontSize: 38px;
|
||||||
|
$mainFont: 'Source Sans Pro', Helvetica, sans-serif;
|
||||||
|
$headingFont: 'Source Sans Pro', Helvetica, sans-serif;
|
||||||
|
$headingTextShadow: none;
|
||||||
|
$headingLetterSpacing: normal;
|
||||||
|
$headingTextTransform: uppercase;
|
||||||
|
$headingFontWeight: 600;
|
||||||
|
$linkColor: #42affa;
|
||||||
|
$linkColorHover: lighten( $linkColor, 15% );
|
||||||
|
$selectionBackgroundColor: lighten( $linkColor, 25% );
|
||||||
|
|
||||||
|
$heading1Size: 2.5em;
|
||||||
|
$heading2Size: 1.6em;
|
||||||
|
$heading3Size: 1.3em;
|
||||||
|
$heading4Size: 1.0em;
|
||||||
|
|
||||||
|
section.has-light-background {
|
||||||
|
&, h1, h2, h3, h4, h5, h6 {
|
||||||
|
color: #222;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Theme template ------------------------------
|
||||||
|
@import "../template/theme";
|
||||||
|
// ---------------------------------------------
|
||||||
|
|
@ -70,13 +70,13 @@ $selectionColor: #fff;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
.reveal a:not(.image),
|
.reveal a,
|
||||||
.reveal a:not(.image):hover {
|
.reveal a:hover {
|
||||||
text-shadow: 2px 2px 2px #000;
|
text-shadow: 2px 2px 2px #000;
|
||||||
}
|
}
|
||||||
|
|
||||||
.reveal small a:not(.image),
|
.reveal small a,
|
||||||
.reveal small a:not(.image):hover {
|
.reveal small a:hover {
|
||||||
text-shadow: 1px 1px 1px #000;
|
text-shadow: 1px 1px 1px #000;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,7 @@
|
||||||
/**
|
/**
|
||||||
* Default theme for reveal.js.
|
* League theme for reveal.js.
|
||||||
|
*
|
||||||
|
* This was the default theme pre-3.0.0.
|
||||||
*
|
*
|
||||||
* Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
|
* Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
|
||||||
*/
|
*/
|
||||||
|
|
@ -13,21 +15,11 @@
|
||||||
|
|
||||||
|
|
||||||
// Include theme-specific fonts
|
// Include theme-specific fonts
|
||||||
@font-face {
|
@import url(../../lib/font/league-gothic/league-gothic.css);
|
||||||
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(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
|
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
|
||||||
|
|
||||||
// Override theme settings (see ../template/settings.scss)
|
// Override theme settings (see ../template/settings.scss)
|
||||||
|
$headingTextShadow: 0px 0px 6px rgba(0,0,0,0.2);
|
||||||
$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);
|
$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
|
// Background generator
|
||||||
|
|
@ -12,18 +12,7 @@
|
||||||
|
|
||||||
|
|
||||||
// Include theme-specific fonts
|
// Include theme-specific fonts
|
||||||
@font-face {
|
@import url(../../lib/font/league-gothic/league-gothic.css);
|
||||||
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(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
|
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
||||||
|
|
@ -25,7 +25,7 @@ $linkColor: #51483D;
|
||||||
$linkColorHover: lighten( $linkColor, 20% );
|
$linkColorHover: lighten( $linkColor, 20% );
|
||||||
$selectionBackgroundColor: #26351C;
|
$selectionBackgroundColor: #26351C;
|
||||||
|
|
||||||
.reveal a:not(.image) {
|
.reveal a {
|
||||||
line-height: 1.3em;
|
line-height: 1.3em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -30,7 +30,7 @@ $linkColorHover: lighten( $linkColor, 20% );
|
||||||
$selectionBackgroundColor: #134674;
|
$selectionBackgroundColor: #134674;
|
||||||
|
|
||||||
// Fix links so they are not cut off
|
// Fix links so they are not cut off
|
||||||
.reveal a:not(.image) {
|
.reveal a {
|
||||||
line-height: 1.3em;
|
line-height: 1.3em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -12,18 +12,7 @@
|
||||||
|
|
||||||
|
|
||||||
// Include theme-specific fonts
|
// Include theme-specific fonts
|
||||||
@font-face {
|
@import url(../../lib/font/league-gothic/league-gothic.css);
|
||||||
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(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
|
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
49
css/theme/source/white.scss
Normal file
49
css/theme/source/white.scss
Normal file
|
|
@ -0,0 +1,49 @@
|
||||||
|
/**
|
||||||
|
* White theme for reveal.js. This is the opposite of the 'black' theme.
|
||||||
|
*
|
||||||
|
* Copyright (C) 2015 Hakim El Hattab, http://hakim.se
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
// Default mixins and settings -----------------
|
||||||
|
@import "../template/mixins";
|
||||||
|
@import "../template/settings";
|
||||||
|
// ---------------------------------------------
|
||||||
|
|
||||||
|
|
||||||
|
// Include theme-specific fonts
|
||||||
|
@import url(../../lib/font/source-sans-pro/source-sans-pro.css);
|
||||||
|
|
||||||
|
|
||||||
|
// Override theme settings (see ../template/settings.scss)
|
||||||
|
$backgroundColor: #fff;
|
||||||
|
|
||||||
|
$mainColor: #222;
|
||||||
|
$headingColor: #222;
|
||||||
|
|
||||||
|
$mainFontSize: 38px;
|
||||||
|
$mainFont: 'Source Sans Pro', Helvetica, sans-serif;
|
||||||
|
$headingFont: 'Source Sans Pro', Helvetica, sans-serif;
|
||||||
|
$headingTextShadow: none;
|
||||||
|
$headingLetterSpacing: normal;
|
||||||
|
$headingTextTransform: uppercase;
|
||||||
|
$headingFontWeight: 600;
|
||||||
|
$linkColor: #2a76dd;
|
||||||
|
$linkColorHover: lighten( $linkColor, 15% );
|
||||||
|
$selectionBackgroundColor: lighten( $linkColor, 25% );
|
||||||
|
|
||||||
|
$heading1Size: 2.5em;
|
||||||
|
$heading2Size: 1.6em;
|
||||||
|
$heading3Size: 1.3em;
|
||||||
|
$heading4Size: 1.0em;
|
||||||
|
|
||||||
|
section.has-dark-background {
|
||||||
|
&, h1, h2, h3, h4, h5, h6 {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Theme template ------------------------------
|
||||||
|
@import "../template/theme";
|
||||||
|
// ---------------------------------------------
|
||||||
|
|
@ -9,16 +9,25 @@ $mainFont: 'Lato', sans-serif;
|
||||||
$mainFontSize: 36px;
|
$mainFontSize: 36px;
|
||||||
$mainColor: #eee;
|
$mainColor: #eee;
|
||||||
|
|
||||||
|
// Vertical spacing between blocks of text
|
||||||
|
$blockMargin: 20px;
|
||||||
|
|
||||||
// Headings
|
// Headings
|
||||||
$headingMargin: 0 0 20px 0;
|
$headingMargin: 0 0 $blockMargin 0;
|
||||||
$headingFont: 'League Gothic', Impact, sans-serif;
|
$headingFont: 'League Gothic', Impact, sans-serif;
|
||||||
$headingColor: #eee;
|
$headingColor: #eee;
|
||||||
$headingLineHeight: 0.9em;
|
$headingLineHeight: 1.2;
|
||||||
$headingLetterSpacing: 0.02em;
|
$headingLetterSpacing: normal;
|
||||||
$headingTextTransform: uppercase;
|
$headingTextTransform: uppercase;
|
||||||
$headingTextShadow: 0px 0px 6px rgba(0,0,0,0.2);
|
$headingTextShadow: none;
|
||||||
|
$headingFontWeight: normal;
|
||||||
$heading1TextShadow: $headingTextShadow;
|
$heading1TextShadow: $headingTextShadow;
|
||||||
|
|
||||||
|
$heading1Size: 3.77em;
|
||||||
|
$heading2Size: 2.11em;
|
||||||
|
$heading3Size: 1.55em;
|
||||||
|
$heading4Size: 1.00em;
|
||||||
|
|
||||||
// Links and actions
|
// Links and actions
|
||||||
$linkColor: #13DAEC;
|
$linkColor: #13DAEC;
|
||||||
$linkColorHover: lighten( $linkColor, 20% );
|
$linkColorHover: lighten( $linkColor, 20% );
|
||||||
|
|
|
||||||
|
|
@ -13,7 +13,6 @@ body {
|
||||||
font-family: $mainFont;
|
font-family: $mainFont;
|
||||||
font-size: $mainFontSize;
|
font-size: $mainFontSize;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
letter-spacing: -0.02em;
|
|
||||||
color: $mainColor;
|
color: $mainColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -23,6 +22,12 @@ body {
|
||||||
text-shadow: none;
|
text-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.reveal .slides>section,
|
||||||
|
.reveal .slides>section>section {
|
||||||
|
line-height: 1.3;
|
||||||
|
font-weight: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* HEADERS
|
* HEADERS
|
||||||
*********************************************/
|
*********************************************/
|
||||||
|
|
@ -37,33 +42,199 @@ body {
|
||||||
color: $headingColor;
|
color: $headingColor;
|
||||||
|
|
||||||
font-family: $headingFont;
|
font-family: $headingFont;
|
||||||
|
font-weight: $headingFontWeight;
|
||||||
line-height: $headingLineHeight;
|
line-height: $headingLineHeight;
|
||||||
letter-spacing: $headingLetterSpacing;
|
letter-spacing: $headingLetterSpacing;
|
||||||
|
|
||||||
text-transform: $headingTextTransform;
|
text-transform: $headingTextTransform;
|
||||||
text-shadow: $headingTextShadow;
|
text-shadow: $headingTextShadow;
|
||||||
|
|
||||||
|
word-wrap: break-word;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.reveal h1 {font-size: $heading1Size; }
|
||||||
|
.reveal h2 {font-size: $heading2Size; }
|
||||||
|
.reveal h3 {font-size: $heading3Size; }
|
||||||
|
.reveal h4 {font-size: $heading4Size; }
|
||||||
|
|
||||||
.reveal h1 {
|
.reveal h1 {
|
||||||
text-shadow: $heading1TextShadow;
|
text-shadow: $heading1TextShadow;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*********************************************
|
||||||
|
* OTHER
|
||||||
|
*********************************************/
|
||||||
|
|
||||||
|
.reveal p {
|
||||||
|
margin: $blockMargin 0;
|
||||||
|
line-height: 1.3;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Ensure certain elements are never larger than the slide itself */
|
||||||
|
.reveal img,
|
||||||
|
.reveal video,
|
||||||
|
.reveal iframe {
|
||||||
|
max-width: 95%;
|
||||||
|
max-height: 95%;
|
||||||
|
}
|
||||||
|
.reveal strong,
|
||||||
|
.reveal b {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal em {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal ol,
|
||||||
|
.reveal dl,
|
||||||
|
.reveal ul {
|
||||||
|
display: inline-block;
|
||||||
|
|
||||||
|
text-align: left;
|
||||||
|
margin: 0 0 0 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal ol {
|
||||||
|
list-style-type: decimal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal ul {
|
||||||
|
list-style-type: disc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal ul ul {
|
||||||
|
list-style-type: square;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal ul ul ul {
|
||||||
|
list-style-type: circle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal ul ul,
|
||||||
|
.reveal ul ol,
|
||||||
|
.reveal ol ol,
|
||||||
|
.reveal ol ul {
|
||||||
|
display: block;
|
||||||
|
margin-left: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal dt {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal dd {
|
||||||
|
margin-left: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal q,
|
||||||
|
.reveal blockquote {
|
||||||
|
quotes: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal blockquote {
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
width: 70%;
|
||||||
|
margin: $blockMargin auto;
|
||||||
|
padding: 5px;
|
||||||
|
|
||||||
|
font-style: italic;
|
||||||
|
background: rgba(255, 255, 255, 0.05);
|
||||||
|
box-shadow: 0px 0px 2px rgba(0,0,0,0.2);
|
||||||
|
}
|
||||||
|
.reveal blockquote p:first-child,
|
||||||
|
.reveal blockquote p:last-child {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal q {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal pre {
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
width: 90%;
|
||||||
|
margin: $blockMargin auto;
|
||||||
|
|
||||||
|
text-align: left;
|
||||||
|
font-size: 0.55em;
|
||||||
|
font-family: monospace;
|
||||||
|
line-height: 1.2em;
|
||||||
|
|
||||||
|
word-wrap: break-word;
|
||||||
|
|
||||||
|
box-shadow: 0px 0px 6px rgba(0,0,0,0.3);
|
||||||
|
}
|
||||||
|
.reveal code {
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal pre code {
|
||||||
|
display: block;
|
||||||
|
padding: 5px;
|
||||||
|
overflow: auto;
|
||||||
|
max-height: 400px;
|
||||||
|
word-wrap: normal;
|
||||||
|
background: #3F3F3F;
|
||||||
|
color: #DCDCDC;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal table {
|
||||||
|
margin: auto;
|
||||||
|
border-collapse: collapse;
|
||||||
|
border-spacing: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal table th {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal table th,
|
||||||
|
.reveal table td {
|
||||||
|
text-align: left;
|
||||||
|
padding: 0.2em 0.5em 0.2em 0.5em;
|
||||||
|
border-bottom: 1px solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal table tr:last-child td {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal sup {
|
||||||
|
vertical-align: super;
|
||||||
|
}
|
||||||
|
.reveal sub {
|
||||||
|
vertical-align: sub;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal small {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 0.6em;
|
||||||
|
line-height: 1.2em;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal small * {
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* LINKS
|
* LINKS
|
||||||
*********************************************/
|
*********************************************/
|
||||||
|
|
||||||
.reveal a:not(.image) {
|
.reveal a {
|
||||||
color: $linkColor;
|
color: $linkColor;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|
||||||
-webkit-transition: color .15s ease;
|
-webkit-transition: color .15s ease;
|
||||||
-moz-transition: color .15s ease;
|
-moz-transition: color .15s ease;
|
||||||
-ms-transition: color .15s ease;
|
|
||||||
-o-transition: color .15s ease;
|
|
||||||
transition: color .15s ease;
|
transition: color .15s ease;
|
||||||
}
|
}
|
||||||
.reveal a:not(.image):hover {
|
.reveal a:hover {
|
||||||
color: $linkColorHover;
|
color: $linkColorHover;
|
||||||
|
|
||||||
text-shadow: none;
|
text-shadow: none;
|
||||||
|
|
@ -86,12 +257,12 @@ body {
|
||||||
border: 4px solid $mainColor;
|
border: 4px solid $mainColor;
|
||||||
|
|
||||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
-webkit-transition: all .2s linear;
|
.reveal a img {
|
||||||
-moz-transition: all .2s linear;
|
-webkit-transition: all .15s linear;
|
||||||
-ms-transition: all .2s linear;
|
-moz-transition: all .15s linear;
|
||||||
-o-transition: all .2s linear;
|
transition: all .15s linear;
|
||||||
transition: all .2s linear;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.reveal a:hover img {
|
.reveal a:hover img {
|
||||||
|
|
@ -155,8 +326,6 @@ body {
|
||||||
|
|
||||||
-webkit-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
|
-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);
|
-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);
|
transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
261
css/theme/white.css
Normal file
261
css/theme/white.css
Normal file
|
|
@ -0,0 +1,261 @@
|
||||||
|
@import url(../../lib/font/source-sans-pro/source-sans-pro.css);
|
||||||
|
/**
|
||||||
|
* White theme for reveal.js. This is the opposite of the 'black' theme.
|
||||||
|
*
|
||||||
|
* Copyright (C) 2015 Hakim El Hattab, http://hakim.se
|
||||||
|
*/
|
||||||
|
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 {
|
||||||
|
color: #fff; }
|
||||||
|
|
||||||
|
/*********************************************
|
||||||
|
* GLOBAL STYLES
|
||||||
|
*********************************************/
|
||||||
|
body {
|
||||||
|
background: #fff;
|
||||||
|
background-color: #fff; }
|
||||||
|
|
||||||
|
.reveal {
|
||||||
|
font-family: 'Source Sans Pro', Helvetica, sans-serif;
|
||||||
|
font-size: 38px;
|
||||||
|
font-weight: normal;
|
||||||
|
color: #222; }
|
||||||
|
|
||||||
|
::selection {
|
||||||
|
color: #fff;
|
||||||
|
background: #98bdef;
|
||||||
|
text-shadow: none; }
|
||||||
|
|
||||||
|
.reveal .slides > section, .reveal .slides > section > section {
|
||||||
|
line-height: 1.3;
|
||||||
|
font-weight: inherit; }
|
||||||
|
|
||||||
|
/*********************************************
|
||||||
|
* HEADERS
|
||||||
|
*********************************************/
|
||||||
|
.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 {
|
||||||
|
margin: 0 0 20px 0;
|
||||||
|
color: #222;
|
||||||
|
font-family: 'Source Sans Pro', Helvetica, sans-serif;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 1.2;
|
||||||
|
letter-spacing: normal;
|
||||||
|
text-transform: uppercase;
|
||||||
|
text-shadow: none;
|
||||||
|
word-wrap: break-word; }
|
||||||
|
|
||||||
|
.reveal h1 {
|
||||||
|
font-size: 2.5em; }
|
||||||
|
|
||||||
|
.reveal h2 {
|
||||||
|
font-size: 1.6em; }
|
||||||
|
|
||||||
|
.reveal h3 {
|
||||||
|
font-size: 1.3em; }
|
||||||
|
|
||||||
|
.reveal h4 {
|
||||||
|
font-size: 1em; }
|
||||||
|
|
||||||
|
.reveal h1 {
|
||||||
|
text-shadow: none; }
|
||||||
|
|
||||||
|
/*********************************************
|
||||||
|
* OTHER
|
||||||
|
*********************************************/
|
||||||
|
.reveal p {
|
||||||
|
margin: 20px 0;
|
||||||
|
line-height: 1.3; }
|
||||||
|
|
||||||
|
/* Ensure certain elements are never larger than the slide itself */
|
||||||
|
.reveal img, .reveal video, .reveal iframe {
|
||||||
|
max-width: 95%;
|
||||||
|
max-height: 95%; }
|
||||||
|
|
||||||
|
.reveal strong, .reveal b {
|
||||||
|
font-weight: bold; }
|
||||||
|
|
||||||
|
.reveal em {
|
||||||
|
font-style: italic; }
|
||||||
|
|
||||||
|
.reveal ol, .reveal dl, .reveal ul {
|
||||||
|
display: inline-block;
|
||||||
|
text-align: left;
|
||||||
|
margin: 0 0 0 1em; }
|
||||||
|
|
||||||
|
.reveal ol {
|
||||||
|
list-style-type: decimal; }
|
||||||
|
|
||||||
|
.reveal ul {
|
||||||
|
list-style-type: disc; }
|
||||||
|
|
||||||
|
.reveal ul ul {
|
||||||
|
list-style-type: square; }
|
||||||
|
|
||||||
|
.reveal ul ul ul {
|
||||||
|
list-style-type: circle; }
|
||||||
|
|
||||||
|
.reveal ul ul, .reveal ul ol, .reveal ol ol, .reveal ol ul {
|
||||||
|
display: block;
|
||||||
|
margin-left: 40px; }
|
||||||
|
|
||||||
|
.reveal dt {
|
||||||
|
font-weight: bold; }
|
||||||
|
|
||||||
|
.reveal dd {
|
||||||
|
margin-left: 40px; }
|
||||||
|
|
||||||
|
.reveal q, .reveal blockquote {
|
||||||
|
quotes: none; }
|
||||||
|
|
||||||
|
.reveal blockquote {
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
width: 70%;
|
||||||
|
margin: 20px auto;
|
||||||
|
padding: 5px;
|
||||||
|
font-style: italic;
|
||||||
|
background: rgba(255, 255, 255, 0.05);
|
||||||
|
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); }
|
||||||
|
|
||||||
|
.reveal blockquote p:first-child, .reveal blockquote p:last-child {
|
||||||
|
display: inline-block; }
|
||||||
|
|
||||||
|
.reveal q {
|
||||||
|
font-style: italic; }
|
||||||
|
|
||||||
|
.reveal pre {
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
width: 90%;
|
||||||
|
margin: 20px auto;
|
||||||
|
text-align: left;
|
||||||
|
font-size: 0.55em;
|
||||||
|
font-family: monospace;
|
||||||
|
line-height: 1.2em;
|
||||||
|
word-wrap: break-word;
|
||||||
|
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }
|
||||||
|
|
||||||
|
.reveal code {
|
||||||
|
font-family: monospace; }
|
||||||
|
|
||||||
|
.reveal pre code {
|
||||||
|
display: block;
|
||||||
|
padding: 5px;
|
||||||
|
overflow: auto;
|
||||||
|
max-height: 400px;
|
||||||
|
word-wrap: normal;
|
||||||
|
background: #3F3F3F;
|
||||||
|
color: #DCDCDC; }
|
||||||
|
|
||||||
|
.reveal table {
|
||||||
|
margin: auto;
|
||||||
|
border-collapse: collapse;
|
||||||
|
border-spacing: 0; }
|
||||||
|
|
||||||
|
.reveal table th {
|
||||||
|
font-weight: bold; }
|
||||||
|
|
||||||
|
.reveal table th, .reveal table td {
|
||||||
|
text-align: left;
|
||||||
|
padding: 0.2em 0.5em 0.2em 0.5em;
|
||||||
|
border-bottom: 1px solid; }
|
||||||
|
|
||||||
|
.reveal table tr:last-child td {
|
||||||
|
border-bottom: none; }
|
||||||
|
|
||||||
|
.reveal sup {
|
||||||
|
vertical-align: super; }
|
||||||
|
|
||||||
|
.reveal sub {
|
||||||
|
vertical-align: sub; }
|
||||||
|
|
||||||
|
.reveal small {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 0.6em;
|
||||||
|
line-height: 1.2em;
|
||||||
|
vertical-align: top; }
|
||||||
|
|
||||||
|
.reveal small * {
|
||||||
|
vertical-align: top; }
|
||||||
|
|
||||||
|
/*********************************************
|
||||||
|
* LINKS
|
||||||
|
*********************************************/
|
||||||
|
.reveal a {
|
||||||
|
color: #2a76dd;
|
||||||
|
text-decoration: none;
|
||||||
|
-webkit-transition: color 0.15s ease;
|
||||||
|
-moz-transition: color 0.15s ease;
|
||||||
|
transition: color 0.15s ease; }
|
||||||
|
|
||||||
|
.reveal a:hover {
|
||||||
|
color: #6ca2e8;
|
||||||
|
text-shadow: none;
|
||||||
|
border: none; }
|
||||||
|
|
||||||
|
.reveal .roll span:after {
|
||||||
|
color: #fff;
|
||||||
|
background: #1a54a1; }
|
||||||
|
|
||||||
|
/*********************************************
|
||||||
|
* IMAGES
|
||||||
|
*********************************************/
|
||||||
|
.reveal section img {
|
||||||
|
margin: 15px 0px;
|
||||||
|
background: rgba(255, 255, 255, 0.12);
|
||||||
|
border: 4px solid #222;
|
||||||
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
|
||||||
|
|
||||||
|
.reveal a img {
|
||||||
|
-webkit-transition: all 0.15s linear;
|
||||||
|
-moz-transition: all 0.15s linear;
|
||||||
|
transition: all 0.15s linear; }
|
||||||
|
|
||||||
|
.reveal a:hover img {
|
||||||
|
background: rgba(255, 255, 255, 0.2);
|
||||||
|
border-color: #2a76dd;
|
||||||
|
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: #2a76dd; }
|
||||||
|
|
||||||
|
.reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled {
|
||||||
|
border-left-color: #2a76dd; }
|
||||||
|
|
||||||
|
.reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled {
|
||||||
|
border-bottom-color: #2a76dd; }
|
||||||
|
|
||||||
|
.reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled {
|
||||||
|
border-top-color: #2a76dd; }
|
||||||
|
|
||||||
|
.reveal .controls div.navigate-left.enabled:hover {
|
||||||
|
border-right-color: #6ca2e8; }
|
||||||
|
|
||||||
|
.reveal .controls div.navigate-right.enabled:hover {
|
||||||
|
border-left-color: #6ca2e8; }
|
||||||
|
|
||||||
|
.reveal .controls div.navigate-up.enabled:hover {
|
||||||
|
border-bottom-color: #6ca2e8; }
|
||||||
|
|
||||||
|
.reveal .controls div.navigate-down.enabled:hover {
|
||||||
|
border-top-color: #6ca2e8; }
|
||||||
|
|
||||||
|
/*********************************************
|
||||||
|
* PROGRESS BAR
|
||||||
|
*********************************************/
|
||||||
|
.reveal .progress {
|
||||||
|
background: rgba(0, 0, 0, 0.2); }
|
||||||
|
|
||||||
|
.reveal .progress span {
|
||||||
|
background: #2a76dd;
|
||||||
|
-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);
|
||||||
|
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
|
||||||
|
|
||||||
|
/*********************************************
|
||||||
|
* SLIDE NUMBER
|
||||||
|
*********************************************/
|
||||||
|
.reveal .slide-number {
|
||||||
|
color: #2a76dd; }
|
||||||
374
index.html
374
index.html
|
|
@ -12,23 +12,21 @@
|
||||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
||||||
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
|
||||||
|
|
||||||
<link rel="stylesheet" href="css/reveal.min.css">
|
<link rel="stylesheet" href="css/reveal.css">
|
||||||
<link rel="stylesheet" href="css/theme/default.css" id="theme">
|
<link rel="stylesheet" href="css/theme/black.css" id="theme">
|
||||||
|
|
||||||
<!-- For syntax highlighting -->
|
<!-- Code syntax highlighting -->
|
||||||
<link rel="stylesheet" href="lib/css/zenburn.css">
|
<link rel="stylesheet" href="lib/css/zenburn.css">
|
||||||
|
|
||||||
<!-- If the query includes 'print-pdf', include the PDF print sheet -->
|
<!-- Printing and PDF exports -->
|
||||||
<script>
|
<script>
|
||||||
if( window.location.search.match( /print-pdf/gi ) ) {
|
|
||||||
var link = document.createElement( 'link' );
|
var link = document.createElement( 'link' );
|
||||||
link.rel = 'stylesheet';
|
link.rel = 'stylesheet';
|
||||||
link.type = 'text/css';
|
link.type = 'text/css';
|
||||||
link.href = 'css/print/pdf.css';
|
link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
|
||||||
document.getElementsByTagName( 'head' )[0].appendChild( link );
|
document.getElementsByTagName( 'head' )[0].appendChild( link );
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<!--[if lt IE 9]>
|
<!--[if lt IE 9]>
|
||||||
|
|
@ -44,52 +42,40 @@
|
||||||
<div class="slides">
|
<div class="slides">
|
||||||
<section>
|
<section>
|
||||||
<h1>Reveal.js</h1>
|
<h1>Reveal.js</h1>
|
||||||
<h3>HTML Presentations Made Easy</h3>
|
<h3>The HTML Presentation Framework</h3>
|
||||||
<p>
|
<p>
|
||||||
<small>Created by <a href="http://hakim.se">Hakim El Hattab</a> / <a href="http://twitter.com/hakimel">@hakimel</a></small>
|
<small>Created by <a href="http://hakim.se">Hakim El Hattab</a> / <a href="http://twitter.com/hakimel">@hakimel</a></small>
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<h2>Heads Up</h2>
|
<h2>Hello There</h2>
|
||||||
<p>
|
<p>
|
||||||
reveal.js is a framework for easily creating beautiful presentations using HTML. You'll need a browser with
|
reveal.js enables you to create beautiful interactive slide decks using HTML. This presentation will show you examples of what it can do.
|
||||||
support for CSS 3D transforms to see it in its full glory.
|
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<aside class="notes">
|
|
||||||
Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard).
|
|
||||||
</aside>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Example of nested vertical slides -->
|
<!-- Example of nested vertical slides -->
|
||||||
<section>
|
<section>
|
||||||
<section>
|
<section>
|
||||||
<h2>Vertical Slides</h2>
|
<h2>Vertical Slides</h2>
|
||||||
<p>
|
<p>Slides can be nested inside of each other.</p>
|
||||||
Slides can be nested inside of other slides,
|
<p>Use the <em>Space</em> key to navigate through all slides.</p>
|
||||||
try pressing <a href="#" class="navigate-down">down</a>.
|
<br>
|
||||||
</p>
|
<a href="#" class="navigate-down">
|
||||||
<a href="#" class="image navigate-down">
|
<img width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
|
||||||
<img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
|
|
||||||
</a>
|
</a>
|
||||||
</section>
|
</section>
|
||||||
<section>
|
<section>
|
||||||
<h2>Basement Level 1</h2>
|
<h2>Basement Level 1</h2>
|
||||||
<p>Press down or up to navigate.</p>
|
<p>Nested slides are useful for adding additional detail underneath a high level horizontal slide.</p>
|
||||||
</section>
|
</section>
|
||||||
<section>
|
<section>
|
||||||
<h2>Basement Level 2</h2>
|
<h2>Basement Level 2</h2>
|
||||||
<p>Cornify</p>
|
|
||||||
<a class="test" href="http://cornify.com">
|
|
||||||
<img width="280" height="326" src="https://s3.amazonaws.com/hakim-static/reveal-js/cornify.gif" alt="Unicorn">
|
|
||||||
</a>
|
|
||||||
</section>
|
|
||||||
<section>
|
|
||||||
<h2>Basement Level 3</h2>
|
|
||||||
<p>That's it, time to go back up.</p>
|
<p>That's it, time to go back up.</p>
|
||||||
<a href="#/2" class="image">
|
<br>
|
||||||
<img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Up arrow" style="-webkit-transform: rotate(180deg);">
|
<a href="#/2">
|
||||||
|
<img width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Up arrow" style="-webkit-transform: rotate(180deg);">
|
||||||
</a>
|
</a>
|
||||||
</section>
|
</section>
|
||||||
</section>
|
</section>
|
||||||
|
|
@ -97,7 +83,7 @@
|
||||||
<section>
|
<section>
|
||||||
<h2>Slides</h2>
|
<h2>Slides</h2>
|
||||||
<p>
|
<p>
|
||||||
Not a coder? No problem. There's a fully-featured visual editor for authoring these, try it out at <a href="http://slid.es" target="_blank">http://slid.es</a>.
|
Not a coder? Not a problem. There's a fully-featured visual editor for authoring these, try it out at <a href="http://slides.com" target="_blank">http://slides.com</a>.
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
@ -112,148 +98,125 @@
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<h2>Works in Mobile Safari</h2>
|
<h2>Touch Optimized</h2>
|
||||||
<p>
|
<p>
|
||||||
Try it out! You can swipe through the slides and pinch your way to the overview.
|
Presentations look great on touch devices, like mobile phones and tablets. Simply swipe through your slides.
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section>
|
|
||||||
<h2>Marvelous Unordered List</h2>
|
|
||||||
<ul>
|
|
||||||
<li>No order here</li>
|
|
||||||
<li>Or here</li>
|
|
||||||
<li>Or here</li>
|
|
||||||
<li>Or here</li>
|
|
||||||
</ul>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section>
|
|
||||||
<h2>Fantastic Ordered List</h2>
|
|
||||||
<ol>
|
|
||||||
<li>One is smaller than...</li>
|
|
||||||
<li>Two is smaller than...</li>
|
|
||||||
<li>Three!</li>
|
|
||||||
</ol>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section data-markdown>
|
<section data-markdown>
|
||||||
<script type="text/template">
|
<script type="text/template">
|
||||||
## Markdown support
|
## Markdown support
|
||||||
|
|
||||||
For those of you who like that sort of thing. Instructions and a bit more info available [here](https://github.com/hakimel/reveal.js#markdown).
|
Write content using inline or external Markdown.
|
||||||
|
Instructions and more info available in the [readme](https://github.com/hakimel/reveal.js#markdown).
|
||||||
|
|
||||||
```
|
```
|
||||||
<section data-markdown>
|
<section data-markdown>
|
||||||
## Markdown support
|
## Markdown support
|
||||||
|
|
||||||
For those of you who like that sort of thing.
|
Write content using inline or external Markdown.
|
||||||
Instructions and a bit more info available [here](https://github.com/hakimel/reveal.js#markdown).
|
Instructions and more info available in the [readme](https://github.com/hakimel/reveal.js#markdown).
|
||||||
</section>
|
</section>
|
||||||
```
|
```
|
||||||
</script>
|
</script>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<section id="fragments">
|
||||||
|
<h2>Fragments</h2>
|
||||||
|
<p>Hit the next arrow...</p>
|
||||||
|
<p class="fragment">... to step through ...</p>
|
||||||
|
<p><span class="fragment">... a</span> <span class="fragment">fragmented</span> <span class="fragment">slide.</span></p>
|
||||||
|
|
||||||
|
<aside class="notes">
|
||||||
|
This slide has fragments which are also stepped through in the notes window.
|
||||||
|
</aside>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<h2>Fragment Styles</h2>
|
||||||
|
<p>There's different types of fragments, like:</p>
|
||||||
|
<p class="fragment grow">grow</p>
|
||||||
|
<p class="fragment shrink">shrink</p>
|
||||||
|
<p class="fragment roll-in">roll-in</p>
|
||||||
|
<p class="fragment fade-out">fade-out</p>
|
||||||
|
<p class="fragment current-visible">current-visible</p>
|
||||||
|
<p class="fragment highlight-red">highlight-red</p>
|
||||||
|
<p class="fragment highlight-blue">highlight-blue</p>
|
||||||
|
</section>
|
||||||
|
</section>
|
||||||
|
|
||||||
<section id="transitions">
|
<section id="transitions">
|
||||||
<h2>Transition Styles</h2>
|
<h2>Transition Styles</h2>
|
||||||
<p>
|
<p>
|
||||||
You can select from different transitions, like: <br>
|
You can select from different transitions, like: <br>
|
||||||
<a href="?transition=cube#/transitions">Cube</a> -
|
|
||||||
<a href="?transition=page#/transitions">Page</a> -
|
|
||||||
<a href="?transition=concave#/transitions">Concave</a> -
|
|
||||||
<a href="?transition=zoom#/transitions">Zoom</a> -
|
|
||||||
<a href="?transition=linear#/transitions">Linear</a> -
|
|
||||||
<a href="?transition=fade#/transitions">Fade</a> -
|
|
||||||
<a href="?transition=none#/transitions">None</a> -
|
<a href="?transition=none#/transitions">None</a> -
|
||||||
<a href="?#/transitions">Default</a>
|
<a href="?transition=fade#/transitions">Fade</a> -
|
||||||
|
<a href="?transition=slide#/transitions">Slide</a> -
|
||||||
|
<a href="?transition=convex#/transitions">Convex</a> -
|
||||||
|
<a href="?transition=concave#/transitions">Concave</a> -
|
||||||
|
<a href="?transition=zoom#/transitions">Zoom</a>
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section id="themes">
|
<section id="themes">
|
||||||
<h2>Themes</h2>
|
<h2>Themes</h2>
|
||||||
<p>
|
<p>
|
||||||
Reveal.js comes with a few themes built in: <br>
|
reveal.js comes with a few themes built in: <br>
|
||||||
<a href="?#/themes">Default</a> -
|
<!-- Hacks to swap themes after the page has loaded. Not flexible and only intended for the reveal.js demo deck. -->
|
||||||
<a href="?theme=sky#/themes">Sky</a> -
|
<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/black.css'); return false;">Black (default)</a> -
|
||||||
<a href="?theme=beige#/themes">Beige</a> -
|
<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/white.css'); return false;">White</a> -
|
||||||
<a href="?theme=simple#/themes">Simple</a> -
|
<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/league.css'); return false;">League</a> -
|
||||||
<a href="?theme=serif#/themes">Serif</a> -
|
<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/sky.css'); return false;">Sky</a> -
|
||||||
<a href="?theme=night#/themes">Night</a> <br>
|
<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/beige.css'); return false;">Beige</a> -
|
||||||
<a href="?theme=moon#/themes">Moon</a> -
|
<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/simple.css'); return false;">Simple</a> <br>
|
||||||
<a href="?theme=solarized#/themes">Solarized</a>
|
<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/serif.css'); return false;">Serif</a> -
|
||||||
</p>
|
<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/night.css'); return false;">Night</a> -
|
||||||
<p>
|
<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/moon.css'); return false;">Moon</a> -
|
||||||
<small>
|
<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/solarized.css'); return false;">Solarized</a>
|
||||||
* Theme demos are loaded after the presentation which leads to flicker. In production you should load your theme in the <code><head></code> using a <code><link></code>.
|
|
||||||
</small>
|
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<h2>Global State</h2>
|
<section data-background="#dddddd">
|
||||||
<p>
|
|
||||||
Set <code>data-state="something"</code> on a slide and <code>"something"</code>
|
|
||||||
will be added as a class to the document element when the slide is open. This lets you
|
|
||||||
apply broader style changes, like switching the background.
|
|
||||||
</p>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section data-state="customevent">
|
|
||||||
<h2>Custom Events</h2>
|
|
||||||
<p>
|
|
||||||
Additionally custom events can be triggered on a per slide basis by binding to the <code>data-state</code> name.
|
|
||||||
</p>
|
|
||||||
<pre><code data-trim contenteditable style="font-size: 18px; margin-top: 20px;">
|
|
||||||
Reveal.addEventListener( 'customevent', function() {
|
|
||||||
console.log( '"customevent" has fired' );
|
|
||||||
} );
|
|
||||||
</code></pre>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section>
|
|
||||||
<section data-background="#007777">
|
|
||||||
<h2>Slide Backgrounds</h2>
|
<h2>Slide Backgrounds</h2>
|
||||||
<p>
|
<p>
|
||||||
Set <code>data-background="#007777"</code> on a slide to change the full page background to the given color. All CSS color formats are supported.
|
Set <code>data-background="#dddddd"</code> on a slide to change the background color. All CSS color formats are supported.
|
||||||
</p>
|
</p>
|
||||||
<a href="#" class="image navigate-down">
|
<a href="#" class="navigate-down">
|
||||||
<img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
|
<img width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
|
||||||
</a>
|
</a>
|
||||||
</section>
|
</section>
|
||||||
<section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png">
|
<section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/image-placeholder.png">
|
||||||
<h2>Image Backgrounds</h2>
|
<h2>Image Backgrounds</h2>
|
||||||
<pre><code><section data-background="image.png"></code></pre>
|
<pre><code><section data-background="image.png"></code></pre>
|
||||||
</section>
|
</section>
|
||||||
<section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" data-background-repeat="repeat" data-background-size="100px">
|
<section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/image-placeholder.png" data-background-repeat="repeat" data-background-size="100px">
|
||||||
<h2>Repeated Image Backgrounds</h2>
|
<h2>Tiled Backgrounds</h2>
|
||||||
<pre><code style="word-wrap: break-word;"><section data-background="image.png" data-background-repeat="repeat" data-background-size="100px"></code></pre>
|
<pre><code style="word-wrap: break-word;"><section data-background="image.png" data-background-repeat="repeat" data-background-size="100px"></code></pre>
|
||||||
</section>
|
</section>
|
||||||
|
<section data-background-video="https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.mp4,https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.webm" data-background-color="#000000">
|
||||||
|
<div style="background-color: rgba(0, 0, 0, 0.9); color: #fff; padding: 20px;">
|
||||||
|
<h2>Video Backgrounds</h2>
|
||||||
|
<pre><code style="word-wrap: break-word;"><section data-background-video="video.mp4,video.webm"></code></pre>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section data-transition="linear" data-background="#4d7e65" data-background-transition="slide">
|
<section data-transition="slide" data-background="#4d7e65" data-background-transition="zoom">
|
||||||
<h2>Background Transitions</h2>
|
<h2>Background Transitions</h2>
|
||||||
<p>
|
<p>
|
||||||
Pass reveal.js the <code>backgroundTransition: 'slide'</code> config argument to make backgrounds slide rather than fade.
|
Different background transitions are available via the backgroundTransition option. This one's called "zoom".
|
||||||
</p>
|
</p>
|
||||||
|
<pre><code>Reveal.configure({ backgroundTransition: 'zoom' })</code></pre>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section data-transition="linear" data-background="#8c4738" data-background-transition="slide">
|
<section data-transition="slide" data-background="#b5533c" data-background-transition="zoom">
|
||||||
<h2>Background Transition Override</h2>
|
<h2>Background Transitions</h2>
|
||||||
<p>
|
<p>
|
||||||
You can override background transitions per slide by using <code>data-background-transition="slide"</code>.
|
You can override background transitions per-slide.
|
||||||
</p>
|
</p>
|
||||||
</section>
|
<pre><code style="word-wrap: break-word;"><section data-background-transition="zoom"></code></pre>
|
||||||
|
|
||||||
<section>
|
|
||||||
<h2>Clever Quotes</h2>
|
|
||||||
<p>
|
|
||||||
These guys come in two forms, inline: <q cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations">
|
|
||||||
“The nice thing about standards is that there are so many to choose from”</q> and block:
|
|
||||||
</p>
|
|
||||||
<blockquote cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations">
|
|
||||||
“For years there has been a theory that millions of monkeys typing at random on millions of typewriters would
|
|
||||||
reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.”
|
|
||||||
</blockquote>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
|
|
@ -274,7 +237,68 @@ function linkify( selector ) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</code></pre>
|
</code></pre>
|
||||||
<p>Courtesy of <a href="http://softwaremaniacs.org/soft/highlight/en/description/">highlight.js</a>.</p>
|
<p>Code syntax highlighting courtesy of <a href="http://softwaremaniacs.org/soft/highlight/en/description/">highlight.js</a>.</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>Marvelous List</h2>
|
||||||
|
<ul>
|
||||||
|
<li>No order here</li>
|
||||||
|
<li>Or here</li>
|
||||||
|
<li>Or here</li>
|
||||||
|
<li>Or here</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>Fantastic Ordered List</h2>
|
||||||
|
<ol>
|
||||||
|
<li>One is smaller than...</li>
|
||||||
|
<li>Two is smaller than...</li>
|
||||||
|
<li>Three!</li>
|
||||||
|
</ol>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>Tabular Tables</h2>
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Item</th>
|
||||||
|
<th>Value</th>
|
||||||
|
<th>Quantity</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>Apples</td>
|
||||||
|
<td>$1</td>
|
||||||
|
<td>7</td>
|
||||||
|
<tr>
|
||||||
|
<tr>
|
||||||
|
<td>Lemonade</td>
|
||||||
|
<td>$2</td>
|
||||||
|
<td>18</td>
|
||||||
|
<tr>
|
||||||
|
<tr>
|
||||||
|
<td>Bread</td>
|
||||||
|
<td>$3</td>
|
||||||
|
<td>2</td>
|
||||||
|
<tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>Clever Quotes</h2>
|
||||||
|
<p>
|
||||||
|
These guys come in two forms, inline: <q cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations">
|
||||||
|
“The nice thing about standards is that there are so many to choose from”</q> and block:
|
||||||
|
</p>
|
||||||
|
<blockquote cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations">
|
||||||
|
“For years there has been a theory that millions of monkeys typing at random on millions of typewriters would
|
||||||
|
reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.”
|
||||||
|
</blockquote>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
|
|
@ -286,71 +310,66 @@ function linkify( selector ) {
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<section id="fragments">
|
<h2>Speaker View</h2>
|
||||||
<h2>Fragmented Views</h2>
|
<p>There's a <a href="https://github.com/hakimel/reveal.js#speaker-notes">speaker view</a>. It includes a timer, preview of the upcoming slide as well as your speaker notes.</p>
|
||||||
<p>Hit the next arrow...</p>
|
<p>Press the <em>S</em> key to try it out.</p>
|
||||||
<p class="fragment">... to step through ...</p>
|
|
||||||
<ol>
|
|
||||||
<li class="fragment"><code>any type</code></li>
|
|
||||||
<li class="fragment"><em>of view</em></li>
|
|
||||||
<li class="fragment"><strong>fragments</strong></li>
|
|
||||||
</ol>
|
|
||||||
|
|
||||||
<aside class="notes">
|
<aside class="notes">
|
||||||
This slide has fragments which are also stepped through in the notes window.
|
Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard).
|
||||||
</aside>
|
</aside>
|
||||||
</section>
|
</section>
|
||||||
<section>
|
|
||||||
<h2>Fragment Styles</h2>
|
|
||||||
<p>There's a few styles of fragments, like:</p>
|
|
||||||
<p class="fragment grow">grow</p>
|
|
||||||
<p class="fragment shrink">shrink</p>
|
|
||||||
<p class="fragment roll-in">roll-in</p>
|
|
||||||
<p class="fragment fade-out">fade-out</p>
|
|
||||||
<p class="fragment highlight-red">highlight-red</p>
|
|
||||||
<p class="fragment highlight-green">highlight-green</p>
|
|
||||||
<p class="fragment highlight-blue">highlight-blue</p>
|
|
||||||
<p class="fragment current-visible">current-visible</p>
|
|
||||||
<p class="fragment highlight-current-blue">highlight-current-blue</p>
|
|
||||||
</section>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section>
|
|
||||||
<h2>Spectacular image!</h2>
|
|
||||||
<a class="image" href="http://lab.hakim.se/meny/" target="_blank">
|
|
||||||
<img width="320" height="299" src="http://s3.amazonaws.com/hakim-static/portfolio/images/meny.png" alt="Meny">
|
|
||||||
</a>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<h2>Export to PDF</h2>
|
<h2>Export to PDF</h2>
|
||||||
<p>Presentations can be <a href="https://github.com/hakimel/reveal.js#pdf-export">exported to PDF</a>, below is an example that's been uploaded to SlideShare.</p>
|
<p>Presentations can be <a href="https://github.com/hakimel/reveal.js#pdf-export">exported to PDF</a>, here's an example:</p>
|
||||||
<iframe id="slideshare" src="http://www.slideshare.net/slideshow/embed_code/13872948" width="455" height="356" style="margin:0;overflow:hidden;border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen> </iframe>
|
<iframe src="//www.slideshare.net/slideshow/embed_code/42840540" width="445" height="355" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:3px solid #666; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe>
|
||||||
<script>
|
</section>
|
||||||
document.getElementById('slideshare').attributeName = 'allowfullscreen';
|
|
||||||
</script>
|
<section>
|
||||||
|
<h2>Global State</h2>
|
||||||
|
<p>
|
||||||
|
Set <code>data-state="something"</code> on a slide and <code>"something"</code>
|
||||||
|
will be added as a class to the document element when the slide is open. This lets you
|
||||||
|
apply broader style changes, like switching the page background.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section data-state="customevent">
|
||||||
|
<h2>State Events</h2>
|
||||||
|
<p>
|
||||||
|
Additionally custom events can be triggered on a per slide basis by binding to the <code>data-state</code> name.
|
||||||
|
</p>
|
||||||
|
<pre><code class="javascript" data-trim contenteditable style="font-size: 18px;">
|
||||||
|
Reveal.addEventListener( 'customevent', function() {
|
||||||
|
console.log( '"customevent" has fired' );
|
||||||
|
} );
|
||||||
|
</code></pre>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<h2>Take a Moment</h2>
|
<h2>Take a Moment</h2>
|
||||||
<p>
|
<p>
|
||||||
Press b or period on your keyboard to enter the 'paused' mode. This mode is helpful when you want to take distracting slides off the screen
|
Press B or . on your keyboard to pause the presentation. This is helpful when you're on stage and want to take distracting slides off the screen.
|
||||||
during a presentation.
|
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<h2>Stellar Links</h2>
|
<h2>Much more</h2>
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="http://slid.es">Try the online editor</a></li>
|
<li>Right-to-left support</li>
|
||||||
<li><a href="https://github.com/hakimel/reveal.js">Source code on GitHub</a></li>
|
<li><a href="https://github.com/hakimel/reveal.js#api">Extensive JavaScript API</a></li>
|
||||||
<li><a href="http://twitter.com/hakimel">Follow me on Twitter</a></li>
|
<li><a href="https://github.com/hakimel/reveal.js#auto-sliding">Auto-progression</a></li>
|
||||||
|
<li><a href="https://github.com/hakimel/reveal.js#parallax-background">Parallax backgrounds</a></li>
|
||||||
|
<li><a href="https://github.com/hakimel/reveal.js#keyboard-bindings">Custom keyboard bindings</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section>
|
<section style="text-align: left;">
|
||||||
<h1>THE END</h1>
|
<h1>THE END</h1>
|
||||||
<h3>BY Hakim El Hattab / hakim.se</h3>
|
<p>
|
||||||
|
- <a href="http://slides.com">Try the online editor</a> <br>
|
||||||
|
- <a href="https://github.com/hakimel/reveal.js">Source code & documentation</a>
|
||||||
|
</p>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -358,11 +377,11 @@ function linkify( selector ) {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script src="lib/js/head.min.js"></script>
|
<script src="lib/js/head.min.js"></script>
|
||||||
<script src="js/reveal.min.js"></script>
|
<script src="js/reveal.js"></script>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
// Full list of configuration options available here:
|
// Full list of configuration options available at:
|
||||||
// https://github.com/hakimel/reveal.js#configuration
|
// https://github.com/hakimel/reveal.js#configuration
|
||||||
Reveal.initialize({
|
Reveal.initialize({
|
||||||
controls: true,
|
controls: true,
|
||||||
|
|
@ -370,21 +389,16 @@ function linkify( selector ) {
|
||||||
history: true,
|
history: true,
|
||||||
center: true,
|
center: true,
|
||||||
|
|
||||||
theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
|
transition: 'slide', // none/fade/slide/convex/concave/zoom
|
||||||
transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/fade/none
|
|
||||||
|
|
||||||
// Parallax scrolling
|
// Optional reveal.js plugins
|
||||||
// parallaxBackgroundImage: 'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg',
|
|
||||||
// parallaxBackgroundSize: '2100px 900px',
|
|
||||||
|
|
||||||
// Optional libraries used to extend on reveal.js
|
|
||||||
dependencies: [
|
dependencies: [
|
||||||
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
|
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
|
||||||
{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
|
{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
|
||||||
{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
|
{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
|
||||||
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
|
{ src: 'plugin/highlight/highlight.js', async: true, condition: function() { return !!document.querySelector( 'pre code' ); }, callback: function() { hljs.initHighlightingOnLoad(); } },
|
||||||
{ src: 'plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
|
{ src: 'plugin/zoom-js/zoom.js', async: true },
|
||||||
{ src: 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }
|
{ src: 'plugin/notes/notes.js', async: true }
|
||||||
]
|
]
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
||||||
1550
js/reveal.js
1550
js/reveal.js
File diff suppressed because it is too large
Load Diff
9
js/reveal.min.js
vendored
9
js/reveal.min.js
vendored
File diff suppressed because one or more lines are too long
|
|
@ -5,110 +5,113 @@ based on dark.css by Ivan Sagalaev
|
||||||
|
|
||||||
*/
|
*/
|
||||||
|
|
||||||
pre code {
|
.hljs {
|
||||||
display: block; padding: 0.5em;
|
display: block; padding: 0.5em;
|
||||||
background: #3F3F3F;
|
background: #3F3F3F;
|
||||||
color: #DCDCDC;
|
color: #DCDCDC;
|
||||||
}
|
}
|
||||||
|
|
||||||
pre .keyword,
|
.hljs-keyword,
|
||||||
pre .tag,
|
.hljs-tag,
|
||||||
pre .css .class,
|
.css .hljs-class,
|
||||||
pre .css .id,
|
.css .hljs-id,
|
||||||
pre .lisp .title,
|
.lisp .hljs-title,
|
||||||
pre .nginx .title,
|
.nginx .hljs-title,
|
||||||
pre .request,
|
.hljs-request,
|
||||||
pre .status,
|
.hljs-status,
|
||||||
pre .clojure .attribute {
|
.clojure .hljs-attribute {
|
||||||
color: #E3CEAB;
|
color: #E3CEAB;
|
||||||
}
|
}
|
||||||
|
|
||||||
pre .django .template_tag,
|
.django .hljs-template_tag,
|
||||||
pre .django .variable,
|
.django .hljs-variable,
|
||||||
pre .django .filter .argument {
|
.django .hljs-filter .hljs-argument {
|
||||||
color: #DCDCDC;
|
color: #DCDCDC;
|
||||||
}
|
}
|
||||||
|
|
||||||
pre .number,
|
.hljs-number,
|
||||||
pre .date {
|
.hljs-date {
|
||||||
color: #8CD0D3;
|
color: #8CD0D3;
|
||||||
}
|
}
|
||||||
|
|
||||||
pre .dos .envvar,
|
.dos .hljs-envvar,
|
||||||
pre .dos .stream,
|
.dos .hljs-stream,
|
||||||
pre .variable,
|
.hljs-variable,
|
||||||
pre .apache .sqbracket {
|
.apache .hljs-sqbracket {
|
||||||
color: #EFDCBC;
|
color: #EFDCBC;
|
||||||
}
|
}
|
||||||
|
|
||||||
pre .dos .flow,
|
.dos .hljs-flow,
|
||||||
pre .diff .change,
|
.diff .hljs-change,
|
||||||
pre .python .exception,
|
.python .exception,
|
||||||
pre .python .built_in,
|
.python .hljs-built_in,
|
||||||
pre .literal,
|
.hljs-literal,
|
||||||
pre .tex .special {
|
.tex .hljs-special {
|
||||||
color: #EFEFAF;
|
color: #EFEFAF;
|
||||||
}
|
}
|
||||||
|
|
||||||
pre .diff .chunk,
|
.diff .hljs-chunk,
|
||||||
pre .subst {
|
.hljs-subst {
|
||||||
color: #8F8F8F;
|
color: #8F8F8F;
|
||||||
}
|
}
|
||||||
|
|
||||||
pre .dos .keyword,
|
.dos .hljs-keyword,
|
||||||
pre .python .decorator,
|
.python .hljs-decorator,
|
||||||
pre .title,
|
.hljs-title,
|
||||||
pre .haskell .type,
|
.haskell .hljs-type,
|
||||||
pre .diff .header,
|
.diff .hljs-header,
|
||||||
pre .ruby .class .parent,
|
.ruby .hljs-class .hljs-parent,
|
||||||
pre .apache .tag,
|
.apache .hljs-tag,
|
||||||
pre .nginx .built_in,
|
.nginx .hljs-built_in,
|
||||||
pre .tex .command,
|
.tex .hljs-command,
|
||||||
pre .prompt {
|
.hljs-prompt {
|
||||||
color: #efef8f;
|
color: #efef8f;
|
||||||
}
|
}
|
||||||
|
|
||||||
pre .dos .winutils,
|
.dos .hljs-winutils,
|
||||||
pre .ruby .symbol,
|
.ruby .hljs-symbol,
|
||||||
pre .ruby .symbol .string,
|
.ruby .hljs-symbol .hljs-string,
|
||||||
pre .ruby .string {
|
.ruby .hljs-string {
|
||||||
color: #DCA3A3;
|
color: #DCA3A3;
|
||||||
}
|
}
|
||||||
|
|
||||||
pre .diff .deletion,
|
.diff .hljs-deletion,
|
||||||
pre .string,
|
.hljs-string,
|
||||||
pre .tag .value,
|
.hljs-tag .hljs-value,
|
||||||
pre .preprocessor,
|
.hljs-preprocessor,
|
||||||
pre .built_in,
|
.hljs-pragma,
|
||||||
pre .sql .aggregate,
|
.hljs-built_in,
|
||||||
pre .javadoc,
|
.sql .hljs-aggregate,
|
||||||
pre .smalltalk .class,
|
.hljs-javadoc,
|
||||||
pre .smalltalk .localvars,
|
.smalltalk .hljs-class,
|
||||||
pre .smalltalk .array,
|
.smalltalk .hljs-localvars,
|
||||||
pre .css .rules .value,
|
.smalltalk .hljs-array,
|
||||||
pre .attr_selector,
|
.css .hljs-rules .hljs-value,
|
||||||
pre .pseudo,
|
.hljs-attr_selector,
|
||||||
pre .apache .cbracket,
|
.hljs-pseudo,
|
||||||
pre .tex .formula {
|
.apache .hljs-cbracket,
|
||||||
|
.tex .hljs-formula,
|
||||||
|
.coffeescript .hljs-attribute {
|
||||||
color: #CC9393;
|
color: #CC9393;
|
||||||
}
|
}
|
||||||
|
|
||||||
pre .shebang,
|
.hljs-shebang,
|
||||||
pre .diff .addition,
|
.diff .hljs-addition,
|
||||||
pre .comment,
|
.hljs-comment,
|
||||||
pre .java .annotation,
|
.java .hljs-annotation,
|
||||||
pre .template_comment,
|
.hljs-template_comment,
|
||||||
pre .pi,
|
.hljs-pi,
|
||||||
pre .doctype {
|
.hljs-doctype {
|
||||||
color: #7F9F7F;
|
color: #7F9F7F;
|
||||||
}
|
}
|
||||||
|
|
||||||
pre .coffeescript .javascript,
|
.coffeescript .javascript,
|
||||||
pre .javascript .xml,
|
.javascript .xml,
|
||||||
pre .tex .formula,
|
.tex .hljs-formula,
|
||||||
pre .xml .javascript,
|
.xml .javascript,
|
||||||
pre .xml .vbscript,
|
.xml .vbscript,
|
||||||
pre .xml .css,
|
.xml .css,
|
||||||
pre .xml .cdata {
|
.xml .hljs-cdata {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
10
lib/font/league-gothic/league-gothic.css
Normal file
10
lib/font/league-gothic/league-gothic.css
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
@font-face {
|
||||||
|
font-family: 'League Gothic';
|
||||||
|
src: url('league-gothic.eot');
|
||||||
|
src: url('league-gothic.eot?#iefix') format('embedded-opentype'),
|
||||||
|
url('league-gothic.woff') format('woff'),
|
||||||
|
url('league-gothic.ttf') format('truetype');
|
||||||
|
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
BIN
lib/font/league-gothic/league-gothic.eot
Executable file
BIN
lib/font/league-gothic/league-gothic.eot
Executable file
Binary file not shown.
BIN
lib/font/league-gothic/league-gothic.ttf
Executable file
BIN
lib/font/league-gothic/league-gothic.ttf
Executable file
Binary file not shown.
BIN
lib/font/league-gothic/league-gothic.woff
Executable file
BIN
lib/font/league-gothic/league-gothic.woff
Executable file
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 46 KiB |
Binary file not shown.
Binary file not shown.
45
lib/font/source-sans-pro/LICENSE
Normal file
45
lib/font/source-sans-pro/LICENSE
Normal file
File diff suppressed because one or more lines are too long
BIN
lib/font/source-sans-pro/source-sans-pro-italic.eot
Executable file
BIN
lib/font/source-sans-pro/source-sans-pro-italic.eot
Executable file
Binary file not shown.
BIN
lib/font/source-sans-pro/source-sans-pro-italic.ttf
Executable file
BIN
lib/font/source-sans-pro/source-sans-pro-italic.ttf
Executable file
Binary file not shown.
BIN
lib/font/source-sans-pro/source-sans-pro-italic.woff
Executable file
BIN
lib/font/source-sans-pro/source-sans-pro-italic.woff
Executable file
Binary file not shown.
BIN
lib/font/source-sans-pro/source-sans-pro-regular.eot
Executable file
BIN
lib/font/source-sans-pro/source-sans-pro-regular.eot
Executable file
Binary file not shown.
BIN
lib/font/source-sans-pro/source-sans-pro-regular.ttf
Executable file
BIN
lib/font/source-sans-pro/source-sans-pro-regular.ttf
Executable file
Binary file not shown.
BIN
lib/font/source-sans-pro/source-sans-pro-regular.woff
Executable file
BIN
lib/font/source-sans-pro/source-sans-pro-regular.woff
Executable file
Binary file not shown.
BIN
lib/font/source-sans-pro/source-sans-pro-semibold.eot
Executable file
BIN
lib/font/source-sans-pro/source-sans-pro-semibold.eot
Executable file
Binary file not shown.
BIN
lib/font/source-sans-pro/source-sans-pro-semibold.ttf
Executable file
BIN
lib/font/source-sans-pro/source-sans-pro-semibold.ttf
Executable file
Binary file not shown.
BIN
lib/font/source-sans-pro/source-sans-pro-semibold.woff
Executable file
BIN
lib/font/source-sans-pro/source-sans-pro-semibold.woff
Executable file
Binary file not shown.
BIN
lib/font/source-sans-pro/source-sans-pro-semibolditalic.eot
Executable file
BIN
lib/font/source-sans-pro/source-sans-pro-semibolditalic.eot
Executable file
Binary file not shown.
BIN
lib/font/source-sans-pro/source-sans-pro-semibolditalic.ttf
Executable file
BIN
lib/font/source-sans-pro/source-sans-pro-semibolditalic.ttf
Executable file
Binary file not shown.
BIN
lib/font/source-sans-pro/source-sans-pro-semibolditalic.woff
Executable file
BIN
lib/font/source-sans-pro/source-sans-pro-semibolditalic.woff
Executable file
Binary file not shown.
39
lib/font/source-sans-pro/source-sans-pro.css
Normal file
39
lib/font/source-sans-pro/source-sans-pro.css
Normal file
|
|
@ -0,0 +1,39 @@
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Source Sans Pro';
|
||||||
|
src: url('source-sans-pro-regular.eot');
|
||||||
|
src: url('source-sans-pro-regular.eot?#iefix') format('embedded-opentype'),
|
||||||
|
url('source-sans-pro-regular.woff') format('woff'),
|
||||||
|
url('source-sans-pro-regular.ttf') format('truetype');
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Source Sans Pro';
|
||||||
|
src: url('source-sans-pro-italic.eot');
|
||||||
|
src: url('source-sans-pro-italic.eot?#iefix') format('embedded-opentype'),
|
||||||
|
url('source-sans-pro-italic.woff') format('woff'),
|
||||||
|
url('source-sans-pro-italic.ttf') format('truetype');
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Source Sans Pro';
|
||||||
|
src: url('source-sans-pro-semibold.eot');
|
||||||
|
src: url('source-sans-pro-semibold.eot?#iefix') format('embedded-opentype'),
|
||||||
|
url('source-sans-pro-semibold.woff') format('woff'),
|
||||||
|
url('source-sans-pro-semibold.ttf') format('truetype');
|
||||||
|
font-weight: 600;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Source Sans Pro';
|
||||||
|
src: url('source-sans-pro-semibolditalic.eot');
|
||||||
|
src: url('source-sans-pro-semibolditalic.eot?#iefix') format('embedded-opentype'),
|
||||||
|
url('source-sans-pro-semibolditalic.woff') format('woff'),
|
||||||
|
url('source-sans-pro-semibolditalic.ttf') format('truetype');
|
||||||
|
font-weight: 600;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
14
package.json
14
package.json
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "reveal.js",
|
"name": "reveal.js",
|
||||||
"version": "2.6.2",
|
"version": "3.0.0",
|
||||||
"description": "The HTML Presentation Framework",
|
"description": "The HTML Presentation Framework",
|
||||||
"homepage": "http://lab.hakim.se/reveal-js",
|
"homepage": "http://lab.hakim.se/reveal-js",
|
||||||
"subdomain": "revealjs",
|
"subdomain": "revealjs",
|
||||||
|
|
@ -24,18 +24,20 @@
|
||||||
"underscore": "~1.5.1",
|
"underscore": "~1.5.1",
|
||||||
"express": "~2.5.9",
|
"express": "~2.5.9",
|
||||||
"mustache": "~0.7.2",
|
"mustache": "~0.7.2",
|
||||||
"socket.io": "~0.9.13"
|
"socket.io": "~0.9.16"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"grunt-contrib-qunit": "~0.2.2",
|
"grunt-contrib-qunit": "~0.5.2",
|
||||||
"grunt-contrib-jshint": "~0.6.4",
|
"grunt-contrib-jshint": "~0.6.4",
|
||||||
"grunt-contrib-cssmin": "~0.4.1",
|
"grunt-contrib-cssmin": "~0.4.1",
|
||||||
"grunt-contrib-uglify": "~0.2.4",
|
"grunt-contrib-uglify": "~0.2.4",
|
||||||
"grunt-contrib-watch": "~0.5.3",
|
"grunt-contrib-watch": "~0.5.3",
|
||||||
"grunt-contrib-sass": "~0.5.0",
|
"grunt-sass": "~0.14.0",
|
||||||
"grunt-contrib-connect": "~0.4.1",
|
"grunt-contrib-connect": "~0.8.0",
|
||||||
|
"grunt-autoprefixer": "~1.0.1",
|
||||||
"grunt-zip": "~0.7.0",
|
"grunt-zip": "~0.7.0",
|
||||||
"grunt": "~0.4.0"
|
"grunt": "~0.4.0",
|
||||||
|
"node-sass": "~0.9.3"
|
||||||
},
|
},
|
||||||
"licenses": [
|
"licenses": [
|
||||||
{
|
{
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -76,9 +76,11 @@ var b=right.criteria;if(a!==b){if(a>b||a===void 0)return 1;if(a<b||b===void 0)re
|
||||||
pointer.style.borderRadius = size - 5 + 'px';
|
pointer.style.borderRadius = size - 5 + 'px';
|
||||||
pointer.style.visibility = 'visible';
|
pointer.style.visibility = 'visible';
|
||||||
|
|
||||||
if( config.autoCenter ) {
|
|
||||||
tipPosition = frame.fingers[0].tipPosition;
|
tipPosition = frame.fingers[0].tipPosition;
|
||||||
|
|
||||||
|
if( config.autoCenter ) {
|
||||||
|
|
||||||
|
|
||||||
// Check whether the finger has entered the z range of the Leap Motion. Used for the autoCenter option.
|
// Check whether the finger has entered the z range of the Leap Motion. Used for the autoCenter option.
|
||||||
if( !entered ) {
|
if( !entered ) {
|
||||||
entered = true;
|
entered = true;
|
||||||
|
|
@ -144,7 +146,7 @@ var b=right.criteria;if(a!==b){if(a>b||a===void 0)return 1;if(a<b||b===void 0)re
|
||||||
// Two hand gestures
|
// Two hand gestures
|
||||||
else if( frame.hands.length === 2 ) {
|
else if( frame.hands.length === 2 ) {
|
||||||
// Upward two hand swipe gesture
|
// Upward two hand swipe gesture
|
||||||
if( gesture.direction[1] > 0 && gesture.type === 'swipe' ) {
|
if( gesture.type === 'swipe' && gesture.direction[1] > 0 ) {
|
||||||
Reveal.toggleOverview();
|
Reveal.toggleOverview();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -19,7 +19,7 @@
|
||||||
<div class="slides">
|
<div class="slides">
|
||||||
|
|
||||||
<!-- Use external markdown resource, separate slides by three newlines; vertical slides by two newlines -->
|
<!-- Use external markdown resource, 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>
|
<section data-markdown="example.md" data-separator="^\n\n\n" data-separator-vertical="^\n\n"></section>
|
||||||
|
|
||||||
<!-- Slides are separated by three dashes (quick 'n dirty regular expression) -->
|
<!-- Slides are separated by three dashes (quick 'n dirty regular expression) -->
|
||||||
<section data-markdown data-separator="---">
|
<section data-markdown data-separator="---">
|
||||||
|
|
@ -36,7 +36,7 @@
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Slides are separated by newline + three dashes + newline, vertical slides identical but two dashes -->
|
<!-- 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$">
|
<section data-markdown data-separator="^\n---\n$" data-separator-vertical="^\n--\n$">
|
||||||
<script type="text/template">
|
<script type="text/template">
|
||||||
## Demo 2
|
## Demo 2
|
||||||
Slide 1.1
|
Slide 1.1
|
||||||
|
|
|
||||||
|
|
@ -50,7 +50,7 @@
|
||||||
text = text.replace( new RegExp('\\n?\\t{' + leadingTabs + '}','g'), '\n' );
|
text = text.replace( new RegExp('\\n?\\t{' + leadingTabs + '}','g'), '\n' );
|
||||||
}
|
}
|
||||||
else if( leadingWs > 1 ) {
|
else if( leadingWs > 1 ) {
|
||||||
text = text.replace( new RegExp('\\n? {' + leadingWs + '}','g'), '\n' );
|
text = text.replace( new RegExp('\\n? {' + leadingWs + '}'), '\n' );
|
||||||
}
|
}
|
||||||
|
|
||||||
return text;
|
return text;
|
||||||
|
|
@ -219,12 +219,13 @@
|
||||||
|
|
||||||
xhr.onreadystatechange = function() {
|
xhr.onreadystatechange = function() {
|
||||||
if( xhr.readyState === 4 ) {
|
if( xhr.readyState === 4 ) {
|
||||||
if ( xhr.status >= 200 && xhr.status < 300 ) {
|
// file protocol yields status code 0 (useful for local debug, mobile applications etc.)
|
||||||
|
if ( ( xhr.status >= 200 && xhr.status < 300 ) || xhr.status === 0 ) {
|
||||||
|
|
||||||
section.outerHTML = slidify( xhr.responseText, {
|
section.outerHTML = slidify( xhr.responseText, {
|
||||||
separator: section.getAttribute( 'data-separator' ),
|
separator: section.getAttribute( 'data-separator' ),
|
||||||
verticalSeparator: section.getAttribute( 'data-vertical' ),
|
verticalSeparator: section.getAttribute( 'data-separator-vertical' ),
|
||||||
notesSeparator: section.getAttribute( 'data-notes' ),
|
notesSeparator: section.getAttribute( 'data-separator-notes' ),
|
||||||
attributes: getForwardedAttributes( section )
|
attributes: getForwardedAttributes( section )
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
@ -251,12 +252,12 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
else if( section.getAttribute( 'data-separator' ) || section.getAttribute( 'data-vertical' ) || section.getAttribute( 'data-notes' ) ) {
|
else if( section.getAttribute( 'data-separator' ) || section.getAttribute( 'data-separator-vertical' ) || section.getAttribute( 'data-separator-notes' ) ) {
|
||||||
|
|
||||||
section.outerHTML = slidify( getMarkdownFromSlide( section ), {
|
section.outerHTML = slidify( getMarkdownFromSlide( section ), {
|
||||||
separator: section.getAttribute( 'data-separator' ),
|
separator: section.getAttribute( 'data-separator' ),
|
||||||
verticalSeparator: section.getAttribute( 'data-vertical' ),
|
verticalSeparator: section.getAttribute( 'data-separator-vertical' ),
|
||||||
notesSeparator: section.getAttribute( 'data-notes' ),
|
notesSeparator: section.getAttribute( 'data-separator-notes' ),
|
||||||
attributes: getForwardedAttributes( section )
|
attributes: getForwardedAttributes( section )
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,57 +1,60 @@
|
||||||
(function() {
|
(function() {
|
||||||
|
|
||||||
// don't emit events from inside the previews themselves
|
// don't emit events from inside the previews themselves
|
||||||
if( window.location.search.match( /receiver/gi ) ) { return; }
|
if( window.location.search.match( /receiver/gi ) ) { return; }
|
||||||
|
|
||||||
var socket = io.connect(window.location.origin);
|
var socket = io.connect( window.location.origin ),
|
||||||
var socketId = Math.random().toString().slice(2);
|
socketId = Math.random().toString().slice( 2 );
|
||||||
|
|
||||||
console.log( 'View slide notes at ' + window.location.origin + '/notes/' + socketId );
|
console.log( 'View slide notes at ' + window.location.origin + '/notes/' + socketId );
|
||||||
|
|
||||||
window.open( window.location.origin + '/notes/' + socketId, 'notes-' + socketId );
|
window.open( window.location.origin + '/notes/' + socketId, 'notes-' + socketId );
|
||||||
|
|
||||||
// Fires when a fragment is shown
|
/**
|
||||||
Reveal.addEventListener( 'fragmentshown', function( event ) {
|
* Posts the current slide data to the notes window
|
||||||
var fragmentData = {
|
*/
|
||||||
fragment : 'next',
|
function post() {
|
||||||
socketId : socketId
|
|
||||||
|
var slideElement = Reveal.getCurrentSlide(),
|
||||||
|
notesElement = slideElement.querySelector( 'aside.notes' );
|
||||||
|
|
||||||
|
var messageData = {
|
||||||
|
notes: '',
|
||||||
|
markdown: false,
|
||||||
|
socketId: socketId,
|
||||||
|
state: Reveal.getState()
|
||||||
};
|
};
|
||||||
socket.emit('fragmentchanged', fragmentData);
|
|
||||||
} );
|
|
||||||
|
|
||||||
// Fires when a fragment is hidden
|
// Look for notes defined in a slide attribute
|
||||||
Reveal.addEventListener( 'fragmenthidden', function( event ) {
|
if( slideElement.hasAttribute( 'data-notes' ) ) {
|
||||||
var fragmentData = {
|
messageData.notes = slideElement.getAttribute( 'data-notes' );
|
||||||
fragment : 'previous',
|
|
||||||
socketId : socketId
|
|
||||||
};
|
|
||||||
socket.emit('fragmentchanged', fragmentData);
|
|
||||||
} );
|
|
||||||
|
|
||||||
// Fires when slide is changed
|
|
||||||
Reveal.addEventListener( 'slidechanged', function( event ) {
|
|
||||||
var nextindexh;
|
|
||||||
var nextindexv;
|
|
||||||
var slideElement = event.currentSlide;
|
|
||||||
|
|
||||||
if (slideElement.nextElementSibling && slideElement.parentNode.nodeName == 'SECTION') {
|
|
||||||
nextindexh = event.indexh;
|
|
||||||
nextindexv = event.indexv + 1;
|
|
||||||
} else {
|
|
||||||
nextindexh = event.indexh + 1;
|
|
||||||
nextindexv = 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
var notes = slideElement.querySelector('aside.notes');
|
// Look for notes defined in an aside element
|
||||||
var slideData = {
|
if( notesElement ) {
|
||||||
notes : notes ? notes.innerHTML : '',
|
messageData.notes = notesElement.innerHTML;
|
||||||
indexh : event.indexh,
|
messageData.markdown = typeof notesElement.getAttribute( 'data-markdown' ) === 'string';
|
||||||
indexv : event.indexv,
|
}
|
||||||
nextindexh : nextindexh,
|
|
||||||
nextindexv : nextindexv,
|
|
||||||
socketId : socketId,
|
|
||||||
markdown : notes ? typeof notes.getAttribute('data-markdown') === 'string' : false
|
|
||||||
|
|
||||||
};
|
socket.emit( 'statechanged', messageData );
|
||||||
|
|
||||||
socket.emit('slidechanged', slideData);
|
}
|
||||||
|
|
||||||
|
// When a new notes window connects, post our current state
|
||||||
|
socket.on( 'connect', function( data ) {
|
||||||
|
post();
|
||||||
} );
|
} );
|
||||||
|
|
||||||
|
// Monitor events that trigger a change in state
|
||||||
|
Reveal.addEventListener( 'slidechanged', post );
|
||||||
|
Reveal.addEventListener( 'fragmentshown', post );
|
||||||
|
Reveal.addEventListener( 'fragmenthidden', post );
|
||||||
|
Reveal.addEventListener( 'overviewhidden', post );
|
||||||
|
Reveal.addEventListener( 'overviewshown', post );
|
||||||
|
Reveal.addEventListener( 'paused', post );
|
||||||
|
Reveal.addEventListener( 'resumed', post );
|
||||||
|
|
||||||
|
// Post the initial state
|
||||||
|
post();
|
||||||
|
|
||||||
}());
|
}());
|
||||||
|
|
|
||||||
|
|
@ -15,33 +15,40 @@ var opts = {
|
||||||
};
|
};
|
||||||
|
|
||||||
io.sockets.on( 'connection', function( socket ) {
|
io.sockets.on( 'connection', function( socket ) {
|
||||||
socket.on('slidechanged', function(slideData) {
|
|
||||||
socket.broadcast.emit('slidedata', slideData);
|
socket.on( 'connect', function( data ) {
|
||||||
|
socket.broadcast.emit( 'connect', data );
|
||||||
});
|
});
|
||||||
socket.on('fragmentchanged', function(fragmentData) {
|
|
||||||
socket.broadcast.emit('fragmentdata', fragmentData);
|
socket.on( 'statechanged', function( data ) {
|
||||||
|
socket.broadcast.emit( 'statechanged', data );
|
||||||
});
|
});
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
app.configure( function() {
|
app.configure( function() {
|
||||||
|
|
||||||
[ 'css', 'js', 'images', 'plugin', 'lib' ].forEach( function( dir ) {
|
[ 'css', 'js', 'images', 'plugin', 'lib' ].forEach( function( dir ) {
|
||||||
app.use( '/' + dir, staticDir( opts.baseDir + dir ) );
|
app.use( '/' + dir, staticDir( opts.baseDir + dir ) );
|
||||||
});
|
});
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
app.get("/", function(req, res) {
|
app.get('/', function( req, res ) {
|
||||||
|
|
||||||
res.writeHead( 200, { 'Content-Type': 'text/html' } );
|
res.writeHead( 200, { 'Content-Type': 'text/html' } );
|
||||||
fs.createReadStream( opts.baseDir + '/index.html' ).pipe( res );
|
fs.createReadStream( opts.baseDir + '/index.html' ).pipe( res );
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
app.get("/notes/:socketId", function(req, res) {
|
app.get( '/notes/:socketId', function( req, res ) {
|
||||||
|
|
||||||
fs.readFile( opts.baseDir + 'plugin/notes-server/notes.html', function( err, data ) {
|
fs.readFile( opts.baseDir + 'plugin/notes-server/notes.html', function( err, data ) {
|
||||||
res.send( Mustache.to_html( data.toString(), {
|
res.send( Mustache.to_html( data.toString(), {
|
||||||
socketId : req.params.socketId
|
socketId : req.params.socketId
|
||||||
}));
|
}));
|
||||||
});
|
});
|
||||||
// fs.createReadStream(opts.baseDir + 'notes-server/notes.html').pipe(res);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// Actually listen
|
// Actually listen
|
||||||
|
|
@ -51,9 +58,9 @@ var brown = '\033[33m',
|
||||||
green = '\033[32m',
|
green = '\033[32m',
|
||||||
reset = '\033[0m';
|
reset = '\033[0m';
|
||||||
|
|
||||||
var slidesLocation = "http://localhost" + ( opts.port ? ( ':' + opts.port ) : '' );
|
var slidesLocation = 'http://localhost' + ( opts.port ? ( ':' + opts.port ) : '' );
|
||||||
|
|
||||||
console.log( brown + "reveal.js - Speaker Notes" + reset );
|
console.log( brown + 'reveal.js - Speaker Notes' + reset );
|
||||||
console.log( "1. Open the slides at " + green + slidesLocation + reset );
|
console.log( '1. Open the slides at ' + green + slidesLocation + reset );
|
||||||
console.log( "2. Click on the link your JS console to go to the notes page" );
|
console.log( '2. Click on the link your JS console to go to the notes page' );
|
||||||
console.log( "3. Advance through your slides and your notes will advance automatically" );
|
console.log( '3. Advance through your slides and your notes will advance automatically' );
|
||||||
|
|
|
||||||
|
|
@ -3,8 +3,6 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
|
|
||||||
<meta name="viewport" content="width=1150">
|
|
||||||
|
|
||||||
<title>reveal.js - Slide Notes</title>
|
<title>reveal.js - Slide Notes</title>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|
@ -12,130 +10,386 @@
|
||||||
font-family: Helvetica;
|
font-family: Helvetica;
|
||||||
}
|
}
|
||||||
|
|
||||||
#notes {
|
#current-slide,
|
||||||
font-size: 24px;
|
#upcoming-slide,
|
||||||
width: 640px;
|
#speaker-controls {
|
||||||
margin-top: 5px;
|
padding: 6px;
|
||||||
clear: left;
|
box-sizing: border-box;
|
||||||
|
-moz-box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
#wrap-current-slide {
|
#current-slide iframe,
|
||||||
width: 640px;
|
#upcoming-slide iframe {
|
||||||
height: 512px;
|
width: 100%;
|
||||||
float: left;
|
height: 100%;
|
||||||
overflow: hidden;
|
border: 1px solid #ddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
#current-slide .label,
|
||||||
|
#upcoming-slide .label {
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
left: 10px;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 14px;
|
||||||
|
z-index: 2;
|
||||||
|
color: rgba( 255, 255, 255, 0.9 );
|
||||||
}
|
}
|
||||||
|
|
||||||
#current-slide {
|
#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;
|
position: absolute;
|
||||||
top: 3px;
|
width: 65%;
|
||||||
left: 3px;
|
height: 100%;
|
||||||
font-weight: bold;
|
top: 0;
|
||||||
font-size: 14px;
|
left: 0;
|
||||||
color: rgba( 255, 255, 255, 0.9 );
|
padding-right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#upcoming-slide {
|
||||||
|
position: absolute;
|
||||||
|
width: 35%;
|
||||||
|
height: 40%;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#speaker-controls {
|
||||||
|
position: absolute;
|
||||||
|
top: 40%;
|
||||||
|
right: 0;
|
||||||
|
width: 35%;
|
||||||
|
height: 60%;
|
||||||
|
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.speaker-controls-time.hidden,
|
||||||
|
.speaker-controls-notes.hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.speaker-controls-time .label,
|
||||||
|
.speaker-controls-notes .label {
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-weight: normal;
|
||||||
|
font-size: 0.66em;
|
||||||
|
color: #666;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.speaker-controls-time {
|
||||||
|
border-bottom: 1px solid rgba( 200, 200, 200, 0.5 );
|
||||||
|
margin-bottom: 10px;
|
||||||
|
padding: 10px 16px;
|
||||||
|
padding-bottom: 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.speaker-controls-time .reset-button {
|
||||||
|
opacity: 0;
|
||||||
|
float: right;
|
||||||
|
color: #666;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.speaker-controls-time:hover .reset-button {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.speaker-controls-time .timer,
|
||||||
|
.speaker-controls-time .clock {
|
||||||
|
width: 50%;
|
||||||
|
font-size: 1.9em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.speaker-controls-time .timer {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.speaker-controls-time .clock {
|
||||||
|
float: right;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.speaker-controls-time span.mute {
|
||||||
|
color: #bbb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.speaker-controls-notes {
|
||||||
|
padding: 10px 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.speaker-controls-notes .value {
|
||||||
|
margin-top: 5px;
|
||||||
|
line-height: 1.4;
|
||||||
|
font-size: 1.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clear {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 1080px) {
|
||||||
|
#speaker-controls {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 900px) {
|
||||||
|
#speaker-controls {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 800px) {
|
||||||
|
#speaker-controls {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div id="wrap-current-slide" class="slides">
|
<div id="current-slide"></div>
|
||||||
<iframe src="/?receiver" width="1280" height="1024" id="current-slide"></iframe>
|
<div id="upcoming-slide"><span class="label">UPCOMING:</span></div>
|
||||||
|
<div id="speaker-controls">
|
||||||
|
<div class="speaker-controls-time">
|
||||||
|
<h4 class="label">Time <span class="reset-button">Click to Reset</span></h4>
|
||||||
|
<div class="clock">
|
||||||
|
<span class="clock-value">0:00 AM</span>
|
||||||
|
</div>
|
||||||
|
<div class="timer">
|
||||||
|
<span class="hours-value">00</span><span class="minutes-value">:00</span><span class="seconds-value">:00</span>
|
||||||
|
</div>
|
||||||
|
<div class="clear"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="wrap-next-slide" class="slides">
|
<div class="speaker-controls-notes hidden">
|
||||||
<iframe src="/?receiver" width="640" height="512" id="next-slide"></iframe>
|
<h4 class="label">Notes</h4>
|
||||||
<span>UPCOMING:</span>
|
<div class="value"></div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="notes"></div>
|
|
||||||
|
|
||||||
<script src="/socket.io/socket.io.js"></script>
|
<script src="/socket.io/socket.io.js"></script>
|
||||||
<script src="/plugin/markdown/marked.js"></script>
|
<script src="/plugin/markdown/marked.js"></script>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
var socketId = '{{socketId}}';
|
(function() {
|
||||||
var socket = io.connect(window.location.origin);
|
|
||||||
var notes = document.getElementById('notes');
|
var notes,
|
||||||
var currentSlide = document.getElementById('current-slide');
|
notesValue,
|
||||||
var nextSlide = document.getElementById('next-slide');
|
currentState,
|
||||||
|
currentSlide,
|
||||||
|
upcomingSlide,
|
||||||
|
connected = false;
|
||||||
|
|
||||||
|
var socket = io.connect( window.location.origin ),
|
||||||
|
socketId = '{{socketId}}';
|
||||||
|
|
||||||
|
socket.on( 'statechanged', function( data ) {
|
||||||
|
|
||||||
socket.on('slidedata', function(data) {
|
|
||||||
// ignore data from sockets that aren't ours
|
// ignore data from sockets that aren't ours
|
||||||
if( data.socketId !== socketId ) { return; }
|
if( data.socketId !== socketId ) { return; }
|
||||||
|
|
||||||
|
if( connected === false ) {
|
||||||
|
connected = true;
|
||||||
|
|
||||||
|
setupIframes( data );
|
||||||
|
setupKeyboard();
|
||||||
|
setupNotes();
|
||||||
|
setupTimer();
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
handleStateMessage( data );
|
||||||
|
|
||||||
|
} );
|
||||||
|
|
||||||
|
window.addEventListener( 'message', function( event ) {
|
||||||
|
|
||||||
|
var data = JSON.parse( event.data );
|
||||||
|
|
||||||
|
if( data && data.namespace === 'reveal' ) {
|
||||||
|
if( /ready/.test( data.eventName ) ) {
|
||||||
|
socket.emit( 'connect', { socketId: socketId } );
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
} );
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Called when the main window sends an updated state.
|
||||||
|
*/
|
||||||
|
function handleStateMessage( data ) {
|
||||||
|
|
||||||
|
// Store the most recently set state to avoid circular loops
|
||||||
|
// applying the same state
|
||||||
|
currentState = JSON.stringify( data.state );
|
||||||
|
|
||||||
|
// No need for updating the notes in case of fragment changes
|
||||||
|
if ( data.notes ) {
|
||||||
|
notes.classList.remove( 'hidden' );
|
||||||
if( data.markdown ) {
|
if( data.markdown ) {
|
||||||
notes.innerHTML = marked(data.notes);
|
notesValue.innerHTML = marked( data.notes );
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
notes.innerHTML = data.notes;
|
notesValue.innerHTML = data.notes;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
notes.classList.add( 'hidden' );
|
||||||
}
|
}
|
||||||
|
|
||||||
currentSlide.contentWindow.Reveal.slide(data.indexh, data.indexv);
|
// Update the note slides
|
||||||
nextSlide.contentWindow.Reveal.slide(data.nextindexh, data.nextindexv);
|
currentSlide.contentWindow.postMessage( JSON.stringify({ method: 'setState', args: [ data.state ] }), '*' );
|
||||||
});
|
upcomingSlide.contentWindow.postMessage( JSON.stringify({ method: 'setState', args: [ data.state ] }), '*' );
|
||||||
socket.on('fragmentdata', function(data) {
|
upcomingSlide.contentWindow.postMessage( JSON.stringify({ method: 'next' }), '*' );
|
||||||
// ignore data from sockets that aren't ours
|
|
||||||
if (data.socketId !== socketId) { return; }
|
|
||||||
|
|
||||||
if (data.fragment === 'next') {
|
|
||||||
currentSlide.contentWindow.Reveal.nextFragment();
|
|
||||||
}
|
|
||||||
else if (data.fragment === 'previous') {
|
|
||||||
currentSlide.contentWindow.Reveal.prevFragment();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Limit to max one state update per X ms
|
||||||
|
handleStateMessage = debounce( handleStateMessage, 200 );
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Forward keyboard events to the current slide window.
|
||||||
|
* This enables keyboard events to work even if focus
|
||||||
|
* isn't set on the current slide iframe.
|
||||||
|
*/
|
||||||
|
function setupKeyboard() {
|
||||||
|
|
||||||
|
document.addEventListener( 'keydown', function( event ) {
|
||||||
|
currentSlide.contentWindow.postMessage( JSON.stringify({ method: 'triggerKey', args: [ event.keyCode ] }), '*' );
|
||||||
} );
|
} );
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Creates the preview iframes.
|
||||||
|
*/
|
||||||
|
function setupIframes( data ) {
|
||||||
|
|
||||||
|
var params = [
|
||||||
|
'receiver',
|
||||||
|
'progress=false',
|
||||||
|
'history=false',
|
||||||
|
'transition=none',
|
||||||
|
'backgroundTransition=none'
|
||||||
|
].join( '&' );
|
||||||
|
|
||||||
|
var hash = '#/' + data.state.indexh + '/' + data.state.indexv;
|
||||||
|
var currentURL = '/?' + params + '&postMessageEvents=true' + hash;
|
||||||
|
var upcomingURL = '/?' + params + '&controls=false' + hash;
|
||||||
|
|
||||||
|
currentSlide = document.createElement( 'iframe' );
|
||||||
|
currentSlide.setAttribute( 'width', 1280 );
|
||||||
|
currentSlide.setAttribute( 'height', 1024 );
|
||||||
|
currentSlide.setAttribute( 'src', currentURL );
|
||||||
|
document.querySelector( '#current-slide' ).appendChild( currentSlide );
|
||||||
|
|
||||||
|
upcomingSlide = document.createElement( 'iframe' );
|
||||||
|
upcomingSlide.setAttribute( 'width', 640 );
|
||||||
|
upcomingSlide.setAttribute( 'height', 512 );
|
||||||
|
upcomingSlide.setAttribute( 'src', upcomingURL );
|
||||||
|
document.querySelector( '#upcoming-slide' ).appendChild( upcomingSlide );
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Setup the notes UI.
|
||||||
|
*/
|
||||||
|
function setupNotes() {
|
||||||
|
|
||||||
|
notes = document.querySelector( '.speaker-controls-notes' );
|
||||||
|
notesValue = document.querySelector( '.speaker-controls-notes .value' );
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Create the timer and clock and start updating them
|
||||||
|
* at an interval.
|
||||||
|
*/
|
||||||
|
function setupTimer() {
|
||||||
|
|
||||||
|
var start = new Date(),
|
||||||
|
timeEl = document.querySelector( '.speaker-controls-time' ),
|
||||||
|
clockEl = timeEl.querySelector( '.clock-value' ),
|
||||||
|
hoursEl = timeEl.querySelector( '.hours-value' ),
|
||||||
|
minutesEl = timeEl.querySelector( '.minutes-value' ),
|
||||||
|
secondsEl = timeEl.querySelector( '.seconds-value' );
|
||||||
|
|
||||||
|
function _updateTimer() {
|
||||||
|
|
||||||
|
var diff, hours, minutes, seconds,
|
||||||
|
now = new Date();
|
||||||
|
|
||||||
|
diff = now.getTime() - start.getTime();
|
||||||
|
hours = Math.floor( diff / ( 1000 * 60 * 60 ) );
|
||||||
|
minutes = Math.floor( ( diff / ( 1000 * 60 ) ) % 60 );
|
||||||
|
seconds = Math.floor( ( diff / 1000 ) % 60 );
|
||||||
|
|
||||||
|
clockEl.innerHTML = now.toLocaleTimeString( 'en-US', { hour12: true, hour: '2-digit', minute:'2-digit' } );
|
||||||
|
hoursEl.innerHTML = zeroPadInteger( hours );
|
||||||
|
hoursEl.className = hours > 0 ? '' : 'mute';
|
||||||
|
minutesEl.innerHTML = ':' + zeroPadInteger( minutes );
|
||||||
|
minutesEl.className = minutes > 0 ? '' : 'mute';
|
||||||
|
secondsEl.innerHTML = ':' + zeroPadInteger( seconds );
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update once directly
|
||||||
|
_updateTimer();
|
||||||
|
|
||||||
|
// Then update every second
|
||||||
|
setInterval( _updateTimer, 1000 );
|
||||||
|
|
||||||
|
timeEl.addEventListener( 'click', function() {
|
||||||
|
start = new Date();
|
||||||
|
_updateTimer();
|
||||||
|
return false;
|
||||||
|
} );
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function zeroPadInteger( num ) {
|
||||||
|
|
||||||
|
var str = '00' + parseInt( num );
|
||||||
|
return str.substring( str.length - 2 );
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Limits the frequency at which a function can be called.
|
||||||
|
*/
|
||||||
|
function debounce( fn, ms ) {
|
||||||
|
|
||||||
|
var lastTime = 0,
|
||||||
|
timeout;
|
||||||
|
|
||||||
|
return function() {
|
||||||
|
|
||||||
|
var args = arguments;
|
||||||
|
var context = this;
|
||||||
|
|
||||||
|
clearTimeout( timeout );
|
||||||
|
|
||||||
|
var timeSinceLastCall = Date.now() - lastTime;
|
||||||
|
if( timeSinceLastCall > ms ) {
|
||||||
|
fn.apply( context, args );
|
||||||
|
lastTime = Date.now();
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
timeout = setTimeout( function() {
|
||||||
|
fn.apply( context, args );
|
||||||
|
lastTime = Date.now();
|
||||||
|
}, ms - timeSinceLastCall );
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
})();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
|
|
@ -10,127 +10,141 @@
|
||||||
font-family: Helvetica;
|
font-family: Helvetica;
|
||||||
}
|
}
|
||||||
|
|
||||||
#notes {
|
#current-slide,
|
||||||
font-size: 24px;
|
#upcoming-slide,
|
||||||
width: 640px;
|
#speaker-controls {
|
||||||
margin-top: 5px;
|
padding: 6px;
|
||||||
clear: left;
|
box-sizing: border-box;
|
||||||
|
-moz-box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
#wrap-current-slide {
|
#current-slide iframe,
|
||||||
width: 640px;
|
#upcoming-slide iframe {
|
||||||
height: 512px;
|
width: 100%;
|
||||||
float: left;
|
height: 100%;
|
||||||
overflow: hidden;
|
border: 1px solid #ddd;
|
||||||
}
|
}
|
||||||
|
|
||||||
#current-slide {
|
#current-slide .label,
|
||||||
width: 1280px;
|
#upcoming-slide .label {
|
||||||
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;
|
position: absolute;
|
||||||
top: 3px;
|
top: 10px;
|
||||||
left: 3px;
|
left: 10px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
z-index: 2;
|
||||||
color: rgba( 255, 255, 255, 0.9 );
|
color: rgba( 255, 255, 255, 0.9 );
|
||||||
}
|
}
|
||||||
|
|
||||||
.error {
|
#current-slide {
|
||||||
font-weight: bold;
|
position: absolute;
|
||||||
color: red;
|
width: 65%;
|
||||||
font-size: 1.5em;
|
height: 100%;
|
||||||
text-align: center;
|
top: 0;
|
||||||
margin-top: 10%;
|
left: 0;
|
||||||
|
padding-right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.error code {
|
#upcoming-slide {
|
||||||
font-family: monospace;
|
position: absolute;
|
||||||
|
width: 35%;
|
||||||
|
height: 40%;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.time {
|
#speaker-controls {
|
||||||
width: 448px;
|
position: absolute;
|
||||||
margin: 30px 0 0 10px;
|
top: 40%;
|
||||||
float: left;
|
right: 0;
|
||||||
text-align: center;
|
width: 35%;
|
||||||
opacity: 0;
|
height: 60%;
|
||||||
|
overflow: auto;
|
||||||
|
|
||||||
-webkit-transition: opacity 0.4s;
|
font-size: 18px;
|
||||||
-moz-transition: opacity 0.4s;
|
|
||||||
-o-transition: opacity 0.4s;
|
|
||||||
transition: opacity 0.4s;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.elapsed,
|
.speaker-controls-time.hidden,
|
||||||
.clock {
|
.speaker-controls-notes.hidden {
|
||||||
color: #333;
|
display: none;
|
||||||
font-size: 2em;
|
|
||||||
text-align: center;
|
|
||||||
display: inline-block;
|
|
||||||
padding: 0.5em;
|
|
||||||
background-color: #eee;
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.elapsed h2,
|
.speaker-controls-time .label,
|
||||||
.clock h2 {
|
.speaker-controls-notes .label {
|
||||||
font-size: 0.8em;
|
text-transform: uppercase;
|
||||||
line-height: 100%;
|
font-weight: normal;
|
||||||
|
font-size: 0.66em;
|
||||||
|
color: #666;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: #aaa;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.elapsed .mute {
|
.speaker-controls-time {
|
||||||
color: #ddd;
|
border-bottom: 1px solid rgba( 200, 200, 200, 0.5 );
|
||||||
|
margin-bottom: 10px;
|
||||||
|
padding: 10px 16px;
|
||||||
|
padding-bottom: 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.speaker-controls-time .reset-button {
|
||||||
|
opacity: 0;
|
||||||
|
float: right;
|
||||||
|
color: #666;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.speaker-controls-time:hover .reset-button {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.speaker-controls-time .timer,
|
||||||
|
.speaker-controls-time .clock {
|
||||||
|
width: 50%;
|
||||||
|
font-size: 1.9em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.speaker-controls-time .timer {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.speaker-controls-time .clock {
|
||||||
|
float: right;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.speaker-controls-time span.mute {
|
||||||
|
color: #bbb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.speaker-controls-notes {
|
||||||
|
padding: 10px 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.speaker-controls-notes .value {
|
||||||
|
margin-top: 5px;
|
||||||
|
line-height: 1.4;
|
||||||
|
font-size: 1.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clear {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 1080px) {
|
||||||
|
#speaker-controls {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 900px) {
|
||||||
|
#speaker-controls {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 800px) {
|
||||||
|
#speaker-controls {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -138,81 +152,183 @@
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<script>
|
<div id="current-slide"></div>
|
||||||
function getNotesURL( controls ) {
|
<div id="upcoming-slide"><span class="label">UPCOMING:</span></div>
|
||||||
return window.opener.location.protocol + '//' + window.opener.location.host + window.opener.location.pathname + '?receiver&controls='+ ( controls || 'false' ) +'&progress=false&overview=false' + window.opener.location.hash;
|
<div id="speaker-controls">
|
||||||
}
|
<div class="speaker-controls-time">
|
||||||
var notesCurrentSlideURL = getNotesURL( true );
|
<h4 class="label">Time <span class="reset-button">Click to Reset</span></h4>
|
||||||
var notesNextSlideURL = getNotesURL( false );
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div id="wrap-current-slide" class="slides">
|
|
||||||
<script>document.write( '<iframe width="1280" height="1024" id="current-slide" src="'+ notesCurrentSlideURL +'"></iframe>' );</script>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="wrap-next-slide" class="slides">
|
|
||||||
<script>document.write( '<iframe width="640" height="512" id="next-slide" src="'+ notesNextSlideURL +'"></iframe>' );</script>
|
|
||||||
<span>UPCOMING:</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="time">
|
|
||||||
<div class="clock">
|
<div class="clock">
|
||||||
<h2>Time</h2>
|
<span class="clock-value">0:00 AM</span>
|
||||||
<span id="clock">0:00:00 AM</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="elapsed">
|
<div class="timer">
|
||||||
<h2>Elapsed</h2>
|
<span class="hours-value">00</span><span class="minutes-value">:00</span><span class="seconds-value">:00</span>
|
||||||
<span id="hours">00</span><span id="minutes">:00</span><span id="seconds">:00</span>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="clear"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="notes"></div>
|
<div class="speaker-controls-notes hidden">
|
||||||
|
<h4 class="label">Notes</h4>
|
||||||
|
<div class="value"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<script src="../../plugin/markdown/marked.js"></script>
|
<script src="../../plugin/markdown/marked.js"></script>
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
window.addEventListener( 'load', function() {
|
(function() {
|
||||||
|
|
||||||
if( window.opener && window.opener.location && window.opener.location.href ) {
|
var notes,
|
||||||
|
notesValue,
|
||||||
var notes = document.getElementById( 'notes' ),
|
currentState,
|
||||||
currentSlide = document.getElementById( 'current-slide' ),
|
currentSlide,
|
||||||
nextSlide = document.getElementById( 'next-slide' ),
|
upcomingSlide,
|
||||||
silenced = false;
|
connected = false;
|
||||||
|
|
||||||
window.addEventListener( 'message', function( event ) {
|
window.addEventListener( 'message', function( event ) {
|
||||||
|
|
||||||
var data = JSON.parse( event.data );
|
var data = JSON.parse( event.data );
|
||||||
|
|
||||||
|
// Messages sent by the notes plugin inside of the main window
|
||||||
|
if( data && data.namespace === 'reveal-notes' ) {
|
||||||
|
if( data.type === 'connect' ) {
|
||||||
|
handleConnectMessage( data );
|
||||||
|
}
|
||||||
|
else if( data.type === 'state' ) {
|
||||||
|
handleStateMessage( data );
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// Messages sent by the reveal.js inside of the current slide preview
|
||||||
|
else if( data && data.namespace === 'reveal' ) {
|
||||||
|
if( /ready/.test( data.eventName ) ) {
|
||||||
|
// Send a message back to notify that the handshake is complete
|
||||||
|
window.opener.postMessage( JSON.stringify({ namespace: 'reveal-notes', type: 'connected'} ), '*' );
|
||||||
|
}
|
||||||
|
else if( /slidechanged|fragmentshown|fragmenthidden|overviewshown|overviewhidden|paused|resumed/.test( data.eventName ) && currentState !== JSON.stringify( data.state ) ) {
|
||||||
|
window.opener.postMessage( JSON.stringify({ method: 'setState', args: [ data.state ]} ), '*' );
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
} );
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Called when the main window is trying to establish a
|
||||||
|
* connection.
|
||||||
|
*/
|
||||||
|
function handleConnectMessage( data ) {
|
||||||
|
|
||||||
|
if( connected === false ) {
|
||||||
|
connected = true;
|
||||||
|
|
||||||
|
setupIframes( data );
|
||||||
|
setupKeyboard();
|
||||||
|
setupNotes();
|
||||||
|
setupTimer();
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Called when the main window sends an updated state.
|
||||||
|
*/
|
||||||
|
function handleStateMessage( data ) {
|
||||||
|
|
||||||
|
// Store the most recently set state to avoid circular loops
|
||||||
|
// applying the same state
|
||||||
|
currentState = JSON.stringify( data.state );
|
||||||
|
|
||||||
// No need for updating the notes in case of fragment changes
|
// No need for updating the notes in case of fragment changes
|
||||||
if ( data.notes !== undefined) {
|
if ( data.notes ) {
|
||||||
|
notes.classList.remove( 'hidden' );
|
||||||
if( data.markdown ) {
|
if( data.markdown ) {
|
||||||
notes.innerHTML = marked( data.notes );
|
notesValue.innerHTML = marked( data.notes );
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
notes.innerHTML = data.notes;
|
notesValue.innerHTML = data.notes;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
else {
|
||||||
silenced = true;
|
notes.classList.add( 'hidden' );
|
||||||
|
}
|
||||||
|
|
||||||
// Update the note slides
|
// Update the note slides
|
||||||
currentSlide.contentWindow.Reveal.slide( data.indexh, data.indexv, data.indexf );
|
currentSlide.contentWindow.postMessage( JSON.stringify({ method: 'setState', args: [ data.state ] }), '*' );
|
||||||
nextSlide.contentWindow.Reveal.slide( data.nextindexh, data.nextindexv );
|
upcomingSlide.contentWindow.postMessage( JSON.stringify({ method: 'setState', args: [ data.state ] }), '*' );
|
||||||
|
upcomingSlide.contentWindow.postMessage( JSON.stringify({ method: 'next' }), '*' );
|
||||||
|
|
||||||
silenced = false;
|
}
|
||||||
|
|
||||||
}, false );
|
// Limit to max one state update per X ms
|
||||||
|
handleStateMessage = debounce( handleStateMessage, 200 );
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Forward keyboard events to the current slide window.
|
||||||
|
* This enables keyboard events to work even if focus
|
||||||
|
* isn't set on the current slide iframe.
|
||||||
|
*/
|
||||||
|
function setupKeyboard() {
|
||||||
|
|
||||||
|
document.addEventListener( 'keydown', function( event ) {
|
||||||
|
currentSlide.contentWindow.postMessage( JSON.stringify({ method: 'triggerKey', args: [ event.keyCode ] }), '*' );
|
||||||
|
} );
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Creates the preview iframes.
|
||||||
|
*/
|
||||||
|
function setupIframes( data ) {
|
||||||
|
|
||||||
|
var params = [
|
||||||
|
'receiver',
|
||||||
|
'progress=false',
|
||||||
|
'history=false',
|
||||||
|
'transition=none',
|
||||||
|
'autoSlide=0',
|
||||||
|
'backgroundTransition=none'
|
||||||
|
].join( '&' );
|
||||||
|
|
||||||
|
var hash = '#/' + data.state.indexh + '/' + data.state.indexv;
|
||||||
|
var currentURL = data.url + '?' + params + '&postMessageEvents=true' + hash;
|
||||||
|
var upcomingURL = data.url + '?' + params + '&controls=false' + hash;
|
||||||
|
|
||||||
|
currentSlide = document.createElement( 'iframe' );
|
||||||
|
currentSlide.setAttribute( 'width', 1280 );
|
||||||
|
currentSlide.setAttribute( 'height', 1024 );
|
||||||
|
currentSlide.setAttribute( 'src', currentURL );
|
||||||
|
document.querySelector( '#current-slide' ).appendChild( currentSlide );
|
||||||
|
|
||||||
|
upcomingSlide = document.createElement( 'iframe' );
|
||||||
|
upcomingSlide.setAttribute( 'width', 640 );
|
||||||
|
upcomingSlide.setAttribute( 'height', 512 );
|
||||||
|
upcomingSlide.setAttribute( 'src', upcomingURL );
|
||||||
|
document.querySelector( '#upcoming-slide' ).appendChild( upcomingSlide );
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Setup the notes UI.
|
||||||
|
*/
|
||||||
|
function setupNotes() {
|
||||||
|
|
||||||
|
notes = document.querySelector( '.speaker-controls-notes' );
|
||||||
|
notesValue = document.querySelector( '.speaker-controls-notes .value' );
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Create the timer and clock and start updating them
|
||||||
|
* at an interval.
|
||||||
|
*/
|
||||||
|
function setupTimer() {
|
||||||
|
|
||||||
var start = new Date(),
|
var start = new Date(),
|
||||||
timeEl = document.querySelector( '.time' ),
|
timeEl = document.querySelector( '.speaker-controls-time' ),
|
||||||
clockEl = document.getElementById( 'clock' ),
|
clockEl = timeEl.querySelector( '.clock-value' ),
|
||||||
hoursEl = document.getElementById( 'hours' ),
|
hoursEl = timeEl.querySelector( '.hours-value' ),
|
||||||
minutesEl = document.getElementById( 'minutes' ),
|
minutesEl = timeEl.querySelector( '.minutes-value' ),
|
||||||
secondsEl = document.getElementById( 'seconds' );
|
secondsEl = timeEl.querySelector( '.seconds-value' );
|
||||||
|
|
||||||
setInterval( function() {
|
function _updateTimer() {
|
||||||
|
|
||||||
timeEl.style.opacity = 1;
|
|
||||||
|
|
||||||
var diff, hours, minutes, seconds,
|
var diff, hours, minutes, seconds,
|
||||||
now = new Date();
|
now = new Date();
|
||||||
|
|
@ -222,46 +338,69 @@
|
||||||
minutes = Math.floor( ( diff / ( 1000 * 60 ) ) % 60 );
|
minutes = Math.floor( ( diff / ( 1000 * 60 ) ) % 60 );
|
||||||
seconds = Math.floor( ( diff / 1000 ) % 60 );
|
seconds = Math.floor( ( diff / 1000 ) % 60 );
|
||||||
|
|
||||||
clockEl.innerHTML = now.toLocaleTimeString();
|
clockEl.innerHTML = now.toLocaleTimeString( 'en-US', { hour12: true, hour: '2-digit', minute:'2-digit' } );
|
||||||
hoursEl.innerHTML = zeroPadInteger( hours );
|
hoursEl.innerHTML = zeroPadInteger( hours );
|
||||||
hoursEl.className = hours > 0 ? "" : "mute";
|
hoursEl.className = hours > 0 ? '' : 'mute';
|
||||||
minutesEl.innerHTML = ":" + zeroPadInteger( minutes );
|
minutesEl.innerHTML = ':' + zeroPadInteger( minutes );
|
||||||
minutesEl.className = minutes > 0 ? "" : "mute";
|
minutesEl.className = minutes > 0 ? '' : 'mute';
|
||||||
secondsEl.innerHTML = ":" + zeroPadInteger( seconds );
|
secondsEl.innerHTML = ':' + zeroPadInteger( seconds );
|
||||||
|
|
||||||
}, 1000 );
|
|
||||||
|
|
||||||
// Broadcasts the state of the notes window to synchronize
|
|
||||||
// the main window
|
|
||||||
function synchronizeMainWindow() {
|
|
||||||
|
|
||||||
if( !silenced ) {
|
|
||||||
var indices = currentSlide.contentWindow.Reveal.getIndices();
|
|
||||||
window.opener.Reveal.slide( indices.h, indices.v, indices.f );
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Navigate the main window when the notes slide changes
|
// Update once directly
|
||||||
currentSlide.contentWindow.Reveal.addEventListener( 'slidechanged', synchronizeMainWindow );
|
_updateTimer();
|
||||||
currentSlide.contentWindow.Reveal.addEventListener( 'fragmentshown', synchronizeMainWindow );
|
|
||||||
currentSlide.contentWindow.Reveal.addEventListener( 'fragmenthidden', synchronizeMainWindow );
|
// Then update every second
|
||||||
|
setInterval( _updateTimer, 1000 );
|
||||||
|
|
||||||
|
timeEl.addEventListener( 'click', function() {
|
||||||
|
start = new Date();
|
||||||
|
_updateTimer();
|
||||||
|
return false;
|
||||||
|
} );
|
||||||
|
|
||||||
}
|
}
|
||||||
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 ) {
|
function zeroPadInteger( num ) {
|
||||||
var str = "00" + parseInt( num );
|
|
||||||
|
var str = '00' + parseInt( num );
|
||||||
return str.substring( str.length - 2 );
|
return str.substring( str.length - 2 );
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Limits the frequency at which a function can be called.
|
||||||
|
*/
|
||||||
|
function debounce( fn, ms ) {
|
||||||
|
|
||||||
|
var lastTime = 0,
|
||||||
|
timeout;
|
||||||
|
|
||||||
|
return function() {
|
||||||
|
|
||||||
|
var args = arguments;
|
||||||
|
var context = this;
|
||||||
|
|
||||||
|
clearTimeout( timeout );
|
||||||
|
|
||||||
|
var timeSinceLastCall = Date.now() - lastTime;
|
||||||
|
if( timeSinceLastCall > ms ) {
|
||||||
|
fn.apply( context, args );
|
||||||
|
lastTime = Date.now();
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
timeout = setTimeout( function() {
|
||||||
|
fn.apply( context, args );
|
||||||
|
lastTime = Date.now();
|
||||||
|
}, ms - timeSinceLastCall );
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
})();
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1,62 +1,103 @@
|
||||||
/**
|
/**
|
||||||
* Handles opening of and synchronization with the reveal.js
|
* Handles opening of and synchronization with the reveal.js
|
||||||
* notes window.
|
* notes window.
|
||||||
|
*
|
||||||
|
* Handshake process:
|
||||||
|
* 1. This window posts 'connect' to notes window
|
||||||
|
* - Includes URL of presentation to show
|
||||||
|
* 2. Notes window responds with 'connected' when it is available
|
||||||
|
* 3. This window proceeds to send the current presentation state
|
||||||
|
* to the notes window
|
||||||
*/
|
*/
|
||||||
var RevealNotes = (function() {
|
var RevealNotes = (function() {
|
||||||
|
|
||||||
function openNotes() {
|
function openNotes() {
|
||||||
var jsFileLocation = document.querySelector('script[src$="notes.js"]').src; // this js file path
|
var jsFileLocation = document.querySelector('script[src$="notes.js"]').src; // this js file path
|
||||||
jsFileLocation = jsFileLocation.replace(/notes\.js(\?.*)?$/, ''); // the js folder path
|
jsFileLocation = jsFileLocation.replace(/notes\.js(\?.*)?$/, ''); // the js folder path
|
||||||
var notesPopup = window.open( jsFileLocation + 'notes.html', 'reveal.js - Notes', 'width=1120,height=850' );
|
var notesPopup = window.open( jsFileLocation + 'notes.html', 'reveal.js - Notes', 'width=1100,height=700' );
|
||||||
|
|
||||||
// Fires when slide is changed
|
/**
|
||||||
Reveal.addEventListener( 'slidechanged', post );
|
* Connect to the notes window through a postmessage handshake.
|
||||||
|
* Using postmessage enables us to work in situations where the
|
||||||
|
* origins differ, such as a presentation being opened from the
|
||||||
|
* file system.
|
||||||
|
*/
|
||||||
|
function connect() {
|
||||||
|
// Keep trying to connect until we get a 'connected' message back
|
||||||
|
var connectInterval = setInterval( function() {
|
||||||
|
notesPopup.postMessage( JSON.stringify( {
|
||||||
|
namespace: 'reveal-notes',
|
||||||
|
type: 'connect',
|
||||||
|
url: window.location.protocol + '//' + window.location.host + window.location.pathname,
|
||||||
|
state: Reveal.getState()
|
||||||
|
} ), '*' );
|
||||||
|
}, 500 );
|
||||||
|
|
||||||
// Fires when a fragment is shown
|
window.addEventListener( 'message', function( event ) {
|
||||||
Reveal.addEventListener( 'fragmentshown', post );
|
var data = JSON.parse( event.data );
|
||||||
|
if( data && data.namespace === 'reveal-notes' && data.type === 'connected' ) {
|
||||||
// Fires when a fragment is hidden
|
clearInterval( connectInterval );
|
||||||
Reveal.addEventListener( 'fragmenthidden', post );
|
onConnected();
|
||||||
|
}
|
||||||
|
} );
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Posts the current slide data to the notes window
|
* Posts the current slide data to the notes window
|
||||||
*/
|
*/
|
||||||
function post() {
|
function post() {
|
||||||
|
|
||||||
var slideElement = Reveal.getCurrentSlide(),
|
var slideElement = Reveal.getCurrentSlide(),
|
||||||
slideIndices = Reveal.getIndices(),
|
notesElement = slideElement.querySelector( 'aside.notes' );
|
||||||
messageData;
|
|
||||||
|
|
||||||
var notes = slideElement.querySelector( 'aside.notes' ),
|
var messageData = {
|
||||||
nextindexh,
|
namespace: 'reveal-notes',
|
||||||
nextindexv;
|
type: 'state',
|
||||||
|
notes: '',
|
||||||
if( slideElement.nextElementSibling && slideElement.parentNode.nodeName == 'SECTION' ) {
|
markdown: false,
|
||||||
nextindexh = slideIndices.h;
|
state: Reveal.getState()
|
||||||
nextindexv = slideIndices.v + 1;
|
|
||||||
} else {
|
|
||||||
nextindexh = slideIndices.h + 1;
|
|
||||||
nextindexv = 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
messageData = {
|
|
||||||
notes : notes ? notes.innerHTML : '',
|
|
||||||
indexh : slideIndices.h,
|
|
||||||
indexv : slideIndices.v,
|
|
||||||
indexf : slideIndices.f,
|
|
||||||
nextindexh : nextindexh,
|
|
||||||
nextindexv : nextindexv,
|
|
||||||
markdown : notes ? typeof notes.getAttribute( 'data-markdown' ) === 'string' : false
|
|
||||||
};
|
};
|
||||||
|
|
||||||
notesPopup.postMessage( JSON.stringify( messageData ), '*' );
|
// Look for notes defined in a slide attribute
|
||||||
|
if( slideElement.hasAttribute( 'data-notes' ) ) {
|
||||||
|
messageData.notes = slideElement.getAttribute( 'data-notes' );
|
||||||
}
|
}
|
||||||
|
|
||||||
// Navigate to the current slide when the notes are loaded
|
// Look for notes defined in an aside element
|
||||||
notesPopup.addEventListener( 'load', function( event ) {
|
if( notesElement ) {
|
||||||
post();
|
messageData.notes = notesElement.innerHTML;
|
||||||
}, false );
|
messageData.markdown = typeof notesElement.getAttribute( 'data-markdown' ) === 'string';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
notesPopup.postMessage( JSON.stringify( messageData ), '*' );
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Called once we have established a connection to the notes
|
||||||
|
* window.
|
||||||
|
*/
|
||||||
|
function onConnected() {
|
||||||
|
|
||||||
|
// Monitor events that trigger a change in state
|
||||||
|
Reveal.addEventListener( 'slidechanged', post );
|
||||||
|
Reveal.addEventListener( 'fragmentshown', post );
|
||||||
|
Reveal.addEventListener( 'fragmenthidden', post );
|
||||||
|
Reveal.addEventListener( 'overviewhidden', post );
|
||||||
|
Reveal.addEventListener( 'overviewshown', post );
|
||||||
|
Reveal.addEventListener( 'paused', post );
|
||||||
|
Reveal.addEventListener( 'resumed', post );
|
||||||
|
|
||||||
|
// Post the initial state
|
||||||
|
post();
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
connect();
|
||||||
|
}
|
||||||
|
|
||||||
|
if( !/receiver/i.test( window.location.search ) ) {
|
||||||
|
|
||||||
// If the there's a 'notes' query set, open directly
|
// If the there's a 'notes' query set, open directly
|
||||||
if( window.location.search.match( /(\?|\&)notes/gi ) !== null ) {
|
if( window.location.search.match( /(\?|\&)notes/gi ) !== null ) {
|
||||||
openNotes();
|
openNotes();
|
||||||
|
|
@ -74,5 +115,8 @@ var RevealNotes = (function() {
|
||||||
}
|
}
|
||||||
}, false );
|
}, false );
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
return { open: openNotes };
|
return { open: openNotes };
|
||||||
|
|
||||||
})();
|
})();
|
||||||
|
|
|
||||||
|
|
@ -1,39 +0,0 @@
|
||||||
<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>
|
|
||||||
|
|
@ -1,42 +0,0 @@
|
||||||
/*
|
|
||||||
|
|
||||||
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);
|
|
||||||
|
|
||||||
}());
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -11,34 +11,38 @@
|
||||||
var page = new WebPage();
|
var page = new WebPage();
|
||||||
var system = require( 'system' );
|
var system = require( 'system' );
|
||||||
|
|
||||||
|
var slideWidth = system.args[3] ? system.args[3].split( 'x' )[0] : 960;
|
||||||
|
var slideHeight = system.args[3] ? system.args[3].split( 'x' )[1] : 700;
|
||||||
|
|
||||||
page.viewportSize = {
|
page.viewportSize = {
|
||||||
width: 1024,
|
width: slideWidth,
|
||||||
height: 768
|
height: slideHeight
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// TODO
|
||||||
|
// Something is wrong with these config values. An input
|
||||||
|
// paper width of 1920px actually results in a 756px wide
|
||||||
|
// PDF.
|
||||||
page.paperSize = {
|
page.paperSize = {
|
||||||
format: 'letter',
|
width: Math.round( slideWidth * 2 ),
|
||||||
orientation: 'landscape',
|
height: Math.round( slideHeight * 2 ),
|
||||||
margin: {
|
border: 0
|
||||||
left: '0',
|
|
||||||
right: '0',
|
|
||||||
top: '0',
|
|
||||||
bottom: '0'
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
var revealFile = system.args[1] || 'index.html?print-pdf';
|
var inputFile = system.args[1] || 'index.html?print-pdf';
|
||||||
var slideFile = system.args[2] || 'slides.pdf';
|
var outputFile = system.args[2] || 'slides.pdf';
|
||||||
|
|
||||||
if( slideFile.match( /\.pdf$/gi ) === null ) {
|
if( outputFile.match( /\.pdf$/gi ) === null ) {
|
||||||
slideFile += '.pdf';
|
outputFile += '.pdf';
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log( 'Printing PDF...' );
|
console.log( 'Printing PDF (Paper size: '+ page.paperSize.width + 'x' + page.paperSize.height +')' );
|
||||||
|
|
||||||
page.open( revealFile, function( status ) {
|
page.open( inputFile, function( status ) {
|
||||||
|
window.setTimeout( function() {
|
||||||
console.log( 'Printed succesfully' );
|
console.log( 'Printed succesfully' );
|
||||||
page.render( slideFile );
|
page.render( outputFile );
|
||||||
phantom.exit();
|
phantom.exit();
|
||||||
|
}, 1000 );
|
||||||
} );
|
} );
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -5,9 +5,21 @@
|
||||||
document.querySelector( '.reveal' ).addEventListener( 'mousedown', function( event ) {
|
document.querySelector( '.reveal' ).addEventListener( 'mousedown', function( event ) {
|
||||||
var modifier = ( Reveal.getConfig().zoomKey ? Reveal.getConfig().zoomKey : 'alt' ) + 'Key';
|
var modifier = ( Reveal.getConfig().zoomKey ? Reveal.getConfig().zoomKey : 'alt' ) + 'Key';
|
||||||
|
|
||||||
|
var zoomPadding = 20;
|
||||||
|
var revealScale = Reveal.getScale();
|
||||||
|
|
||||||
if( event[ modifier ] && isEnabled ) {
|
if( event[ modifier ] && isEnabled ) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
zoom.to({ element: event.target, pan: false });
|
|
||||||
|
var bounds = event.target.getBoundingClientRect();
|
||||||
|
|
||||||
|
zoom.to({
|
||||||
|
x: ( bounds.left * revealScale ) - zoomPadding,
|
||||||
|
y: ( bounds.top * revealScale ) - zoomPadding,
|
||||||
|
width: ( bounds.width * revealScale ) + ( zoomPadding * 2 ),
|
||||||
|
height: ( bounds.height * revealScale ) + ( zoomPadding * 2 ),
|
||||||
|
pan: false
|
||||||
|
});
|
||||||
}
|
}
|
||||||
} );
|
} );
|
||||||
|
|
||||||
|
|
@ -16,11 +28,11 @@
|
||||||
})();
|
})();
|
||||||
|
|
||||||
/*!
|
/*!
|
||||||
* zoom.js 0.2 (modified version for use with reveal.js)
|
* zoom.js 0.3 (modified for use with reveal.js)
|
||||||
* http://lab.hakim.se/zoom-js
|
* http://lab.hakim.se/zoom-js
|
||||||
* MIT licensed
|
* MIT licensed
|
||||||
*
|
*
|
||||||
* Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
|
* Copyright (C) 2011-2014 Hakim El Hattab, http://hakim.se
|
||||||
*/
|
*/
|
||||||
var zoom = (function(){
|
var zoom = (function(){
|
||||||
|
|
||||||
|
|
@ -35,8 +47,6 @@ var zoom = (function(){
|
||||||
var panEngageTimeout = -1,
|
var panEngageTimeout = -1,
|
||||||
panUpdateInterval = -1;
|
panUpdateInterval = -1;
|
||||||
|
|
||||||
var currentOptions = null;
|
|
||||||
|
|
||||||
// Check for transform support so that we can fallback otherwise
|
// Check for transform support so that we can fallback otherwise
|
||||||
var supportsTransforms = 'WebkitTransform' in document.body.style ||
|
var supportsTransforms = 'WebkitTransform' in document.body.style ||
|
||||||
'MozTransform' in document.body.style ||
|
'MozTransform' in document.body.style ||
|
||||||
|
|
@ -58,7 +68,7 @@ var zoom = (function(){
|
||||||
if( level !== 1 && event.keyCode === 27 ) {
|
if( level !== 1 && event.keyCode === 27 ) {
|
||||||
zoom.out();
|
zoom.out();
|
||||||
}
|
}
|
||||||
}, false );
|
} );
|
||||||
|
|
||||||
// Monitor mouse movement for panning
|
// Monitor mouse movement for panning
|
||||||
document.addEventListener( 'mousemove', function( event ) {
|
document.addEventListener( 'mousemove', function( event ) {
|
||||||
|
|
@ -66,23 +76,40 @@ var zoom = (function(){
|
||||||
mouseX = event.clientX;
|
mouseX = event.clientX;
|
||||||
mouseY = event.clientY;
|
mouseY = event.clientY;
|
||||||
}
|
}
|
||||||
}, false );
|
} );
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Applies the CSS required to zoom in, prioritizes use of CSS3
|
* Applies the CSS required to zoom in, prefers the use of CSS3
|
||||||
* transforms but falls back on zoom for IE.
|
* transforms but falls back on zoom for IE.
|
||||||
*
|
*
|
||||||
* @param {Number} pageOffsetX
|
* @param {Object} rect
|
||||||
* @param {Number} pageOffsetY
|
|
||||||
* @param {Number} elementOffsetX
|
|
||||||
* @param {Number} elementOffsetY
|
|
||||||
* @param {Number} scale
|
* @param {Number} scale
|
||||||
*/
|
*/
|
||||||
function magnify( pageOffsetX, pageOffsetY, elementOffsetX, elementOffsetY, scale ) {
|
function magnify( rect, scale ) {
|
||||||
|
|
||||||
|
var scrollOffset = getScrollOffset();
|
||||||
|
|
||||||
|
// Ensure a width/height is set
|
||||||
|
rect.width = rect.width || 1;
|
||||||
|
rect.height = rect.height || 1;
|
||||||
|
|
||||||
|
// Center the rect within the zoomed viewport
|
||||||
|
rect.x -= ( window.innerWidth - ( rect.width * scale ) ) / 2;
|
||||||
|
rect.y -= ( window.innerHeight - ( rect.height * scale ) ) / 2;
|
||||||
|
|
||||||
if( supportsTransforms ) {
|
if( supportsTransforms ) {
|
||||||
var origin = pageOffsetX +'px '+ pageOffsetY +'px',
|
// Reset
|
||||||
transform = 'translate('+ -elementOffsetX +'px,'+ -elementOffsetY +'px) scale('+ scale +')';
|
if( scale === 1 ) {
|
||||||
|
document.body.style.transform = '';
|
||||||
|
document.body.style.OTransform = '';
|
||||||
|
document.body.style.msTransform = '';
|
||||||
|
document.body.style.MozTransform = '';
|
||||||
|
document.body.style.WebkitTransform = '';
|
||||||
|
}
|
||||||
|
// Scale
|
||||||
|
else {
|
||||||
|
var origin = scrollOffset.x +'px '+ scrollOffset.y +'px',
|
||||||
|
transform = 'translate('+ -rect.x +'px,'+ -rect.y +'px) scale('+ scale +')';
|
||||||
|
|
||||||
document.body.style.transformOrigin = origin;
|
document.body.style.transformOrigin = origin;
|
||||||
document.body.style.OTransformOrigin = origin;
|
document.body.style.OTransformOrigin = origin;
|
||||||
|
|
@ -96,8 +123,9 @@ var zoom = (function(){
|
||||||
document.body.style.MozTransform = transform;
|
document.body.style.MozTransform = transform;
|
||||||
document.body.style.WebkitTransform = transform;
|
document.body.style.WebkitTransform = transform;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
else {
|
else {
|
||||||
// Reset all values
|
// Reset
|
||||||
if( scale === 1 ) {
|
if( scale === 1 ) {
|
||||||
document.body.style.position = '';
|
document.body.style.position = '';
|
||||||
document.body.style.left = '';
|
document.body.style.left = '';
|
||||||
|
|
@ -106,11 +134,11 @@ var zoom = (function(){
|
||||||
document.body.style.height = '';
|
document.body.style.height = '';
|
||||||
document.body.style.zoom = '';
|
document.body.style.zoom = '';
|
||||||
}
|
}
|
||||||
// Apply scale
|
// Scale
|
||||||
else {
|
else {
|
||||||
document.body.style.position = 'relative';
|
document.body.style.position = 'relative';
|
||||||
document.body.style.left = ( - ( pageOffsetX + elementOffsetX ) / scale ) + 'px';
|
document.body.style.left = ( - ( scrollOffset.x + rect.x ) / scale ) + 'px';
|
||||||
document.body.style.top = ( - ( pageOffsetY + elementOffsetY ) / scale ) + 'px';
|
document.body.style.top = ( - ( scrollOffset.y + rect.y ) / scale ) + 'px';
|
||||||
document.body.style.width = ( scale * 100 ) + '%';
|
document.body.style.width = ( scale * 100 ) + '%';
|
||||||
document.body.style.height = ( scale * 100 ) + '%';
|
document.body.style.height = ( scale * 100 ) + '%';
|
||||||
document.body.style.zoom = scale;
|
document.body.style.zoom = scale;
|
||||||
|
|
@ -119,13 +147,15 @@ var zoom = (function(){
|
||||||
|
|
||||||
level = scale;
|
level = scale;
|
||||||
|
|
||||||
if( level !== 1 && document.documentElement.classList ) {
|
if( document.documentElement.classList ) {
|
||||||
|
if( level !== 1 ) {
|
||||||
document.documentElement.classList.add( 'zoomed' );
|
document.documentElement.classList.add( 'zoomed' );
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
document.documentElement.classList.remove( 'zoomed' );
|
document.documentElement.classList.remove( 'zoomed' );
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Pan the document when the mosue cursor approaches the edges
|
* Pan the document when the mosue cursor approaches the edges
|
||||||
|
|
@ -159,7 +189,7 @@ var zoom = (function(){
|
||||||
function getScrollOffset() {
|
function getScrollOffset() {
|
||||||
return {
|
return {
|
||||||
x: window.scrollX !== undefined ? window.scrollX : window.pageXOffset,
|
x: window.scrollX !== undefined ? window.scrollX : window.pageXOffset,
|
||||||
y: window.scrollY !== undefined ? window.scrollY : window.pageXYffset
|
y: window.scrollY !== undefined ? window.scrollY : window.pageYOffset
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -175,6 +205,7 @@ var zoom = (function(){
|
||||||
* - scale: can be used instead of width/height to explicitly set scale
|
* - scale: can be used instead of width/height to explicitly set scale
|
||||||
*/
|
*/
|
||||||
to: function( options ) {
|
to: function( options ) {
|
||||||
|
|
||||||
// Due to an implementation limitation we can't zoom in
|
// Due to an implementation limitation we can't zoom in
|
||||||
// to another element without zooming out first
|
// to another element without zooming out first
|
||||||
if( level !== 1 ) {
|
if( level !== 1 ) {
|
||||||
|
|
@ -188,11 +219,12 @@ var zoom = (function(){
|
||||||
if( !!options.element ) {
|
if( !!options.element ) {
|
||||||
// Space around the zoomed in element to leave on screen
|
// Space around the zoomed in element to leave on screen
|
||||||
var padding = 20;
|
var padding = 20;
|
||||||
|
var bounds = options.element.getBoundingClientRect();
|
||||||
|
|
||||||
options.width = options.element.getBoundingClientRect().width + ( padding * 2 );
|
options.x = bounds.left - padding;
|
||||||
options.height = options.element.getBoundingClientRect().height + ( padding * 2 );
|
options.y = bounds.top - padding;
|
||||||
options.x = options.element.getBoundingClientRect().left - padding;
|
options.width = bounds.width + ( padding * 2 );
|
||||||
options.y = options.element.getBoundingClientRect().top - padding;
|
options.height = bounds.height + ( padding * 2 );
|
||||||
}
|
}
|
||||||
|
|
||||||
// If width/height values are set, calculate scale from those values
|
// If width/height values are set, calculate scale from those values
|
||||||
|
|
@ -204,13 +236,7 @@ var zoom = (function(){
|
||||||
options.x *= options.scale;
|
options.x *= options.scale;
|
||||||
options.y *= options.scale;
|
options.y *= options.scale;
|
||||||
|
|
||||||
var scrollOffset = getScrollOffset();
|
magnify( options, options.scale );
|
||||||
|
|
||||||
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 ) {
|
if( options.pan !== false ) {
|
||||||
|
|
||||||
|
|
@ -222,8 +248,6 @@ var zoom = (function(){
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
currentOptions = options;
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
@ -234,13 +258,7 @@ var zoom = (function(){
|
||||||
clearTimeout( panEngageTimeout );
|
clearTimeout( panEngageTimeout );
|
||||||
clearInterval( panUpdateInterval );
|
clearInterval( panUpdateInterval );
|
||||||
|
|
||||||
var scrollOffset = getScrollOffset();
|
magnify( { x: 0, y: 0 }, 1 );
|
||||||
|
|
||||||
if( currentOptions && currentOptions.element ) {
|
|
||||||
scrollOffset.x -= ( window.innerWidth - ( currentOptions.width * currentOptions.scale ) ) / 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
magnify( scrollOffset.x, scrollOffset.y, 0, 0, 1 );
|
|
||||||
|
|
||||||
level = 1;
|
level = 1;
|
||||||
},
|
},
|
||||||
|
|
@ -256,3 +274,5 @@ var zoom = (function(){
|
||||||
|
|
||||||
})();
|
})();
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@
|
||||||
|
|
||||||
<title>reveal.js - Barebones</title>
|
<title>reveal.js - Barebones</title>
|
||||||
|
|
||||||
<link rel="stylesheet" href="../../css/reveal.min.css">
|
<link rel="stylesheet" href="../../css/reveal.css">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
@ -29,7 +29,7 @@
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script src="../../js/reveal.min.js"></script>
|
<script src="../../js/reveal.js"></script>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,7 @@
|
||||||
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||||
|
|
||||||
<link rel="stylesheet" href="../../css/reveal.min.css">
|
<link rel="stylesheet" href="../../css/reveal.css">
|
||||||
<link rel="stylesheet" href="../../css/theme/default.css" id="theme">
|
<link rel="stylesheet" href="../../css/theme/default.css" id="theme">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
|
|
@ -35,7 +35,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script src="../../lib/js/head.min.js"></script>
|
<script src="../../lib/js/head.min.js"></script>
|
||||||
<script src="../../js/reveal.min.js"></script>
|
<script src="../../js/reveal.js"></script>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,7 @@
|
||||||
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||||
|
|
||||||
<link rel="stylesheet" href="../../css/reveal.min.css">
|
<link rel="stylesheet" href="../../css/reveal.css">
|
||||||
<link rel="stylesheet" href="../../css/theme/night.css" id="theme">
|
<link rel="stylesheet" href="../../css/theme/night.css" id="theme">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
|
|
@ -160,7 +160,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script src="../../lib/js/head.min.js"></script>
|
<script src="../../lib/js/head.min.js"></script>
|
||||||
<script src="../../js/reveal.min.js"></script>
|
<script src="../../js/reveal.js"></script>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -8,8 +8,18 @@
|
||||||
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||||
|
|
||||||
<link rel="stylesheet" href="../../css/reveal.min.css">
|
<link rel="stylesheet" href="../../css/reveal.css">
|
||||||
<link rel="stylesheet" href="../../css/theme/serif.css" id="theme">
|
<link rel="stylesheet" href="../../css/theme/serif.css" id="theme">
|
||||||
|
<style type="text/css" media="screen">
|
||||||
|
.slides section.has-dark-background,
|
||||||
|
.slides section.has-dark-background h2 {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.slides section.has-light-background,
|
||||||
|
.slides section.has-light-background h2 {
|
||||||
|
color: #222;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
@ -26,6 +36,10 @@
|
||||||
<h2>data-background: #bb00bb</h2>
|
<h2>data-background: #bb00bb</h2>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<section data-background-color="lightblue">
|
||||||
|
<h2>data-background: lightblue</h2>
|
||||||
|
</section>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<section data-background="#ff0000">
|
<section data-background="#ff0000">
|
||||||
<h2>data-background: #ff0000</h2>
|
<h2>data-background: #ff0000</h2>
|
||||||
|
|
@ -45,25 +59,25 @@
|
||||||
<section>
|
<section>
|
||||||
<h2>Background applied to stack</h2>
|
<h2>Background applied to stack</h2>
|
||||||
</section>
|
</section>
|
||||||
<section data-background="rgba(100, 0, 0, 0.2)">
|
<section data-background="rgb(66, 66, 66)">
|
||||||
<h2>Background applied to slide inside of stack</h2>
|
<h2>Background applied to slide inside of stack</h2>
|
||||||
</section>
|
</section>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section data-background-transition="slide" data-background="assets/image1.png" style="background: rgba(255,255,255,0.9)">
|
<section data-background-transition="slide" data-background="assets/image1.png">
|
||||||
<h2>Background image</h2>
|
<h2>Background image</h2>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<section data-background-transition="slide" data-background="assets/image1.png" style="background: rgba(255,255,255,0.9)">
|
<section data-background-transition="slide" data-background="assets/image1.png">
|
||||||
<h2>Background image</h2>
|
<h2>Background image</h2>
|
||||||
</section>
|
</section>
|
||||||
<section data-background-transition="slide" data-background="assets/image1.png" style="background: rgba(255,255,255,0.9)">
|
<section data-background-transition="slide" data-background="assets/image1.png">
|
||||||
<h2>Background image</h2>
|
<h2>Background image</h2>
|
||||||
</section>
|
</section>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section data-background="assets/image2.png" data-background-size="100px" data-background-repeat="repeat" data-background-color="#111" style="background: rgba(255,255,255,0.9)">
|
<section data-background="assets/image2.png" data-background-size="100px" data-background-repeat="repeat" data-background-color="#111">
|
||||||
<h2>Background image</h2>
|
<h2>Background image</h2>
|
||||||
<pre>data-background-size="100px" data-background-repeat="repeat" data-background-color="#111"</pre>
|
<pre>data-background-size="100px" data-background-repeat="repeat" data-background-color="#111"</pre>
|
||||||
</section>
|
</section>
|
||||||
|
|
@ -75,6 +89,14 @@
|
||||||
<h2>Same background twice (2/2)</h2>
|
<h2>Same background twice (2/2)</h2>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<section data-background-video="https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.mp4,https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.webm">
|
||||||
|
<h2>Video background</h2>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section data-background-iframe="https://slides.com">
|
||||||
|
<h2>Iframe background</h2>
|
||||||
|
</section>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<section data-background="#417203">
|
<section data-background="#417203">
|
||||||
<h2>Same background twice vertical (1/2)</h2>
|
<h2>Same background twice vertical (1/2)</h2>
|
||||||
|
|
@ -101,7 +123,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script src="../../lib/js/head.min.js"></script>
|
<script src="../../lib/js/head.min.js"></script>
|
||||||
<script src="../../js/reveal.min.js"></script>
|
<script src="../../js/reveal.js"></script>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@
|
||||||
|
|
||||||
<title>reveal.js - Test Markdown Element Attributes</title>
|
<title>reveal.js - Test Markdown Element Attributes</title>
|
||||||
|
|
||||||
<link rel="stylesheet" href="../css/reveal.min.css">
|
<link rel="stylesheet" href="../css/reveal.css">
|
||||||
<link rel="stylesheet" href="qunit-1.12.0.css">
|
<link rel="stylesheet" href="qunit-1.12.0.css">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
|
|
@ -19,10 +19,10 @@
|
||||||
|
|
||||||
<div class="slides">
|
<div class="slides">
|
||||||
|
|
||||||
<!-- <section data-markdown="example.md" data-separator="^\n\n\n" data-vertical="^\n\n"></section> -->
|
<!-- <section data-markdown="example.md" data-separator="^\n\n\n" data-separator-vertical="^\n\n"></section> -->
|
||||||
|
|
||||||
<!-- Slides are separated by newline + three dashes + newline, vertical slides identical but two dashes -->
|
<!-- 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$" data-element-attributes="{_\s*?([^}]+?)}">>
|
<section data-markdown data-separator="^\n---\n$" data-separator-vertical="^\n--\n$" data-element-attributes="{_\s*?([^}]+?)}">>
|
||||||
<script type="text/template">
|
<script type="text/template">
|
||||||
## Slide 1.1
|
## Slide 1.1
|
||||||
<!-- {_class="fragment fade-out" data-fragment-index="1"} -->
|
<!-- {_class="fragment fade-out" data-fragment-index="1"} -->
|
||||||
|
|
@ -75,8 +75,8 @@
|
||||||
|
|
||||||
|
|
||||||
<section data-markdown data-separator="^\n\n\n"
|
<section data-markdown data-separator="^\n\n\n"
|
||||||
data-vertical="^\n\n"
|
data-separator-vertical="^\n\n"
|
||||||
data-notes="^Note:"
|
data-separator-notes="^Note:"
|
||||||
data-charset="utf-8">
|
data-charset="utf-8">
|
||||||
<script type="text/template">
|
<script type="text/template">
|
||||||
# Test attributes in Markdown with default separator
|
# Test attributes in Markdown with default separator
|
||||||
|
|
@ -123,7 +123,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script src="../lib/js/head.min.js"></script>
|
<script src="../lib/js/head.min.js"></script>
|
||||||
<script src="../js/reveal.min.js"></script>
|
<script src="../js/reveal.js"></script>
|
||||||
<script src="../plugin/markdown/marked.js"></script>
|
<script src="../plugin/markdown/marked.js"></script>
|
||||||
<script src="../plugin/markdown/markdown.js"></script>
|
<script src="../plugin/markdown/markdown.js"></script>
|
||||||
<script src="qunit-1.12.0.js"></script>
|
<script src="qunit-1.12.0.js"></script>
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@
|
||||||
|
|
||||||
<title>reveal.js - Test Markdown Attributes</title>
|
<title>reveal.js - Test Markdown Attributes</title>
|
||||||
|
|
||||||
<link rel="stylesheet" href="../css/reveal.min.css">
|
<link rel="stylesheet" href="../css/reveal.css">
|
||||||
<link rel="stylesheet" href="qunit-1.12.0.css">
|
<link rel="stylesheet" href="qunit-1.12.0.css">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
|
|
@ -19,12 +19,12 @@
|
||||||
|
|
||||||
<div class="slides">
|
<div class="slides">
|
||||||
|
|
||||||
<!-- <section data-markdown="example.md" data-separator="^\n\n\n" data-vertical="^\n\n"></section> -->
|
<!-- <section data-markdown="example.md" data-separator="^\n\n\n" data-separator-vertical="^\n\n"></section> -->
|
||||||
|
|
||||||
<!-- Slides are separated by three lines, vertical slides by two lines, attributes are one any line starting with (spaces and) two dashes -->
|
<!-- Slides are separated by three lines, vertical slides by two lines, attributes are one any line starting with (spaces and) two dashes -->
|
||||||
<section data-markdown data-separator="^\n\n\n"
|
<section data-markdown data-separator="^\n\n\n"
|
||||||
data-vertical="^\n\n"
|
data-separator-vertical="^\n\n"
|
||||||
data-notes="^Note:"
|
data-separator-notes="^Note:"
|
||||||
data-attributes="--\s(.*?)$"
|
data-attributes="--\s(.*?)$"
|
||||||
data-charset="utf-8">
|
data-charset="utf-8">
|
||||||
<script type="text/template">
|
<script type="text/template">
|
||||||
|
|
@ -56,8 +56,8 @@
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section data-markdown data-separator="^\n\n\n"
|
<section data-markdown data-separator="^\n\n\n"
|
||||||
data-vertical="^\n\n"
|
data-separator-vertical="^\n\n"
|
||||||
data-notes="^Note:"
|
data-separator-notes="^Note:"
|
||||||
data-charset="utf-8">
|
data-charset="utf-8">
|
||||||
<script type="text/template">
|
<script type="text/template">
|
||||||
# Test attributes in Markdown with default separator
|
# Test attributes in Markdown with default separator
|
||||||
|
|
@ -117,7 +117,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script src="../lib/js/head.min.js"></script>
|
<script src="../lib/js/head.min.js"></script>
|
||||||
<script src="../js/reveal.min.js"></script>
|
<script src="../js/reveal.js"></script>
|
||||||
<script src="../plugin/markdown/marked.js"></script>
|
<script src="../plugin/markdown/marked.js"></script>
|
||||||
<script src="../plugin/markdown/markdown.js"></script>
|
<script src="../plugin/markdown/markdown.js"></script>
|
||||||
<script src="qunit-1.12.0.js"></script>
|
<script src="qunit-1.12.0.js"></script>
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@
|
||||||
|
|
||||||
<title>reveal.js - Test Markdown</title>
|
<title>reveal.js - Test Markdown</title>
|
||||||
|
|
||||||
<link rel="stylesheet" href="../css/reveal.min.css">
|
<link rel="stylesheet" href="../css/reveal.css">
|
||||||
<link rel="stylesheet" href="qunit-1.12.0.css">
|
<link rel="stylesheet" href="qunit-1.12.0.css">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
|
|
@ -19,10 +19,10 @@
|
||||||
|
|
||||||
<div class="slides">
|
<div class="slides">
|
||||||
|
|
||||||
<!-- <section data-markdown="example.md" data-separator="^\n\n\n" data-vertical="^\n\n"></section> -->
|
<!-- <section data-markdown="example.md" data-separator="^\n\n\n" data-separator-vertical="^\n\n"></section> -->
|
||||||
|
|
||||||
<!-- Slides are separated by newline + three dashes + newline, vertical slides identical but two dashes -->
|
<!-- 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$">
|
<section data-markdown data-separator="^\n---\n$" data-separator-vertical="^\n--\n$">
|
||||||
<script type="text/template">
|
<script type="text/template">
|
||||||
## Slide 1.1
|
## Slide 1.1
|
||||||
|
|
||||||
|
|
@ -41,7 +41,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script src="../lib/js/head.min.js"></script>
|
<script src="../lib/js/head.min.js"></script>
|
||||||
<script src="../js/reveal.min.js"></script>
|
<script src="../js/reveal.js"></script>
|
||||||
<script src="../plugin/markdown/marked.js"></script>
|
<script src="../plugin/markdown/marked.js"></script>
|
||||||
<script src="../plugin/markdown/markdown.js"></script>
|
<script src="../plugin/markdown/markdown.js"></script>
|
||||||
<script src="qunit-1.12.0.js"></script>
|
<script src="qunit-1.12.0.js"></script>
|
||||||
|
|
|
||||||
83
test/test-pdf.html
Normal file
83
test/test-pdf.html
Normal file
|
|
@ -0,0 +1,83 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
|
||||||
|
<title>reveal.js - Test PDF exports</title>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="../css/reveal.css">
|
||||||
|
<link rel="stylesheet" href="../css/print/pdf.css">
|
||||||
|
<link rel="stylesheet" href="qunit-1.12.0.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body style="overflow: auto;">
|
||||||
|
|
||||||
|
<div id="qunit"></div>
|
||||||
|
<div id="qunit-fixture"></div>
|
||||||
|
|
||||||
|
<div class="reveal" style="display: none;">
|
||||||
|
|
||||||
|
<div class="slides">
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h1>1</h1>
|
||||||
|
<img data-src="fake-url.png">
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<section>
|
||||||
|
<h1>2.1</h1>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<h1>2.2</h1>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<h1>2.3</h1>
|
||||||
|
</section>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="fragment-slides">
|
||||||
|
<section>
|
||||||
|
<h1>3.1</h1>
|
||||||
|
<ul>
|
||||||
|
<li class="fragment">4.1</li>
|
||||||
|
<li class="fragment">4.2</li>
|
||||||
|
<li class="fragment">4.3</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h1>3.2</h1>
|
||||||
|
<ul>
|
||||||
|
<li class="fragment" data-fragment-index="0">4.1</li>
|
||||||
|
<li class="fragment" data-fragment-index="0">4.2</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h1>3.3</h1>
|
||||||
|
<ul>
|
||||||
|
<li class="fragment" data-fragment-index="1">3.3.1</li>
|
||||||
|
<li class="fragment" data-fragment-index="4">3.3.2</li>
|
||||||
|
<li class="fragment" data-fragment-index="4">3.3.3</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h1>4</h1>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="../lib/js/head.min.js"></script>
|
||||||
|
<script src="../js/reveal.js"></script>
|
||||||
|
<script src="qunit-1.12.0.js"></script>
|
||||||
|
|
||||||
|
<script src="test-pdf.js"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
15
test/test-pdf.js
Normal file
15
test/test-pdf.js
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
|
||||||
|
Reveal.addEventListener( 'ready', function() {
|
||||||
|
|
||||||
|
// Only one test for now, we're mainly ensuring that there
|
||||||
|
// are no execution errors when running PDF mode
|
||||||
|
|
||||||
|
test( 'Reveal.isReady', function() {
|
||||||
|
strictEqual( Reveal.isReady(), true, 'returns true' );
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
} );
|
||||||
|
|
||||||
|
Reveal.initialize({ pdf: true });
|
||||||
|
|
||||||
|
|
@ -6,7 +6,7 @@
|
||||||
|
|
||||||
<title>reveal.js - Tests</title>
|
<title>reveal.js - Tests</title>
|
||||||
|
|
||||||
<link rel="stylesheet" href="../css/reveal.min.css">
|
<link rel="stylesheet" href="../css/reveal.css">
|
||||||
<link rel="stylesheet" href="qunit-1.12.0.css">
|
<link rel="stylesheet" href="qunit-1.12.0.css">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
|
|
@ -19,12 +19,13 @@
|
||||||
|
|
||||||
<div class="slides">
|
<div class="slides">
|
||||||
|
|
||||||
<section>
|
<section data-background-image="examples/assets/image1.png">
|
||||||
<h1>1</h1>
|
<h1>1</h1>
|
||||||
|
<img data-src="fake-url.png">
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<section>
|
<section data-background="examples/assets/image2.png">
|
||||||
<h1>2.1</h1>
|
<h1>2.1</h1>
|
||||||
</section>
|
</section>
|
||||||
<section>
|
<section>
|
||||||
|
|
@ -72,7 +73,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script src="../lib/js/head.min.js"></script>
|
<script src="../lib/js/head.min.js"></script>
|
||||||
<script src="../js/reveal.min.js"></script>
|
<script src="../js/reveal.js"></script>
|
||||||
<script src="qunit-1.12.0.js"></script>
|
<script src="qunit-1.12.0.js"></script>
|
||||||
|
|
||||||
<script src="test.js"></script>
|
<script src="test.js"></script>
|
||||||
|
|
|
||||||
152
test/test.js
152
test/test.js
|
|
@ -68,6 +68,12 @@ Reveal.addEventListener( 'ready', function() {
|
||||||
strictEqual( Reveal.isFirstSlide(), true, 'true after Reveal.slide( 0, 0 )' );
|
strictEqual( Reveal.isFirstSlide(), true, 'true after Reveal.slide( 0, 0 )' );
|
||||||
});
|
});
|
||||||
|
|
||||||
|
test( 'Reveal.isFirstSlide after vertical slide', function() {
|
||||||
|
Reveal.slide( 1, 1 );
|
||||||
|
Reveal.slide( 0, 0 );
|
||||||
|
strictEqual( Reveal.isFirstSlide(), true, 'true after Reveal.slide( 1, 1 ) and then Reveal.slide( 0, 0 )' );
|
||||||
|
});
|
||||||
|
|
||||||
test( 'Reveal.isLastSlide', function() {
|
test( 'Reveal.isLastSlide', function() {
|
||||||
Reveal.slide( 0, 0 );
|
Reveal.slide( 0, 0 );
|
||||||
strictEqual( Reveal.isLastSlide(), false, 'false after Reveal.slide( 0, 0 )' );
|
strictEqual( Reveal.isLastSlide(), false, 'false after Reveal.slide( 0, 0 )' );
|
||||||
|
|
@ -75,34 +81,62 @@ Reveal.addEventListener( 'ready', function() {
|
||||||
var lastSlideIndex = document.querySelectorAll( '.reveal .slides>section' ).length - 1;
|
var lastSlideIndex = document.querySelectorAll( '.reveal .slides>section' ).length - 1;
|
||||||
|
|
||||||
Reveal.slide( lastSlideIndex, 0 );
|
Reveal.slide( lastSlideIndex, 0 );
|
||||||
strictEqual( Reveal.isLastSlide(), true, 'true after Reveal.slide( ', 0+ lastSlideIndex +' )' );
|
strictEqual( Reveal.isLastSlide(), true, 'true after Reveal.slide( '+ lastSlideIndex +', 0 )' );
|
||||||
|
|
||||||
Reveal.slide( 0, 0 );
|
Reveal.slide( 0, 0 );
|
||||||
strictEqual( Reveal.isLastSlide(), false, 'false after Reveal.slide( 0, 0 )' );
|
strictEqual( Reveal.isLastSlide(), false, 'false after Reveal.slide( 0, 0 )' );
|
||||||
});
|
});
|
||||||
|
|
||||||
|
test( 'Reveal.isLastSlide after vertical slide', function() {
|
||||||
|
var lastSlideIndex = document.querySelectorAll( '.reveal .slides>section' ).length - 1;
|
||||||
|
|
||||||
|
Reveal.slide( 1, 1 );
|
||||||
|
Reveal.slide( lastSlideIndex );
|
||||||
|
strictEqual( Reveal.isLastSlide(), true, 'true after Reveal.slide( 1, 1 ) and then Reveal.slide( '+ lastSlideIndex +', 0 )' );
|
||||||
|
});
|
||||||
|
|
||||||
|
test( 'Reveal.getTotalSlides', function() {
|
||||||
|
strictEqual( Reveal.getTotalSlides(), 8, 'eight slides in total' );
|
||||||
|
});
|
||||||
|
|
||||||
test( 'Reveal.getIndices', function() {
|
test( 'Reveal.getIndices', function() {
|
||||||
var indices = Reveal.getIndices();
|
var indices = Reveal.getIndices();
|
||||||
|
|
||||||
ok( typeof indices.hasOwnProperty( 'h' ), 'h exists' );
|
ok( indices.hasOwnProperty( 'h' ), 'h exists' );
|
||||||
ok( typeof indices.hasOwnProperty( 'v' ), 'v exists' );
|
ok( indices.hasOwnProperty( 'v' ), 'v exists' );
|
||||||
ok( typeof indices.hasOwnProperty( 'f' ), 'f exists' );
|
ok( indices.hasOwnProperty( 'f' ), 'f exists' );
|
||||||
|
|
||||||
Reveal.slide( 1, 0 );
|
Reveal.slide( 1, 0 );
|
||||||
ok( Reveal.getIndices().h === 1 && Reveal.getIndices().v === 0, 'h 1, v 0' );
|
strictEqual( Reveal.getIndices().h, 1, 'h 1' );
|
||||||
|
strictEqual( Reveal.getIndices().v, 0, 'v 0' );
|
||||||
|
|
||||||
Reveal.slide( 1, 2 );
|
Reveal.slide( 1, 2 );
|
||||||
ok( Reveal.getIndices().h === 1 && Reveal.getIndices().v === 2, 'h 1, v 2' );
|
strictEqual( Reveal.getIndices().h, 1, 'h 1' );
|
||||||
|
strictEqual( Reveal.getIndices().v, 2, 'v 2' );
|
||||||
|
|
||||||
Reveal.slide( 0, 0 );
|
Reveal.slide( 0, 0 );
|
||||||
|
strictEqual( Reveal.getIndices().h, 0, 'h 0' );
|
||||||
|
strictEqual( Reveal.getIndices().v, 0, 'v 0' );
|
||||||
});
|
});
|
||||||
|
|
||||||
test( 'Reveal.getSlide', function() {
|
test( 'Reveal.getSlide', function() {
|
||||||
var firstSlide = document.querySelector( '.reveal .slides>section:first-child' );
|
equal( Reveal.getSlide( 0 ), document.querySelector( '.reveal .slides>section:first-child' ), 'gets correct first slide' );
|
||||||
|
equal( Reveal.getSlide( 1 ), document.querySelector( '.reveal .slides>section:nth-child(2)' ), 'no v index returns stack' );
|
||||||
|
equal( Reveal.getSlide( 1, 0 ), document.querySelector( '.reveal .slides>section:nth-child(2)>section:nth-child(1)' ), 'v index 0 returns first vertical child' );
|
||||||
|
equal( Reveal.getSlide( 1, 1 ), document.querySelector( '.reveal .slides>section:nth-child(2)>section:nth-child(2)' ), 'v index 1 returns second vertical child' );
|
||||||
|
|
||||||
equal( Reveal.getSlide( 0 ), firstSlide, 'gets correct first slide' );
|
strictEqual( Reveal.getSlide( 100 ), undefined, 'undefined when out of horizontal bounds' );
|
||||||
|
strictEqual( Reveal.getSlide( 1, 100 ), undefined, 'undefined when out of vertical bounds' );
|
||||||
|
});
|
||||||
|
|
||||||
strictEqual( Reveal.getSlide( 100 ), undefined, 'returns undefined when slide can\'t be found' );
|
test( 'Reveal.getSlideBackground', function() {
|
||||||
|
equal( Reveal.getSlideBackground( 0 ), document.querySelector( '.reveal .backgrounds>.slide-background:first-child' ), 'gets correct first background' );
|
||||||
|
equal( Reveal.getSlideBackground( 1 ), document.querySelector( '.reveal .backgrounds>.slide-background:nth-child(2)' ), 'no v index returns stack' );
|
||||||
|
equal( Reveal.getSlideBackground( 1, 0 ), document.querySelector( '.reveal .backgrounds>.slide-background:nth-child(2) .slide-background:nth-child(1)' ), 'v index 0 returns first vertical child' );
|
||||||
|
equal( Reveal.getSlideBackground( 1, 1 ), document.querySelector( '.reveal .backgrounds>.slide-background:nth-child(2) .slide-background:nth-child(2)' ), 'v index 1 returns second vertical child' );
|
||||||
|
|
||||||
|
strictEqual( Reveal.getSlideBackground( 100 ), undefined, 'undefined when out of horizontal bounds' );
|
||||||
|
strictEqual( Reveal.getSlideBackground( 1, 100 ), undefined, 'undefined when out of vertical bounds' );
|
||||||
});
|
});
|
||||||
|
|
||||||
test( 'Reveal.getPreviousSlide/getCurrentSlide', function() {
|
test( 'Reveal.getPreviousSlide/getCurrentSlide', function() {
|
||||||
|
|
@ -116,6 +150,16 @@ Reveal.addEventListener( 'ready', function() {
|
||||||
equal( Reveal.getCurrentSlide(), secondSlide, 'current is slide #1' );
|
equal( Reveal.getCurrentSlide(), secondSlide, 'current is slide #1' );
|
||||||
});
|
});
|
||||||
|
|
||||||
|
test( 'Reveal.getProgress', function() {
|
||||||
|
Reveal.slide( 0, 0 );
|
||||||
|
strictEqual( Reveal.getProgress(), 0, 'progress is 0 on first slide' );
|
||||||
|
|
||||||
|
var lastSlideIndex = document.querySelectorAll( '.reveal .slides>section' ).length - 1;
|
||||||
|
|
||||||
|
Reveal.slide( lastSlideIndex, 0 );
|
||||||
|
strictEqual( Reveal.getProgress(), 1, 'progress is 1 on last slide' );
|
||||||
|
});
|
||||||
|
|
||||||
test( 'Reveal.getScale', function() {
|
test( 'Reveal.getScale', function() {
|
||||||
ok( typeof Reveal.getScale() === 'number', 'has scale' );
|
ok( typeof Reveal.getScale() === 'number', 'has scale' );
|
||||||
});
|
});
|
||||||
|
|
@ -269,6 +313,13 @@ Reveal.addEventListener( 'ready', function() {
|
||||||
|
|
||||||
Reveal.slide( 3, 0, 0 );
|
Reveal.slide( 3, 0, 0 );
|
||||||
equal( fragmentSlide.querySelectorAll( '.fragment.visible' ).length, 2, 'both fragments of same index are shown' );
|
equal( fragmentSlide.querySelectorAll( '.fragment.visible' ).length, 2, 'both fragments of same index are shown' );
|
||||||
|
|
||||||
|
// This slide has three fragments, first one is index 0, second and third have index 1
|
||||||
|
Reveal.slide( 2, 2, 0 );
|
||||||
|
equal( Reveal.getIndices().f, 0, 'returns correct index for first fragment' );
|
||||||
|
|
||||||
|
Reveal.slide( 2, 2, 1 );
|
||||||
|
equal( Reveal.getIndices().f, 1, 'returns correct index for two fragments with same index' );
|
||||||
});
|
});
|
||||||
|
|
||||||
test( 'Index generation', function() {
|
test( 'Index generation', function() {
|
||||||
|
|
@ -331,6 +382,70 @@ Reveal.addEventListener( 'ready', function() {
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------
|
||||||
|
// AUTO-SLIDE TESTS
|
||||||
|
|
||||||
|
QUnit.module( 'Auto Sliding' );
|
||||||
|
|
||||||
|
test( 'Reveal.isAutoSliding', function() {
|
||||||
|
strictEqual( Reveal.isAutoSliding(), false, 'false by default' );
|
||||||
|
|
||||||
|
Reveal.configure({ autoSlide: 10000 });
|
||||||
|
strictEqual( Reveal.isAutoSliding(), true, 'true after starting' );
|
||||||
|
|
||||||
|
Reveal.configure({ autoSlide: 0 });
|
||||||
|
strictEqual( Reveal.isAutoSliding(), false, 'false after setting to 0' );
|
||||||
|
});
|
||||||
|
|
||||||
|
test( 'Reveal.toggleAutoSlide', function() {
|
||||||
|
Reveal.configure({ autoSlide: 10000 });
|
||||||
|
|
||||||
|
Reveal.toggleAutoSlide();
|
||||||
|
strictEqual( Reveal.isAutoSliding(), false, 'false after first toggle' );
|
||||||
|
Reveal.toggleAutoSlide();
|
||||||
|
strictEqual( Reveal.isAutoSliding(), true, 'true after second toggle' );
|
||||||
|
|
||||||
|
Reveal.configure({ autoSlide: 0 });
|
||||||
|
});
|
||||||
|
|
||||||
|
asyncTest( 'autoslidepaused', function() {
|
||||||
|
expect( 1 );
|
||||||
|
|
||||||
|
var _onEvent = function( event ) {
|
||||||
|
ok( true, 'event fired' );
|
||||||
|
}
|
||||||
|
|
||||||
|
Reveal.addEventListener( 'autoslidepaused', _onEvent );
|
||||||
|
Reveal.configure({ autoSlide: 10000 });
|
||||||
|
Reveal.toggleAutoSlide();
|
||||||
|
|
||||||
|
start();
|
||||||
|
|
||||||
|
// cleanup
|
||||||
|
Reveal.configure({ autoSlide: 0 });
|
||||||
|
Reveal.removeEventListener( 'autoslidepaused', _onEvent );
|
||||||
|
});
|
||||||
|
|
||||||
|
asyncTest( 'autoslideresumed', function() {
|
||||||
|
expect( 1 );
|
||||||
|
|
||||||
|
var _onEvent = function( event ) {
|
||||||
|
ok( true, 'event fired' );
|
||||||
|
}
|
||||||
|
|
||||||
|
Reveal.addEventListener( 'autoslideresumed', _onEvent );
|
||||||
|
Reveal.configure({ autoSlide: 10000 });
|
||||||
|
Reveal.toggleAutoSlide();
|
||||||
|
Reveal.toggleAutoSlide();
|
||||||
|
|
||||||
|
start();
|
||||||
|
|
||||||
|
// cleanup
|
||||||
|
Reveal.configure({ autoSlide: 0 });
|
||||||
|
Reveal.removeEventListener( 'autoslideresumed', _onEvent );
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
// ---------------------------------------------------------------
|
// ---------------------------------------------------------------
|
||||||
// CONFIGURATION VALUES
|
// CONFIGURATION VALUES
|
||||||
|
|
||||||
|
|
@ -371,6 +486,25 @@ Reveal.addEventListener( 'ready', function() {
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------
|
||||||
|
// LAZY-LOADING TESTS
|
||||||
|
|
||||||
|
QUnit.module( 'Lazy-Loading' );
|
||||||
|
|
||||||
|
test( 'img with data-src', function() {
|
||||||
|
strictEqual( document.querySelectorAll( '.reveal section img[src]' ).length, 1, 'Image source has been set' );
|
||||||
|
});
|
||||||
|
|
||||||
|
test( 'background images', function() {
|
||||||
|
var imageSource1 = Reveal.getSlide( 0 ).getAttribute( 'data-background-image' );
|
||||||
|
var imageSource2 = Reveal.getSlide( 1, 0 ).getAttribute( 'data-background' );
|
||||||
|
|
||||||
|
// check that the images are applied to the background elements
|
||||||
|
ok( Reveal.getSlideBackground( 0 ).style.backgroundImage.indexOf( imageSource1 ) !== -1, 'data-background-image worked' );
|
||||||
|
ok( Reveal.getSlideBackground( 1, 0 ).style.backgroundImage.indexOf( imageSource2 ) !== -1, 'data-background worked' );
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
// ---------------------------------------------------------------
|
// ---------------------------------------------------------------
|
||||||
// EVENT TESTS
|
// EVENT TESTS
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user