Slides sliding in is oldschool. We now fade between slides

2 files changed, 220 insertions, 265 deletions

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%;