From 7366f607ceac8b08fbd67923d3fc9ef16a52db84 Mon Sep 17 00:00:00 2001
From: Hakim El Hattab <hakim.elhattab@gmail.com>
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 <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 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 ) {
--
GitLab