added new transitions (box/page) and a ui theme (neon)

diff --git a/css/main.css b/css/main.css
index 75b113586b17e6340e90dd6ed8982b1fe1ec35f5..8c8133b09cd4fc78e1bf2132a88536f9df93591d 100644 (file)
--- a/css/main.css
+++ b/css/main.css
@@ -94,199 +94,6 @@ h1 {
 }
 
 
-/*********************************************
- * SLIDES
- *********************************************/
-#main {
-       position: absolute;
-       width: 900px;
-       height: 600px;
-       
-       left: 50%;
-       top: 50%;
-       margin-left: -450px;
-       margin-top: -320px;
-       padding: 20px 0px;
-       
-       text-align: center;
-       
-       -webkit-perspective: 600px;
-          -moz-perspective: 600px;
-           -ms-perspective: 600px;
-               perspective: 600px;
-
-       -webkit-perspective-origin: 50% 25%;
-          -moz-perspective-origin: 50% 25%;
-           -ms-perspective-origin: 50% 25%;
-               perspective-origin: 50% 25%;
-}
-
-#main>section,
-#main>section>section {
-       display: none;
-       position: absolute;
-       width: 100%;
-       min-height: 600px;
-
-    z-index: 10;
-       
-       -webkit-transform-style: preserve-3d;
-          -moz-transform-style: preserve-3d;
-           -ms-transform-style: preserve-3d;
-               transform-style: preserve-3d;
-       
-       -webkit-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-          -moz-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-           -ms-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-            -o-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-               transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-}
-
-#main section.present {
-       display: block;
-       z-index: 11;
-       opacity: 1;
-}
-
-
-/*********************************************
- * DEFAULT THEME
- *********************************************/
-
-#main section.past {
-       display: block;
-       opacity: 0;
-       
-       -webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
-          -moz-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
-           -ms-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
-               transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
-}
-
-#main section.future {
-       display: block;
-       opacity: 0;
-       
-       -webkit-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
-          -moz-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
-           -ms-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
-               transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
-}
-
-#main section>section.past {
-       display: block;
-       opacity: 0;
-       
-       -webkit-transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0);
-          -moz-transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0);
-           -ms-transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0);
-               transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0);
-}
-#main section>section.future {
-       display: block;
-       opacity: 0;
-       
-       -webkit-transform: translate3d(0, 50%, 0) rotateX(-70deg) translate3d(0, 50%, 0);
-          -moz-transform: translate3d(0, 50%, 0) rotateX(-70deg) translate3d(0, 50%, 0);
-           -ms-transform: translate3d(0, 50%, 0) rotateX(-70deg) translate3d(0, 50%, 0);
-               transform: translate3d(0, 50%, 0) rotateX(-70deg) translate3d(0, 50%, 0);
-}
-
-
-/*********************************************
- * CONCAVE THEME
- *********************************************/
-
-.concave #main>section.past {
-       -webkit-transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
-          -moz-transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
-           -ms-transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
-               transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
-}
-
-.concave #main>section.future {
-       -webkit-transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
-          -moz-transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
-           -ms-transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
-               transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
-}
-
-.concave #main section>section.past {
-       -webkit-transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
-          -moz-transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
-           -ms-transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
-               transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
-}
-.concave #main section>section.future {
-       -webkit-transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
-          -moz-transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
-           -ms-transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
-               transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
-}
-
-
-/*********************************************
- * LINEAR THEME
- *********************************************/
-
-.linear #main>section.past {
-       -webkit-transform: translate(-150%, 0);
-          -moz-transform: translate(-150%, 0);
-           -ms-transform: translate(-150%, 0);
-            -o-transform: translate(-150%, 0);
-               transform: translate(-150%, 0);
-}
-
-.linear #main>section.future {
-       -webkit-transform: translate(150%, 0);
-          -moz-transform: translate(150%, 0);
-           -ms-transform: translate(150%, 0);
-            -o-transform: translate(150%, 0);
-               transform: translate(150%, 0);
-}
-
-.linear #main section>section.past {
-       -webkit-transform: translate(0, -150%);
-          -moz-transform: translate(0, -150%);
-           -ms-transform: translate(0, -150%);
-            -o-transform: translate(0, -150%);
-               transform: translate(0, -150%);
-}
-.linear #main section>section.future {
-       -webkit-transform: translate(0, 150%);
-          -moz-transform: translate(0, 150%);
-           -ms-transform: translate(0, 150%);
-            -o-transform: translate(0, 150%);
-               transform: translate(0, 150%);
-}
-
-
-/*********************************************
- * OVERVIEW
- *********************************************/
-
-.overview #main section {
-       padding: 20px 0;
-       opacity: 1;
-       cursor: pointer;
-       background: rgba(0,0,0,0.1);
-}
-.overview #main section.present>section.present {
-       background: none;
-}
-.overview #main section>section {
-       opacity: 1;
-       cursor: pointer;
-}
-       .overview #main>section:hover {
-               background: rgba(0,0,0,0.3);
-       }
-
-       .overview #main>section.present {
-               background: rgba(0,0,0,0.3);
-       }
-
-
 /*********************************************
  * VIEW FRAGMENTS
  *********************************************/
@@ -599,3 +406,450 @@ section img {
 }
 
 
+/*********************************************
+ * SLIDES
+ *********************************************/
+
+#main {
+       position: absolute;
+       width: 900px;
+       height: 600px;
+       
+       left: 50%;
+       top: 50%;
+       margin-left: -450px;
+       margin-top: -320px;
+       padding: 20px 0px;
+       
+       text-align: center;
+       
+       -webkit-perspective: 600px;
+          -moz-perspective: 600px;
+           -ms-perspective: 600px;
+               perspective: 600px;
+
+       -webkit-perspective-origin: 50% 25%;
+          -moz-perspective-origin: 50% 25%;
+           -ms-perspective-origin: 50% 25%;
+               perspective-origin: 50% 25%;
+}
+
+#main>section,
+#main>section>section {
+       display: none;
+       position: absolute;
+       width: 100%;
+       min-height: 600px;
+
+    z-index: 10;
+       
+       -webkit-transform-style: preserve-3d;
+          -moz-transform-style: preserve-3d;
+           -ms-transform-style: preserve-3d;
+               transform-style: preserve-3d;
+       
+       -webkit-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+          -moz-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+           -ms-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+            -o-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+               transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+}
+
+#main section.present {
+       display: block;
+       z-index: 11;
+       opacity: 1;
+}
+
+
+/*********************************************
+ * DEFAULT TRANSITION
+ *********************************************/
+
+#main section.past {
+       display: block;
+       opacity: 0;
+       
+       -webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
+          -moz-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
+           -ms-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
+               transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
+}
+#main section.future {
+       display: block;
+       opacity: 0;
+       
+       -webkit-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
+          -moz-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
+           -ms-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
+               transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
+}
+
+#main section>section.past {
+       display: block;
+       opacity: 0;
+       
+       -webkit-transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0);
+          -moz-transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0);
+           -ms-transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0);
+               transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0);
+}
+#main section>section.future {
+       display: block;
+       opacity: 0;
+       
+       -webkit-transform: translate3d(0, 50%, 0) rotateX(-70deg) translate3d(0, 50%, 0);
+          -moz-transform: translate3d(0, 50%, 0) rotateX(-70deg) translate3d(0, 50%, 0);
+           -ms-transform: translate3d(0, 50%, 0) rotateX(-70deg) translate3d(0, 50%, 0);
+               transform: translate3d(0, 50%, 0) rotateX(-70deg) translate3d(0, 50%, 0);
+}
+
+
+/*********************************************
+ * CONCAVE TRANSITION
+ *********************************************/
+
+.concave #main>section.past {
+       -webkit-transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
+          -moz-transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
+           -ms-transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
+               transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
+}
+.concave #main>section.future {
+       -webkit-transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
+          -moz-transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
+           -ms-transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
+               transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
+}
+
+.concave #main section>section.past {
+       -webkit-transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
+          -moz-transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
+           -ms-transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
+               transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
+}
+.concave #main section>section.future {
+       -webkit-transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
+          -moz-transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
+           -ms-transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
+               transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
+}
+
+
+/*********************************************
+ * LINEAR TRANSITION
+ *********************************************/
+
+.linear #main>section.past {
+       -webkit-transform: translate(-150%, 0);
+          -moz-transform: translate(-150%, 0);
+           -ms-transform: translate(-150%, 0);
+            -o-transform: translate(-150%, 0);
+               transform: translate(-150%, 0);
+}
+.linear #main>section.future {
+       -webkit-transform: translate(150%, 0);
+          -moz-transform: translate(150%, 0);
+           -ms-transform: translate(150%, 0);
+            -o-transform: translate(150%, 0);
+               transform: translate(150%, 0);
+}
+
+.linear #main section>section.past {
+       -webkit-transform: translate(0, -150%);
+          -moz-transform: translate(0, -150%);
+           -ms-transform: translate(0, -150%);
+            -o-transform: translate(0, -150%);
+               transform: translate(0, -150%);
+}
+.linear #main section>section.future {
+       -webkit-transform: translate(0, 150%);
+          -moz-transform: translate(0, 150%);
+           -ms-transform: translate(0, 150%);
+            -o-transform: translate(0, 150%);
+               transform: translate(0, 150%);
+}
+
+/*********************************************
+ * BOX TRANSITION
+ *********************************************/
+
+.box #main {
+       margin-top: -350px;
+
+       -webkit-perspective-origin: 50% 25%;
+          -moz-perspective-origin: 50% 25%;
+           -ms-perspective-origin: 50% 25%;
+               perspective-origin: 50% 25%;
+
+       -webkit-perspective: 1300px;
+          -moz-perspective: 1300px;
+           -ms-perspective: 1300px;
+               perspective: 1300px;
+}
+
+.box #main section {
+       padding: 30px;
+       
+       -webkit-box-sizing: border-box;
+          -moz-box-sizing: border-box;
+               box-sizing: border-box;
+}
+       .box #main section:not(.stack):before {
+               content: '';
+               position: absolute;
+               display: block;
+               width: 100%;
+               height: 100%;
+               left: 0;
+               top: 0;
+               background: #292929;
+               border-radius: 4px;
+
+               -webkit-transform: translateZ( -20px );
+                  -moz-transform: translateZ( -20px );
+                   -ms-transform: translateZ( -20px );
+                    -o-transform: translateZ( -20px );
+                       transform: translateZ( -20px );
+       }
+       .box #main section:not(.stack):after {
+               content: '';
+               position: absolute;
+               display: block;
+               width: 90%;
+               height: 30px;
+               left: 5%;
+               bottom: 0;
+               background: none;
+               z-index: 1;
+
+               border-radius: 4px;
+               box-shadow: 0px 95px 25px rgba(0,0,0,0.2);
+
+               -webkit-transform: translateZ(-90px) rotateX( 65deg );
+                  -moz-transform: translateZ(-90px) rotateX( 65deg );
+                   -ms-transform: translateZ(-90px) rotateX( 65deg );
+                    -o-transform: translateZ(-90px) rotateX( 65deg );
+                       transform: translateZ(-90px) rotateX( 65deg );
+       }
+
+.box #main section.stack {
+       padding: 0;
+       background: none;
+}
+
+.box #main>section.past {
+       -webkit-transform-origin: 100% 0%;
+          -moz-transform-origin: 100% 0%;
+           -ms-transform-origin: 100% 0%;
+               transform-origin: 100% 0%;
+
+       -webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg);
+          -moz-transform: translate3d(-100%, 0, 0) rotateY(-90deg);
+           -ms-transform: translate3d(-100%, 0, 0) rotateY(-90deg);
+               transform: translate3d(-100%, 0, 0) rotateY(-90deg);
+}
+
+.box #main>section.future {
+       -webkit-transform-origin: 0% 0%;
+          -moz-transform-origin: 0% 0%;
+           -ms-transform-origin: 0% 0%;
+               transform-origin: 0% 0%;
+
+       -webkit-transform: translate3d(100%, 0, 0) rotateY(90deg);
+          -moz-transform: translate3d(100%, 0, 0) rotateY(90deg);
+           -ms-transform: translate3d(100%, 0, 0) rotateY(90deg);
+               transform: translate3d(100%, 0, 0) rotateY(90deg);
+}
+
+.box #main section>section.past {
+       -webkit-transform-origin: 0% 100%;
+          -moz-transform-origin: 0% 100%;
+           -ms-transform-origin: 0% 100%;
+               transform-origin: 0% 100%;
+
+       -webkit-transform: translate3d(0, -100%, 0) rotateX(90deg);
+          -moz-transform: translate3d(0, -100%, 0) rotateX(90deg);
+           -ms-transform: translate3d(0, -100%, 0) rotateX(90deg);
+               transform: translate3d(0, -100%, 0) rotateX(90deg);
+}
+
+.box #main section>section.future {
+       -webkit-transform-origin: 0% 0%;
+          -moz-transform-origin: 0% 0%;
+           -ms-transform-origin: 0% 0%;
+               transform-origin: 0% 0%;
+
+       -webkit-transform: translate3d(0, 100%, 0) rotateX(-90deg);
+          -moz-transform: translate3d(0, 100%, 0) rotateX(-90deg);
+           -ms-transform: translate3d(0, 100%, 0) rotateX(-90deg);
+               transform: translate3d(0, 100%, 0) rotateX(-90deg);
+}
+
+
+/*********************************************
+ * PAGE TRANSITION
+ *********************************************/
+
+.page #main {
+       margin-top: -350px;
+
+       -webkit-perspective-origin: 50% 50%;
+          -moz-perspective-origin: 50% 50%;
+           -ms-perspective-origin: 50% 50%;
+               perspective-origin: 50% 50%;
+
+       -webkit-perspective: 3000px;
+          -moz-perspective: 3000px;
+           -ms-perspective: 3000px;
+               perspective: 3000px;
+}
+
+.page #main section {
+       padding: 30px;
+
+       -webkit-box-sizing: border-box;
+          -moz-box-sizing: border-box;
+               box-sizing: border-box;
+}
+       .page #main section.past {
+               z-index: 12;
+       }
+       .page #main section:not(.stack):before {
+               content: '';
+               position: absolute;
+               display: block;
+               width: 100%;
+               height: 100%;
+               left: 0;
+               top: 0;
+               background: #292929;
+
+               -webkit-transform: translateZ( -20px );
+                  -moz-transform: translateZ( -20px );
+                   -ms-transform: translateZ( -20px );
+                    -o-transform: translateZ( -20px );
+                       transform: translateZ( -20px );
+       }
+       .page #main section:not(.stack):after {
+               content: '';
+               position: absolute;
+               display: block;
+               width: 90%;
+               height: 30px;
+               left: 5%;
+               bottom: 0;
+               background: none;
+               z-index: 1;
+
+               border-radius: 4px;
+               box-shadow: 0px 95px 25px rgba(0,0,0,0.2);
+
+               -webkit-transform: translateZ(-90px) rotateX( 65deg );
+       }
+
+.page #main section.stack {
+       padding: 0;
+       background: none;
+}
+
+.page #main>section.past {
+       -webkit-transform-origin: 0% 0%;
+          -moz-transform-origin: 0% 0%;
+           -ms-transform-origin: 0% 0%;
+               transform-origin: 0% 0%;
+
+       -webkit-transform: translate3d(-40%, 0, 0) rotateY(-80deg);
+          -moz-transform: translate3d(-40%, 0, 0) rotateY(-80deg);
+           -ms-transform: translate3d(-40%, 0, 0) rotateY(-80deg);
+               transform: translate3d(-40%, 0, 0) rotateY(-80deg);
+}
+
+.page #main>section.future {
+       -webkit-transform-origin: 100% 0%;
+          -moz-transform-origin: 100% 0%;
+           -ms-transform-origin: 100% 0%;
+               transform-origin: 100% 0%;
+
+       -webkit-transform: translate3d(0, 0, 0);
+          -moz-transform: translate3d(0, 0, 0);
+           -ms-transform: translate3d(0, 0, 0);
+               transform: translate3d(0, 0, 0);
+}
+
+.page #main section>section.past {
+       -webkit-transform-origin: 0% 0%;
+          -moz-transform-origin: 0% 0%;
+           -ms-transform-origin: 0% 0%;
+               transform-origin: 0% 0%;
+
+       -webkit-transform: translate3d(0, -40%, 0) rotateX(80deg);
+          -moz-transform: translate3d(0, -40%, 0) rotateX(80deg);
+           -ms-transform: translate3d(0, -40%, 0) rotateX(80deg);
+               transform: translate3d(0, -40%, 0) rotateX(80deg);
+}
+
+.page #main section>section.future {
+       -webkit-transform-origin: 0% 100%;
+          -moz-transform-origin: 0% 100%;
+           -ms-transform-origin: 0% 100%;
+               transform-origin: 0% 100%;
+
+       -webkit-transform: translate3d(0, 0, 0);
+          -moz-transform: translate3d(0, 0, 0);
+           -ms-transform: translate3d(0, 0, 0);
+               transform: translate3d(0, 0, 0);
+}
+
+
+/*********************************************
+ * NEON THEME
+ *********************************************/
+
+.neon a,
+.neon a:hover,
+.neon .controls a.enabled {
+       color: #5de048;
+}
+
+.neon .progress span,
+.neon .roll span:after {
+       background: #5de048;
+}
+
+a.image:hover img {
+       border-color: #5de048;
+}
+
+
+/*********************************************
+ * OVERVIEW
+ *********************************************/
+
+.overview #main section {
+       padding: 20px 0;
+       opacity: 1;
+       cursor: pointer;
+       background: rgba(0,0,0,0.1);
+}
+.overview #main section:after,
+.overview #main section:before {
+       display: none !important;
+}
+.overview #main section>section {
+       opacity: 1;
+       cursor: pointer;
+}
+       .overview #main section:hover {
+               background: rgba(0,0,0,0.3);
+       }
+
+       .overview #main section.present {
+               background: rgba(0,0,0,0.3);
+       }
+.overview #main section.stack {
+       background: none;
+       padding: 0;
+}
+
+

diff --git a/index.html b/index.html
index ad835bb4ac61ef07e9871dd6eb779b592f146dc4..86ed52d3e736ef10dc1fbcefcddb87407d3a0239 100644 (file)
--- a/index.html
+++ b/index.html
@@ -195,6 +195,12 @@ linkify( 'a' );
                <script src="js/reveal.js"></script>
                <script src="lib/highlight.js"></script>
                <script>
+                       // Parse the query string into a key/value object
+                       var query = {};
+                       location.search.replace( /[A-Z0-9]+?=(\w*)/gi, function(a) {
+                               query[ a.split( '=' ).shift() ] = a.split( '=' ).pop();
+                       } );
+
                        Reveal.initialize({
                                // Display controls in the bottom right corner
                                controls: true,
@@ -205,13 +211,54 @@ linkify( 'a' );
                                // Apply a 3D roll to links on hover
                                rollingLinks: true,
 
-                               // Styling themes, only affects transitions for now
-                               theme: 'default' // default/concave/linear
+                               // UI style
+                               theme: query.theme || 'default', // default/neon
+
+                               // Transition style
+                               transition: query.transition || 'default' // default/box/page/concave/linear(2d),
                        });
 
                        hljs.initHighlightingOnLoad();
                </script>
 
 
+               <!-- Everything below this point is unrelated to the slideshow -->
+               
+               <div style="position: absolute; bottom: 10px; left: 50%; margin-left: -160px">
+                       <a href="http://twitter.com/share" class="twitter-share-button" data-text="reveal.js - a 3D slideshow tool from @hakimel." data-url="http://lab.hakim.se/reveal-js" data-count="small" data-related="hakimel"></a>
+                       
+                       <iframe id="facebook-button" src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fapp.hakim.se%2Freveal-js%2F&layout=button_count&show_faces=false&width=93&action=like&font=arial&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:85px; height:24px; position: relative; top: 4px;" allowTransparency="true"></iframe> 
+                       <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
+
+                       <script type="text/javascript">
+                       /* <![CDATA[ */
+                           (function() {
+                               var s = document.createElement('script'), t = document.getElementsByTagName('script')[0];
+                               s.type = 'text/javascript';
+                               s.async = true;
+                               s.src = 'http://api.flattr.com/js/0.6/load.js?mode=auto';
+                               t.parentNode.insertBefore(s, t);
+                           })();
+                       /* ]]> */
+                       </script>
+
+                       <a class="FlattrButton" style="display:none;" rev="flattr;button:compact;" href="http://lab.hakim.se/reveal-js"></a>
+                       <noscript><a href="http://flattr.com/thing/447435/Reveal-js" target="_blank">
+                       <img src="http://api.flattr.com/button/flattr-badge-large.png" alt="Flattr this" title="Flattr this" border="0" /></a></noscript>
+               </div>
+
+               <a href="https://github.com/hakimel/reveal.js"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://a248.e.akamai.net/assets.github.com/img/7afbc8b248c68eb468279e8c17986ad46549fb71/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub"></a>
+               
+               <script>
+               var _gaq = [['_setAccount', 'UA-15240703-1'], ['_trackPageview']];
+               (function(d, t) {
+               var g = d.createElement(t),
+                   s = d.getElementsByTagName(t)[0];
+               g.async = true;
+               g.src = ('https:' == location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+               s.parentNode.insertBefore(g, s);
+               })(document, 'script');
+               </script>
+               
        </body>
 </html>
\ No newline at end of file

diff --git a/js/reveal.js b/js/reveal.js
index d751a03364183c653339b283d1141f32aba18a14..2e060108c0f18ecbd43260639d7891e376e30a45 100644 (file)
--- a/js/reveal.js
+++ b/js/reveal.js
@@ -62,6 +62,9 @@
  * version 1.1:
  * - Optional progress bar UI element
  * - Slide overview available via SPACE
+ * - Added 'transition' option for specifying transition styles
+ * - Added 'theme' option for specifying UI styles
+ * - Slides that contain nested-slides are given the 'stack' class
  * 
  * TODO:
  * - Touch/swipe interactions
@@ -83,6 +86,7 @@ var Reveal = (function(){
                // > {Boolean} controls
                // > {Boolean} progress
                // > {String} theme
+               // > {String} transition
                // > {Boolean} rollingLinks
                config = {},
 
@@ -122,11 +126,12 @@ var Reveal = (function(){
                config.rollingLinks = options.rollingLinks === undefined ? true : options.rollingLinks;
                config.controls = options.controls === undefined ? false : options.controls;
                config.progress = options.progress === undefined ? false : options.progress;
+               config.transition = options.transition === undefined ? 'default' : options.transition;
                config.theme = options.theme === undefined ? 'default' : options.theme;
 
                // Fall back on the 2D transform theme 'linear'
                if( supports3DTransforms === false ) {
-                       config.theme = 'linear';
+                       config.transition = 'linear';
                }
 
                if( config.controls ) {
@@ -137,6 +142,10 @@ var Reveal = (function(){
                        dom.progress.style.display = 'block';
                }
 
+               if( config.transition !== 'default' ) {
+                       document.body.classList.add( config.transition );
+               }
+
                if( config.theme !== 'default' ) {
                        document.body.classList.add( config.theme );
                }
@@ -417,6 +426,11 @@ var Reveal = (function(){
                                        // Any element subsequent to index is given the 'future' class
                                        slide.setAttribute('class', 'future');
                                }
+
+                               // If this element contains vertical slides
+                               if( slide.querySelector( 'section' ) ) {
+                                       slide.classList.add( 'stack' );
+                               }
                        }
                }
                else {