From db9d27b49f808228f3385cfcdc1c034f76c6b8da Mon Sep 17 00:00:00 2001
From: Eric Bidelman
Date: Fri, 13 Apr 2012 18:49:50 -0700
Subject: Slides sliding in is oldschool. We now fade between slides

---
 js/slides.js            |   2 +-
 template.html           |  12 +-
 theme/css/default.css   | 404 ++++++++++++++++++++----------------------------
 theme/sass/default.scss |  81 ++++++----
 4 files changed, 228 insertions(+), 271 deletions(-)

diff --git a/js/slides.js b/js/slides.js
index d1b094b..f0e3900 100644
--- a/js/slides.js
+++ b/js/slides.js
@@ -50,7 +50,7 @@ SlideDeck.prototype.getCurrentSlideFromHash_ = function() {
  * @private
  */
 SlideDeck.prototype.onDomLoaded_ = function(e) {
-  this.slides_ = document.querySelectorAll('slide:not([hidden])');
+  this.slides_ = document.querySelectorAll('slide:not([hidden]):not(.backdrop)');
 
   // Load config.
   this.loadConfig_();
diff --git a/template.html b/template.html
index 973666a..da89780 100644
--- a/template.html
+++ b/template.html
@@ -74,7 +74,7 @@ URL: https://code.google.com/p/io-2012-slides
 
   <slide>
     <hgroup>
-      <h2>Slide with Smaller Font</h2>
+      <h2>Slide with (Smaller Font)</h2>
     </hgroup>
     <article class="smaller">
       <ul>
@@ -172,7 +172,7 @@ function helloWorld(world) {
 
   <slide>
     <hgroup>
-      <h2>Slide with Image (centered horz/vert)</h2>
+      <h2>Slide with Image (Centered horz/vert)</h2>
     </hgroup>
     <article class="flexbox vcenter" style="height: 80%;">
       <img src="images/barchart.png" alt="Description" title="Description">
@@ -210,7 +210,7 @@ function helloWorld(world) {
 
   <slide>
     <hgroup>
-      <h2>Table Option A (small text)</h2>
+      <h2>Table Option A (Smaller Text)</h2>
       <h3>Subtitle Placeholder</h3>
     </hgroup>
     <article class="smaller">
@@ -265,7 +265,7 @@ function helloWorld(world) {
 
   <slide>
     <hgroup>
-      <h2>Slide styles</h2>
+      <h2>Slide Styles</h2>
     </hgroup>
     <article class="smaller columns-2">
       <ul>
@@ -313,7 +313,7 @@ function helloWorld(world) {
 
   <slide>
     <hgroup>
-      <h2>Slide with iframe</h2>
+      <h2>Slide with Iframe</h2>
     </hgroup>
     <article>
       <iframe data-src="http://www.google.com/doodle4google/history.html"></iframe>
@@ -343,6 +343,8 @@ function helloWorld(world) {
     </article>
   </slide>
 
+  <slide class="backdrop"></slide>
+
 </slides>
 
 <script type="text/slide-config">
diff --git a/theme/css/default.css b/theme/css/default.css
index bb77b38..a6c1826 100644
--- a/theme/css/default.css
+++ b/theme/css/default.css
@@ -214,28 +214,15 @@ slide.fill img {
 
 /* line 87, ../sass/default.scss */
 body {
-  background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 600, color-stop(0%, #b1dfff), color-stop(100%, #2a7cdf));
-  background-image: -webkit-radial-gradient(50% 50%, #b1dfff 0%, #2a7cdf 600px);
-  background-image: -moz-radial-gradient(50% 50%, #b1dfff 0%, #2a7cdf 600px);
-  background-image: -o-radial-gradient(50% 50%, #b1dfff 0%, #2a7cdf 600px);
-  background-image: -ms-radial-gradient(50% 50%, #b1dfff 0%, #2a7cdf 600px);
-  background-image: radial-gradient(50% 50%, #b1dfff 0%, #2a7cdf 600px);
-  background-attachment: fixed;
+  background: black;
 }
 
-/* line 93, ../sass/default.scss */
+/* line 95, ../sass/default.scss */
 slides > slide {
   display: none;
   font-family: 'Open Sans', Arial, sans-serif;
   font-size: 26px;
   color: #797979;
-  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(85%, #ffffff), color-stop(100%, #e6e6e6));
-  background: -webkit-linear-gradient(#ffffff, #ffffff 85%, #e6e6e6);
-  background: -moz-linear-gradient(#ffffff, #ffffff 85%, #e6e6e6);
-  background: -o-linear-gradient(#ffffff, #ffffff 85%, #e6e6e6);
-  background: -ms-linear-gradient(#ffffff, #ffffff 85%, #e6e6e6);
-  background: linear-gradient(#ffffff, #ffffff 85%, #e6e6e6);
-  background-color: white;
   width: 900px;
   height: 700px;
   margin-left: -450px;
@@ -246,101 +233,52 @@ slides > slide {
   -ms-border-radius: 5px;
   -o-border-radius: 5px;
   border-radius: 5px;
-  -webkit-box-shadow: 5px 5px 20px #515151;
-  -moz-box-shadow: 5px 5px 20px #515151;
-  box-shadow: 5px 5px 20px #515151;
-  -webkit-transition: all 0.3s ease-out;
-  -moz-transition: all 0.3s ease-out;
-  -ms-transition: all 0.3s ease-out;
-  -o-transition: all 0.3s ease-out;
-  transition: all 0.3s ease-out;
-}
-/* line 114, ../sass/default.scss */
+  -webkit-transition: all 0.6s ease-out;
+  -moz-transition: all 0.6s ease-out;
+  -ms-transition: all 0.6s ease-out;
+  -o-transition: all 0.6s ease-out;
+  transition: all 0.6s ease-out;
+}
+/* line 116, ../sass/default.scss */
 slides > slide.far-past {
-  display: block;
-  -webkit-transform: translate(-2040px);
-  -moz-transform: translate(-2040px);
-  -ms-transform: translate(-2040px);
-  -o-transform: translate(-2040px);
-  transform: translate(-2040px);
-  -webkit-transform: translate3d(-2040px, 0, 0);
-  -moz-transform: translate3d(-2040px, 0, 0);
-  -ms-transform: translate3d(-2040px, 0, 0);
-  -o-transform: translate3d(-2040px, 0, 0);
-  transform: translate3d(-2040px, 0, 0);
-}
-/* line 120, ../sass/default.scss */
+  display: none;
+}
+/* line 123, ../sass/default.scss */
 slides > slide.past {
   display: block;
-  -webkit-transform: translate(-1020px) rotateY(30deg) rotateX(45deg);
-  -moz-transform: translate(-1020px) rotateY(30deg) rotateX(45deg);
-  -ms-transform: translate(-1020px) rotateY(30deg) rotateX(45deg);
-  -o-transform: translate(-1020px) rotateY(30deg) rotateX(45deg);
-  transform: translate(-1020px) rotateY(30deg) rotateX(45deg);
-  -webkit-transform: translate3d(-1020px, 0, 0) rotateY(30deg) rotateX(45deg);
-  -moz-transform: translate3d(-1020px, 0, 0) rotateY(30deg) rotateX(45deg);
-  -ms-transform: translate3d(-1020px, 0, 0) rotateY(30deg) rotateX(45deg);
-  -o-transform: translate3d(-1020px, 0, 0) rotateY(30deg) rotateX(45deg);
-  transform: translate3d(-1020px, 0, 0) rotateY(30deg) rotateX(45deg);
-}
-/* line 126, ../sass/default.scss */
+  opacity: 0;
+}
+/* line 130, ../sass/default.scss */
 slides > slide.current {
   display: block;
-  -webkit-transform: translate(0);
-  -moz-transform: translate(0);
-  -ms-transform: translate(0);
-  -o-transform: translate(0);
-  transform: translate(0);
-  -webkit-transform: translate3d(0, 0, 0);
-  -moz-transform: translate3d(0, 0, 0);
-  -ms-transform: translate3d(0, 0, 0);
-  -o-transform: translate3d(0, 0, 0);
-  transform: translate3d(0, 0, 0);
+  opacity: 1;
 }
-/* line 131, ../sass/default.scss */
+/* line 136, ../sass/default.scss */
 slides > slide.current .auto-fadein {
   opacity: 1;
 }
-/* line 135, ../sass/default.scss */
+/* line 140, ../sass/default.scss */
 slides > slide.current .gdbar {
   -webkit-background-size: 100% 100%;
   -moz-background-size: 100% 100%;
   -o-background-size: 100% 100%;
   background-size: 100% 100%;
 }
-/* line 140, ../sass/default.scss */
+/* line 145, ../sass/default.scss */
 slides > slide.next {
   display: block;
-  -webkit-transform: translate(1020px) rotateY(-30deg) rotateX(45deg);
-  -moz-transform: translate(1020px) rotateY(-30deg) rotateX(45deg);
-  -ms-transform: translate(1020px) rotateY(-30deg) rotateX(45deg);
-  -o-transform: translate(1020px) rotateY(-30deg) rotateX(45deg);
-  transform: translate(1020px) rotateY(-30deg) rotateX(45deg);
-  -webkit-transform: translate3d(1020px, 0, 0) rotateY(-30deg) rotateX(45deg);
-  -moz-transform: translate3d(1020px, 0, 0) rotateY(-30deg) rotateX(45deg);
-  -ms-transform: translate3d(1020px, 0, 0) rotateY(-30deg) rotateX(45deg);
-  -o-transform: translate3d(1020px, 0, 0) rotateY(-30deg) rotateX(45deg);
-  transform: translate3d(1020px, 0, 0) rotateY(-30deg) rotateX(45deg);
-}
-/* line 146, ../sass/default.scss */
+  opacity: 0;
+  pointer-events: none;
+}
+/* line 153, ../sass/default.scss */
 slides > slide.far-next {
-  display: block;
-  -webkit-transform: translate(2040px);
-  -moz-transform: translate(2040px);
-  -ms-transform: translate(2040px);
-  -o-transform: translate(2040px);
-  transform: translate(2040px);
-  -webkit-transform: translate3d(2040px, 0, 0);
-  -moz-transform: translate3d(2040px, 0, 0);
-  -ms-transform: translate3d(2040px, 0, 0);
-  -o-transform: translate3d(2040px, 0, 0);
-  transform: translate3d(2040px, 0, 0);
-}
-/* line 152, ../sass/default.scss */
+  display: none;
+}
+/* line 160, ../sass/default.scss */
 slides > slide.dark {
   background: #515151;
 }
-/* line 160, ../sass/default.scss */
+/* line 168, ../sass/default.scss */
 slides > slide:not(.fill):not(.nobackground):before {
   font-size: 12pt;
   content: "#io2012";
@@ -356,7 +294,7 @@ slides > slide:not(.fill):not(.nobackground):before {
   height: 30px;
   line-height: 1.9;
 }
-/* line 172, ../sass/default.scss */
+/* line 180, ../sass/default.scss */
 slides > slide:not(.fill):not(.nobackground):after {
   font-size: 12pt;
   content: attr(data-slide-num) "/" attr(data-total-slides);
@@ -365,7 +303,7 @@ slides > slide:not(.fill):not(.nobackground):after {
   right: 60px;
   line-height: 1.9;
 }
-/* line 183, ../sass/default.scss */
+/* line 191, ../sass/default.scss */
 slides > slide.title-slide:after {
   content: '';
   background: url(../../images/io2012_logo.png) no-repeat 100% 50%;
@@ -379,34 +317,51 @@ slides > slide.title-slide:after {
   width: 100%;
   height: 60px;
 }
-/* line 195, ../sass/default.scss */
+/* line 203, ../sass/default.scss */
+slides > slide.backdrop {
+  z-index: -1;
+  display: block !important;
+  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(85%, #ffffff), color-stop(100%, #e6e6e6));
+  background: -webkit-linear-gradient(#ffffff, #ffffff 85%, #e6e6e6);
+  background: -moz-linear-gradient(#ffffff, #ffffff 85%, #e6e6e6);
+  background: -o-linear-gradient(#ffffff, #ffffff 85%, #e6e6e6);
+  background: -ms-linear-gradient(#ffffff, #ffffff 85%, #e6e6e6);
+  background: linear-gradient(#ffffff, #ffffff 85%, #e6e6e6);
+  background-color: white;
+}
+/* line 209, ../sass/default.scss */
+slides > slide.backdrop:after, slides > slide.backdrop:before {
+  display: none;
+}
+/* line 214, ../sass/default.scss */
 slides > slide > hgroup + article {
   margin-top: 45px;
 }
-/* line 198, ../sass/default.scss */
+/* line 217, ../sass/default.scss */
 slides > slide > hgroup + article p {
   margin-bottom: 1em;
 }
-/* line 203, ../sass/default.scss */
+/* line 222, ../sass/default.scss */
 slides > slide > article:only-child > iframe {
   height: 100%;
 }
 
-/* line 208, ../sass/default.scss */
+/* line 227, ../sass/default.scss */
 slides.layout-faux-widescreen > slide {
   padding: 40px 160px;
 }
 
-/* line 217, ../sass/default.scss */
+/* line 236, ../sass/default.scss */
 slides.layout-widescreen > slide,
 slides.layout-faux-widescreen > slide {
   margin-left: -550px;
   width: 1100px;
 }
-/* line 222, ../sass/default.scss */
+/* line 241, ../sass/default.scss */
 slides.layout-widescreen > slide.far-past,
 slides.layout-faux-widescreen > slide.far-past {
   display: block;
+  display: none;
   -webkit-transform: translate(-2260px);
   -moz-transform: translate(-2260px);
   -ms-transform: translate(-2260px);
@@ -418,55 +373,30 @@ slides.layout-faux-widescreen > slide.far-past {
   -o-transform: translate3d(-2260px, 0, 0);
   transform: translate3d(-2260px, 0, 0);
 }
-/* line 228, ../sass/default.scss */
+/* line 248, ../sass/default.scss */
 slides.layout-widescreen > slide.past,
 slides.layout-faux-widescreen > slide.past {
   display: block;
-  -webkit-transform: translate(-1130px);
-  -moz-transform: translate(-1130px);
-  -ms-transform: translate(-1130px);
-  -o-transform: translate(-1130px);
-  transform: translate(-1130px);
-  -webkit-transform: translate3d(-1130px, 0, 0);
-  -moz-transform: translate3d(-1130px, 0, 0);
-  -ms-transform: translate3d(-1130px, 0, 0);
-  -o-transform: translate3d(-1130px, 0, 0);
-  transform: translate3d(-1130px, 0, 0);
-}
-/* line 234, ../sass/default.scss */
+  opacity: 0;
+}
+/* line 255, ../sass/default.scss */
 slides.layout-widescreen > slide.current,
 slides.layout-faux-widescreen > slide.current {
   display: block;
-  -webkit-transform: translate(0);
-  -moz-transform: translate(0);
-  -ms-transform: translate(0);
-  -o-transform: translate(0);
-  transform: translate(0);
-  -webkit-transform: translate3d(0, 0, 0);
-  -moz-transform: translate3d(0, 0, 0);
-  -ms-transform: translate3d(0, 0, 0);
-  -o-transform: translate3d(0, 0, 0);
-  transform: translate3d(0, 0, 0);
+  opacity: 1;
 }
-/* line 240, ../sass/default.scss */
+/* line 262, ../sass/default.scss */
 slides.layout-widescreen > slide.next,
 slides.layout-faux-widescreen > slide.next {
   display: block;
-  -webkit-transform: translate(1130px);
-  -moz-transform: translate(1130px);
-  -ms-transform: translate(1130px);
-  -o-transform: translate(1130px);
-  transform: translate(1130px);
-  -webkit-transform: translate3d(1130px, 0, 0);
-  -moz-transform: translate3d(1130px, 0, 0);
-  -ms-transform: translate3d(1130px, 0, 0);
-  -o-transform: translate3d(1130px, 0, 0);
-  transform: translate3d(1130px, 0, 0);
-}
-/* line 246, ../sass/default.scss */
+  opacity: 0;
+  pointer-events: none;
+}
+/* line 270, ../sass/default.scss */
 slides.layout-widescreen > slide.far-next,
 slides.layout-faux-widescreen > slide.far-next {
   display: block;
+  display: none;
   -webkit-transform: translate(2260px);
   -moz-transform: translate(2260px);
   -ms-transform: translate(2260px);
@@ -478,40 +408,40 @@ slides.layout-faux-widescreen > slide.far-next {
   -o-transform: translate3d(2260px, 0, 0);
   transform: translate3d(2260px, 0, 0);
 }
-/* line 252, ../sass/default.scss */
+/* line 277, ../sass/default.scss */
 slides.layout-widescreen #prev-slide-area,
 slides.layout-faux-widescreen #prev-slide-area {
   margin-left: -650px;
 }
-/* line 256, ../sass/default.scss */
+/* line 281, ../sass/default.scss */
 slides.layout-widescreen #next-slide-area,
 slides.layout-faux-widescreen #next-slide-area {
   margin-left: 550px;
 }
 
-/* line 261, ../sass/default.scss */
+/* line 286, ../sass/default.scss */
 b {
   font-weight: 600;
 }
 
-/* line 265, ../sass/default.scss */
+/* line 290, ../sass/default.scss */
 a {
   color: #2a7cdf;
   text-decoration: none;
   padding-bottom: 2px;
   border-bottom: 1px solid rgba(42, 124, 223, 0.5);
 }
-/* line 271, ../sass/default.scss */
+/* line 296, ../sass/default.scss */
 a:hover {
   color: black !important;
 }
 
-/* line 276, ../sass/default.scss */
+/* line 301, ../sass/default.scss */
 h1, h2, h3 {
   font-weight: 600;
 }
 
-/* line 280, ../sass/default.scss */
+/* line 305, ../sass/default.scss */
 h2 {
   font-size: 45px;
   line-height: 45px;
@@ -519,7 +449,7 @@ h2 {
   color: #515151;
 }
 
-/* line 287, ../sass/default.scss */
+/* line 312, ../sass/default.scss */
 h3 {
   font-size: 30px;
   letter-spacing: -1px;
@@ -528,39 +458,39 @@ h3 {
   color: #797979;
 }
 
-/* line 295, ../sass/default.scss */
+/* line 320, ../sass/default.scss */
 ul {
   margin-left: 1.2em;
   margin-bottom: 1em;
   position: relative;
 }
-/* line 300, ../sass/default.scss */
+/* line 325, ../sass/default.scss */
 ul li {
   margin-bottom: 0.5em;
 }
-/* line 303, ../sass/default.scss */
+/* line 328, ../sass/default.scss */
 ul li ul {
   margin-left: 2em;
   margin-bottom: 0;
 }
-/* line 307, ../sass/default.scss */
+/* line 332, ../sass/default.scss */
 ul li ul li:before {
   content: '-';
   font-weight: 600;
 }
-/* line 314, ../sass/default.scss */
+/* line 339, ../sass/default.scss */
 ul > li:before {
   content: '·';
   margin-left: -1em;
   position: absolute;
   font-weight: 600;
 }
-/* line 321, ../sass/default.scss */
+/* line 346, ../sass/default.scss */
 ul ul {
   margin-top: .5em;
 }
 
-/* line 328, ../sass/default.scss */
+/* line 353, ../sass/default.scss */
 .highlight-code slide.current pre > * {
   opacity: 0.25;
   -webkit-transition: opacity 0.5s ease-in;
@@ -569,12 +499,12 @@ ul ul {
   -o-transition: opacity 0.5s ease-in;
   transition: opacity 0.5s ease-in;
 }
-/* line 332, ../sass/default.scss */
+/* line 357, ../sass/default.scss */
 .highlight-code slide.current b {
   opacity: 1;
 }
 
-/* line 337, ../sass/default.scss */
+/* line 362, ../sass/default.scss */
 pre {
   font-family: 'Inconsolata', 'Courier New', monospace;
   font-size: 20px;
@@ -591,7 +521,7 @@ pre {
   box-sizing: border-box;
   /*overflow: hidden;*/
 }
-/* line 351, ../sass/default.scss */
+/* line 376, ../sass/default.scss */
 pre:after {
   content: attr(data-lang);
   background-color: #a9a9a9;
@@ -604,14 +534,14 @@ pre:after {
   text-transform: uppercase;
 }
 
-/* line 364, ../sass/default.scss */
+/* line 389, ../sass/default.scss */
 code {
   font-size: 95%;
   font-family: 'Inconsolata', 'Courier New', monospace;
   color: black;
 }
 
-/* line 370, ../sass/default.scss */
+/* line 395, ../sass/default.scss */
 iframe {
   width: 100%;
   height: 530px;
@@ -622,12 +552,12 @@ iframe {
   box-sizing: border-box;
 }
 
-/* line 378, ../sass/default.scss */
+/* line 403, ../sass/default.scss */
 dt {
   font-weight: bold;
 }
 
-/* line 382, ../sass/default.scss */
+/* line 407, ../sass/default.scss */
 button {
   display: inline-block;
   background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(40%, #f9f9f9), color-stop(70%, #e3e3e3));
@@ -654,12 +584,12 @@ button {
   font-size: 10pt;
 }
 
-/* line 397, ../sass/default.scss */
+/* line 422, ../sass/default.scss */
 button:hover {
   border-color: black;
 }
 
-/* line 401, ../sass/default.scss */
+/* line 426, ../sass/default.scss */
 button:active {
   background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(40%, #e3e3e3), color-stop(70%, #f9f9f9));
   background: -webkit-linear-gradient(#e3e3e3 40%, #f9f9f9 70%);
@@ -669,87 +599,87 @@ button:active {
   background: linear-gradient(#e3e3e3 40%, #f9f9f9 70%);
 }
 
-/* line 405, ../sass/default.scss */
+/* line 430, ../sass/default.scss */
 .blue {
   color: #4387fd;
 }
 
-/* line 408, ../sass/default.scss */
+/* line 433, ../sass/default.scss */
 .blue2 {
   color: #3c8ef3;
 }
 
-/* line 411, ../sass/default.scss */
+/* line 436, ../sass/default.scss */
 .blue3 {
   color: #2a7cdf;
 }
 
-/* line 414, ../sass/default.scss */
+/* line 439, ../sass/default.scss */
 .yellow {
   color: #ffd14d;
 }
 
-/* line 417, ../sass/default.scss */
+/* line 442, ../sass/default.scss */
 .yellow2 {
   color: #f9cc46;
 }
 
-/* line 420, ../sass/default.scss */
+/* line 445, ../sass/default.scss */
 .yellow3 {
   color: #f6c000;
 }
 
-/* line 423, ../sass/default.scss */
+/* line 448, ../sass/default.scss */
 .green {
   color: #0da861;
 }
 
-/* line 426, ../sass/default.scss */
+/* line 451, ../sass/default.scss */
 .green2 {
   color: #00a86d;
 }
 
-/* line 429, ../sass/default.scss */
+/* line 454, ../sass/default.scss */
 .green3 {
   color: #009f5d;
 }
 
-/* line 432, ../sass/default.scss */
+/* line 457, ../sass/default.scss */
 .red {
   color: #f44a3f;
 }
 
-/* line 435, ../sass/default.scss */
+/* line 460, ../sass/default.scss */
 .red2 {
   color: #e0543e;
 }
 
-/* line 438, ../sass/default.scss */
+/* line 463, ../sass/default.scss */
 .red3 {
   color: #d94d3a;
 }
 
-/* line 441, ../sass/default.scss */
+/* line 466, ../sass/default.scss */
 .gray {
   color: #e6e6e6;
 }
 
-/* line 444, ../sass/default.scss */
+/* line 469, ../sass/default.scss */
 .gray2 {
   color: #a9a9a9;
 }
 
-/* line 447, ../sass/default.scss */
+/* line 472, ../sass/default.scss */
 .gray3 {
   color: #797979;
 }
 
-/* line 450, ../sass/default.scss */
+/* line 475, ../sass/default.scss */
 .gray4 {
   color: #515151;
 }
 
-/* line 454, ../sass/default.scss */
+/* line 479, ../sass/default.scss */
 .columns-2 {
   -webkit-column-count: 2;
   -moz-column-count: 2;
@@ -757,7 +687,7 @@ button:active {
   column-count: 2;
 }
 
-/* line 458, ../sass/default.scss */
+/* line 483, ../sass/default.scss */
 table {
   width: 100%;
   border-collapse: -moz-initial;
@@ -765,16 +695,16 @@ table {
   border-spacing: 2px;
   border-bottom: 1px solid #797979;
 }
-/* line 465, ../sass/default.scss */
+/* line 490, ../sass/default.scss */
 table tr > td:first-child, table th {
   font-weight: 600;
   color: #515151;
 }
-/* line 470, ../sass/default.scss */
+/* line 495, ../sass/default.scss */
 table tr:nth-child(odd) {
   background-color: #e6e6e6;
 }
-/* line 474, ../sass/default.scss */
+/* line 499, ../sass/default.scss */
 table th {
   color: white;
   font-size: 18px;
@@ -785,12 +715,12 @@ table th {
   background: -ms-linear-gradient(top, #4387fd 40%, #2a7cdf 80%) no-repeat;
   background: linear-gradient(top, #4387fd 40%, #2a7cdf 80%) no-repeat;
 }
-/* line 480, ../sass/default.scss */
+/* line 505, ../sass/default.scss */
 table td, table th {
   font-size: 18px;
   padding: 1em 0.5em;
 }
-/* line 485, ../sass/default.scss */
+/* line 510, ../sass/default.scss */
 table td.highlight {
   color: #515151;
   background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(40%, #ffd14d), color-stop(80%, #f6c000)) no-repeat;
@@ -800,31 +730,31 @@ table td.highlight {
   background: -ms-linear-gradient(top, #ffd14d 40%, #f6c000 80%) no-repeat;
   background: linear-gradient(top, #ffd14d 40%, #f6c000 80%) no-repeat;
 }
-/* line 490, ../sass/default.scss */
+/* line 515, ../sass/default.scss */
 table.rows {
   border-bottom: none;
   border-right: 1px solid #797979;
 }
 
-/* line 496, ../sass/default.scss */
+/* line 521, ../sass/default.scss */
 q {
   font-size: 45px;
   line-height: 72px;
 }
-/* line 500, ../sass/default.scss */
+/* line 525, ../sass/default.scss */
 q:before {
   content: '“';
   position: absolute;
   margin-left: -0.5em;
 }
-/* line 505, ../sass/default.scss */
+/* line 530, ../sass/default.scss */
 q:after {
   content: '”';
   position: absolute;
   margin-left: 0.1em;
 }
 
-/* line 512, ../sass/default.scss */
+/* line 537, ../sass/default.scss */
 slide.fill {
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
@@ -832,7 +762,7 @@ slide.fill {
   -o-border-radius: 5px;
   border-radius: 5px;
 }
-/* line 515, ../sass/default.scss */
+/* line 540, ../sass/default.scss */
 slide.fill h3 {
   background: rgba(255, 255, 255, 0.75);
   padding-top: .2em;
@@ -843,7 +773,7 @@ slide.fill h3 {
   margin-right: -60px;
   padding-right: 60px;
 }
-/* line 526, ../sass/default.scss */
+/* line 551, ../sass/default.scss */
 slide.fill h4 {
   display: inline;
   position: absolute;
@@ -852,34 +782,34 @@ slide.fill h4 {
 }
 
 /* Size variants */
-/* line 537, ../sass/default.scss */
+/* line 562, ../sass/default.scss */
 article.smaller p, article.smaller ul {
   font-size: 20px;
   line-height: 24px;
   letter-spacing: 0;
 }
-/* line 543, ../sass/default.scss */
+/* line 568, ../sass/default.scss */
 article.smaller table td, article.smaller table th {
   font-size: 14px;
 }
-/* line 547, ../sass/default.scss */
+/* line 572, ../sass/default.scss */
 article.smaller pre {
   font-size: 15px;
   line-height: 20px;
   letter-spacing: 0;
 }
-/* line 552, ../sass/default.scss */
+/* line 577, ../sass/default.scss */
 article.smaller q {
   font-size: 40px;
   line-height: 48px;
 }
-/* line 556, ../sass/default.scss */
+/* line 581, ../sass/default.scss */
 article.smaller q:before, article.smaller q:after {
   font-size: 60px;
 }
 
 /* Builds */
-/* line 565, ../sass/default.scss */
+/* line 590, ../sass/default.scss */
 .build > * {
   -webkit-transition: opacity 0.5s ease-in-out 0.2s;
   -moz-transition: opacity 0.5s ease-in-out 0.2s;
@@ -887,55 +817,55 @@ article.smaller q:before, article.smaller q:after {
   -o-transition: opacity 0.5s ease-in-out 0.2s;
   transition: opacity 0.5s ease-in-out 0.2s;
 }
-/* line 569, ../sass/default.scss */
+/* line 594, ../sass/default.scss */
 .build .to-build {
   opacity: 0;
 }
-/* line 573, ../sass/default.scss */
+/* line 598, ../sass/default.scss */
 .build .build-fade {
   opacity: 0.3;
 }
-/* line 576, ../sass/default.scss */
+/* line 601, ../sass/default.scss */
 .build .build-fade:hover {
   opacity: 1.0;
 }
 
 /* Pretty print */
-/* line 585, ../sass/default.scss */
+/* line 610, ../sass/default.scss */
 .prettyprint .str,
 .prettyprint .atv {
   /* a markup attribute value */
   color: #009f5d;
 }
 
-/* line 589, ../sass/default.scss */
+/* line 614, ../sass/default.scss */
 .prettyprint .kwd,
 .prettyprint .tag {
   /* a markup tag name */
   color: #0066cc;
 }
 
-/* line 592, ../sass/default.scss */
+/* line 617, ../sass/default.scss */
 .prettyprint .com {
   /* a comment */
   color: #797979;
   font-style: italic;
 }
 
-/* line 596, ../sass/default.scss */
+/* line 621, ../sass/default.scss */
 .prettyprint .lit {
   /* a literal value */
   color: #7f0000;
 }
 
-/* line 601, ../sass/default.scss */
+/* line 626, ../sass/default.scss */
 .prettyprint .pun,
 .prettyprint .opn,
 .prettyprint .clo {
   color: #515151;
 }
 
-/* line 607, ../sass/default.scss */
+/* line 632, ../sass/default.scss */
 .prettyprint .typ,
 .prettyprint .atn,
 .prettyprint .dec,
@@ -944,12 +874,12 @@ article.smaller q:before, article.smaller q:after {
   color: #d94d3a;
 }
 
-/* line 610, ../sass/default.scss */
+/* line 635, ../sass/default.scss */
 .prettyprint .pln {
   color: #515151;
 }
 
-/* line 616, ../sass/default.scss */
+/* line 641, ../sass/default.scss */
 .with-notes slide.current {
   -webkit-transform: rotateY(180deg) !important;
   -moz-transform: rotateY(180deg) !important;
@@ -957,7 +887,7 @@ article.smaller q:before, article.smaller q:after {
   -o-transform: rotateY(180deg) !important;
   transform: rotateY(180deg) !important;
 }
-/* line 619, ../sass/default.scss */
+/* line 644, ../sass/default.scss */
 .with-notes .note {
   opacity: 1;
   -webkit-transform: rotateY(180deg);
@@ -968,7 +898,7 @@ article.smaller q:before, article.smaller q:after {
   pointer-events: auto;
 }
 
-/* line 626, ../sass/default.scss */
+/* line 651, ../sass/default.scss */
 .note {
   position: absolute;
   z-index: 100;
@@ -1007,7 +937,7 @@ article.smaller q:before, article.smaller q:after {
   -o-border-radius: 5px;
   border-radius: 5px;
 }
-/* line 642, ../sass/default.scss */
+/* line 667, ../sass/default.scss */
 .note > section {
   background: #fff;
   -webkit-border-radius: 5px;
@@ -1022,7 +952,7 @@ article.smaller q:before, article.smaller q:after {
   padding: 2em;
 }
 
-/* line 651, ../sass/default.scss */
+/* line 676, ../sass/default.scss */
 input, button {
   vertical-align: middle;
 }
@@ -1038,7 +968,7 @@ input, button {
   -ms-box-reflect: below 3px -ms-linear-gradient(rgba(255,255,255,0) 85%, white 150%);
   box-reflect: below 3px linear-gradient(rgba(255,255,255,0) 85%, white 150%);
 }*/
-/* line 667, ../sass/default.scss */
+/* line 692, ../sass/default.scss */
 .flexbox {
   display: -webkit-box !important;
   display: -moz-box !important;
@@ -1047,7 +977,7 @@ input, button {
   display: box !important;
 }
 
-/* line 671, ../sass/default.scss */
+/* line 696, ../sass/default.scss */
 .flexbox.vcenter {
   -webkit-box-orient: vertical;
   -moz-box-orient: vertical;
@@ -1065,7 +995,7 @@ input, button {
   width: 100%;
 }
 
-/* line 677, ../sass/default.scss */
+/* line 702, ../sass/default.scss */
 .flexbox.vleft {
   -webkit-box-orient: vertical;
   -moz-box-orient: vertical;
@@ -1083,7 +1013,7 @@ input, button {
   width: 100%;
 }
 
-/* line 683, ../sass/default.scss */
+/* line 708, ../sass/default.scss */
 .auto-fadein {
   -webkit-transition: opacity 0.6s ease-in 1s;
   -moz-transition: opacity 0.6s ease-in 1s;
@@ -1094,7 +1024,7 @@ input, button {
 }
 
 /* Clickable/tappable areas */
-/* line 689, ../sass/default.scss */
+/* line 714, ../sass/default.scss */
 .slide-area {
   z-index: 1000;
   position: absolute;
@@ -1108,59 +1038,59 @@ input, button {
   margin-top: -350px;
 }
 
-/* line 706, ../sass/default.scss */
+/* line 731, ../sass/default.scss */
 #prev-slide-area {
   margin-left: -550px;
 }
 
-/* line 711, ../sass/default.scss */
+/* line 736, ../sass/default.scss */
 #next-slide-area {
   margin-left: 450px;
 }
 
 /* ===== SLIDE CONTENT ===== */
-/* line 719, ../sass/default.scss */
+/* line 744, ../sass/default.scss */
 .logoslide img {
   width: 383px;
   height: 92px;
 }
 
-/* line 725, ../sass/default.scss */
+/* line 750, ../sass/default.scss */
 .segue {
   padding: 60px 120px;
 }
-/* line 728, ../sass/default.scss */
+/* line 753, ../sass/default.scss */
 .segue h2 {
   color: #e6e6e6;
   font-size: 60px;
 }
-/* line 732, ../sass/default.scss */
+/* line 757, ../sass/default.scss */
 .segue h3 {
   color: #e6e6e6;
   line-height: 2.8;
 }
-/* line 736, ../sass/default.scss */
+/* line 761, ../sass/default.scss */
 .segue hgroup {
   position: absolute;
   bottom: 225px;
 }
 
-/* line 742, ../sass/default.scss */
+/* line 767, ../sass/default.scss */
 .thank-you-slide {
   background: #4387fd;
   color: white;
 }
-/* line 746, ../sass/default.scss */
+/* line 771, ../sass/default.scss */
 .thank-you-slide h2 {
   font-size: 60px;
   color: inherit;
 }
-/* line 751, ../sass/default.scss */
+/* line 776, ../sass/default.scss */
 .thank-you-slide article > p {
   margin-top: 2em;
   font-size: 20pt;
 }
-/* line 756, ../sass/default.scss */
+/* line 781, ../sass/default.scss */
 .thank-you-slide > p {
   position: absolute;
   bottom: 80px;
@@ -1168,7 +1098,7 @@ input, button {
   line-height: 1.3;
 }
 
-/* line 764, ../sass/default.scss */
+/* line 789, ../sass/default.scss */
 aside.gdbar {
   height: 97px;
   width: 215px;
@@ -1197,7 +1127,7 @@ aside.gdbar {
   transition: all 0.5s ease-out 0.5s;
   /* Better to transition only on background-size, but not sure how to do that with the mixin. */
 }
-/* line 775, ../sass/default.scss */
+/* line 800, ../sass/default.scss */
 aside.gdbar.right {
   right: 0;
   left: -moz-initial;
@@ -1210,7 +1140,7 @@ aside.gdbar.right {
   -o-transform: rotateZ(180deg);
   transform: rotateZ(180deg);
 }
-/* line 782, ../sass/default.scss */
+/* line 807, ../sass/default.scss */
 aside.gdbar.right img {
   -webkit-transform: rotateZ(180deg);
   -moz-transform: rotateZ(180deg);
@@ -1218,13 +1148,13 @@ aside.gdbar.right img {
   -o-transform: rotateZ(180deg);
   transform: rotateZ(180deg);
 }
-/* line 787, ../sass/default.scss */
+/* line 812, ../sass/default.scss */
 aside.gdbar.bottom {
   top: -moz-initial;
   top: initial;
   bottom: 60px;
 }
-/* line 793, ../sass/default.scss */
+/* line 818, ../sass/default.scss */
 aside.gdbar img {
   width: 85px;
   height: 85px;
@@ -1233,24 +1163,24 @@ aside.gdbar img {
   margin: 8px 15px;
 }
 
-/* line 804, ../sass/default.scss */
+/* line 829, ../sass/default.scss */
 .title-slide hgroup {
   bottom: 100px;
 }
-/* line 807, ../sass/default.scss */
+/* line 832, ../sass/default.scss */
 .title-slide hgroup h1 {
   font-size: 65px;
   line-height: 1.4;
   letter-spacing: -3px;
   color: #515151;
 }
-/* line 814, ../sass/default.scss */
+/* line 839, ../sass/default.scss */
 .title-slide hgroup h2 {
   font-size: 34px;
   color: #a9a9a9;
   font-weight: inherit;
 }
-/* line 820, ../sass/default.scss */
+/* line 845, ../sass/default.scss */
 .title-slide hgroup p {
   font-size: 20px;
   color: #797979;
@@ -1258,11 +1188,11 @@ aside.gdbar img {
   margin-top: 2em;
 }
 
-/* line 829, ../sass/default.scss */
+/* line 854, ../sass/default.scss */
 .quote {
   color: #e6e6e6;
 }
-/* line 832, ../sass/default.scss */
+/* line 857, ../sass/default.scss */
 .quote .author {
   font-size: 24px;
   position: absolute;
@@ -1270,12 +1200,12 @@ aside.gdbar img {
   line-height: 1.4;
 }
 
-/* line 841, ../sass/default.scss */
+/* line 866, ../sass/default.scss */
 [data-config-contact] a {
   color: white;
   border-bottom: none;
 }
-/* line 845, ../sass/default.scss */
+/* line 870, ../sass/default.scss */
 [data-config-contact] span {
   width: 115px;
   display: inline-block;
diff --git a/theme/sass/default.scss b/theme/sass/default.scss
index 89d38d0..a5d9c69 100644
--- a/theme/sass/default.scss
+++ b/theme/sass/default.scss
@@ -85,9 +85,11 @@ $article-content-top-padding: 45px;
 }
 
 body {
-  @include background-image(radial-gradient(50% 50%, #b1dfff 0%,
-                                            $brand-blue-secondary2 600px));
-  background-attachment: fixed;
+  //@include background-image(radial-gradient(50% 50%, #b1dfff 0%,
+  //                                          $brand-blue-secondary2 600px));
+  //background-attachment: fixed;
+  //@include background(linear-gradient(white, white 85%, $gray-1));
+  background: black;
 }
 
 slides > slide {
@@ -95,8 +97,8 @@ slides > slide {
   font-family: 'Open Sans', Arial, sans-serif;
   font-size: 26px;
   color: $gray-3;
-  @include background(linear-gradient(white, white 85%, $gray-1));
-  background-color: white;
+  //@include background(linear-gradient(white, white 85%, $gray-1));
+  //background-color: white;
   width: $slide-width;
   height: $slide-height;
   margin-left: -$slide-width / 2;
@@ -104,29 +106,32 @@ slides > slide {
   padding: $slide-top-bottom-padding $slide-left-right-padding;
 
   @include border-radius($slide-border-radius);
-  @include box-shadow(5px 5px 20px $gray-4);
-  @include transition(all 0.3s ease-out);
+  //@include box-shadow(5px 5px 20px $gray-4);
+  @include transition(all 0.6s ease-out);
 
-  $translateX: 1020px;
-  $rotateY: 30deg;
-  $rotateX: 45deg;
+  //$translateX: 1020px;
+  //$rotateY: 30deg;
+  //$rotateX: 45deg;
 
   &.far-past {
-    display: block;
-    @include transform(translate(-$translateX * 2));
-    @include transform(translate3d(-$translateX * 2, 0, 0));
+    //display: block;
+    display: none;
+    //@include transform(translate(-$translateX * 2));
+    //@include transform(translate3d(-$translateX * 2, 0, 0));
   }
 
   &.past {
     display: block;
-    @include transform(translate(-$translateX) rotateY($rotateY) rotateX($rotateX));
-    @include transform(translate3d(-$translateX, 0, 0) rotateY($rotateY) rotateX($rotateX));
+    //@include transform(translate(-$translateX) rotateY($rotateY) rotateX($rotateX));
+    //@include transform(translate3d(-$translateX, 0, 0) rotateY($rotateY) rotateX($rotateX));
+    opacity: 0;
   }
 
   &.current {
     display: block;
-    @include transform(translate(0));
-    @include transform(translate3d(0, 0, 0));
+    //@include transform(translate(0));
+    //@include transform(translate3d(0, 0, 0));
+    opacity: 1;
 
     .auto-fadein {
       opacity: 1;
@@ -139,14 +144,17 @@ slides > slide {
 
   &.next {
     display: block;
-    @include transform(translate($translateX) rotateY(-$rotateY) rotateX($rotateX));
-    @include transform(translate3d($translateX, 0, 0) rotateY(-$rotateY) rotateX($rotateX));
+    //@include transform(translate($translateX) rotateY(-$rotateY) rotateX($rotateX));
+    //@include transform(translate3d($translateX, 0, 0) rotateY(-$rotateY) rotateX($rotateX));
+    opacity: 0;
+    pointer-events: none;
   }
 
   &.far-next {
-    display: block;
-    @include transform(translate($translateX * 2));
-    @include transform(translate3d($translateX * 2, 0, 0));
+    //display: block;
+    display: none;
+    //@include transform(translate($translateX * 2));
+    //@include transform(translate3d($translateX * 2, 0, 0));
   }
 
   &.dark {
@@ -192,6 +200,17 @@ slides > slide {
     }
   }
 
+  &.backdrop {
+    z-index: -1;
+    display: block !important;
+    @include background(linear-gradient(white, white 85%, $gray-1));
+    background-color: white;
+
+    &:after, &:before {
+      display: none;
+    }
+  }
+
   > hgroup + article {
     margin-top: $article-content-top-padding;
 
@@ -221,30 +240,36 @@ slides.layout-faux-widescreen {
 
   > slide.far-past {
     display: block;
+    display: none;
     @include transform(translate(-$translateX * 2));
     @include transform(translate3d(-$translateX * 2, 0, 0));
   }
 
   > slide.past {
     display: block;
-    @include transform(translate(-$translateX));
-    @include transform(translate3d(-$translateX, 0, 0));
+    //@include transform(translate(-$translateX));
+    //@include transform(translate3d(-$translateX, 0, 0));
+    opacity: 0;
   }
 
   > slide.current {
     display: block;
-    @include transform(translate(0));
-    @include transform(translate3d(0, 0, 0));
+    //@include transform(translate(0));
+    //@include transform(translate3d(0, 0, 0));
+    opacity: 1;
   }
 
   > slide.next {
     display: block;
-    @include transform(translate($translateX));
-    @include transform(translate3d($translateX, 0, 0));
+    //@include transform(translate($translateX));
+    //@include transform(translate3d($translateX, 0, 0));
+    opacity: 0;
+    pointer-events: none;
   }
 
   > slide.far-next {
     display: block;
+    display: none;
     @include transform(translate($translateX * 2));
     @include transform(translate3d($translateX * 2, 0, 0));
   }
-- 
cgit v1.2.3