From 7366f607ceac8b08fbd67923d3fc9ef16a52db84 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Thu, 12 Jul 2012 23:08:21 -0400 Subject: [PATCH] add beige theme, move theme class from .reveal to document element, use log instead of alert to demonstrate custom events --- README.md | 3 ++- css/main.css | 54 ++++++++++++++++++++++++++++++++++++++++++++++------ index.html | 6 +++--- js/reveal.js | 2 +- 4 files changed, 54 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index f6bb48b9..d6e3c352 100644 --- a/README.md +++ b/README.md @@ -49,7 +49,7 @@ Reveal.initialize({ rollingLinks: true, // UI style - theme: 'default', // default/neon + theme: 'default', // default/neon/beige // Transition style transition: 'default' // default/cube/page/concave/linear(2d) @@ -169,6 +169,7 @@ You can change the appearance of the speaker notes by editing the file at `plugi - Folder structure updates for scalability (see /lib & /plugin) - Slide notes by [rmurphey](https://github.com/rmurphey) - Bumped up default font-size for code samples +- Added beige theme #### 1.3 - Revised keyboard shortcuts, including ESC for overview, N for next, P for previous. Thanks [mahemoff](https://github.com/mahemoff) diff --git a/css/main.css b/css/main.css index 01145b7f..ba3c420c 100644 --- a/css/main.css +++ b/css/main.css @@ -849,22 +849,64 @@ body { * NEON THEME *********************************************/ -.reveal.neon a, -.reveal.neon a:hover, -.reveal.neon .controls a.enabled { +.theme-neon .reveal a, +.theme-neon .reveal a:hover, +.theme-neon .reveal .controls a.enabled { color: #5de048; } -.reveal.neon .progress span, -.reveal.neon .roll span:after { +.theme-neon .reveal .progress span, +.theme-neon .reveal .roll span:after { background: #5de048; } -.reveal.neon a.image:hover img { +.theme-neon .reveal a.image:hover img { border-color: #5de048; } +/********************************************* + * BEIGE THEME + *********************************************/ + +.theme-beige body { + 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%); +} + +.theme-beige .reveal h1, +.theme-beige .reveal h2, +.theme-beige .reveal h3, +.theme-beige .reveal h4, +.theme-beige .reveal h5, +.theme-beige .reveal h6 { + color: #333; + text-shadow: none; +} + +.theme-beige .reveal a, +.theme-beige .reveal a:hover, +.theme-beige .reveal .controls a.enabled { + color: #8b743d; +} + +.theme-beige .reveal .progress span, +.theme-beige .reveal .roll span:after { + background: #8b743d; +} + +.theme-beige .reveal a.image:hover img { + border-color: #8b743d; +} + + /********************************************* * OVERVIEW *********************************************/ diff --git a/index.html b/index.html index c32b757d..7f05d120 100644 --- a/index.html +++ b/index.html @@ -164,7 +164,7 @@ Additionally custom events can be triggered on a per slide basis by binding to the data-state name.

Reveal.addEventListener( 'customevent', function() {
-	alert( '"customevent" has fired' );
+	console.log( '"customevent" has fired' );
 } );
 					
@@ -271,7 +271,7 @@ function linkify( selector ) { // Fires when a slide with data-state=customevent is activated Reveal.addEventListener( 'customevent', function() { - alert( '"customevent" has fired' ); + console.log( '"customevent" has fired' ); } ); // Fires each time a new slide is activated @@ -299,7 +299,7 @@ function linkify( selector ) { rollingLinks: true, // UI style - theme: query.theme || 'default', // default/neon + theme: query.theme || 'default', // default/neon/beige // Transition style transition: query.transition || 'default' // default/cube/page/concave/linear(2d) diff --git a/js/reveal.js b/js/reveal.js index e753d17d..856b1aa1 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -139,7 +139,7 @@ var Reveal = (function(){ } if( config.theme !== 'default' ) { - dom.wrapper.classList.add( config.theme ); + document.documentElement.classList.add( 'theme-' + config.theme ); } if( config.mouseWheel ) {