diff --git a/css/main.css b/css/main.css index d2887bf..8376701 100644 --- a/css/main.css +++ b/css/main.css @@ -898,23 +898,29 @@ html { /********************************************* - * STATES + * DEFAULT STATES *********************************************/ -.blurred #reveal * { - color: rgba( 255, 255, 255, 0 ); - text-shadow: 0px 0px 5px #fff; +.state-background { + position: absolute; + width: 100%; + height: 100%; + background: rgba( 0, 0, 0, 0 ); - -webkit-transition: color .8s ease, - text-shadow .8s ease; - -moz-transition: color .8s ease, - text-shadow .8s ease; - -ms-transition: color .8s ease, - text-shadow .8s ease; - -o-transition: color .8s ease, - text-shadow .8s ease; - transition: color .8s ease, - text-shadow .8s ease; + -webkit-transition: background 800ms ease; + -moz-transition: background 800ms ease; + -ms-transition: background 800ms ease; + -o-transition: background 800ms ease; + transition: background 800ms ease; +} +.alert .state-background { + background: rgba( 200, 50, 30, 0.6 ); +} +.soothe .state-background { + background: rgba( 50, 200, 90, 0.4 ); +} +.blackout .state-background { + background: rgba( 0, 0, 0, 0.6 ); } diff --git a/index.html b/index.html index e67b3e8..22b159a 100644 --- a/index.html +++ b/index.html @@ -20,6 +20,9 @@
+ + +
@@ -114,13 +117,30 @@ -
-

Global State

-

- If you set data-state="something" on a slide, "something" - will be added as a class to the document element when the slide is open. Like the "blur" - effect on this slide. -

+
+
+

Global State

+

+ Set data-state="something" on a slide and "something" + will be added as a class to the document element when the slide is open. This let's you + apply broader style changes, like switching the background. +

+ + + +
+
+

"blackout"

+ + + +
+
+

"soothe"

+ + + +
@@ -253,12 +273,6 @@ transition: query.transition || 'default' // default/cube/page/concave/linear(2d) }); - // Example of binding an event to a state. This listener will trigger - // when the slide with 'data-state="blurred"' is opened. - document.addEventListener( 'blurred', function() { - - }, false ); - hljs.initHighlightingOnLoad();