From 07fa54cb316721ea1522f801063dd2109530a8bf Mon Sep 17 00:00:00 2001 From: Eric Bidelman Date: Mon, 29 Apr 2013 14:53:53 -0700 Subject: io2013 style updates --- images/io2013/google-io-lockup-1.png | Bin 0 -> 15894 bytes images/io2013/google-io-lockup-2.png | Bin 0 -> 11257 bytes slide_config.js | 2 +- template.html | 4 +- theme/css/default.css | 356 +++++++++++++++++------------------ theme/css/io2013.css | 55 ++++++ theme/scss/_base.scss | 2 + theme/scss/_variables.scss | 34 ++++ theme/scss/default.scss | 36 ---- theme/scss/io2013.scss | 51 +++++ 10 files changed, 323 insertions(+), 217 deletions(-) create mode 100644 images/io2013/google-io-lockup-1.png create mode 100644 images/io2013/google-io-lockup-2.png create mode 100644 theme/css/io2013.css create mode 100644 theme/scss/_variables.scss create mode 100644 theme/scss/io2013.scss diff --git a/images/io2013/google-io-lockup-1.png b/images/io2013/google-io-lockup-1.png new file mode 100644 index 0000000..38b9e92 Binary files /dev/null and b/images/io2013/google-io-lockup-1.png differ diff --git a/images/io2013/google-io-lockup-2.png b/images/io2013/google-io-lockup-2.png new file mode 100644 index 0000000..d076cc1 Binary files /dev/null and b/images/io2013/google-io-lockup-2.png differ diff --git a/slide_config.js b/slide_config.js index 8d370fd..0d9b7c6 100644 --- a/slide_config.js +++ b/slide_config.js @@ -23,7 +23,7 @@ var SLIDE_CONFIG = { // Author information presenters: [{ name: 'Firstname Lastname', - company: 'Job Title, Google', + company: 'Job Title
Google', gplus: 'http://plus.google.com/1234567890', twitter: '@yourhandle', www: 'http://www.you.com', diff --git a/template.html b/template.html index 93eb2a0..b4e7d33 100644 --- a/template.html +++ b/template.html @@ -365,13 +365,13 @@ function helloWorld(world) {

Slide with Iframe

- +
- +
diff --git a/theme/css/default.css b/theme/css/default.css index e7668f6..ce6fda5 100644 --- a/theme/css/default.css +++ b/theme/css/default.css @@ -67,13 +67,13 @@ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, /** * Base SlideDeck Styles */ -/* line 50, ../scss/_base.scss */ +/* line 52, ../scss/_base.scss */ html { height: 100%; overflow: hidden; } -/* line 55, ../scss/_base.scss */ +/* line 57, ../scss/_base.scss */ body { margin: 0; padding: 0; @@ -93,22 +93,22 @@ body { -o-transition: opacity 800ms ease-in 100ms; transition: opacity 800ms ease-in 100ms; } -/* line 71, ../scss/_base.scss */ +/* line 73, ../scss/_base.scss */ body.loaded { opacity: 1 !important; } -/* line 76, ../scss/_base.scss */ +/* line 78, ../scss/_base.scss */ input, button { vertical-align: middle; } -/* line 80, ../scss/_base.scss */ +/* line 82, ../scss/_base.scss */ slides > slide[hidden] { display: none !important; } -/* line 84, ../scss/_base.scss */ +/* line 86, ../scss/_base.scss */ slides { width: 100%; height: 100%; @@ -137,7 +137,7 @@ slides { transition: opacity 800ms ease-in 100ms; } -/* line 96, ../scss/_base.scss */ +/* line 98, ../scss/_base.scss */ slides > slide { display: block; position: absolute; @@ -183,21 +183,21 @@ slide.fill img { /** * Theme Styles */ -/* line 58, ../scss/default.scss */ +/* line 22, ../scss/default.scss */ ::selection { color: white; background-color: #ffd14d; text-shadow: none; } -/* line 64, ../scss/default.scss */ +/* line 28, ../scss/default.scss */ ::-webkit-scrollbar { height: 16px; overflow: visible; width: 16px; } -/* line 69, ../scss/default.scss */ +/* line 33, ../scss/default.scss */ ::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.1); background-clip: padding-box; @@ -210,35 +210,35 @@ slide.fill img { border-width: 1px 1px 1px 6px; } -/* line 78, ../scss/default.scss */ +/* line 42, ../scss/default.scss */ ::-webkit-scrollbar-thumb:hover { background-color: rgba(0, 0, 0, 0.5); } -/* line 81, ../scss/default.scss */ +/* line 45, ../scss/default.scss */ ::-webkit-scrollbar-button { height: 0; width: 0; } -/* line 85, ../scss/default.scss */ +/* line 49, ../scss/default.scss */ ::-webkit-scrollbar-track { background-clip: padding-box; border: solid transparent; border-width: 0 0 0 4px; } -/* line 90, ../scss/default.scss */ +/* line 54, ../scss/default.scss */ ::-webkit-scrollbar-corner { background: transparent; } -/* line 94, ../scss/default.scss */ +/* line 58, ../scss/default.scss */ body { background: black; } -/* line 98, ../scss/default.scss */ +/* line 62, ../scss/default.scss */ slides > slide { display: none; font-family: 'Open Sans', Arial, sans-serif; @@ -259,49 +259,49 @@ slides > slide { -o-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; } -/* line 119, ../scss/default.scss */ +/* line 83, ../scss/default.scss */ slides > slide.far-past { display: none; } -/* line 126, ../scss/default.scss */ +/* line 90, ../scss/default.scss */ slides > slide.past { display: block; opacity: 0; } -/* line 133, ../scss/default.scss */ +/* line 97, ../scss/default.scss */ slides > slide.current { display: block; opacity: 1; } -/* line 139, ../scss/default.scss */ +/* line 103, ../scss/default.scss */ slides > slide.current .auto-fadein { opacity: 1; } -/* line 143, ../scss/default.scss */ +/* 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 148, ../scss/default.scss */ +/* line 112, ../scss/default.scss */ slides > slide.next { display: block; opacity: 0; pointer-events: none; } -/* line 156, ../scss/default.scss */ +/* line 120, ../scss/default.scss */ slides > slide.far-next { display: none; } -/* line 163, ../scss/default.scss */ +/* line 127, ../scss/default.scss */ slides > slide.dark { background: #515151 !important; } -/* line 171, ../scss/default.scss */ +/* line 135, ../scss/default.scss */ slides > slide:not(.nobackground):before { font-size: 12pt; - content: "#yourhashtag"; + content: ""; position: absolute; bottom: 20px; left: 60px; @@ -314,7 +314,7 @@ slides > slide:not(.nobackground):before { height: 30px; line-height: 1.9; } -/* line 183, ../scss/default.scss */ +/* line 147, ../scss/default.scss */ slides > slide:not(.nobackground):after { font-size: 12pt; content: attr(data-slide-num) "/" attr(data-total-slides); @@ -323,7 +323,7 @@ slides > slide:not(.nobackground):after { right: 60px; line-height: 1.9; } -/* line 194, ../scss/default.scss */ +/* line 158, ../scss/default.scss */ slides > slide.title-slide:after { content: ''; position: absolute; @@ -332,7 +332,7 @@ slides > slide.title-slide:after { width: 100%; height: 60px; } -/* line 206, ../scss/default.scss */ +/* line 170, ../scss/default.scss */ slides > slide.backdrop { z-index: -10; display: block !important; @@ -343,43 +343,43 @@ slides > slide.backdrop { background: linear-gradient(#ffffff, #ffffff 85%, #e6e6e6); background-color: white; } -/* line 211, ../scss/default.scss */ +/* line 175, ../scss/default.scss */ slides > slide.backdrop:after, slides > slide.backdrop:before { display: none; } -/* line 216, ../scss/default.scss */ +/* line 180, ../scss/default.scss */ slides > slide > hgroup + article { margin-top: 45px; } -/* line 220, ../scss/default.scss */ +/* 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 225, ../scss/default.scss */ +/* line 189, ../scss/default.scss */ slides > slide > hgroup + article p { margin-bottom: 1em; } -/* line 230, ../scss/default.scss */ +/* line 194, ../scss/default.scss */ slides > slide > article:only-child { height: 100%; } -/* line 233, ../scss/default.scss */ +/* line 197, ../scss/default.scss */ slides > slide > article:only-child > iframe { height: 98%; } -/* line 239, ../scss/default.scss */ +/* line 203, ../scss/default.scss */ slides.layout-faux-widescreen > slide { padding: 40px 160px; } -/* line 248, ../scss/default.scss */ +/* line 212, ../scss/default.scss */ slides.layout-widescreen > slide, slides.layout-faux-widescreen > slide { margin-left: -550px; width: 1100px; } -/* line 253, ../scss/default.scss */ +/* line 217, ../scss/default.scss */ slides.layout-widescreen > slide.far-past, slides.layout-faux-widescreen > slide.far-past { display: block; @@ -395,26 +395,26 @@ slides.layout-faux-widescreen > slide.far-past { -o-transform: translate3d(-2260px, 0, 0); transform: translate3d(-2260px, 0, 0); } -/* line 260, ../scss/default.scss */ +/* line 224, ../scss/default.scss */ slides.layout-widescreen > slide.past, slides.layout-faux-widescreen > slide.past { display: block; opacity: 0; } -/* line 267, ../scss/default.scss */ +/* line 231, ../scss/default.scss */ slides.layout-widescreen > slide.current, slides.layout-faux-widescreen > slide.current { display: block; opacity: 1; } -/* line 274, ../scss/default.scss */ +/* line 238, ../scss/default.scss */ slides.layout-widescreen > slide.next, slides.layout-faux-widescreen > slide.next { display: block; opacity: 0; pointer-events: none; } -/* line 282, ../scss/default.scss */ +/* line 246, ../scss/default.scss */ slides.layout-widescreen > slide.far-next, slides.layout-faux-widescreen > slide.far-next { display: block; @@ -430,39 +430,39 @@ slides.layout-faux-widescreen > slide.far-next { -o-transform: translate3d(2260px, 0, 0); transform: translate3d(2260px, 0, 0); } -/* line 289, ../scss/default.scss */ +/* line 253, ../scss/default.scss */ slides.layout-widescreen #prev-slide-area, slides.layout-faux-widescreen #prev-slide-area { margin-left: -650px; } -/* line 293, ../scss/default.scss */ +/* line 257, ../scss/default.scss */ slides.layout-widescreen #next-slide-area, slides.layout-faux-widescreen #next-slide-area { margin-left: 550px; } -/* line 298, ../scss/default.scss */ +/* line 262, ../scss/default.scss */ b { font-weight: 600; } -/* line 302, ../scss/default.scss */ +/* line 266, ../scss/default.scss */ a { color: #2a7cdf; text-decoration: none; border-bottom: 1px solid rgba(42, 124, 223, 0.5); } -/* line 307, ../scss/default.scss */ +/* line 271, ../scss/default.scss */ a:hover { color: black !important; } -/* line 312, ../scss/default.scss */ +/* line 276, ../scss/default.scss */ h1, h2, h3 { font-weight: 600; } -/* line 316, ../scss/default.scss */ +/* line 280, ../scss/default.scss */ h2 { font-size: 45px; line-height: 45px; @@ -470,7 +470,7 @@ h2 { color: #515151; } -/* line 323, ../scss/default.scss */ +/* line 287, ../scss/default.scss */ h3 { font-size: 30px; letter-spacing: -1px; @@ -479,39 +479,39 @@ h3 { color: #797979; } -/* line 331, ../scss/default.scss */ +/* line 295, ../scss/default.scss */ ul { margin-left: 1.2em; margin-bottom: 1em; position: relative; } -/* line 336, ../scss/default.scss */ +/* line 300, ../scss/default.scss */ ul li { margin-bottom: 0.5em; } -/* line 339, ../scss/default.scss */ +/* line 303, ../scss/default.scss */ ul li ul { margin-left: 2em; margin-bottom: 0; } -/* line 343, ../scss/default.scss */ +/* line 307, ../scss/default.scss */ ul li ul li:before { content: '-'; font-weight: 600; } -/* line 350, ../scss/default.scss */ +/* line 314, ../scss/default.scss */ ul > li:before { content: '\00B7'; margin-left: -1em; position: absolute; font-weight: 600; } -/* line 357, ../scss/default.scss */ +/* line 321, ../scss/default.scss */ ul ul { margin-top: .5em; } -/* line 364, ../scss/default.scss */ +/* line 328, ../scss/default.scss */ .highlight-code slide.current pre > * { opacity: 0.25; -webkit-transition: opacity 0.5s ease-in; @@ -519,12 +519,12 @@ ul ul { -o-transition: opacity 0.5s ease-in; transition: opacity 0.5s ease-in; } -/* line 368, ../scss/default.scss */ +/* line 332, ../scss/default.scss */ .highlight-code slide.current b { opacity: 1; } -/* line 373, ../scss/default.scss */ +/* line 337, ../scss/default.scss */ pre { font-family: 'Source Code Pro', 'Courier New', monospace; font-size: 20px; @@ -541,7 +541,7 @@ pre { box-sizing: border-box; /*overflow: hidden;*/ } -/* line 387, ../scss/default.scss */ +/* line 351, ../scss/default.scss */ pre[data-lang]:after { content: attr(data-lang); background-color: darkgrey; @@ -554,19 +554,19 @@ pre[data-lang]:after { text-transform: uppercase; } -/* line 400, ../scss/default.scss */ +/* line 364, ../scss/default.scss */ pre[data-lang="go"] { color: #333; } -/* line 404, ../scss/default.scss */ +/* line 368, ../scss/default.scss */ code { font-size: 95%; font-family: 'Source Code Pro', 'Courier New', monospace; color: black; } -/* line 410, ../scss/default.scss */ +/* line 374, ../scss/default.scss */ iframe { width: 100%; height: 530px; @@ -577,12 +577,12 @@ iframe { box-sizing: border-box; } -/* line 418, ../scss/default.scss */ +/* line 382, ../scss/default.scss */ dt { font-weight: bold; } -/* line 422, ../scss/default.scss */ +/* 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)); @@ -607,12 +607,12 @@ button { font-size: 10pt; } -/* line 436, ../scss/default.scss */ +/* line 400, ../scss/default.scss */ button:not(:disabled):hover { border-color: #515151; } -/* line 440, ../scss/default.scss */ +/* 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%); @@ -621,102 +621,102 @@ button:not(:disabled):active { background: linear-gradient(#e3e3e3 40%, #f9f9f9 70%); } -/* line 444, ../scss/default.scss */ +/* line 408, ../scss/default.scss */ :disabled { color: darkgrey; } -/* line 448, ../scss/default.scss */ +/* line 412, ../scss/default.scss */ .blue { color: #4387fd; } -/* line 451, ../scss/default.scss */ +/* line 415, ../scss/default.scss */ .blue2 { color: #3c8ef3; } -/* line 454, ../scss/default.scss */ +/* line 418, ../scss/default.scss */ .blue3 { color: #2a7cdf; } -/* line 457, ../scss/default.scss */ +/* line 421, ../scss/default.scss */ .yellow { color: #ffd14d; } -/* line 460, ../scss/default.scss */ +/* line 424, ../scss/default.scss */ .yellow2 { color: #f9cc46; } -/* line 463, ../scss/default.scss */ +/* line 427, ../scss/default.scss */ .yellow3 { color: #f6c000; } -/* line 466, ../scss/default.scss */ +/* line 430, ../scss/default.scss */ .green { color: #0da861; } -/* line 469, ../scss/default.scss */ +/* line 433, ../scss/default.scss */ .green2 { color: #00a86d; } -/* line 472, ../scss/default.scss */ +/* line 436, ../scss/default.scss */ .green3 { color: #009f5d; } -/* line 475, ../scss/default.scss */ +/* line 439, ../scss/default.scss */ .red { color: #f44a3f; } -/* line 478, ../scss/default.scss */ +/* line 442, ../scss/default.scss */ .red2 { color: #e0543e; } -/* line 481, ../scss/default.scss */ +/* line 445, ../scss/default.scss */ .red3 { color: #d94d3a; } -/* line 484, ../scss/default.scss */ +/* line 448, ../scss/default.scss */ .gray { color: #e6e6e6; } -/* line 487, ../scss/default.scss */ +/* line 451, ../scss/default.scss */ .gray2 { color: darkgrey; } -/* line 490, ../scss/default.scss */ +/* line 454, ../scss/default.scss */ .gray3 { color: #797979; } -/* line 493, ../scss/default.scss */ +/* line 457, ../scss/default.scss */ .gray4 { color: #515151; } -/* line 497, ../scss/default.scss */ +/* line 461, ../scss/default.scss */ .white { color: white !important; } -/* line 500, ../scss/default.scss */ +/* line 464, ../scss/default.scss */ .black { color: black !important; } -/* line 504, ../scss/default.scss */ +/* line 468, ../scss/default.scss */ .columns-2 { -webkit-column-count: 2; -moz-column-count: 2; @@ -725,7 +725,7 @@ button:not(:disabled):active { column-count: 2; } -/* line 508, ../scss/default.scss */ +/* line 472, ../scss/default.scss */ table { width: 100%; border-collapse: -moz-initial; @@ -733,16 +733,16 @@ table { border-spacing: 2px; border-bottom: 1px solid #797979; } -/* line 515, ../scss/default.scss */ +/* line 479, ../scss/default.scss */ table tr > td:first-child, table th { font-weight: 600; color: #515151; } -/* line 520, ../scss/default.scss */ +/* line 484, ../scss/default.scss */ table tr:nth-child(odd) { background-color: #e6e6e6; } -/* line 524, ../scss/default.scss */ +/* line 488, ../scss/default.scss */ table th { color: white; font-size: 18px; @@ -752,12 +752,12 @@ table th { background: -o-linear-gradient(top, #4387fd 40%, #2a7cdf 80%) no-repeat; background: linear-gradient(top, #4387fd 40%, #2a7cdf 80%) no-repeat; } -/* line 530, ../scss/default.scss */ +/* line 494, ../scss/default.scss */ table td, table th { font-size: 18px; padding: 1em 0.5em; } -/* line 535, ../scss/default.scss */ +/* 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; @@ -766,31 +766,31 @@ table td.highlight { background: -o-linear-gradient(top, #ffd14d 40%, #f6c000 80%) no-repeat; background: linear-gradient(top, #ffd14d 40%, #f6c000 80%) no-repeat; } -/* line 540, ../scss/default.scss */ +/* line 504, ../scss/default.scss */ table.rows { border-bottom: none; border-right: 1px solid #797979; } -/* line 546, ../scss/default.scss */ +/* line 510, ../scss/default.scss */ q { font-size: 45px; line-height: 72px; } -/* line 550, ../scss/default.scss */ +/* line 514, ../scss/default.scss */ q:before { content: '“'; position: absolute; margin-left: -0.5em; } -/* line 555, ../scss/default.scss */ +/* line 519, ../scss/default.scss */ q:after { content: '”'; position: absolute; margin-left: 0.1em; } -/* line 562, ../scss/default.scss */ +/* line 526, ../scss/default.scss */ slide.fill { background-repeat: no-repeat; -webkit-border-radius: 5px; @@ -805,34 +805,34 @@ slide.fill { } /* Size variants */ -/* line 571, ../scss/default.scss */ +/* line 535, ../scss/default.scss */ article.smaller p, article.smaller ul { font-size: 20px; line-height: 24px; letter-spacing: 0; } -/* line 577, ../scss/default.scss */ +/* line 541, ../scss/default.scss */ article.smaller table td, article.smaller table th { font-size: 14px; } -/* line 581, ../scss/default.scss */ +/* line 545, ../scss/default.scss */ article.smaller pre { font-size: 15px; line-height: 20px; letter-spacing: 0; } -/* line 586, ../scss/default.scss */ +/* line 550, ../scss/default.scss */ article.smaller q { font-size: 40px; line-height: 48px; } -/* line 590, ../scss/default.scss */ +/* line 554, ../scss/default.scss */ article.smaller q:before, article.smaller q:after { font-size: 60px; } /* Builds */ -/* line 599, ../scss/default.scss */ +/* line 563, ../scss/default.scss */ .build > * { -webkit-transition: opacity 0.5s ease-in-out; -webkit-transition-delay: 0.2s; @@ -840,64 +840,64 @@ article.smaller q:before, article.smaller q:after { -o-transition: opacity 0.5s ease-in-out 0.2s; transition: opacity 0.5s ease-in-out 0.2s; } -/* line 603, ../scss/default.scss */ +/* line 567, ../scss/default.scss */ .build .to-build { opacity: 0; } -/* line 607, ../scss/default.scss */ +/* line 571, ../scss/default.scss */ .build .build-fade { opacity: 0.3; } -/* line 610, ../scss/default.scss */ +/* line 574, ../scss/default.scss */ .build .build-fade:hover { opacity: 1.0; } -/* line 617, ../scss/default.scss */ +/* line 581, ../scss/default.scss */ .popup .next .build .to-build { opacity: 1; } -/* line 621, ../scss/default.scss */ +/* line 585, ../scss/default.scss */ .popup .next .build .build-fade { opacity: 1; } /* Pretty print */ -/* line 629, ../scss/default.scss */ +/* line 593, ../scss/default.scss */ .prettyprint .str, .prettyprint .atv { /* a markup attribute value */ color: #009f5d; } -/* line 633, ../scss/default.scss */ +/* line 597, ../scss/default.scss */ .prettyprint .kwd, .prettyprint .tag { /* a markup tag name */ color: #0066cc; } -/* line 636, ../scss/default.scss */ +/* line 600, ../scss/default.scss */ .prettyprint .com { /* a comment */ color: #797979; font-style: italic; } -/* line 640, ../scss/default.scss */ +/* line 604, ../scss/default.scss */ .prettyprint .lit { /* a literal value */ color: #7f0000; } -/* line 645, ../scss/default.scss */ +/* line 609, ../scss/default.scss */ .prettyprint .pun, .prettyprint .opn, .prettyprint .clo { color: #515151; } -/* line 651, ../scss/default.scss */ +/* line 615, ../scss/default.scss */ .prettyprint .typ, .prettyprint .atn, .prettyprint .dec, @@ -906,12 +906,12 @@ article.smaller q:before, article.smaller q:after { color: #d94d3a; } -/* line 654, ../scss/default.scss */ +/* line 618, ../scss/default.scss */ .prettyprint .pln { color: #515151; } -/* line 658, ../scss/default.scss */ +/* line 622, ../scss/default.scss */ .note { position: absolute; z-index: 100; @@ -958,7 +958,7 @@ article.smaller q:before, article.smaller q:after { -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } -/* line 676, ../scss/default.scss */ +/* line 640, ../scss/default.scss */ .note > section { background: #fff; -webkit-border-radius: 5px; @@ -973,7 +973,7 @@ article.smaller q:before, article.smaller q:after { padding: 2em; } -/* line 693, ../scss/default.scss */ +/* 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); @@ -982,7 +982,7 @@ article.smaller q:before, article.smaller q:after { -o-transform: translate3d(690px, 80px, 0) scale(0.35); transform: translate3d(690px, 80px, 0) scale(0.35); } -/* line 696, ../scss/default.scss */ +/* 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); @@ -991,7 +991,7 @@ article.smaller q:before, article.smaller q:after { -o-transform: translate3d(300px, 800px, 0) scale(1.5); transform: translate3d(300px, 800px, 0) scale(1.5); } -/* line 702, ../scss/default.scss */ +/* line 666, ../scss/default.scss */ .with-notes.popup slide { overflow: visible; background: white; @@ -1006,7 +1006,7 @@ article.smaller q:before, article.smaller q:after { -o-transform-origin: 0 0; transform-origin: 0 0; } -/* line 709, ../scss/default.scss */ +/* 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); @@ -1017,7 +1017,7 @@ article.smaller q:before, article.smaller q:after { -moz-box-shadow: 0 0 10px #797979; box-shadow: 0 0 10px #797979; } -/* line 714, ../scss/default.scss */ +/* 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); @@ -1025,7 +1025,7 @@ article.smaller q:before, article.smaller q:after { background-image: -o-radial-gradient(50% 50%, #b1dfff 0%, #4387fd 600px); background-image: radial-gradient(50% 50%, #b1dfff 0%, #4387fd 600px); } -/* line 720, ../scss/default.scss */ +/* 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); @@ -1034,11 +1034,11 @@ article.smaller q:before, article.smaller q:after { transform: translate3d(570px, 80px, 0) scale(0.35); opacity: 1 !important; } -/* line 724, ../scss/default.scss */ +/* line 688, ../scss/default.scss */ .with-notes.popup slide.next .note { display: none !important; } -/* line 730, ../scss/default.scss */ +/* line 694, ../scss/default.scss */ .with-notes.popup .note { width: 109%; height: 260px; @@ -1057,7 +1057,7 @@ article.smaller q:before, article.smaller q:after { -o-transition: opacity 400ms ease-in-out; transition: opacity 400ms ease-in-out; } -/* line 741, ../scss/default.scss */ +/* line 705, ../scss/default.scss */ .with-notes.popup .note > section { background: #fff; -webkit-border-radius: 5px; @@ -1076,7 +1076,7 @@ article.smaller q:before, article.smaller q:after { overflow: auto; padding: 1em; } -/* line 754, ../scss/default.scss */ +/* line 718, ../scss/default.scss */ .with-notes .note { opacity: 1; -webkit-transform: translateY(0); @@ -1087,7 +1087,7 @@ article.smaller q:before, article.smaller q:after { pointer-events: auto; } -/* line 761, ../scss/default.scss */ +/* line 725, ../scss/default.scss */ .source { font-size: 14px; color: darkgrey; @@ -1096,12 +1096,12 @@ article.smaller q:before, article.smaller q:after { left: 60px; } -/* line 769, ../scss/default.scss */ +/* line 733, ../scss/default.scss */ .centered { text-align: center; } -/* line 773, ../scss/default.scss */ +/* 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%); @@ -1110,7 +1110,7 @@ article.smaller q:before, article.smaller q:after { box-reflect: below 3px linear-gradient(rgba(255, 255, 255, 0) 85%, #ffffff 150%); } -/* line 781, ../scss/default.scss */ +/* line 745, ../scss/default.scss */ .flexbox { display: -webkit-box !important; display: -moz-box !important; @@ -1119,7 +1119,7 @@ article.smaller q:before, article.smaller q:after { display: box !important; } -/* line 785, ../scss/default.scss */ +/* line 749, ../scss/default.scss */ .flexbox.vcenter { -webkit-box-orient: vertical; -moz-box-orient: vertical; @@ -1137,7 +1137,7 @@ article.smaller q:before, article.smaller q:after { width: 100%; } -/* line 791, ../scss/default.scss */ +/* line 755, ../scss/default.scss */ .flexbox.vleft { -webkit-box-orient: vertical; -moz-box-orient: vertical; @@ -1155,7 +1155,7 @@ article.smaller q:before, article.smaller q:after { width: 100%; } -/* line 797, ../scss/default.scss */ +/* line 761, ../scss/default.scss */ .flexbox.vright { -webkit-box-orient: vertical; -moz-box-orient: vertical; @@ -1173,7 +1173,7 @@ article.smaller q:before, article.smaller q:after { width: 100%; } -/* line 803, ../scss/default.scss */ +/* line 767, ../scss/default.scss */ .auto-fadein { -webkit-transition: opacity 0.6s ease-in; -webkit-transition-delay: 1s; @@ -1184,7 +1184,7 @@ article.smaller q:before, article.smaller q:after { } /* Clickable/tappable areas */ -/* line 809, ../scss/default.scss */ +/* line 773, ../scss/default.scss */ .slide-area { z-index: 1000; position: absolute; @@ -1198,59 +1198,59 @@ article.smaller q:before, article.smaller q:after { margin-top: -350px; } -/* line 826, ../scss/default.scss */ +/* line 790, ../scss/default.scss */ #prev-slide-area { margin-left: -550px; } -/* line 831, ../scss/default.scss */ +/* line 795, ../scss/default.scss */ #next-slide-area { margin-left: 450px; } /* ===== SLIDE CONTENT ===== */ -/* line 839, ../scss/default.scss */ +/* line 803, ../scss/default.scss */ .logoslide img { width: 383px; height: 92px; } -/* line 845, ../scss/default.scss */ +/* line 809, ../scss/default.scss */ .segue { padding: 60px 120px; } -/* line 848, ../scss/default.scss */ +/* line 812, ../scss/default.scss */ .segue h2 { color: #e6e6e6; font-size: 60px; } -/* line 852, ../scss/default.scss */ +/* line 816, ../scss/default.scss */ .segue h3 { color: #e6e6e6; line-height: 2.8; } -/* line 856, ../scss/default.scss */ +/* line 820, ../scss/default.scss */ .segue hgroup { position: absolute; bottom: 225px; } -/* line 862, ../scss/default.scss */ +/* line 826, ../scss/default.scss */ .thank-you-slide { background: #4387fd !important; color: white; } -/* line 866, ../scss/default.scss */ +/* line 830, ../scss/default.scss */ .thank-you-slide h2 { font-size: 60px; color: inherit; } -/* line 871, ../scss/default.scss */ +/* line 835, ../scss/default.scss */ .thank-you-slide article > p { margin-top: 2em; font-size: 20pt; } -/* line 876, ../scss/default.scss */ +/* line 840, ../scss/default.scss */ .thank-you-slide > p { position: absolute; bottom: 80px; @@ -1258,7 +1258,7 @@ article.smaller q:before, article.smaller q:after { line-height: 1.3; } -/* line 884, ../scss/default.scss */ +/* line 848, ../scss/default.scss */ aside.gdbar { height: 97px; width: 215px; @@ -1286,7 +1286,7 @@ aside.gdbar { 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 895, ../scss/default.scss */ +/* line 859, ../scss/default.scss */ aside.gdbar.right { right: 0; left: -moz-initial; @@ -1299,7 +1299,7 @@ aside.gdbar.right { -o-transform: rotateZ(180deg); transform: rotateZ(180deg); } -/* line 902, ../scss/default.scss */ +/* line 866, ../scss/default.scss */ aside.gdbar.right img { -webkit-transform: rotateZ(180deg); -moz-transform: rotateZ(180deg); @@ -1307,13 +1307,13 @@ aside.gdbar.right img { -o-transform: rotateZ(180deg); transform: rotateZ(180deg); } -/* line 907, ../scss/default.scss */ +/* line 871, ../scss/default.scss */ aside.gdbar.bottom { top: -moz-initial; top: initial; bottom: 60px; } -/* line 913, ../scss/default.scss */ +/* line 877, ../scss/default.scss */ aside.gdbar img { width: 85px; height: 85px; @@ -1322,24 +1322,24 @@ aside.gdbar img { margin: 8px 15px; } -/* line 924, ../scss/default.scss */ +/* line 888, ../scss/default.scss */ .title-slide hgroup { bottom: 100px; } -/* line 927, ../scss/default.scss */ +/* line 891, ../scss/default.scss */ .title-slide hgroup h1 { font-size: 65px; line-height: 1.4; letter-spacing: -3px; color: #515151; } -/* line 934, ../scss/default.scss */ +/* line 898, ../scss/default.scss */ .title-slide hgroup h2 { font-size: 34px; color: darkgrey; font-weight: inherit; } -/* line 940, ../scss/default.scss */ +/* line 904, ../scss/default.scss */ .title-slide hgroup p { font-size: 20px; color: #797979; @@ -1347,11 +1347,11 @@ aside.gdbar img { margin-top: 2em; } -/* line 949, ../scss/default.scss */ +/* line 913, ../scss/default.scss */ .quote { color: #e6e6e6; } -/* line 952, ../scss/default.scss */ +/* line 916, ../scss/default.scss */ .quote .author { font-size: 24px; position: absolute; @@ -1359,22 +1359,22 @@ aside.gdbar img { line-height: 1.4; } -/* line 961, ../scss/default.scss */ +/* line 925, ../scss/default.scss */ [data-config-contact] a { color: white; border-bottom: none; } -/* line 965, ../scss/default.scss */ +/* line 929, ../scss/default.scss */ [data-config-contact] span { width: 115px; display: inline-block; } -/* line 974, ../scss/default.scss */ +/* line 938, ../scss/default.scss */ .overview.popup .note { display: none !important; } -/* line 980, ../scss/default.scss */ +/* line 944, ../scss/default.scss */ .overview slides slide { display: block; cursor: pointer; @@ -1387,26 +1387,26 @@ aside.gdbar img { background: linear-gradient(#ffffff, #ffffff 85%, #e6e6e6); background-color: white; } -/* line 981, ../scss/default.scss */ +/* line 945, ../scss/default.scss */ .overview slides slide.backdrop { display: none !important; } -/* line 996, ../scss/default.scss */ +/* 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 1001, ../scss/default.scss */ +/* line 965, ../scss/default.scss */ .overview slides slide.current { opacity: 1; } -/* line 1007, ../scss/default.scss */ +/* line 971, ../scss/default.scss */ .overview .slide-area { display: none; } @media print { - /* line 1014, ../scss/default.scss */ + /* line 978, ../scss/default.scss */ slides slide { display: block !important; position: relative; @@ -1431,46 +1431,46 @@ aside.gdbar img { opacity: 1 !important; color: #555; } - /* line 1034, ../scss/default.scss */ + /* 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 1040, ../scss/default.scss */ + /* line 1004, ../scss/default.scss */ slides slide .build > * { -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none; } - /* line 1045, ../scss/default.scss */ + /* line 1009, ../scss/default.scss */ slides slide .build .to-build, slides slide .build .build-fade { opacity: 1; } - /* line 1050, ../scss/default.scss */ + /* line 1014, ../scss/default.scss */ slides slide .auto-fadein { opacity: 1 !important; } - /* line 1054, ../scss/default.scss */ + /* line 1018, ../scss/default.scss */ slides slide.backdrop { display: none !important; } - /* line 1058, ../scss/default.scss */ + /* line 1022, ../scss/default.scss */ slides slide table.rows { border-right: 0; } - /* line 1063, ../scss/default.scss */ + /* line 1027, ../scss/default.scss */ slides slide[hidden] { display: none !important; } - /* line 1068, ../scss/default.scss */ + /* line 1032, ../scss/default.scss */ .slide-area { display: none; } - /* line 1072, ../scss/default.scss */ + /* line 1036, ../scss/default.scss */ .reflect { -webkit-box-reflect: none; -moz-box-reflect: none; @@ -1479,7 +1479,7 @@ aside.gdbar img { box-reflect: none; } - /* line 1080, ../scss/default.scss */ + /* line 1044, ../scss/default.scss */ pre, code { font-family: monospace !important; } diff --git a/theme/css/io2013.css b/theme/css/io2013.css new file mode 100644 index 0000000..364eccb --- /dev/null +++ b/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/theme/scss/_base.scss b/theme/scss/_base.scss index a5b99cb..50504db 100644 --- a/theme/scss/_base.scss +++ b/theme/scss/_base.scss @@ -11,6 +11,8 @@ @import "compass/css3/transform"; @import "compass/css3/transition"; +@import "variables"; + @mixin font-smoothing($val: antialiased) { -webkit-font-smoothing: $val; -moz-font-smoothing: $val; diff --git a/theme/scss/_variables.scss b/theme/scss/_variables.scss new file mode 100644 index 0000000..d07f907 --- /dev/null +++ b/theme/scss/_variables.scss @@ -0,0 +1,34 @@ +$social-tags: ''; +$brand-small-icon-size: 30px; + +$gray-1: #e6e6e6; +$gray-2: #a9a9a9; +$gray-3: #797979; +$gray-4: #515151; + +$brand-blue: rgb(67, 135, 253); +$brand-blue-secondary: #3c8ef3; +$brand-blue-secondary2: #2a7cdf; + +$brand-red: rgb(244, 74, 63); +$brand-red-secondary: #e0543e; +$brand-red-secondary2: #d94d3a; + +$brand-yellow: rgb(255, 209, 77); +$brand-yellow-secondary: #f9cc46; +$brand-yellow-secondary2: #f6c000; + +$brand-green: rgb(13, 168, 97); +$brand-green-secondary: #00a86d; +$brand-green-secondary2: #009f5d; + +$slide-width: 900px; +$slide-height: 700px; +$slide-width-widescreen: 1100px; +$slide-top-bottom-padding: 40px; +$slide-left-right-padding: 60px; +$slide-border-radius: 5px; + +$slide-tap-area-width: 100px; + +$article-content-top-padding: 45px; diff --git a/theme/scss/default.scss b/theme/scss/default.scss index f1e9816..b8d11b0 100644 --- a/theme/scss/default.scss +++ b/theme/scss/default.scss @@ -2,41 +2,6 @@ @import "compass/css3/columns"; @import "compass/css3/user-interface"; -$social-tags: '#yourhashtag'; -$brand-small-icon-size: 30px; - -$gray-1: #e6e6e6; -$gray-2: #a9a9a9; -$gray-3: #797979; -$gray-4: #515151; - -$brand-blue: rgb(67, 135, 253); -$brand-blue-secondary: #3c8ef3; -$brand-blue-secondary2: #2a7cdf; - -$brand-red: rgb(244, 74, 63); -$brand-red-secondary: #e0543e; -$brand-red-secondary2: #d94d3a; - -$brand-yellow: rgb(255, 209, 77); -$brand-yellow-secondary: #f9cc46; -$brand-yellow-secondary2: #f6c000; - -$brand-green: rgb(13, 168, 97); -$brand-green-secondary: #00a86d; -$brand-green-secondary2: #009f5d; - -$slide-width: 900px; -$slide-height: 700px; -$slide-width-widescreen: 1100px; -$slide-top-bottom-padding: 40px; -$slide-left-right-padding: 60px; -$slide-border-radius: 5px; - -$slide-tap-area-width: 100px; - -$article-content-top-padding: 45px; - @mixin highlight-color($color: $brand-yellow) { -webkit-tap-highlight-color: $color; -moz-tap-highlight-color: $color; @@ -51,7 +16,6 @@ $article-content-top-padding: 45px; } - /** * Theme Styles */ diff --git a/theme/scss/io2013.scss b/theme/scss/io2013.scss new file mode 100644 index 0000000..c728cfb --- /dev/null +++ b/theme/scss/io2013.scss @@ -0,0 +1,51 @@ +@import "compass/css3/background-size"; + +@import "variables"; + +* { + line-height: 1.3; +} + +h2 { + font-weight: bold; +} +h2, h3 { + color: $gray-4; +} + +q, blockquote { + font-weight: bold; +} + +slides > slide { + color: $gray-4; + + &.title-slide { + &:after { + content: ''; + background: url(../../images/io2013/google-io-lockup-1.png) no-repeat 100% 50%; + @include background-size(contain); + position: absolute; + bottom: $slide-top-bottom-padding + 40; + right: $slide-top-bottom-padding; + width: 100%; + height: 90px; + } + + hgroup { + h1 { + font-weight: bold; + line-height: 1.1; + } + h2, p { + color: $gray-4; + } + h2 { + margin-top: 0.25em; + } + p { + margin-top: 3em; + } + } + } +} \ No newline at end of file -- cgit v1.2.3