From 321272492eaf2afe377a806ad666acdcb98ec658 Mon Sep 17 00:00:00 2001 From: Eric Bidelman Date: Fri, 6 Apr 2012 16:26:23 -0700 Subject: Adding compass/sass. Fixing slide # logic. Fixing slide # at bottom off slide. Fixigin prettify logic when it is false --- theme/base.css | 123 ---- theme/css/default.css | 1460 +++++++++++++++++++++++++++++++++++++++++++++++ theme/default.css | 1134 ------------------------------------ theme/sass/_base.scss | 132 +++++ theme/sass/default.scss | 1127 ++++++++++++++++++++++++++++++++++++ 5 files changed, 2719 insertions(+), 1257 deletions(-) delete mode 100644 theme/base.css create mode 100644 theme/css/default.css delete mode 100644 theme/default.css create mode 100644 theme/sass/_base.scss create mode 100644 theme/sass/default.scss (limited to 'theme') diff --git a/theme/base.css b/theme/base.css deleted file mode 100644 index f9991b3..0000000 --- a/theme/base.css +++ /dev/null @@ -1,123 +0,0 @@ -/** - * Base SlideDeck Styles - */ -html { - height: 100%; - overflow: hidden; -} - -body { - margin: 0; - padding: 0; - - display: block !important; - - height: 100%; - min-height: 740px; - - overflow-x: hidden; - overflow-y: auto; - - color: #fff; - -webkit-font-smoothing: antialiased; -} - -slides { - width: 100%; - height: 100%; - position: absolute; - left: 0; - top: 0; - -webkit-transform: translate3d(0, 0, 0); - -webkit-perspective: 1000; - -webkit-transform-style: preserve-3d; - -moz-transform: translate(0); - -moz-perspective: 1000; - -moz-transform-style: preserve-3d; -} - -slides > slide { - display: block; - position: absolute; - overflow: hidden; - left: 50%; - top: 50%; - -o-box-sizing: border-box; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - - -/* Clickable/tappable areas */ -/* -.slide-area { - z-index: 1000; - - position: absolute; - left: 0; - top: 0; - width: 150px; - height: 700px; - - left: 50%; - top: 50%; - - cursor: pointer; - margin-top: -350px; - - tap-highlight-color: transparent; - -o-tap-highlight-color: transparent; - -moz-tap-highlight-color: transparent; - -webkit-tap-highlight-color: transparent; -} -#prev-slide-area { - margin-left: -550px; -} -#next-slide-area { - margin-left: 400px; -} -.slides.layout-widescreen #prev-slide-area, -.slides.layout-faux-widescreen #prev-slide-area { - margin-left: -650px; -} -.slides.layout-widescreen #next-slide-area, -.slides.layout-faux-widescreen #next-slide-area { - margin-left: 500px; -}*/ - -/* Slide styles */ - - -article.fill iframe { - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100%; - - border: 0; - margin: 0; - - border-radius: 10px; - -o-border-radius: 10px; - -moz-border-radius: 10px; - -webkit-border-radius: 10px; - - z-index: -1; -} - -slide.fill { - background-repeat: no-repeat; - background-size: cover; -} - -slide.fill img { - position: absolute; - left: 0; - top: 0; - min-width: 100%; - min-height: 100%; - - z-index: -1; -} diff --git a/theme/css/default.css b/theme/css/default.css new file mode 100644 index 0000000..1dec5ee --- /dev/null +++ b/theme/css/default.css @@ -0,0 +1,1460 @@ +/** + * Base SlideDeck Styles + */ +/* line 22, ../sass/_base.scss */ +html { + height: 100%; + overflow: hidden; +} + +/* line 27, ../sass/_base.scss */ +body { + margin: 0; + padding: 0; + display: block !important; + height: 100%; + min-height: 740px; + overflow-x: hidden; + overflow-y: auto; + color: #fff; + -webkit-font-smoothing: antialiased; + -moz-font-smoothing: antialiased; + -ms-font-smoothing: antialiased; + -o-font-smoothing: antialiased; +} + +/* line 43, ../sass/_base.scss */ +slides { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + -moz-transform: translate3d(0, 0, 0); + -webkit-transform: translate3d(0, 0, 0); + -o-transform: translate3d(0, 0, 0); + -ms-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + -webkit-perspective: 1000; + perspective: 1000; + -webkit-transform-style: preserve-3d; + transform-style: preserve-3d; +} + +/* line 54, ../sass/_base.scss */ +slides > slide { + display: block; + position: absolute; + overflow: hidden; + left: 50%; + top: 50%; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; +} + +/* Clickable/tappable areas */ +/* +.slide-area { + z-index: 1000; + + position: absolute; + left: 0; + top: 0; + width: 150px; + height: 700px; + + left: 50%; + top: 50%; + + cursor: pointer; + margin-top: -350px; + + tap-highlight-color: transparent; + -o-tap-highlight-color: transparent; + -moz-tap-highlight-color: transparent; + -webkit-tap-highlight-color: transparent; +} +#prev-slide-area { + margin-left: -550px; +} +#next-slide-area { + margin-left: 400px; +} +.slides.layout-widescreen #prev-slide-area, +.slides.layout-faux-widescreen #prev-slide-area { + margin-left: -650px; +} +.slides.layout-widescreen #next-slide-area, +.slides.layout-faux-widescreen #next-slide-area { + margin-left: 500px; +}*/ +/* Slide styles */ +/* line 104, ../sass/_base.scss */ +article.fill iframe { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + border: 0; + margin: 0; + -moz-border-radius: 10px; + -webkit-border-radius: 10px; + -o-border-radius: 10px; + -ms-border-radius: 10px; + -khtml-border-radius: 10px; + border-radius: 10px; + z-index: -1; +} + +/* line 119, ../sass/_base.scss */ +slide.fill { + background-repeat: no-repeat; + -moz-background-size: cover; + -webkit-background-size: cover; + -o-background-size: cover; + background-size: cover; +} + +/* line 124, ../sass/_base.scss */ +slide.fill img { + position: absolute; + left: 0; + top: 0; + min-width: 100%; + min-height: 100%; + z-index: -1; +} + +/** + * Theme Styles + */ +/* line 6, ../sass/default.scss */ +::selection { + color: white; + background-color: red; + text-shadow: none; +} + +/* line 12, ../sass/default.scss */ +body { + background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 600, color-stop(0%, #b1dfff), color-stop(100%, #0c54ab)); + background-image: -webkit-radial-gradient(50% 50%, #b1dfff 0%, #0c54ab 600px); + background-image: -moz-radial-gradient(50% 50%, #b1dfff 0%, #0c54ab 600px); + background-image: -o-radial-gradient(50% 50%, #b1dfff 0%, #0c54ab 600px); + background-image: -ms-radial-gradient(50% 50%, #b1dfff 0%, #0c54ab 600px); + background-image: radial-gradient(50% 50%, #b1dfff 0%, #0c54ab 600px); + background-attachment: fixed; +} + +/* line 17, ../sass/default.scss */ +slides > slide { + width: 900px; + height: 700px; + margin-left: -450px; + margin-top: -350px; + padding: 40px 60px; + background-color: white; + -moz-border-radius: 10px; + -webkit-border-radius: 10px; + -o-border-radius: 10px; + -ms-border-radius: 10px; + -khtml-border-radius: 10px; + border-radius: 10px; + -moz-box-shadow: 5px 5px 20px black; + -webkit-box-shadow: 5px 5px 20px black; + -o-box-shadow: 5px 5px 20px black; + box-shadow: 5px 5px 20px black; + -moz-transition: all 0.3s ease-out; + -webkit-transition: all 0.3s ease-out; + -o-transition: all 0.3s ease-out; + transition: all 0.3s ease-out; +} + +/* line 32, ../sass/default.scss */ +slides.layout-widescreen > slide { + margin-left: -550px; + width: 1100px; +} + +/* line 37, ../sass/default.scss */ +slides.layout-faux-widescreen > slide { + margin-left: -550px; + width: 1100px; + padding: 40px 160px; +} + +/* line 43, ../sass/default.scss */ +slides > slide:not(.nobackground):not(.biglogo):not(.fill) { + background: white url(/images/gdd2011_banner.png) 105% 99% no-repeat; +} + +/* line 47, ../sass/default.scss */ +slides.nobackground slide:not(.fill) { + background: url(/images/devfest_logo_small.png) 98% 99% no-repeat, url(/images/bubbles.png) 5% -125px no-repeat, url(/images/colorbar.png) 0 91% repeat-x, white !important; +} + +/* line 55, ../sass/default.scss */ +slides.nobackground slide:not(.fill)::after, +slides.nobackground slide:not(.fill)::before { + color: inherit !important; +} + +/* line 59, ../sass/default.scss */ +slides > slide:not(:first-of-type):not(.biglogo):not(.fill):not(.nobackground)::after { + content: attr(data-slide-num) " / " attr(data-total-slides); + position: absolute; + bottom: 2%; + left: 2%; + font-size: 12pt; + color: white; +} + +/* line 68, ../sass/default.scss */ +slides > slide:not(:first-of-type):not(.biglogo):not(.fill):not(.nobackground)::before { + position: absolute; + bottom: 14px; + left: 275px; + font-size: 18pt; + color: white; + content: '@ebidel #gddjp'; +} + +/* line 78, ../sass/default.scss */ +slides.layout-widescreen > slide:not(.nobackground):not(.biglogo), +slides.layout-faux-widescreen > slide:not(.nobackground):not(.biglogo) { + background-position-x: 0, 840px; +} + +/* Slide Styles */ +/* line 84, ../sass/default.scss */ +slide.biglogo { + background: url(/images/google_logo.png) 50% 50% no-repeat, url(/images/gdd2011_banner.png) 105% 99% no-repeat, white; +} + +/* Slides */ +/* line 91, ../sass/default.scss */ +slides > slide { + display: none; +} + +/* line 95, ../sass/default.scss */ +slides > slide.far-past { + display: block; + -o-transform: translate(-2040px); + -moz-transform: translate(-2040px); + -webkit-transform: translate3d(-2040px, 0, 0); + transform: translate(-2040px); +} + +/* line 103, ../sass/default.scss */ +slides > slide.past { + display: block; + -o-transform: translate(-1020px) rotateY(30deg) rotateX(45deg); + -moz-transform: translate(-1020px) rotateY(30deg) rotateX(45deg); + -webkit-transform: translate3d(-1020px, 0, 0) rotateY(30deg) rotateX(45deg); + transform: translate(-1020px) rotateY(30deg) rotateX(45deg); +} + +/* line 111, ../sass/default.scss */ +slides > slide.current { + display: block; + -o-transform: translate(0); + -moz-transform: translate(0); + -webkit-transform: translate3d(0, 0, 0); + transform: translate(0); +} + +/* line 119, ../sass/default.scss */ +slides > slide.next { + display: block; + -o-transform: translate(1020px) rotateY(-30deg) rotateX(45deg); + -moz-transform: translate(1020px) rotateY(-30deg) rotateX(45deg); + -webkit-transform: translate3d(1020px, 0, 0) rotateY(-30deg) rotateX(45deg); + transform: translate(1020px) rotateY(-30deg) rotateX(45deg); +} + +/* line 127, ../sass/default.scss */ +slides > slide.far-next { + display: block; + transform: translate(2040px); + -o-transform: translate(2040px); + -moz-transform: translate(2040px); + -webkit-transform: translate3d(2040px, 0, 0); +} + +/* line 136, ../sass/default.scss */ +slides.layout-widescreen > slide.far-past, +slides.layout-faux-widescreen > slide.far-past { + display: block; + transform: translate(-2260px); + -o-transform: translate(-2260px); + -moz-transform: translate(-2260px); + -webkit-transform: translate3d(-2260px, 0, 0); +} + +/* line 145, ../sass/default.scss */ +slides.layout-widescreen > slide.past, +slides.layout-faux-widescreen > slide.past { + display: block; + transform: translate(-1130px); + -o-transform: translate(-1130px); + -moz-transform: translate(-1130px); + -webkit-transform: translate3d(-1130px, 0, 0); +} + +/* line 154, ../sass/default.scss */ +slides.layout-widescreen > slide.current, +slides.layout-faux-widescreen > slide.current { + display: block; + transform: translate(0); + -o-transform: translate(0); + -moz-transform: translate(0); + -webkit-transform: translate3d(0, 0, 0); +} + +/* line 163, ../sass/default.scss */ +slides.layout-widescreen > slide.next, +slides.layout-faux-widescreen > slide.next { + display: block; + transform: translate(1130px); + -o-transform: translate(1130px); + -moz-transform: translate(1130px); + -webkit-transform: translate3d(1130px, 0, 0); +} + +/* line 172, ../sass/default.scss */ +slides.layout-widescreen > slide.far-next, +slides.layout-faux-widescreen > slide.far-next { + display: block; + transform: translate(2260px); + -o-transform: translate(2260px); + -moz-transform: translate(2260px); + -webkit-transform: translate3d(2260px, 0, 0); +} + +/* line 180, ../sass/default.scss */ +.slides > article { + font-family: 'Open Sans', Arial, sans-serif; + color: #545454; + font-weight: 300; + text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); + font-size: 30px; + line-height: 36px; + letter-spacing: -1px; +} + +/* line 193, ../sass/default.scss */ +b { + font-weight: 600; +} + +/* line 197, ../sass/default.scss */ +.blue { + color: #0066cc; +} + +/* line 200, ../sass/default.scss */ +.yellow { + color: #ffd319; +} + +/* line 203, ../sass/default.scss */ +.green { + color: #008a35; +} + +/* line 206, ../sass/default.scss */ +.red { + color: red; +} + +/* line 209, ../sass/default.scss */ +.black { + color: black; +} + +/* line 212, ../sass/default.scss */ +.white { + color: white; +} + +/* line 215, ../sass/default.scss */ +.dark { + background-color: rgba(0, 0, 0, 0.2); + color: white; +} + +/* line 219, ../sass/default.scss */ +.bubble { + background-color: rgba(0, 0, 0, 0.8); + color: white; +} + +/* line 223, ../sass/default.scss */ +a { + color: #0066cc; +} + +/* line 226, ../sass/default.scss */ +a:visited { + color: rgba(0, 102, 204, 0.75); +} + +/* line 229, ../sass/default.scss */ +a:hover { + color: black; +} + +/* line 233, ../sass/default.scss */ +p { + margin: 0; + padding: 0; +} + +/* line 238, ../sass/default.scss */ +h1 { + font-size: 50px; + line-height: 1.5; + padding: 0; + margin: 0; + font-weight: 600; + letter-spacing: -3px; + color: #0075ba; +} + +/* line 250, ../sass/default.scss */ +h1.centered { + /*background: rgba(255, 255, 255, 0.3); + box-shadow: 0 1px 5px #333;*/ + background: none; + width: 100%; + text-align: center; + padding: 20px 0; +} + +/* line 259, ../sass/default.scss */ +h2 { + font-size: 45px; + font-weight: 600; + line-height: 45px; + letter-spacing: -2px; + position: absolute; + left: 0; + bottom: 150px; + padding: 30px 60px; + margin: 0; + width: 100%; + background: rgba(255, 255, 255, 0.3); + box-shadow: 0 1px 5px #333; + box-sizing: border-box; +} + +/* line 278, ../sass/default.scss */ +h3 { + font-size: 30px; + line-height: 36px; + padding: 0; + margin: 0 0 1em 0; + font-weight: 600; + letter-spacing: -1px; +} + +/* line 286, ../sass/default.scss */ +h2.nobackground { + background: none; + box-shadow: none; +} + +/* line 290, ../sass/default.scss */ +h2.megabottom { + bottom: 90px; +} + +/* line 293, ../sass/default.scss */ +h2.shadow { + text-shadow: 1px 1px 3px black; +} + +/* line 296, ../sass/default.scss */ +label.underline { + border-bottom: 3px solid #fccc02; + /*rgb(192, 192, 192)*/ +} + +/* line 300, ../sass/default.scss */ +slide.fill h3 { + background: rgba(255, 255, 255, 0.75); + padding-top: .2em; + padding-bottom: .3em; + margin-top: -0.2em; + margin-left: -60px; + padding-left: 60px; + margin-right: -60px; + padding-right: 60px; +} + +/* line 311, ../sass/default.scss */ +.fill h4 { + display: inline; + position: absolute; + bottom: 50px; + padding: 15px; +} + +/* line 318, ../sass/default.scss */ +ul { + margin: 0; + padding: 0; + margin-left: .75em; +} + +/* line 323, ../sass/default.scss */ +ul ul { + margin-top: .5em; +} + +/* line 326, ../sass/default.scss */ +li { + padding: 0; + margin: 0; + margin-bottom: .5em; +} + +/*li::before { + content: '·'; + + width: .75em; + margin-left: -.75em; + + position: absolute; +}*/ +/* line 340, ../sass/default.scss */ +ul > li::before { + /*content: '·';*/ + content: url("../images/chrome-logo-tiny2.png"); + width: 0.5em; + margin-left: -1.3em; + position: absolute; +} + +/* line 347, ../sass/default.scss */ +ul li ul li::before { + content: ''; +} + +/* line 351, ../sass/default.scss */ +pre { + font-family: 'Droid Sans Mono', 'Courier New', monospace; + font-size: 20px; + line-height: 28px; + padding: 10px 20px; + letter-spacing: -1px; + margin-bottom: 20px; + text-shadow: none; + text-shadow: none; + /*overflow: hidden;*/ +} + +/* line 365, ../sass/default.scss */ +code { + font-size: 95%; + font-family: 'Droid Sans Mono', 'Courier New', monospace; + color: black; +} + +/* line 372, ../sass/default.scss */ +iframe { + width: 100%; + height: 620px; + background: white; + border: 1px solid silver; + margin: -1px; +} + +/* line 380, ../sass/default.scss */ +dt { + font-weight: bold; +} + +/* line 384, ../sass/default.scss */ +h3 + iframe { + height: 540px; +} + +/* line 388, ../sass/default.scss */ +button { + display: inline-block; + background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#f9f9f9), to(#e3e3e3)); + background: -webkit-linear-gradient(#f9f9f9 40%, #e3e3e3 70%); + background: -moz-linear-gradient(#f9f9f9 40%, #e3e3e3 70%); + background: -ms-linear-gradient(#f9f9f9 40%, #e3e3e3 70%); + background: -o-linear-gradient(#f9f9f9 40%, #e3e3e3 70%); + background: linear-gradient(#f9f9f9 40%, #e3e3e3 70%); + border: 1px solid #999; + -webkit-border-radius: 3px; + border-radius: 3px; + 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 #fff; + font-weight: 700; + font-size: 10pt; +} + +/* line 411, ../sass/default.scss */ +button:hover { + border-color: black; +} + +/* line 415, ../sass/default.scss */ +button:active { + background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#e3e3e3), to(#f9f9f9)); + background: -webkit-linear-gradient(#e3e3e3 40%, #f9f9f9 70%); + background: -moz-linear-gradient(#e3e3e3 40%, #f9f9f9 70%); + background: -ms-linear-gradient(#e3e3e3 40%, #f9f9f9 70%); + background: -o-linear-gradient(#e3e3e3 40%, #f9f9f9 70%); + background: linear-gradient(#e3e3e3 40%, #f9f9f9 70%); +} + +/* line 424, ../sass/default.scss */ +slide.fill { + border-radius: 10px; + -o-border-radius: 10px; + -moz-border-radius: 10px; + -webkit-border-radius: 10px; +} + +/* line 431, ../sass/default.scss */ +img.centered { + margin: 0 auto; + display: block; +} + +/* line 436, ../sass/default.scss */ +table { + width: 100%; + border-collapse: collapse; + margin-top: 40px; +} + +/* line 442, ../sass/default.scss */ +th { + font-weight: 600; + text-align: left; +} + +/* line 448, ../sass/default.scss */ +td, +th { + border: 1px solid #e0e0e0; + padding: 5px 10px; + vertical-align: top; +} + +/* line 454, ../sass/default.scss */ +.source { + position: absolute; + left: 60px; + top: 644px; + padding-right: 175px; + font-size: 12px; + letter-spacing: 0; + line-height: 18px; + opacity: 0.5; +} + +/* line 466, ../sass/default.scss */ +.source a { + color: inherit; + text-decoration: none; +} + +/* line 471, ../sass/default.scss */ +.source a:hover { + text-decoration: underline; +} + +/* line 475, ../sass/default.scss */ +q { + display: block; + font-size: 60px; + line-height: 72px; + margin-left: 20px; + margin-top: 100px; +} + +/* line 482, ../sass/default.scss */ +q::before { + content: '“'; + position: absolute; + display: inline-block; + margin-left: -2.1em; + width: 2em; + text-align: right; + font-size: 90px; + color: silver; +} + +/* line 494, ../sass/default.scss */ +q::after { + content: '”'; + position: absolute; + margin-left: .1em; + font-size: 90px; + color: silver; +} + +/* line 503, ../sass/default.scss */ +div.author { + text-align: right; + font-size: 40px; + margin-top: 20px; + margin-right: 150px; +} + +/* line 510, ../sass/default.scss */ +div.author::before { + content: '—'; +} + +/* Size variants */ +/* line 517, ../sass/default.scss */ +article.smaller p, +article.smaller ul { + font-size: 20px; + line-height: 24px; + letter-spacing: 0; +} + +/* line 522, ../sass/default.scss */ +article.smaller table { + font-size: 20px; + line-height: 24px; + letter-spacing: 0; +} + +/* line 527, ../sass/default.scss */ +article.smaller pre { + font-size: 15px; + line-height: 20px; + letter-spacing: 0; +} + +/* line 532, ../sass/default.scss */ +article.smaller q { + font-size: 40px; + line-height: 48px; +} + +/* line 537, ../sass/default.scss */ +article.smaller q::before, +article.smaller q::after { + font-size: 60px; +} + +/* Builds */ +/* line 543, ../sass/default.scss */ +.build > * { + transition: opacity 0.5s ease-in-out 0.2s; + -o-transition: opacity 0.5s ease-in-out 0.2s; + -moz-transition: opacity 0.5s ease-in-out 0.2s; + -webkit-transition: opacity 0.5s ease-in-out 0.2s; +} + +/* line 550, ../sass/default.scss */ +.to-build { + opacity: 0; +} + +/* line 554, ../sass/default.scss */ +.build-fade { + opacity: 0.5; +} + +/* line 558, ../sass/default.scss */ +.build-fade:hover { + opacity: 1.0; +} + +/* Pretty print */ +/* line 565, ../sass/default.scss */ +.prettyprint .str, +.prettyprint .atv { + /* a markup attribute value */ + color: #008a35; +} + +/* line 569, ../sass/default.scss */ +.prettyprint .kwd, +.prettyprint .tag { + /* a markup tag name */ + color: #0066cc; +} + +/* line 572, ../sass/default.scss */ +.prettyprint .com { + /* a comment */ + color: #7f7f7f; + font-style: italic; +} + +/* line 576, ../sass/default.scss */ +.prettyprint .lit { + /* a literal value */ + color: #7f0000; +} + +/* line 581, ../sass/default.scss */ +.prettyprint .pun, +.prettyprint .opn, +.prettyprint .clo { + color: #7f7f7f; +} + +/* line 587, ../sass/default.scss */ +.prettyprint .typ, +.prettyprint .atn, +.prettyprint .dec, +.prettyprint .var { + /* a declaration; a variable name */ + color: #7f007f; +} + +/*.note { + pointer-events: none; + display: -webkit-box; + -webkit-box-align: center; + -webkit-box-pack: center; + -webkit-box-orient: vertical; + + position: absolute; + width: 100%; + height: 100%; + left: 0; + top: 0; + opacity: 0; + -webkit-transition: opacity 0.2s ease-in-out; +} + +.note > section { + position: relative; + top: 0; + left: 0; + width: 700px; + height: 400px; + z-index: 1000; + background: rgba(0,0,0,0.8); + border-radius: 10px; + padding: 25px; + box-shadow: 1px 1px 10px black; + color: black; + background: rgb(215, 215, 215); + background: -o-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190)); + background: -moz-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190)); + background: -webkit-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190)); + background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 500, from(rgb(240, 240, 240)), to(rgb(190, 190, 190))); +}*/ +/* line 626, ../sass/default.scss */ +.with-notes .note { + opacity: 1; + pointer-events: auto; +} + +/* line 631, ../sass/default.scss */ +input, button { + vertical-align: middle; +} + +/* line 635, ../sass/default.scss */ +.centered { + text-align: center; +} + +/* line 639, ../sass/default.scss */ +h2.right { + text-align: right; +} + +/* line 643, ../sass/default.scss */ +.rounded { + border-radius: 10px; + -o-border-radius: 10px; + -moz-border-radius: 10px; + -webkit-border-radius: 10px; +} + +/* line 649, ../sass/default.scss */ +.reflect { + -webkit-box-reflect: below 3px -webkit-linear-gradient(rgba(255, 255, 255, 0) 85%, white 150%); + -moz-box-reflect: below 3px -moz-linear-gradient(rgba(255, 255, 255, 0) 85%, white 150%); + -o-box-reflect: below 3px -o-linear-gradient(rgba(255, 255, 255, 0) 85%, white 150%); + -ms-box-reflect: below 3px -ms-linear-gradient(rgba(255, 255, 255, 0) 85%, white 150%); + box-reflect: below 3px linear-gradient(rgba(255, 255, 255, 0) 85%, #ffffff 150%); +} + +/* ===== SLIDE CONTENT ===== */ +/* line 658, ../sass/default.scss */ +#title-slide > div { + font-size: 30px; + margin-top: 200px; + color: #ababab; +} + +/* line 663, ../sass/default.scss */ +#title-slide .info { + font-size: 70%; + margin-top: 3em; +} + +/* line 667, ../sass/default.scss */ +h1 .jitter { + display: inline-block; +} + +/* line 670, ../sass/default.scss */ +h1 .jitter:before { + content: '/'; +} + +/* line 673, ../sass/default.scss */ +h1:hover .jitter:before { + color: #EB0000; + content: '\002665'; +} + +/* line 677, ../sass/default.scss */ +[data-config-logo] { + /*float: right; + margin-top: -50px; + background: transparent no-repeat 0 0; + height: 202px; + width: 210px; + background-size: contain; + */ + float: right; + margin-top: -90px; + background: transparent no-repeat 0 0; + height: 262px; + width: 210px; +} + +/* line 691, ../sass/default.scss */ +#who img { + vertical-align: middle; +} + +/* line 694, ../sass/default.scss */ +#who p:first-of-type { + float: right; +} + +/* line 697, ../sass/default.scss */ +#who img.avatar { + width: 250px; + height: 250px; +} + +/* line 701, ../sass/default.scss */ +#who img.avatar:hover { + -webkit-mask-image: url(/images/HTML5_Badge.svg); + -webkit-mask-position: 50% 50%; + -webkit-mask-size: 100% 100%; + /* background: -webkit-linear-gradient(top, white, rgba(239, 101, 42, 0.1)) no-repeat;*/ +} + +/* line 707, ../sass/default.scss */ +#who a { + display: inline-block; +} + +/* line 710, ../sass/default.scss */ +#currentTime { + border: none; + font-size: 12pt; + box-shadow: none; +} + +/* line 715, ../sass/default.scss */ +#currentTime::-webkit-outer-spin-button, #currentTime::-webkit-inner-spin-button { + display: none; + -webkit-appearance: none; + margin: 0; +} + +/* line 721, ../sass/default.scss */ +.note { + font-size: 20px; + position: absolute; + z-index: 100; + width: 100%; + height: 100%; + top: 0; + left: 0; + background: rgba(0, 0, 0, 0.4); + display: -webkit-box; + display: -moz-box; + display: -o-box; + display: -ms-box; + display: box; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + box-align: center; + -webkit-box-pack: center; + -moz-box-pack: center; + -o-box-pack: center; + box-pack: center; + pointer-events: none; + -webkit-transition: opacity 0.2s ease-in-out; + opacity: 0; + border-radius: 10px; + -o-border-radius: 10px; + -moz-border-radius: 10px; + -webkit-border-radius: 10px; +} + +/* line 753, ../sass/default.scss */ +.note ul { + margin: 0; +} + +/* line 756, ../sass/default.scss */ +.note > section { + background: #fff; + border-radius: 5px; + box-shadow: 0 0 20px 5px rgba(0, 0, 0, 0.4); + width: 60%; + padding: 2em; +} + +/* line 764, ../sass/default.scss */ +.flexcenter { + display: -webkit-box !important; + -webkit-box-orient: vertical; + -webkit-box-align: center; + -webkit-box-pack: center; +} + +/* line 772, ../sass/default.scss */ +#chrome-logo { + border: 25px solid white; + -webkit-border-radius: 370px; + -moz-border-radius: 370px; + -o-border-radius: 370px; + border-radius: 370px; + z-index: 100; + padding: 0; + margin: 0; + display: inline-block; + font-size: 10px; +} + +/* line 785, ../sass/default.scss */ +.leaf { + height: 350px; + width: 272px; + background: #edcf17; + -webkit-border-radius: 55px 30px 245px 0px; + -moz-border-radius: 55px 30px 245px 0px; + -o-border-radius: 55px 30px 245px 0px; + border-radius: 55px 30px 245px 0px; + position: absolute; + opacity: 0.97; + -webkit-transform: rotate(0deg) translate(64px, -0.926em); + -moz-transform: rotate(0deg) translate(64px, -0.926em); + -o-transform: rotate(0deg) translate(64px, -0.926em); + transform: rotate(0deg) translate(64px, -0.926em); +} + +/* line 801, ../sass/default.scss */ +#yellow { + z-index: -97; + background: -webkit-gradient(radial, 64 64, 279, -147 99, 100, from(#d9a919), to(white), color-stop(0.35, #f0d418)); +} + +/* line 806, ../sass/default.scss */ +#yellow2 { + background: -webkit-gradient(radial, 64 64, 279, -120 99, 115, from(#d9a919), to(white), color-stop(0.35, #f0d418)); + z-index: -94; + height: 79px; + width: 255px; +} + +/* line 813, ../sass/default.scss */ +#green { + background: #44A73D; + background: -webkit-gradient(radial, 64 64, 329, -227 299, 100, from(#44a73d), to(white), color-stop(0.4, #46ac3f)); + background: -moz-radial-gradient(-100% 45%, circle cover, white 30%, #44a73d 82%); + -webkit-transform: rotate(120deg) translate(60px, 152px); + -moz-transform: rotate(120deg) translate(60px, 152px); + -o-transform: rotate(120deg) translate(60px, 152px); + transform: rotate(120deg) translate(60px, 152px); + z-index: -96; +} + +/* line 824, ../sass/default.scss */ +#red { + background: #E03e39; + background: -webkit-gradient(radial, 164 100, 280, 466 400, 10, from(#e44d40), to(white), color-stop(0.25, #df3b3f)); + background: -moz-radial-gradient(160% 60%, white 0%, #e44d40 60%); + -webkit-transform: rotate(-120deg) translate(206px, 73px); + -moz-transform: rotate(-120deg) translate(206px, 73px); + -o-transform: rotate(-120deg) translate(206px, 73px); + transform: rotate(-120deg) translate(206px, 73px); + z-index: -95; +} + +/* line 836, ../sass/default.scss */ +#blue_core { + width: 180px; + height: 180px; + -webkit-border-radius: 180px; + -moz-border-radius: 180px; + -o-border-radius: 180px; + border-radius: 180px; + background: #3f67bc; + background: -webkit-gradient(radial, 90 0, 90, 90 -20, 0, from(#466cc7), to(#72a0cf)); + background: -moz-radial-gradient(50% -80px, circle cover, #89bbef 0%, #466cc7 60%); + line-height: 180px; + -webkit-box-shadow: 2px 12px 8px #aaa; + -moz-box-shadow: 2px 12px 8px #aaa; + -o-box-shadow: 2px 12px 8px #aaa; + box-shadow: 2px 12px 8px #aaa; + /*-webkit-transition:-webkit-transform 5s ease-out;*/ +} + +/* line 853, ../sass/default.scss */ +#white_shell { + width: 180px; + height: 180px; + -webkit-border-radius: 180px; + -moz-border-radius: 180px; + -o-border-radius: 180px; + border-radius: 180px; + border: 15px solid white; + vertical-align: middle; + line-height: 180px; +} + +/* line 864, ../sass/default.scss */ +#colors { + -webkit-border-radius: 360px; + -moz-border-radius: 360px; + -o-border-radius: 360px; + border-radius: 360px; + padding: 140px; + -webkit-box-shadow: 0px 10px 15px #aaa; + -moz-box-shadow: 0px 10px 15px #aaa; + -o-box-shadow: 0px 10px 15px #aaa; + box-shadow: 0px 10px 15px #aaa; +} + +/* line 878, ../sass/default.scss */ +a[href^='http']:not(.demo):not([href*='bleedinghtml5']):not([href*='twitter.com']):not([href*='flickr.com']):not([href*='plus.google.com'])::after, +a[target="_blank"]:not(.demo):not([href*='bleedinghtml5']):not([href*='twitter.com']):not([href*='flickr.com']):not([href*='plus.google.com'])::after, +a[rel='external']:not(.demo)::after { + content: ''; + background: transparent url(data:image/png;base64,R0lGODlhCQAJAIABADNmzP///yH5BAEAAAEALAAAAAAJAAkAAAISDI5niRYPgYNP0pioVdFJVl0FADs=) no-repeat center right; + background-size: 100%; + width: 14px; + height: 14px; + display: inline-block; + vertical-align: middle; + margin-left: 7px; +} + +/* line 889, ../sass/default.scss */ +.drop-shadow { + position: relative; + background: white; + -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; + -o-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; + -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; + -ms-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; +} + +/* these before/after shadows mess up the page reflow on builds */ +/*.drop-shadow::before, .drop-shadow::after { + content: ''; + position: absolute; + z-index: -2; +} + +.curved::before { + top: 10px; + bottom: 10px; + left: 0; + right: 50%; + -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5); + -moz-box-shadow: 0 0 10px rgba(0,0,0,0.5); + -o-box-shadow: 0 0 10px rgba(0,0,0,0.5); + -ms-box-shadow: 0 0 10px rgba(0,0,0,0.5); + box-shadow: 0 0 10px rgba(0,0,0,0.5); + -moz-border-radius: 10px / 100px; + -0-border-radius: 10px / 100px; + -ms-border-radius: 10px / 100px; + border-radius: 10px / 100px; +} + +.curved-hz-2::before { + top: 0; + bottom: 0; + left: 10px; + right: 10px; + -webkit-border-radius: 100px / 10px; + -moz-border-radius: 100px / 10px; + -o-border-radius: 100px / 10px; + -ms-border-radius: 100px / 10px; + border-radius: 100px / 10px; +}*/ +/* line 935, ../sass/default.scss */ +.key { + padding: 0 10px 3px 10px; + -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 2px 5px; + -moz-box-shadow: rgba(0, 0, 0, 0.3) 0 2px 5px; + -ms-box-shadow: rgba(0, 0, 0, 0.3) 0 2px 5px; + -o-box-shadow: rgba(0, 0, 0, 0.3) 0 2px 5px; + box-shadow: rgba(0, 0, 0, 0.3) 0 2px 5px; +} + +/* line 944, ../sass/default.scss */ +.hidden { + display: none !important; +} + +/* line 948, ../sass/default.scss */ +.invisible { + visibility: hidden !important; +} + +/* line 952, ../sass/default.scss */ +a.demo { + padding: 6px 12px 6px 12px; + text-decoration: none; + background-color: #759ae9; + background: -webkit-gradient(linear, left top, left bottom, from(#759ae9 0%), to(#376fe0 50%)); + /* Saf4+, Chrome */ + background: -webkit-linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%); + background: -moz-linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%); + background: -ms-linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%); + background: -o-linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%); + background: linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%); + border-top: 1px solid #1f58cc; + border-right: 1px solid #1b4db3; + border-bottom: 1px solid #174299; + border-left: 1px solid #1b4db3; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + -ms-border-radius: 4px; + -o-border-radius: 4px; + border-radius: 4px; + -webkit-box-shadow: inset 0 0 2px 0 rgba(57, 140, 255, 0.8); + -moz-box-shadow: inset 0 0 2px 0 rgba(57, 140, 255, 0.8); + -ms-box-shadow: inset 0 0 2px 0 rgba(57, 140, 255, 0.8); + -o-box-shadow: inset 0 0 2px 0 rgba(57, 140, 255, 0.8); + box-shadow: inset 0 0 2px 0 rgba(57, 140, 255, 0.8); + color: #fff; + text-shadow: 0 -1px 1px #1a5ad9; + font-size: 80%; +} + +/******************************************************************************* + * PREFLIGHT + ******************************************************************************/ +/* line 985, ../sass/default.scss */ +#slide-preflight .explanation { + font-size: 70%; + margin-left: 1.4em; +} + +/* line 989, ../sass/default.scss */ +#slide-preflight .feature { + margin-top: 10px; +} + +/* line 992, ../sass/default.scss */ +#slide-preflight .feature img { + margin-right: 7px; +} + +/******************************************************************************* + * WARNING + ******************************************************************************/ +/* line 999, ../sass/default.scss */ +[data-blowup] { + -webkit-transition: all 100ms ease-in-out; + -moz-transition: all 100ms ease-in-out; + -o-transition: all 100ms ease-in-out; + -ms-transition: all 100ms ease-in-out; + transition: all 100ms ease-in-out; + display: inline-block; + cursor: pointer; +} + +/* line 1009, ../sass/default.scss */ +.blowup { + -webkit-transform: scale(3.25) rotateZ(-15deg) translateX(0); + -moz-transform: scale(3.25) rotateZ(-15deg) translateX(0); + -o-transform: scale(3.25) rotateZ(-15deg) translateX(0); + -ms-transform: scale(3.25) rotateZ(-15deg) translateX(0); + transform: scale(3.25) rotateZ(-15deg) translateX(0); + text-shadow: 0 0 10px red; + -webkit-text-stroke: 1px rgba(255, 255, 255, 0.3); + -moz-text-stroke: 1px rgba(255, 255, 255, 0.3); + -ms-text-stroke: 1px rgba(255, 255, 255, 0.3); + -o-text-stroke: 1px rgba(255, 255, 255, 0.3); + text-stroke: 1px rgba(255, 255, 255, 0.3); +} + +/* line 1023, ../sass/default.scss */ +.blowup-shadow { + -webkit-box-shadow: 0 0 100px 25px red inset !important; + -moz-box-shadow: 0 0 100px 25px red inset !important; + -o-box-shadow: 0 0 100px 25px red inset !important; + -ms-shadow: 0 0 100px 25px red inset !important; + box-shadow: 0 0 100px 25px red inset !important; +} + +/******************************************************************************* + * BROWSER SUPPORT STYLES + ******************************************************************************/ +/* line 1034, ../sass/default.scss */ +.browser-support { + pointer-events: none; + width: 625px; + margin-bottom: -70px; + -webkit-mask-image: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 45%, white); +} + +/* line 1041, ../sass/default.scss */ +.browser-support img { + height: 185px; + opacity: 0.8; + margin-right: -90px; + vertical-align: bottom; +} + +/* line 1047, ../sass/default.scss */ +.browser-support img:first-of-type { + height: 203px; +} + +/* line 1050, ../sass/default.scss */ +.browser-support img:last-of-type { + height: 200px; +} + +/* line 1053, ../sass/default.scss */ +.browser-support img:nth-of-type(2) { + height: 193px; +} + +/* line 1056, ../sass/default.scss */ +.browser-support img.supported { + opacity: 1; + z-index: 1; + position: relative; + -webkit-mask-image: none; +} + +@-webkit-keyframes rotateRight { + /* line 1064, ../sass/default.scss */ + from { + -webkit-transform: rotate(0); + } + + /* line 1067, ../sass/default.scss */ + to { + -webkit-transform: rotate(360deg); + } +} + +@-webkit-keyframes jitter { + /* line 1072, ../sass/default.scss */ + 0% { + -webkit-transform: rotate(0deg); + } + + /* line 1075, ../sass/default.scss */ + 2% { + -webkit-transform: rotate(-7deg) translateX(2px) scale(1.1); + } + + /* line 1078, ../sass/default.scss */ + 4% { + -webkit-transform: rotate(0deg); + } + + /* line 1081, ../sass/default.scss */ + 6% { + -webkit-transform: rotate(7deg) translateX(-2px); + } + + /* line 1084, ../sass/default.scss */ + 8% { + -webkit-transform: rotate(0deg); + } + + /* line 1087, ../sass/default.scss */ + 10% { + -webkit-transform: rotate(-7deg) translateX(2px) scale(1.1); + } + + /* line 1090, ../sass/default.scss */ + 12% { + -webkit-transform: rotate(0deg); + } + + /* line 1093, ../sass/default.scss */ + 14% { + -webkit-transform: rotate(7deg) translateX(-2px); + } + + /* line 1096, ../sass/default.scss */ + 16% { + -webkit-transform: rotate(0deg); + } +} + +/* line 1101, ../sass/default.scss */ +ae +.spin { + -webkit-animation-name: rotateRight; + -webkit-animation-duration: 15s; + -webkit-animation-timing-function: linear; + -webkit-transform-origin: 50% 50%; + -webkit-animation-iteration-count: infinite; +} + +/* line 1108, ../sass/default.scss */ +.spin:hover { + -webkit-animation-duration: 0.1s; +} + +/* line 1111, ../sass/default.scss */ +.jitter { + -webkit-animation-name: jitter; + -webkit-animation-duration: 2s; + -webkit-animation-timing-function: ease-in-out; + -webkit-transform-origin: 50% 50%; + -webkit-animation-iteration-count: infinite; +} + +/* line 1119, ../sass/default.scss */ +#chrome-heart { + display: inline-block; + margin-bottom: -30px; + background: url(/images/chrome_logo.png) 50% 50% no-repeat; + width: 100px; + height: 100px; + background-position: 50% 50%; + background-size: cover; +} diff --git a/theme/default.css b/theme/default.css deleted file mode 100644 index 18ddc40..0000000 --- a/theme/default.css +++ /dev/null @@ -1,1134 +0,0 @@ -/** - * Theme Styles - */ -::selection { - color: white; - background-color: red; - text-shadow: none; -} - -body { - background-image: -moz-radial-gradient(50% 30% 90deg, circle, #b1dfff 0%, #0c54ab 600px); - background-image: -webkit-gradient(radial, 50% 50%, 200, 50% 50%, 600, from(#b1dfff), to(#0c54ab)); - background-attachment: fixed; -} - -slides > slide { - width: 900px; - height: 700px; - margin-left: -450px; - margin-top: -350px; - - padding: 40px 60px; - - -o-border-radius: 10px; - -moz-border-radius: 10px; - -webkit-border-radius: 10px; - border-radius: 10px; - - background-color: white; - - box-shadow: 5px 5px 20px black; - - -o-transition: all .3s ease-out; - -moz-transition: all .3s ease-out; - -webkit-transition: all .3s ease-out; - transition: all .3s ease-out; -} - -slides.layout-widescreen > slide { - margin-left: -550px; - width: 1100px; -} - -slides.layout-faux-widescreen > slide { - margin-left: -550px; - width: 1100px; - padding: 40px 160px; -} - -slides > slide:not(.nobackground):not(.biglogo):not(.fill) { - background: white url(/images/gdd2011_banner.png) 105% 99% no-repeat; -} - -slides.nobackground slide:not(.fill) { - background: url(/images/devfest_logo_small.png) 98% 99% no-repeat, - url(/images/bubbles.png) 5% -125px no-repeat, - url(/images/colorbar.png) 0 91% repeat-x, - white !important; -} - -slides.nobackground slide:not(.fill)::after, -slides.nobackground slide:not(.fill)::before { - color: inherit !important; -} - -slides > slide:not(:first-of-type):not(.biglogo):not(.fill):not(.nobackground)::after { - content: attr(data-slide-num) ' / ' attr(data-total-slides); - position: absolute; - bottom: 2%; - left: 2%; - font-size: 12pt; - color: white; -} - -slides > slide:not(:first-of-type):not(.biglogo):not(.fill):not(.nobackground)::before { - position: absolute; - bottom: 14px; - left: 275px; - font-size: 18pt; - color: white; - content: '@ebidel #gddjp'; -} - -slides.layout-widescreen > slide:not(.nobackground):not(.biglogo), -slides.layout-faux-widescreen > slide:not(.nobackground):not(.biglogo) { - background-position-x: 0, 840px; -} - -/* Slide Styles */ - -slide.biglogo { - background: url(/images/google_logo.png) 50% 50% no-repeat, - url(/images/gdd2011_banner.png) 105% 99% no-repeat, white; -} - -/* Slides */ - -slides > slide { - display: none; -} - -slides > slide.far-past { - display: block; - -o-transform: translate(-2040px); - -moz-transform: translate(-2040px); - -webkit-transform: translate3d(-2040px, 0, 0); - transform: translate(-2040px); -} - -slides > slide.past { - display: block; - -o-transform: translate(-1020px) rotateY(30deg) rotateX(45deg); - -moz-transform: translate(-1020px) rotateY(30deg) rotateX(45deg); - -webkit-transform: translate3d(-1020px, 0, 0) rotateY(30deg) rotateX(45deg); - transform: translate(-1020px) rotateY(30deg) rotateX(45deg); -} - -slides > slide.current { - display: block; - -o-transform: translate(0); - -moz-transform: translate(0); - -webkit-transform: translate3d(0, 0, 0); - transform: translate(0); -} - -slides > slide.next { - display: block; - -o-transform: translate(1020px) rotateY(-30deg) rotateX(45deg); - -moz-transform: translate(1020px) rotateY(-30deg) rotateX(45deg); - -webkit-transform: translate3d(1020px, 0, 0) rotateY(-30deg) rotateX(45deg); - transform: translate(1020px) rotateY(-30deg) rotateX(45deg); -} - -slides > slide.far-next { - display: block; - transform: translate(2040px); - -o-transform: translate(2040px); - -moz-transform: translate(2040px); - -webkit-transform: translate3d(2040px, 0, 0); -} - -slides.layout-widescreen > slide.far-past, -slides.layout-faux-widescreen > slide.far-past { - display: block; - transform: translate(-2260px); - -o-transform: translate(-2260px); - -moz-transform: translate(-2260px); - -webkit-transform: translate3d(-2260px, 0, 0); -} - -slides.layout-widescreen > slide.past, -slides.layout-faux-widescreen > slide.past { - display: block; - transform: translate(-1130px); - -o-transform: translate(-1130px); - -moz-transform: translate(-1130px); - -webkit-transform: translate3d(-1130px, 0, 0); -} - -slides.layout-widescreen > slide.current, -slides.layout-faux-widescreen > slide.current { - display: block; - transform: translate(0); - -o-transform: translate(0); - -moz-transform: translate(0); - -webkit-transform: translate3d(0, 0, 0); -} - -slides.layout-widescreen > slide.next, -slides.layout-faux-widescreen > slide.next { - display: block; - transform: translate(1130px); - -o-transform: translate(1130px); - -moz-transform: translate(1130px); - -webkit-transform: translate3d(1130px, 0, 0); -} - -slides.layout-widescreen > slide.far-next, -slides.layout-faux-widescreen > slide.far-next { - display: block; - transform: translate(2260px); - -o-transform: translate(2260px); - -moz-transform: translate(2260px); - -webkit-transform: translate3d(2260px, 0, 0); -} - -.slides > article { - font-family: 'Open Sans', Arial, sans-serif; - - color: #545454; - font-weight: 300; - text-shadow: 0 1px 1px rgba(0, 0, 0, .1); - - font-size: 30px; - line-height: 36px; - - letter-spacing: -1px; -} - -b { - font-weight: 600; -} - -.blue { - color: rgb(0, 102, 204); -} -.yellow { - color: rgb(255, 211, 25); -} -.green { - color: rgb(0, 138, 53); -} -.red { - color: rgb(255, 0, 0); -} -.black { - color: black; -} -.white { - color: white; -} -.dark { - background-color: rgba(0, 0, 0, 0.2); - color: white; -} -.bubble { - background-color: rgba(0, 0, 0, 0.8); - color: white; -} -a { - color: rgb(0, 102, 204); -} -a:visited { - color: rgba(0, 102, 204, .75); -} -a:hover { - color: black; -} - -p { - margin: 0; - padding: 0; -} - -h1 { - font-size: 50px; - line-height: 1.5; - padding: 0; - margin: 0; - - font-weight: 600; - - letter-spacing: -3px; - color: #0075ba; -} - -h1.centered { - /*background: rgba(255, 255, 255, 0.3); - box-shadow: 0 1px 5px #333;*/ - background: none; - width: 100%; - text-align: center; - padding: 20px 0; -} - -h2 { - font-size: 45px; - font-weight: 600; - line-height: 45px; - letter-spacing: -2px; - - position: absolute; - left: 0; - bottom: 150px; - - padding: 30px 60px; - margin: 0; - - width: 100%; - background: rgba(255, 255, 255, 0.3); - box-shadow: 0 1px 5px #333; - box-sizing: border-box; -} - -h3 { - font-size: 30px; - line-height: 36px; - padding: 0; - margin: 0 0 1em 0; - font-weight: 600; - letter-spacing: -1px; -} -h2.nobackground { - background: none; - box-shadow: none; -} -h2.megabottom { - bottom: 90px; -} -h2.shadow { - text-shadow: 1px 1px 3px black; -} -label.underline { - border-bottom: 3px solid #fccc02; /*rgb(192, 192, 192)*/ -} - -slide.fill h3 { - background: rgba(255, 255, 255, .75); - padding-top: .2em; - padding-bottom: .3em; - margin-top: -.2em; - margin-left: -60px; - padding-left: 60px; - margin-right: -60px; - padding-right: 60px; -} - -.fill h4 { - display: inline; - position: absolute; - bottom: 50px; - padding: 15px; -} - -ul { - margin: 0; - padding: 0; - margin-left: .75em; -} -ul ul { - margin-top: .5em; -} -li { - padding: 0; - margin: 0; - - margin-bottom: .5em; -} -/*li::before { - content: '·'; - - width: .75em; - margin-left: -.75em; - - position: absolute; -}*/ -ul > li::before { - /*content: '·';*/ - content: url('../images/chrome-logo-tiny2.png'); - width: 0.5em; - margin-left: -1.3em; - position: absolute; -} -ul li ul li::before { - content: ''; -} - -pre { - font-family: 'Droid Sans Mono', 'Courier New', monospace; - - font-size: 20px; - line-height: 28px; - padding: 10px 20px; - - letter-spacing: -1px; - - margin-bottom: 20px;text-shadow: none; - text-shadow: none; - /*overflow: hidden;*/ -} - -code { - font-size: 95%; - font-family: 'Droid Sans Mono', 'Courier New', monospace; - - color: black; -} - -iframe { - width: 100%; - height: 620px; - background: white; - border: 1px solid rgb(192, 192, 192); - margin: -1px; -} - -dt { - font-weight: bold; -} - -h3 + iframe { - height: 540px; -} - -button { - display: inline-block; - background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#F9F9F9), to(#E3E3E3)); - background: -webkit-linear-gradient(#F9F9F9 40%, #E3E3E3 70%); - background: -moz-linear-gradient(#F9F9F9 40%, #E3E3E3 70%); - background: -ms-linear-gradient(#F9F9F9 40%, #E3E3E3 70%); - background: -o-linear-gradient(#F9F9F9 40%, #E3E3E3 70%); - background: linear-gradient(#F9F9F9 40%, #E3E3E3 70%); - border: 1px solid #999; - -webkit-border-radius: 3px; - border-radius: 3px; - 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 #fff; - font-weight: 700; - font-size: 10pt; -} - -button:hover { - border-color: black; -} - -button:active { - background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#E3E3E3), to(#F9F9F9)); - background: -webkit-linear-gradient(#E3E3E3 40%, #F9F9F9 70%); - background: -moz-linear-gradient(#E3E3E3 40%, #F9F9F9 70%); - background: -ms-linear-gradient(#E3E3E3 40%, #F9F9F9 70%); - background: -o-linear-gradient(#E3E3E3 40%, #F9F9F9 70%); - background: linear-gradient(#E3E3E3 40%, #F9F9F9 70%); -} - -slide.fill { - border-radius: 10px; - -o-border-radius: 10px; - -moz-border-radius: 10px; - -webkit-border-radius: 10px; -} - -img.centered { - margin: 0 auto; - display: block; -} - -table { - width: 100%; - border-collapse: collapse; - margin-top: 40px; -} - -th { - font-weight: 600; - text-align: left; -} - -td, -th { - border: 1px solid rgb(224, 224, 224); - padding: 5px 10px; - vertical-align: top; -} - -.source { - position: absolute; - left: 60px; - top: 644px; - padding-right: 175px; - - font-size: 12px; - letter-spacing: 0; - line-height: 18px; - opacity: 0.5; -} - -.source a { - color: inherit; - text-decoration: none; -} - -.source a:hover { - text-decoration: underline; -} - -q { - display: block; - font-size: 60px; - line-height: 72px; - margin-left: 20px; - margin-top: 100px; -} -q::before { - content: '“'; - - position: absolute; - display: inline-block; - margin-left: -2.1em; - width: 2em; - text-align: right; - - font-size: 90px; - color: rgb(192, 192, 192); -} -q::after { - content: '”'; - - position: absolute; - margin-left: .1em; - - font-size: 90px; - color: rgb(192, 192, 192); -} -div.author { - text-align: right; - font-size: 40px; - - margin-top: 20px; - margin-right: 150px; -} -div.author::before { - content: '—'; -} - -/* Size variants */ - -article.smaller p, -article.smaller ul { - font-size: 20px; - line-height: 24px; - letter-spacing: 0; -} -article.smaller table { - font-size: 20px; - line-height: 24px; - letter-spacing: 0; -} -article.smaller pre { - font-size: 15px; - line-height: 20px; - letter-spacing: 0; -} -article.smaller q { - font-size: 40px; - line-height: 48px; -} -article.smaller q::before, -article.smaller q::after { - font-size: 60px; -} - -/* Builds */ - -.build > * { - transition: opacity 0.5s ease-in-out 0.2s; - -o-transition: opacity 0.5s ease-in-out 0.2s; - -moz-transition: opacity 0.5s ease-in-out 0.2s; - -webkit-transition: opacity 0.5s ease-in-out 0.2s; -} - -.to-build { - opacity: 0; -} - -.build-fade { - opacity: 0.5; -} - -.build-fade:hover { - opacity: 1.0; -} - -/* Pretty print */ - -.prettyprint .str, /* string content */ -.prettyprint .atv { /* a markup attribute value */ - color: rgb(0, 138, 53); -} -.prettyprint .kwd, /* a keyword */ -.prettyprint .tag { /* a markup tag name */ - color: rgb(0, 102, 204); -} -.prettyprint .com { /* a comment */ - color: rgb(127, 127, 127); - font-style: italic; -} -.prettyprint .lit { /* a literal value */ - color: rgb(127, 0, 0); -} -.prettyprint .pun, /* punctuation, lisp open bracket, lisp close bracket */ -.prettyprint .opn, -.prettyprint .clo { - color: rgb(127, 127, 127); -} -.prettyprint .typ, /* a type name */ -.prettyprint .atn, /* a markup attribute name */ -.prettyprint .dec, -.prettyprint .var { /* a declaration; a variable name */ - color: rgb(127, 0, 127); -} - -/*.note { - pointer-events: none; - display: -webkit-box; - -webkit-box-align: center; - -webkit-box-pack: center; - -webkit-box-orient: vertical; - - position: absolute; - width: 100%; - height: 100%; - left: 0; - top: 0; - opacity: 0; - -webkit-transition: opacity 0.2s ease-in-out; -} - -.note > section { - position: relative; - top: 0; - left: 0; - width: 700px; - height: 400px; - z-index: 1000; - background: rgba(0,0,0,0.8); - border-radius: 10px; - padding: 25px; - box-shadow: 1px 1px 10px black; - color: black; - background: rgb(215, 215, 215); - background: -o-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190)); - background: -moz-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190)); - background: -webkit-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190)); - background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 500, from(rgb(240, 240, 240)), to(rgb(190, 190, 190))); -}*/ - -.with-notes .note { - opacity: 1; - pointer-events: auto; -} - -input, button { - vertical-align: middle; -} - -.centered { - text-align: center; -} - -h2.right { - text-align: right; -} - -.rounded { - border-radius: 10px; - -o-border-radius: 10px; - -moz-border-radius: 10px; - -webkit-border-radius: 10px; -} -.reflect { - -webkit-box-reflect: below 3px -webkit-linear-gradient(rgba(255,255,255,0) 85%, white 150%); - -moz-box-reflect: below 3px -moz-linear-gradient(rgba(255,255,255,0) 85%, white 150%); - -o-box-reflect: below 3px -o-linear-gradient(rgba(255,255,255,0) 85%, white 150%); - -ms-box-reflect: below 3px -ms-linear-gradient(rgba(255,255,255,0) 85%, white 150%); - box-reflect: below 3px linear-gradient(rgba(255,255,255,0) 85%, white 150%); -} - -/* ===== SLIDE CONTENT ===== */ -#title-slide > div { - font-size: 30px; - margin-top: 200px; - color: rgb(171,171,171); -} -#title-slide .info { - font-size: 70%; - margin-top: 3em; -} -h1 .jitter { - display: inline-block; -} -h1 .jitter:before { - content: '/'; -} -h1:hover .jitter:before { - color: #EB0000; - content: '\002665'; -} -[data-config-logo] { - /*float: right; - margin-top: -50px; - background: transparent no-repeat 0 0; - height: 202px; - width: 210px; - background-size: contain; - */ - float: right; - margin-top: -90px; - background: transparent no-repeat 0 0; - height: 262px; - width: 210px; -} -#who img { - vertical-align: middle; -} -#who p:first-of-type { - float: right; -} -#who img.avatar { - width: 250px; - height: 250px; -} -#who img.avatar:hover { - -webkit-mask-image: url(/images/HTML5_Badge.svg); - -webkit-mask-position: 50% 50%; - -webkit-mask-size: 100% 100%; - /* background: -webkit-linear-gradient(top, white, rgba(239, 101, 42, 0.1)) no-repeat;*/ -} -#who a { - display: inline-block; -} -#currentTime { - border: none; - font-size: 12pt; - box-shadow: none; -} -#currentTime::-webkit-outer-spin-button, #currentTime::-webkit-inner-spin-button { - display: none; - -webkit-appearance: none; - margin: 0; -} - -.note { - font-size: 20px; - position: absolute; - z-index: 100; - width: 100%; - height: 100%; - top: 0; - left: 0; - background: rgba(0, 0, 0, 0.4); - display: -webkit-box; - display: -moz-box; - display: -o-box; - display: -ms-box; - display: box; - -webkit-box-align: center; - -moz-box-align: center; - -o-box-align: center; - box-align: center; - -webkit-box-pack: center; - -moz-box-pack: center; - -o-box-pack: center; - box-pack: center; - - pointer-events: none; - -webkit-transition: opacity 0.2s ease-in-out; - opacity: 0; - - border-radius: 10px; - -o-border-radius: 10px; - -moz-border-radius: 10px; - -webkit-border-radius: 10px; -} -.note ul { - margin: 0; -} -.note > section { - background: #fff; - border-radius: 5px; - box-shadow: 0 0 20px 5px rgba(0, 0, 0, 0.4); - width: 60%; - padding: 2em; -} - -.flexcenter { - display: -webkit-box !important; - -webkit-box-orient: vertical; - -webkit-box-align: center; - -webkit-box-pack: center; -} - - -#chrome-logo { - border: 25px solid white; - -webkit-border-radius: 370px; - -moz-border-radius: 370px; - -o-border-radius: 370px; - border-radius: 370px; - z-index: 100; - padding: 0; - margin: 0; - display: inline-block; - font-size: 10px; -} - -.leaf { - height: 350px; - width: 272px; - background: #edcf17; - -webkit-border-radius:55px 30px 245px 0px; - -moz-border-radius:55px 30px 245px 0px; - -o-border-radius:55px 30px 245px 0px; - border-radius:55px 30px 245px 0px; - position: absolute; - opacity:0.97; - -webkit-transform: rotate(0deg) translate(64px,-0.9258em); - -moz-transform: rotate(0deg) translate(64px,-0.9258em); - -o-transform: rotate(0deg) translate(64px,-0.9258em); - transform: rotate(0deg) translate(64px,-0.9258em); -} - -#yellow { - z-index:-97; - background: -webkit-gradient(radial, - 64 64, 279, -147 99, 100, from(#d9a919), to(white), color-stop(.35, #F0D418)); -} -#yellow2 { - background: -webkit-gradient(radial, - 64 64, 279, -120 99, 115, from(#d9a919), to(white), color-stop(.35, #F0D418)); - z-index:-94; - height:79px; - width:255px; -} -#green { - background: #44A73D; - background:-webkit-gradient(radial, - 64 64, 329, -227 299, 100, from(#44A73D), to(white), color-stop(.40, #46ac3f)); - background:-moz-radial-gradient(-100% 45%, circle cover, white 30%, #44A73D 82%); - -webkit-transform: rotate(120deg) translate(60px,152px); - -moz-transform: rotate(120deg) translate(60px,152px); - -o-transform: rotate(120deg) translate(60px,152px); - transform: rotate(120deg) translate(60px,152px); - z-index:-96; -} -#red{ - background: #E03e39; - background: -webkit-gradient(radial, - 164 100, 280, 466 400, 10, from(#e44d40), to(white), color-stop(.25, #df3b3f)); - background: -moz-radial-gradient(160% 60%, white 0%, #e44d40 60%); - -webkit-transform: rotate(-120deg) translate(206px,73px); - -moz-transform: rotate(-120deg) translate(206px,73px); - -o-transform: rotate(-120deg) translate(206px,73px); - transform: rotate(-120deg) translate(206px,73px); - z-index: -95; -} - -#blue_core { - width:180px; - height:180px; - -webkit-border-radius:180px; - -moz-border-radius:180px; - -o-border-radius:180px; - border-radius:180px; - background:#3f67bc; - background:-webkit-gradient(radial, 90 0, 90, 90 -20, 0, from(#466CC7), to(#72A0CF)); - background:-moz-radial-gradient(50% -80px, circle cover, #89bbef 0%, #466CC7 60%); - line-height:180px; - -webkit-box-shadow: 2px 12px 8px #aaa; - -moz-box-shadow: 2px 12px 8px #aaa; - -o-box-shadow: 2px 12px 8px #aaa; - box-shadow: 2px 12px 8px #aaa; - /*-webkit-transition:-webkit-transform 5s ease-out;*/ -} -#white_shell{ - width:180px; - height:180px; - -webkit-border-radius:180px; - -moz-border-radius:180px; - -o-border-radius:180px; - border-radius:180px; - border:15px solid white; - vertical-align: middle; - line-height:180px; -} -#colors{ - -webkit-border-radius:360px; - -moz-border-radius:360px; - -o-border-radius:360px; - border-radius:360px; - padding:140px; - -webkit-box-shadow: 0px 10px 15px #aaa; - -moz-box-shadow: 0px 10px 15px #aaa; - -o-box-shadow: 0px 10px 15px #aaa; - box-shadow: 0px 10px 15px #aaa; -} - -a[href^='http']:not(.demo):not([href*='bleedinghtml5']):not([href*='twitter.com']):not([href*='flickr.com']):not([href*='plus.google.com'])::after, -a[target="_blank"]:not(.demo):not([href*='bleedinghtml5']):not([href*='twitter.com']):not([href*='flickr.com']):not([href*='plus.google.com'])::after, -a[rel='external']:not(.demo)::after { - content: ''; - background: transparent url(data:image/png;base64,R0lGODlhCQAJAIABADNmzP///yH5BAEAAAEALAAAAAAJAAkAAAISDI5niRYPgYNP0pioVdFJVl0FADs=) no-repeat center right; - background-size: 100%; - width: 14px; - height: 14px; - display: inline-block; - vertical-align: middle; - margin-left: 7px; -} - -.drop-shadow { - position: relative; - background: white; - -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; - -o-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; - -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; - -ms-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; - box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; -} - -/* these before/after shadows mess up the page reflow on builds */ - -/*.drop-shadow::before, .drop-shadow::after { - content: ''; - position: absolute; - z-index: -2; -} - -.curved::before { - top: 10px; - bottom: 10px; - left: 0; - right: 50%; - -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5); - -moz-box-shadow: 0 0 10px rgba(0,0,0,0.5); - -o-box-shadow: 0 0 10px rgba(0,0,0,0.5); - -ms-box-shadow: 0 0 10px rgba(0,0,0,0.5); - box-shadow: 0 0 10px rgba(0,0,0,0.5); - -moz-border-radius: 10px / 100px; - -0-border-radius: 10px / 100px; - -ms-border-radius: 10px / 100px; - border-radius: 10px / 100px; -} - -.curved-hz-2::before { - top: 0; - bottom: 0; - left: 10px; - right: 10px; - -webkit-border-radius: 100px / 10px; - -moz-border-radius: 100px / 10px; - -o-border-radius: 100px / 10px; - -ms-border-radius: 100px / 10px; - border-radius: 100px / 10px; -}*/ - -.key { - padding: 0 10px 3px 10px; - -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 2px 5px; - -moz-box-shadow: rgba(0, 0, 0, 0.3) 0 2px 5px; - -ms-box-shadow: rgba(0, 0, 0, 0.3) 0 2px 5px; - -o-box-shadow: rgba(0, 0, 0, 0.3) 0 2px 5px; - box-shadow: rgba(0, 0, 0, 0.3) 0 2px 5px; -} - -.hidden { - display: none !important; -} - -.invisible { - visibility: hidden !important; -} - -a.demo { - padding: 6px 12px 6px 12px; - text-decoration: none; - background-color: #759ae9; - background: -webkit-gradient(linear, left top, left bottom, from(#759ae9 0%), to(#376fe0 50%)); - /* Saf4+, Chrome */ - background: -webkit-linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%); - background: -moz-linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%); - background: -ms-linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%); - background: -o-linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%); - background: linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%); - border-top: 1px solid #1f58cc; - border-right: 1px solid #1b4db3; - border-bottom: 1px solid #174299; - border-left: 1px solid #1b4db3; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - -ms-border-radius: 4px; - -o-border-radius: 4px; - border-radius: 4px; - -webkit-box-shadow: inset 0 0 2px 0 rgba(57, 140, 255, 0.8); - -moz-box-shadow: inset 0 0 2px 0 rgba(57, 140, 255, 0.8); - -ms-box-shadow: inset 0 0 2px 0 rgba(57, 140, 255, 0.8); - -o-box-shadow: inset 0 0 2px 0 rgba(57, 140, 255, 0.8); - box-shadow: inset 0 0 2px 0 rgba(57, 140, 255, 0.8); - color: #fff; - text-shadow: 0 -1px 1px #1a5ad9; - font-size: 80%; -} - -/******************************************************************************* - * PREFLIGHT - ******************************************************************************/ -#slide-preflight .explanation { - font-size: 70%; - margin-left: 1.4em; -} -#slide-preflight .feature { - margin-top: 10px; -} -#slide-preflight .feature img { - margin-right: 7px; -} - -/******************************************************************************* - * WARNING - ******************************************************************************/ -[data-blowup] { - -webkit-transition: all 100ms ease-in-out; - -moz-transition: all 100ms ease-in-out; - -o-transition: all 100ms ease-in-out; - -ms-transition: all 100ms ease-in-out; - transition: all 100ms ease-in-out; - display: inline-block; - cursor: pointer; -} - -.blowup { - -webkit-transform: scale(3.25) rotateZ(-15deg) translateX(0); - -moz-transform: scale(3.25) rotateZ(-15deg) translateX(0); - -o-transform: scale(3.25) rotateZ(-15deg) translateX(0); - -ms-transform: scale(3.25) rotateZ(-15deg) translateX(0); - transform: scale(3.25) rotateZ(-15deg) translateX(0); - text-shadow: 0 0 10px red; - -webkit-text-stroke: 1px rgba(255,255,255,0.3); - -moz-text-stroke: 1px rgba(255,255,255,0.3); - -ms-text-stroke: 1px rgba(255,255,255,0.3); - -o-text-stroke: 1px rgba(255,255,255,0.3); - text-stroke: 1px rgba(255,255,255,0.3); -} - -.blowup-shadow { - -webkit-box-shadow: 0 0 100px 25px red inset !important; - -moz-box-shadow: 0 0 100px 25px red inset !important; - -o-box-shadow: 0 0 100px 25px red inset !important; - -ms-shadow: 0 0 100px 25px red inset !important; - box-shadow: 0 0 100px 25px red inset !important; -} - -/******************************************************************************* - * BROWSER SUPPORT STYLES - ******************************************************************************/ -.browser-support { - pointer-events: none; - width: 625px; - margin-bottom: -70px; - -webkit-mask-image: -webkit-linear-gradient(bottom, - rgba(255,255,255,0), rgba(255,255,255,0) 45%, rgba(255,255,255,1)); -} -.browser-support img { - height: 185px; - opacity: 0.8; - margin-right: -90px; - vertical-align: bottom; -} -.browser-support img:first-of-type { - height: 203px; -} -.browser-support img:last-of-type { - height: 200px; -} -.browser-support img:nth-of-type(2) { - height: 193px; -} -.browser-support img.supported { - opa