forked from blallo/talk-hm-0x15
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:
parent
5bc5435b61
commit
7366f607ce
4 changed files with 54 additions and 11 deletions
|
@ -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
54
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
|
||||
*********************************************/
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -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 ) {
|
||||
|
|
Loading…
Reference in a new issue