add beige theme, move theme class from .reveal to document element, use log instead...

diff --git a/README.md b/README.md
index f6bb48b95bf7a48cae83deab99949acf11d58d92..d6e3c352696c7c54057cf2671651660b15c57cc4 100644 (file)
--- 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 01145b7fefa658e17f473e51b39fb054a067cf89..ba3c420cefdc17a7df40990a070ad1056fd5c49a 100644 (file)
--- 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 c32b757d91380be67a120bcc204024e6899db595..7f05d120de22e24ce95dbb7352f9221557731626 100644 (file)
--- 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 <code>data-state</code> name.
                                        </p>
                                        <pre><code contenteditable style="font-size: 18px; margin-top: 20px;">Reveal.addEventListener( 'customevent', function() {
-       alert( '"customevent" has fired' );
+       console.log( '"customevent" has fired' );
 } );
                                        </code></pre>
                                </section>
@@ -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 e753d17d0caccdff5a98ee5bd39175d9e1b5761a..856b1aa19b44798d69e8a64b978761f1a9806c9e 100644 (file)
--- 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 ) {