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 --- theme/css/io2013.css | 58 +++++++++++++++++++++++++++++++++++++++++--------- theme/scss/io2013.scss | 39 +++++++++++++++++++++++++++++++++ 2 files changed, 87 insertions(+), 10 deletions(-) (limited to 'theme') 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