sass dir to scss

1 files changed, 937 insertions, 0 deletions

diff --git a/theme/scss/default.scss b/theme/scss/default.scss
new file mode 100644
index 0000000..0cc6e47
--- /dev/null
+++ b/theme/scss/default.scss
@@ -0,0 +1,937 @@
+@import "base";
+@import "compass/css3/columns";
+@import "compass/css3/user-interface";
+
+$social-tags: '#io2012';
+$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;
+$slide-border-radius: 5px;
+
+$slide-tap-area-width: 100px;
+
+$article-content-top-padding: 45px;
+
+@mixin highlight-color($color: $brand-yellow) {
+  -webkit-tap-highlight-color: $color;
+  -moz-tap-highlight-color: $color;
+  -ms-tap-highlight-color: $color;
+  -o-tap-highlight-color: $color;
+  tap-highlight-color: $color;
+}
+
+/**
+ * Theme Styles
+ */
+::selection {
+  color: white;
+  background-color: $brand-yellow;
+  @include text-shadow(none);
+}
+
+::-webkit-scrollbar {
+  height: 16px;
+  overflow: visible;
+  width: 16px;
+}
+::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, .1);
+  background-clip: padding-box;
+  border: solid transparent;
+  min-height: 28px;
+  padding: 100px 0 0;
+  @include box-shadow(inset 1px 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.07));
+  border-width: 1px 1px 1px 6px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+::-webkit-scrollbar-button {
+  height: 0;
+  width: 0;
+}
+::-webkit-scrollbar-track {
+  background-clip: padding-box;
+  border: solid transparent;
+  border-width: 0 0 0 4px;
+}
+::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+body {
+  background: black;
+}
+
+slides > slide {
+  display: none;
+  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;
+  width: $slide-width;
+  height: $slide-height;
+  margin-left: -$slide-width / 2;
+  margin-top: -$slide-height / 2;
+  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.6s ease-in-out);
+
+  //$translateX: 1020px;
+  //$rotateY: 30deg;
+  //$rotateX: 45deg;
+
+  &.far-past {
+    //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));
+    opacity: 0;
+  }
+
+  &.current {
+    display: block;
+    //@include transform(translate(0));
+    //@include transform(translate3d(0, 0, 0));
+    opacity: 1;
+
+    .auto-fadein {
+      opacity: 1;
+    }
+
+    .gdbar {
+      @include background-size(100% 100%);
+    }
+  }
+
+  &.next {
+    display: block;
+    //@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;
+    display: none;
+    //@include transform(translate($translateX * 2));
+    //@include transform(translate3d($translateX * 2, 0, 0));
+  }
+
+  &.dark {
+    background: $gray-4 !important;
+  }
+
+  &:not(.nobackground) {
+    //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);
+
+    &:before {
+      font-size: 12pt;
+      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 {
+      font-size: 12pt;
+      content: attr(data-slide-num) '/' attr(data-total-slides);
+      position: absolute;
+      bottom: $slide-top-bottom-padding / 2;
+      right: $slide-left-right-padding;
+      line-height: 1.9;
+    }
+  }
+
+  &.title-slide {
+    &:after {
+      content: '';
+      background: url(../../images/io2012_logo.png) no-repeat 100% 50%;
+      @include background-size(contain);
+      position: absolute;
+      bottom: $slide-top-bottom-padding;
+      right: $slide-top-bottom-padding;
+      width: 100%;
+      height: 60px;
+    }
+  }
+
+  &.backdrop {
+    z-index: -10;
+    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;
+
+    p {
+      margin-bottom: 1em;
+    }
+  }
+
+  > article:only-child {
+    height: 100%;
+
+    > iframe {
+      height: 100%;
+    }
+  }
+}
+
+slides.layout-faux-widescreen > slide {
+  padding: $slide-top-bottom-padding 160px;
+}
+
+slides.layout-widescreen,
+slides.layout-faux-widescreen {
+
+  $translateX: 1130px;
+
+  > slide {
+    margin-left: -$slide-width-widescreen / 2;
+    width: $slide-width-widescreen;
+  }
+
+  > slide.far-past {
+    display: block;