Hook up slide enter/leave events. gdevs grey icon bar slides in. Branding updates in footer. Other style updates (more sassy!)

2 files changed, 381 insertions, 857 deletions

diff --git a/theme/sass/_base.scss b/theme/sass/_base.scss
index 6ffe8d6..445710b 100644
--- a/theme/sass/_base.scss
+++ b/theme/sass/_base.scss
@@ -1,6 +1,6 @@
-//@import "compass/reset";
+@import "compass/reset";
 @import "compass/css3/border-radius";
-//@import "compass/css3/box";
+@import "compass/css3/box";
 @import "compass/css3/box-shadow";
 @import "compass/css3/box-sizing";
 @import "compass/css3/images";
@@ -16,6 +16,18 @@
   -o-font-smoothing: $val;
 }
 
+@mixin flexcenter {
+  display: -webkit-box !important;
+  display: -moz-box !important;
+  display: -ms-box !important;
+  display: -o-box !important;
+  display: box !important;
+  @include box-orient(vertical);
+  @include box-align(center);
+  @include box-pack(center);
+}
+
+
 /**
  * Base SlideDeck Styles
  */
@@ -28,7 +40,8 @@ body {
   margin: 0;
   padding: 0;
 
-  display: block !important;
+  //display: block !important;
+  opacity: 1 !important;
 
   height: 100%;
   min-height: 740px;
@@ -38,6 +51,11 @@ body {
 
   color: #fff;
   @include font-smoothing(antialiased);
+  @include transition(opacity 600ms ease-in);
+}
+
+slides > slide[hidden] {
+  display: none !important;
 }
 
 slides {
diff --git a/theme/sass/default.scss b/theme/sass/default.scss
index d1c6591..e218598 100644
--- a/theme/sass/default.scss
+++ b/theme/sass/default.scss
@@ -1,50 +1,85 @@
 @import "base";
+@import "compass/css3/user-interface";
+
+$social-tags: '#io2012 @yourtwitter';
+$brand-small-icon-size: 30px;
+
+$gray-1: #e6e6e6;
+$gray-2: #a9a9a9;
+$gray-3: #797979;
+$gray-4: #515151;
+
+$brand-blue: rgb(67, 135, 253);
+$brand-blue-secondary: #3c8ef3;
+$brand-blue-secondary2: #2a7cdf;
+
+$brand-red: rgb(244, 74, 63);
+$brand-red-secondary: #e0543e;
+$brand-red-secondary2: #d94d3a;
+
+$brand-yellow: rgb(255, 209, 77);
+$brand-yellow-secondary: #f9cc46;
+$brand-yellow-secondary2: #f6c000;
+
+$brand-green: rgb(13, 168, 97);
+$brand-green-secondary: #00a86d;
+$brand-green-secondary2: #009f5d;
+
+
+$slide-width: 900px;
+$slide-height: 700px;
+$slide-width-widescreen: 1100px;
+$slide-top-bottom-padding: 40px;
+$slide-left-right-padding: 60px;
 
 /**
  * Theme Styles
  */
 ::selection {
   color: white;
-  background-color: red;
+  background-color: $brand-yellow;
   @include text-shadow(none);
 }
 
 body {
-  @include background-image(radial-gradient(50% 50%, #b1dfff 0%, #0c54ab 600px));
+  @include background-image(radial-gradient(50% 50%, $brand-blue 0%,
+                                            $brand-blue-secondary2 600px));
+  //@include background-image(linear-gradient(top, $brand-blue 60%, $brand-blue-secondary2));
   background-attachment: fixed;
 }
 
 slides > slide {
-  width: 900px;
-  height: 700px;
-  margin-left: -450px;
-  margin-top: -350px;
+  width: $slide-width;
+  height: $slide-height;
+  margin-left: -$slide-width / 2;
+  margin-top: -$slide-height / 2;
 
-  padding: 40px 60px;
+  padding: $slide-top-bottom-padding $slide-left-right-padding;
 
   background-color: white;
 
-  @include border-radius(10px);
-  @include box-shadow(5px 5px 20px black);
-  @include transition(all .3s ease-out);
+  @include border-radius(5px);
+  @include box-shadow(3px 3px 20px $gray-4);
+  @include transition(all 0.3s ease-out);
 }
 
 slides.layout-widescreen > slide {
-  margin-left: -550px;
-  width: 1100px;
+  margin-left: -$slide-width-widescreen / 2;
+  width: $slide-width-widescreen;
 }
 
 slides.layout-faux-widescreen > slide {
-  margin-left: -550px;
-  width: 1100px;
-  padding: 40px 160px;
+  margin-left: -$slide-width-widescreen / 2;
+  width: $slide-width-widescreen;
+  padding: $slide-top-bottom-padding 160px;
 }
 
-slides > slide:not(.nobackground):not(.biglogo):not(.fill) {
-  background: white url(/images/gdd2011_banner.png) 105% 99% no-repeat;
+slides > slide:not(.nobackground):not(.logoslide):not(.fill) {
+  //background: white url(/images/google_developers_icon_128.png) ($brand-small-icon-size * 2) 98% no-repeat;
+  //@include background-size($brand-small-icon-size $brand-small-icon-size);
 }
 
-slides.nobackground slide:not(.fill) {
+/*slides.nobackground slide:not(.fill) {
   background: url(/images/devfest_logo_small.png) 98% 99% no-repeat,
               url(/images/bubbles.png) 5% -125px no-repeat,
               url(/images/colorbar.png) 0 91% repeat-x,
@@ -55,291 +90,175 @@ slides.nobackground slide:not(.fill)::after,
 slides.nobackground slide:not(.fill)::before {
   color: inherit !important;
 }
+*/
 
-slides > slide:not(:first-of-type):not(.biglogo):not(.fill):not(.nobackground)::after {
-  content: attr(data-slide-num) ' / ' attr(data-total-slides);
-  position: absolute;
-  bottom: 2%;
-  left: 2%;
-  font-size: 12pt;
-  color: white;
-}
+slides > slide:not(:first-of-type):not(.fill):not(.nobackground) {
 
-slides > slide:not(:first-of-type):not(.biglogo):not(.fill):not(.nobackground)::before {
-  position: absolute;
-  bottom: 14px;
-  left: 275px;
-  font-size: 18pt;
-  color: white;
-  content: '@ebidel #gddjp';
+  &:before {
+    content: $social-tags;
+    position: absolute;
+    bottom: $slide-top-bottom-padding / 2;
+    left: $slide-left-right-padding;
+    background: url(/images/google_developers_icon_128.png) no-repeat 0 50%;
+    @include background-size($brand-small-icon-size $brand-small-icon-size);
+    padding-left: $brand-small-icon-size + 10;
+    height: $brand-small-icon-size;
+    line-height: 1.9;
+  }
+  &:after {
+    content: attr(data-slide-num) '/' attr(data-total-slides);
+    position: absolute;
+    bottom: $slide-top-bottom-padding / 2;
+    right: $slide-left-right-padding;
+  }
 }
 
-slides.layout-widescreen > slide:not(.nobackground):not(.biglogo),
-slides.layout-faux-widescreen > slide:not(.nobackground):not(.biglogo) {
+/*slides.layout-widescreen > slide:not(.nobackground),
+slides.layout-faux-widescreen > slide:not(.nobackground) {
   background-position-x: 0, 840px;
-}
-
-/* Slide Styles */
-
-slide.biglogo {
-  background: url(/images/google_logo.png) 50% 50% no-repeat,
-              url(/images/gdd2011_banner.png) 105% 99% no-repeat, white;
-}
+}*/
 
 /* Slides */
 
 slides > slide {
   display: none;