phyks/reveal-js-base-theme
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
README.md
View File

@ -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)

54
css/main.css
View File

@ -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
*********************************************/

6
index.html
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.
</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)

2
js/reveal.js
View File

@ -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 ) {