From cb6cac6cb3f19a51254b7bb25acf86799c352989 Mon Sep 17 00:00:00 2001 From: Eric Bidelman Date: Sat, 7 Apr 2012 15:43:31 -0700 Subject: Hook up slide enter/leave events. gdevs grey icon bar slides in. Branding updates in footer. Other style updates (more sassy!) --- theme/sass/_base.scss | 24 +- theme/sass/default.scss | 1214 ++++++++++++++--------------------------------- 2 files changed, 381 insertions(+), 857 deletions(-) (limited to 'theme/sass') diff --git a/theme/sass/_base.scss b/theme/sass/_base.scss index 6ffe8d6..445710b 100644 --- a/theme/sass/_base.scss +++ b/theme/sass/_base.scss @@ -1,6 +1,6 @@ -//@import "compass/reset"; +@import "compass/reset"; @import "compass/css3/border-radius"; -//@import "compass/css3/box"; +@import "compass/css3/box"; @import "compass/css3/box-shadow"; @import "compass/css3/box-sizing"; @import "compass/css3/images"; @@ -16,6 +16,18 @@ -o-font-smoothing: $val; } +@mixin flexcenter { + display: -webkit-box !important; + display: -moz-box !important; + display: -ms-box !important; + display: -o-box !important; + display: box !important; + @include box-orient(vertical); + @include box-align(center); + @include box-pack(center); +} + + /** * Base SlideDeck Styles */ @@ -28,7 +40,8 @@ body { margin: 0; padding: 0; - display: block !important; + //display: block !important; + opacity: 1 !important; height: 100%; min-height: 740px; @@ -38,6 +51,11 @@ body { color: #fff; @include font-smoothing(antialiased); + @include transition(opacity 600ms ease-in); +} + +slides > slide[hidden] { + display: none !important; } slides { diff --git a/theme/sass/default.scss b/theme/sass/default.scss index d1c6591..e218598 100644 --- a/theme/sass/default.scss +++ b/theme/sass/default.scss @@ -1,50 +1,85 @@ @import "base"; +@import "compass/css3/user-interface"; + +$social-tags: '#io2012 @yourtwitter'; +$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; /** * Theme Styles */ ::selection { color: white; - background-color: red; + background-color: $brand-yellow; @include text-shadow(none); } body { - @include background-image(radial-gradient(50% 50%, #b1dfff 0%, #0c54ab 600px)); + @include background-image(radial-gradient(50% 50%, $brand-blue 0%, + $brand-blue-secondary2 600px)); + //@include background-image(linear-gradient(top, $brand-blue 60%, $brand-blue-secondary2)); background-attachment: fixed; } slides > slide { - width: 900px; - height: 700px; - margin-left: -450px; - margin-top: -350px; + width: $slide-width; + height: $slide-height; + margin-left: -$slide-width / 2; + margin-top: -$slide-height / 2; - padding: 40px 60px; + padding: $slide-top-bottom-padding $slide-left-right-padding; background-color: white; - @include border-radius(10px); - @include box-shadow(5px 5px 20px black); - @include transition(all .3s ease-out); + @include border-radius(5px); + @include box-shadow(3px 3px 20px $gray-4); + @include transition(all 0.3s ease-out); } slides.layout-widescreen > slide { - margin-left: -550px; - width: 1100px; + margin-left: -$slide-width-widescreen / 2; + width: $slide-width-widescreen; } slides.layout-faux-widescreen > slide { - margin-left: -550px; - width: 1100px; - padding: 40px 160px; + margin-left: -$slide-width-widescreen / 2; + width: $slide-width-widescreen; + padding: $slide-top-bottom-padding 160px; } -slides > slide:not(.nobackground):not(.biglogo):not(.fill) { - background: white url(/images/gdd2011_banner.png) 105% 99% no-repeat; +slides > slide:not(.nobackground):not(.logoslide):not(.fill) { + //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); } -slides.nobackground slide:not(.fill) { +/*slides.nobackground slide:not(.fill) { background: url(/images/devfest_logo_small.png) 98% 99% no-repeat, url(/images/bubbles.png) 5% -125px no-repeat, url(/images/colorbar.png) 0 91% repeat-x, @@ -55,291 +90,175 @@ slides.nobackground slide:not(.fill)::after, slides.nobackground slide:not(.fill)::before { color: inherit !important; } +*/ -slides > slide:not(:first-of-type):not(.biglogo):not(.fill):not(.nobackground)::after { - content: attr(data-slide-num) ' / ' attr(data-total-slides); - position: absolute; - bottom: 2%; - left: 2%; - font-size: 12pt; - color: white; -} +slides > slide:not(:first-of-type):not(.fill):not(.nobackground) { -slides > slide:not(:first-of-type):not(.biglogo):not(.fill):not(.nobackground)::before { - position: absolute; - bottom: 14px; - left: 275px; - font-size: 18pt; - color: white; - content: '@ebidel #gddjp'; + &:before { + 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 { + content: attr(data-slide-num) '/' attr(data-total-slides); + position: absolute; + bottom: $slide-top-bottom-padding / 2; + right: $slide-left-right-padding; + } } -slides.layout-widescreen > slide:not(.nobackground):not(.biglogo), -slides.layout-faux-widescreen > slide:not(.nobackground):not(.biglogo) { +/*slides.layout-widescreen > slide:not(.nobackground), +slides.layout-faux-widescreen > slide:not(.nobackground) { background-position-x: 0, 840px; -} - -/* Slide Styles */ - -slide.biglogo { - background: url(/images/google_logo.png) 50% 50% no-repeat, - url(/images/gdd2011_banner.png) 105% 99% no-repeat, white; -} +}*/ /* Slides */ slides > slide { display: none; -} + font-family: 'Open Sans', Arial, sans-serif; + color: $gray-3; -slides > slide.far-past { - display: block; - -o-transform: translate(-2040px); - -moz-transform: translate(-2040px); - -webkit-transform: translate3d(-2040px, 0, 0); - transform: translate(-2040px); -} + $translateX: 1020px; + $rotateY: 30deg; + $rotateX: 45deg; -slides > slide.past { - display: block; - -o-transform: translate(-1020px) rotateY(30deg) rotateX(45deg); - -moz-transform: translate(-1020px) rotateY(30deg) rotateX(45deg); - -webkit-transform: translate3d(-1020px, 0, 0) rotateY(30deg) rotateX(45deg); - transform: translate(-1020px) rotateY(30deg) rotateX(45deg); -} + &.far-past { + display: block; + @include transform(translate(-$translateX * 2)); + @include transform(translate3d(-$translateX * 2, 0, 0)); + } -slides > slide.current { - display: block; - -o-transform: translate(0); - -moz-transform: translate(0); - -webkit-transform: translate3d(0, 0, 0); - transform: translate(0); -} + &.past { + display: block; + @include transform(translate(-$translateX) rotateY($rotateY) rotateX($rotateX)); + @include transform(translate3d(-$translateX, 0, 0) rotateY($rotateY) rotateX($rotateX)); + } -slides > slide.next { - display: block; - -o-transform: translate(1020px) rotateY(-30deg) rotateX(45deg); - -moz-transform: translate(1020px) rotateY(-30deg) rotateX(45deg); - -webkit-transform: translate3d(1020px, 0, 0) rotateY(-30deg) rotateX(45deg); - transform: translate(1020px) rotateY(-30deg) rotateX(45deg); -} + &.current { + display: block; + @include transform(translate(0)); + @include transform(translate3d(0, 0, 0)); + } -slides > slide.far-next { - display: block; - transform: translate(2040px); - -o-transform: translate(2040px); - -moz-transform: translate(2040px); - -webkit-transform: translate3d(2040px, 0, 0); -} + &.next { + display: block; + @include transform(translate($translateX) rotateY(-$rotateY) rotateX($rotateX)); + @include transform(translate3d($translateX, 0, 0) rotateY(-$rotateY) rotateX($rotateX)); + } -slides.layout-widescreen > slide.far-past, -slides.layout-faux-widescreen > slide.far-past { - display: block; - transform: translate(-2260px); - -o-transform: translate(-2260px); - -moz-transform: translate(-2260px); - -webkit-transform: translate3d(-2260px, 0, 0); + &.far-next { + display: block; + @include transform(translate($translateX * 2)); + @include transform(translate3d($translateX * 2, 0, 0)); + } } -slides.layout-widescreen > slide.past, -slides.layout-faux-widescreen > slide.past { - display: block; - transform: translate(-1130px); - -o-transform: translate(-1130px); - -moz-transform: translate(-1130px); - -webkit-transform: translate3d(-1130px, 0, 0); -} +slides.layout-widescreen, +slides.layout-faux-widescreen { -slides.layout-widescreen > slide.current, -slides.layout-faux-widescreen > slide.current { - display: block; - transform: translate(0); - -o-transform: translate(0); - -moz-transform: translate(0); - -webkit-transform: translate3d(0, 0, 0); -} + $translateX: 1130px; -slides.layout-widescreen > slide.next, -slides.layout-faux-widescreen > slide.next { - display: block; - transform: translate(1130px); - -o-transform: translate(1130px); - -moz-transform: translate(1130px); - -webkit-transform: translate3d(1130px, 0, 0); -} - -slides.layout-widescreen > slide.far-next, -slides.layout-faux-widescreen > slide.far-next { - display: block; - transform: translate(2260px); - -o-transform: translate(2260px); - -moz-transform: translate(2260px); - -webkit-transform: translate3d(2260px, 0, 0); -} + > slide.far-past { + display: block; + @include transform(translate(-$translateX * 2)); + @include transform(translate3d(-$translateX * 2, 0, 0)); + } -.slides > article { - font-family: 'Open Sans', Arial, sans-serif; + > slide.past { + display: block; + @include transform(translate(-$translateX)); + @include transform(translate3d(-$translateX, 0, 0)); + } - color: #545454; - font-weight: 300; - text-shadow: 0 1px 1px rgba(0, 0, 0, .1); + > slide.current { + display: block; + @include transform(translate(0)); + @include transform(translate3d(0, 0, 0)); + } - font-size: 30px; - line-height: 36px; + > slide.next { + display: block; + @include transform(translate($translateX)); + @include transform(translate3d($translateX, 0, 0)); + } - letter-spacing: -1px; + > slide.far-next { + display: block; + @include transform(translate($translateX * 2)); + @include transform(translate3d($translateX * 2, 0, 0)); + } } b { font-weight: 600; } -.blue { - color: rgb(0, 102, 204); -} -.yellow { - color: rgb(255, 211, 25); -} -.green { - color: rgb(0, 138, 53); -} -.red { - color: rgb(255, 0, 0); -} -.black { - color: black; -} -.white { - color: white; -} -.dark { - background-color: rgba(0, 0, 0, 0.2); - color: white; -} -.bubble { - background-color: rgba(0, 0, 0, 0.8); - color: white; -} a { color: rgb(0, 102, 204); -} -a:visited { - color: rgba(0, 102, 204, .75); -} -a:hover { - color: black; -} -p { - margin: 0; - padding: 0; -} - -h1 { - font-size: 50px; - line-height: 1.5; - padding: 0; - margin: 0; - - font-weight: 600; + &:visited { + color: rgba(0, 102, 204, .75); + } - letter-spacing: -3px; - color: #0075ba; + &:hover { + color: black; + } } -h1.centered { - /*background: rgba(255, 255, 255, 0.3); - box-shadow: 0 1px 5px #333;*/ - background: none; - width: 100%; - text-align: center; - padding: 20px 0; +h1, h2, h3 { + font-weight: 600; } h2 { font-size: 45px; - font-weight: 600; line-height: 45px; letter-spacing: -2px; + color: $gray-4; - position: absolute; - left: 0; - bottom: 150px; + //padding: 30px 60px; - padding: 30px 60px; - margin: 0; - - width: 100%; - background: rgba(255, 255, 255, 0.3); - box-shadow: 0 1px 5px #333; - box-sizing: border-box; + //width: 100%; + //background: rgba(255, 255, 255, 0.3); + //@include box-shadow(0 1px 5px #333); + //@include box-sizing(border-box); } h3 { font-size: 30px; - line-height: 36px; - padding: 0; margin: 0 0 1em 0; - font-weight: 600; letter-spacing: -1px; -} -h2.nobackground { - background: none; - box-shadow: none; -} -h2.megabottom { - bottom: 90px; -} -h2.shadow { - text-shadow: 1px 1px 3px black; -} -label.underline { - border-bottom: 3px solid #fccc02; /*rgb(192, 192, 192)*/ -} - -slide.fill h3 { - background: rgba(255, 255, 255, .75); - padding-top: .2em; - padding-bottom: .3em; - margin-top: -.2em; - margin-left: -60px; - padding-left: 60px; - margin-right: -60px; - padding-right: 60px; -} - -.fill h4 { - display: inline; - position: absolute; - bottom: 50px; - padding: 15px; + line-height: 2; + font-weight: inherit; + color: $gray-3; } ul { - margin: 0; - padding: 0; margin-left: .75em; -} -ul ul { - margin-top: .5em; -} -li { - padding: 0; - margin: 0; - margin-bottom: .5em; + ul { + margin-top: .5em; + } } -/*li::before { - content: '·'; - width: .75em; - margin-left: -.75em; +li { + margin-bottom: 0.5em; - position: absolute; -}*/ + &:before { + content: '·'; + width: .75em; + margin-left: -.75em; + position: absolute; + } +} ul > li::before { - /*content: '·';*/ - content: url('../images/chrome-logo-tiny2.png'); + content: '·'; width: 0.5em; margin-left: -1.3em; position: absolute; @@ -349,23 +268,19 @@ ul li ul li::before { } pre { - font-family: 'Droid Sans Mono', 'Courier New', monospace; - + font-family: 'Inconsolata', 'Courier New', monospace; font-size: 20px; line-height: 28px; padding: 10px 20px; - letter-spacing: -1px; - - margin-bottom: 20px;text-shadow: none; - text-shadow: none; + margin-bottom: 20px; + @include text-shadow(none); /*overflow: hidden;*/ } code { font-size: 95%; - font-family: 'Droid Sans Mono', 'Courier New', monospace; - + font-family: 'Inconsolata', 'Courier New', monospace; color: black; } @@ -394,16 +309,13 @@ button { background: -o-linear-gradient(#F9F9F9 40%, #E3E3E3 70%); background: linear-gradient(#F9F9F9 40%, #E3E3E3 70%); border: 1px solid #999; - -webkit-border-radius: 3px; - border-radius: 3px; + @include border-radius(3px); padding: 5px 8px; outline: none; white-space: nowrap; - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; + @include user-select(none); cursor: pointer; - text-shadow: 1px 1px #fff; + @include text-shadow(1px 1px #fff); font-weight: 700; font-size: 10pt; } @@ -421,11 +333,27 @@ button:active { background: linear-gradient(#E3E3E3 40%, #F9F9F9 70%); } -slide.fill { - border-radius: 10px; - -o-border-radius: 10px; - -moz-border-radius: 10px; - -webkit-border-radius: 10px; +.blue { + color: rgb(0, 102, 204); +} +.yellow { + color: rgb(255, 211, 25); +} +.green { + color: rgb(0, 138, 53); +} +.red { + color: rgb(255, 0, 0); +} +.black { + color: black; +} +.white { + color: white; +} +.dark { + background-color: rgba(0, 0, 0, 0.2); + color: white; } img.centered { @@ -451,273 +379,148 @@ th { vertical-align: top; } -.source { - position: absolute; - left: 60px; - top: 644px; - padding-right: 175px; - - font-size: 12px; - letter-spacing: 0; - line-height: 18px; - opacity: 0.5; -} - -.source a { - color: inherit; - text-decoration: none; -} - -.source a:hover { - text-decoration: underline; -} - q { display: block; font-size: 60px; line-height: 72px; margin-left: 20px; margin-top: 100px; -} -q::before { - content: '“'; - position: absolute; - display: inline-block; - margin-left: -2.1em; - width: 2em; - text-align: right; - - font-size: 90px; - color: rgb(192, 192, 192); + &:before { + content: '“'; + position: absolute; + display: inline-block; + margin-left: -2.1em; + width: 2em; + text-align: right; + font-size: 90px; + color: rgb(192, 192, 192); + } + &:after { + content: '”'; + position: absolute; + margin-left: .1em; + font-size: 90px; + color: rgb(192, 192, 192); + } } -q::after { - content: '”'; - - position: absolute; - margin-left: .1em; - font-size: 90px; - color: rgb(192, 192, 192); -} div.author { - text-align: right; + text-align: right; font-size: 40px; - + margin-top: 20px; - margin-right: 150px; + margin-right: 150px; + + &:before { + content: '—'; + } } -div.author::before { - content: '—'; + +slide.fill { + @include border-radius(10px); + + h3 { + background: rgba(255, 255, 255, .75); + padding-top: .2em; + padding-bottom: .3em; + margin-top: -.2em; + margin-left: -60px; + padding-left: 60px; + margin-right: -60px; + padding-right: 60px; + } + + h4 { + display: inline; + position: absolute; + bottom: 50px; + padding: 15px; + } } /* Size variants */ -article.smaller p, -article.smaller ul { - font-size: 20px; - line-height: 24px; - letter-spacing: 0; -} -article.smaller table { - font-size: 20px; - line-height: 24px; - letter-spacing: 0; -} -article.smaller pre { - font-size: 15px; - line-height: 20px; - letter-spacing: 0; -} -article.smaller q { - font-size: 40px; - line-height: 48px; -} -article.smaller q::before, -article.smaller q::after { - font-size: 60px; +article.smaller { + p, ul { + font-size: 20px; + line-height: 24px; + letter-spacing: 0; + } + table { + font-size: 20px; + line-height: 24px; + letter-spacing: 0; + } + pre { + font-size: 15px; + line-height: 20px; + letter-spacing: 0; + } + q { + font-size: 40px; + line-height: 48px; + + &:before, &:after { + font-size: 60px; + } + } } /* Builds */ -.build > * { - transition: opacity 0.5s ease-in-out 0.2s; - -o-transition: opacity 0.5s ease-in-out 0.2s; - -moz-transition: opacity 0.5s ease-in-out 0.2s; - -webkit-transition: opacity 0.5s ease-in-out 0.2s; -} +.build { + > * { + @include transition(opacity 0.5s ease-in-out 0.2s); + } -.to-build { - opacity: 0; -} + .to-build { + opacity: 0; + } -.build-fade { - opacity: 0.5; -} + .build-fade { + opacity: 0.5; -.build-fade:hover { - opacity: 1.0; + &:hover { + opacity: 1.0; + } + } } /* Pretty print */ .prettyprint .str, /* string content */ .prettyprint .atv { /* a markup attribute value */ - color: rgb(0, 138, 53); -} + color: rgb(0, 138, 53); +} .prettyprint .kwd, /* a keyword */ .prettyprint .tag { /* a markup tag name */ color: rgb(0, 102, 204); } .prettyprint .com { /* a comment */ - color: rgb(127, 127, 127); - font-style: italic; -} + color: rgb(127, 127, 127); + font-style: italic; +} .prettyprint .lit { /* a literal value */ color: rgb(127, 0, 0); -} +} .prettyprint .pun, /* punctuation, lisp open bracket, lisp close bracket */ -.prettyprint .opn, -.prettyprint .clo { - color: rgb(127, 127, 127); +.prettyprint .opn, +.prettyprint .clo { + color: rgb(127, 127, 127); } .prettyprint .typ, /* a type name */ -.prettyprint .atn, /* a markup attribute name */ -.prettyprint .dec, +.prettyprint .atn, /* a markup attribute name */ +.prettyprint .dec, .prettyprint .var { /* a declaration; a variable name */ color: rgb(127, 0, 127); } -/*.note { - pointer-events: none; - display: -webkit-box; - -webkit-box-align: center; - -webkit-box-pack: center; - -webkit-box-orient: vertical; - - position: absolute; - width: 100%; - height: 100%; - left: 0; - top: 0; - opacity: 0; - -webkit-transition: opacity 0.2s ease-in-out; -} - -.note > section { - position: relative; - top: 0; - left: 0; - width: 700px; - height: 400px; - z-index: 1000; - background: rgba(0,0,0,0.8); - border-radius: 10px; - padding: 25px; - box-shadow: 1px 1px 10px black; - color: black; - background: rgb(215, 215, 215); - background: -o-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190)); - background: -moz-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190)); - background: -webkit-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190)); - background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 500, from(rgb(240, 240, 240)), to(rgb(190, 190, 190))); -}*/ - .with-notes .note { opacity: 1; pointer-events: auto; } -input, button { - vertical-align: middle; -} - -.centered { - text-align: center; -} - -h2.right { - text-align: right; -} - -.rounded { - border-radius: 10px; - -o-border-radius: 10px; - -moz-border-radius: 10px; - -webkit-border-radius: 10px; -} -.reflect { - -webkit-box-reflect: below 3px -webkit-linear-gradient(rgba(255,255,255,0) 85%, white 150%); - -moz-box-reflect: below 3px -moz-linear-gradient(rgba(255,255,255,0) 85%, white 150%); - -o-box-reflect: below 3px -o-linear-gradient(rgba(255,255,255,0) 85%, white 150%); - -ms-box-reflect: below 3px -ms-linear-gradient(rgba(255,255,255,0) 85%, white 150%); - box-reflect: below 3px linear-gradient(rgba(255,255,255,0) 85%, white 150%); -} - -/* ===== SLIDE CONTENT ===== */ -#title-slide > div { - font-size: 30px; - margin-top: 200px; - color: rgb(171,171,171); -} -#title-slide .info { - font-size: 70%; - margin-top: 3em; -} -h1 .jitter { - display: inline-block; -} -h1 .jitter:before { - content: '/'; -} -h1:hover .jitter:before { - color: #EB0000; - content: '\002665'; -} -[data-config-logo] { - /*float: right; - margin-top: -50px; - background: transparent no-repeat 0 0; - height: 202px; - width: 210px; - background-size: contain; - */ - float: right; - margin-top: -90px; - background: transparent no-repeat 0 0; - height: 262px; - width: 210px; -} -#who img { - vertical-align: middle; -} -#who p:first-of-type { - float: right; -} -#who img.avatar { - width: 250px; - height: 250px; -} -#who img.avatar:hover { - -webkit-mask-image: url(/images/HTML5_Badge.svg); - -webkit-mask-position: 50% 50%; - -webkit-mask-size: 100% 100%; - /* background: -webkit-linear-gradient(top, white, rgba(239, 101, 42, 0.1)) no-repeat;*/ -} -#who a { - display: inline-block; -} -#currentTime { - border: none; - font-size: 12pt; - box-shadow: none; -} -#currentTime::-webkit-outer-spin-button, #currentTime::-webkit-inner-spin-button { - display: none; - -webkit-appearance: none; - margin: 0; -} - .note { font-size: 20px; position: absolute; @@ -727,401 +530,104 @@ h1:hover .jitter:before { top: 0; left: 0; background: rgba(0, 0, 0, 0.4); - display: -webkit-box; - display: -moz-box; - display: -o-box; - display: -ms-box; - display: box; - -webkit-box-align: center; - -moz-box-align: center; - -o-box-align: center; - box-align: center; - -webkit-box-pack: center; - -moz-box-pack: center; - -o-box-pack: center; - box-pack: center; + @include flexcenter; pointer-events: none; - -webkit-transition: opacity 0.2s ease-in-out; + @include transition(opacity 0.2s ease-in-out); opacity: 0; - border-radius: 10px; - -o-border-radius: 10px; - -moz-border-radius: 10px; - -webkit-border-radius: 10px; -} -.note ul { - margin: 0; -} -.note > section { - background: #fff; - border-radius: 5px; - box-shadow: 0 0 20px 5px rgba(0, 0, 0, 0.4); - width: 60%; - padding: 2em; -} + @include border-radius(10px); -.flexcenter { - display: -webkit-box !important; - -webkit-box-orient: vertical; - -webkit-box-align: center; - -webkit-box-pack: center; + > section { + background: #fff; + border-radius: 5px; + @include box-shadow(0 0 20px 5px rgba(0, 0, 0, 0.4)); + width: 60%; + padding: 2em; + } } - -#chrome-logo { - border: 25px solid white; - -webkit-border-radius: 370px; - -moz-border-radius: 370px; - -o-border-radius: 370px; - border-radius: 370px; - z-index: 100; - padding: 0; - margin: 0; - display: inline-block; - font-size: 10px; +input, button { + vertical-align: middle; } -.leaf { - height: 350px; - width: 272px; - background: #edcf17; - -webkit-border-radius:55px 30px 245px 0px; - -moz-border-radius:55px 30px 245px 0px; - -o-border-radius:55px 30px 245px 0px; - border-radius:55px 30px 245px 0px; - position: absolute; - opacity:0.97; - -webkit-transform: rotate(0deg) translate(64px,-0.9258em); - -moz-transform: rotate(0deg) translate(64px,-0.9258em); - -o-transform: rotate(0deg) translate(64px,-0.9258em); - transform: rotate(0deg) translate(64px,-0.9258em); +.centered { + text-align: center; } -#yellow { - z-index:-97; - background: -webkit-gradient(radial, - 64 64, 279, -147 99, 100, from(#d9a919), to(white), color-stop(.35, #F0D418)); -} -#yellow2 { - background: -webkit-gradient(radial, - 64 64, 279, -120 99, 115, from(#d9a919), to(white), color-stop(.35, #F0D418)); - z-index:-94; - height:79px; - width:255px; -} -#green { - background: #44A73D; - background:-webkit-gradient(radial, - 64 64, 329, -227 299, 100, from(#44A73D), to(white), color-stop(.40, #46ac3f)); - background:-moz-radial-gradient(-100% 45%, circle cover, white 30%, #44A73D 82%); - -webkit-transform: rotate(120deg) translate(60px,152px); - -moz-transform: rotate(120deg) translate(60px,152px); - -o-transform: rotate(120deg) translate(60px,152px); - transform: rotate(120deg) translate(60px,152px); - z-index:-96; -} -#red{ - background: #E03e39; - background: -webkit-gradient(radial, - 164 100, 280, 466 400, 10, from(#e44d40), to(white), color-stop(.25, #df3b3f)); - background: -moz-radial-gradient(160% 60%, white 0%, #e44d40 60%); - -webkit-transform: rotate(-120deg) translate(206px,73px); - -moz-transform: rotate(-120deg) translate(206px,73px); - -o-transform: rotate(-120deg) translate(206px,73px); - transform: rotate(-120deg) translate(206px,73px); - z-index: -95; +.reflect { + -webkit-box-reflect: below 3px -webkit-linear-gradient(rgba(255,255,255,0) 85%, white 150%); + -moz-box-reflect: below 3px -moz-linear-gradient(rgba(255,255,255,0) 85%, white 150%); + -o-box-reflect: below 3px -o-linear-gradient(rgba(255,255,255,0) 85%, white 150%); + -ms-box-reflect: below 3px -ms-linear-gradient(rgba(255,255,255,0) 85%, white 150%); + box-reflect: below 3px linear-gradient(rgba(255,255,255,0) 85%, white 150%); } -#blue_core { - width:180px; - height:180px; - -webkit-border-radius:180px; - -moz-border-radius:180px; - -o-border-radius:180px; - border-radius:180px; - background:#3f67bc; - background:-webkit-gradient(radial, 90 0, 90, 90 -20, 0, from(#466CC7), to(#72A0CF)); - background:-moz-radial-gradient(50% -80px, circle cover, #89bbef 0%, #466CC7 60%); - line-height:180px; - -webkit-box-shadow: 2px 12px 8px #aaa; - -moz-box-shadow: 2px 12px 8px #aaa; - -o-box-shadow: 2px 12px 8px #aaa; - box-shadow: 2px 12px 8px #aaa; - /*-webkit-transition:-webkit-transform 5s ease-out;*/ -} -#white_shell{ - width:180px; - height:180px; - -webkit-border-radius:180px; - -moz-border-radius:180px; - -o-border-radius:180px; - border-radius:180px; - border:15px solid white; - vertical-align: middle; - line-height:180px; -} -#colors{ - -webkit-border-radius:360px; - -moz-border-radius:360px; - -o-border-radius:360px; - border-radius:360px; - padding:140px; - -webkit-box-shadow: 0px 10px 15px #aaa; - -moz-box-shadow: 0px 10px 15px #aaa; - -o-box-shadow: 0px 10px 15px #aaa; - box-shadow: 0px 10px 15px #aaa; +.flexcenter { + @include flexcenter; + height: 100%; } -a[href^='http']:not(.demo):not([href*='bleedinghtml5']):not([href*='twitter.com']):not([href*='flickr.com']):not([href*='plus.google.com'])::after, -a[target="_blank"]:not(.demo):not([href*='bleedinghtml5']):not([href*='twitter.com']):not([href*='flickr.com']):not([href*='plus.google.com'])::after, -a[rel='external']:not(.demo)::after { - content: ''; - background: transparent url(data:image/png;base64,R0lGODlhCQAJAIABADNmzP///yH5BAEAAAEALAAAAAAJAAkAAAISDI5niRYPgYNP0pioVdFJVl0FADs=) no-repeat center right; - background-size: 100%; - width: 14px; - height: 14px; - display: inline-block; - vertical-align: middle; - margin-left: 7px; -} +/* ===== SLIDE CONTENT ===== */ +.logoslide { + //@include flexcenter; -.drop-shadow { - position: relative; - background: white; - -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; - -o-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; - -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; - -ms-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; - box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; + img { + width: 383px; + height: 92px; + } } -/* these before/after shadows mess up the page reflow on builds */ - -/*.drop-shadow::before, .drop-shadow::after { - content: ''; +aside.gdbar { + height: 97px; + width: 155px; position: absolute; - z-index: -2; -} - -.curved::before { - top: 10px; - bottom: 10px; left: 0; - right: 50%; - -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5); - -moz-box-shadow: 0 0 10px rgba(0,0,0,0.5); - -o-box-shadow: 0 0 10px rgba(0,0,0,0.5); - -ms-box-shadow: 0 0 10px rgba(0,0,0,0.5); - box-shadow: 0 0 10px rgba(0,0,0,0.5); - -moz-border-radius: 10px / 100px; - -0-border-radius: 10px / 100px; - -ms-border-radius: 10px / 100px; - border-radius: 10px / 100px; -} - -.curved-hz-2::before { - top: 0; - bottom: 0; - left: 10px; - right: 10px; - -webkit-border-radius: 100px / 10px; - -moz-border-radius: 100px / 10px; - -o-border-radius: 100px / 10px; - -ms-border-radius: 100px / 10px; - border-radius: 100px / 10px; -}*/ - -.key { - padding: 0 10px 3px 10px; - -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 2px 5px; - -moz-box-shadow: rgba(0, 0, 0, 0.3) 0 2px 5px; - -ms-box-shadow: rgba(0, 0, 0, 0.3) 0 2px 5px; - -o-box-shadow: rgba(0, 0, 0, 0.3) 0 2px 5px; - box-shadow: rgba(0, 0, 0, 0.3) 0 2px 5px; -} - -.hidden { - display: none !important; -} - -.invisible { - visibility: hidden !important; -} - -a.demo { - padding: 6px 12px 6px 12px; - text-decoration: none; - background-color: #759ae9; - background: -webkit-gradient(linear, left top, left bottom, from(#759ae9 0%), to(#376fe0 50%)); - /* Saf4+, Chrome */ - background: -webkit-linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%); - background: -moz-linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%); - background: -ms-linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%); - background: -o-linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%); - background: linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%); - border-top: 1px solid #1f58cc; - border-right: 1px solid #1b4db3; - border-bottom: 1px solid #174299; - border-left: 1px solid #1b4db3; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - -ms-border-radius: 4px; - -o-border-radius: 4px; - border-radius: 4px; - -webkit-box-shadow: inset 0 0 2px 0 rgba(57, 140, 255, 0.8); - -moz-box-shadow: inset 0 0 2px 0 rgba(57, 140, 255, 0.8); - -ms-box-shadow: inset 0 0 2px 0 rgba(57, 140, 255, 0.8); - -o-box-shadow: inset 0 0 2px 0 rgba(57, 140, 255, 0.8); - box-shadow: inset 0 0 2px 0 rgba(57, 140, 255, 0.8); - color: #fff; - text-shadow: 0 -1px 1px #1a5ad9; - font-size: 80%; -} - -/******************************************************************************* - * PREFLIGHT - ******************************************************************************/ -#slide-preflight .explanation { - font-size: 70%; - margin-left: 1.4em; -} -#slide-preflight .feature { - margin-top: 10px; -} -#slide-preflight .feature img { - margin-right: 7px; -} - -/******************************************************************************* - * WARNING - ******************************************************************************/ -[data-blowup] { - -webkit-transition: all 100ms ease-in-out; - -moz-transition: all 100ms ease-in-out; - -o-transition: all 100ms ease-in-out; - -ms-transition: all 100ms ease-in-out; - transition: all 100ms ease-in-out; - display: inline-block; - cursor: pointer; -} - -.blowup { - -webkit-transform: scale(3.25) rotateZ(-15deg) translateX(0); - -moz-transform: scale(3.25) rotateZ(-15deg) translateX(0); - -o-transform: scale(3.25) rotateZ(-15deg) translateX(0); - -ms-transform: scale(3.25) rotateZ(-15deg) translateX(0); - transform: scale(3.25) rotateZ(-15deg) translateX(0); - text-shadow: 0 0 10px red; - -webkit-text-stroke: 1px rgba(255,255,255,0.3); - -moz-text-stroke: 1px rgba(255,255,255,0.3); - -ms-text-stroke: 1px rgba(255,255,255,0.3); - -o-text-stroke: 1px rgba(255,255,255,0.3); - text-stroke: 1px rgba(255,255,255,0.3); -} - -.blowup-shadow { - -webkit-box-shadow: 0 0 100px 25px red inset !important; - -moz-box-shadow: 0 0 100px 25px red inset !important; - -o-box-shadow: 0 0 100px 25px red inset !important; - -ms-shadow: 0 0 100px 25px red inset !important; - box-shadow: 0 0 100px 25px red inset !important; -} - -/******************************************************************************* - * BROWSER SUPPORT STYLES - ******************************************************************************/ -.browser-support { - pointer-events: none; - width: 625px; - margin-bottom: -70px; - -webkit-mask-image: -webkit-linear-gradient(bottom, - rgba(255,255,255,0), rgba(255,255,255,0) 45%, rgba(255,255,255,1)); -} -.browser-support img { - height: 185px; - opacity: 0.8; - margin-right: -90px; - vertical-align: bottom; -} -.browser-support img:first-of-type { - height: 203px; -} -.browser-support img:last-of-type { - height: 200px; -} -.browser-support img:nth-of-type(2) { - height: 193px; -} -.browser-support img.supported { - opacity: 1; - z-index: 1; - position: relative; - -webkit-mask-image: none; -} - -@-webkit-keyframes rotateRight { - from { - -webkit-transform: rotate(0); - } - to { - -webkit-transform: rotate(360deg); - } -} -@-webkit-keyframes jitter { - 0% { - -webkit-transform: rotate(0deg); - } - 2% { - -webkit-transform: rotate(-7deg) translateX(2px) scale(1.1); - } - 4% { - -webkit-transform: rotate(0deg); + top: 125px; + @include border-radius(0 10px 10px 0); + //background: -webkit-linear-gradient(left, $gray-1, $gray-1) no-repeat; + @include background(linear-gradient(left, $gray-1, $gray-1) no-repeat); + @include background-size(100% 100%); + background-size: 100% 100%; + @include transition(all 0.5s ease-out 0.6s); + + &.to-build { + background-size: 0 100%; } - 6% { - -webkit-transform: rotate(7deg) translateX(-2px); - } - 8% { - -webkit-transform: rotate(0deg); - } - 10% { - -webkit-transform: rotate(-7deg) translateX(2px) scale(1.1); - } - 12% { - -webkit-transform: rotate(0deg); - } - 14% { - -webkit-transform: rotate(7deg) translateX(-2px); - } - 16% { - -webkit-transform: rotate(0deg); + + img { + width: 85px; + height: 85px; + position: absolute; + right: 0; + margin: 8px 12px; } -}ae - -.spin { - -webkit-animation-name: rotateRight; - -webkit-animation-duration: 15s; - -webkit-animation-timing-function: linear; - -webkit-transform-origin: 50% 50%; - -webkit-animation-iteration-count: infinite; -} -.spin:hover { - -webkit-animation-duration: 0.1s; -} -.jitter { - -webkit-animation-name: jitter; - -webkit-animation-duration: 2s; - -webkit-animation-timing-function: ease-in-out; - -webkit-transform-origin: 50% 50%; - -webkit-animation-iteration-count: infinite; } -#chrome-heart { - display: inline-block; - margin-bottom: -30px; - background: url(/images/chrome_logo.png) 50% 50% no-repeat; - width: 100px; - height: 100px; - background-position: 50% 50%; - background-size: cover; +#title-slide { + hgroup { + position: absolute; + //bottom: $slide-height / 2 - (140 / 2); + bottom: 150px; + + h1 { + font-size: 65px; + line-height: 1.4; + letter-spacing: -3px; + color: $gray-4; + } + + h2 { + font-size: 34px; + color: $gray-2; + font-weight: inherit; + } + + p { + font-size: 20px; + color: $gray-3; + line-height: 1.3; + margin-top: 2em; + } + } } -- cgit v1.2.3