From 07fa54cb316721ea1522f801063dd2109530a8bf Mon Sep 17 00:00:00 2001 From: Eric Bidelman Date: Mon, 29 Apr 2013 14:53:53 -0700 Subject: io2013 style updates --- theme/scss/_base.scss | 2 ++ theme/scss/_variables.scss | 34 +++++++++++++++++++++++++++++++ theme/scss/default.scss | 36 -------------------------------- theme/scss/io2013.scss | 51 ++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 87 insertions(+), 36 deletions(-) create mode 100644 theme/scss/_variables.scss create mode 100644 theme/scss/io2013.scss (limited to 'theme/scss') diff --git a/theme/scss/_base.scss b/theme/scss/_base.scss index a5b99cb..50504db 100644 --- a/theme/scss/_base.scss +++ b/theme/scss/_base.scss @@ -11,6 +11,8 @@ @import "compass/css3/transform"; @import "compass/css3/transition"; +@import "variables"; + @mixin font-smoothing($val: antialiased) { -webkit-font-smoothing: $val; -moz-font-smoothing: $val; diff --git a/theme/scss/_variables.scss b/theme/scss/_variables.scss new file mode 100644 index 0000000..d07f907 --- /dev/null +++ b/theme/scss/_variables.scss @@ -0,0 +1,34 @@ +$social-tags: ''; +$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; diff --git a/theme/scss/default.scss b/theme/scss/default.scss index f1e9816..b8d11b0 100644 --- a/theme/scss/default.scss +++ b/theme/scss/default.scss @@ -2,41 +2,6 @@ @import "compass/css3/columns"; @import "compass/css3/user-interface"; -$social-tags: '#yourhashtag'; -$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; @@ -51,7 +16,6 @@ $article-content-top-padding: 45px; } - /** * Theme Styles */ diff --git a/theme/scss/io2013.scss b/theme/scss/io2013.scss new file mode 100644 index 0000000..c728cfb --- /dev/null +++ b/theme/scss/io2013.scss @@ -0,0 +1,51 @@ +@import "compass/css3/background-size"; + +@import "variables"; + +* { + line-height: 1.3; +} + +h2 { + font-weight: bold; +} +h2, h3 { + color: $gray-4; +} + +q, blockquote { + font-weight: bold; +} + +slides > slide { + color: $gray-4; + + &.title-slide { + &:after { + content: ''; + background: url(../../images/io2013/google-io-lockup-1.png) no-repeat 100% 50%; + @include background-size(contain); + position: absolute; + bottom: $slide-top-bottom-padding + 40; + right: $slide-top-bottom-padding; + width: 100%; + height: 90px; + } + + hgroup { + h1 { + font-weight: bold; + line-height: 1.1; + } + h2, p { + color: $gray-4; + } + h2 { + margin-top: 0.25em; + } + p { + margin-top: 3em; + } + } + } +} \ No newline at end of file -- cgit v1.2.3