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!) --- images/google_developers_icon_128.png | Bin 0 -> 7911 bytes images/google_developers_icon_64.svg | 55 ++ images/google_developers_logo.png | Bin 0 -> 21013 bytes js/slides.js | 58 +- template.html | 129 +-- theme/css/default.css | 1422 +++++++++++---------------------- theme/sass/_base.scss | 24 +- theme/sass/default.scss | 1214 +++++++++------------------- 8 files changed, 1048 insertions(+), 1854 deletions(-) create mode 100644 images/google_developers_icon_128.png create mode 100644 images/google_developers_icon_64.svg create mode 100644 images/google_developers_logo.png diff --git a/images/google_developers_icon_128.png b/images/google_developers_icon_128.png new file mode 100644 index 0000000..582f905 Binary files /dev/null and b/images/google_developers_icon_128.png differ diff --git a/images/google_developers_icon_64.svg b/images/google_developers_icon_64.svg new file mode 100644 index 0000000..093f87a --- /dev/null +++ b/images/google_developers_icon_64.svg @@ -0,0 +1,55 @@ + + + + diff --git a/images/google_developers_logo.png b/images/google_developers_logo.png new file mode 100644 index 0000000..4e75eac Binary files /dev/null and b/images/google_developers_logo.png differ diff --git a/js/slides.js b/js/slides.js index 3cb2852..c6fe1ed 100644 --- a/js/slides.js +++ b/js/slides.js @@ -42,14 +42,14 @@ SlideDeck.prototype.getCurrentSlideFromHash_ = function() { * @private */ SlideDeck.prototype.handleDomLoaded_ = function() { - this.slides_ = document.querySelectorAll('slide:not(.hidden)'); + this.slides_ = document.querySelectorAll('slide:not([hidden])'); for (var i = 0, slide; slide = this.slides_[i]; ++i) { slide.dataset.slideNum = i + 1; slide.dataset.totalSlides = this.slides_.length; } - // Load config + // Load config. this.loadConfig_(); this.addEventListeners_(); this.updateSlides_(); @@ -61,8 +61,13 @@ SlideDeck.prototype.handleDomLoaded_ = function() { SlideDeck.prototype.addEventListeners_ = function() { document.addEventListener('keydown', this.handleBodyKeyDown_.bind(this), false); - window.addEventListener('popstate', this.handlePopState_.bind(this), - false); + window.addEventListener('popstate', this.handlePopState_.bind(this), false); + + var self = this; + var titleSlide = document.querySelector('#title-slide'); + titleSlide.addEventListener('slideenter', function(e) { + self.buildNextItem_(); + }, false); }; /** @@ -253,6 +258,36 @@ SlideDeck.prototype.nextSlide = function(opt_dontPush) { } }; +/* Slide events */ + +/** + * Triggered when a slide enter/leave event should be dispatched. + * + * @param {string} type The type of event to trigger + * (e.g. 'onslideenter', 'onslideleave'). + * @param {number} slideNo The index of the slide that is being left. + */ +SlideDeck.prototype.triggerSlideEvent = function(type, slideNo) { + var el = this.getSlideEl_(slideNo); + if (!el) { + return; + } + + // Call onslideenter/onslideleave if the attribute is defined on this slide. + var func = el.getAttribute(type); + if (func) { + new Function(func).call(el); // TODO: Don't use new Function() :( + } + + // Dispatch event to listeners setup using addEventListener. + var evt = document.createEvent('Event'); + evt.initEvent(type.substring(2), true, true); + evt.slideNumber = slideNo + 1; // Make it readable + evt.slide = el; + + el.dispatchEvent(evt); +}; + /** * @private */ @@ -283,8 +318,8 @@ SlideDeck.prototype.updateSlides_ = function(opt_dontPush) { } }; - /*this.triggerLeaveEvent(curSlide - 1); - triggerEnterEvent(curSlide);*/ + this.triggerSlideEvent('onslideleave', curSlide - 1); + this.triggerSlideEvent('onslideenter', curSlide); window.setTimeout(this.disableSlideFrames_.bind(this, curSlide - 2), 301); @@ -389,9 +424,9 @@ SlideDeck.prototype.updateSlideClass_ = function(slideNo, className) { * @private */ SlideDeck.prototype.makeBuildLists_ = function () { - for (var i = this.curSlide_, slide; slide = this.slides_[i]; i++) { + for (var i = this.curSlide_, slide; slide = this.slides_[i]; ++i) { var items = slide.querySelectorAll('.build > *'); - for (var j = 0, item; item = items[j]; j++) { + for (var j = 0, item; item = items[j]; ++j) { if (item.classList) { item.classList.add('to-build'); if (item.parentNode.classList.contains('fade')) { @@ -399,6 +434,13 @@ SlideDeck.prototype.makeBuildLists_ = function () { } } } + // Setup Google Developer icon slide out bars. + var bars = slide.querySelectorAll('.gdbar'); + for (var j = 0, bar; bar = bars[j]; ++j) { + if (bar.classList) { + bar.classList.add('to-build'); + } + } } }; diff --git a/template.html b/template.html index 3100726..365adea 100644 --- a/template.html +++ b/template.html @@ -5,65 +5,88 @@ - - - - A Slide - + - - A Slide - + + +

+ - - A Slide - + + + + +

Title Goes Here

Subtitle Goes Here

+ Speaker Name
+ Title +

+ + - - A Slide - - + +

Presentation Bullet Slide Layout

Bullet1
Bullet2

+ - + - + + A Slide2 + + - - + + + + + + diff --git a/theme/css/default.css b/theme/css/default.css index 1dec5ee..40b4f77 100644 --- a/theme/css/default.css +++ b/theme/css/default.css @@ -1,17 +1,82 @@ +/* line 17, ../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.11.7/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} + +/* line 20, ../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.11.7/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ +body { + line-height: 1; +} + +/* line 22, ../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.11.7/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ +ol, ul { + list-style: none; +} + +/* line 24, ../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.11.7/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ +table { + border-collapse: collapse; + border-spacing: 0; +} + +/* line 26, ../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.11.7/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ +caption, th, td { + text-align: left; + font-weight: normal; + vertical-align: middle; +} + +/* line 28, ../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.11.7/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ +q, blockquote { + quotes: none; +} +/* line 101, ../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.11.7/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ +q:before, q:after, blockquote:before, blockquote:after { + content: ""; + content: none; +} + +/* line 30, ../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.11.7/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ +a img { + border: none; +} + +/* line 114, ../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.11.7/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ +article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { + display: block; +} + /** * Base SlideDeck Styles */ -/* line 22, ../sass/_base.scss */ +/* line 34, ../sass/_base.scss */ html { height: 100%; overflow: hidden; } -/* line 27, ../sass/_base.scss */ +/* line 39, ../sass/_base.scss */ body { margin: 0; padding: 0; - display: block !important; + opacity: 1 !important; height: 100%; min-height: 740px; overflow-x: hidden; @@ -21,9 +86,18 @@ body { -moz-font-smoothing: antialiased; -ms-font-smoothing: antialiased; -o-font-smoothing: antialiased; + -moz-transition: opacity 600ms ease-in; + -webkit-transition: opacity 600ms ease-in; + -o-transition: opacity 600ms ease-in; + transition: opacity 600ms ease-in; +} + +/* line 57, ../sass/_base.scss */ +slides > slide[hidden] { + display: none !important; } -/* line 43, ../sass/_base.scss */ +/* line 61, ../sass/_base.scss */ slides { width: 100%; height: 100%; @@ -41,7 +115,7 @@ slides { transform-style: preserve-3d; } -/* line 54, ../sass/_base.scss */ +/* line 72, ../sass/_base.scss */ slides > slide { display: block; position: absolute; @@ -91,7 +165,7 @@ slides > slide { margin-left: 500px; }*/ /* Slide styles */ -/* line 104, ../sass/_base.scss */ +/* line 122, ../sass/_base.scss */ article.fill iframe { position: absolute; left: 0; @@ -109,7 +183,7 @@ article.fill iframe { z-index: -1; } -/* line 119, ../sass/_base.scss */ +/* line 137, ../sass/_base.scss */ slide.fill { background-repeat: no-repeat; -moz-background-size: cover; @@ -118,7 +192,7 @@ slide.fill { background-size: cover; } -/* line 124, ../sass/_base.scss */ +/* line 142, ../sass/_base.scss */ slide.fill img { position: absolute; left: 0; @@ -131,25 +205,25 @@ slide.fill img { /** * Theme Styles */ -/* line 6, ../sass/default.scss */ +/* line 38, ../sass/default.scss */ ::selection { color: white; - background-color: red; + background-color: #ffd14d; text-shadow: none; } -/* line 12, ../sass/default.scss */ +/* line 44, ../sass/default.scss */ body { - background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 600, color-stop(0%, #b1dfff), color-stop(100%, #0c54ab)); - background-image: -webkit-radial-gradient(50% 50%, #b1dfff 0%, #0c54ab 600px); - background-image: -moz-radial-gradient(50% 50%, #b1dfff 0%, #0c54ab 600px); - background-image: -o-radial-gradient(50% 50%, #b1dfff 0%, #0c54ab 600px); - background-image: -ms-radial-gradient(50% 50%, #b1dfff 0%, #0c54ab 600px); - background-image: radial-gradient(50% 50%, #b1dfff 0%, #0c54ab 600px); + background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 600, color-stop(0%, #4387fd), color-stop(100%, #2a7cdf)); + background-image: -webkit-radial-gradient(50% 50%, #4387fd 0%, #2a7cdf 600px); + background-image: -moz-radial-gradient(50% 50%, #4387fd 0%, #2a7cdf 600px); + background-image: -o-radial-gradient(50% 50%, #4387fd 0%, #2a7cdf 600px); + background-image: -ms-radial-gradient(50% 50%, #4387fd 0%, #2a7cdf 600px); + background-image: radial-gradient(50% 50%, #4387fd 0%, #2a7cdf 600px); background-attachment: fixed; } -/* line 17, ../sass/default.scss */ +/* line 51, ../sass/default.scss */ slides > slide { width: 900px; height: 700px; @@ -157,415 +231,323 @@ slides > slide { margin-top: -350px; padding: 40px 60px; background-color: white; - -moz-border-radius: 10px; - -webkit-border-radius: 10px; - -o-border-radius: 10px; - -ms-border-radius: 10px; - -khtml-border-radius: 10px; - border-radius: 10px; - -moz-box-shadow: 5px 5px 20px black; - -webkit-box-shadow: 5px 5px 20px black; - -o-box-shadow: 5px 5px 20px black; - box-shadow: 5px 5px 20px black; + -moz-border-radius: 5px; + -webkit-border-radius: 5px; + -o-border-radius: 5px; + -ms-border-radius: 5px; + -khtml-border-radius: 5px; + border-radius: 5px; + -moz-box-shadow: 3px 3px 20px #515151; + -webkit-box-shadow: 3px 3px 20px #515151; + -o-box-shadow: 3px 3px 20px #515151; + box-shadow: 3px 3px 20px #515151; -moz-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } -/* line 32, ../sass/default.scss */ +/* line 66, ../sass/default.scss */ slides.layout-widescreen > slide { margin-left: -550px; width: 1100px; } -/* line 37, ../sass/default.scss */ +/* line 71, ../sass/default.scss */ slides.layout-faux-widescreen > slide { margin-left: -550px; width: 1100px; padding: 40px 160px; } -/* line 43, ../sass/default.scss */ -slides > slide:not(.nobackground):not(.biglogo):not(.fill) { - background: white url(/images/gdd2011_banner.png) 105% 99% no-repeat; +/*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, + white !important; } -/* line 47, ../sass/default.scss */ -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, white !important; -} - -/* line 55, ../sass/default.scss */ slides.nobackground slide:not(.fill)::after, slides.nobackground slide:not(.fill)::before { color: inherit !important; } - -/* line 59, ../sass/default.scss */ -slides > slide:not(:first-of-type):not(.biglogo):not(.fill):not(.nobackground)::after { - content: attr(data-slide-num) " / " attr(data-total-slides); +*/ +/* line 97, ../sass/default.scss */ +slides > slide:not(:first-of-type):not(.fill):not(.nobackground):before { + content: "#io2012 @yourtwitter"; position: absolute; - bottom: 2%; - left: 2%; - font-size: 12pt; - color: white; -} - -/* line 68, ../sass/default.scss */ -slides > slide:not(:first-of-type):not(.biglogo):not(.fill):not(.nobackground)::before { + bottom: 20px; + left: 60px; + background: url(/images/google_developers_icon_128.png) no-repeat 0 50%; + -moz-background-size: 30px 30px; + -webkit-background-size: 30px 30px; + -o-background-size: 30px 30px; + background-size: 30px 30px; + padding-left: 40px; + height: 30px; + line-height: 1.9; +} +/* line 108, ../sass/default.scss */ +slides > slide:not(:first-of-type):not(.fill):not(.nobackground):after { + content: attr(data-slide-num) "/" attr(data-total-slides); position: absolute; - bottom: 14px; - left: 275px; - font-size: 18pt; - color: white; - content: '@ebidel #gddjp'; + bottom: 20px; + right: 60px; } -/* line 78, ../sass/default.scss */ -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 */ -/* line 84, ../sass/default.scss */ -slide.biglogo { - background: url(/images/google_logo.png) 50% 50% no-repeat, url(/images/gdd2011_banner.png) 105% 99% no-repeat, white; -} - +}*/ /* Slides */ -/* line 91, ../sass/default.scss */ +/* line 123, ../sass/default.scss */ slides > slide { display: none; + font-family: 'Open Sans', Arial, sans-serif; + color: #797979; } - -/* line 95, ../sass/default.scss */ +/* line 132, ../sass/default.scss */ slides > slide.far-past { display: block; - -o-transform: translate(-2040px); -moz-transform: translate(-2040px); - -webkit-transform: translate3d(-2040px, 0, 0); + -webkit-transform: translate(-2040px); + -o-transform: translate(-2040px); + -ms-transform: translate(-2040px); transform: translate(-2040px); + -moz-transform: translate3d(-2040px, 0, 0); + -webkit-transform: translate3d(-2040px, 0, 0); + -o-transform: translate3d(-2040px, 0, 0); + -ms-transform: translate3d(-2040px, 0, 0); + transform: translate3d(-2040px, 0, 0); } - -/* line 103, ../sass/default.scss */ +/* line 138, ../sass/default.scss */ 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); + -webkit-transform: translate(-1020px) rotateY(30deg) rotateX(45deg); + -o-transform: translate(-1020px) rotateY(30deg) rotateX(45deg); + -ms-transform: translate(-1020px) rotateY(30deg) rotateX(45deg); transform: translate(-1020px) rotateY(30deg) rotateX(45deg); + -moz-transform: translate3d(-1020px, 0, 0) rotateY(30deg) rotateX(45deg); + -webkit-transform: translate3d(-1020px, 0, 0) rotateY(30deg) rotateX(45deg); + -o-transform: translate3d(-1020px, 0, 0) rotateY(30deg) rotateX(45deg); + -ms-transform: translate3d(-1020px, 0, 0) rotateY(30deg) rotateX(45deg); + transform: translate3d(-1020px, 0, 0) rotateY(30deg) rotateX(45deg); } - -/* line 111, ../sass/default.scss */ +/* line 144, ../sass/default.scss */ slides > slide.current { display: block; - -o-transform: translate(0); -moz-transform: translate(0); - -webkit-transform: translate3d(0, 0, 0); + -webkit-transform: translate(0); + -o-transform: translate(0); + -ms-transform: translate(0); transform: translate(0); + -moz-transform: translate3d(0, 0, 0); + -webkit-transform: translate3d(0, 0, 0); + -o-transform: translate3d(0, 0, 0); + -ms-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } - -/* line 119, ../sass/default.scss */ +/* line 150, ../sass/default.scss */ 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); + -webkit-transform: translate(1020px) rotateY(-30deg) rotateX(45deg); + -o-transform: translate(1020px) rotateY(-30deg) rotateX(45deg); + -ms-transform: translate(1020px) rotateY(-30deg) rotateX(45deg); transform: translate(1020px) rotateY(-30deg) rotateX(45deg); + -moz-transform: translate3d(1020px, 0, 0) rotateY(-30deg) rotateX(45deg); + -webkit-transform: translate3d(1020px, 0, 0) rotateY(-30deg) rotateX(45deg); + -o-transform: translate3d(1020px, 0, 0) rotateY(-30deg) rotateX(45deg); + -ms-transform: translate3d(1020px, 0, 0) rotateY(-30deg) rotateX(45deg); + transform: translate3d(1020px, 0, 0) rotateY(-30deg) rotateX(45deg); } - -/* line 127, ../sass/default.scss */ +/* line 156, ../sass/default.scss */ slides > slide.far-next { display: block; - transform: translate(2040px); - -o-transform: translate(2040px); -moz-transform: translate(2040px); + -webkit-transform: translate(2040px); + -o-transform: translate(2040px); + -ms-transform: translate(2040px); + transform: translate(2040px); + -moz-transform: translate3d(2040px, 0, 0); -webkit-transform: translate3d(2040px, 0, 0); + -o-transform: translate3d(2040px, 0, 0); + -ms-transform: translate3d(2040px, 0, 0); + transform: translate3d(2040px, 0, 0); } -/* line 136, ../sass/default.scss */ +/* line 168, ../sass/default.scss */ 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: translate(-2260px); + -o-transform: translate(-2260px); + -ms-transform: translate(-2260px); + transform: translate(-2260px); + -moz-transform: translate3d(-2260px, 0, 0); -webkit-transform: translate3d(-2260px, 0, 0); + -o-transform: translate3d(-2260px, 0, 0); + -ms-transform: translate3d(-2260px, 0, 0); + transform: translate3d(-2260px, 0, 0); } - -/* line 145, ../sass/default.scss */ +/* line 174, ../sass/default.scss */ 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: translate(-1130px); + -o-transform: translate(-1130px); + -ms-transform: translate(-1130px); + transform: translate(-1130px); + -moz-transform: translate3d(-1130px, 0, 0); -webkit-transform: translate3d(-1130px, 0, 0); + -o-transform: translate3d(-1130px, 0, 0); + -ms-transform: translate3d(-1130px, 0, 0); + transform: translate3d(-1130px, 0, 0); } - -/* line 154, ../sass/default.scss */ +/* line 180, ../sass/default.scss */ 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: translate(0); + -o-transform: translate(0); + -ms-transform: translate(0); + transform: translate(0); + -moz-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); + -o-transform: translate3d(0, 0, 0); + -ms-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } - -/* line 163, ../sass/default.scss */ +/* line 186, ../sass/default.scss */ 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: translate(1130px); + -o-transform: translate(1130px); + -ms-transform: translate(1130px); + transform: translate(1130px); + -moz-transform: translate3d(1130px, 0, 0); -webkit-transform: translate3d(1130px, 0, 0); + -o-transform: translate3d(1130px, 0, 0); + -ms-transform: translate3d(1130px, 0, 0); + transform: translate3d(1130px, 0, 0); } - -/* line 172, ../sass/default.scss */ +/* line 192, ../sass/default.scss */ 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: translate(2260px); + -o-transform: translate(2260px); + -ms-transform: translate(2260px); + transform: translate(2260px); + -moz-transform: translate3d(2260px, 0, 0); -webkit-transform: translate3d(2260px, 0, 0); + -o-transform: translate3d(2260px, 0, 0); + -ms-transform: translate3d(2260px, 0, 0); + transform: translate3d(2260px, 0, 0); } -/* line 180, ../sass/default.scss */ -.slides > article { - font-family: 'Open Sans', Arial, sans-serif; - color: #545454; - font-weight: 300; - text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); - font-size: 30px; - line-height: 36px; - letter-spacing: -1px; -} - -/* line 193, ../sass/default.scss */ +/* line 199, ../sass/default.scss */ b { font-weight: 600; } -/* line 197, ../sass/default.scss */ -.blue { - color: #0066cc; -} - -/* line 200, ../sass/default.scss */ -.yellow { - color: #ffd319; -} - /* line 203, ../sass/default.scss */ -.green { - color: #008a35; -} - -/* line 206, ../sass/default.scss */ -.red { - color: red; -} - -/* line 209, ../sass/default.scss */ -.black { - color: black; -} - -/* line 212, ../sass/default.scss */ -.white { - color: white; -} - -/* line 215, ../sass/default.scss */ -.dark { - background-color: rgba(0, 0, 0, 0.2); - color: white; -} - -/* line 219, ../sass/default.scss */ -.bubble { - background-color: rgba(0, 0, 0, 0.8); - color: white; -} - -/* line 223, ../sass/default.scss */ a { color: #0066cc; } - -/* line 226, ../sass/default.scss */ +/* line 206, ../sass/default.scss */ a:visited { color: rgba(0, 102, 204, 0.75); } - -/* line 229, ../sass/default.scss */ +/* line 210, ../sass/default.scss */ a:hover { color: black; } -/* line 233, ../sass/default.scss */ -p { - margin: 0; - padding: 0; -} - -/* line 238, ../sass/default.scss */ -h1 { - font-size: 50px; - line-height: 1.5; - padding: 0; - margin: 0; +/* line 215, ../sass/default.scss */ +h1, h2, h3 { font-weight: 600; - letter-spacing: -3px; - color: #0075ba; -} - -/* line 250, ../sass/default.scss */ -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; } -/* line 259, ../sass/default.scss */ +/* line 219, ../sass/default.scss */ h2 { font-size: 45px; - font-weight: 600; line-height: 45px; letter-spacing: -2px; - position: absolute; - left: 0; - bottom: 150px; - padding: 30px 60px; - margin: 0; - width: 100%; - background: rgba(255, 255, 255, 0.3); - box-shadow: 0 1px 5px #333; - box-sizing: border-box; + color: #515151; } -/* line 278, ../sass/default.scss */ +/* line 233, ../sass/default.scss */ h3 { font-size: 30px; - line-height: 36px; - padding: 0; margin: 0 0 1em 0; - font-weight: 600; letter-spacing: -1px; + line-height: 2; + font-weight: inherit; + color: #797979; } -/* line 286, ../sass/default.scss */ -h2.nobackground { - background: none; - box-shadow: none; -} - -/* line 290, ../sass/default.scss */ -h2.megabottom { - bottom: 90px; -} - -/* line 293, ../sass/default.scss */ -h2.shadow { - text-shadow: 1px 1px 3px black; -} - -/* line 296, ../sass/default.scss */ -label.underline { - border-bottom: 3px solid #fccc02; - /*rgb(192, 192, 192)*/ -} - -/* line 300, ../sass/default.scss */ -slide.fill h3 { - background: rgba(255, 255, 255, 0.75); - padding-top: .2em; - padding-bottom: .3em; - margin-top: -0.2em; - margin-left: -60px; - padding-left: 60px; - margin-right: -60px; - padding-right: 60px; -} - -/* line 311, ../sass/default.scss */ -.fill h4 { - display: inline; - position: absolute; - bottom: 50px; - padding: 15px; -} - -/* line 318, ../sass/default.scss */ +/* line 242, ../sass/default.scss */ ul { - margin: 0; - padding: 0; margin-left: .75em; } - -/* line 323, ../sass/default.scss */ +/* line 245, ../sass/default.scss */ ul ul { margin-top: .5em; } -/* line 326, ../sass/default.scss */ +/* line 250, ../sass/default.scss */ li { - padding: 0; - margin: 0; - margin-bottom: .5em; + margin-bottom: 0.5em; } - -/*li::before { - content: 'Â·'; - +/* line 253, ../sass/default.scss */ +li:before { + content: '·'; width: .75em; - margin-left: -.75em; - + margin-left: -0.75em; position: absolute; -}*/ -/* line 340, ../sass/default.scss */ +} + +/* line 260, ../sass/default.scss */ ul > li::before { - /*content: 'Â·';*/ - content: url("../images/chrome-logo-tiny2.png"); + content: '·'; width: 0.5em; margin-left: -1.3em; position: absolute; } -/* line 347, ../sass/default.scss */ +/* line 266, ../sass/default.scss */ ul li ul li::before { content: ''; } -/* line 351, ../sass/default.scss */ +/* line 270, ../sass/default.scss */ 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; /*overflow: hidden;*/ } -/* line 365, ../sass/default.scss */ +/* line 281, ../sass/default.scss */ code { font-size: 95%; - font-family: 'Droid Sans Mono', 'Courier New', monospace; + font-family: 'Inconsolata', 'Courier New', monospace; color: black; } -/* line 372, ../sass/default.scss */ +/* line 287, ../sass/default.scss */ iframe { width: 100%; height: 620px; @@ -574,17 +556,17 @@ iframe { margin: -1px; } -/* line 380, ../sass/default.scss */ +/* line 295, ../sass/default.scss */ dt { font-weight: bold; } -/* line 384, ../sass/default.scss */ +/* line 299, ../sass/default.scss */ h3 + iframe { height: 540px; } -/* line 388, ../sass/default.scss */ +/* line 303, ../sass/default.scss */ button { display: inline-block; background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#f9f9f9), to(#e3e3e3)); @@ -594,26 +576,31 @@ button { background: -o-linear-gradient(#f9f9f9 40%, #e3e3e3 70%); background: linear-gradient(#f9f9f9 40%, #e3e3e3 70%); border: 1px solid #999; + -moz-border-radius: 3px; -webkit-border-radius: 3px; + -o-border-radius: 3px; + -ms-border-radius: 3px; + -khtml-border-radius: 3px; border-radius: 3px; padding: 5px 8px; outline: none; white-space: nowrap; - -webkit-user-select: none; -moz-user-select: none; + -webkit-user-select: none; + -khtml-user-select: none; user-select: none; cursor: pointer; - text-shadow: 1px 1px #fff; + text-shadow: 1px 1px white; font-weight: 700; font-size: 10pt; } -/* line 411, ../sass/default.scss */ +/* line 323, ../sass/default.scss */ button:hover { border-color: black; } -/* line 415, ../sass/default.scss */ +/* line 327, ../sass/default.scss */ button:active { background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#e3e3e3), to(#f9f9f9)); background: -webkit-linear-gradient(#e3e3e3 40%, #f9f9f9 70%); @@ -623,34 +610,62 @@ button:active { background: linear-gradient(#e3e3e3 40%, #f9f9f9 70%); } -/* line 424, ../sass/default.scss */ -slide.fill { - border-radius: 10px; - -o-border-radius: 10px; - -moz-border-radius: 10px; - -webkit-border-radius: 10px; +/* line 336, ../sass/default.scss */ +.blue { + color: #0066cc; +} + +/* line 339, ../sass/default.scss */ +.yellow { + color: #ffd319; } -/* line 431, ../sass/default.scss */ +/* line 342, ../sass/default.scss */ +.green { + color: #008a35; +} + +/* line 345, ../sass/default.scss */ +.red { + color: red; +} + +/* line 348, ../sass/default.scss */ +.black { + color: black; +} + +/* line 351, ../sass/default.scss */ +.white { + color: white; +} + +/* line 354, ../sass/default.scss */ +.dark { + background-color: rgba(0, 0, 0, 0.2); + color: white; +} + +/* line 359, ../sass/default.scss */ img.centered { margin: 0 auto; display: block; } -/* line 436, ../sass/default.scss */ +/* line 364, ../sass/default.scss */ table { width: 100%; border-collapse: collapse; margin-top: 40px; } -/* line 442, ../sass/default.scss */ +/* line 370, ../sass/default.scss */ th { font-weight: 600; text-align: left; } -/* line 448, ../sass/default.scss */ +/* line 376, ../sass/default.scss */ td, th { border: 1px solid #e0e0e0; @@ -658,30 +673,7 @@ th { vertical-align: top; } -/* line 454, ../sass/default.scss */ -.source { - position: absolute; - left: 60px; - top: 644px; - padding-right: 175px; - font-size: 12px; - letter-spacing: 0; - line-height: 18px; - opacity: 0.5; -} - -/* line 466, ../sass/default.scss */ -.source a { - color: inherit; - text-decoration: none; -} - -/* line 471, ../sass/default.scss */ -.source a:hover { - text-decoration: underline; -} - -/* line 475, ../sass/default.scss */ +/* line 382, ../sass/default.scss */ q { display: block; font-size: 60px; @@ -689,9 +681,8 @@ q { margin-left: 20px; margin-top: 100px; } - -/* line 482, ../sass/default.scss */ -q::before { +/* line 389, ../sass/default.scss */ +q:before { content: 'â€œ'; position: absolute; display: inline-block; @@ -701,9 +692,8 @@ q::before { font-size: 90px; color: silver; } - -/* line 494, ../sass/default.scss */ -q::after { +/* line 399, ../sass/default.scss */ +q:after { content: 'â€'; position: absolute; margin-left: .1em; @@ -711,114 +701,132 @@ q::after { color: silver; } -/* line 503, ../sass/default.scss */ +/* line 408, ../sass/default.scss */ div.author { text-align: right; font-size: 40px; margin-top: 20px; margin-right: 150px; } - -/* line 510, ../sass/default.scss */ -div.author::before { +/* line 415, ../sass/default.scss */ +div.author:before { content: 'â€”'; } +/* line 420, ../sass/default.scss */ +slide.fill { + -moz-border-radius: 10px; + -webkit-border-radius: 10px; + -o-border-radius: 10px; + -ms-border-radius: 10px; + -khtml-border-radius: 10px; + border-radius: 10px; +} +/* line 423, ../sass/default.scss */ +slide.fill h3 { + background: rgba(255, 255, 255, 0.75); + padding-top: .2em; + padding-bottom: .3em; + margin-top: -0.2em; + margin-left: -60px; + padding-left: 60px; + margin-right: -60px; + padding-right: 60px; +} +/* line 434, ../sass/default.scss */ +slide.fill h4 { + display: inline; + position: absolute; + bottom: 50px; + padding: 15px; +} + /* Size variants */ -/* line 517, ../sass/default.scss */ -article.smaller p, -article.smaller ul { +/* line 445, ../sass/default.scss */ +article.smaller p, article.smaller ul { font-size: 20px; line-height: 24px; letter-spacing: 0; } - -/* line 522, ../sass/default.scss */ +/* line 450, ../sass/default.scss */ article.smaller table { font-size: 20px; line-height: 24px; letter-spacing: 0; } - -/* line 527, ../sass/default.scss */ +/* line 455, ../sass/default.scss */ article.smaller pre { font-size: 15px; line-height: 20px; letter-spacing: 0; } - -/* line 532, ../sass/default.scss */ +/* line 460, ../sass/default.scss */ article.smaller q { font-size: 40px; line-height: 48px; } - -/* line 537, ../sass/default.scss */ -article.smaller q::before, -article.smaller q::after { +/* line 464, ../sass/default.scss */ +article.smaller q:before, article.smaller q:after { font-size: 60px; } /* Builds */ -/* line 543, ../sass/default.scss */ +/* line 473, ../sass/default.scss */ .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; + -o-transition: opacity 0.5s ease-in-out 0.2s; + transition: opacity 0.5s ease-in-out 0.2s; } - -/* line 550, ../sass/default.scss */ -.to-build { +/* line 477, ../sass/default.scss */ +.build .to-build { opacity: 0; } - -/* line 554, ../sass/default.scss */ -.build-fade { +/* line 481, ../sass/default.scss */ +.build .build-fade { opacity: 0.5; } - -/* line 558, ../sass/default.scss */ -.build-fade:hover { +/* line 484, ../sass/default.scss */ +.build .build-fade:hover { opacity: 1.0; } /* Pretty print */ -/* line 565, ../sass/default.scss */ +/* line 493, ../sass/default.scss */ .prettyprint .str, .prettyprint .atv { /* a markup attribute value */ color: #008a35; } -/* line 569, ../sass/default.scss */ +/* line 497, ../sass/default.scss */ .prettyprint .kwd, .prettyprint .tag { /* a markup tag name */ color: #0066cc; } -/* line 572, ../sass/default.scss */ +/* line 500, ../sass/default.scss */ .prettyprint .com { /* a comment */ color: #7f7f7f; font-style: italic; } -/* line 576, ../sass/default.scss */ +/* line 504, ../sass/default.scss */ .prettyprint .lit { /* a literal value */ color: #7f0000; } -/* line 581, ../sass/default.scss */ +/* line 509, ../sass/default.scss */ .prettyprint .pun, .prettyprint .opn, .prettyprint .clo { color: #7f7f7f; } -/* line 587, ../sass/default.scss */ +/* line 515, ../sass/default.scss */ .prettyprint .typ, .prettyprint .atn, .prettyprint .dec, @@ -827,168 +835,13 @@ article.smaller q::after { color: #7f007f; } -/*.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))); -}*/ -/* line 626, ../sass/default.scss */ +/* line 519, ../sass/default.scss */ .with-notes .note { opacity: 1; pointer-events: auto; } -/* line 631, ../sass/default.scss */ -input, button { - vertical-align: middle; -} - -/* line 635, ../sass/default.scss */ -.centered { - text-align: center; -} - -/* line 639, ../sass/default.scss */ -h2.right { - text-align: right; -} - -/* line 643, ../sass/default.scss */ -.rounded { - border-radius: 10px; - -o-border-radius: 10px; - -moz-border-radius: 10px; - -webkit-border-radius: 10px; -} - -/* line 649, ../sass/default.scss */ -.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%, #ffffff 150%); -} - -/* ===== SLIDE CONTENT ===== */ -/* line 658, ../sass/default.scss */ -#title-slide > div { - font-size: 30px; - margin-top: 200px; - color: #ababab; -} - -/* line 663, ../sass/default.scss */ -#title-slide .info { - font-size: 70%; - margin-top: 3em; -} - -/* line 667, ../sass/default.scss */ -h1 .jitter { - display: inline-block; -} - -/* line 670, ../sass/default.scss */ -h1 .jitter:before { - content: '/'; -} - -/* line 673, ../sass/default.scss */ -h1:hover .jitter:before { - color: #EB0000; - content: '\002665'; -} - -/* line 677, ../sass/default.scss */ -[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; -} - -/* line 691, ../sass/default.scss */ -#who img { - vertical-align: middle; -} - -/* line 694, ../sass/default.scss */ -#who p:first-of-type { - float: right; -} - -/* line 697, ../sass/default.scss */ -#who img.avatar { - width: 250px; - height: 250px; -} - -/* line 701, ../sass/default.scss */ -#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;*/ -} - -/* line 707, ../sass/default.scss */ -#who a { - display: inline-block; -} - -/* line 710, ../sass/default.scss */ -#currentTime { - border: none; - font-size: 12pt; - box-shadow: none; -} - -/* line 715, ../sass/default.scss */ -#currentTime::-webkit-outer-spin-button, #currentTime::-webkit-inner-spin-button { - display: none; - -webkit-appearance: none; - margin: 0; -} - -/* line 721, ../sass/default.scss */ +/* line 524, ../sass/default.scss */ .note { font-size: 20px; position: absolute; @@ -998,463 +851,160 @@ 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; + display: -webkit-box !important; + display: -moz-box !important; + display: -ms-box !important; + display: -o-box !important; + display: box !important; + -moz-box-orient: vertical; + -webkit-box-orient: vertical; + -ms-box-orient: vertical; + box-orient: vertical; -moz-box-align: center; - -o-box-align: center; + -webkit-box-align: center; + -ms-box-align: center; box-align: center; - -webkit-box-pack: center; -moz-box-pack: center; - -o-box-pack: center; + -webkit-box-pack: center; + -ms-box-pack: center; box-pack: center; pointer-events: none; + -moz-transition: opacity 0.2s ease-in-out; -webkit-transition: opacity 0.2s ease-in-out; + -o-transition: opacity 0.2s ease-in-out; + transition: opacity 0.2s ease-in-out; opacity: 0; - border-radius: 10px; - -o-border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; + -o-border-radius: 10px; + -ms-border-radius: 10px; + -khtml-border-radius: 10px; + border-radius: 10px; } - -/* line 753, ../sass/default.scss */ -.note ul { - margin: 0; -} - -/* line 756, ../sass/default.scss */ +/* line 541, ../sass/default.scss */ .note > section { background: #fff; border-radius: 5px; + -moz-box-shadow: 0 0 20px 5px rgba(0, 0, 0, 0.4); + -webkit-box-shadow: 0 0 20px 5px rgba(0, 0, 0, 0.4); + -o-box-shadow: 0 0 20px 5px rgba(0, 0, 0, 0.4); box-shadow: 0 0 20px 5px rgba(0, 0, 0, 0.4); width: 60%; padding: 2em; } -/* line 764, ../sass/default.scss */ -.flexcenter { - display: -webkit-box !important; - -webkit-box-orient: vertical; - -webkit-box-align: center; - -webkit-box-pack: center; -} - -/* line 772, ../sass/default.scss */ -#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; -} - -/* line 785, ../sass/default.scss */ -.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.926em); - -moz-transform: rotate(0deg) translate(64px, -0.926em); - -o-transform: rotate(0deg) translate(64px, -0.926em); - transform: rotate(0deg) translate(64px, -0.926em); -} - -/* line 801, ../sass/default.scss */ -#yellow { - z-index: -97; - background: -webkit-gradient(radial, 64 64, 279, -147 99, 100, from(#d9a919), to(white), color-stop(0.35, #f0d418)); -} - -/* line 806, ../sass/default.scss */ -#yellow2 { - background: -webkit-gradient(radial, 64 64, 279, -120 99, 115, from(#d9a919), to(white), color-stop(0.35, #f0d418)); - z-index: -94; - height: 79px; - width: 255px; -} - -/* line 813, ../sass/default.scss */ -#green { - background: #44A73D; - background: -webkit-gradient(radial, 64 64, 329, -227 299, 100, from(#44a73d), to(white), color-stop(0.4, #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; -} - -/* line 824, ../sass/default.scss */ -#red { - background: #E03e39; - background: -webkit-gradient(radial, 164 100, 280, 466 400, 10, from(#e44d40), to(white), color-stop(0.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; -} - -/* line 836, ../sass/default.scss */ -#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;*/ -} - -/* line 853, ../sass/default.scss */ -#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; -} - -/* line 864, ../sass/default.scss */ -#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; -} - -/* line 878, ../sass/default.scss */ -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; +/* line 550, ../sass/default.scss */ +input, button { vertical-align: middle; - margin-left: 7px; -} - -/* line 889, ../sass/default.scss */ -.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; -} - -/* these before/after shadows mess up the page reflow on builds */ -/*.drop-shadow::before, .drop-shadow::after { - content: ''; - 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; -}*/ -/* line 935, ../sass/default.scss */ -.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; -} - -/* line 944, ../sass/default.scss */ -.hidden { - display: none !important; } -/* line 948, ../sass/default.scss */ -.invisible { - visibility: hidden !important; -} - -/* line 952, ../sass/default.scss */ -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 - ******************************************************************************/ -/* line 985, ../sass/default.scss */ -#slide-preflight .explanation { - font-size: 70%; - margin-left: 1.4em; -} - -/* line 989, ../sass/default.scss */ -#slide-preflight .feature { - margin-top: 10px; +/* line 554, ../sass/default.scss */ +.centered { + text-align: center; } -/* line 992, ../sass/default.scss */ -#slide-preflight .feature img { - margin-right: 7px; +/* line 558, ../sass/default.scss */ +.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%, #ffffff 150%); } -/******************************************************************************* - * WARNING - ******************************************************************************/ -/* line 999, ../sass/default.scss */ -[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; +/* line 566, ../sass/default.scss */ +.flexcenter { + display: -webkit-box !important; + display: -moz-box !important; + display: -ms-box !important; + display: -o-box !important; + display: box !important; + -moz-box-orient: vertical; + -webkit-box-orient: vertical; + -ms-box-orient: vertical; + box-orient: vertical; + -moz-box-align: center; + -webkit-box-align: center; + -ms-box-align: center; + box-align: center; + -moz-box-pack: center; + -webkit-box-pack: center; + -ms-box-pack: center; + box-pack: center; + height: 100%; } -/* line 1009, ../sass/default.scss */ -.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); -} - -/* line 1023, ../sass/default.scss */ -.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 - ******************************************************************************/ -/* line 1034, ../sass/default.scss */ -.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%, white); +/* ===== SLIDE CONTENT ===== */ +/* line 575, ../sass/default.scss */ +.logoslide img { + width: 383px; + height: 92px; } -/* line 1041, ../sass/default.scss */ -.browser-support img { - height: 185px; - opacity: 0.8; - margin-right: -90px; - vertical-align: bottom; +/* line 581, ../sass/default.scss */ +aside.gdbar { + height: 97px; + width: 155px; + position: absolute; + left: 0; + top: 125px; + -moz-border-radius: 0 10px 10px 0; + -webkit-border-radius: 0 10px 10px 0; + -o-border-radius: 0 10px 10px 0; + -ms-border-radius: 0 10px 10px 0; + -khtml-border-radius: 0 10px 10px 0; + border-radius: 0 10px 10px 0; + background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #e6e6e6), color-stop(100%, #e6e6e6)) no-repeat; + background: -webkit-linear-gradient(left, #e6e6e6, #e6e6e6) no-repeat; + background: -moz-linear-gradient(left, #e6e6e6, #e6e6e6) no-repeat; + background: -o-linear-gradient(left, #e6e6e6, #e6e6e6) no-repeat; + background: -ms-linear-gradient(left, #e6e6e6, #e6e6e6) no-repeat; + background: linear-gradient(left, #e6e6e6, #e6e6e6) no-repeat; + -moz-background-size: 100% 100%; + -webkit-background-size: 100% 100%; + -o-background-size: 100% 100%; + background-size: 100% 100%; + background-size: 100% 100%; + -moz-transition: all 0.5s ease-out 0.6s; + -webkit-transition: all 0.5s ease-out 0.6s; + -o-transition: all 0.5s ease-out 0.6s; + transition: all 0.5s ease-out 0.6s; +} +/* line 594, ../sass/default.scss */ +aside.gdbar.to-build { + background-size: 0 100%; +} +/* line 598, ../sass/default.scss */ +aside.gdbar img { + width: 85px; + height: 85px; + position: absolute; + right: 0; + margin: 8px 12px; } -/* line 1047, ../sass/default.scss */ -.browser-support img:first-of-type { - height: 203px; +/* line 608, ../sass/default.scss */ +#title-slide hgroup { + position: absolute; + bottom: 150px; } - -/* line 1050, ../sass/default.scss */ -.browser-support img:last-of-type { - height: 200px; +/* line 613, ../sass/default.scss */ +#title-slide hgroup h1 { + font-size: 65px; + line-height: 1.4; + letter-spacing: -3px; + color: #515151; } - -/* line 1053, ../sass/default.scss */ -.browser-support img:nth-of-type(2) { - height: 193px; +/* line 620, ../sass/default.scss */ +#title-slide hgroup h2 { + font-size: 34px; + color: #a9a9a9; + font-weight: inherit; } - -/* line 1056, ../sass/default.scss */ -.browser-support img.supported { - opacity: 1; - z-index: 1; - position: relative; - -webkit-mask-image: none; -} - -@-webkit-keyframes rotateRight { - /* line 1064, ../sass/default.scss */ - from { - -webkit-transform: rotate(0); - } - - /* line 1067, ../sass/default.scss */ - to { - -webkit-transform: rotate(360deg); - } -} - -@-webkit-keyframes jitter { - /* line 1072, ../sass/default.scss */ - 0% { - -webkit-transform: rotate(0deg); - } - - /* line 1075, ../sass/default.scss */ - 2% { - -webkit-transform: rotate(-7deg) translateX(2px) scale(1.1); - } - - /* line 1078, ../sass/default.scss */ - 4% { - -webkit-transform: rotate(0deg); - } - - /* line 1081, ../sass/default.scss */ - 6% { - -webkit-transform: rotate(7deg) translateX(-2px); - } - - /* line 1084, ../sass/default.scss */ - 8% { - -webkit-transform: rotate(0deg); - } - - /* line 1087, ../sass/default.scss */ - 10% { - -webkit-transform: rotate(-7deg) translateX(2px) scale(1.1); - } - - /* line 1090, ../sass/default.scss */ - 12% { - -webkit-transform: rotate(0deg); - } - - /* line 1093, ../sass/default.scss */ - 14% { - -webkit-transform: rotate(7deg) translateX(-2px); - } - - /* line 1096, ../sass/default.scss */ - 16% { - -webkit-transform: rotate(0deg); - } -} - -/* line 1101, ../sass/default.scss */ -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; -} - -/* line 1108, ../sass/default.scss */ -.spin:hover { - -webkit-animation-duration: 0.1s; -} - -/* line 1111, ../sass/default.scss */ -.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; -} - -/* line 1119, ../sass/default.scss */ -#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; +/* line 626, ../sass/default.scss */ +#title-slide hgroup p { + font-size: 20px; + color: #797979; + line-height: 1.3; + margin-top: 2em; } 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.sc