From 31ea3d93f19250eef47f3345c3043c890ac31442 Mon Sep 17 00:00:00 2001 From: Eric Bidelman Date: Mon, 29 Apr 2013 18:08:34 -0700 Subject: Adding bottom grey footer --- template.html | 13 +++++++---- theme/css/io2013.css | 58 +++++++++++++++++++++++++++++++++++++++++--------- theme/scss/io2013.scss | 39 +++++++++++++++++++++++++++++++++ 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
  • Pressing 'o' toggles overview mode
  • Pressing 'ESC' toggles off these goodies
  • + + + + +
    +

    Slide with Bullets that Build

    +
    +

    Another list, but items fade as they build:

    @@ -143,11 +152,7 @@ function helloWorld(world) { </style>
    -<!DOCTYPE html>
     <html>
    -<head>
    -  <title>My Awesome Page</title>
    -</head>
     <body>
       <p>Hello world</p>
     <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
    -- 
    cgit v1.2.3