Adding bottom grey footer

3 files changed, 96 insertions, 14 deletions

diff --git a/template.html b/template.html
index 1e09a8c..8cff66e 100644
--- a/template.html
+++ b/template.html
@@ -76,11 +76,20 @@ URL: https://code.google.com/p/io-2012-slides
         <li>Pressing 'o' toggles overview mode</li>
         <li>Pressing 'ESC' toggles off these goodies</li>
       </ul>
+    </article>
+  </slide>
+
+  <slide>
+    <hgroup>
+      <h2>Slide with Bullets that Build</h2>
+    </hgroup>
+    <article>
       <p>Another list, but items fade as they build:</p>
       <ul class="build fade">
         <li>Hover over me!</li>
         <li>Hover over me!</li>
         <li>Hover over me!</li>
+        <li>Hover over me!</li>
       </ul>
     </article>
   </slide>
@@ -143,11 +152,7 @@ function helloWorld(world) {
 &lt;/style&gt;
 </pre>
 <pre class="prettyprint" data-lang="html">
-&lt;!DOCTYPE html>
 &lt;html>
-&lt;head>
-  &lt;title>My Awesome Page&lt;/title>
-&lt;/head>
 &lt;body>
   &lt;p&gt;Hello world&lt;/p&gt;
 &lt;body>
diff --git a/theme/css/io2013.css b/theme/css/io2013.css
index 364eccb..6bdba98 100644
--- a/theme/css/io2013.css
+++ b/theme/css/io2013.css
@@ -1,28 +1,54 @@
-/* line 5, ../scss/io2013.scss */
+/* line 6, ../scss/io2013.scss */
 * {
   line-height: 1.3;
 }
 
-/* line 9, ../scss/io2013.scss */
+/* line 10, ../scss/io2013.scss */
 h2 {
   font-weight: bold;
 }
 
-/* line 12, ../scss/io2013.scss */
+/* line 13, ../scss/io2013.scss */
 h2, h3 {
   color: #515151;
 }
 
-/* line 16, ../scss/io2013.scss */
+/* line 17, ../scss/io2013.scss */
 q, blockquote {
   font-weight: bold;
 }
 
-/* line 20, ../scss/io2013.scss */
+/* line 21, ../scss/io2013.scss */
 slides > slide {
   color: #515151;
 }
-/* line 24, ../scss/io2013.scss */
+/* line 28, ../scss/io2013.scss */
+slides > slide:not(.nobackground):before {
+  background: none;
+  background-color: #e6e6e6;
+  height: 90px;
+  left: 0;
+  width: 100%;
+  bottom: 0;
+}
+/* line 36, ../scss/io2013.scss */
+slides > slide:not(.nobackground):after {
+  background: url(../../images/google_developers_icon_128.png) no-repeat 0 0;
+  -webkit-background-size: 30px;
+  -moz-background-size: 30px;
+  -o-background-size: 30px;
+  background-size: 30px;
+  background-position: 60px 50%;
+  left: 0;
+  bottom: 90px;
+  width: 100%;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  text-align: right;
+  padding-right: 60px;
+}
+/* line 50, ../scss/io2013.scss */
 slides > slide.title-slide:after {
   content: '';
   background: url(../../images/io2013/google-io-lockup-1.png) no-repeat 100% 50%;
@@ -36,20 +62,32 @@ slides > slide.title-slide:after {
   width: 100%;
   height: 90px;
 }
-/* line 36, ../scss/io2013.scss */
+/* line 62, ../scss/io2013.scss */
 slides > slide.title-slide hgroup h1 {
   font-weight: bold;
   line-height: 1.1;
 }
-/* line 40, ../scss/io2013.scss */
+/* line 66, ../scss/io2013.scss */
 slides > slide.title-slide hgroup h2, slides > slide.title-slide hgroup p {
   color: #515151;
 }
-/* line 43, ../scss/io2013.scss */
+/* line 69, ../scss/io2013.scss */
 slides > slide.title-slide hgroup h2 {
   margin-top: 0.25em;
 }
-/* line 46, ../scss/io2013.scss */
+/* line 72, ../scss/io2013.scss */
 slides > slide.title-slide hgroup p {
   margin-top: 3em;
 }
+/* line 78, ../scss/io2013.scss */
+slides > slide .source {
+  bottom: 130px;
+}
+/* line 82, ../scss/io2013.scss */
+slides > slide > article:only-child {
+  height: 88%;
+}
+/* line 86, ../scss/io2013.scss */
+slides > slide > article:only-child > iframe {
+  height: 100%;
+}
diff --git a/theme/scss/io2013.scss b/theme/scss/io2013.scss
index c728cfb..1bab7b0 100644
--- a/theme/scss/io2013.scss
+++ b/theme/scss/io2013.scss
@@ -1,4 +1,5 @@
 @import "compass/css3/background-size";
+@import "compass/css3/box-sizing";
 
 @import "variables";
 
@@ -19,6 +20,31 @@ q, blockquote {
 
 slides > slide {
   color: $gray-4;
+  
+  $grayBarHeight: 90px;
+
+  // Grey bottom bar.
+  &:not(.nobackground) {
+    &:before {
+      background: none;
+      background-color: $gray-1;
+      height: $grayBarHeight;
+      left: 0;
+      width: 100%;
+      bottom: 0;
+    }
+    &:after {
+      background: url(../../images/google_developers_icon_128.png) no-repeat 0 0;
+      @include background-size($brand-small-icon-size);
+      background-position: $slide-left-right-padding 50%;
+      left: 0;
+      bottom: $grayBarHeight;
+      width: 100%;
+      @include box-sizing(border-box);
+      text-align: right;
+      padding-right: $slide-left-right-padding;
+    }
+  }
 
   &.title-slide {
     &:after {
@@ -48,4 +74,17 @@ slides > slide {
       }
     }
   }
+  
+  .source {
+    bottom: $grayBarHeight + 40;
+  }
+  
+  > article:only-child {
+    height: 88%
+  }
+  
+  > article:only-child > iframe {
+   height: 100%;
+  }
+  
 }
\ No newline at end of file