From add331408b0f207b82f3ec1b76251c700197e807 Mon Sep 17 00:00:00 2001 From: Pacien TRAN-GIRARD Date: Mon, 16 Jun 2014 19:30:53 +0200 Subject: Import slides --- slides/final/theme/css/default.css | 1486 +++++++++++++++++++++++++++++++ slides/final/theme/css/io2013.css | 55 ++ slides/final/theme/css/phone.css | 1 + slides/final/theme/scss/_base.scss | 139 +++ slides/final/theme/scss/_variables.scss | 34 + slides/final/theme/scss/default.scss | 1047 ++++++++++++++++++++++ slides/final/theme/scss/io2013.scss | 51 ++ slides/final/theme/scss/phone.scss | 35 + 8 files changed, 2848 insertions(+) create mode 100644 slides/final/theme/css/default.css create mode 100644 slides/final/theme/css/io2013.css create mode 100644 slides/final/theme/css/phone.css create mode 100644 slides/final/theme/scss/_base.scss create mode 100644 slides/final/theme/scss/_variables.scss create mode 100644 slides/final/theme/scss/default.scss create mode 100644 slides/final/theme/scss/io2013.scss create mode 100644 slides/final/theme/scss/phone.scss (limited to 'slides/final/theme') diff --git a/slides/final/theme/css/default.css b/slides/final/theme/css/default.css new file mode 100644 index 0000000..ce6fda5 --- /dev/null +++ b/slides/final/theme/css/default.css @@ -0,0 +1,1486 @@ +@charset "UTF-8"; +/* line 17, ../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/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: inherit; + font-size: 100%; + vertical-align: baseline; +} + +/* line 22, ../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ +html { + line-height: 1; +} + +/* line 24, ../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ +ol, ul { + list-style: none; +} + +/* line 26, ../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ +table { + border-collapse: collapse; + border-spacing: 0; +} + +/* line 28, ../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ +caption, th, td { + text-align: left; + font-weight: normal; + vertical-align: middle; +} + +/* line 30, ../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ +q, blockquote { + quotes: none; +} +/* line 103, ../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ +q:before, q:after, blockquote:before, blockquote:after { + content: ""; + content: none; +} + +/* line 32, ../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ +a img { + border: none; +} + +/* line 116, ../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/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 52, ../scss/_base.scss */ +html { + height: 100%; + overflow: hidden; +} + +/* line 57, ../scss/_base.scss */ +body { + margin: 0; + padding: 0; + opacity: 0; + height: 100%; + min-height: 740px; + width: 100%; + overflow: hidden; + color: #fff; + -webkit-font-smoothing: antialiased; + -moz-font-smoothing: antialiased; + -ms-font-smoothing: antialiased; + -o-font-smoothing: antialiased; + -webkit-transition: opacity 800ms ease-in; + -webkit-transition-delay: 100ms; + -moz-transition: opacity 800ms ease-in 100ms; + -o-transition: opacity 800ms ease-in 100ms; + transition: opacity 800ms ease-in 100ms; +} +/* line 73, ../scss/_base.scss */ +body.loaded { + opacity: 1 !important; +} + +/* line 78, ../scss/_base.scss */ +input, button { + vertical-align: middle; +} + +/* line 82, ../scss/_base.scss */ +slides > slide[hidden] { + display: none !important; +} + +/* line 86, ../scss/_base.scss */ +slides { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + -webkit-transform: translate3d(0, 0, 0); + -moz-transform: translate3d(0, 0, 0); + -ms-transform: translate3d(0, 0, 0); + -o-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + -webkit-perspective: 1000; + -moz-perspective: 1000; + -ms-perspective: 1000; + -o-perspective: 1000; + perspective: 1000; + -webkit-transform-style: preserve-3d; + -moz-transform-style: preserve-3d; + -ms-transform-style: preserve-3d; + -o-transform-style: preserve-3d; + transform-style: preserve-3d; + -webkit-transition: opacity 800ms ease-in; + -webkit-transition-delay: 100ms; + -moz-transition: opacity 800ms ease-in 100ms; + -o-transition: opacity 800ms ease-in 100ms; + transition: opacity 800ms ease-in 100ms; +} + +/* line 98, ../scss/_base.scss */ +slides > slide { + display: block; + position: absolute; + overflow: hidden; + left: 50%; + top: 50%; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +/* Slide styles */ +/*article.fill iframe { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + + border: 0; + margin: 0; + + @include border-radius(10px); + + z-index: -1; +} + +slide.fill { + background-repeat: no-repeat; + @include background-size(cover); +} + +slide.fill img { + position: absolute; + left: 0; + top: 0; + min-width: 100%; + min-height: 100%; + + z-index: -1; +} +*/ +/** + * Theme Styles + */ +/* line 22, ../scss/default.scss */ +::selection { + color: white; + background-color: #ffd14d; + text-shadow: none; +} + +/* line 28, ../scss/default.scss */ +::-webkit-scrollbar { + height: 16px; + overflow: visible; + width: 16px; +} + +/* line 33, ../scss/default.scss */ +::-webkit-scrollbar-thumb { + background-color: rgba(0, 0, 0, 0.1); + background-clip: padding-box; + border: solid transparent; + min-height: 28px; + padding: 100px 0 0; + -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.07); + -moz-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.07); + box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.07); + border-width: 1px 1px 1px 6px; +} + +/* line 42, ../scss/default.scss */ +::-webkit-scrollbar-thumb:hover { + background-color: rgba(0, 0, 0, 0.5); +} + +/* line 45, ../scss/default.scss */ +::-webkit-scrollbar-button { + height: 0; + width: 0; +} + +/* line 49, ../scss/default.scss */ +::-webkit-scrollbar-track { + background-clip: padding-box; + border: solid transparent; + border-width: 0 0 0 4px; +} + +/* line 54, ../scss/default.scss */ +::-webkit-scrollbar-corner { + background: transparent; +} + +/* line 58, ../scss/default.scss */ +body { + background: black; +} + +/* line 62, ../scss/default.scss */ +slides > slide { + display: none; + font-family: 'Open Sans', Arial, sans-serif; + font-size: 26px; + color: #797979; + width: 900px; + height: 700px; + margin-left: -450px; + margin-top: -350px; + padding: 40px 60px; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + -ms-border-radius: 5px; + -o-border-radius: 5px; + border-radius: 5px; + -webkit-transition: all 0.6s ease-in-out; + -moz-transition: all 0.6s ease-in-out; + -o-transition: all 0.6s ease-in-out; + transition: all 0.6s ease-in-out; +} +/* line 83, ../scss/default.scss */ +slides > slide.far-past { + display: none; +} +/* line 90, ../scss/default.scss */ +slides > slide.past { + display: block; + opacity: 0; +} +/* line 97, ../scss/default.scss */ +slides > slide.current { + display: block; + opacity: 1; +} +/* line 103, ../scss/default.scss */ +slides > slide.current .auto-fadein { + opacity: 1; +} +/* line 107, ../scss/default.scss */ +slides > slide.current .gdbar { + -webkit-background-size: 100% 100%; + -moz-background-size: 100% 100%; + -o-background-size: 100% 100%; + background-size: 100% 100%; +} +/* line 112, ../scss/default.scss */ +slides > slide.next { + display: block; + opacity: 0; + pointer-events: none; +} +/* line 120, ../scss/default.scss */ +slides > slide.far-next { + display: none; +} +/* line 127, ../scss/default.scss */ +slides > slide.dark { + background: #515151 !important; +} +/* line 135, ../scss/default.scss */ +slides > slide:not(.nobackground):before { + font-size: 12pt; + content: ""; + position: absolute; + bottom: 20px; + left: 60px; + background: url(../../images/google_developers_icon_128.png) no-repeat 0 50%; + -webkit-background-size: 30px 30px; + -moz-background-size: 30px 30px; + -o-background-size: 30px 30px; + background-size: 30px 30px; + padding-left: 40px; + height: 30px; + line-height: 1.9; +} +/* line 147, ../scss/default.scss */ +slides > slide:not(.nobackground):after { + font-size: 12pt; + content: attr(data-slide-num) "/" attr(data-total-slides); + position: absolute; + bottom: 20px; + right: 60px; + line-height: 1.9; +} +/* line 158, ../scss/default.scss */ +slides > slide.title-slide:after { + content: ''; + position: absolute; + bottom: 40px; + right: 40px; + width: 100%; + height: 60px; +} +/* line 170, ../scss/default.scss */ +slides > slide.backdrop { + z-index: -10; + display: block !important; + background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(85%, #ffffff), color-stop(100%, #e6e6e6)); + background: -webkit-linear-gradient(#ffffff, #ffffff 85%, #e6e6e6); + background: -moz-linear-gradient(#ffffff, #ffffff 85%, #e6e6e6); + background: -o-linear-gradient(#ffffff, #ffffff 85%, #e6e6e6); + background: linear-gradient(#ffffff, #ffffff 85%, #e6e6e6); + background-color: white; +} +/* line 175, ../scss/default.scss */ +slides > slide.backdrop:after, slides > slide.backdrop:before { + display: none; +} +/* line 180, ../scss/default.scss */ +slides > slide > hgroup + article { + margin-top: 45px; +} +/* line 184, ../scss/default.scss */ +slides > slide > hgroup + article.flexbox.vcenter, slides > slide > hgroup + article.flexbox.vleft, slides > slide > hgroup + article.flexbox.vright { + height: 80%; +} +/* line 189, ../scss/default.scss */ +slides > slide > hgroup + article p { + margin-bottom: 1em; +} +/* line 194, ../scss/default.scss */ +slides > slide > article:only-child { + height: 100%; +} +/* line 197, ../scss/default.scss */ +slides > slide > article:only-child > iframe { + height: 98%; +} + +/* line 203, ../scss/default.scss */ +slides.layout-faux-widescreen > slide { + padding: 40px 160px; +} + +/* line 212, ../scss/default.scss */ +slides.layout-widescreen > slide, +slides.layout-faux-widescreen > slide { + margin-left: -550px; + width: 1100px; +} +/* line 217, ../scss/default.scss */ +slides.layout-widescreen > slide.far-past, +slides.layout-faux-widescreen > slide.far-past { + display: block; + display: none; + -webkit-transform: translate(-2260px); + -moz-transform: translate(-2260px); + -ms-transform: translate(-2260px); + -o-transform: translate(-2260px); + transform: translate(-2260px); + -webkit-transform: translate3d(-2260px, 0, 0); + -moz-transform: translate3d(-2260px, 0, 0); + -ms-transform: translate3d(-2260px, 0, 0); + -o-transform: translate3d(-2260px, 0, 0); + transform: translate3d(-2260px, 0, 0); +} +/* line 224, ../scss/default.scss */ +slides.layout-widescreen > slide.past, +slides.layout-faux-widescreen > slide.past { + display: block; + opacity: 0; +} +/* line 231, ../scss/default.scss */ +slides.layout-widescreen > slide.current, +slides.layout-faux-widescreen > slide.current { + display: block; + opacity: 1; +} +/* line 238, ../scss/default.scss */ +slides.layout-widescreen > slide.next, +slides.layout-faux-widescreen > slide.next { + display: block; + opacity: 0; + pointer-events: none; +} +/* line 246, ../scss/default.scss */ +slides.layout-widescreen > slide.far-next, +slides.layout-faux-widescreen > slide.far-next { + display: block; + display: none; + -webkit-transform: translate(2260px); + -moz-transform: translate(2260px); + -ms-transform: translate(2260px); + -o-transform: translate(2260px); + transform: translate(2260px); + -webkit-transform: translate3d(2260px, 0, 0); + -moz-transform: translate3d(2260px, 0, 0); + -ms-transform: translate3d(2260px, 0, 0); + -o-transform: translate3d(2260px, 0, 0); + transform: translate3d(2260px, 0, 0); +} +/* line 253, ../scss/default.scss */ +slides.layout-widescreen #prev-slide-area, +slides.layout-faux-widescreen #prev-slide-area { + margin-left: -650px; +} +/* line 257, ../scss/default.scss */ +slides.layout-widescreen #next-slide-area, +slides.layout-faux-widescreen #next-slide-area { + margin-left: 550px; +} + +/* line 262, ../scss/default.scss */ +b { + font-weight: 600; +} + +/* line 266, ../scss/default.scss */ +a { + color: #2a7cdf; + text-decoration: none; + border-bottom: 1px solid rgba(42, 124, 223, 0.5); +} +/* line 271, ../scss/default.scss */ +a:hover { + color: black !important; +} + +/* line 276, ../scss/default.scss */ +h1, h2, h3 { + font-weight: 600; +} + +/* line 280, ../scss/default.scss */ +h2 { + font-size: 45px; + line-height: 45px; + letter-spacing: -2px; + color: #515151; +} + +/* line 287, ../scss/default.scss */ +h3 { + font-size: 30px; + letter-spacing: -1px; + line-height: 2; + font-weight: inherit; + color: #797979; +} + +/* line 295, ../scss/default.scss */ +ul { + margin-left: 1.2em; + margin-bottom: 1em; + position: relative; +} +/* line 300, ../scss/default.scss */ +ul li { + margin-bottom: 0.5em; +} +/* line 303, ../scss/default.scss */ +ul li ul { + margin-left: 2em; + margin-bottom: 0; +} +/* line 307, ../scss/default.scss */ +ul li ul li:before { + content: '-'; + font-weight: 600; +} +/* line 314, ../scss/default.scss */ +ul > li:before { + content: '\00B7'; + margin-left: -1em; + position: absolute; + font-weight: 600; +} +/* line 321, ../scss/default.scss */ +ul ul { + margin-top: .5em; +} + +/* line 328, ../scss/default.scss */ +.highlight-code slide.current pre > * { + opacity: 0.25; + -webkit-transition: opacity 0.5s ease-in; + -moz-transition: opacity 0.5s ease-in; + -o-transition: opacity 0.5s ease-in; + transition: opacity 0.5s ease-in; +} +/* line 332, ../scss/default.scss */ +.highlight-code slide.current b { + opacity: 1; +} + +/* line 337, ../scss/default.scss */ +pre { + font-family: 'Source Code Pro', 'Courier New', monospace; + font-size: 20px; + line-height: 28px; + padding: 10px 0 10px 60px; + letter-spacing: -1px; + margin-bottom: 20px; + width: 106%; + background-color: #e6e6e6; + left: -60px; + position: relative; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + /*overflow: hidden;*/ +} +/* line 351, ../scss/default.scss */ +pre[data-lang]:after { + content: attr(data-lang); + background-color: darkgrey; + right: 0; + top: 0; + position: absolute; + font-size: 16pt; + color: white; + padding: 2px 25px; + text-transform: uppercase; +} + +/* line 364, ../scss/default.scss */ +pre[data-lang="go"] { + color: #333; +} + +/* line 368, ../scss/default.scss */ +code { + font-size: 95%; + font-family: 'Source Code Pro', 'Courier New', monospace; + color: black; +} + +/* line 374, ../scss/default.scss */ +iframe { + width: 100%; + height: 530px; + background: white; + border: 1px solid #e6e6e6; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +/* line 382, ../scss/default.scss */ +dt { + font-weight: bold; +} + +/* line 386, ../scss/default.scss */ +button { + display: inline-block; + background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(40%, #f9f9f9), color-stop(70%, #e3e3e3)); + background: -webkit-linear-gradient(#f9f9f9 40%, #e3e3e3 70%); + background: -moz-linear-gradient(#f9f9f9 40%, #e3e3e3 70%); + background: -o-linear-gradient(#f9f9f9 40%, #e3e3e3 70%); + background: linear-gradient(#f9f9f9 40%, #e3e3e3 70%); + border: 1px solid darkgrey; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + -ms-border-radius: 3px; + -o-border-radius: 3px; + border-radius: 3px; + padding: 5px 8px; + outline: none; + white-space: nowrap; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + cursor: pointer; + text-shadow: 1px 1px white; + font-size: 10pt; +} + +/* line 400, ../scss/default.scss */ +button:not(:disabled):hover { + border-color: #515151; +} + +/* line 404, ../scss/default.scss */ +button:not(:disabled):active { + background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(40%, #e3e3e3), color-stop(70%, #f9f9f9)); + background: -webkit-linear-gradient(#e3e3e3 40%, #f9f9f9 70%); + background: -moz-linear-gradient(#e3e3e3 40%, #f9f9f9 70%); + background: -o-linear-gradient(#e3e3e3 40%, #f9f9f9 70%); + background: linear-gradient(#e3e3e3 40%, #f9f9f9 70%); +} + +/* line 408, ../scss/default.scss */ +:disabled { + color: darkgrey; +} + +/* line 412, ../scss/default.scss */ +.blue { + color: #4387fd; +} + +/* line 415, ../scss/default.scss */ +.blue2 { + color: #3c8ef3; +} + +/* line 418, ../scss/default.scss */ +.blue3 { + color: #2a7cdf; +} + +/* line 421, ../scss/default.scss */ +.yellow { + color: #ffd14d; +} + +/* line 424, ../scss/default.scss */ +.yellow2 { + color: #f9cc46; +} + +/* line 427, ../scss/default.scss */ +.yellow3 { + color: #f6c000; +} + +/* line 430, ../scss/default.scss */ +.green { + color: #0da861; +} + +/* line 433, ../scss/default.scss */ +.green2 { + color: #00a86d; +} + +/* line 436, ../scss/default.scss */ +.green3 { + color: #009f5d; +} + +/* line 439, ../scss/default.scss */ +.red { + color: #f44a3f; +} + +/* line 442, ../scss/default.scss */ +.red2 { + color: #e0543e; +} + +/* line 445, ../scss/default.scss */ +.red3 { + color: #d94d3a; +} + +/* line 448, ../scss/default.scss */ +.gray { + color: #e6e6e6; +} + +/* line 451, ../scss/default.scss */ +.gray2 { + color: darkgrey; +} + +/* line 454, ../scss/default.scss */ +.gray3 { + color: #797979; +} + +/* line 457, ../scss/default.scss */ +.gray4 { + color: #515151; +} + +/* line 461, ../scss/default.scss */ +.white { + color: white !important; +} + +/* line 464, ../scss/default.scss */ +.black { + color: black !important; +} + +/* line 468, ../scss/default.scss */ +.columns-2 { + -webkit-column-count: 2; + -moz-column-count: 2; + -ms-column-count: 2; + -o-column-count: 2; + column-count: 2; +} + +/* line 472, ../scss/default.scss */ +table { + width: 100%; + border-collapse: -moz-initial; + border-collapse: initial; + border-spacing: 2px; + border-bottom: 1px solid #797979; +} +/* line 479, ../scss/default.scss */ +table tr > td:first-child, table th { + font-weight: 600; + color: #515151; +} +/* line 484, ../scss/default.scss */ +table tr:nth-child(odd) { + background-color: #e6e6e6; +} +/* line 488, ../scss/default.scss */ +table th { + color: white; + font-size: 18px; + background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(40%, #4387fd), color-stop(80%, #2a7cdf)) no-repeat; + background: -webkit-linear-gradient(top, #4387fd 40%, #2a7cdf 80%) no-repeat; + background: -moz-linear-gradient(top, #4387fd 40%, #2a7cdf 80%) no-repeat; + background: -o-linear-gradient(top, #4387fd 40%, #2a7cdf 80%) no-repeat; + background: linear-gradient(top, #4387fd 40%, #2a7cdf 80%) no-repeat; +} +/* line 494, ../scss/default.scss */ +table td, table th { + font-size: 18px; + padding: 1em 0.5em; +} +/* line 499, ../scss/default.scss */ +table td.highlight { + color: #515151; + background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(40%, #ffd14d), color-stop(80%, #f6c000)) no-repeat; + background: -webkit-linear-gradient(top, #ffd14d 40%, #f6c000 80%) no-repeat; + background: -moz-linear-gradient(top, #ffd14d 40%, #f6c000 80%) no-repeat; + background: -o-linear-gradient(top, #ffd14d 40%, #f6c000 80%) no-repeat; + background: linear-gradient(top, #ffd14d 40%, #f6c000 80%) no-repeat; +} +/* line 504, ../scss/default.scss */ +table.rows { + border-bottom: none; + border-right: 1px solid #797979; +} + +/* line 510, ../scss/default.scss */ +q { + font-size: 45px; + line-height: 72px; +} +/* line 514, ../scss/default.scss */ +q:before { + content: '“'; + position: absolute; + margin-left: -0.5em; +} +/* line 519, ../scss/default.scss */ +q:after { + content: '”'; + position: absolute; + margin-left: 0.1em; +} + +/* line 526, ../scss/default.scss */ +slide.fill { + background-repeat: no-repeat; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + -ms-border-radius: 5px; + -o-border-radius: 5px; + border-radius: 5px; + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + background-size: cover; +} + +/* Size variants */ +/* line 535, ../scss/default.scss */ +article.smaller p, article.smaller ul { + font-size: 20px; + line-height: 24px; + letter-spacing: 0; +} +/* line 541, ../scss/default.scss */ +article.smaller table td, article.smaller table th { + font-size: 14px; +} +/* line 545, ../scss/default.scss */ +article.smaller pre { + font-size: 15px; + line-height: 20px; + letter-spacing: 0; +} +/* line 550, ../scss/default.scss */ +article.smaller q { + font-size: 40px; + line-height: 48px; +} +/* line 554, ../scss/default.scss */ +article.smaller q:before, article.smaller q:after { + font-size: 60px; +} + +/* Builds */ +/* line 563, ../scss/default.scss */ +.build > * { + -webkit-transition: opacity 0.5s ease-in-out; + -webkit-transition-delay: 0.2s; + -moz-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 567, ../scss/default.scss */ +.build .to-build { + opacity: 0; +} +/* line 571, ../scss/default.scss */ +.build .build-fade { + opacity: 0.3; +} +/* line 574, ../scss/default.scss */ +.build .build-fade:hover { + opacity: 1.0; +} + +/* line 581, ../scss/default.scss */ +.popup .next .build .to-build { + opacity: 1; +} +/* line 585, ../scss/default.scss */ +.popup .next .build .build-fade { + opacity: 1; +} + +/* Pretty print */ +/* line 593, ../scss/default.scss */ +.prettyprint .str, +.prettyprint .atv { + /* a markup attribute value */ + color: #009f5d; +} + +/* line 597, ../scss/default.scss */ +.prettyprint .kwd, +.prettyprint .tag { + /* a markup tag name */ + color: #0066cc; +} + +/* line 600, ../scss/default.scss */ +.prettyprint .com { + /* a comment */ + color: #797979; + font-style: italic; +} + +/* line 604, ../scss/default.scss */ +.prettyprint .lit { + /* a literal value */ + color: #7f0000; +} + +/* line 609, ../scss/default.scss */ +.prettyprint .pun, +.prettyprint .opn, +.prettyprint .clo { + color: #515151; +} + +/* line 615, ../scss/default.scss */ +.prettyprint .typ, +.prettyprint .atn, +.prettyprint .dec, +.prettyprint .var { + /* a declaration; a variable name */ + color: #d94d3a; +} + +/* line 618, ../scss/default.scss */ +.prettyprint .pln { + color: #515151; +} + +/* line 622, ../scss/default.scss */ +.note { + position: absolute; + z-index: 100; + width: 100%; + height: 100%; + top: 0; + left: 0; + padding: 1em; + background: rgba(0, 0, 0, 0.3); + opacity: 0; + pointer-events: none; + display: -webkit-box !important; + display: -moz-box !important; + display: -ms-box !important; + display: -o-box !important; + display: box !important; + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -ms-box-orient: vertical; + box-orient: vertical; + -webkit-box-align: center; + -moz-box-align: center; + -ms-box-align: center; + box-align: center; + -webkit-box-pack: center; + -moz-box-pack: center; + -ms-box-pack: center; + box-pack: center; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + -ms-border-radius: 5px; + -o-border-radius: 5px; + border-radius: 5px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + -webkit-transform: translateY(350px); + -moz-transform: translateY(350px); + -ms-transform: translateY(350px); + -o-transform: translateY(350px); + transform: translateY(350px); + -webkit-transition: all 0.4s ease-in-out; + -moz-transition: all 0.4s ease-in-out; + -o-transition: all 0.4s ease-in-out; + transition: all 0.4s ease-in-out; +} +/* line 640, ../scss/default.scss */ +.note > section { + background: #fff; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + -ms-border-radius: 5px; + -o-border-radius: 5px; + border-radius: 5px; + -webkit-box-shadow: 0 0 10px #797979; + -moz-box-shadow: 0 0 10px #797979; + box-shadow: 0 0 10px #797979; + width: 60%; + padding: 2em; +} + +/* line 657, ../scss/default.scss */ +.with-notes.popup slides.layout-widescreen slide.next, +.with-notes.popup slides.layout-faux-widescreen slide.next { + -webkit-transform: translate3d(690px, 80px, 0) scale(0.35); + -moz-transform: translate3d(690px, 80px, 0) scale(0.35); + -ms-transform: translate3d(690px, 80px, 0) scale(0.35); + -o-transform: translate3d(690px, 80px, 0) scale(0.35); + transform: translate3d(690px, 80px, 0) scale(0.35); +} +/* line 660, ../scss/default.scss */ +.with-notes.popup slides.layout-widescreen slide .note, +.with-notes.popup slides.layout-faux-widescreen slide .note { + -webkit-transform: translate3d(300px, 800px, 0) scale(1.5); + -moz-transform: translate3d(300px, 800px, 0) scale(1.5); + -ms-transform: translate3d(300px, 800px, 0) scale(1.5); + -o-transform: translate3d(300px, 800px, 0) scale(1.5); + transform: translate3d(300px, 800px, 0) scale(1.5); +} +/* line 666, ../scss/default.scss */ +.with-notes.popup slide { + overflow: visible; + background: white; + -webkit-transition: none; + -moz-transition: none; + -o-transition: none; + transition: none; + pointer-events: none; + -webkit-transform-origin: 0 0; + -moz-transform-origin: 0 0; + -ms-transform-origin: 0 0; + -o-transform-origin: 0 0; + transform-origin: 0 0; +} +/* line 673, ../scss/default.scss */ +.with-notes.popup slide:not(.backdrop) { + -webkit-transform: scale(0.6) translate3d(0.5em, 0.5em, 0); + -moz-transform: scale(0.6) translate3d(0.5em, 0.5em, 0); + -ms-transform: scale(0.6) translate3d(0.5em, 0.5em, 0); + -o-transform: scale(0.6) translate3d(0.5em, 0.5em, 0); + transform: scale(0.6) translate3d(0.5em, 0.5em, 0); + -webkit-box-shadow: 0 0 10px #797979; + -moz-box-shadow: 0 0 10px #797979; + box-shadow: 0 0 10px #797979; +} +/* line 678, ../scss/default.scss */ +.with-notes.popup slide.backdrop { + background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 600, color-stop(0%, #b1dfff), color-stop(100%, #4387fd)); + background-image: -webkit-radial-gradient(50% 50%, #b1dfff 0%, #4387fd 600px); + background-image: -moz-radial-gradient(50% 50%, #b1dfff 0%, #4387fd 600px); + background-image: -o-radial-gradient(50% 50%, #b1dfff 0%, #4387fd 600px); + background-image: radial-gradient(50% 50%, #b1dfff 0%, #4387fd 600px); +} +/* line 684, ../scss/default.scss */ +.with-notes.popup slide.next { + -webkit-transform: translate3d(570px, 80px, 0) scale(0.35); + -moz-transform: translate3d(570px, 80px, 0) scale(0.35); + -ms-transform: translate3d(570px, 80px, 0) scale(0.35); + -o-transform: translate3d(570px, 80px, 0) scale(0.35); + transform: translate3d(570px, 80px, 0) scale(0.35); + opacity: 1 !important; +} +/* line 688, ../scss/default.scss */ +.with-notes.popup slide.next .note { + display: none !important; +} +/* line 694, ../scss/default.scss */ +.with-notes.popup .note { + width: 109%; + height: 260px; + background: #e6e6e6; + padding: 0; + -webkit-box-shadow: 0 0 10px #797979; + -moz-box-shadow: 0 0 10px #797979; + box-shadow: 0 0 10px #797979; + -webkit-transform: translate3d(250px, 800px, 0) scale(1.5); + -moz-transform: translate3d(250px, 800px, 0) scale(1.5); + -ms-transform: translate3d(250px, 800px, 0) scale(1.5); + -o-transform: translate3d(250px, 800px, 0) scale(1.5); + transform: translate3d(250px, 800px, 0) scale(1.5); + -webkit-transition: opacity 400ms ease-in-out; + -moz-transition: opacity 400ms ease-in-out; + -o-transition: opacity 400ms ease-in-out; + transition: opacity 400ms ease-in-out; +} +/* line 705, ../scss/default.scss */ +.with-notes.popup .note > section { + background: #fff; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + -ms-border-radius: 5px; + -o-border-radius: 5px; + border-radius: 5px; + height: 100%; + width: 100%; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; + overflow: auto; + padding: 1em; +} +/* line 718, ../scss/default.scss */ +.with-notes .note { + opacity: 1; + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + -ms-transform: translateY(0); + -o-transform: translateY(0); + transform: translateY(0); + pointer-events: auto; +} + +/* line 725, ../scss/default.scss */ +.source { + font-size: 14px; + color: darkgrey; + position: absolute; + bottom: 70px; + left: 60px; +} + +/* line 733, ../scss/default.scss */ +.centered { + text-align: center; +} + +/* line 737, ../scss/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%); +} + +/* line 745, ../scss/default.scss */ +.flexbox { + display: -webkit-box !important; + display: -moz-box !important; + display: -ms-box !important; + display: -o-box !important; + display: box !important; +} + +/* line 749, ../scss/default.scss */ +.flexbox.vcenter { + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -ms-box-orient: vertical; + box-orient: vertical; + -webkit-box-align: center; + -moz-box-align: center; + -ms-box-align: center; + box-align: center; + -webkit-box-pack: center; + -moz-box-pack: center; + -ms-box-pack: center; + box-pack: center; + height: 100%; + width: 100%; +} + +/* line 755, ../scss/default.scss */ +.flexbox.vleft { + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -ms-box-orient: vertical; + box-orient: vertical; + -webkit-box-align: left; + -moz-box-align: left; + -ms-box-align: left; + box-align: left; + -webkit-box-pack: center; + -moz-box-pack: center; + -ms-box-pack: center; + box-pack: center; + height: 100%; + width: 100%; +} + +/* line 761, ../scss/default.scss */ +.flexbox.vright { + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -ms-box-orient: vertical; + box-orient: vertical; + -webkit-box-align: end; + -moz-box-align: end; + -ms-box-align: end; + box-align: end; + -webkit-box-pack: center; + -moz-box-pack: center; + -ms-box-pack: center; + box-pack: center; + height: 100%; + width: 100%; +} + +/* line 767, ../scss/default.scss */ +.auto-fadein { + -webkit-transition: opacity 0.6s ease-in; + -webkit-transition-delay: 1s; + -moz-transition: opacity 0.6s ease-in 1s; + -o-transition: opacity 0.6s ease-in 1s; + transition: opacity 0.6s ease-in 1s; + opacity: 0; +} + +/* Clickable/tappable areas */ +/* line 773, ../scss/default.scss */ +.slide-area { + z-index: 1000; + position: absolute; + left: 0; + top: 0; + width: 100px; + height: 700px; + left: 50%; + top: 50%; + cursor: pointer; + margin-top: -350px; +} + +/* line 790, ../scss/default.scss */ +#prev-slide-area { + margin-left: -550px; +} + +/* line 795, ../scss/default.scss */ +#next-slide-area { + margin-left: 450px; +} + +/* ===== SLIDE CONTENT ===== */ +/* line 803, ../scss/default.scss */ +.logoslide img { + width: 383px; + height: 92px; +} + +/* line 809, ../scss/default.scss */ +.segue { + padding: 60px 120px; +} +/* line 812, ../scss/default.scss */ +.segue h2 { + color: #e6e6e6; + font-size: 60px; +} +/* line 816, ../scss/default.scss */ +.segue h3 { + color: #e6e6e6; + line-height: 2.8; +} +/* line 820, ../scss/default.scss */ +.segue hgroup { + position: absolute; + bottom: 225px; +} + +/* line 826, ../scss/default.scss */ +.thank-you-slide { + background: #4387fd !important; + color: white; +} +/* line 830, ../scss/default.scss */ +.thank-you-slide h2 { + font-size: 60px; + color: inherit; +} +/* line 835, ../scss/default.scss */ +.thank-you-slide article > p { + margin-top: 2em; + font-size: 20pt; +} +/* line 840, ../scss/default.scss */ +.thank-you-slide > p { + position: absolute; + bottom: 80px; + font-size: 24pt; + line-height: 1.3; +} + +/* line 848, ../scss/default.scss */ +aside.gdbar { + height: 97px; + width: 215px; + position: absolute; + left: -1px; + top: 125px; + -webkit-border-radius: 0 10px 10px 0; + -moz-border-radius: 0 10px 10px 0; + -ms-border-radius: 0 10px 10px 0; + -o-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: linear-gradient(left, #e6e6e6, #e6e6e6) no-repeat; + -webkit-background-size: 0% 100%; + -moz-background-size: 0% 100%; + -o-background-size: 0% 100%; + background-size: 0% 100%; + -webkit-transition: all 0.5s ease-out; + -webkit-transition-delay: 0.5s; + -moz-transition: all 0.5s ease-out 0.5s; + -o-transition: all 0.5s ease-out 0.5s; + transition: all 0.5s ease-out 0.5s; + /* Better to transition only on background-size, but not sure how to do that with the mixin. */ +} +/* line 859, ../scss/default.scss */ +aside.gdbar.right { + right: 0; + left: -moz-initial; + left: initial; + top: 254px; + /* 96 is height of gray icon bar */ + -webkit-transform: rotateZ(180deg); + -moz-transform: rotateZ(180deg); + -ms-transform: rotateZ(180deg); + -o-transform: rotateZ(180deg); + transform: rotateZ(180deg); +} +/* line 866, ../scss/default.scss */ +aside.gdbar.right img { + -webkit-transform: rotateZ(180deg); + -moz-transform: rotateZ(180deg); + -ms-transform: rotateZ(180deg); + -o-transform: rotateZ(180deg); + transform: rotateZ(180deg); +} +/* line 871, ../scss/default.scss */ +aside.gdbar.bottom { + top: -moz-initial; + top: initial; + bottom: 60px; +} +/* line 877, ../scss/default.scss */ +aside.gdbar img { + width: 85px; + height: 85px; + position: absolute; + right: 0; + margin: 8px 15px; +} + +/* line 888, ../scss/default.scss */ +.title-slide hgroup { + bottom: 100px; +} +/* line 891, ../scss/default.scss */ +.title-slide hgroup h1 { + font-size: 65px; + line-height: 1.4; + letter-spacing: -3px; + color: #515151; +} +/* line 898, ../scss/default.scss */ +.title-slide hgroup h2 { + font-size: 34px; + color: darkgrey; + font-weight: inherit; +} +/* line 904, ../scss/default.scss */ +.title-slide hgroup p { + font-size: 20px; + color: #797979; + line-height: 1.3; + margin-top: 2em; +} + +/* line 913, ../scss/default.scss */ +.quote { + color: #e6e6e6; +} +/* line 916, ../scss/default.scss */ +.quote .author { + font-size: 24px; + position: absolute; + bottom: 80px; + line-height: 1.4; +} + +/* line 925, ../scss/default.scss */ +[data-config-contact] a { + color: white; + border-bottom: none; +} +/* line 929, ../scss/default.scss */ +[data-config-contact] span { + width: 115px; + display: inline-block; +} + +/* line 938, ../scss/default.scss */ +.overview.popup .note { + display: none !important; +} +/* line 944, ../scss/default.scss */ +.overview slides slide { + display: block; + cursor: pointer; + opacity: 0.5; + pointer-events: auto !important; + background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(85%, #ffffff), color-stop(100%, #e6e6e6)); + background: -webkit-linear-gradient(#ffffff, #ffffff 85%, #e6e6e6); + background: -moz-linear-gradient(#ffffff, #ffffff 85%, #e6e6e6); + background: -o-linear-gradient(#ffffff, #ffffff 85%, #e6e6e6); + background: linear-gradient(#ffffff, #ffffff 85%, #e6e6e6); + background-color: white; +} +/* line 945, ../scss/default.scss */ +.overview slides slide.backdrop { + display: none !important; +} +/* line 960, ../scss/default.scss */ +.overview slides slide.far-past, .overview slides slide.past, .overview slides slide.next, .overview slides slide.far-next, .overview slides slide.far-past { + opacity: 0.5; + display: block; +} +/* line 965, ../scss/default.scss */ +.overview slides slide.current { + opacity: 1; +} +/* line 971, ../scss/default.scss */ +.overview .slide-area { + display: none; +} + +@media print { + /* line 978, ../scss/default.scss */ + slides slide { + display: block !important; + position: relative; + background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(85%, #ffffff), color-stop(100%, #e6e6e6)); + background: -webkit-linear-gradient(#ffffff, #ffffff 85%, #e6e6e6); + background: -moz-linear-gradient(#ffffff, #ffffff 85%, #e6e6e6); + background: -o-linear-gradient(#ffffff, #ffffff 85%, #e6e6e6); + background: linear-gradient(#ffffff, #ffffff 85%, #e6e6e6); + background-color: white; + -webkit-transform: none !important; + -moz-transform: none !important; + -ms-transform: none !important; + -o-transform: none !important; + transform: none !important; + width: 100%; + height: 100%; + page-break-after: always; + top: auto !important; + left: auto !important; + margin-top: 0 !important; + margin-left: 0 !important; + opacity: 1 !important; + color: #555; + } + /* line 998, ../scss/default.scss */ + slides slide.far-past, slides slide.past, slides slide.next, slides slide.far-next, slides slide.far-past, slides slide.current { + opacity: 1 !important; + display: block !important; + } + /* line 1004, ../scss/default.scss */ + slides slide .build > * { + -webkit-transition: none; + -moz-transition: none; + -o-transition: none; + transition: none; + } + /* line 1009, ../scss/default.scss */ + slides slide .build .to-build, + slides slide .build .build-fade { + opacity: 1; + } + /* line 1014, ../scss/default.scss */ + slides slide .auto-fadein { + opacity: 1 !important; + } + /* line 1018, ../scss/default.scss */ + slides slide.backdrop { + display: none !important; + } + /* line 1022, ../scss/default.scss */ + slides slide table.rows { + border-right: 0; + } + /* line 1027, ../scss/default.scss */ + slides slide[hidden] { + display: none !important; + } + + /* line 1032, ../scss/default.scss */ + .slide-area { + display: none; + } + + /* line 1036, ../scss/default.scss */ + .reflect { + -webkit-box-reflect: none; + -moz-box-reflect: none; + -o-box-reflect: none; + -ms-box-reflect: none; + box-reflect: none; + } + + /* line 1044, ../scss/default.scss */ + pre, code { + font-family: monospace !important; + } +} diff --git a/slides/final/theme/css/io2013.css b/slides/final/theme/css/io2013.css new file mode 100644 index 0000000..364eccb --- /dev/null +++ b/slides/final/theme/css/io2013.css @@ -0,0 +1,55 @@ +/* line 5, ../scss/io2013.scss */ +* { + line-height: 1.3; +} + +/* line 9, ../scss/io2013.scss */ +h2 { + font-weight: bold; +} + +/* line 12, ../scss/io2013.scss */ +h2, h3 { + color: #515151; +} + +/* line 16, ../scss/io2013.scss */ +q, blockquote { + font-weight: bold; +} + +/* line 20, ../scss/io2013.scss */ +slides > slide { + color: #515151; +} +/* line 24, ../scss/io2013.scss */ +slides > slide.title-slide:after { + content: ''; + background: url(../../images/io2013/google-io-lockup-1.png) no-repeat 100% 50%; + -webkit-background-size: contain; + -moz-background-size: contain; + -o-background-size: contain; + background-size: contain; + position: absolute; + bottom: 80px; + right: 40px; + width: 100%; + height: 90px; +} +/* line 36, ../scss/io2013.scss */ +slides > slide.title-slide hgroup h1 { + font-weight: bold; + line-height: 1.1; +} +/* line 40, ../scss/io2013.scss */ +slides > slide.title-slide hgroup h2, slides > slide.title-slide hgroup p { + color: #515151; +} +/* line 43, ../scss/io2013.scss */ +slides > slide.title-slide hgroup h2 { + margin-top: 0.25em; +} +/* line 46, ../scss/io2013.scss */ +slides > slide.title-slide hgroup p { + margin-top: 3em; +} diff --git a/slides/final/theme/css/phone.css b/slides/final/theme/css/phone.css new file mode 100644 index 0000000..0809204 --- /dev/null +++ b/slides/final/theme/css/phone.css @@ -0,0 +1 @@ +slides>slide{-webkit-transition:none !important;-webkit-transition:none !important;-moz-transition:none !important;-o-transition:none !important;transition:none !important} diff --git a/slides/final/theme/scss/_base.scss b/slides/final/theme/scss/_base.scss new file mode 100644 index 0000000..50504db --- /dev/null +++ b/slides/final/theme/scss/_base.scss @@ -0,0 +1,139 @@ +@charset "UTF-8"; + +@import "compass/reset"; +@import "compass/css3/border-radius"; +@import "compass/css3/box"; +@import "compass/css3/box-shadow"; +@import "compass/css3/box-sizing"; +@import "compass/css3/images"; +@import "compass/css3/text-shadow"; +@import "compass/css3/background-size"; +@import "compass/css3/transform"; +@import "compass/css3/transition"; + +@import "variables"; + +@mixin font-smoothing($val: antialiased) { + -webkit-font-smoothing: $val; + -moz-font-smoothing: $val; + -ms-font-smoothing: $val; + -o-font-smoothing: $val; +} + +@mixin flexbox { + display: -webkit-box !important; + display: -moz-box !important; + display: -ms-box !important; + display: -o-box !important; + display: box !important; +} + +@mixin flex-center-center { + @include box-orient(vertical); + @include box-align(center); + @include box-pack(center); +} + +@mixin flex-left-center { + @include box-orient(vertical); + @include box-align(left); + @include box-pack(center); +} + +@mixin flex-right-center { + @include box-orient(vertical); + @include box-align(end); + @include box-pack(center); +} + +/** + * Base SlideDeck Styles + */ +html { + height: 100%; + overflow: hidden; +} + +body { + margin: 0; + padding: 0; + + opacity: 0; + + height: 100%; + min-height: 740px; + width: 100%; + + overflow: hidden; + + color: #fff; + @include font-smoothing(antialiased); + @include transition(opacity 800ms ease-in 100ms); // Add small delay to prevent jank. + + &.loaded { + opacity: 1 !important; + } +} + +input, button { + vertical-align: middle; +} + +slides > slide[hidden] { + display: none !important; +} + +slides { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + @include transform(translate3d(0, 0, 0)); + @include perspective(1000); + @include transform-style(preserve-3d); + @include transition(opacity 800ms ease-in 100ms); // Add small delay to prevent jank. +} + +slides > slide { + display: block; + position: absolute; + overflow: hidden; + left: 50%; + top: 50%; + @include box-sizing(border-box); +} + +/* Slide styles */ + + +/*article.fill iframe { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + + border: 0; + margin: 0; + + @include border-radius(10px); + + z-index: -1; +} + +slide.fill { + background-repeat: no-repeat; + @include background-size(cover); +} + +slide.fill img { + position: absolute; + left: 0; + top: 0; + min-width: 100%; + min-height: 100%; + + z-index: -1; +} +*/ diff --git a/slides/final/theme/scss/_variables.scss b/slides/final/theme/scss/_variables.scss new file mode 100644 index 0000000..d07f907 --- /dev/null +++ b/slides/final/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/slides/final/theme/scss/default.scss b/slides/final/theme/scss/default.scss new file mode 100644 index 0000000..b8d11b0 --- /dev/null +++ b/slides/final/theme/scss/default.scss @@ -0,0 +1,1047 @@ +@import "base"; +@import "compass/css3/columns"; +@import "compass/css3/user-interface"; + +@mixin highlight-color($color: $brand-yellow) { + -webkit-tap-highlight-color: $color; + -moz-tap-highlight-color: $color; + -ms-tap-highlight-color: $color; + -o-tap-highlight-color: $color; + tap-highlight-color: $color; +} + +@mixin backdrop { + @include background(linear-gradient(white, white 85%, $gray-1)); + background-color: white; +} + + +/** + * Theme Styles + */ +::selection { + color: white; + background-color: $brand-yellow; + @include text-shadow(none); +} + +::-webkit-scrollbar { + height: 16px; + overflow: visible; + width: 16px; +} +::-webkit-scrollbar-thumb { + background-color: rgba(0, 0, 0, .1); + background-clip: padding-box; + border: solid transparent; + min-height: 28px; + padding: 100px 0 0; + @include box-shadow(inset 1px 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.07)); + border-width: 1px 1px 1px 6px; +} +::-webkit-scrollbar-thumb:hover { + background-color: rgba(0, 0, 0, 0.5); +} +::-webkit-scrollbar-button { + height: 0; + width: 0; +} +::-webkit-scrollbar-track { + background-clip: padding-box; + border: solid transparent; + border-width: 0 0 0 4px; +} +::-webkit-scrollbar-corner { + background: transparent; +} + +body { + background: black; +} + +slides > slide { + display: none; + font-family: 'Open Sans', Arial, sans-serif; + font-size: 26px; + color: $gray-3; + //@include background(linear-gradient(white, white 85%, $gray-1)); + //background-color: white; + width: $slide-width; + height: $slide-height; + margin-left: -$slide-width / 2; + margin-top: -$slide-height / 2; + padding: $slide-top-bottom-padding $slide-left-right-padding; + + @include border-radius($slide-border-radius); + //@include box-shadow(5px 5px 20px $gray-4); + @include transition(all 0.6s ease-in-out); + + //$translateX: 1020px; + //$rotateY: 30deg; + //$rotateX: 45deg; + + &.far-past { + //display: block; + display: none; + //@include transform(translate(-$translateX * 2)); + //@include transform(translate3d(-$translateX * 2, 0, 0)); + } + + &.past { + display: block; + //@include transform(translate(-$translateX) rotateY($rotateY) rotateX($rotateX)); + //@include transform(translate3d(-$translateX, 0, 0) rotateY($rotateY) rotateX($rotateX)); + opacity: 0; + } + + &.current { + display: block; + //@include transform(translate(0)); + //@include transform(translate3d(0, 0, 0)); + opacity: 1; + + .auto-fadein { + opacity: 1; + } + + .gdbar { + @include background-size(100% 100%); + } + } + + &.next { + display: block; + //@include transform(translate($translateX) rotateY(-$rotateY) rotateX($rotateX)); + //@include transform(translate3d($translateX, 0, 0) rotateY(-$rotateY) rotateX($rotateX)); + opacity: 0; + pointer-events: none; + } + + &.far-next { + //display: block; + display: none; + //@include transform(translate($translateX * 2)); + //@include transform(translate3d($translateX * 2, 0, 0)); + } + + &.dark { + background: $gray-4 !important; + } + + &:not(.nobackground) { + //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); + + &:before { + font-size: 12pt; + 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 { + font-size: 12pt; + content: attr(data-slide-num) '/' attr(data-total-slides); + position: absolute; + bottom: $slide-top-bottom-padding / 2; + right: $slide-left-right-padding; + line-height: 1.9; + } + } + + &.title-slide { + &:after { + content: ''; + //background: url(../../images/io2012_logo.png) no-repeat 100% 50%; + //@include background-size(contain); + position: absolute; + bottom: $slide-top-bottom-padding; + right: $slide-top-bottom-padding; + width: 100%; + height: 60px; + } + } + + &.backdrop { + z-index: -10; + display: block !important; + @include backdrop; + + &:after, &:before { + display: none; // Prevent double set of slide nums and footer icons. + } + } + + > hgroup + article { + margin-top: $article-content-top-padding; + + &.flexbox { + &.vcenter, &.vleft, &.vright { + height: 80%; + } + } + + p { + margin-bottom: 1em; + } + } + + > article:only-child { + height: 100%; + + > iframe { + height: 98%; + } + } +} + +slides.layout-faux-widescreen > slide { + padding: $slide-top-bottom-padding 160px; +} + +slides.layout-widescreen, +slides.layout-faux-widescreen { + + $translateX: 1130px; + + > slide { + margin-left: -$slide-width-widescreen / 2; + width: $slide-width-widescreen; + } + + > slide.far-past { + display: block; + display: none; + @include transform(translate(-$translateX * 2)); + @include transform(translate3d(-$translateX * 2, 0, 0)); + } + + > slide.past { + display: block; + //@include transform(translate(-$translateX)); + //@include transform(translate3d(-$translateX, 0, 0)); + opacity: 0; + } + + > slide.current { + display: block; + //@include transform(translate(0)); + //@include transform(translate3d(0, 0, 0)); + opacity: 1; + } + + > slide.next { + display: block; + //@include transform(translate($translateX)); + //@include transform(translate3d($translateX, 0, 0)); + opacity: 0; + pointer-events: none; + } + + > slide.far-next { + display: block; + display: none; + @include transform(translate($translateX * 2)); + @include transform(translate3d($translateX * 2, 0, 0)); + } + + #prev-slide-area { + margin-left: -$slide-width-widescreen / 2 - $slide-tap-area-width; + } + + #next-slide-area { + margin-left: $slide-width-widescreen / 2; + } +} + +b { + font-weight: 600; +} + +a { + color: $brand-blue-secondary2; + text-decoration: none; + border-bottom: 1px solid rgba(42, 124, 223, 0.5); + + &:hover { + color: black !important; + } +} + +h1, h2, h3 { + font-weight: 600; +} + +h2 { + font-size: 45px; + line-height: 45px; + letter-spacing: -2px; + color: $gray-4; +} + +h3 { + font-size: 30px; + letter-spacing: -1px; + line-height: 2; + font-weight: inherit; + color: $gray-3; +} + +ul { + margin-left: 1.2em; + margin-bottom: 1em; + position: relative; + + li { + margin-bottom: 0.5em; + + ul { + margin-left: 2em; + margin-bottom: 0; + + li:before { + content: '-'; + font-weight: 600; + } + } + } + + > li:before { + content: '\00B7'; + margin-left: -1em; + position: absolute; + font-weight: 600; + } + + ul { + margin-top: .5em; + } +} + +// Code highlighting only effects the current slide. +.highlight-code slide.current { + pre > * { + opacity: 0.25; + @include transition(opacity 0.5s ease-in); + } + b { + opacity: 1; + } +} + +pre { + font-family: 'Source Code Pro', 'Courier New', monospace; + font-size: 20px; + line-height: 28px; + padding: 10px 0 10px $slide-left-right-padding; + letter-spacing: -1px; + margin-bottom: 20px; + width: 106%; + background-color: $gray-1; + left: -$slide-left-right-padding; + position: relative; + @include box-sizing(border-box); + /*overflow: hidden;*/ + + &[data-lang]:after { + content: attr(data-lang); + background-color: $gray-2; + right: 0; + top: 0; + position: absolute; + font-size: 16pt; + color: white; + padding: 2px 25px; + text-transform: uppercase; + } +} + +pre[data-lang="go"] { + color: #333; +} + +code { + font-size: 95%; + font-family: 'Source Code Pro', 'Courier New', monospace; + color: black; +} + +iframe { + width: 100%; + height: $slide-height - ($slide-top-bottom-padding * 2) - ($article-content-top-padding * 2); + background: white; + border: 1px solid $gray-1; + @include box-sizing(border-box); +} + +dt { + font-weight: bold; +} + +button { + display: inline-block; + @include background(linear-gradient(#F9F9F9 40%, #E3E3E3 70%)); + border: 1px solid $gray-2; + @include border-radius(3px); + padding: 5px 8px; + outline: none; + white-space: nowrap; + @include user-select(none); + cursor: pointer; + @include text-shadow(1px 1px #fff); + font-size: 10pt; +} + +button:not(:disabled):hover { + border-color: $gray-4; +} + +button:not(:disabled):active { + @include background(linear-gradient(#E3E3E3 40%, #F9F9F9 70%)); +} + +:disabled { + color: $gray-2; +} + +.blue { + color: $brand-blue; +} +.blue2 { + color: $brand-blue-secondary; +} +.blue3 { + color: $brand-blue-secondary2; +} +.yellow { + color: $brand-yellow; +} +.yellow2 { + color: $brand-yellow-secondary; +} +.yellow3 { + color: $brand-yellow-secondary2; +} +.green { + color: $brand-green; +} +.green2 { + color: $brand-green-secondary; +} +.green3 { + color: $brand-green-secondary2; +} +.red { + color: $brand-red; +} +.red2 { + color: $brand-red-secondary; +} +.red3 { + color: $brand-red-secondary2; +} +.gray { + color: $gray-1; +} +.gray2 { + color: $gray-2; +} +.gray3 { + color: $gray-3; +} +.gray4 { + color: $gray-4; +} + +.white { + color: white !important; +} +.black { + color: black !important; +} + +.columns-2 { + @include column-count(2); +} + +table { + width: 100%; + border-collapse: -moz-initial; + border-collapse: initial; + border-spacing: 2px; + border-bottom: 1px solid $gray-3; + + tr > td:first-child, th { + font-weight: 600; + color: $gray-4; + } + + tr:nth-child(odd) { + background-color: $gray-1; + } + + th { + color: white; + font-size: 18px; + @include background(linear-gradient(top, $brand-blue 40%, $brand-blue-secondary2 80%) no-repeat); + } + + td, th { + font-size: 18px; + padding: 1em 0.5em; + } + + td.highlight { + color: $gray-4; + @include background(linear-gradient(top, $brand-yellow 40%, $brand-yellow-secondary2 80%) no-repeat); + } + + &.rows { + border-bottom: none; + border-right: 1px solid $gray-3; + } +} + +q { + font-size: 45px; + line-height: 72px; + + &:before { + content: '“'; + position: absolute; + margin-left: -0.5em; + } + &:after { + content: '”'; + position: absolute; + margin-left: 0.1em; + } +} + +slide.fill { + background-repeat: no-repeat; + @include border-radius($slide-border-radius); + @include background-size(cover); +} + +/* Size variants */ + +article.smaller { + p, ul { + font-size: 20px; + line-height: 24px; + letter-spacing: 0; + } + table { + td, th { + font-size: 14px; + } + } + pre { + font-size: 15px; + line-height: 20px; + letter-spacing: 0; + } + q { + font-size: 40px; + line-height: 48px; + + &:before, &:after { + font-size: 60px; + } + } +} + +/* Builds */ + +.build { + > * { + @include transition(opacity 0.5s ease-in-out 0.2s); + } + + .to-build { + opacity: 0; + } + + .build-fade { + opacity: 0.3; + + &:hover { + opacity: 1.0; + } + } +} + +.popup .next .build { + .to-build { + opacity: 1; + } + + .build-fade { + opacity: 1; + } +} + +/* Pretty print */ + +.prettyprint .str, /* string content */ +.prettyprint .atv { /* a markup attribute value */ + color: $brand-green-secondary2; //rgb(0, 138, 53); +} +.prettyprint .kwd, /* a keyword */ +.prettyprint .tag { /* a markup tag name */ + color: rgb(0, 102, 204); +} +.prettyprint .com { /* a comment */ + color: $gray-3; //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: $gray-4; //rgb(127, 127, 127); +} +.prettyprint .typ, /* a type name */ +.prettyprint .atn, /* a markup attribute name */ +.prettyprint .dec, +.prettyprint .var { /* a declaration; a variable name */ + color: $brand-red-secondary2; //rgb(127, 0, 127); +} +.prettyprint .pln { + color: $gray-4; +} + +.note { + position: absolute; + z-index: 100; + width: 100%; + height: 100%; + top: 0; + left: 0; + padding: 1em; + background: rgba(0, 0, 0, 0.3); + opacity: 0; + pointer-events: none; + @include flexbox; + @include flex-center-center; + @include border-radius($slide-border-radius); + + @include box-sizing(border-box); + @include transform(translateY($slide-height / 2));@include transition(all 0.4s ease-in-out); + + > section { + background: #fff; + @include border-radius($slide-border-radius); + @include box-shadow(0 0 10px $gray-3); + width: 60%; + padding: 2em; + } +} + +// Speaker notes only show the current slide. +.with-notes { + + &.popup { + + slides.layout-widescreen, + slides.layout-faux-widescreen { + slide { + &.next { + @include transform(translate3d($slide-width-widescreen / 2 + 140, 80px, 0) scale(0.35)); + } + .note { + @include transform(translate3d(300px, $slide-height + 100, 0) scale(1.5)); + } + } + } + + slide { + overflow: visible; + background: white; + @include transition(none); // No slide transition goodies when in presenter mode. + pointer-events: none; + @include transform-origin(0, 0); // For speaker note transition. + + &:not(.backdrop) { + @include transform(scale(0.6) translate3d(0.5em, 0.5em, 0)); + @include box-shadow(0 0 10px $gray-3); + } + + &.backdrop { + //@include background(linear-gradient($gray-1, white 30%, white 60%, $gray-1)); + @include background-image(radial-gradient(50% 50%, #b1dfff 0%, + $brand-blue 600px)); + } + + &.next { + @include transform(translate3d($slide-width / 2 + 120, 80px, 0) scale(0.35)); + opacity: 1 !important; + + .note { + display: none !important; // Prevents seeing notes if we go to previous slide. + } + } + } + + .note { + width: 109%; + height: $slide-height / 2 - 90; + background: $gray-1; + padding: 0; + + @include box-shadow(0 0 10px $gray-3); + + @include transform(translate3d(250px, $slide-height + 100, 0) scale(1.5)); + @include transition(opacity 400ms ease-in-out); + + > section { + background: #fff; + @include border-radius($slide-border-radius); + height: 100%; + width: 100%; + @include box-sizing(border-box); + @include box-shadow(none); + overflow: auto; + padding: 1em; + } + } + } + + .note { + opacity: 1; + @include transform(translateY(0)); + pointer-events: auto; // Allow people to do things like open links embedded in the speaker notes. + } +} + +.source { + font-size: 14px; + color: $gray-2; + position: absolute; + bottom: $slide-top-bottom-padding + 30px; + left: $slide-left-right-padding; +} + +.centered { + text-align: center; +} + +.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%); +} + +.flexbox { + @include flexbox; +} + +.flexbox.vcenter { + @include flex-center-center; + height: 100%; + width: 100%; +} + +.flexbox.vleft { + @include flex-left-center; + height: 100%; + width: 100%; +} + +.flexbox.vright { + @include flex-right-center; + height: 100%; + width: 100%; +} + +.auto-fadein { + @include transition(opacity 0.6s ease-in 1s); + opacity: 0; +} + +/* Clickable/tappable areas */ +.slide-area { + z-index: 1000; + + position: absolute; + left: 0; + top: 0; + width: $slide-tap-area-width; + height: $slide-height; + + left: 50%; + top: 50%; + + cursor: pointer; + margin-top: -$slide-height / 2; + + //@include highlight-color(rgba(51, 51, 51, 0.5)); +} +#prev-slide-area { + margin-left: -$slide-width-widescreen / 2; + //@include border-radius(10px 0 0 10px); + //@include box-shadow(-5px 0 10px #222 inset); +} +#next-slide-area { + margin-left: $slide-width / 2; + //@include border-radius(0 10px 10px 0); + //@include box-shadow(5px 0 10px #222 inset); +} + +/* ===== SLIDE CONTENT ===== */ +.logoslide { + img { + width: 383px; + height: 92px; + } +} + +.segue { + padding: $slide-left-right-padding $slide-left-right-padding * 2; + + h2 { + color: $gray-1; + font-size: 60px; + } + h3 { + color: $gray-1; + line-height: 2.8; + } + hgroup { + position: absolute; + bottom: 225px; + } +} + +.thank-you-slide { + background: $brand-blue !important; + color: white; + + h2 { + font-size: 60px; + color: inherit; + } + + article > p { + margin-top: 2em; + font-size: 20pt; + } + + > p { + position: absolute; + bottom: $slide-top-bottom-padding * 2; + font-size: 24pt; + line-height: 1.3; + } +} + +aside.gdbar { + height: 97px; + width: 215px; + position: absolute; + left: -1px; + top: 125px; + @include border-radius(0 10px 10px 0); + @include background(linear-gradient(left, $gray-1, $gray-1) no-repeat); + @include background-size(0% 100%); + @include transition(all 0.5s ease-out 0.5s); /* Better to transition only on background-size, but not sure how to do that with the mixin. */ + + &.right { + right: 0; + left: -moz-initial; + left: initial; + top: ($slide-height / 2) - 96; /* 96 is height of gray icon bar */ + @include transform(rotateZ(180deg)); + + img { + @include transform(rotateZ(180deg)); + } + } + + &.bottom { + top: -moz-initial; + top: initial; + bottom: $slide-left-right-padding; + } + + img { + width: 85px; + height: 85px; + position: absolute; + right: 0; + margin: 8px 15px; + } +} + +.title-slide { + + hgroup { + bottom: 100px; + + 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; + } + } +} + +.quote { + color: $gray-1; + + .author { + font-size: 24px; + position: absolute; + bottom: 80px; + line-height: 1.4; + } +} + +[data-config-contact] { + a { + color: rgb(255, 255, 255); + border-bottom: none; + } + span { + width: 115px; + display: inline-block; + } +} + +.overview { + + &.popup { + .note { + display: none !important; + } + } + + slides { + slide