Преглед на файлове

add beige theme, move theme class from .reveal to document element, use log instead of alert to demonstrate custom events

Hakim El Hattab преди 12 години
родител
ревизия
7366f607ce
променени са 4 файла, в които са добавени 54 реда и са изтрити 11 реда
  1. 2 1
      README.md
  2. 48 6
      css/main.css
  3. 3 3
      index.html
  4. 1 1
      js/reveal.js

+ 2 - 1
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)

+ 48 - 6
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
  *********************************************/

+ 3 - 3
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)

+ 1 - 1
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 ) {