mirror of
https://github.com/hakimel/reveal.js.git
synced 2025-09-15 00:52:11 +02:00
Compare commits
112 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
f51067b00e | ||
|
|
5c5b3d34d9 | ||
|
|
e87d689231 | ||
|
|
af2a8b053d | ||
|
|
38aff9a37d | ||
|
|
8bd63fe21a | ||
|
|
6a691a0999 | ||
|
|
605f7140e3 | ||
|
|
e693717f2a | ||
|
|
9da9726403 | ||
|
|
6aafa0107d | ||
|
|
6794f543e0 | ||
|
|
5d1bac5790 | ||
|
|
4777afe0c5 | ||
|
|
747c4c4b3d | ||
|
b838522be4 | ||
|
|
5af915adaf | ||
|
|
1801bf67ea | ||
|
|
64448319eb | ||
|
|
73328cfd48 | ||
|
|
13e7550afe | ||
|
|
296242f8d3 | ||
|
|
76a7bd83fa | ||
|
|
40c899ec56 | ||
|
|
aefe981040 | ||
|
7f4e5fc6bf | ||
|
|
b373425b69 | ||
|
|
143fc85c65 | ||
|
|
8576264574 | ||
|
|
8bdeb360ce | ||
|
|
c6f8a44edf | ||
|
|
5188951a0f | ||
|
|
c13390354b | ||
|
|
d84aeeb9ae | ||
|
|
da40cf2172 | ||
|
|
a4f03be485 | ||
|
|
3241cb78d8 | ||
|
|
95cf421f01 | ||
|
|
ecb4347ec1 | ||
|
|
f82c13497a | ||
|
|
379f5d38ff | ||
|
|
dc57e4c51c | ||
|
|
ff8ccbb02e | ||
|
|
54588f5fea | ||
|
|
b957d0b858 | ||
|
|
c39f5fc0b0 | ||
|
|
82bd8e4fb0 | ||
|
|
d02e64adbd | ||
|
|
c46486b3df | ||
|
|
46e270e59f | ||
|
|
409c0dfbcc | ||
|
|
cbdbfc07f4 | ||
|
|
5cfb7b3239 | ||
|
|
e447187c20 | ||
|
|
3413d99b2b | ||
|
|
551c783b72 | ||
|
070a1e3ee5 | ||
|
|
3a2036e2b2 | ||
|
|
f70dcd3c9f | ||
|
|
558c21e1a3 | ||
|
|
17f3cf4332 | ||
|
|
f0c27efc95 | ||
|
20858d1f4c | ||
|
|
4271677ea1 | ||
|
|
470cabaea8 | ||
|
|
e15beb47f0 | ||
|
|
68139e64e9 | ||
|
|
86a907e8cc | ||
|
|
ec58a913f2 | ||
|
|
aed06772f6 | ||
|
|
a23868804e | ||
|
|
2869f8a4ee | ||
|
|
8c23c89883 | ||
|
|
6e0d0e279d | ||
|
|
421b78aafb | ||
|
|
ed1db1f3c8 | ||
|
|
6619bc62bd | ||
|
|
bb47678b27 | ||
|
|
c34be2e976 | ||
|
1a163d3450 | ||
|
f6bae66089 | ||
|
|
4dad42496e | ||
|
|
87c554b7da | ||
|
|
f00d8fa1d6 | ||
|
|
7711340967 | ||
|
|
a149de8ddc | ||
|
|
2cc6927f3c | ||
|
|
16b71d7a21 | ||
|
|
7166e2d8cc | ||
|
|
91e9457cef | ||
|
|
5d7d3e83c5 | ||
|
|
25efef8c4f | ||
|
|
f22e5f85e8 | ||
|
|
84b69b6b9a | ||
|
|
1c726eed78 | ||
|
|
43c8990f2b | ||
|
|
6af14aca0f | ||
|
|
7d5c8b550d | ||
|
|
b0cc9fee45 | ||
|
7e719c52c8 | ||
|
|
2c788dffb6 | ||
|
|
303be5be77 | ||
|
|
e014daa4f5 | ||
|
|
eda54dcf7a | ||
|
|
1ed79b9df6 | ||
|
|
66988b8f0a | ||
|
|
112227b79c | ||
|
|
e79bc38b43 | ||
|
|
78b9bb43e1 | ||
|
73706ad02e | ||
|
|
a1e73b78ef | ||
|
|
edb2051529 |
1
.gitignore
vendored
1
.gitignore
vendored
@@ -3,3 +3,4 @@
|
||||
log/*.log
|
||||
tmp/**
|
||||
node_modules/
|
||||
.sass-cache
|
||||
134
README.md
134
README.md
@@ -8,11 +8,7 @@ reveal.js comes with a broad range of features including [nested slides](https:/
|
||||
#### More reading in the Wiki:
|
||||
- [Changelog](https://github.com/hakimel/reveal.js/wiki/Changelog): Up-to-date version history.
|
||||
- [Examples](https://github.com/hakimel/reveal.js/wiki/Example-Presentations): Presentations created with reveal.js, add your own!
|
||||
- [Browser Support](https://github.com/hakimel/reveal.js/wiki/Changelog): Explanation of browser support and fallbacks.
|
||||
|
||||
The framework is and will remain free. Donations are available as an optional way of supporting the project. Proceeds go towards futher development, hosting and domain costs for reveal.js and rvl.io.
|
||||
|
||||
[](http://www.pledgie.com/campaigns/18182)
|
||||
- [Browser Support](https://github.com/hakimel/reveal.js/wiki/Browser-Support): Explanation of browser support and fallbacks.
|
||||
|
||||
## rvl.io
|
||||
|
||||
@@ -39,15 +35,17 @@ Markup heirarchy needs to be ``<div class="reveal"> <div class="slides"> <sectio
|
||||
|
||||
### Markdown
|
||||
|
||||
It's possible to write your slides using Markdown. To enable Markdown simply add the ```data-markdown``` attribute to your ```<section>``` elements and reveal.js will automatically load the JavaScript parser.
|
||||
It's possible to write your slides using Markdown. To enable Markdown, add the ```data-markdown``` attribute to your ```<section>``` elements and wrap the contents in a ```<script type="text/template">``` like the example below.
|
||||
|
||||
This is based on [data-markdown](https://gist.github.com/1343518) from [Paul Irish](https://github.com/paulirish) which in turn uses [showdown](https://github.com/coreyti/showdown/). This is sensitive to indentation (avoid mixing tabs and spaces) and line breaks (avoid consecutive breaks). Updates to come.
|
||||
This is based on [data-markdown](https://gist.github.com/1343518) from [Paul Irish](https://github.com/paulirish) which in turn uses [showdown](https://github.com/coreyti/showdown/). This is sensitive to indentation (avoid mixing tabs and spaces) and line breaks (avoid consecutive breaks).
|
||||
|
||||
```html
|
||||
<section data-markdown>
|
||||
## Page title
|
||||
|
||||
A paragraph with some text and a [link](http://hakim.se).
|
||||
<script type="text/template">
|
||||
## Page title
|
||||
|
||||
A paragraph with some text and a [link](http://hakim.se).
|
||||
</script>
|
||||
</section>
|
||||
```
|
||||
|
||||
@@ -77,7 +75,8 @@ Reveal.initialize({
|
||||
loop: false,
|
||||
|
||||
// Number of milliseconds between automatically proceeding to the
|
||||
// next slide, disabled when set to 0
|
||||
// next slide, disabled when set to 0, this value can be overwritten
|
||||
// by using a data-autoslide attribute on your slides
|
||||
autoSlide: 0,
|
||||
|
||||
// Enable slide navigation via mouse wheel
|
||||
@@ -87,7 +86,7 @@ Reveal.initialize({
|
||||
rollingLinks: true,
|
||||
|
||||
// Transition style
|
||||
transition: 'default' // default/cube/page/concave/linear(2d)
|
||||
transition: 'default' // default/cube/page/concave/zoom/linear/none
|
||||
});
|
||||
```
|
||||
|
||||
@@ -98,16 +97,17 @@ Reveal.js doesn't _rely_ on any third party scripts to work but a few optional l
|
||||
```javascript
|
||||
Reveal.initialize({
|
||||
dependencies: [
|
||||
// Syntax highlight for <code> elements
|
||||
{ src: 'lib/js/highlight.js', async: true, callback: function() { window.hljs.initHighlightingOnLoad(); } },
|
||||
// Cross-browser shim that fully implements classList - https://github.com/eligrey/classList.js/
|
||||
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } }
|
||||
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
|
||||
// Interpret Markdown in <section> elements
|
||||
{ src: 'lib/js/data-markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
|
||||
{ src: 'lib/js/showdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
|
||||
// Speaker notes support
|
||||
{ src: 'plugin/speakernotes/client.js', async: true, condition: function() { return window.location.host === 'localhost:1947'; } },
|
||||
{ src: '/socket.io/socket.io.js', async: true, condition: function() { return window.location.host === 'localhost:1947'; } },
|
||||
{ src: 'plugin/markdown/showdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
|
||||
{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
|
||||
// Syntax highlight for <code> elements
|
||||
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
|
||||
// Zoom in and out with Alt+click
|
||||
{ src: 'plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
|
||||
// Speaker notes
|
||||
{ src: 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }
|
||||
]
|
||||
});
|
||||
```
|
||||
@@ -125,13 +125,15 @@ The Reveal class provides a minimal JavaScript API for controlling navigation an
|
||||
|
||||
```javascript
|
||||
// Navigation
|
||||
Reveal.navigateTo( indexh, indexv );
|
||||
Reveal.navigateLeft();
|
||||
Reveal.navigateRight();
|
||||
Reveal.navigateUp();
|
||||
Reveal.navigateDown();
|
||||
Reveal.navigatePrev();
|
||||
Reveal.navigateNext();
|
||||
Reveal.slide( indexh, indexv );
|
||||
Reveal.left();
|
||||
Reveal.right();
|
||||
Reveal.up();
|
||||
Reveal.down();
|
||||
Reveal.prev();
|
||||
Reveal.next();
|
||||
Reveal.prevFragment();
|
||||
Reveal.nextFragment();
|
||||
Reveal.toggleOverview();
|
||||
|
||||
// Retrieves the previous and current slide elements
|
||||
@@ -153,6 +155,16 @@ Reveal.addEventListener( 'somestate', function() {
|
||||
}, false );
|
||||
```
|
||||
|
||||
### Ready event
|
||||
|
||||
The 'ready' event is fired when reveal.js has loaded all (synchronous) dependencies and is ready to start navigating.
|
||||
|
||||
```javascript
|
||||
Reveal.addEventListener( 'ready', function( event ) {
|
||||
// event.currentSlide, event.indexh, event.indexv
|
||||
} );
|
||||
```
|
||||
|
||||
### Slide change event
|
||||
|
||||
An 'slidechanged' event is fired each time the slide is changed (regardless of state). The event object holds the index values of the current slide as well as a reference to the previous and current slide HTML nodes.
|
||||
@@ -163,6 +175,34 @@ Reveal.addEventListener( 'slidechanged', function( event ) {
|
||||
} );
|
||||
```
|
||||
|
||||
### Internal links
|
||||
|
||||
It's easy to link between slides. The first example below targets the index of another slide whereas the second targets a slide with an ID attribute (```<section id="some-slide">```):
|
||||
|
||||
```html
|
||||
<a href="#/2/2">Link</a>
|
||||
<a href="#/some-slide">Link</a>
|
||||
```
|
||||
### Fullscreen mode
|
||||
Just press »F« on your keyboard to show your presentation in fullscreen mode. Press the »ESC« key to exit fullscreen mode.
|
||||
|
||||
### Fragments
|
||||
Fragments are used to highlight individual elements on a slide. Every elmement with the class ```fragment``` will be stepped through before moving on to the next slide. Here's an example: http://lab.hakim.se/reveal-js/#/16
|
||||
|
||||
The default fragment style is to start out invisible and fade in. This style can be changed by appending a different class to the fragment:
|
||||
|
||||
```html
|
||||
<section>
|
||||
<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>
|
||||
</section>
|
||||
```
|
||||
|
||||
### Fragment events
|
||||
|
||||
When a slide fragment is either shown or hidden reveal.js will dispatch an event.
|
||||
@@ -176,14 +216,6 @@ Reveal.addEventListener( 'fragmenthidden', function( event ) {
|
||||
} );
|
||||
```
|
||||
|
||||
### Internal links
|
||||
|
||||
It's easy to link between slides. The first example below targets the index of another slide whereas the second targets a slide with an ID attribute (```<section id="some-slide">```):
|
||||
|
||||
```html
|
||||
<a href="#/2/2">Link</a>
|
||||
<a href="#/some-slide">Link</a>
|
||||
```
|
||||
|
||||
## PDF Export
|
||||
|
||||
@@ -199,27 +231,38 @@ Here's an example of an exported presentation that's been uploaded to SlideShare
|
||||
|
||||
|
||||
|
||||
|
||||
## Speaker Notes
|
||||
|
||||
If you're interested in using speaker notes, reveal.js comes with a Node server that allows you to deliver your presentation in one browser while viewing speaker notes in another.
|
||||
reveal.js comes with a speaker notes plugin which can be used to present per-slide notes in a separate browser window. The notes window also gives you a preview of the next upcoming slide so it may be helpful even if you haven't written any notes. Append ```?notes``` to presentation URL or press the 's' key on your keyboard to open the notes window.
|
||||
|
||||
To include speaker notes in your presentation, simply add an `<aside class="notes">` element to any slide. These notes will be hidden in the main presentation view.
|
||||
By default notes are written using standard HTML, see below, but you can add a ```data-markdown``` attribute to the ```<aside>``` to write them using Markdown.
|
||||
|
||||
It's also possible to write your notes with Markdown. To enable Markdown, add the ```data-markdown``` attribute to your note ```<aside>``` elements.
|
||||
```html
|
||||
<section>
|
||||
<h2>Some Slide</h2>
|
||||
|
||||
You'll also need to [install Node.js](http://nodejs.org/); then, install the server dependencies by running `npm install`.
|
||||
<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>
|
||||
```
|
||||
|
||||
Once Node.js and the dependencies are installed, run the following command from the root directory:
|
||||
## Server Side Speaker Nodes
|
||||
|
||||
node plugin/speakernotes
|
||||
In some cases it can be desirable to run notes on a separate device from the one you're presenting on. The Node.js-based notes plugin lets you do this using the same note definitions as its client side counterpart. Include the requried scripts by adding the following dependencies:
|
||||
|
||||
By default, the slides will be served at [localhost:1947](http://localhost:1947).
|
||||
```
|
||||
{ src: '/socket.io/socket.io.js', async: true },
|
||||
{ src: 'plugin/notes-server/client.js', async: true }
|
||||
```
|
||||
|
||||
You can change the appearance of the speaker notes by editing the file at `plugin/speakernotes/notes.html`.
|
||||
Then:
|
||||
|
||||
### Known Issues
|
||||
1. Install [Node.js](http://nodejs.org/)
|
||||
2. Run ```npm install```
|
||||
3. Run ```node plugin/notes-server```
|
||||
|
||||
- The notes page is supposed to show the current slide and the next slide, but when it first starts, it always shows the first slide in both positions.
|
||||
|
||||
## Folder Structure
|
||||
- **css/** Core styles without which the project does not function
|
||||
@@ -232,3 +275,4 @@ You can change the appearance of the speaker notes by editing the file at `plugi
|
||||
MIT licensed
|
||||
|
||||
Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
|
||||
|
||||
|
||||
@@ -31,19 +31,19 @@ html {
|
||||
/* SECTION 2: Remove any elements not needed in print.
|
||||
This would include navigation, ads, sidebars, etc. */
|
||||
.nestedarrow,
|
||||
.controls a,
|
||||
.controls,
|
||||
.reveal .progress,
|
||||
.reveal.overview,
|
||||
.fork-reveal,
|
||||
.share-reveal,
|
||||
.state-background {
|
||||
display:none;
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* SECTION 3: Set body font face, size, and color.
|
||||
Consider using a serif font for readability. */
|
||||
body, p, td, li, div, a {
|
||||
font-size: 13pt;
|
||||
font-size: 16pt!important;
|
||||
font-family: Georgia, "Times New Roman", Times, serif !important;
|
||||
color: #000;
|
||||
}
|
||||
@@ -77,12 +77,14 @@ a:visited {
|
||||
font-weight: bold;
|
||||
text-decoration: underline;
|
||||
}
|
||||
/*
|
||||
.reveal a:link:after,
|
||||
.reveal a:visited:after {
|
||||
content: " (" attr(href) ") ";
|
||||
color: #222 !important;
|
||||
font-size: 90%;
|
||||
}
|
||||
*/
|
||||
|
||||
|
||||
/* SECTION 6: more reveal.js specific additions by @skypanther */
|
||||
@@ -121,35 +123,33 @@ ul, ol, div, p {
|
||||
-ms-perspective-origin: 50% 50%;
|
||||
perspective-origin: 50% 50%;
|
||||
}
|
||||
.reveal .slides>section, .reveal .slides>section>section,
|
||||
.reveal .slides>section.past, .reveal .slides>section.future,
|
||||
.reveal.linear .slides>section, .reveal.linear .slides>section>section,
|
||||
.reveal.linear .slides>section.past, .reveal.linear .slides>section.future {
|
||||
.reveal .slides>section,
|
||||
.reveal .slides>section>section {
|
||||
|
||||
visibility: visible;
|
||||
position: static;
|
||||
width: 90%;
|
||||
height: auto;
|
||||
display: block;
|
||||
overflow: visible;
|
||||
visibility: visible !important;
|
||||
position: static !important;
|
||||
width: 90% !important;
|
||||
height: auto !important;
|
||||
display: block !important;
|
||||
overflow: visible !important;
|
||||
|
||||
left: 0%;
|
||||
top: 0%;
|
||||
margin-left: 0px;
|
||||
margin-top: 0px;
|
||||
padding: 20px 0px;
|
||||
left: 0% !important;
|
||||
top: 0% !important;
|
||||
margin-left: 0px !important;
|
||||
margin-top: 0px !important;
|
||||
padding: 20px 0px !important;
|
||||
|
||||
opacity: 1;
|
||||
opacity: 1 !important;
|
||||
|
||||
-webkit-transform-style: flat;
|
||||
-moz-transform-style: flat;
|
||||
-ms-transform-style: flat;
|
||||
transform-style: flat;
|
||||
-webkit-transform-style: flat !important;
|
||||
-moz-transform-style: flat !important;
|
||||
-ms-transform-style: flat !important;
|
||||
transform-style: flat !important;
|
||||
|
||||
-webkit-transform: none;
|
||||
-moz-transform: none;
|
||||
-ms-transform: none;
|
||||
transform: none;
|
||||
-webkit-transform: none !important;
|
||||
-moz-transform: none !important;
|
||||
-ms-transform: none !important;
|
||||
transform: none !important;
|
||||
}
|
||||
.reveal section {
|
||||
page-break-after: always !important;
|
||||
@@ -161,6 +161,9 @@ ul, ol, div, p {
|
||||
.reveal section .fragment {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
.reveal section:last-of-type {
|
||||
page-break-after: avoid !important;
|
||||
}
|
||||
.reveal section img {
|
||||
display: block;
|
||||
margin: 15px 0px;
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: 22pt;
|
||||
font-size: 18pt;
|
||||
width: auto;
|
||||
height: auto;
|
||||
border: 0;
|
||||
@@ -23,7 +23,7 @@ body {
|
||||
padding: 0;
|
||||
float: none !important;
|
||||
overflow: visible;
|
||||
background: #333;
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
html {
|
||||
@@ -35,19 +35,19 @@ html {
|
||||
/* SECTION 2: Remove any elements not needed in print.
|
||||
This would include navigation, ads, sidebars, etc. */
|
||||
.nestedarrow,
|
||||
.controls a,
|
||||
.controls,
|
||||
.reveal .progress,
|
||||
.reveal.overview,
|
||||
.fork-reveal,
|
||||
.share-reveal,
|
||||
.state-background {
|
||||
display:none;
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* SECTION 3: Set body font face, size, and color.
|
||||
Consider using a serif font for readability. */
|
||||
body, p, td, li, div, a {
|
||||
font-size: 22pt;
|
||||
body, p, td, li, div {
|
||||
font-size: 18pt;
|
||||
}
|
||||
|
||||
/* SECTION 4: Set heading font face, sizes, and color.
|
||||
@@ -102,36 +102,33 @@ ul, ol, div, p {
|
||||
-ms-perspective-origin: 50% 50%;
|
||||
perspective-origin: 50% 50%;
|
||||
}
|
||||
.reveal .slides>section, .reveal .slides>section>section,
|
||||
.reveal .slides>section.past, .reveal .slides>section.future,
|
||||
.reveal.linear .slides>section, .reveal.linear .slides>section>section,
|
||||
.reveal.linear .slides>section.past, .reveal.linear .slides>section.future {
|
||||
.reveal .slides>section, .reveal .slides>section>section {
|
||||
|
||||
visibility: visible;
|
||||
position: static;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
min-height: initial;
|
||||
display: block;
|
||||
overflow: visible;
|
||||
visibility: visible !important;
|
||||
position: static !important;
|
||||
width: 100% !important;
|
||||
height: auto !important;
|
||||
min-height: initial !important;
|
||||
display: block !important;
|
||||
overflow: visible !important;
|
||||
|
||||
left: 0%;
|
||||
top: 0%;
|
||||
margin-left: 0px;
|
||||
margin-top: 50px;
|
||||
padding: 20px 0px;
|
||||
left: 0% !important;
|
||||
top: 0% !important;
|
||||
margin-left: 0px !important;
|
||||
margin-top: 50px !important;
|
||||
padding: 20px 0px !important;
|
||||
|
||||
opacity: 1;
|
||||
opacity: 1 !important;
|
||||
|
||||
-webkit-transform-style: flat;
|
||||
-moz-transform-style: flat;
|
||||
-ms-transform-style: flat;
|
||||
transform-style: flat;
|
||||
-webkit-transform-style: flat !important;
|
||||
-moz-transform-style: flat !important;
|
||||
-ms-transform-style: flat !important;
|
||||
transform-style: flat !important;
|
||||
|
||||
-webkit-transform: none;
|
||||
-moz-transform: none;
|
||||
-ms-transform: none;
|
||||
transform: none;
|
||||
-webkit-transform: none !important;
|
||||
-moz-transform: none !important;
|
||||
-ms-transform: none !important;
|
||||
transform: none !important;
|
||||
}
|
||||
.reveal section {
|
||||
page-break-after: always !important;
|
||||
@@ -155,4 +152,8 @@ ul, ol, div, p {
|
||||
|
||||
.reveal small a {
|
||||
font-size: 16pt !important;
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
font-size: 9pt !important;
|
||||
}
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/**
|
||||
/*!
|
||||
* reveal.js
|
||||
* http://lab.hakim.se/reveal-js
|
||||
* MIT licensed
|
||||
*
|
||||
*
|
||||
* Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
|
||||
*/
|
||||
|
||||
@@ -13,19 +13,19 @@
|
||||
* RESET STYLES
|
||||
*********************************************/
|
||||
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
b, u, i, center,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, embed,
|
||||
figure, figcaption, footer, header, hgroup,
|
||||
menu, nav, output, ruby, section, summary,
|
||||
time, mark, audio, video {
|
||||
html, body, .reveal div, .reveal span, .reveal applet, .reveal object, .reveal iframe,
|
||||
.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6, .reveal p, .reveal blockquote, .reveal pre,
|
||||
.reveal a, .reveal abbr, .reveal acronym, .reveal address, .reveal big, .reveal cite, .reveal code,
|
||||
.reveal del, .reveal dfn, .reveal em, .reveal img, .reveal ins, .reveal kbd, .reveal q, .reveal s, .reveal samp,
|
||||
.reveal small, .reveal strike, .reveal strong, .reveal sub, .reveal sup, .reveal tt, .reveal var,
|
||||
.reveal b, .reveal u, .reveal i, .reveal center,
|
||||
.reveal dl, .reveal dt, .reveal dd, .reveal ol, .reveal ul, .reveal li,
|
||||
.reveal fieldset, .reveal form, .reveal label, .reveal legend,
|
||||
.reveal table, .reveal caption, .reveal tbody, .reveal tfoot, .reveal thead, .reveal tr, .reveal th, .reveal td,
|
||||
.reveal article, .reveal aside, .reveal canvas, .reveal details, .reveal embed,
|
||||
.reveal figure, .reveal figcaption, .reveal footer, .reveal header, .reveal hgroup,
|
||||
.reveal menu, .reveal nav, .reveal output, .reveal ruby, .reveal section, .reveal summary,
|
||||
.reveal time, .reveal mark, .reveal audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
@@ -34,8 +34,8 @@ time, mark, audio, video {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, section {
|
||||
.reveal article, .reveal aside, .reveal details, .reveal figcaption, .reveal figure,
|
||||
.reveal footer, .reveal header, .reveal hgroup, .reveal menu, .reveal nav, .reveal section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@@ -44,10 +44,8 @@ footer, header, hgroup, menu, nav, section {
|
||||
* GLOBAL STYLES
|
||||
*********************************************/
|
||||
|
||||
html,
|
||||
html,
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 600px;
|
||||
@@ -59,16 +57,16 @@ body {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 900px) {
|
||||
body {
|
||||
font-size: 30px;
|
||||
}
|
||||
::selection {
|
||||
background:#FF5E99;
|
||||
color:#fff;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background:#FF5E99;
|
||||
color:#fff;
|
||||
text-shadow: none;
|
||||
@media screen and (max-width: 900px) {
|
||||
.reveal {
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
@@ -98,6 +96,69 @@ body {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.reveal .slides section .fragment.grow {
|
||||
opacity: 1;
|
||||
}
|
||||
.reveal .slides section .fragment.grow.visible {
|
||||
-webkit-transform: scale( 1.3 );
|
||||
-moz-transform: scale( 1.3 );
|
||||
-ms-transform: scale( 1.3 );
|
||||
-o-transform: scale( 1.3 );
|
||||
transform: scale( 1.3 );
|
||||
}
|
||||
|
||||
.reveal .slides section .fragment.shrink {
|
||||
opacity: 1;
|
||||
}
|
||||
.reveal .slides section .fragment.shrink.visible {
|
||||
-webkit-transform: scale( 0.7 );
|
||||
-moz-transform: scale( 0.7 );
|
||||
-ms-transform: scale( 0.7 );
|
||||
-o-transform: scale( 0.7 );
|
||||
transform: scale( 0.7 );
|
||||
}
|
||||
|
||||
.reveal .slides section .fragment.roll-in {
|
||||
opacity: 0;
|
||||
|
||||
-webkit-transform: rotateX( 90deg );
|
||||
-moz-transform: rotateX( 90deg );
|
||||
-ms-transform: rotateX( 90deg );
|
||||
-o-transform: rotateX( 90deg );
|
||||
transform: rotateX( 90deg );
|
||||
}
|
||||
.reveal .slides section .fragment.roll-in.visible {
|
||||
opacity: 1;
|
||||
|
||||
-webkit-transform: rotateX( 0 );
|
||||
-moz-transform: rotateX( 0 );
|
||||
-ms-transform: rotateX( 0 );
|
||||
-o-transform: rotateX( 0 );
|
||||
transform: rotateX( 0 );
|
||||
}
|
||||
|
||||
.reveal .slides section .fragment.fade-out {
|
||||
opacity: 1;
|
||||
}
|
||||
.reveal .slides section .fragment.fade-out.visible {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.reveal .slides section .fragment.highlight-red,
|
||||
.reveal .slides section .fragment.highlight-green,
|
||||
.reveal .slides section .fragment.highlight-blue {
|
||||
opacity: 1;
|
||||
}
|
||||
.reveal .slides section .fragment.highlight-red.visible {
|
||||
color: #ff2c2d
|
||||
}
|
||||
.reveal .slides section .fragment.highlight-green.visible {
|
||||
color: #17ff2e;
|
||||
}
|
||||
.reveal .slides section .fragment.highlight-blue.visible {
|
||||
color: #1b91ff;
|
||||
}
|
||||
|
||||
|
||||
/*********************************************
|
||||
* DEFAULT ELEMENT STYLES
|
||||
@@ -112,19 +173,19 @@ body {
|
||||
/* preserve aspect ratio and scale image so it's bound within the section */
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.reveal strong,
|
||||
.reveal strong,
|
||||
.reveal b {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.reveal em,
|
||||
.reveal em,
|
||||
.reveal i {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.reveal ol,
|
||||
.reveal ol,
|
||||
.reveal ul {
|
||||
display: inline-block;
|
||||
|
||||
@@ -172,33 +233,33 @@ body {
|
||||
width: 70%;
|
||||
margin: 5px 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:before {
|
||||
content: '“';
|
||||
content: '\201C';
|
||||
}
|
||||
.reveal blockquote:after {
|
||||
content: '”';
|
||||
content: '\201D';
|
||||
}
|
||||
|
||||
.reveal q {
|
||||
.reveal q {
|
||||
font-style: italic;
|
||||
}
|
||||
.reveal q:before {
|
||||
content: '“';
|
||||
content: '\201C';
|
||||
}
|
||||
.reveal q:after {
|
||||
content: '”';
|
||||
content: '\201D';
|
||||
}
|
||||
|
||||
.reveal pre {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 90%;
|
||||
margin: 10px auto;
|
||||
margin: 15px auto;
|
||||
|
||||
text-align: left;
|
||||
font-size: 0.55em;
|
||||
@@ -209,13 +270,17 @@ body {
|
||||
|
||||
box-shadow: 0px 0px 6px rgba(0,0,0,0.3);
|
||||
}
|
||||
.reveal pre code {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.reveal code {
|
||||
font-family: monospace;
|
||||
overflow-x: auto;
|
||||
overflow: auto;
|
||||
max-height: 400px;
|
||||
}
|
||||
|
||||
.reveal table th,
|
||||
.reveal table th,
|
||||
.reveal table td {
|
||||
text-align: left;
|
||||
padding-right: .3em;
|
||||
@@ -225,10 +290,10 @@ body {
|
||||
text-shadow: rgb(255,255,255) 1px 1px 2px;
|
||||
}
|
||||
|
||||
.reveal sup {
|
||||
.reveal sup {
|
||||
vertical-align: super;
|
||||
}
|
||||
.reveal sub {
|
||||
.reveal sub {
|
||||
vertical-align: sub;
|
||||
}
|
||||
|
||||
@@ -251,44 +316,65 @@ body {
|
||||
.reveal .controls {
|
||||
display: none;
|
||||
position: fixed;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
z-index: 30;
|
||||
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
}
|
||||
|
||||
.reveal .controls a {
|
||||
font-family: Arial;
|
||||
font-size: 0.83em;
|
||||
position: absolute;
|
||||
opacity: 0.1;
|
||||
}
|
||||
.reveal .controls a.enabled {
|
||||
opacity: 0.6;
|
||||
}
|
||||
.reveal .controls a.enabled:active {
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.reveal .controls .left {
|
||||
top: 30px;
|
||||
}
|
||||
.reveal .controls div {
|
||||
position: absolute;
|
||||
opacity: 0.1;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: 12px solid transparent;
|
||||
|
||||
.reveal .controls .right {
|
||||
left: 60px;
|
||||
top: 30px;
|
||||
}
|
||||
-webkit-transition: opacity 0.2s ease;
|
||||
-moz-transition: opacity 0.2s ease;
|
||||
-ms-transition: opacity 0.2s ease;
|
||||
-o-transition: opacity 0.2s ease;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.reveal .controls .up {
|
||||
left: 30px;
|
||||
}
|
||||
.reveal .controls div.enabled {
|
||||
opacity: 0.6;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.reveal .controls .down {
|
||||
left: 30px;
|
||||
top: 60px;
|
||||
}
|
||||
.reveal .controls div.enabled:active {
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.reveal .controls div.left {
|
||||
top: 42px;
|
||||
|
||||
border-right-width: 22px;
|
||||
border-right-color: #eee;
|
||||
}
|
||||
|
||||
.reveal .controls div.right {
|
||||
left: 74px;
|
||||
top: 42px;
|
||||
|
||||
border-left-width: 22px;
|
||||
border-left-color: #eee;
|
||||
}
|
||||
|
||||
.reveal .controls div.up {
|
||||
left: 42px;
|
||||
|
||||
border-bottom-width: 22px;
|
||||
border-bottom-color: #eee;
|
||||
}
|
||||
|
||||
.reveal .controls div.down {
|
||||
left: 42px;
|
||||
top: 74px;
|
||||
|
||||
border-top-width: 22px;
|
||||
border-top-color: #eee;
|
||||
}
|
||||
|
||||
|
||||
/*********************************************
|
||||
@@ -302,8 +388,16 @@ body {
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.reveal .progress:after {
|
||||
content: '';
|
||||
display: 'block';
|
||||
position: absolute;
|
||||
height: 20px;
|
||||
width: 100%;
|
||||
top: -20px;
|
||||
}
|
||||
.reveal .progress span {
|
||||
display: block;
|
||||
height: 100%;
|
||||
@@ -316,6 +410,7 @@ body {
|
||||
transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
|
||||
}
|
||||
|
||||
|
||||
/*********************************************
|
||||
* ROLLING LINKS
|
||||
*********************************************/
|
||||
@@ -410,7 +505,8 @@ body {
|
||||
margin-top: -320px;
|
||||
padding: 20px 0px;
|
||||
overflow: visible;
|
||||
|
||||
z-index: 1;
|
||||
|
||||
text-align: center;
|
||||
|
||||
-webkit-transition: -webkit-perspective .4s ease;
|
||||
@@ -418,7 +514,7 @@ body {
|
||||
-ms-transition: -ms-perspective .4s ease;
|
||||
-o-transition: -o-perspective .4s ease;
|
||||
transition: perspective .4s ease;
|
||||
|
||||
|
||||
-webkit-perspective: 600px;
|
||||
-moz-perspective: 600px;
|
||||
-ms-perspective: 600px;
|
||||
@@ -438,12 +534,12 @@ body {
|
||||
min-height: 600px;
|
||||
|
||||
z-index: 10;
|
||||
|
||||
|
||||
-webkit-transform-style: preserve-3d;
|
||||
-moz-transform-style: preserve-3d;
|
||||
-ms-transform-style: preserve-3d;
|
||||
transform-style: preserve-3d;
|
||||
|
||||
|
||||
-webkit-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
|
||||
-moz-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
|
||||
-ms-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
|
||||
@@ -469,7 +565,7 @@ body {
|
||||
.reveal .slides>section.past {
|
||||
display: block;
|
||||
opacity: 0;
|
||||
|
||||
|
||||
-webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
|
||||
-moz-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
|
||||
-ms-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
|
||||
@@ -478,7 +574,7 @@ body {
|
||||
.reveal .slides>section.future {
|
||||
display: block;
|
||||
opacity: 0;
|
||||
|
||||
|
||||
-webkit-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
|
||||
-moz-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
|
||||
-ms-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
|
||||
@@ -488,7 +584,7 @@ body {
|
||||
.reveal .slides>section>section.past {
|
||||
display: block;
|
||||
opacity: 0;
|
||||
|
||||
|
||||
-webkit-transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0);
|
||||
-moz-transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0);
|
||||
-ms-transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0);
|
||||
@@ -497,7 +593,7 @@ body {
|
||||
.reveal .slides>section>section.future {
|
||||
display: block;
|
||||
opacity: 0;
|
||||
|
||||
|
||||
-webkit-transform: translate3d(0, 50%, 0) rotateX(-70deg) translate3d(0, 50%, 0);
|
||||
-moz-transform: translate3d(0, 50%, 0) rotateX(-70deg) translate3d(0, 50%, 0);
|
||||
-ms-transform: translate3d(0, 50%, 0) rotateX(-70deg) translate3d(0, 50%, 0);
|
||||
@@ -536,6 +632,56 @@ body {
|
||||
}
|
||||
|
||||
|
||||
/*********************************************
|
||||
* ZOOM TRANSITION
|
||||
*********************************************/
|
||||
|
||||
.reveal.zoom .slides>section,
|
||||
.reveal.zoom .slides>section>section {
|
||||
-webkit-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
|
||||
-moz-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
|
||||
-ms-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
|
||||
-o-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
|
||||
transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
|
||||
}
|
||||
|
||||
.reveal.zoom .slides>section.past {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
|
||||
-webkit-transform: scale(16);
|
||||
-moz-transform: scale(16);
|
||||
-ms-transform: scale(16);
|
||||
-o-transform: scale(16);
|
||||
transform: scale(16);
|
||||
}
|
||||
.reveal.zoom .slides>section.future {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
|
||||
-webkit-transform: scale(0.2);
|
||||
-moz-transform: scale(0.2);
|
||||
-ms-transform: scale(0.2);
|
||||
-o-transform: scale(0.2);
|
||||
transform: scale(0.2);
|
||||
}
|
||||
|
||||
.reveal.zoom .slides>section>section.past {
|
||||
-webkit-transform: translate(0, -150%);
|
||||
-moz-transform: translate(0, -150%);
|
||||
-ms-transform: translate(0, -150%);
|
||||
-o-transform: translate(0, -150%);
|
||||
transform: translate(0, -150%);
|
||||
}
|
||||
.reveal.zoom .slides>section>section.future {
|
||||
-webkit-transform: translate(0, 150%);
|
||||
-moz-transform: translate(0, 150%);
|
||||
-ms-transform: translate(0, 150%);
|
||||
-o-transform: translate(0, 150%);
|
||||
transform: translate(0, 150%);
|
||||
}
|
||||
|
||||
|
||||
/*********************************************
|
||||
* LINEAR TRANSITION
|
||||
*********************************************/
|
||||
@@ -570,17 +716,16 @@ body {
|
||||
transform: translate(0, 150%);
|
||||
}
|
||||
|
||||
|
||||
/*********************************************
|
||||
* BOX TRANSITION
|
||||
* CUBE TRANSITION
|
||||
*********************************************/
|
||||
|
||||
.reveal.cube .slides {
|
||||
margin-top: -350px;
|
||||
|
||||
-webkit-perspective-origin: 50% 25%;
|
||||
-moz-perspective-origin: 50% 25%;
|
||||
-ms-perspective-origin: 50% 25%;
|
||||
perspective-origin: 50% 25%;
|
||||
-webkit-perspective-origin: 0% 25%;
|
||||
-moz-perspective-origin: 0% 25%;
|
||||
-ms-perspective-origin: 0% 25%;
|
||||
perspective-origin: 0% 25%;
|
||||
|
||||
-webkit-perspective: 1300px;
|
||||
-moz-perspective: 1300px;
|
||||
@@ -595,7 +740,7 @@ body {
|
||||
-moz-backface-visibility: hidden;
|
||||
-ms-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
|
||||
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
@@ -608,7 +753,7 @@ body {
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background: #232628;
|
||||
background: rgba(0,0,0,0.1);
|
||||
border-radius: 4px;
|
||||
|
||||
-webkit-transform: translateZ( -20px );
|
||||
@@ -697,12 +842,10 @@ body {
|
||||
*********************************************/
|
||||
|
||||
.reveal.page .slides {
|
||||
margin-top: -350px;
|
||||
|
||||
-webkit-perspective-origin: 50% 50%;
|
||||
-moz-perspective-origin: 50% 50%;
|
||||
-ms-perspective-origin: 50% 50%;
|
||||
perspective-origin: 50% 50%;
|
||||
-webkit-perspective-origin: 0% 50%;
|
||||
-moz-perspective-origin: 0% 50%;
|
||||
-ms-perspective-origin: 0% 50%;
|
||||
perspective-origin: 0% 50%;
|
||||
|
||||
-webkit-perspective: 3000px;
|
||||
-moz-perspective: 3000px;
|
||||
@@ -728,7 +871,7 @@ body {
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background: rgba(0,0,0,0.2);
|
||||
background: rgba(0,0,0,0.1);
|
||||
|
||||
-webkit-transform: translateZ( -20px );
|
||||
-moz-transform: translateZ( -20px );
|
||||
@@ -807,6 +950,75 @@ body {
|
||||
}
|
||||
|
||||
|
||||
/*********************************************
|
||||
* TILE-FLIP TRANSITION (CSS shader)
|
||||
*********************************************/
|
||||
|
||||
.reveal.tileflip .slides section.present {
|
||||
-webkit-transform: none;
|
||||
-webkit-transition-duration: 800ms;
|
||||
|
||||
-webkit-filter: custom( url(shaders/tile-flip.vs) mix(url(shaders/tile-flip.fs) multiply source-atop), 10 10 border-box detached, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg),
|
||||
amount 0, randomness 0, flipAxis 0 1 0, tileOutline 1
|
||||
);
|
||||
}
|
||||
|
||||
.reveal.tileflip .slides section.past {
|
||||
-webkit-transform: none;
|
||||
-webkit-transition-duration: 800ms;
|
||||
|
||||
-webkit-filter: custom( url(shaders/tile-flip.vs) mix(url(shaders/tile-flip.fs) multiply source-atop), 10 10 border-box detached, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg),
|
||||
amount 1, randomness 0, flipAxis 0 1 0, tileOutline 1
|
||||
);
|
||||
}
|
||||
|
||||
.reveal.tileflip .slides section.future {
|
||||
-webkit-transform: none;
|
||||
-webkit-transition-duration: 800ms;
|
||||
|
||||
-webkit-filter: custom( url(shaders/tile-flip.vs) mix(url(shaders/tile-flip.fs) multiply source-atop), 10 10 border-box detached, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg),
|
||||
amount 1, randomness 0, flipAxis 0 1 0, tileOutline 1
|
||||
);
|
||||
}
|
||||
|
||||
.reveal.tileflip .slides>section>section.present {
|
||||
-webkit-filter: custom( url(shaders/tile-flip.vs) mix(url(shaders/tile-flip.fs) multiply source-atop), 10 10 border-box detached, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg),
|
||||
amount 0, randomness 2, flipAxis 1 0 0, tileOutline 1
|
||||
);
|
||||
}
|
||||
|
||||
.reveal.tileflip .slides>section>section.past {
|
||||
-webkit-filter: custom( url(shaders/tile-flip.vs) mix(url(shaders/tile-flip.fs) multiply source-atop), 10 10 border-box detached, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg),
|
||||
amount 1, randomness 2, flipAxis 1 0 0, tileOutline 1
|
||||
);
|
||||
}
|
||||
|
||||
.reveal.tileflip .slides>section>section.future {
|
||||
-webkit-filter: custom( url(shaders/tile-flip.vs) mix(url(shaders/tile-flip.fs) multiply source-atop), 10 10 border-box detached, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg),
|
||||
amount 1, randomness 2, flipAxis 1 0 0, tileOutline 1
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
/*********************************************
|
||||
* NO TRANSITION
|
||||
*********************************************/
|
||||
|
||||
.reveal.none .slides section {
|
||||
-webkit-transform: none;
|
||||
-moz-transform: none;
|
||||
-ms-transform: none;
|
||||
-o-transform: none;
|
||||
transform: none;
|
||||
|
||||
-webkit-transition: none;
|
||||
-moz-transition: none;
|
||||
-ms-transition: none;
|
||||
-o-transition: none;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
|
||||
/*********************************************
|
||||
* OVERVIEW
|
||||
*********************************************/
|
||||
@@ -821,8 +1033,9 @@ body {
|
||||
.reveal.overview .slides section {
|
||||
padding: 20px 0;
|
||||
max-height: 600px;
|
||||
overflow: hidden;
|
||||
opacity: 1;
|
||||
overflow: hidden;
|
||||
opacity: 1!important;
|
||||
visibility: visible!important;
|
||||
cursor: pointer;
|
||||
background: rgba(0,0,0,0.1);
|
||||
}
|
||||
@@ -851,6 +1064,33 @@ body {
|
||||
}
|
||||
|
||||
|
||||
/*********************************************
|
||||
* PAUSED MODE
|
||||
*********************************************/
|
||||
|
||||
.reveal .pause-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: black;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
z-index: 100;
|
||||
|
||||
-webkit-transition: all 1s ease;
|
||||
-moz-transition: all 1s ease;
|
||||
-ms-transition: all 1s ease;
|
||||
-o-transition: all 1s ease;
|
||||
transition: all 1s ease;
|
||||
}
|
||||
.reveal.paused .pause-overlay {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
/*********************************************
|
||||
* FALLBACK
|
||||
*********************************************/
|
||||
@@ -875,10 +1115,10 @@ body {
|
||||
|
||||
|
||||
/*********************************************
|
||||
* DEFAULT STATES
|
||||
* BACKGROUND STATES
|
||||
*********************************************/
|
||||
|
||||
.state-background {
|
||||
.reveal .state-background {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@@ -890,13 +1130,13 @@ body {
|
||||
-o-transition: background 800ms ease;
|
||||
transition: background 800ms ease;
|
||||
}
|
||||
.alert .state-background {
|
||||
.alert .reveal .state-background {
|
||||
background: rgba( 200, 50, 30, 0.6 );
|
||||
}
|
||||
.soothe .state-background {
|
||||
.soothe .reveal .state-background {
|
||||
background: rgba( 50, 200, 90, 0.4 );
|
||||
}
|
||||
.blackout .state-background {
|
||||
.blackout .reveal .state-background {
|
||||
background: rgba( 0, 0, 0, 0.6 );
|
||||
}
|
||||
|
||||
@@ -909,3 +1149,36 @@ body {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
/*********************************************
|
||||
* ZOOM PLUGIN
|
||||
*********************************************/
|
||||
|
||||
.zoomed .reveal *,
|
||||
.zoomed .reveal *:before,
|
||||
.zoomed .reveal *:after {
|
||||
-webkit-transform: none !important;
|
||||
-moz-transform: none !important;
|
||||
-ms-transform: none !important;
|
||||
transform: none !important;
|
||||
|
||||
-webkit-backface-visibility: visible !important;
|
||||
-moz-backface-visibility: visible !important;
|
||||
-ms-backface-visibility: visible !important;
|
||||
backface-visibility: visible !important;
|
||||
}
|
||||
|
||||
.zoomed .reveal .progress,
|
||||
.zoomed .reveal .controls {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.zoomed .reveal .roll span {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.zoomed .reveal .roll span:after {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
|
||||
64
css/shaders/tile-flip.fs
Normal file
64
css/shaders/tile-flip.fs
Normal file
@@ -0,0 +1,64 @@
|
||||
/*
|
||||
* Copyright (c) 2012 Adobe Systems Incorporated. All rights reserved.
|
||||
* Copyright (c) 2012 Branislav Ulicny
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
precision mediump float;
|
||||
|
||||
// Uniform values from CSS
|
||||
|
||||
uniform float amount;
|
||||
uniform float tileOutline;
|
||||
|
||||
// Built-in uniforms
|
||||
|
||||
uniform vec2 u_meshSize;
|
||||
uniform vec2 u_textureSize;
|
||||
|
||||
// Varyings passed in from vertex shader
|
||||
|
||||
varying float v_depth;
|
||||
varying vec2 v_uv;
|
||||
|
||||
// Main
|
||||
|
||||
void main()
|
||||
{
|
||||
// FIXME: Must swap x and y as a workaround for:
|
||||
// https://bugs.webkit.org/show_bug.cgi?id=96285
|
||||
vec2 u_meshSize = u_meshSize.yx;
|
||||
|
||||
vec4 c = vec4(1.0);
|
||||
|
||||
// Fade out.
|
||||
c.a = 1.0 - v_depth;
|
||||
|
||||
// Show grid outline.
|
||||
if (tileOutline >= 0.5) {
|
||||
float cell_width = u_textureSize.x / u_meshSize.y;
|
||||
float cell_height = u_textureSize.y / u_meshSize.x;
|
||||
float dd = 1.0;
|
||||
|
||||
if (mod(v_uv.x * u_textureSize.x + dd, cell_width) < 2.0
|
||||
|| mod(v_uv.y * u_textureSize.y + dd, cell_height) < 2.0) {
|
||||
if (amount > 0.0)
|
||||
c.rgb = vec3(1.0 - sqrt(amount));
|
||||
}
|
||||
}
|
||||
css_ColorMatrix = mat4(c.r, 0.0, 0.0, 0.0,
|
||||
0.0, c.g, 0.0, 0.0,
|
||||
0.0, 0.0, c.b, 0.0,
|
||||
0.0, 0.0, 0.0, c.a);
|
||||
}
|
||||
141
css/shaders/tile-flip.vs
Normal file
141
css/shaders/tile-flip.vs
Normal file
@@ -0,0 +1,141 @@
|
||||
/*
|
||||
* Copyright (c)2012 Adobe Systems Incorporated. All rights reserved.
|
||||
* Copyright (c)2012 Branislav Ulicny
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
precision mediump float;
|
||||
|
||||
// Built-in attributes
|
||||
|
||||
attribute vec4 a_position;
|
||||
attribute vec2 a_texCoord;
|
||||
attribute vec3 a_triangleCoord;
|
||||
|
||||
// Built-in uniforms
|
||||
|
||||
uniform mat4 u_projectionMatrix;
|
||||
uniform vec2 u_meshSize;
|
||||
uniform vec2 u_textureSize;
|
||||
|
||||
// Uniform passed in from CSS
|
||||
|
||||
uniform mat4 transform;
|
||||
uniform float amount;
|
||||
uniform float randomness;
|
||||
uniform vec3 flipAxis;
|
||||
|
||||
// Varyings
|
||||
|
||||
varying float v_depth;
|
||||
varying vec2 v_uv;
|
||||
|
||||
// Constants
|
||||
|
||||
const float PI2 = 1.5707963267948966;
|
||||
|
||||
// Create perspective matrix
|
||||
|
||||
mat4 perspectiveMatrix(float p)
|
||||
{
|
||||
float perspective = - 1.0 / p;
|
||||
return mat4(
|
||||
1.0, 0.0, 0.0, 0.0,
|
||||
0.0, 1.0, 0.0, 0.0,
|
||||
0.0, 0.0, 1.0, perspective,
|
||||
0.0, 0.0, 0.0, 1.0
|
||||
);
|
||||
}
|
||||
|
||||
// Rotate vector
|
||||
|
||||
vec3 rotateVectorByQuaternion(vec3 v, vec4 q)
|
||||
{
|
||||
vec3 dest = vec3(0.0);
|
||||
|
||||
float x = v.x, y = v.y, z = v.z;
|
||||
float qx = q.x, qy = q.y, qz = q.z, qw = q.w;
|
||||
|
||||
// Calculate quaternion * vector.
|
||||
|
||||
float ix = qw * x + qy * z - qz * y,
|
||||
iy = qw * y + qz * x - qx * z,
|
||||
iz = qw * z + qx * y - qy * x,
|
||||
iw = -qx * x - qy * y - qz * z;
|
||||
|
||||
// Calculate result * inverse quaternion.
|
||||
|
||||
dest.x = ix * qw + iw * -qx + iy * -qz - iz * -qy;
|
||||
dest.y = iy * qw + iw * -qy + iz * -qx - ix * -qz;
|
||||
dest.z = iz * qw + iw * -qz + ix * -qy - iy * -qx;
|
||||
|
||||
return dest;
|
||||
}
|
||||
|
||||
// Convert rotation.
|
||||
|
||||
vec4 axisAngleToQuaternion(vec3 axis, float angle)
|
||||
{
|
||||
vec4 dest = vec4(0.0);
|
||||
|
||||
float halfAngle = angle / 2.0;
|
||||
float s = sin(halfAngle);
|
||||
|
||||
dest.x = axis.x * s;
|
||||
dest.y = axis.y * s;
|
||||
dest.z = axis.z * s;
|
||||
dest.w = cos(halfAngle);
|
||||
|
||||
return dest;
|
||||
}
|
||||
|
||||
// Random function based on the tile coordinate.
|
||||
// This will return the same value for all the vertices in the same tile (i.e. two triangles).
|
||||
|
||||
float random(vec2 scale)
|
||||
{
|
||||
// Use the fragment position as a different seed per-pixel.
|
||||
return fract(sin(dot(vec2(a_triangleCoord.x, a_triangleCoord.y), scale)) * 4000.0);
|
||||
}
|
||||
|
||||
// Main
|
||||
|
||||
void main()
|
||||
{
|
||||
// FIXME: We must swap x and y as a workaround for:
|
||||
// https://bugs.webkit.org/show_bug.cgi?id=96285
|
||||
vec2 u_meshSize = u_meshSize.yx;
|
||||
|
||||
vec4 pos = a_position;
|
||||
float aspect = u_textureSize.x / u_textureSize.y;
|
||||
|
||||
float cx = a_triangleCoord.x / u_meshSize.y - 0.5 + 0.5 / u_meshSize.y;
|
||||
float cy = a_triangleCoord.y / u_meshSize.x - 0.5 + 0.5 / u_meshSize.x;
|
||||
|
||||
vec3 centroid = vec3(cx, cy, 0.0);
|
||||
float r = random(vec2(10.0, 80.0));
|
||||
float rr = mix(0.0, PI2, amount * (1.0 + randomness * r));
|
||||
|
||||
vec4 rotation = vec4(flipAxis, rr);
|
||||
vec4 qRotation = axisAngleToQuaternion(normalize(rotation.xyz), rotation.w);
|
||||
|
||||
vec3 newPosition = rotateVectorByQuaternion((pos.xyz - centroid)* vec3(aspect, 1., 1.0), qRotation) * vec3(1.0 / aspect, 1.0, 1.0) + centroid;
|
||||
pos.xyz = newPosition;
|
||||
|
||||
gl_Position = u_projectionMatrix * transform * pos;
|
||||
|
||||
// Pass varyings to the fragment shader.
|
||||
v_depth = abs(rr)/ PI2;
|
||||
v_uv = a_texCoord;
|
||||
}
|
||||
5
css/theme/README.md
Normal file
5
css/theme/README.md
Normal file
@@ -0,0 +1,5 @@
|
||||
Themes are written using Sass to keep things modular and reduce the need for repeated selectors across files. Find out how to install Sass here http://sass-lang.com/, once Sass is installed run the follwing command to start monitoring the source files for changes.
|
||||
|
||||
```
|
||||
sass --watch css/theme/source/:css/theme --style expanded
|
||||
```
|
||||
@@ -1,179 +1,163 @@
|
||||
@import url(http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
|
||||
/**
|
||||
* A beige theme for reveal.js presentations, similar
|
||||
* to the default theme.
|
||||
* Beige theme for reveal.js.
|
||||
*
|
||||
* Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
|
||||
*/
|
||||
|
||||
/*********************************************
|
||||
* FONT-FACE DEFINITIONS
|
||||
*********************************************/
|
||||
|
||||
@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;
|
||||
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 {
|
||||
font-family: 'Lato', Times, 'Times New Roman', serif;
|
||||
font-size: 36px;
|
||||
font-weight: 200;
|
||||
letter-spacing: -0.02em;
|
||||
color: #333;
|
||||
|
||||
background: #f7f3de;
|
||||
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(247,242,211,1) 100%);
|
||||
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(247,242,211,1)));
|
||||
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(247,242,211,1) 100%);
|
||||
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(247,242,211,1) 100%);
|
||||
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(247,242,211,1) 100%);
|
||||
background: radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(247,242,211,1) 100%);
|
||||
background: #f7f2d3;
|
||||
background: -moz-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
|
||||
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, white), color-stop(100%, #f7f2d3));
|
||||
background: -webkit-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
|
||||
background: -o-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
|
||||
background: -ms-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
|
||||
background: radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
|
||||
background-color: #f7f3de;
|
||||
}
|
||||
|
||||
::-moz-selection {
|
||||
background:rgba(79, 64, 28, 0.99);
|
||||
color: white;
|
||||
}
|
||||
::-webkit-selection {
|
||||
background:rgba(79, 64, 28, 0.99);
|
||||
color: white;
|
||||
.reveal {
|
||||
font-family: "Lato", Times, "Times New Roman", serif;
|
||||
font-size: 36px;
|
||||
font-weight: 200;
|
||||
letter-spacing: -0.02em;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background:rgba(79, 64, 28, 0.99);
|
||||
color: white;
|
||||
color: white;
|
||||
background: rgba(79, 64, 28, 0.99);
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
|
||||
/*********************************************
|
||||
* HEADERS
|
||||
*********************************************/
|
||||
|
||||
.reveal h1,
|
||||
.reveal h2,
|
||||
.reveal h3,
|
||||
.reveal h4,
|
||||
.reveal h5,
|
||||
.reveal h1,
|
||||
.reveal h2,
|
||||
.reveal h3,
|
||||
.reveal h4,
|
||||
.reveal h5,
|
||||
.reveal h6 {
|
||||
margin: 0 0 20px 0;
|
||||
color: #333;
|
||||
font-family: 'League Gothic', Impact, sans-serif;
|
||||
line-height: 0.9em;
|
||||
letter-spacing: 0.02em;
|
||||
|
||||
text-transform: uppercase;
|
||||
margin: 0 0 20px 0;
|
||||
color: #333333;
|
||||
font-family: "League Gothic", Impact, sans-serif;
|
||||
line-height: 0.9em;
|
||||
letter-spacing: 0.02em;
|
||||
text-transform: uppercase;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.reveal h1 {
|
||||
text-shadow: 0 1px 0 #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);
|
||||
text-shadow: 0 1px 0 #cccccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbbbbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaaaaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 20px 20px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
|
||||
/*********************************************
|
||||
* LINKS
|
||||
*********************************************/
|
||||
|
||||
.reveal a:not(.image) {
|
||||
color: #8b743d;
|
||||
text-decoration: none;
|
||||
|
||||
-webkit-transition: color .15s ease;
|
||||
-moz-transition: color .15s ease;
|
||||
-ms-transition: color .15s ease;
|
||||
-o-transition: color .15s ease;
|
||||
transition: color .15s ease;
|
||||
color: #8b743d;
|
||||
text-decoration: none;
|
||||
-webkit-transition: color .15s ease;
|
||||
-moz-transition: color .15s ease;
|
||||
-ms-transition: color .15s ease;
|
||||
-o-transition: color .15s ease;
|
||||
transition: color .15s ease;
|
||||
}
|
||||
|
||||
.reveal a:not(.image):hover {
|
||||
color: #c0a86e;
|
||||
text-shadow: none;
|
||||
border: none;
|
||||
}
|
||||
.reveal a:not(.image):hover {
|
||||
text-shadow: none;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.reveal .roll span:after {
|
||||
color: #fff;
|
||||
background: #8b743d;
|
||||
color: #fff;
|
||||
background: #564826;
|
||||
}
|
||||
|
||||
|
||||
/*********************************************
|
||||
* IMAGES
|
||||
*********************************************/
|
||||
|
||||
.reveal section img {
|
||||
margin: 30px 0 0 0;
|
||||
background: rgba(255,255,255,0.12);
|
||||
border: 4px solid #eee;
|
||||
|
||||
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
|
||||
-moz-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;
|
||||
-ms-transition: all .2s linear;
|
||||
-o-transition: all .2s linear;
|
||||
transition: all .2s linear;
|
||||
margin: 15px;
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
border: 4px solid #333333;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
|
||||
-webkit-transition: all .2s linear;
|
||||
-moz-transition: all .2s linear;
|
||||
-ms-transition: all .2s linear;
|
||||
-o-transition: all .2s linear;
|
||||
transition: all .2s linear;
|
||||
}
|
||||
|
||||
.reveal a:hover img {
|
||||
background: rgba(255,255,255,0.2);
|
||||
border-color: #8b743d;
|
||||
|
||||
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
|
||||
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
|
||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
|
||||
}
|
||||
|
||||
.reveal a:hover img {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-color: #8b743d;
|
||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* NAVIGATION CONTROLS
|
||||
*********************************************/
|
||||
|
||||
.reveal .controls a {
|
||||
color: #fff;
|
||||
.reveal .controls div.left,
|
||||
.reveal .controls div.left.enabled {
|
||||
border-right-color: #8b743d;
|
||||
}
|
||||
.reveal .controls a.enabled {
|
||||
color: #8b743d;
|
||||
text-shadow: 0px 0px 2px hsla(185, 45%, 70%, 0.3);
|
||||
}
|
||||
|
||||
.reveal .controls div.right,
|
||||
.reveal .controls div.right.enabled {
|
||||
border-left-color: #8b743d;
|
||||
}
|
||||
|
||||
.reveal .controls div.up,
|
||||
.reveal .controls div.up.enabled {
|
||||
border-bottom-color: #8b743d;
|
||||
}
|
||||
|
||||
.reveal .controls div.down,
|
||||
.reveal .controls div.down.enabled {
|
||||
border-top-color: #8b743d;
|
||||
}
|
||||
|
||||
.reveal .controls div.left.enabled:hover {
|
||||
border-right-color: #c0a86e;
|
||||
}
|
||||
|
||||
.reveal .controls div.right.enabled:hover {
|
||||
border-left-color: #c0a86e;
|
||||
}
|
||||
|
||||
.reveal .controls div.up.enabled:hover {
|
||||
border-bottom-color: #c0a86e;
|
||||
}
|
||||
|
||||
.reveal .controls div.down.enabled:hover {
|
||||
border-top-color: #c0a86e;
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* PROGRESS BAR
|
||||
*********************************************/
|
||||
|
||||
.reveal .progress {
|
||||
background: rgba(0,0,0,0.2);
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.reveal .progress span {
|
||||
background: #8b743d;
|
||||
|
||||
-webkit-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
|
||||
-moz-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
|
||||
-ms-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
|
||||
-o-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
|
||||
transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
|
||||
}
|
||||
|
||||
|
||||
.reveal .progress span {
|
||||
background: #8b743d;
|
||||
-webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
|
||||
-moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
|
||||
-ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
|
||||
-o-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
|
||||
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
|
||||
}
|
||||
|
||||
@@ -1,169 +1,163 @@
|
||||
@import url(http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
|
||||
/**
|
||||
* The default theme for reveal.js presentations.
|
||||
* Default theme for reveal.js.
|
||||
*
|
||||
* Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
|
||||
*/
|
||||
|
||||
/*********************************************
|
||||
* FONT-FACE DEFINITIONS
|
||||
*********************************************/
|
||||
|
||||
@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;
|
||||
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 {
|
||||
font-family: 'Lato', Times, 'Times New Roman', serif;
|
||||
font-size: 36px;
|
||||
font-weight: 200;
|
||||
letter-spacing: -0.02em;
|
||||
color: #eee;
|
||||
|
||||
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiM1NTVhNWYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMWMxZTIwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
|
||||
background-color: #2b2b2b;
|
||||
background: -moz-radial-gradient(center, ellipse cover, rgba(85,90,95,1) 0%, rgba(28,30,32,1) 100%);
|
||||
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(85,90,95,1)), color-stop(100%,rgba(28,30,32,1)));
|
||||
background: -webkit-radial-gradient(center, ellipse cover, rgba(85,90,95,1) 0%,rgba(28,30,32,1) 100%);
|
||||
background: -o-radial-gradient(center, ellipse cover, rgba(85,90,95,1) 0%,rgba(28,30,32,1) 100%);
|
||||
background: -ms-radial-gradient(center, ellipse cover, rgba(85,90,95,1) 0%,rgba(28,30,32,1) 100%);
|
||||
background: radial-gradient(center, ellipse cover, rgba(85,90,95,1) 0%,rgba(28,30,32,1) 100%);
|
||||
background: #1c1e20;
|
||||
background: -moz-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
|
||||
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #555a5f), color-stop(100%, #1c1e20));
|
||||
background: -webkit-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
|
||||
background: -o-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
|
||||
background: -ms-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
|
||||
background: radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
|
||||
background-color: #2b2b2b;
|
||||
}
|
||||
|
||||
.reveal {
|
||||
font-family: "Lato", Times, "Times New Roman", serif;
|
||||
font-size: 36px;
|
||||
font-weight: 200;
|
||||
letter-spacing: -0.02em;
|
||||
color: #eeeeee;
|
||||
}
|
||||
|
||||
::selection {
|
||||
color: white;
|
||||
background: #ff5e99;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* HEADERS
|
||||
*********************************************/
|
||||
|
||||
.reveal h1,
|
||||
.reveal h2,
|
||||
.reveal h3,
|
||||
.reveal h4,
|
||||
.reveal h5,
|
||||
.reveal 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;
|
||||
line-height: 0.9em;
|
||||
letter-spacing: 0.02em;
|
||||
|
||||
text-transform: uppercase;
|
||||
text-shadow: 0px 0px 6px rgba(0,0,0,0.2);
|
||||
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 #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);
|
||||
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: hsl(185, 85%, 50%);
|
||||
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;
|
||||
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 a:not(.image):hover {
|
||||
color: hsl(185, 85%, 70%);
|
||||
|
||||
text-shadow: none;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.reveal .roll span:after {
|
||||
color: #fff;
|
||||
background: hsl(185, 60%, 35%);
|
||||
color: #fff;
|
||||
background: #0d99a5;
|
||||
}
|
||||
|
||||
|
||||
/*********************************************
|
||||
* IMAGES
|
||||
*********************************************/
|
||||
|
||||
.reveal section img {
|
||||
margin: 30px 0 0 0;
|
||||
background: rgba(255,255,255,0.12);
|
||||
border: 4px solid #eee;
|
||||
|
||||
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
|
||||
-moz-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;
|
||||
-ms-transition: all .2s linear;
|
||||
-o-transition: all .2s linear;
|
||||
transition: all .2s linear;
|
||||
margin: 15px;
|
||||
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;
|
||||
|
||||
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
|
||||
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
|
||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
|
||||
}
|
||||
|
||||
.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 a {
|
||||
color: #fff;
|
||||
.reveal .controls div.left,
|
||||
.reveal .controls div.left.enabled {
|
||||
border-right-color: #13daec;
|
||||
}
|
||||
.reveal .controls a.enabled {
|
||||
color: hsl(185, 85%, 70%);
|
||||
text-shadow: 0px 0px 2px hsla(185, 45%, 70%, 0.3);
|
||||
}
|
||||
|
||||
.reveal .controls div.right,
|
||||
.reveal .controls div.right.enabled {
|
||||
border-left-color: #13daec;
|
||||
}
|
||||
|
||||
.reveal .controls div.up,
|
||||
.reveal .controls div.up.enabled {
|
||||
border-bottom-color: #13daec;
|
||||
}
|
||||
|
||||
.reveal .controls div.down,
|
||||
.reveal .controls div.down.enabled {
|
||||
border-top-color: #13daec;
|
||||
}
|
||||
|
||||
.reveal .controls div.left.enabled:hover {
|
||||
border-right-color: #71e9f4;
|
||||
}
|
||||
|
||||
.reveal .controls div.right.enabled:hover {
|
||||
border-left-color: #71e9f4;
|
||||
}
|
||||
|
||||
.reveal .controls div.up.enabled:hover {
|
||||
border-bottom-color: #71e9f4;
|
||||
}
|
||||
|
||||
.reveal .controls div.down.enabled:hover {
|
||||
border-top-color: #71e9f4;
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* PROGRESS BAR
|
||||
*********************************************/
|
||||
|
||||
.reveal .progress {
|
||||
background: rgba(0,0,0,0.2);
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.reveal .progress span {
|
||||
background: hsl(185, 85%, 50%);
|
||||
|
||||
-webkit-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
|
||||
-moz-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
|
||||
-ms-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
|
||||
-o-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
|
||||
transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
|
||||
}
|
||||
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
150
css/theme/serif.css
Normal file
150
css/theme/serif.css
Normal file
@@ -0,0 +1,150 @@
|
||||
/**
|
||||
* A simple theme for reveal.js presentations, similar
|
||||
* to the default theme. The accent color is darkblue.
|
||||
*
|
||||
* This theme is Copyright (C) 2012 Owen Versteeg, https://github.com/StereotypicalApps. It is MIT licensed.
|
||||
* reveal.js is Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se; so is the theme - beige.css - that this is based off of.
|
||||
*/
|
||||
/*********************************************
|
||||
* GLOBAL STYLES
|
||||
*********************************************/
|
||||
body {
|
||||
background: #f0f1eb;
|
||||
background-color: #f0f1eb;
|
||||
}
|
||||
|
||||
.reveal {
|
||||
font-family: "Palatino Linotype", "Book Antiqua", Palatino, FreeSerif, serif;
|
||||
font-size: 36px;
|
||||
font-weight: 200;
|
||||
letter-spacing: -0.02em;
|
||||
color: black;
|
||||
}
|
||||
|
||||
::selection {
|
||||
color: white;
|
||||
background: #26351c;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* HEADERS
|
||||
*********************************************/
|
||||
.reveal h1,
|
||||
.reveal h2,
|
||||
.reveal h3,
|
||||
.reveal h4,
|
||||
.reveal h5,
|
||||
.reveal h6 {
|
||||
margin: 0 0 20px 0;
|
||||
color: #383d3d;
|
||||
font-family: "Palatino Linotype", "Book Antiqua", Palatino, FreeSerif, serif;
|
||||
line-height: 0.9em;
|
||||
letter-spacing: 0.02em;
|
||||
text-transform: none;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.reveal h1 {
|
||||
text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* LINKS
|
||||
*********************************************/
|
||||
.reveal a:not(.image) {
|
||||
color: #51483d;
|
||||
text-decoration: none;
|
||||
-webkit-transition: color .15s ease;
|
||||
-moz-transition: color .15s ease;
|
||||
-ms-transition: color .15s ease;
|
||||
-o-transition: color .15s ease;
|
||||
transition: color .15s ease;
|
||||
}
|
||||
|
||||
.reveal a:not(.image):hover {
|
||||
color: #8b7c69;
|
||||
text-shadow: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.reveal .roll span:after {
|
||||
color: #fff;
|
||||
background: #25211c;
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* IMAGES
|
||||
*********************************************/
|
||||
.reveal section img {
|
||||
margin: 15px;
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
border: 4px solid black;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
|
||||
-webkit-transition: all .2s linear;
|
||||
-moz-transition: all .2s linear;
|
||||
-ms-transition: all .2s linear;
|
||||
-o-transition: all .2s linear;
|
||||
transition: all .2s linear;
|
||||
}
|
||||
|
||||
.reveal a:hover img {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-color: #51483d;
|
||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* NAVIGATION CONTROLS
|
||||
*********************************************/
|
||||
.reveal .controls div.left,
|
||||
.reveal .controls div.left.enabled {
|
||||
border-right-color: #51483d;
|
||||
}
|
||||
|
||||
.reveal .controls div.right,
|
||||
.reveal .controls div.right.enabled {
|
||||
border-left-color: #51483d;
|
||||
}
|
||||
|
||||
.reveal .controls div.up,
|
||||
.reveal .controls div.up.enabled {
|
||||
border-bottom-color: #51483d;
|
||||
}
|
||||
|
||||
.reveal .controls div.down,
|
||||
.reveal .controls div.down.enabled {
|
||||
border-top-color: #51483d;
|
||||
}
|
||||
|
||||
.reveal .controls div.left.enabled:hover {
|
||||
border-right-color: #8b7c69;
|
||||
}
|
||||
|
||||
.reveal .controls div.right.enabled:hover {
|
||||
border-left-color: #8b7c69;
|
||||
}
|
||||
|
||||
.reveal .controls div.up.enabled:hover {
|
||||
border-bottom-color: #8b7c69;
|
||||
}
|
||||
|
||||
.reveal .controls div.down.enabled:hover {
|
||||
border-top-color: #8b7c69;
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* PROGRESS BAR
|
||||
*********************************************/
|
||||
.reveal .progress {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.reveal .progress span {
|
||||
background: #51483d;
|
||||
-webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
|
||||
-moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
|
||||
-ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
|
||||
-o-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
|
||||
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
|
||||
}
|
||||
@@ -1,150 +1,152 @@
|
||||
@import url(http://fonts.googleapis.com/css?family=News+Cycle:400,700);
|
||||
@import url(http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
|
||||
/**
|
||||
* A simple theme for reveal.js presentations, similar
|
||||
* to the default theme. The accent color is darkblue;
|
||||
* do a find-replace to change it.
|
||||
* to the default theme. The accent color is darkblue.
|
||||
*
|
||||
* This theme is Copyright (C) 2012 Owen Versteeg, https://github.com/StereotypicalApps. It is MIT licensed.
|
||||
* reveal.js is Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se; so is the theme - beige.css - that this is based off of.
|
||||
* reveal.js is Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
|
||||
*/
|
||||
|
||||
/*********************************************
|
||||
* FONT-FACE DEFINITIONS
|
||||
*********************************************/
|
||||
|
||||
@import url(http://fonts.googleapis.com/css?family=News+Cycle:400,700);
|
||||
|
||||
|
||||
/*********************************************
|
||||
* GLOBAL STYLES
|
||||
*********************************************/
|
||||
|
||||
body {
|
||||
font-family: 'Lato', Times, 'Times New Roman', serif;
|
||||
font-size: 36px;
|
||||
font-weight: 200;
|
||||
letter-spacing: -0.02em;
|
||||
color: black !important;
|
||||
|
||||
background: white;
|
||||
background: white;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
::-moz-selection {
|
||||
background:rgba(0, 0, 0, 0.99);
|
||||
color: white;
|
||||
}
|
||||
::-webkit-selection {
|
||||
background:rgba(0, 0, 0, 0.99);
|
||||
color: white;
|
||||
.reveal {
|
||||
font-family: "Lato", Times, "Times New Roman", serif;
|
||||
font-size: 36px;
|
||||
font-weight: 200;
|
||||
letter-spacing: -0.02em;
|
||||
color: black;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background:rgba(0, 0, 0, 0.99);
|
||||
color: white;
|
||||
color: white;
|
||||
background: rgba(0, 0, 0, 0.99);
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* HEADERS
|
||||
*********************************************/
|
||||
|
||||
.reveal h1,
|
||||
.reveal h2,
|
||||
.reveal h3,
|
||||
.reveal h4,
|
||||
.reveal h5,
|
||||
.reveal h1,
|
||||
.reveal h2,
|
||||
.reveal h3,
|
||||
.reveal h4,
|
||||
.reveal h5,
|
||||
.reveal h6 {
|
||||
margin: 0 0 20px 0;
|
||||
color: black;
|
||||
font-family: 'News Cycle', Impact, sans-serif;
|
||||
line-height: 0.9em;
|
||||
|
||||
text-transform: uppercase;
|
||||
margin: 0 0 20px 0;
|
||||
color: black;
|
||||
font-family: "News Cycle", Impact, sans-serif;
|
||||
line-height: 0.9em;
|
||||
letter-spacing: 0.02em;
|
||||
text-transform: none;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.reveal h1 {
|
||||
text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* LINKS
|
||||
*********************************************/
|
||||
|
||||
.reveal a:not(.image) {
|
||||
color: darkblue;
|
||||
text-decoration: none;
|
||||
|
||||
-webkit-transition: color .15s ease;
|
||||
-moz-transition: color .15s ease;
|
||||
-ms-transition: color .15s ease;
|
||||
-o-transition: color .15s ease;
|
||||
transition: color .15s ease;
|
||||
color: darkblue;
|
||||
text-decoration: none;
|
||||
-webkit-transition: color .15s ease;
|
||||
-moz-transition: color .15s ease;
|
||||
-ms-transition: color .15s ease;
|
||||
-o-transition: color .15s ease;
|
||||
transition: color .15s ease;
|
||||
}
|
||||
|
||||
.reveal a:not(.image):hover {
|
||||
color: #0000f1;
|
||||
text-shadow: none;
|
||||
border: none;
|
||||
}
|
||||
.reveal a:not(.image):hover {
|
||||
text-shadow: none;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.reveal .roll span:after {
|
||||
color: #fff;
|
||||
background: darkblue;
|
||||
color: #fff;
|
||||
background: #00003f;
|
||||
}
|
||||
|
||||
|
||||
/*********************************************
|
||||
* IMAGES
|
||||
*********************************************/
|
||||
|
||||
.reveal section img {
|
||||
margin: 30px 0 0 0;
|
||||
background: rgba(255,255,255,0.12);
|
||||
border: 4px solid #eee;
|
||||
|
||||
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
|
||||
-moz-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;
|
||||
-ms-transition: all .2s linear;
|
||||
-o-transition: all .2s linear;
|
||||
transition: all .2s linear;
|
||||
margin: 15px;
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
border: 4px solid black;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
|
||||
-webkit-transition: all .2s linear;
|
||||
-moz-transition: all .2s linear;
|
||||
-ms-transition: all .2s linear;
|
||||
-o-transition: all .2s linear;
|
||||
transition: all .2s linear;
|
||||
}
|
||||
|
||||
.reveal a:hover img {
|
||||
background: rgba(255,255,255,0.2);
|
||||
border-color: darkblue;
|
||||
|
||||
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
|
||||
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
|
||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
|
||||
}
|
||||
|
||||
.reveal a:hover img {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-color: darkblue;
|
||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* NAVIGATION CONTROLS
|
||||
*********************************************/
|
||||
|
||||
.reveal .controls a {
|
||||
color: black;
|
||||
.reveal .controls div.left,
|
||||
.reveal .controls div.left.enabled {
|
||||
border-right-color: darkblue;
|
||||
}
|
||||
.reveal .controls a.enabled {
|
||||
color: darkblue;
|
||||
opacity: 1;
|
||||
text-shadow: 0px 0px 2px hsla(185, 45%, 70%, 0.3);
|
||||
}
|
||||
|
||||
.reveal .controls div.right,
|
||||
.reveal .controls div.right.enabled {
|
||||
border-left-color: darkblue;
|
||||
}
|
||||
|
||||
.reveal .controls div.up,
|
||||
.reveal .controls div.up.enabled {
|
||||
border-bottom-color: darkblue;
|
||||
}
|
||||
|
||||
.reveal .controls div.down,
|
||||
.reveal .controls div.down.enabled {
|
||||
border-top-color: darkblue;
|
||||
}
|
||||
|
||||
.reveal .controls div.left.enabled:hover {
|
||||
border-right-color: #0000f1;
|
||||
}
|
||||
|
||||
.reveal .controls div.right.enabled:hover {
|
||||
border-left-color: #0000f1;
|
||||
}
|
||||
|
||||
.reveal .controls div.up.enabled:hover {
|
||||
border-bottom-color: #0000f1;
|
||||
}
|
||||
|
||||
.reveal .controls div.down.enabled:hover {
|
||||
border-top-color: #0000f1;
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* PROGRESS BAR
|
||||
*********************************************/
|
||||
|
||||
.reveal .progress {
|
||||
background: rgba(0,0,0,0.2);
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.reveal .progress span {
|
||||
background: darkblue;
|
||||
|
||||
-webkit-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
|
||||
-moz-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
|
||||
-ms-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
|
||||
-o-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
|
||||
transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
|
||||
}
|
||||
|
||||
|
||||
.reveal .progress span {
|
||||
background: darkblue;
|
||||
-webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
|
||||
-moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
|
||||
-ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
|
||||
-o-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
|
||||
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
|
||||
}
|
||||
|
||||
@@ -1,165 +1,156 @@
|
||||
@import url(http://fonts.googleapis.com/css?family=Quicksand:400,700,400italic,700italic);
|
||||
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700);
|
||||
/**
|
||||
* Sky theme for reveal.js presentations.
|
||||
* Sky theme for reveal.js.
|
||||
*
|
||||
* Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
|
||||
*/
|
||||
|
||||
/*********************************************
|
||||
* FONT-FACE DEFINITIONS
|
||||
*********************************************/
|
||||
|
||||
@import url(http://fonts.googleapis.com/css?family=Quicksand:400,700,400italic,700italic);
|
||||
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700);
|
||||
|
||||
|
||||
|
||||
/*********************************************
|
||||
* GLOBAL STYLES
|
||||
*********************************************/
|
||||
|
||||
body {
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-size: 36px;
|
||||
font-weight: 200;
|
||||
letter-spacing: -0.02em;
|
||||
color: #333;
|
||||
|
||||
background: #f7fbfc;
|
||||
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmN2ZiZmMiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYWRkOWU0IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
|
||||
background: -moz-radial-gradient(center, ellipse cover, #f7fbfc 0%, #add9e4 100%);
|
||||
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#f7fbfc), color-stop(100%,#add9e4));
|
||||
background: -webkit-radial-gradient(center, ellipse cover, #f7fbfc 0%,#add9e4 100%);
|
||||
background: -o-radial-gradient(center, ellipse cover, #f7fbfc 0%,#add9e4 100%);
|
||||
background: -ms-radial-gradient(center, ellipse cover, #f7fbfc 0%,#add9e4 100%);
|
||||
background: radial-gradient(ellipse at center, #f7fbfc 0%,#add9e4 100%);
|
||||
background: #add9e4;
|
||||
background: -moz-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%);
|
||||
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #f7fbfc), color-stop(100%, #add9e4));
|
||||
background: -webkit-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%);
|
||||
background: -o-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%);
|
||||
background: -ms-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%);
|
||||
background: radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%);
|
||||
background-color: #f7fbfc;
|
||||
}
|
||||
|
||||
::-moz-selection {
|
||||
background:rgba(79, 64, 28, 0.99);
|
||||
color: white;
|
||||
}
|
||||
::-webkit-selection {
|
||||
background:rgba(79, 64, 28, 0.99);
|
||||
color: white;
|
||||
.reveal {
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-size: 36px;
|
||||
font-weight: 200;
|
||||
letter-spacing: -0.02em;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background:rgba(79, 64, 28, 0.99);
|
||||
color: white;
|
||||
color: white;
|
||||
background: #134674;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
|
||||
/*********************************************
|
||||
* HEADERS
|
||||
*********************************************/
|
||||
|
||||
.reveal h1,
|
||||
.reveal h2,
|
||||
.reveal h3,
|
||||
.reveal h4,
|
||||
.reveal h5,
|
||||
.reveal h1,
|
||||
.reveal h2,
|
||||
.reveal h3,
|
||||
.reveal h4,
|
||||
.reveal h5,
|
||||
.reveal h6 {
|
||||
margin: 0 0 20px 0;
|
||||
color: #333;
|
||||
font-family: 'Quicksand', sans-serif;
|
||||
line-height: 0.9em;
|
||||
letter-spacing: -0.08em;
|
||||
|
||||
text-transform: uppercase;
|
||||
margin: 0 0 20px 0;
|
||||
color: #333333;
|
||||
font-family: "Quicksand", sans-serif;
|
||||
line-height: 0.9em;
|
||||
letter-spacing: -0.08em;
|
||||
text-transform: uppercase;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.reveal h1 {
|
||||
text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* LINKS
|
||||
*********************************************/
|
||||
|
||||
.reveal a:not(.image) {
|
||||
color: #3b759e;
|
||||
text-decoration: none;
|
||||
|
||||
-webkit-transition: color .15s ease;
|
||||
-moz-transition: color .15s ease;
|
||||
-ms-transition: color .15s ease;
|
||||
-o-transition: color .15s ease;
|
||||
transition: color .15s ease;
|
||||
color: #3b759e;
|
||||
text-decoration: none;
|
||||
-webkit-transition: color .15s ease;
|
||||
-moz-transition: color .15s ease;
|
||||
-ms-transition: color .15s ease;
|
||||
-o-transition: color .15s ease;
|
||||
transition: color .15s ease;
|
||||
}
|
||||
|
||||
.reveal a:not(.image):hover {
|
||||
color: #74a7cb;
|
||||
text-shadow: none;
|
||||
border: none;
|
||||
}
|
||||
.reveal a:not(.image):hover {
|
||||
text-shadow: none;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.reveal .roll span:after {
|
||||
color: #fff;
|
||||
background: #3b759e;
|
||||
color: #fff;
|
||||
background: #264c66;
|
||||
}
|
||||
|
||||
|
||||
/*********************************************
|
||||
* MISC
|
||||
* IMAGES
|
||||
*********************************************/
|
||||
|
||||
.reveal section img {
|
||||
margin: 30px 0 0 0;
|
||||
background: rgba(255,255,255,0.12);
|
||||
border: 1px solid #ddd;
|
||||
|
||||
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
|
||||
-moz-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;
|
||||
-ms-transition: all .2s linear;
|
||||
-o-transition: all .2s linear;
|
||||
transition: all .2s linear;
|
||||
margin: 15px;
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
border: 4px solid #333333;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
|
||||
-webkit-transition: all .2s linear;
|
||||
-moz-transition: all .2s linear;
|
||||
-ms-transition: all .2s linear;
|
||||
-o-transition: all .2s linear;
|
||||
transition: all .2s linear;
|
||||
}
|
||||
|
||||
.reveal a:hover img {
|
||||
background: rgba(255,255,255,0.2);
|
||||
border-color: #3b759e;
|
||||
|
||||
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
|
||||
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
|
||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
|
||||
}
|
||||
|
||||
.reveal blockquote {
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
.reveal a:hover img {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-color: #3b759e;
|
||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
|
||||
}
|
||||
|
||||
.reveal p {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
|
||||
/*********************************************
|
||||
* NAVIGATION CONTROLS
|
||||
*********************************************/
|
||||
|
||||
.reveal .controls a {
|
||||
color: #fff;
|
||||
.reveal .controls div.left,
|
||||
.reveal .controls div.left.enabled {
|
||||
border-right-color: #3b759e;
|
||||
}
|
||||
.reveal .controls a.enabled {
|
||||
color: #3b759e;
|
||||
text-shadow: 0px 0px 2px hsla(185, 45%, 70%, 0.3);
|
||||
}
|
||||
|
||||
.reveal .controls div.right,
|
||||
.reveal .controls div.right.enabled {
|
||||
border-left-color: #3b759e;
|
||||
}
|
||||
|
||||
.reveal .controls div.up,
|
||||
.reveal .controls div.up.enabled {
|
||||
border-bottom-color: #3b759e;
|
||||
}
|
||||
|
||||
.reveal .controls div.down,
|
||||
.reveal .controls div.down.enabled {
|
||||
border-top-color: #3b759e;
|
||||
}
|
||||
|
||||
.reveal .controls div.left.enabled:hover {
|
||||
border-right-color: #74a7cb;
|
||||
}
|
||||
|
||||
.reveal .controls div.right.enabled:hover {
|
||||
border-left-color: #74a7cb;
|
||||
}
|
||||
|
||||
.reveal .controls div.up.enabled:hover {
|
||||
border-bottom-color: #74a7cb;
|
||||
}
|
||||
|
||||
.reveal .controls div.down.enabled:hover {
|
||||
border-top-color: #74a7cb;
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* PROGRESS BAR
|
||||
*********************************************/
|
||||
|
||||
.reveal .progress {
|
||||
background: rgba(0,0,0,0.2);
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.reveal .progress span {
|
||||
background: #3b759e;
|
||||
|
||||
-webkit-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
|
||||
-moz-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
|
||||
-ms-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
|
||||
-o-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
|
||||
transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
|
||||
}
|
||||
|
||||
|
||||
.reveal .progress span {
|
||||
background: #3b759e;
|
||||
-webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
|
||||
-moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
|
||||
-ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
|
||||
-o-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
|
||||
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
|
||||
}
|
||||
|
||||
50
css/theme/source/beige.scss
Normal file
50
css/theme/source/beige.scss
Normal file
@@ -0,0 +1,50 @@
|
||||
/**
|
||||
* Beige theme for reveal.js.
|
||||
*
|
||||
* Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
|
||||
*/
|
||||
|
||||
|
||||
// Default mixins and settings -----------------
|
||||
@import "../template/mixins";
|
||||
@import "../template/settings";
|
||||
// ---------------------------------------------
|
||||
|
||||
|
||||
|
||||
// Include theme-specific fonts
|
||||
@font-face {
|
||||
font-family: 'League Gothic';
|
||||
src: url('../../lib/font/league_gothic-webfont.eot');
|
||||
src: url('../../lib/font/league_gothic-webfont.eot?#iefix') format('embedded-opentype'),
|
||||
url('../../lib/font/league_gothic-webfont.woff') format('woff'),
|
||||
url('../../lib/font/league_gothic-webfont.ttf') format('truetype'),
|
||||
url('../../lib/font/league_gothic-webfont.svg#LeagueGothicRegular') format('svg');
|
||||
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@import url(http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
|
||||
|
||||
|
||||
// Override theme settings (see ../template/settings.scss)
|
||||
$mainColor: #333;
|
||||
$headingColor: #333;
|
||||
$headingTextShadow: none;
|
||||
$backgroundColor: #f7f3de;
|
||||
$linkColor: #8b743d;
|
||||
$linkColorHover: lighten( $linkColor, 20% );
|
||||
$selectionBackgroundColor: rgba(79, 64, 28, 0.99);
|
||||
$heading1TextShadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 20px 20px rgba(0,0,0,.15);
|
||||
|
||||
// Background generator
|
||||
@mixin bodyBackground() {
|
||||
@include radial-gradient( rgba(247,242,211,1), rgba(255,255,255,1) );
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Theme template ------------------------------
|
||||
@import "../template/theme";
|
||||
// ---------------------------------------------
|
||||
42
css/theme/source/default.scss
Normal file
42
css/theme/source/default.scss
Normal file
@@ -0,0 +1,42 @@
|
||||
/**
|
||||
* Default theme for reveal.js.
|
||||
*
|
||||
* Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
|
||||
*/
|
||||
|
||||
|
||||
// Default mixins and settings -----------------
|
||||
@import "../template/mixins";
|
||||
@import "../template/settings";
|
||||
// ---------------------------------------------
|
||||
|
||||
|
||||
|
||||
// Include theme-specific fonts
|
||||
@font-face {
|
||||
font-family: 'League Gothic';
|
||||
src: url('../../lib/font/league_gothic-webfont.eot');
|
||||
src: url('../../lib/font/league_gothic-webfont.eot?#iefix') format('embedded-opentype'),
|
||||
url('../../lib/font/league_gothic-webfont.woff') format('woff'),
|
||||
url('../../lib/font/league_gothic-webfont.ttf') format('truetype'),
|
||||
url('../../lib/font/league_gothic-webfont.svg#LeagueGothicRegular') format('svg');
|
||||
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@import url(http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
|
||||
|
||||
// Override theme settings (see ../template/settings.scss)
|
||||
$heading1TextShadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 20px 20px rgba(0,0,0,.15);
|
||||
|
||||
// Background generator
|
||||
@mixin bodyBackground() {
|
||||
@include radial-gradient( rgba(28,30,32,1), rgba(85,90,95,1) );
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Theme template ------------------------------
|
||||
@import "../template/theme";
|
||||
// ---------------------------------------------
|
||||
33
css/theme/source/serif.scss
Normal file
33
css/theme/source/serif.scss
Normal file
@@ -0,0 +1,33 @@
|
||||
/**
|
||||
* A simple theme for reveal.js presentations, similar
|
||||
* to the default theme. The accent color is darkblue.
|
||||
*
|
||||
* This theme is Copyright (C) 2012 Owen Versteeg, https://github.com/StereotypicalApps. It is MIT licensed.
|
||||
* reveal.js is Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se; so is the theme - beige.css - that this is based off of.
|
||||
*/
|
||||
|
||||
|
||||
// Default mixins and settings -----------------
|
||||
@import "../template/mixins";
|
||||
@import "../template/settings";
|
||||
// ---------------------------------------------
|
||||
|
||||
|
||||
|
||||
// Override theme settings (see ../template/settings.scss)
|
||||
$mainFont: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif;
|
||||
$mainColor: #000;
|
||||
$headingFont: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif;
|
||||
$headingColor: #383D3D;
|
||||
$headingTextShadow: none;
|
||||
$headingTextTransform: none;
|
||||
$backgroundColor: #F0F1EB;
|
||||
$linkColor: #51483D;
|
||||
$linkColorHover: lighten( $linkColor, 20% );
|
||||
$selectionBackgroundColor: #26351C;
|
||||
|
||||
|
||||
|
||||
// Theme template ------------------------------
|
||||
@import "../template/theme";
|
||||
// ---------------------------------------------
|
||||
38
css/theme/source/simple.scss
Normal file
38
css/theme/source/simple.scss
Normal file
@@ -0,0 +1,38 @@
|
||||
/**
|
||||
* A simple theme for reveal.js presentations, similar
|
||||
* to the default theme. The accent color is darkblue.
|
||||
*
|
||||
* This theme is Copyright (C) 2012 Owen Versteeg, https://github.com/StereotypicalApps. It is MIT licensed.
|
||||
* reveal.js is Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
|
||||
*/
|
||||
|
||||
|
||||
// Default mixins and settings -----------------
|
||||
@import "../template/mixins";
|
||||
@import "../template/settings";
|
||||
// ---------------------------------------------
|
||||
|
||||
|
||||
|
||||
// Include theme-specific fonts
|
||||
@import url(http://fonts.googleapis.com/css?family=News+Cycle:400,700);
|
||||
@import url(http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
|
||||
|
||||
|
||||
// Override theme settings (see ../template/settings.scss)
|
||||
$mainFont: 'Lato', Times, 'Times New Roman', serif;
|
||||
$mainColor: #000;
|
||||
$headingFont: 'News Cycle', Impact, sans-serif;
|
||||
$headingColor: #000;
|
||||
$headingTextShadow: none;
|
||||
$headingTextTransform: none;
|
||||
$backgroundColor: #fff;
|
||||
$linkColor: #00008B;
|
||||
$linkColorHover: lighten( $linkColor, 20% );
|
||||
$selectionBackgroundColor: rgba(0, 0, 0, 0.99);
|
||||
|
||||
|
||||
|
||||
// Theme template ------------------------------
|
||||
@import "../template/theme";
|
||||
// ---------------------------------------------
|
||||
41
css/theme/source/sky.scss
Normal file
41
css/theme/source/sky.scss
Normal file
@@ -0,0 +1,41 @@
|
||||
/**
|
||||
* Sky theme for reveal.js.
|
||||
*
|
||||
* Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
|
||||
*/
|
||||
|
||||
|
||||
// Default mixins and settings -----------------
|
||||
@import "../template/mixins";
|
||||
@import "../template/settings";
|
||||
// ---------------------------------------------
|
||||
|
||||
|
||||
|
||||
// Include theme-specific fonts
|
||||
@import url(http://fonts.googleapis.com/css?family=Quicksand:400,700,400italic,700italic);
|
||||
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700);
|
||||
|
||||
|
||||
// Override theme settings (see ../template/settings.scss)
|
||||
$mainFont: 'Open Sans', sans-serif;
|
||||
$mainColor: #333;
|
||||
$headingFont: 'Quicksand', sans-serif;
|
||||
$headingColor: #333;
|
||||
$headingLetterSpacing: -0.08em;
|
||||
$headingTextShadow: none;
|
||||
$backgroundColor: #f7fbfc;
|
||||
$linkColor: #3b759e;
|
||||
$linkColorHover: lighten( $linkColor, 20% );
|
||||
$selectionBackgroundColor: #134674;
|
||||
|
||||
// Background generator
|
||||
@mixin bodyBackground() {
|
||||
@include radial-gradient( #add9e4, #f7fbfc );
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Theme template ------------------------------
|
||||
@import "../template/theme";
|
||||
// ---------------------------------------------
|
||||
29
css/theme/template/mixins.scss
Normal file
29
css/theme/template/mixins.scss
Normal file
@@ -0,0 +1,29 @@
|
||||
@mixin vertical-gradient( $top, $bottom ) {
|
||||
background: $top;
|
||||
background: -moz-linear-gradient( top, $top 0%, $bottom 100% );
|
||||
background: -webkit-gradient( linear, left top, left bottom, color-stop(0%,$top), color-stop(100%,$bottom) );
|
||||
background: -webkit-linear-gradient( top, $top 0%, $bottom 100% );
|
||||
background: -o-linear-gradient( top, $top 0%, $bottom 100% );
|
||||
background: -ms-linear-gradient( top, $top 0%, $bottom 100% );
|
||||
background: linear-gradient( top, $top 0%, $bottom 100% );
|
||||
}
|
||||
|
||||
@mixin horizontal-gradient( $top, $bottom ) {
|
||||
background: $top;
|
||||
background: -moz-linear-gradient( left, $top 0%, $bottom 100% );
|
||||
background: -webkit-gradient( linear, left top, right top, color-stop(0%,$top), color-stop(100%,$bottom) );
|
||||
background: -webkit-linear-gradient( left, $top 0%, $bottom 100% );
|
||||
background: -o-linear-gradient( left, $top 0%, $bottom 100% );
|
||||
background: -ms-linear-gradient( left, $top 0%, $bottom 100% );
|
||||
background: linear-gradient( left, $top 0%, $bottom 100% );
|
||||
}
|
||||
|
||||
@mixin radial-gradient( $outer, $inner, $type: circle ) {
|
||||
background: $outer;
|
||||
background: -moz-radial-gradient( center, $type cover, $inner 0%, $outer 100% );
|
||||
background: -webkit-gradient( radial, center center, 0px, center center, 100%, color-stop(0%,$inner), color-stop(100%,$outer) );
|
||||
background: -webkit-radial-gradient( center, $type cover, $inner 0%, $outer 100% );
|
||||
background: -o-radial-gradient( center, $type cover, $inner 0%, $outer 100% );
|
||||
background: -ms-radial-gradient( center, $type cover, $inner 0%, $outer 100% );
|
||||
background: radial-gradient( center, $type cover, $inner 0%, $outer 100% );
|
||||
}
|
||||
33
css/theme/template/settings.scss
Normal file
33
css/theme/template/settings.scss
Normal file
@@ -0,0 +1,33 @@
|
||||
// Base settings for all themes that can optionally be
|
||||
// overridden by the super-theme
|
||||
|
||||
// Background of the presentation
|
||||
$backgroundColor: #2b2b2b;
|
||||
|
||||
// Primary/body text
|
||||
$mainFont: 'Lato', Times, 'Times New Roman', serif;
|
||||
$mainFontSize: 36px;
|
||||
$mainColor: #eee;
|
||||
|
||||
// Headings
|
||||
$headingFont: 'League Gothic', Impact, sans-serif;
|
||||
$headingColor: #eee;
|
||||
$headingLineHeight: 0.9em;
|
||||
$headingLetterSpacing: 0.02em;
|
||||
$headingTextTransform: uppercase;
|
||||
$headingTextShadow: 0px 0px 6px rgba(0,0,0,0.2);
|
||||
$heading1TextShadow: $headingTextShadow;
|
||||
|
||||
// Links and actions
|
||||
$linkColor: #13DAEC;
|
||||
$linkColorHover: lighten( $linkColor, 20% );
|
||||
|
||||
// Text selection
|
||||
$selectionBackgroundColor: #FF5E99;
|
||||
$selectionColor: #fff;
|
||||
|
||||
// Generates the presentation background, can be overridden
|
||||
// to return a background image or gradient
|
||||
@mixin bodyBackground() {
|
||||
background: $backgroundColor;
|
||||
}
|
||||
163
css/theme/template/theme.scss
Normal file
163
css/theme/template/theme.scss
Normal file
@@ -0,0 +1,163 @@
|
||||
// Base theme template for reveal.js
|
||||
|
||||
/*********************************************
|
||||
* GLOBAL STYLES
|
||||
*********************************************/
|
||||
|
||||
body {
|
||||
@include bodyBackground();
|
||||
background-color: $backgroundColor;
|
||||
}
|
||||
|
||||
.reveal {
|
||||
font-family: $mainFont;
|
||||
font-size: $mainFontSize;
|
||||
font-weight: 200;
|
||||
letter-spacing: -0.02em;
|
||||
color: $mainColor;
|
||||
}
|
||||
|
||||
::selection {
|
||||
color: $selectionColor;
|
||||
background: $selectionBackgroundColor;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* HEADERS
|
||||
*********************************************/
|
||||
|
||||
.reveal h1,
|
||||
.reveal h2,
|
||||
.reveal h3,
|
||||
.reveal h4,
|
||||
.reveal h5,
|
||||
.reveal h6 {
|
||||
margin: 0 0 20px 0;
|
||||
color: $headingColor;
|
||||
|
||||
font-family: $headingFont;
|
||||
line-height: $headingLineHeight;
|
||||
letter-spacing: $headingLetterSpacing;
|
||||
|
||||
text-transform: $headingTextTransform;
|
||||
text-shadow: $headingTextShadow;
|
||||
}
|
||||
|
||||
.reveal h1 {
|
||||
text-shadow: $heading1TextShadow;
|
||||
}
|
||||
|
||||
|
||||
/*********************************************
|
||||
* LINKS
|
||||
*********************************************/
|
||||
|
||||
.reveal a:not(.image) {
|
||||
color: $linkColor;
|
||||
text-decoration: none;
|
||||
|
||||
-webkit-transition: color .15s ease;
|
||||
-moz-transition: color .15s ease;
|
||||
-ms-transition: color .15s ease;
|
||||
-o-transition: color .15s ease;
|
||||
transition: color .15s ease;
|
||||
}
|
||||
.reveal a:not(.image):hover {
|
||||
color: $linkColorHover;
|
||||
|
||||
text-shadow: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.reveal .roll span:after {
|
||||
color: #fff;
|
||||
background: darken( $linkColor, 15% );
|
||||
}
|
||||
|
||||
|
||||
/*********************************************
|
||||
* IMAGES
|
||||
*********************************************/
|
||||
|
||||
.reveal section img {
|
||||
margin: 15px;
|
||||
background: rgba(255,255,255,0.12);
|
||||
border: 4px solid $mainColor;
|
||||
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
|
||||
|
||||
-webkit-transition: all .2s linear;
|
||||
-moz-transition: all .2s linear;
|
||||
-ms-transition: all .2s linear;
|
||||
-o-transition: all .2s linear;
|
||||
transition: all .2s linear;
|
||||
}
|
||||
|
||||
.reveal a:hover img {
|
||||
background: rgba(255,255,255,0.2);
|
||||
border-color: $linkColor;
|
||||
|
||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
|
||||
}
|
||||
|
||||
|
||||
/*********************************************
|
||||
* NAVIGATION CONTROLS
|
||||
*********************************************/
|
||||
|
||||
.reveal .controls div.left,
|
||||
.reveal .controls div.left.enabled {
|
||||
border-right-color: $linkColor;
|
||||
}
|
||||
|
||||
.reveal .controls div.right,
|
||||
.reveal .controls div.right.enabled {
|
||||
border-left-color: $linkColor;
|
||||
}
|
||||
|
||||
.reveal .controls div.up,
|
||||
.reveal .controls div.up.enabled {
|
||||
border-bottom-color: $linkColor;
|
||||
}
|
||||
|
||||
.reveal .controls div.down,
|
||||
.reveal .controls div.down.enabled {
|
||||
border-top-color: $linkColor;
|
||||
}
|
||||
|
||||
.reveal .controls div.left.enabled:hover {
|
||||
border-right-color: $linkColorHover;
|
||||
}
|
||||
|
||||
.reveal .controls div.right.enabled:hover {
|
||||
border-left-color: $linkColorHover;
|
||||
}
|
||||
|
||||
.reveal .controls div.up.enabled:hover {
|
||||
border-bottom-color: $linkColorHover;
|
||||
}
|
||||
|
||||
.reveal .controls div.down.enabled:hover {
|
||||
border-top-color: $linkColorHover;
|
||||
}
|
||||
|
||||
|
||||
/*********************************************
|
||||
* PROGRESS BAR
|
||||
*********************************************/
|
||||
|
||||
.reveal .progress {
|
||||
background: rgba(0,0,0,0.2);
|
||||
}
|
||||
.reveal .progress span {
|
||||
background: $linkColor;
|
||||
|
||||
-webkit-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
|
||||
-moz-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
|
||||
-ms-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
|
||||
-o-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
|
||||
transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
|
||||
}
|
||||
|
||||
|
||||
198
index.html
198
index.html
@@ -1,9 +1,9 @@
|
||||
<!doctype html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
|
||||
<title>reveal.js - The HTML Presentation Framework</title>
|
||||
|
||||
<meta name="description" content="A framework for easily creating beautiful presentations using HTML">
|
||||
@@ -11,17 +11,15 @@
|
||||
|
||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
||||
|
||||
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
|
||||
|
||||
<link rel="stylesheet" href="css/main.css">
|
||||
|
||||
<link rel="stylesheet" href="css/reveal.css">
|
||||
<link rel="stylesheet" href="css/theme/default.css" id="theme">
|
||||
|
||||
<!-- For syntax highlighting -->
|
||||
<link rel="stylesheet" href="lib/css/zenburn.css">
|
||||
|
||||
<!-- If the query includes 'print-pdf', use the PDF print sheet -->
|
||||
<script>
|
||||
// If the query includes 'print-pdf' we'll use the PDF print sheet
|
||||
document.write( '<link rel="stylesheet" href="css/print/' + ( window.location.search.match( /print-pdf/gi ) ? 'pdf' : 'paper' ) + '.css" type="text/css" media="print">' );
|
||||
</script>
|
||||
|
||||
@@ -29,36 +27,34 @@
|
||||
<script src="lib/js/html5shiv.js"></script>
|
||||
<![endif]-->
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<div class="reveal">
|
||||
|
||||
<!-- Used to fade in a background when a specific slide state is reached -->
|
||||
<div class="state-background"></div>
|
||||
|
||||
<!-- Any section element inside of this container is displayed as a slide -->
|
||||
<div class="slides">
|
||||
|
||||
<section>
|
||||
<h1>Reveal.js</h1>
|
||||
<h3>HTML Presentations Made Easy</h3>
|
||||
<p>
|
||||
<small>Created by <a href="http://hakim.se">Hakim El Hattab</a> / <a href="http://twitter.com/hakimel">@hakimel</a></small>
|
||||
</p>
|
||||
</section>
|
||||
|
||||
|
||||
<section>
|
||||
<h2>Heads Up</h2>
|
||||
<p>
|
||||
reveal.js is a framework for easily creating beautiful presentations using HTML. You'll need a browser with
|
||||
reveal.js is a framework for easily creating beautiful presentations using HTML. You'll need a browser with
|
||||
support for CSS 3D transforms to see it in its full glory.
|
||||
</p>
|
||||
<p>
|
||||
<i><small>- <a href="http://hakim.se">Hakim El Hattab</a> / <a href="http://twitter.com/hakimel">@hakimel</a></small></i>
|
||||
</p>
|
||||
|
||||
<aside class="notes">
|
||||
Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you run the speaker notes server.
|
||||
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>
|
||||
|
||||
|
||||
<!-- Example of nested vertical slides -->
|
||||
<section>
|
||||
<section>
|
||||
@@ -92,9 +88,9 @@
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Holistic Overview</h2>
|
||||
<h2>Point of View</h2>
|
||||
<p>
|
||||
Press <strong>ESC</strong> to enter the slide overview!
|
||||
Press <strong>ESC</strong> to enter the slide overview. Hold down alt and click on any element to zoom in on it using <a href="http://lab.hakim.se/zoom-js">zoom.js</a>. Alt + click anywhere to zoom back out.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
@@ -108,7 +104,7 @@
|
||||
<section>
|
||||
<h2>Works in Mobile Safari</h2>
|
||||
<p>
|
||||
Try it out! You can swipe through the slides pinch your way to the overview.
|
||||
Try it out! You can swipe through the slides and pinch your way to the overview.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
@@ -121,7 +117,7 @@
|
||||
<li>Or here</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
|
||||
<section>
|
||||
<h2>Fantastic Ordered List</h2>
|
||||
<ol>
|
||||
@@ -132,38 +128,43 @@
|
||||
</section>
|
||||
|
||||
<section data-markdown>
|
||||
## 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).
|
||||
<script type="text/template">
|
||||
## Markdown support
|
||||
|
||||
<pre><code contenteditable style="margin-top: 20px;"><section data-markdown>
|
||||
## 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).
|
||||
|
||||
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).
|
||||
</section>
|
||||
</code></pre>
|
||||
<section data-markdown>
|
||||
## 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).
|
||||
</section>
|
||||
</script>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<section id="transitions">
|
||||
<h2>Transition Styles</h2>
|
||||
<p>
|
||||
You can select from different transitions, like: <br>
|
||||
<a href="http://lab.hakim.se/reveal-js/?transition=cube">Cube</a> -
|
||||
<a href="http://lab.hakim.se/reveal-js/?transition=page">Page</a> -
|
||||
<a href="http://lab.hakim.se/reveal-js/?transition=concave">Concave</a> -
|
||||
<a href="http://lab.hakim.se/reveal-js/?transition=linear">Linear</a>
|
||||
<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=none#/transitions">None</a> -
|
||||
<a href="?#/transitions">Default</a>
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<section id="themes">
|
||||
<h2>Themes</h2>
|
||||
<p>
|
||||
Reveal.js comes with a few themes built in: <br>
|
||||
<a href="http://lab.hakim.se/reveal-js/?theme=sky">Sky</a> -
|
||||
<a href="http://lab.hakim.se/reveal-js/?theme=beige">Beige</a> -
|
||||
<a href="http://lab.hakim.se/reveal-js/?theme=simple">Simple</a> -
|
||||
<a href="http://lab.hakim.se/reveal-js/">Default</a>
|
||||
<a href="?theme=sky#/themes">Sky</a> -
|
||||
<a href="?theme=beige#/themes">Beige</a> -
|
||||
<a href="?theme=simple#/themes">Simple</a> -
|
||||
<a href="?theme=serif#/themes">Serif</a> -
|
||||
<a href="?#/themes">Default</a>
|
||||
</p>
|
||||
<p>
|
||||
<small>
|
||||
@@ -216,17 +217,17 @@
|
||||
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
|
||||
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>
|
||||
<h2>Pretty Code</h2>
|
||||
<pre><code contenteditable>
|
||||
function linkify( selector ) {
|
||||
if( supports3DTransforms ) {
|
||||
|
||||
|
||||
var nodes = document.querySelectorAll( selector );
|
||||
|
||||
for( var i = 0, len = nodes.length; i < len; i++ ) {
|
||||
@@ -241,7 +242,7 @@ function linkify( selector ) {
|
||||
</code></pre>
|
||||
<p>Courtesy of <a href="http://softwaremaniacs.org/soft/highlight/en/description/">highlight.js</a>.</p>
|
||||
</section>
|
||||
|
||||
|
||||
<section>
|
||||
<h2>Intergalactic Interconnections</h2>
|
||||
<p>
|
||||
@@ -251,23 +252,40 @@ function linkify( selector ) {
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Fragmented Views</h2>
|
||||
<p>Hit the next arrow...</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>
|
||||
<section>
|
||||
<h2>Fragmented Views</h2>
|
||||
<p>Hit the next arrow...</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">
|
||||
This slide has fragments which are also stepped through in the notes window.
|
||||
</aside>
|
||||
</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>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
|
||||
<section>
|
||||
<h2>Spectacular image!</h2>
|
||||
<a class="image" href="http://hakim.se/experiments/html5/breakdom/" target="_blank">
|
||||
<img width="320" height="412" src="https://s3.amazonaws.com/hakim-static/reveal-js/breakdom.png" alt="BreakDOM game screenshot">
|
||||
<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>
|
||||
<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>
|
||||
@@ -276,7 +294,15 @@ function linkify( selector ) {
|
||||
document.getElementById('slideshare').attributeName = 'allowfullscreen';
|
||||
</script>
|
||||
</section>
|
||||
|
||||
|
||||
<section>
|
||||
<h2>Take a Moment</h2>
|
||||
<p>
|
||||
Press b or period on your keyboard to enter the 'paused' mode. This mode is helpful when you want to take disctracting slides off the screen
|
||||
during a presentation.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Stellar Links</h2>
|
||||
<ul>
|
||||
@@ -285,52 +311,60 @@ function linkify( selector ) {
|
||||
<li><a href="http://twitter.com/hakimel">Follow me on Twitter</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
|
||||
<section>
|
||||
<h2>It's free</h2>
|
||||
<p>
|
||||
reveal.js and <a href="http://www.rvl.io">rvl.io</a> are entirely free but if you'd like to support the projects you can donate below.
|
||||
Donations will go towards hosting and domain costs.
|
||||
</p>
|
||||
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
|
||||
<input type="hidden" name="cmd" value="_donations">
|
||||
<input type="hidden" name="business" value="hakim.elhattab@gmail.com">
|
||||
<input type="hidden" name="lc" value="US">
|
||||
<input type="hidden" name="item_name" value="reveal.js / rvl.io">
|
||||
<input type="hidden" name="no_note" value="0">
|
||||
<input type="hidden" name="currency_code" value="USD">
|
||||
<input type="hidden" name="bn" value="PP-DonationsBF:btn_donate_LG.gif:NonHostedGuest">
|
||||
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h1>THE END</h1>
|
||||
<h3>BY Hakim El Hattab / hakim.se</h3>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- The navigational controls UI -->
|
||||
<aside class="controls">
|
||||
<a class="left" href="#">◄</a>
|
||||
<a class="right" href="#">►</a>
|
||||
<a class="up" href="#">▲</a>
|
||||
<a class="down" href="#">▼</a>
|
||||
</aside>
|
||||
|
||||
<!-- Presentation progress bar -->
|
||||
<div class="progress"><span></span></div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="lib/js/head.min.js"></script>
|
||||
<script src="js/reveal.min.js"></script>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
// Full list of configuration options available here:
|
||||
// https://github.com/hakimel/reveal.js#configuration
|
||||
Reveal.initialize({
|
||||
controls: true,
|
||||
progress: true,
|
||||
history: true,
|
||||
|
||||
theme: Reveal.getQueryHash().theme || 'default', // available themes are in /css/theme
|
||||
transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/linear(2d)
|
||||
|
||||
theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
|
||||
transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/none
|
||||
|
||||
// Optional libraries used to extend on reveal.js
|
||||
dependencies: [
|
||||
{ src: 'lib/js/highlight.js', async: true, callback: function() { window.hljs.initHighlightingOnLoad(); } },
|
||||
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
|
||||
{ src: 'lib/js/showdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
|
||||
{ src: 'lib/js/data-markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
|
||||
{ src: '/socket.io/socket.io.js', async: true, condition: function() { return window.location.host === 'localhost:1947'; } },
|
||||
{ src: 'plugin/speakernotes/client.js', async: true, condition: function() { return window.location.host === 'localhost:1947'; } },
|
||||
{ src: 'plugin/markdown/showdown.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/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
|
||||
{ src: 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }
|
||||
]
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
1086
js/reveal.js
1086
js/reveal.js
File diff suppressed because it is too large
Load Diff
143
js/reveal.min.js
vendored
143
js/reveal.min.js
vendored
@@ -1,72 +1,83 @@
|
||||
/*!
|
||||
* reveal.js 2.0 r24
|
||||
* reveal.js 2.1 r37
|
||||
* http://lab.hakim.se/reveal-js
|
||||
* MIT licensed
|
||||
*
|
||||
*
|
||||
* Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
|
||||
*/
|
||||
var Reveal=(function(){var j=".reveal .slides>section",b=".reveal .slides>section.present>section",M={controls:true,progress:true,history:false,keyboard:true,overview:true,loop:false,autoSlide:0,mouseWheel:true,rollingLinks:true,theme:"default",transition:"default",dependencies:[]},k=0,c=0,v,D,ab=[],d={},O="WebkitPerspective" in document.body.style||"MozPerspective" in document.body.style||"msPerspective" in document.body.style||"OPerspective" in document.body.style||"perspective" in document.body.style,l="WebkitTransform" in document.body.style||"MozTransform" in document.body.style||"msTransform" in document.body.style||"OTransform" in document.body.style||"transform" in document.body.style,w=0,i=0,A=0,V={startX:0,startY:0,startSpan:0,startCount:0,handled:false,threshold:40};
|
||||
function g(ac){if((!l&&!O)){document.body.setAttribute("class","no-transforms");return;}q(M,ac);d.theme=document.querySelector("#theme");d.wrapper=document.querySelector(".reveal");
|
||||
d.progress=document.querySelector(".reveal .progress");d.progressbar=document.querySelector(".reveal .progress span");if(M.controls){d.controls=document.querySelector(".reveal .controls");
|
||||
d.controlsLeft=document.querySelector(".reveal .controls .left");d.controlsRight=document.querySelector(".reveal .controls .right");d.controlsUp=document.querySelector(".reveal .controls .up");
|
||||
d.controlsDown=document.querySelector(".reveal .controls .down");}Q();if(navigator.userAgent.match(/(iphone|ipod|android)/i)){document.documentElement.style.overflow="scroll";
|
||||
document.body.style.height="120%";window.addEventListener("load",W,false);window.addEventListener("orientationchange",W,false);}}function Q(){var ad=[],ah=[];
|
||||
for(var ae=0,ac=M.dependencies.length;ae<ac;ae++){var af=M.dependencies[ae];if(!af.condition||af.condition()){if(af.async){ah.push(af.src);}else{ad.push(af.src);
|
||||
}if(typeof af.callback==="function"){head.ready(af.src.match(/([\w\d_-]*)\.?[^\\\/]*$/i)[0],af.callback);}}}function ag(){head.js.apply(null,ah);E();}if(ad.length){head.ready(ag);
|
||||
head.js.apply(null,ad);}else{ag();}}function E(){B();H();G();J();}function H(){if(O===false){M.transition="linear";}if(M.controls&&d.controls){d.controls.style.display="block";
|
||||
}if(M.progress&&d.progress){d.progress.style.display="block";}if(M.theme&&d.theme){var ae=d.theme.getAttribute("href");var ac=/[^/]*?(?=\.css)/;var ad=ae.match(ac)[0];
|
||||
if(M.theme!==ad){ae=ae.replace(ac,M.theme);d.theme.setAttribute("href",ae);}}if(M.transition!=="default"){d.wrapper.classList.add(M.transition);}if(M.mouseWheel){document.addEventListener("DOMMouseScroll",m,false);
|
||||
document.addEventListener("mousewheel",m,false);}if(M.rollingLinks){I();}}function B(){document.addEventListener("touchstart",x,false);document.addEventListener("touchmove",Y,false);
|
||||
document.addEventListener("touchend",R,false);window.addEventListener("hashchange",t,false);if(M.keyboard){document.addEventListener("keydown",Z,false);
|
||||
}if(M.controls&&d.controls){d.controlsLeft.addEventListener("click",n(y),false);d.controlsRight.addEventListener("click",n(h),false);d.controlsUp.addEventListener("click",n(r),false);
|
||||
d.controlsDown.addEventListener("click",n(C),false);}}function P(){document.removeEventListener("keydown",Z,false);document.removeEventListener("touchstart",x,false);
|
||||
document.removeEventListener("touchmove",Y,false);document.removeEventListener("touchend",R,false);window.removeEventListener("hashchange",t,false);if(M.controls&&d.controls){d.controlsLeft.removeEventListener("click",n(y),false);
|
||||
d.controlsRight.removeEventListener("click",n(h),false);d.controlsUp.removeEventListener("click",n(r),false);d.controlsDown.removeEventListener("click",n(C),false);
|
||||
}}function q(ad,ac){for(var ae in ac){ad[ae]=ac[ae];}}function N(ae,ac){var af=ae.x-ac.x,ad=ae.y-ac.y;return Math.sqrt(af*af+ad*ad);}function n(ac){return function(ad){ad.preventDefault();
|
||||
ac.call();};}function W(){setTimeout(function(){window.scrollTo(0,1);},0);}function Z(ad){if(document.querySelector(":focus")!==null||ad.shiftKey||ad.altKey||ad.ctrlKey||ad.metaKey){return;
|
||||
}var ac=false;switch(ad.keyCode){case 80:case 33:T();ac=true;break;case 78:case 34:u();ac=true;break;case 72:case 37:y();ac=true;break;case 76:case 39:h();
|
||||
ac=true;break;case 75:case 38:r();ac=true;break;case 74:case 40:C();ac=true;break;case 36:K(0);ac=true;break;case 35:K(Number.MAX_VALUE);ac=true;break;
|
||||
case 32:U()?X():u();ac=true;break;case 13:if(U()){X();ac=true;}break;}if(ac){ad.preventDefault();}else{if(ad.keyCode===27&&O){S();ad.preventDefault();}}J();
|
||||
}function x(ac){V.startX=ac.touches[0].clientX;V.startY=ac.touches[0].clientY;V.startCount=ac.touches.length;if(ac.touches.length===2){V.startSpan=N({x:ac.touches[1].clientX,y:ac.touches[1].clientY},{x:V.startX,y:V.startY});
|
||||
}}function Y(ah){if(!V.handled){var af=ah.touches[0].clientX;var ae=ah.touches[0].clientY;if(ah.touches.length===2&&V.startCount===2){var ag=N({x:ah.touches[1].clientX,y:ah.touches[1].clientY},{x:V.startX,y:V.startY});
|
||||
if(Math.abs(V.startSpan-ag)>V.threshold){V.handled=true;if(ag<V.startSpan){F();}else{X();}}}else{if(ah.touches.length===1){var ad=af-V.startX,ac=ae-V.startY;
|
||||
if(ad>V.threshold&&Math.abs(ad)>Math.abs(ac)){V.handled=true;y();}else{if(ad<-V.threshold&&Math.abs(ad)>Math.abs(ac)){V.handled=true;h();}else{if(ac>V.threshold){V.handled=true;
|
||||
r();}else{if(ac<-V.threshold){V.handled=true;C();}}}}}}ah.preventDefault();}}function R(ac){V.handled=false;}function m(ac){clearTimeout(w);w=setTimeout(function(){var ad=ac.detail||-ac.wheelDelta;
|
||||
if(ad>0){u();}else{T();}},100);}function t(ac){G();}function I(){if(O&&!("msPerspective" in document.body.style)){var ad=document.querySelectorAll(".reveal .slides section a:not(.image)");
|
||||
for(var ae=0,ac=ad.length;ae<ac;ae++){var af=ad[ae];if(af.textContent&&!af.querySelector("img")&&(!af.className||!af.classList.contains(af,"roll"))){af.classList.add("roll");
|
||||
af.innerHTML='<span data-title="'+af.text+'">'+af.innerHTML+"</span>";}}}}function F(){if(M.overview){d.wrapper.classList.add("overview");var ac=Array.prototype.slice.call(document.querySelectorAll(j));
|
||||
for(var ah=0,af=ac.length;ah<af;ah++){var ae=ac[ah],al="translateZ(-2500px) translate("+((ah-k)*105)+"%, 0%)";ae.setAttribute("data-index-h",ah);ae.style.display="block";
|
||||
ae.style.WebkitTransform=al;ae.style.MozTransform=al;ae.style.msTransform=al;ae.style.OTransform=al;ae.style.transform=al;if(!ae.classList.contains("stack")){ae.addEventListener("click",z,true);
|
||||
}var ak=Array.prototype.slice.call(ae.querySelectorAll("section"));for(var ag=0,ad=ak.length;ag<ad;ag++){var aj=ak[ag],ai="translate(0%, "+((ag-(ah===k?c:0))*105)+"%)";
|
||||
aj.setAttribute("data-index-h",ah);aj.setAttribute("data-index-v",ag);aj.style.display="block";aj.style.WebkitTransform=ai;aj.style.MozTransform=ai;aj.style.msTransform=ai;
|
||||
aj.style.OTransform=ai;aj.style.transform=ai;aj.addEventListener("click",z,true);}}}}function X(){if(M.overview){d.wrapper.classList.remove("overview");
|
||||
var af=Array.prototype.slice.call(document.querySelectorAll(".reveal .slides section"));for(var ae=0,ac=af.length;ae<ac;ae++){var ad=af[ae];ad.style.WebkitTransform="";
|
||||
ad.style.MozTransform="";ad.style.msTransform="";ad.style.OTransform="";ad.style.transform="";ad.removeEventListener("click",z);}a();}}function U(){return d.wrapper.classList.contains("overview");
|
||||
}function z(ac){if(U()){ac.preventDefault();X();k=this.getAttribute("data-index-h");c=this.getAttribute("data-index-v");a();}}function aa(ad,af){var ah=Array.prototype.slice.call(document.querySelectorAll(ad)),ai=ah.length;
|
||||
if(ai){if(M.loop){af%=ai;if(af<0){af=ai+af;}}af=Math.max(Math.min(af,ai-1),0);for(var ag=0;ag<ai;ag++){var ac=ah[ag];if(U()===false){var aj=Math.abs((af-ag)%(ai-3))||0;
|
||||
ac.style.display=aj>3?"none":"block";}ah[ag].classList.remove("past");ah[ag].classList.remove("present");ah[ag].classList.remove("future");if(ag<af){ah[ag].classList.add("past");
|
||||
}else{if(ag>af){ah[ag].classList.add("future");}}if(ac.querySelector("section")){ah[ag].classList.add("stack");}}ah[af].classList.add("present");var ae=ah[af].getAttribute("data-state");
|
||||
if(ae){ab=ab.concat(ae.split(" "));}}else{af=0;}return af;}function a(ai,am){v=D;var af=ab.concat();ab.length=0;var al=k,ad=c;k=aa(j,ai===undefined?k:ai);
|
||||
c=aa(b,am===undefined?c:am);stateLoop:for(var ag=0,aj=ab.length;ag<aj;ag++){for(var ae=0;ae<af.length;ae++){if(af[ae]===ab[ag]){af.splice(ae,1);continue stateLoop;
|
||||
}}document.documentElement.classList.add(ab[ag]);o(ab[ag]);}while(af.length){document.documentElement.classList.remove(af.pop());}if(M.progress&&d.progress){d.progressbar.style.width=(k/(document.querySelectorAll(j).length-1))*window.innerWidth+"px";
|
||||
}if(U()){F();}p();clearTimeout(A);A=setTimeout(f,1500);var ac=document.querySelectorAll(j);var ak=ac[k],ah=ak.querySelectorAll("section");D=ah[c]||ak;if(k!==al||c!==ad){o("slidechanged",{indexh:k,indexv:c,previousSlide:v,currentSlide:D});
|
||||
}else{v=null;}if(v){v.classList.remove("present");}}function p(){if(!M.controls||!d.controls){return;}var ac=e();[d.controlsLeft,d.controlsRight,d.controlsUp,d.controlsDown].forEach(function(ad){ad.classList.remove("enabled");
|
||||
});if(ac.left){d.controlsLeft.classList.add("enabled");}if(ac.right){d.controlsRight.classList.add("enabled");}if(ac.up){d.controlsUp.classList.add("enabled");
|
||||
}if(ac.down){d.controlsDown.classList.add("enabled");}}function e(){var ac=document.querySelectorAll(j);var ad=document.querySelectorAll(b);return{left:k>0,right:k<ac.length-1,up:c>0,down:c<ad.length-1};
|
||||
}function G(){var ah=window.location.hash;var ag=ah.slice(2).split("/"),ae=ah.replace(/#|\//gi,"");if(isNaN(parseInt(ag[0]))&&ae.length){var ac=document.querySelector("#"+ae);
|
||||
if(ac){var ai=Reveal.getIndices(ac);K(ai.h,ai.v);}else{K(k,c);}}else{var af=parseInt(ag[0])||0,ad=parseInt(ag[1])||0;K(af,ad);}}function f(){if(M.history){var ac="/";
|
||||
if(k>0||c>0){ac+=k;}if(c>0){ac+="/"+c;}window.location.hash=ac;}}function o(ad,ac){var ae=document.createEvent("HTMLEvents",1,2);ae.initEvent(ad,true,true);
|
||||
q(ae,ac);d.wrapper.dispatchEvent(ae);}function s(){if(document.querySelector(b+".present")){var ad=document.querySelectorAll(b+".present .fragment:not(.visible)");
|
||||
if(ad.length){ad[0].classList.add("visible");o("fragmentshown",{fragment:ad[0]});return true;}}else{var ac=document.querySelectorAll(j+".present .fragment:not(.visible)");
|
||||
if(ac.length){ac[0].classList.add("visible");o("fragmentshown",{fragment:ac[0]});return true;}}return false;}function L(){if(document.querySelector(b+".present")){var ad=document.querySelectorAll(b+".present .fragment.visible");
|
||||
if(ad.length){ad[ad.length-1].classList.remove("visible");o("fragmenthidden",{fragment:ad[ad.length-1]});return true;}}else{var ac=document.querySelectorAll(j+".present .fragment.visible");
|
||||
if(ac.length){ac[ac.length-1].classList.remove("visible");o("fragmenthidden",{fragment:ac[ac.length-1]});return true;}}return false;}function J(){clearTimeout(i);
|
||||
if(M.autoSlide){i=setTimeout(u,M.autoSlide);}}function K(ad,ac){a(ad,ac);}function y(){if(U()||L()===false){a(k-1,0);}}function h(){if(U()||s()===false){a(k+1,0);
|
||||
}}function r(){if(U()||L()===false){a(k,c-1);}}function C(){if(U()||s()===false){a(k,c+1);}}function T(){if(L()===false){if(e().up){r();}else{var ac=document.querySelector(".reveal .slides>section.past:nth-child("+k+")");
|
||||
if(ac){c=(ac.querySelectorAll("section").length+1)||0;k--;a();}}}}function u(){if(s()===false){e().down?C():h();}J();}function S(){if(U()){X();}else{F();
|
||||
}}return{initialize:g,navigateTo:K,navigateLeft:y,navigateRight:h,navigateUp:r,navigateDown:C,navigatePrev:T,navigateNext:u,toggleOverview:S,addEventListeners:B,removeEventListeners:P,getIndices:function(ac){var ag=k,ae=c;
|
||||
if(ac){var ah=!!ac.parentNode.nodeName.match(/section/gi);var af=ah?ac.parentNode:ac;var ad=Array.prototype.slice.call(document.querySelectorAll(j));ag=Math.max(ad.indexOf(af),0);
|
||||
if(ah){ae=Math.max(Array.prototype.slice.call(ac.parentNode.children).indexOf(ac),0);}}return{h:ag,v:ae};},getPreviousSlide:function(){return v;},getCurrentSlide:function(){return D;
|
||||
},getQueryHash:function(){var ac={};location.search.replace(/[A-Z0-9]+?=(\w*)/gi,function(ad){ac[ad.split("=").shift()]=ad.split("=").pop();});return ac;
|
||||
},addEventListener:function(ad,ae,ac){if("addEventListener" in window){(d.wrapper||document.querySelector(".reveal")).addEventListener(ad,ae,ac);}},removeEventListener:function(ad,ae,ac){if("addEventListener" in window){(d.wrapper||document.querySelector(".reveal")).removeEventListener(ad,ae,ac);
|
||||
var Reveal=(function(){var l=".reveal .slides>section",b=".reveal .slides>section.present>section",R={controls:true,progress:true,history:false,keyboard:true,overview:true,loop:false,autoSlide:0,mouseWheel:true,rollingLinks:true,theme:null,transition:"default",dependencies:[]},Y=R.autoSlide,m=0,e=0,y,G,ak=[],f={},T="WebkitPerspective" in document.body.style||"MozPerspective" in document.body.style||"msPerspective" in document.body.style||"OPerspective" in document.body.style||"perspective" in document.body.style,n="WebkitTransform" in document.body.style||"MozTransform" in document.body.style||"msTransform" in document.body.style||"OTransform" in document.body.style||"transform" in document.body.style,z=0,k=0,D=0,ac={startX:0,startY:0,startSpan:0,startCount:0,handled:false,threshold:80};
|
||||
function i(al){if((!n&&!T)){document.body.setAttribute("class","no-transforms");return;}t(R,al);d();V();}function P(){f.theme=document.querySelector("#theme");
|
||||
f.wrapper=document.querySelector(".reveal");if(!f.wrapper.querySelector(".progress")&&R.progress){var ao=document.createElement("div");ao.classList.add("progress");
|
||||
ao.innerHTML="<span></span>";f.wrapper.appendChild(ao);}if(!f.wrapper.querySelector(".controls")&&R.controls){var an=document.createElement("aside");an.classList.add("controls");
|
||||
an.innerHTML='<div class="left"></div><div class="right"></div><div class="up"></div><div class="down"></div>';f.wrapper.appendChild(an);}if(!f.wrapper.querySelector(".state-background")){var am=document.createElement("div");
|
||||
am.classList.add("state-background");f.wrapper.appendChild(am);}if(!f.wrapper.querySelector(".pause-overlay")){var al=document.createElement("div");al.classList.add("pause-overlay");
|
||||
f.wrapper.appendChild(al);}f.progress=document.querySelector(".reveal .progress");f.progressbar=document.querySelector(".reveal .progress span");if(R.controls){f.controls=document.querySelector(".reveal .controls");
|
||||
f.controlsLeft=document.querySelector(".reveal .controls .left");f.controlsRight=document.querySelector(".reveal .controls .right");f.controlsUp=document.querySelector(".reveal .controls .up");
|
||||
f.controlsDown=document.querySelector(".reveal .controls .down");}}function d(){if(navigator.userAgent.match(/(iphone|ipod|android)/i)){document.documentElement.style.overflow="scroll";
|
||||
document.body.style.height="120%";window.addEventListener("load",ad,false);window.addEventListener("orientationchange",ad,false);}}function V(){var am=[],aq=[];
|
||||
for(var an=0,al=R.dependencies.length;an<al;an++){var ao=R.dependencies[an];if(!ao.condition||ao.condition()){if(ao.async){aq.push(ao.src);}else{am.push(ao.src);
|
||||
}if(typeof ao.callback==="function"){head.ready(ao.src.match(/([\w\d_\-]*)\.?[^\\\/]*$/i)[0],ao.callback);}}}function ap(){if(aq.length){head.js.apply(null,aq);
|
||||
}H();}if(am.length){head.ready(ap);head.js.apply(null,am);}else{ap();}}function H(){P();E();K();J();O();setTimeout(function(){r("ready",{indexh:m,indexv:e,currentSlide:G});
|
||||
},1);}function K(){if(T===false){R.transition="linear";}if(R.controls&&f.controls){f.controls.style.display="block";}if(R.progress&&f.progress){f.progress.style.display="block";
|
||||
}if(R.transition!=="default"){f.wrapper.classList.add(R.transition);}if(R.mouseWheel){document.addEventListener("DOMMouseScroll",o,false);document.addEventListener("mousewheel",o,false);
|
||||
}if(R.rollingLinks){N();}if(R.theme&&f.theme){var an=f.theme.getAttribute("href");var al=/[^\/]*?(?=\.css)/;var am=an.match(al)[0];if(R.theme!==am){an=an.replace(al,R.theme);
|
||||
f.theme.setAttribute("href",an);}}}function E(){document.addEventListener("touchstart",A,false);document.addEventListener("touchmove",af,false);document.addEventListener("touchend",W,false);
|
||||
window.addEventListener("hashchange",w,false);if(R.keyboard){document.addEventListener("keydown",ah,false);}if(R.progress&&f.progress){f.progress.addEventListener("click",q(ai),false);
|
||||
}if(R.controls&&f.controls){f.controlsLeft.addEventListener("click",q(B),false);f.controlsRight.addEventListener("click",q(j),false);f.controlsUp.addEventListener("click",q(u),false);
|
||||
f.controlsDown.addEventListener("click",q(F),false);}}function U(){document.removeEventListener("keydown",ah,false);document.removeEventListener("touchstart",A,false);
|
||||
document.removeEventListener("touchmove",af,false);document.removeEventListener("touchend",W,false);window.removeEventListener("hashchange",w,false);if(R.progress&&f.progress){f.progress.removeEventListener("click",q(ai),false);
|
||||
}if(R.controls&&f.controls){f.controlsLeft.removeEventListener("click",q(B),false);f.controlsRight.removeEventListener("click",q(j),false);f.controlsUp.removeEventListener("click",q(u),false);
|
||||
f.controlsDown.removeEventListener("click",q(F),false);}}function t(am,al){for(var an in al){am[an]=al[an];}}function S(an,al){var ao=an.x-al.x,am=an.y-al.y;
|
||||
return Math.sqrt(ao*ao+am*am);}function q(al){return function(am){am.preventDefault();al.call(null,am);};}function ad(){setTimeout(function(){window.scrollTo(0,1);
|
||||
},0);}function r(am,al){var an=document.createEvent("HTMLEvents",1,2);an.initEvent(am,true,true);t(an,al);f.wrapper.dispatchEvent(an);}function N(){if(T&&!("msPerspective" in document.body.style)){var am=document.querySelectorAll(".reveal .slides section a:not(.image)");
|
||||
for(var an=0,al=am.length;an<al;an++){var ao=am[an];if(ao.textContent&&!ao.querySelector("img")&&(!ao.className||!ao.classList.contains(ao,"roll"))){ao.classList.add("roll");
|
||||
ao.innerHTML='<span data-title="'+ao.text+'">'+ao.innerHTML+"</span>";}}}}function I(){if(R.overview){f.wrapper.classList.add("overview");var al=document.querySelectorAll(l);
|
||||
for(var aq=0,ao=al.length;aq<ao;aq++){var an=al[aq],av="translateZ(-2500px) translate("+((aq-m)*105)+"%, 0%)";an.setAttribute("data-index-h",aq);an.style.display="block";
|
||||
an.style.WebkitTransform=av;an.style.MozTransform=av;an.style.msTransform=av;an.style.OTransform=av;an.style.transform=av;if(!an.classList.contains("stack")){an.addEventListener("click",C,true);
|
||||
}var au=an.querySelectorAll("section");for(var ap=0,am=au.length;ap<am;ap++){var at=au[ap],ar="translate(0%, "+((ap-(aq===m?e:0))*105)+"%)";at.setAttribute("data-index-h",aq);
|
||||
at.setAttribute("data-index-v",ap);at.style.display="block";at.style.WebkitTransform=ar;at.style.MozTransform=ar;at.style.msTransform=ar;at.style.OTransform=ar;
|
||||
at.style.transform=ar;at.addEventListener("click",C,true);}}}}function ae(){if(R.overview){f.wrapper.classList.remove("overview");var ao=Array.prototype.slice.call(document.querySelectorAll(".reveal .slides section"));
|
||||
for(var an=0,al=ao.length;an<al;an++){var am=ao[an];am.style.WebkitTransform="";am.style.MozTransform="";am.style.msTransform="";am.style.OTransform="";
|
||||
am.style.transform="";am.removeEventListener("click",C);}a();}}function X(al){if(typeof al==="boolean"){al?I():ae();}else{L()?ae():I();}}function L(){return f.wrapper.classList.contains("overview");
|
||||
}function ab(){var al=document.body;var am=al.requestFullScreen||al.webkitRequestFullScreen||al.mozRequestFullScreen||al.msRequestFullScreen;if(am){am.apply(al);
|
||||
}}function c(){f.wrapper.classList.add("paused");}function p(){f.wrapper.classList.remove("paused");}function aa(){if(ag()){p();}else{c();}}function ag(){return f.wrapper.classList.contains("paused");
|
||||
}function a(ar,aw){y=G;var ao=ak.concat();ak.length=0;var av=m,am=e;m=aj(l,ar===undefined?m:ar);e=aj(b,aw===undefined?e:aw);stateLoop:for(var ap=0,at=ak.length;
|
||||
ap<at;ap++){for(var an=0;an<ao.length;an++){if(ao[an]===ak[ap]){ao.splice(an,1);continue stateLoop;}}document.documentElement.classList.add(ak[ap]);r(ak[ap]);
|
||||
}while(ao.length){document.documentElement.classList.remove(ao.pop());}if(R.progress&&f.progress){f.progressbar.style.width=(m/(document.querySelectorAll(l).length-1))*window.innerWidth+"px";
|
||||
}if(L()){I();}s();clearTimeout(D);D=setTimeout(h,1500);var al=document.querySelectorAll(l);var au=al[m],aq=au.querySelectorAll("section");G=aq[e]||au;if(m!==av||e!==am){r("slidechanged",{indexh:m,indexv:e,previousSlide:y,currentSlide:G});
|
||||
}else{y=null;}if(y){y.classList.remove("present");}}function aj(ao,au){var am=Array.prototype.slice.call(document.querySelectorAll(ao)),at=am.length;if(at){if(R.loop){au%=at;
|
||||
if(au<0){au=at+au;}}au=Math.max(Math.min(au,at-1),0);for(var aq=0;aq<at;aq++){var ar=am[aq];if(L()===false){var al=Math.abs((au-aq)%(at-3))||0;ar.style.display=al>3?"none":"block";
|
||||
}am[aq].classList.remove("past");am[aq].classList.remove("present");am[aq].classList.remove("future");if(aq<au){am[aq].classList.add("past");}else{if(aq>au){am[aq].classList.add("future");
|
||||
}}if(ar.querySelector("section")){am[aq].classList.add("stack");}}am[au].classList.add("present");var an=am[au].getAttribute("data-state");if(an){ak=ak.concat(an.split(" "));
|
||||
}var ap=am[au].getAttribute("data-autoslide");if(ap){Y=parseInt(ap);}else{Y=R.autoSlide;}}else{au=0;}return au;}function s(){if(R.controls&&f.controls){var al=g();
|
||||
[f.controlsLeft,f.controlsRight,f.controlsUp,f.controlsDown].forEach(function(am){am.classList.remove("enabled");});if(al.left){f.controlsLeft.classList.add("enabled");
|
||||
}if(al.right){f.controlsRight.classList.add("enabled");}if(al.up){f.controlsUp.classList.add("enabled");}if(al.down){f.controlsDown.classList.add("enabled");
|
||||
}}}function g(){var al=document.querySelectorAll(l),am=document.querySelectorAll(b);return{left:m>0,right:m<al.length-1,up:e>0,down:e<am.length-1};}function J(){var aq=window.location.hash;
|
||||
var ap=aq.slice(2).split("/"),am=aq.replace(/#|\//gi,"");if(isNaN(parseInt(ap[0],10))&&am.length){var an=document.querySelector("#"+am);if(an){var ar=Reveal.getIndices(an);
|
||||
a(ar.h,ar.v);}else{a(m,e);}}else{var ao=parseInt(ap[0],10)||0,al=parseInt(ap[1],10)||0;a(ao,al);}}function h(){if(R.history){var al="/";if(m>0||e>0){al+=m;
|
||||
}if(e>0){al+="/"+e;}window.location.hash=al;}}function M(al){var ap=m,an=e;if(al){var aq=!!al.parentNode.nodeName.match(/section/gi);var ao=aq?al.parentNode:al;
|
||||
var am=Array.prototype.slice.call(document.querySelectorAll(l));ap=Math.max(am.indexOf(ao),0);if(aq){an=Math.max(Array.prototype.slice.call(al.parentNode.children).indexOf(al),0);
|
||||
}}return{h:ap,v:an};}function v(){if(document.querySelector(b+".present")){var am=document.querySelectorAll(b+".present .fragment:not(.visible)");if(am.length){am[0].classList.add("visible");
|
||||
r("fragmentshown",{fragment:am[0]});return true;}}else{var al=document.querySelectorAll(l+".present .fragment:not(.visible)");if(al.length){al[0].classList.add("visible");
|
||||
r("fragmentshown",{fragment:al[0]});return true;}}return false;}function Q(){if(document.querySelector(b+".present")){var am=document.querySelectorAll(b+".present .fragment.visible");
|
||||
if(am.length){am[am.length-1].classList.remove("visible");r("fragmenthidden",{fragment:am[am.length-1]});return true;}}else{var al=document.querySelectorAll(l+".present .fragment.visible");
|
||||
if(al.length){al[al.length-1].classList.remove("visible");r("fragmenthidden",{fragment:al[al.length-1]});return true;}}return false;}function O(){clearTimeout(k);
|
||||
if(Y){k=setTimeout(x,Y);}}function B(){if(g().left&&(L()||Q()===false)){a(m-1,0);}}function j(){if(g().right&&(L()||v()===false)){a(m+1,0);}}function u(){if(g().up&&(L()||Q()===false)){a(m,e-1);
|
||||
}}function F(){if(g().down&&(L()||v()===false)){a(m,e+1);}}function Z(){if(Q()===false){if(g().up){u();}else{var al=document.querySelector(".reveal .slides>section.past:nth-child("+m+")");
|
||||
if(al){e=(al.querySelectorAll("section").length+1)||0;m--;a();}}}}function x(){if(v()===false){g().down?F():j();}O();}function ah(an){var am=document.activeElement;
|
||||
var ao=!!(document.activeElement&&(document.activeElement.type||document.activeElement.href||document.activeElement.contentEditable!=="inherit"));if(ao||an.shiftKey||an.altKey||an.ctrlKey||an.metaKey){return;
|
||||
}var al=true;switch(an.keyCode){case 80:case 33:Z();break;case 78:case 34:x();break;case 72:case 37:B();break;case 76:case 39:j();break;case 75:case 38:u();
|
||||
break;case 74:case 40:F();break;case 36:a(0);break;case 35:a(Number.MAX_VALUE);break;case 32:L()?ae():x();break;case 13:L()?ae():al=false;break;case 66:case 190:aa();
|
||||
break;case 70:ab();break;default:al=false;}if(al){an.preventDefault();}else{if(an.keyCode===27&&T){X();an.preventDefault();}}O();}function A(al){ac.startX=al.touches[0].clientX;
|
||||
ac.startY=al.touches[0].clientY;ac.startCount=al.touches.length;if(al.touches.length===2&&R.overview){ac.startSpan=S({x:al.touches[1].clientX,y:al.touches[1].clientY},{x:ac.startX,y:ac.startY});
|
||||
}}function af(aq){if(!ac.handled){var ao=aq.touches[0].clientX;var an=aq.touches[0].clientY;if(aq.touches.length===2&&ac.startCount===2&&R.overview){var ap=S({x:aq.touches[1].clientX,y:aq.touches[1].clientY},{x:ac.startX,y:ac.startY});
|
||||
if(Math.abs(ac.startSpan-ap)>ac.threshold){ac.handled=true;if(ap<ac.startSpan){I();}else{ae();}}aq.preventDefault();}else{if(aq.touches.length===1&&ac.startCount!==2){var am=ao-ac.startX,al=an-ac.startY;
|
||||
if(am>ac.threshold&&Math.abs(am)>Math.abs(al)){ac.handled=true;B();}else{if(am<-ac.threshold&&Math.abs(am)>Math.abs(al)){ac.handled=true;j();}else{if(al>ac.threshold){ac.handled=true;
|
||||
u();}else{if(al<-ac.threshold){ac.handled=true;F();}}}}aq.preventDefault();}}}else{if(navigator.userAgent.match(/android/gi)){aq.preventDefault();}}}function W(al){ac.handled=false;
|
||||
}function o(al){clearTimeout(z);z=setTimeout(function(){var am=al.detail||-al.wheelDelta;if(am>0){x();}else{Z();}},100);}function ai(am){var al=Array.prototype.slice.call(document.querySelectorAll(l)).length;
|
||||
var an=Math.floor((am.clientX/f.wrapper.offsetWidth)*al);a(an);}function w(al){J();}function C(al){if(L()){al.preventDefault();ae();m=this.getAttribute("data-index-h");
|
||||
e=this.getAttribute("data-index-v");a();}}return{initialize:i,slide:a,left:B,right:j,up:u,down:F,prev:Z,next:x,prevFragment:Q,nextFragment:v,navigateTo:a,navigateLeft:B,navigateRight:j,navigateUp:u,navigateDown:F,navigatePrev:Z,navigateNext:x,toggleOverview:X,addEventListeners:E,removeEventListeners:U,getIndices:M,getPreviousSlide:function(){return y;
|
||||
},getCurrentSlide:function(){return G;},getQueryHash:function(){var al={};location.search.replace(/[A-Z0-9]+?=(\w*)/gi,function(am){al[am.split("=").shift()]=am.split("=").pop();
|
||||
});return al;},addEventListener:function(am,an,al){if("addEventListener" in window){(f.wrapper||document.querySelector(".reveal")).addEventListener(am,an,al);
|
||||
}},removeEventListener:function(am,an,al){if("addEventListener" in window){(f.wrapper||document.querySelector(".reveal")).removeEventListener(am,an,al);
|
||||
}}};})();
|
||||
@@ -1,27 +0,0 @@
|
||||
// From https://gist.github.com/1343518
|
||||
// Modified by Hakim to handle markdown indented with tabs
|
||||
(function(){
|
||||
|
||||
var slides = document.querySelectorAll('[data-markdown]');
|
||||
|
||||
for( var i = 0, len = slides.length; i < len; i++ ) {
|
||||
var elem = slides[i];
|
||||
|
||||
// strip leading whitespace so it isn't evaluated as code
|
||||
var text = elem.innerHTML;
|
||||
|
||||
var leadingWs = text.match(/^\n?(\s*)/)[1].length,
|
||||
leadingTabs = text.match(/^\n?(\t*)/)[1].length;
|
||||
|
||||
if( leadingTabs > 0 ) {
|
||||
text = text.replace( new RegExp('\\n?\\t{' + leadingTabs + '}','g'), '\n' );
|
||||
}
|
||||
else if( leadingWs > 1 ) {
|
||||
text = text.replace( new RegExp('\\n? {' + leadingWs + '}','g'), '\n' );
|
||||
}
|
||||
|
||||
// here, have sum HTML
|
||||
elem.innerHTML = (new Showdown.converter()).makeHtml(text);
|
||||
}
|
||||
|
||||
})();
|
||||
File diff suppressed because one or more lines are too long
1341
lib/js/showdown.js
1341
lib/js/showdown.js
File diff suppressed because it is too large
Load Diff
14
plugin/highlight/highlight.js
Normal file
14
plugin/highlight/highlight.js
Normal file
File diff suppressed because one or more lines are too long
32
plugin/markdown/markdown.js
Normal file
32
plugin/markdown/markdown.js
Normal file
@@ -0,0 +1,32 @@
|
||||
// From https://gist.github.com/1343518
|
||||
// Modified by Hakim to handle Markdown indented with tabs
|
||||
(function(){
|
||||
|
||||
if( typeof Showdown === 'undefined' ) {
|
||||
throw 'The reveal.js Markdown plugin requires Showdown to be loaded';
|
||||
}
|
||||
|
||||
var sections = document.querySelectorAll( '[data-markdown]' );
|
||||
|
||||
for( var i = 0, len = sections.length; i < len; i++ ) {
|
||||
var section = sections[i];
|
||||
|
||||
var template = section.querySelector( 'script' );
|
||||
|
||||
// strip leading whitespace so it isn't evaluated as code
|
||||
var text = ( template || section ).innerHTML;
|
||||
|
||||
var leadingWs = text.match(/^\n?(\s*)/)[1].length,
|
||||
leadingTabs = text.match(/^\n?(\t*)/)[1].length;
|
||||
|
||||
if( leadingTabs > 0 ) {
|
||||
text = text.replace( new RegExp('\\n?\\t{' + leadingTabs + '}','g'), '\n' );
|
||||
}
|
||||
else if( leadingWs > 1 ) {
|
||||
text = text.replace( new RegExp('\\n? {' + leadingWs + '}','g'), '\n' );
|
||||
}
|
||||
|
||||
section.innerHTML = (new Showdown.converter()).makeHtml(text);
|
||||
}
|
||||
|
||||
})();
|
||||
62
plugin/markdown/showdown.js
Normal file
62
plugin/markdown/showdown.js
Normal file
File diff suppressed because one or more lines are too long
@@ -6,8 +6,27 @@
|
||||
var socketId = Math.random().toString().slice(2);
|
||||
|
||||
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 ) {
|
||||
var fragmentData = {
|
||||
fragment : 'next',
|
||||
socketId : socketId
|
||||
};
|
||||
socket.emit('fragmentchanged', fragmentData);
|
||||
} );
|
||||
|
||||
// Fires when a fragment is hidden
|
||||
Reveal.addEventListener( 'fragmenthidden', function( event ) {
|
||||
var fragmentData = {
|
||||
fragment : 'previous',
|
||||
socketId : socketId
|
||||
};
|
||||
socket.emit('fragmentchanged', fragmentData);
|
||||
} );
|
||||
|
||||
// Fires when slide is changed
|
||||
Reveal.addEventListener( 'slidechanged', function( event ) {
|
||||
var nextindexh;
|
||||
var nextindexv;
|
||||
@@ -18,10 +18,13 @@ io.sockets.on('connection', function(socket) {
|
||||
socket.on('slidechanged', function(slideData) {
|
||||
socket.broadcast.emit('slidedata', slideData);
|
||||
});
|
||||
socket.on('fragmentchanged', function(fragmentData) {
|
||||
socket.broadcast.emit('fragmentdata', fragmentData);
|
||||
});
|
||||
});
|
||||
|
||||
app.configure(function() {
|
||||
[ 'css', 'js', 'plugin', 'lib' ].forEach(function(dir) {
|
||||
[ 'css', 'js', 'images', 'plugin', 'lib' ].forEach(function(dir) {
|
||||
app.use('/' + dir, staticDir(opts.baseDir + dir));
|
||||
});
|
||||
});
|
||||
@@ -32,19 +35,19 @@ app.get("/", function(req, res) {
|
||||
|
||||
app.get("/notes/:socketId", function(req, res) {
|
||||
|
||||
fs.readFile(opts.baseDir + 'plugin/speakernotes/notes.html', function(err, data) {
|
||||
fs.readFile(opts.baseDir + 'plugin/notes-server/notes.html', function(err, data) {
|
||||
res.send(Mustache.to_html(data.toString(), {
|
||||
socketId : req.params.socketId
|
||||
}));
|
||||
});
|
||||
// fs.createReadStream(opts.baseDir + 'speakernotes/notes.html').pipe(res);
|
||||
// fs.createReadStream(opts.baseDir + 'notes-server/notes.html').pipe(res);
|
||||
});
|
||||
|
||||
// Actually listen
|
||||
app.listen(opts.port || null);
|
||||
|
||||
var brown = '\033[33m',
|
||||
green = '\033[32m',
|
||||
var brown = '\033[33m',
|
||||
green = '\033[32m',
|
||||
reset = '\033[0m';
|
||||
|
||||
var slidesLocation = "http://localhost" + ( opts.port ? ( ':' + opts.port ) : '' );
|
||||
@@ -27,17 +27,23 @@
|
||||
width: 1280px;
|
||||
height: 1024px;
|
||||
border: none;
|
||||
-moz-transform: scale(0.5);
|
||||
-moz-transform-origin: 0 0;
|
||||
-o-transform: scale(0.5);
|
||||
-o-transform-origin: 0 0;
|
||||
-webkit-transform: scale(0.5);
|
||||
|
||||
-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: 320px;
|
||||
height: 256px;
|
||||
width: 448px;
|
||||
height: 358px;
|
||||
float: left;
|
||||
margin: 0 0 0 10px;
|
||||
overflow: hidden;
|
||||
@@ -47,12 +53,18 @@
|
||||
width: 1280px;
|
||||
height: 1024px;
|
||||
border: none;
|
||||
-moz-transform: scale(0.25);
|
||||
-moz-transform-origin: 0 0;
|
||||
-o-transform: scale(0.25);
|
||||
-o-transform-origin: 0 0;
|
||||
-webkit-transform: scale(0.25);
|
||||
|
||||
-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 {
|
||||
@@ -87,7 +99,7 @@
|
||||
<div id="notes"></div>
|
||||
|
||||
<script src="/socket.io/socket.io.js"></script>
|
||||
<script src="/lib/js/showdown.js"></script>
|
||||
<script src="/plugin/markdown/showdown.js"></script>
|
||||
|
||||
<script>
|
||||
var socketId = '{{socketId}}';
|
||||
@@ -100,15 +112,26 @@
|
||||
// ignore data from sockets that aren't ours
|
||||
if (data.socketId !== socketId) { return; }
|
||||
|
||||
if (data.markdown) {
|
||||
notes.innerHTML = (new Showdown.converter()).makeHtml(data.notes);
|
||||
}
|
||||
else {
|
||||
notes.innerHTML = data.notes;
|
||||
}
|
||||
if (data.markdown) {
|
||||
notes.innerHTML = (new Showdown.converter()).makeHtml(data.notes);
|
||||
}
|
||||
else {
|
||||
notes.innerHTML = data.notes;
|
||||
}
|
||||
|
||||
currentSlide.contentWindow.Reveal.navigateTo(data.indexh, data.indexv);
|
||||
nextSlide.contentWindow.Reveal.navigateTo(data.nextindexh, data.nextindexv);
|
||||
currentSlide.contentWindow.Reveal.slide(data.indexh, data.indexv);
|
||||
nextSlide.contentWindow.Reveal.slide(data.nextindexh, data.nextindexv);
|
||||
});
|
||||
socket.on('fragmentdata', function(data) {
|
||||
// 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();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
142
plugin/notes/notes.html
Normal file
142
plugin/notes/notes.html
Normal file
@@ -0,0 +1,142 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<title>reveal.js - Slide Notes</title>
|
||||
|
||||
<style>
|
||||
body {
|
||||
font-family: Helvetica;
|
||||
}
|
||||
|
||||
#notes {
|
||||
font-size: 24px;
|
||||
width: 640px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
#wrap-current-slide {
|
||||
width: 640px;
|
||||
height: 512px;
|
||||
float: left;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#current-slide {
|
||||
width: 1280px;
|
||||
height: 1024px;
|
||||
border: none;
|
||||
|
||||
-webkit-transform-origin: 0 0;
|
||||
-moz-transform-origin: 0 0;
|
||||
-ms-transform-origin: 0 0;
|
||||
-o-transform-origin: 0 0;
|
||||
transform-origin: 0 0;
|
||||
|
||||
-webkit-transform: scale(0.5);
|
||||
-moz-transform: scale(0.5);
|
||||
-ms-transform: scale(0.5);
|
||||
-o-transform: scale(0.5);
|
||||
transform: scale(0.5);
|
||||
}
|
||||
|
||||
#wrap-next-slide {
|
||||
width: 448px;
|
||||
height: 358px;
|
||||
float: left;
|
||||
margin: 0 0 0 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#next-slide {
|
||||
width: 1280px;
|
||||
height: 1024px;
|
||||
border: none;
|
||||
|
||||
-webkit-transform-origin: 0 0;
|
||||
-moz-transform-origin: 0 0;
|
||||
-ms-transform-origin: 0 0;
|
||||
-o-transform-origin: 0 0;
|
||||
transform-origin: 0 0;
|
||||
|
||||
-webkit-transform: scale(0.35);
|
||||
-moz-transform: scale(0.35);
|
||||
-ms-transform: scale(0.35);
|
||||
-o-transform: scale(0.35);
|
||||
transform: scale(0.35);
|
||||
}
|
||||
|
||||
.slides {
|
||||
position: relative;
|
||||
margin-bottom: 10px;
|
||||
border: 1px solid black;
|
||||
border-radius: 2px;
|
||||
background: rgb(28, 30, 32);
|
||||
}
|
||||
|
||||
.slides span {
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 3px;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
color: rgba( 255, 255, 255, 0.9 );
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="wrap-current-slide" class="slides">
|
||||
<iframe src="../../index.html" width="1280" height="1024" id="current-slide"></iframe>
|
||||
</div>
|
||||
|
||||
<div id="wrap-next-slide" class="slides">
|
||||
<iframe src="../../index.html" width="640" height="512" id="next-slide"></iframe>
|
||||
<span>UPCOMING:</span>
|
||||
</div>
|
||||
<div id="notes"></div>
|
||||
|
||||
<script src="../../plugin/markdown/showdown.js"></script>
|
||||
<script>
|
||||
window.addEventListener( 'load', function() {
|
||||
|
||||
(function( window, undefined ) {
|
||||
var notes = document.getElementById( 'notes' ),
|
||||
currentSlide = document.getElementById( 'current-slide' ),
|
||||
nextSlide = document.getElementById( 'next-slide' );
|
||||
|
||||
window.addEventListener( 'message', function( event ) {
|
||||
var data = JSON.parse( event.data );
|
||||
// No need for updating the notes in case of fragment changes
|
||||
if ( data.notes !== undefined) {
|
||||
if( data.markdown ) {
|
||||
notes.innerHTML = (new Showdown.converter()).makeHtml( data.notes );
|
||||
}
|
||||
else {
|
||||
notes.innerHTML = data.notes;
|
||||
}
|
||||
}
|
||||
|
||||
// Update the note slides
|
||||
currentSlide.contentWindow.Reveal.slide( data.indexh, data.indexv );
|
||||
nextSlide.contentWindow.Reveal.slide( data.nextindexh, data.nextindexv );
|
||||
|
||||
// Showing and hiding fragments
|
||||
if( data.fragment === 'next' ) {
|
||||
currentSlide.contentWindow.Reveal.nextFragment();
|
||||
}
|
||||
else if( data.fragment === 'prev' ) {
|
||||
currentSlide.contentWindow.Reveal.prevFragment();
|
||||
}
|
||||
|
||||
}, false );
|
||||
|
||||
})( window );
|
||||
|
||||
}, false );
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
98
plugin/notes/notes.js
Normal file
98
plugin/notes/notes.js
Normal file
@@ -0,0 +1,98 @@
|
||||
/**
|
||||
* Handles opening of and synchronization with the reveal.js
|
||||
* notes window.
|
||||
*/
|
||||
var RevealNotes = (function() {
|
||||
|
||||
function openNotes() {
|
||||
var notesPopup = window.open( 'plugin/notes/notes.html', 'reveal.js - Notes', 'width=1120,height=850' );
|
||||
|
||||
// Fires when slide is changed
|
||||
Reveal.addEventListener( 'slidechanged', function( event ) {
|
||||
post('slidechanged');
|
||||
} );
|
||||
|
||||
// Fires when a fragment is shown
|
||||
Reveal.addEventListener( 'fragmentshown', function( event ) {
|
||||
post('fragmentshown');
|
||||
} );
|
||||
|
||||
// Fires when a fragment is hidden
|
||||
Reveal.addEventListener( 'fragmenthidden', function( event ) {
|
||||
post('fragmenthidden');
|
||||
} );
|
||||
|
||||
/**
|
||||
* Posts the current slide data to the notes window
|
||||
*
|
||||
* @param {String} eventType Expecting 'slidechanged', 'fragmentshown'
|
||||
* or 'fragmenthidden' set in the events above to define the needed
|
||||
* slideDate.
|
||||
*/
|
||||
function post( eventType ) {
|
||||
var slideElement = Reveal.getCurrentSlide(),
|
||||
messageData;
|
||||
|
||||
if( eventType === 'slidechanged' ) {
|
||||
var notes = slideElement.querySelector( 'aside.notes' ),
|
||||
indexh = Reveal.getIndices().h,
|
||||
indexv = Reveal.getIndices().v,
|
||||
nextindexh,
|
||||
nextindexv;
|
||||
|
||||
if( slideElement.nextElementSibling && slideElement.parentNode.nodeName == 'SECTION' ) {
|
||||
nextindexh = indexh;
|
||||
nextindexv = indexv + 1;
|
||||
} else {
|
||||
nextindexh = indexh + 1;
|
||||
nextindexv = 0;
|
||||
}
|
||||
|
||||
messageData = {
|
||||
notes : notes ? notes.innerHTML : '',
|
||||
indexh : indexh,
|
||||
indexv : indexv,
|
||||
nextindexh : nextindexh,
|
||||
nextindexv : nextindexv,
|
||||
markdown : notes ? typeof notes.getAttribute( 'data-markdown' ) === 'string' : false
|
||||
};
|
||||
}
|
||||
else if( eventType === 'fragmentshown' ) {
|
||||
messageData = {
|
||||
fragment : 'next'
|
||||
};
|
||||
}
|
||||
else if( eventType === 'fragmenthidden' ) {
|
||||
messageData = {
|
||||
fragment : 'prev'
|
||||
};
|
||||
}
|
||||
|
||||
notesPopup.postMessage( JSON.stringify( messageData ), '*' );
|
||||
}
|
||||
|
||||
// Navigate to the current slide when the notes are loaded
|
||||
notesPopup.addEventListener( 'load', function( event ) {
|
||||
post('slidechanged');
|
||||
}, false );
|
||||
}
|
||||
|
||||
// If the there's a 'notes' query set, open directly
|
||||
if( window.location.search.match( /(\?|\&)notes/gi ) !== null ) {
|
||||
openNotes();
|
||||
}
|
||||
|
||||
// Open the notes when the 's' key is hit
|
||||
document.addEventListener( 'keydown', function( event ) {
|
||||
// Disregard the event if the target is editable or a
|
||||
// modifier is present
|
||||
if ( document.querySelector( ':focus' ) !== null || event.shiftKey || event.altKey || event.ctrlKey || event.metaKey ) return;
|
||||
|
||||
if( event.keyCode === 83 ) {
|
||||
event.preventDefault();
|
||||
openNotes();
|
||||
}
|
||||
}, false );
|
||||
|
||||
return { open: openNotes };
|
||||
})();
|
||||
251
plugin/zoom-js/zoom.js
Normal file
251
plugin/zoom-js/zoom.js
Normal file
@@ -0,0 +1,251 @@
|
||||
// Custom reveal.js integration
|
||||
(function(){
|
||||
document.querySelector( '.reveal' ).addEventListener( 'click', function( event ) {
|
||||
if( event.altKey ) {
|
||||
event.preventDefault();
|
||||
zoom.to({ element: event.target, pan: false });
|
||||
}
|
||||
} );
|
||||
})();
|
||||
|
||||
/*!
|
||||
* zoom.js 0.2 (modified version for use with reveal.js)
|
||||
* http://lab.hakim.se/zoom-js
|
||||
* MIT licensed
|
||||
*
|
||||
* Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
|
||||
*/
|
||||
var zoom = (function(){
|
||||
|
||||
// The current zoom level (scale)
|
||||
var level = 1;
|
||||
|
||||
// The current mouse position, used for panning
|
||||
var mouseX = 0,
|
||||
mouseY = 0;
|
||||
|
||||
// Timeout before pan is activated
|
||||
var panEngageTimeout = -1,
|
||||
panUpdateInterval = -1;
|
||||
|
||||
var currentOptions = null;
|
||||
|
||||
// Check for transform support so that we can fallback otherwise
|
||||
var supportsTransforms = 'WebkitTransform' in document.body.style ||
|
||||
'MozTransform' in document.body.style ||
|
||||
'msTransform' in document.body.style ||
|
||||
'OTransform' in document.body.style ||
|
||||
'transform' in document.body.style;
|
||||
|
||||
if( supportsTransforms ) {
|
||||
// The easing that will be applied when we zoom in/out
|
||||
document.body.style.transition = 'transform 0.8s ease';
|
||||
document.body.style.OTransition = '-o-transform 0.8s ease';
|
||||
document.body.style.msTransition = '-ms-transform 0.8s ease';
|
||||
document.body.style.MozTransition = '-moz-transform 0.8s ease';
|
||||
document.body.style.WebkitTransition = '-webkit-transform 0.8s ease';
|
||||
}
|
||||
|
||||
// Zoom out if the user hits escape
|
||||
document.addEventListener( 'keyup', function( event ) {
|
||||
if( level !== 1 && event.keyCode === 27 ) {
|
||||
zoom.out();
|
||||
}
|
||||
}, false );
|
||||
|
||||
// Monitor mouse movement for panning
|
||||
document.addEventListener( 'mousemove', function( event ) {
|
||||
if( level !== 1 ) {
|
||||
mouseX = event.clientX;
|
||||
mouseY = event.clientY;
|
||||
}
|
||||
}, false );
|
||||
|
||||
/**
|
||||
* Applies the CSS required to zoom in, prioritizes use of CSS3
|
||||
* transforms but falls back on zoom for IE.
|
||||
*
|
||||
* @param {Number} pageOffsetX
|
||||
* @param {Number} pageOffsetY
|
||||
* @param {Number} elementOffsetX
|
||||
* @param {Number} elementOffsetY
|
||||
* @param {Number} scale
|
||||
*/
|
||||
function magnify( pageOffsetX, pageOffsetY, elementOffsetX, elementOffsetY, scale ) {
|
||||
|
||||
if( supportsTransforms ) {
|
||||
var origin = pageOffsetX +'px '+ pageOffsetY +'px',
|
||||
transform = 'translate('+ -elementOffsetX +'px,'+ -elementOffsetY +'px) scale('+ scale +')';
|
||||
|
||||
document.body.style.transformOrigin = origin;
|
||||
document.body.style.OTransformOrigin = origin;
|
||||
document.body.style.msTransformOrigin = origin;
|
||||
document.body.style.MozTransformOrigin = origin;
|
||||
document.body.style.WebkitTransformOrigin = origin;
|
||||
|
||||
document.body.style.transform = transform;
|
||||
document.body.style.OTransform = transform;
|
||||
document.body.style.msTransform = transform;
|
||||
document.body.style.MozTransform = transform;
|
||||
document.body.style.WebkitTransform = transform;
|
||||
}
|
||||
else {
|
||||
// Reset all values
|
||||
if( scale === 1 ) {
|
||||
document.body.style.position = '';
|
||||
document.body.style.left = '';
|
||||
document.body.style.top = '';
|
||||
document.body.style.width = '';
|
||||
document.body.style.height = '';
|
||||
document.body.style.zoom = '';
|
||||
}
|
||||
// Apply scale
|
||||
else {
|
||||
document.body.style.position = 'relative';
|
||||
document.body.style.left = ( - ( pageOffsetX + elementOffsetX ) / scale ) + 'px';
|
||||
document.body.style.top = ( - ( pageOffsetY + elementOffsetY ) / scale ) + 'px';
|
||||
document.body.style.width = ( scale * 100 ) + '%';
|
||||
document.body.style.height = ( scale * 100 ) + '%';
|
||||
document.body.style.zoom = scale;
|
||||
}
|
||||
}
|
||||
|
||||
level = scale;
|
||||
|
||||
if( level !== 1 && document.documentElement.classList ) {
|
||||
document.documentElement.classList.add( 'zoomed' );
|
||||
}
|
||||
else {
|
||||
document.documentElement.classList.remove( 'zoomed' );
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Pan the document when the mosue cursor approaches the edges
|
||||
* of the window.
|
||||
*/
|
||||
function pan() {
|
||||
var range = 0.12,
|
||||
rangeX = window.innerWidth * range,
|
||||
rangeY = window.innerHeight * range,
|
||||
scrollOffset = getScrollOffset();
|
||||
|
||||
// Up
|
||||
if( mouseY < rangeY ) {
|
||||
window.scroll( scrollOffset.x, scrollOffset.y - ( 1 - ( mouseY / rangeY ) ) * ( 14 / level ) );
|
||||
}
|
||||
// Down
|
||||
else if( mouseY > window.innerHeight - rangeY ) {
|
||||
window.scroll( scrollOffset.x, scrollOffset.y + ( 1 - ( window.innerHeight - mouseY ) / rangeY ) * ( 14 / level ) );
|
||||
}
|
||||
|
||||
// Left
|
||||
if( mouseX < rangeX ) {
|
||||
window.scroll( scrollOffset.x - ( 1 - ( mouseX / rangeX ) ) * ( 14 / level ), scrollOffset.y );
|
||||
}
|
||||
// Right
|
||||
else if( mouseX > window.innerWidth - rangeX ) {
|
||||
window.scroll( scrollOffset.x + ( 1 - ( window.innerWidth - mouseX ) / rangeX ) * ( 14 / level ), scrollOffset.y );
|
||||
}
|
||||
}
|
||||
|
||||
function getScrollOffset() {
|
||||
return {
|
||||
x: window.scrollX !== undefined ? window.scrollX : window.pageXOffset,
|
||||
y: window.scrollY !== undefined ? window.scrollY : window.pageXYffset
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
/**
|
||||
* Zooms in on either a rectangle or HTML element.
|
||||
*
|
||||
* @param {Object} options
|
||||
* - element: HTML element to zoom in on
|
||||
* OR
|
||||
* - x/y: coordinates in non-transformed space to zoom in on
|
||||
* - width/height: the portion of the screen to zoom in on
|
||||
* - scale: can be used instead of width/height to explicitly set scale
|
||||
*/
|
||||
to: function( options ) {
|
||||
// Due to an implementation limitation we can't zoom in
|
||||
// to another element without zooming out first
|
||||
if( level !== 1 ) {
|
||||
zoom.out();
|
||||
}
|
||||
else {
|
||||
options.x = options.x || 0;
|
||||
options.y = options.y || 0;
|
||||
|
||||
// If an element is set, that takes precedence
|
||||
if( !!options.element ) {
|
||||
// Space around the zoomed in element to leave on screen
|
||||
var padding = 20;
|
||||
|
||||
options.width = options.element.getBoundingClientRect().width + ( padding * 2 );
|
||||
options.height = options.element.getBoundingClientRect().height + ( padding * 2 );
|
||||
options.x = options.element.getBoundingClientRect().left - padding;
|
||||
options.y = options.element.getBoundingClientRect().top - padding;
|
||||
}
|
||||
|
||||
// If width/height values are set, calculate scale from those values
|
||||
if( options.width !== undefined && options.height !== undefined ) {
|
||||
options.scale = Math.max( Math.min( window.innerWidth / options.width, window.innerHeight / options.height ), 1 );
|
||||
}
|
||||
|
||||
if( options.scale > 1 ) {
|
||||
options.x *= options.scale;
|
||||
options.y *= options.scale;
|
||||
|
||||
var scrollOffset = getScrollOffset();
|
||||
|
||||
if( options.element ) {
|
||||
scrollOffset.x -= ( window.innerWidth - ( options.width * options.scale ) ) / 2;
|
||||
}
|
||||
|
||||
magnify( scrollOffset.x, scrollOffset.y, options.x, options.y, options.scale );
|
||||
|
||||
if( options.pan !== false ) {
|
||||
|
||||
// Wait with engaging panning as it may conflict with the
|
||||
// zoom transition
|
||||
panEngageTimeout = setTimeout( function() {
|
||||
panUpdateInterval = setInterval( pan, 1000 / 60 );
|
||||
}, 800 );
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
currentOptions = options;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Resets the document zoom state to its default.
|
||||
*/
|
||||
out: function() {
|
||||
clearTimeout( panEngageTimeout );
|
||||
clearInterval( panUpdateInterval );
|
||||
|
||||
var scrollOffset = getScrollOffset();
|
||||
|
||||
if( currentOptions && currentOptions.element ) {
|
||||
scrollOffset.x -= ( window.innerWidth - ( currentOptions.width * currentOptions.scale ) ) / 2;
|
||||
}
|
||||
|
||||
magnify( scrollOffset.x, scrollOffset.y, 0, 0, 1 );
|
||||
|
||||
level = 1;
|
||||
},
|
||||
|
||||
// Alias
|
||||
magnify: function( options ) { this.to( options ) },
|
||||
reset: function() { this.out() },
|
||||
|
||||
zoomLevel: function() {
|
||||
return level;
|
||||
}
|
||||
}
|
||||
|
||||
})();
|
||||
|
||||
Reference in New Issue
Block a user