Skip to content
GitLab
Commit a6453a0f authored by Hakim El Hattab's avatar Hakim El Hattab
Browse files

renamed to reveal.js, many new features, and upgraded to v1.0

parent 40f85e43
Expand all Hide whitespace changes
Inline Side-by-side
css/main.css
View file @ a6453a0f
/**
* Main styles of reveal.js
*
* @author Hakim El Hattab
*/
......@@ -20,33 +22,32 @@
*********************************************/
html, body {
position: relative;
padding: 0;
margin: 0;
overflow: hidden;
overflow-x: hidden;
overflow-y: auto;
font-family: 'Crimson Text', Times, 'Times New Roman', serif;
font-family: 'Lato', Times, 'Times New Roman', serif;
font-size: 36px;
font-weight: 200;
letter-spacing: -0.02em;
background: #fff;
color: #222;
background: #111;
color: #eee;
width: 100%;
height: 100%;
background-image: -webkit-gradient(
radial,
50% 50%, 0,
50% 50%, 1000,
from(rgba(245,245,245,1.0)),
to(rgba(100,100,100,1.0))
);
background-image: -moz-radial-gradient(
50% 50% 90deg,
rgba(245,245,245,1.0) 0%,
rgba(100,100,100,1.0) 100%
);
min-height: 600px;
background: #555a5f;
background: -moz-radial-gradient(center, ellipse 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, ellipse cover, #555a5f 0%,#1c1e20 100%);
background: -o-radial-gradient(center, ellipse cover, #555a5f 0%,#1c1e20 100%);
background: -ms-radial-gradient(center, ellipse cover, #555a5f 0%,#1c1e20 100%);
background: radial-gradient(center, ellipse cover, #555a5f 0%,#1c1e20 100%);
}
......@@ -56,16 +57,14 @@ html, body {
h1, h2, h3, h4 {
margin: 0 0 20px 0;
color: #222;
color: #eee;
font-family: 'League Gothic', Arial, Helvetica, sans-serif;
font-family: 'League Gothic', sans-serif;
line-height: 0.9em;
letter-spacing: 0.02em;
text-transform: uppercase;
text-shadow: 0px 1px 0px #eee,
0px 0px 4px #bbb;
text-shadow: 0px 0px 6px rgba(0,0,0,0.2);
}
h1 { font-size: 136px; }
......@@ -78,8 +77,21 @@ h2.inverted,
h3.inverted,
h4.inverted {
color: #fff;
text-shadow: 0px 0px 1px #fff,
0px 0px 1px #888;
text-shadow: 0px 0px 2px rgba(0,0,0,0.2);
}
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);
}
......@@ -88,18 +100,24 @@ h4.inverted {
*********************************************/
#main {
position: absolute;
width: 800px;
width: 900px;
height: 600px;
left: 50%;
top: 50%;
margin-left: -400px;
margin-left: -450px;
margin-top: -320px;
padding: 20px 0px;
text-align: center;
-webkit-perspective: 600px;
-moz-perspective: 600px;
perspective: 600px;
-webkit-perspective-origin: 50% 25%;
-moz-perspective-origin: 50% 25%;
perspective-origin: 50% 25%;
}
#main>section,
......@@ -111,6 +129,8 @@ h4.inverted {
min-height: 600px;
-webkit-transform-style: preserve-3d;
-moz-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);
......@@ -122,52 +142,136 @@ h4.inverted {
display: block;
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0)
rotateY(-90deg)
translate3d(-100%, 0, 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);
transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
}
/*********************************************
* DEFAULT THEME
*********************************************/
#main section.present {
display: block;
position: relative;
position: absolute;
z-index: 10;
-webkit-transform-style: flat;
-moz-transform-style: flat;
transform-style: flat;
}
#main section.future {
display: block;
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0)
rotateY(90deg)
translate3d(100%, 0, 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);
transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
}
#main section>section.past {
display: block;
opacity: 0;
-webkit-transform: translate3d(0, -50%, 0)
rotateX(70deg)
translate3d(0, -50%, 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);
transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0);
}
#main section>section.future {
display: block;
opacity: 0;
-webkit-transform: translate3d(0, 50%, 0)
rotateX(-70deg)
translate3d(0, 50%, 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);
transform: translate3d(0, 50%, 0) rotateX(-70deg) translate3d(0, 50%, 0);
}
/*********************************************
* CONCAVE THEME
*********************************************/
.concave #main>section.past {
-webkit-transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
}
.concave #main>section.future {
-webkit-transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
}
/*********************************************
* LINEAR THEME
*********************************************/
.linear #main>section.past {
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.linear #main>section.future {
-webkit-transform: translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
.linear #main section>section.past {
-webkit-transform: translate3d(0, -100%, 0);
-moz-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
.linear #main section>section.future {
-webkit-transform: translate3d(0, 100%, 0);
-moz-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
/*********************************************
* VIEW FRAGMENTS
*********************************************/
#main section .fragment {
opacity: 0;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}
#main section .fragment.visible {
opacity: 1;
}
/*********************************************
* DEFAULT ELEMENT STYLES
*********************************************/
#main>section {
line-height: 1.2em;
text-shadow: 0px 0px 2px #fff, 0px 0px 4px #bbb;
font-weight: 600;
font-weight: normal;
}
strong, b {
font-weight: bold;
}
em, i {
font-style: italic;
}
ol, ul {
display: inline-block;
text-align: left;
margin: 0 auto;
}
ol {
......@@ -175,20 +279,79 @@ ol {
list-style-position: inside;
}
li, p {
ul {
list-style: disc;
}
p {
margin-bottom: 10px;
}
blockquote {
display: block;
position: relative;
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);
}
blockquote:before {
content: '“';
}
blockquote:after {
content: '”';
}
pre {
display: block;
position: relative;
width: 90%;
margin: 10px auto;
text-align: left;
font-size: 14px;
font-family: monospace;
line-height: 1.1em;
word-wrap: break-word;
box-shadow: 0px 0px 6px rgba(0,0,0,0.3);
}
code {
font-family: monospace;
}
small {
font-size: 60%;
}
q {
font-style: italic;
}
q:before {
content: '“';
}
q:after {
content: '”';
}
a:not(.image) {
color: #1b6263;
color: hsl(185, 85%, 50%);
text-decoration: none;
border-bottom: 1px dashed rgba(0,0,0,0.3);
padding: 1px 3px;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}
a:not(.image):hover {
color: #fff;
background: #2fa794;
color: hsl(185, 85%, 70%);
background: hsla(185, 25%, 20%, 0.4);
text-shadow: none;
border: none;
border-radius: 2px;
......@@ -201,27 +364,141 @@ img {
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
-o-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 .11s linear;
-moz-transition: all .11s linear;
-o-transition: all .11s linear;
transition: all .11s linear;
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
transition: all .2s linear;
}
a.image:hover img {
background: rgba(255,255,255,0.2);
border-color: #13DAEC;
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
-o-box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
}
/*********************************************
* CONTROLS
*********************************************/
.controls {
display: none;
position: fixed;
width: 100px;
height: 100px;
right: 0;
bottom: 0;
}
.controls a {
font-size: 30px;
position: absolute;
opacity: 0.1;
color: #fff;
}
.controls a.enabled {
opacity: 0.6;
color: hsl(185, 85%, 70%);
text-shadow: 0px 0px 2px hsla(185, 45%, 70%, 0.3);
}
.controls a.enabled:active {
margin-top: 1px;
}
.controls .left {
top: 30px;
}
.controls .right {
left: 60px;
top: 30px;
}
.controls .up {
left: 30px;
}
.controls .down {
left: 30px;
top: 60px;
}
/*********************************************
* ROLLING LINKS
*********************************************/
.roll {
display: inline-block;
overflow: hidden;
vertical-align: top;
-webkit-perspective: 400px;
-moz-perspective: 400px;
perspective: 400px;
-webkit-perspective-origin: 50% 50%;
-moz-perspective-origin: 50% 50%;
perspective-origin: 50% 50%;
}
.roll:hover {
background: none;
text-shadow: none;
}
.roll span {
display: block;
position: relative;
padding: 0 2px;
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
transition: all 400ms ease;
-webkit-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.roll:hover span {
background: rgba(0,0,0,0.5);
-webkit-transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
-moz-transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
}
.roll span:after {
content: attr(data-title);
display: block;
position: absolute;
left: 0;
top: 0;
padding: 0 2px;
color: #fff;
background: hsl(185, 60%, 35%);
-webkit-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
-moz-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
}
index.html
View file @ a6453a0f
This diff is collapsed.
js/slideshow.js → js/reveal.js
View file @ a6453a0f
......@@ -21,21 +21,21 @@
*/
/**
* Handles the very minimal navigation logic involved in the
* slideshow. Including keyboard navigation, touch interaction
* and URL history behavior.
* Reveal.js is an easy to use HTML based slideshow enhanced by
* sexy CSS 3D transforms.
*
* Slides are given unique hash based URL's so that they can be
* opened directly. I didn't use the HTML5 History API for this
* as it would have required the addition of server side rewrite
* rules and hence require more effort for anyone to set up.
*
* This component can be called from other scripts via a tiny API:
* - Slideshow.navigateTo( indexh, indexv );
* - Slideshow.navigateLeft();
* - Slideshow.navigateRight();
* - Slideshow.navigateUp();
* - Slideshow.navigateDown();
* Public facing methods:
* - Reveal.initialize( { ... options ... } );
* - Reveal.navigateTo( indexh, indexv );
* - Reveal.navigateLeft();
* - Reveal.navigateRight();
* - Reveal.navigateUp();
* - Reveal.navigateDown();
*
*
* version 0.1:
......@@ -52,26 +52,84 @@
* version 0.4:
* - Fixed broken links on touch devices.
*
* version 1.0:
* - Added controls
* - Added initialization options
* - Reveal views in fragments
* - Revamped, darker, theme
* - Tweaked markup styles (a, em, strong, b, i, blockquote, q, pre, ul, ol)
* - Support for themes at initialization (default/linear/concave)
* - Code highlighting via highlight.js
*
* TODO:
* - Touch/swipe interactions
*
* @author Hakim El Hattab
* @version 0.4
* @version 1.0
*/
var Slideshow = (function(){
var Reveal = (function(){
var indexh = 0,
indexv = 0;
var HORIZONTAL_SLIDES_SELECTOR = '#main>section',
VERTICAL_SLIDES_SELECTOR = 'section.present>section',
indexh = 0,
indexv = 0,
config = {},
dom = {};
/**
* Activates the main program logic.
*/
function initialize() {
function initialize( options ) {
// Gather references to DOM elements
dom.controls = document.querySelector( '.controls' );
dom.controlsLeft = document.querySelector( '.controls .left' );
dom.controlsRight = document.querySelector( '.controls .right' );
dom.controlsUp = document.querySelector( '.controls .up' );
dom.controlsDown = document.querySelector( '.controls .down' );
// Add event listeners
document.addEventListener('keydown', onDocumentKeyDown, false);
document.addEventListener('touchstart', onDocumentTouchStart, false);
window.addEventListener('hashchange', onWindowHashChange, false);
dom.controlsLeft.addEventListener('click', preventAndForward( navigateLeft ), false);
dom.controlsRight.addEventListener('click', preventAndForward( navigateRight ), false);
dom.controlsUp.addEventListener('click', preventAndForward( navigateUp ), false);
dom.controlsDown.addEventListener('click', preventAndForward( navigateDown ), false);
// Set default configuration
config.rollingLinks = options.rollingLinks === undefined ? true : options.rollingLinks;
config.controls = options.controls === undefined ? false : options.controls;
config.theme = options.theme === undefined ? 'default' : options.theme;
if( config.controls ) {
dom.controls.style.display = 'block';
}
if( config.theme !== 'default' ) {