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

This commit is contained in:
Hakim El Hattab 2012-07-12 23:08:21 -04:00
parent 5bc5435b61
commit 7366f607ce
4 changed files with 54 additions and 11 deletions

View File

@ -49,7 +49,7 @@ Reveal.initialize({
rollingLinks: true, rollingLinks: true,
// UI style // UI style
theme: 'default', // default/neon theme: 'default', // default/neon/beige
// Transition style // Transition style
transition: 'default' // default/cube/page/concave/linear(2d) 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) - Folder structure updates for scalability (see /lib & /plugin)
- Slide notes by [rmurphey](https://github.com/rmurphey) - Slide notes by [rmurphey](https://github.com/rmurphey)
- Bumped up default font-size for code samples - Bumped up default font-size for code samples
- Added beige theme
#### 1.3 #### 1.3
- Revised keyboard shortcuts, including ESC for overview, N for next, P for previous. Thanks [mahemoff](https://github.com/mahemoff) - Revised keyboard shortcuts, including ESC for overview, N for next, P for previous. Thanks [mahemoff](https://github.com/mahemoff)

View File

@ -849,22 +849,64 @@ body {
* NEON THEME * NEON THEME
*********************************************/ *********************************************/
.reveal.neon a, .theme-neon .reveal a,
.reveal.neon a:hover, .theme-neon .reveal a:hover,
.reveal.neon .controls a.enabled { .theme-neon .reveal .controls a.enabled {
color: #5de048; color: #5de048;
} }
.reveal.neon .progress span, .theme-neon .reveal .progress span,
.reveal.neon .roll span:after { .theme-neon .reveal .roll span:after {
background: #5de048; background: #5de048;
} }
.reveal.neon a.image:hover img { .theme-neon .reveal a.image:hover img {
border-color: #5de048; 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 * OVERVIEW
*********************************************/ *********************************************/

View File

@ -164,7 +164,7 @@
Additionally custom events can be triggered on a per slide basis by binding to the <code>data-state</code> name. Additionally custom events can be triggered on a per slide basis by binding to the <code>data-state</code> name.
</p> </p>
<pre><code contenteditable style="font-size: 18px; margin-top: 20px;">Reveal.addEventListener( 'customevent', function() { <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> </code></pre>
</section> </section>
@ -271,7 +271,7 @@ function linkify( selector ) {
// Fires when a slide with data-state=customevent is activated // Fires when a slide with data-state=customevent is activated
Reveal.addEventListener( 'customevent', function() { Reveal.addEventListener( 'customevent', function() {
alert( '"customevent" has fired' ); console.log( '"customevent" has fired' );
} ); } );
// Fires each time a new slide is activated // Fires each time a new slide is activated
@ -299,7 +299,7 @@ function linkify( selector ) {
rollingLinks: true, rollingLinks: true,
// UI style // UI style
theme: query.theme || 'default', // default/neon theme: query.theme || 'default', // default/neon/beige
// Transition style // Transition style
transition: query.transition || 'default' // default/cube/page/concave/linear(2d) transition: query.transition || 'default' // default/cube/page/concave/linear(2d)

View File

@ -139,7 +139,7 @@ var Reveal = (function(){
} }
if( config.theme !== 'default' ) { if( config.theme !== 'default' ) {
dom.wrapper.classList.add( config.theme ); document.documentElement.classList.add( 'theme-' + config.theme );
} }
if( config.mouseWheel ) { if( config.mouseWheel ) {