From 06b4740ef7d0aecc01f325ca8c7d21679877c274 Mon Sep 17 00:00:00 2001 From: Luke Date: Thu, 29 Mar 2012 15:45:09 +1100 Subject: adding inital code --- images/bubbles.png | Bin 0 -> 5714 bytes images/colorbar.png | Bin 0 -> 213 bytes images/devfest_logo_small.png | Bin 0 -> 5749 bytes images/gdd2011_banner.png | Bin 0 -> 10003 bytes images/styles.css | 1249 +++++++++++++++++++++++++++++++++++++++++ slides.js | 455 +++++++++++++++ template.html | 69 +++ theme/.base.css.swp | Bin 0 -> 45056 bytes theme/.default.css.swp | Bin 0 -> 45056 bytes theme/base.css | 123 ++++ theme/default.css | 1134 +++++++++++++++++++++++++++++++++++++ 11 files changed, 3030 insertions(+) create mode 100644 images/bubbles.png create mode 100644 images/colorbar.png create mode 100644 images/devfest_logo_small.png create mode 100644 images/gdd2011_banner.png create mode 100644 images/styles.css create mode 100644 slides.js create mode 100644 template.html create mode 100644 theme/.base.css.swp create mode 100644 theme/.default.css.swp create mode 100644 theme/base.css create mode 100644 theme/default.css diff --git a/images/bubbles.png b/images/bubbles.png new file mode 100644 index 0000000..c99e9a7 Binary files /dev/null and b/images/bubbles.png differ diff --git a/images/colorbar.png b/images/colorbar.png new file mode 100644 index 0000000..189af7a Binary files /dev/null and b/images/colorbar.png differ diff --git a/images/devfest_logo_small.png b/images/devfest_logo_small.png new file mode 100644 index 0000000..a8508f0 Binary files /dev/null and b/images/devfest_logo_small.png differ diff --git a/images/gdd2011_banner.png b/images/gdd2011_banner.png new file mode 100644 index 0000000..43dfb5a Binary files /dev/null and b/images/gdd2011_banner.png differ diff --git a/images/styles.css b/images/styles.css new file mode 100644 index 0000000..6f86a27 --- /dev/null +++ b/images/styles.css @@ -0,0 +1,1249 @@ +::selection { + color: white; + background-color: red; /*1c88ff*/ + text-shadow: none; +} + +:-webkit-full-screen { + +} + +html { + height: 100%; + overflow: hidden; +} + +body { + margin: 0; + padding: 0; + + display: block !important; + + height: 100%; + min-height: 740px; + + overflow-x: hidden; + overflow-y: auto; + +/* + 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))); +*/ + + color: #fff; + /*background-image: -moz-radial-gradient(50% 30% 90deg, circle, #0075ba 0%, #304160 600px); + background-image: -webkit-gradient(radial, 50% 50%, 200, 50% 50%, 600, from(#0075ba), to(#304160)); + background-color: #0075ba;*/ + 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; + + -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 > article { + display: block; + + position: absolute; + overflow: hidden; + + width: 900px; + height: 700px; + + left: 50%; + top: 50%; + + margin-left: -450px; + margin-top: -350px; + + padding: 40px 60px; + + -o-box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + + -o-border-radius: 10px; + -moz-border-radius: 10px; + -webkit-border-radius: 10px; + border-radius: 10px; + + background-color: white; + + box-shadow: 5px 5px 20px black; + /*border: 1px solid rgba(0, 0, 0, .3);*/ + + -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 > article { + margin-left: -550px; + width: 1100px; +} +.slides.layout-faux-widescreen > article { + margin-left: -550px; + width: 1100px; + padding: 40px 160px; +} + +.slides > article:not(.nobackground):not(.biglogo):not(.fill) { + background: white url(/images/gdd2011_banner.png) 105% 99% no-repeat; +} +.slides.nobackground article:not(.fill) { + /*background: white url(/images/colorbar.png) 105% 91% no-repeat !important; + background-size: contain;*/ + background: url(/images/devfests/devfest_logo_small.png) 98% 99% no-repeat, + url(/images/devfests/bubbles.png) 5% -125px no-repeat, + url(/images/colorbar.png) 0 91% repeat-x, + white !important; +} +.slides.nobackground article:not(.fill)::after, +.slides.nobackground article:not(.fill)::before { + color: inherit !important; +} +.slides > article: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 > article: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 > article:not(.nobackground):not(.biglogo), +.slides.layout-faux-widescreen > article:not(.nobackground):not(.biglogo) { + background-position-x: 0, 840px; +} + +/* 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.biglogo { + background: url(/images/google_logo.png) 50% 50% no-repeat, + url(/images/gdd2011_banner.png) 105% 99% no-repeat, white; +} + +/* Slides */ + +.slides > article { + display: none; + /*-webkit-transform-origin: 0 100%;*/ +} +.slides > article.far-past { + display: block; + -o-transform: translate(-2040px); + -moz-transform: translate(-2040px); + -webkit-transform: translate3d(-2040px, 0, 0); + transform: translate(-2040px); +} +.slides > article.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); + /*-webkit-transform: translate3d(-1020px, 0, 0) rotateY(30deg); + -webkit-transform-origin: 100% 50%;*/ +} +.slides > article.current { + display: block; + -o-transform: translate(0); + -moz-transform: translate(0); + -webkit-transform: translate3d(0, 0, 0); + transform: translate(0); +} +.slides > article.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); + /*-webkit-transform: translate3d(1020px, 0, 0) rotateY(-30deg); + -webkit-transform-origin: 0 50%;*/ +} +.slides > article.far-next { + display: block; + transform: translate(2040px); + -o-transform: translate(2040px); + -moz-transform: translate(2040px); + -webkit-transform: translate3d(2040px, 0, 0); +} + +.slides.layout-widescreen > article.far-past, +.slides.layout-faux-widescreen > article.far-past { + display: block; + transform: translate(-2260px); + -o-transform: translate(-2260px); + -moz-transform: translate(-2260px); + -webkit-transform: translate3d(-2260px, 0, 0); +} +.slides.layout-widescreen > article.past, +.slides.layout-faux-widescreen > article.past { + display: block; + transform: translate(-1130px); + -o-transform: translate(-1130px); + -moz-transform: translate(-1130px); + -webkit-transform: translate3d(-1130px, 0, 0); +} +.slides.layout-widescreen > article.current, +.slides.layout-faux-widescreen > article.current { + display: block; + transform: translate(0); + -o-transform: translate(0); + -moz-transform: translate(0); + -webkit-transform: translate3d(0, 0, 0); +} +.slides.layout-widescreen > article.next, +.slides.layout-faux-widescreen > article.next { + display: block; + transform: translate(1130px); + -o-transform: translate(1130px); + -moz-transform: translate(1130px); + -webkit-transform: translate3d(1130px, 0, 0); +} +.slides.layout-widescreen > article.far-next, +.slides.layout-faux-widescreen > article.far-next { + display: block; + transform: translate(2260px); + -o-transform: translate(2260px); + -moz-transform: translate(2260px); + -webkit-transform: translate3d(2260px, 0, 0); +} + +/* Styles for slides */ + +.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)*/ +} +article.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; + /*box-shadow: inset 0 2px 6px rgba(0, 0, 0, .1);*/ +} + +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%); +} + +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; +} + +article.fill { + background-repeat: no-repeat; + background-size: cover; + /*background-position: 50% -200px;*/ +} + +article.fill img { + position: absolute; + left: 0; + top: 0; + min-width: 100%; + min-height: 100%; + + border-radius: 10px; + -o-border-radius: 10px; + -moz-border-radius: 10px; + -webkit-border-radius: 10px; + + z-index: -1; + +} +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 { + opacity: 1; + z-index: 1; + position: relative; + -webkit-mask-image: none; +} + +@-webkit-keyframes rotateRight { + from { + -webkit-transform: rotate(0); + } + to { + -webkit-transform: rotate(360deg); + } +} +@-webkit-keyframes jitter { + 0% { + -webkit-transform: rotate(0deg); + } + 2% { + -webkit-transform: rotate(-7deg) translateX(2px) scale(1.1); + } + 4% { + -webkit-transform: rotate(0deg); + } + 6% { + -webkit-transform: rotate(7deg) translateX(-2px); + } + 8% { + -webkit-transform: rotate(0deg); + } + 10% { + -webkit-transform: rotate(-7deg) translateX(2px) scale(1.1); + } + 12% { + -webkit-transform: rotate(0deg); + } + 14% { + -webkit-transform: rotate(7deg) translateX(-2px); + } + 16% { + -webkit-transform: rotate(0deg); + } +} +.spin { + -webkit-animation-name: rotateRight; + -webkit-animation-duration: 15s; + -webkit-animation-timing-function: linear; + -webkit-transform-origin: 50% 50%; + -webkit-animation-iteration-count: infinite; +} +.spin:hover { + -webkit-animation-duration: 0.1s; +} +.jitter { + -webkit-animation-name: jitter; + -webkit-animation-duration: 2s; + -webkit-animation-timing-function: ease-in-out; + -webkit-transform-origin: 50% 50%; + -webkit-animation-iteration-count: infinite; +} + +#chrome-heart { + display: inline-block; + margin-bottom: -30px; + background: url(/images/chrome_logo.png) 50% 50% no-repeat; + width: 100px; + height: 100px; + background-position: 50% 50%; + background-size: cover; +} \ No newline at end of file diff --git a/slides.js b/slides.js new file mode 100644 index 0000000..db2c636 --- /dev/null +++ b/slides.js @@ -0,0 +1,455 @@ +/** + * @constructor + */ +function SlideDeck() { + this.curSlide_ = 0; + this.slides = []; + this.config_ = null; + + this.getCurrentSlideFromHash_(); + + document.addEventListener('DOMContentLoaded', + this.handleDomLoaded_.bind(this), false); +} + +/** + * @const + * @private + */ +SlideDeck.prototype.SLIDE_CLASSES_ = ['far-past', 'past', 'current', 'next', + 'far-next']; + +/** + * @private + */ +SlideDeck.prototype.getCurrentSlideFromHash_ = function() { + var slideNo = parseInt(document.location.hash.substr(1)); + + if (slideNo) { + this.curSlide_ = slideNo; + } +}; + +/** + * @private + */ +SlideDeck.prototype.handleDomLoaded_ = function() { + this.slides_ = document.querySelectorAll('slide:not(.hidden)'); + + // Load config + this.loadConfig_(); + this.addEventListeners_(); + this.updateSlides_(); +}; + +/** + * @private + */ +SlideDeck.prototype.addEventListeners_ = function() { + document.addEventListener('keydown', this.handleBodyKeyDown_.bind(this), + false); + window.addEventListener('popstate', this.handlePopState_.bind(this), + false); +}; + +/** + * @private + * @param {Event} e + */ +SlideDeck.prototype.handlePopState_ = function(e) { + if (e.state != null) { + this.curSlide_ = e.state; + this.updateSlides_(true); + } +}; + +/** + * @param {Event} e + */ +SlideDeck.prototype.handleBodyKeyDown_ = function(e) { + if (/^(input|textarea)$/i.test(e.target.nodeName) || + e.target.isContentEditable) { + return; + } + + switch (e.keyCode) { + case 39: // right arrow + case 32: // space + case 34: // PgDn + this.nextSlide(); + e.preventDefault(); + break; + + case 37: // left arrow + case 8: // Backspace + case 33: // PgUp + this.prevSlide(); + e.preventDefault(); + break; + + case 40: // down arrow + //if (this.isChromeVoxActive()) { + // speakNextItem(); + //} else { + this.nextSlide(); + //} + e.preventDefault(); + break; + + case 38: // up arrow + //if (this.isChromeVoxActive()) { + // speakPrevItem(); + //} else { + this.prevSlide(); + //} + e.preventDefault(); + break; + + case 78: // N + document.body.classList.toggle('with-notes'); + break; + + case 27: // ESC + document.body.classList.remove('with-notes'); + break; + + //case 13: // Enter + case 70: // F + // Only respect 'f'/enter on body. Don't want to capture keys from + if (e.target == document.body) { + if (e.keyCode != 13 && !document.webkitIsFullScreen) { + document.body.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT); + } else { + document.webkitCancelFullScreen(); + } + } + break; + } +}; + +/** + * @private + */ +SlideDeck.prototype.loadConfig_ = function() { + var configScripts = + document.querySelector('script[type="text/slide-config"]'); + if (configScripts) { + eval(configScripts.innerHTML); + this.config_ = slideConfig; + } + + var settings = this.config_.settings; + + this.loadTheme_(settings.theme || 'default'); + + if (settings.favIcon) { + this.addFavIcon_(settings.favIcon); + } + + if (settings.title) { + document.title = settings.title; + } + + if (settings.usePrettify || true) { + console.log('Use prettify'); + } + + if (settings.analyticsId) { + this.loadAnalytics_(); + } + + if (settings.fonts) { + this.addFonts_(settings.fonts); + } + + if (settings.useBuilds || true) { + this.makeBuildLists_(); + } +}; + +/** + * @private + * @param {Array.} fonts + */ +SlideDeck.prototype.addFonts_ = function(fonts) { + var el = document.createElement('link'); + el.rel = 'stylesheet'; + el.href = 'http://fonts.googleapis.com/css?family=' + fonts.join('|') + '&v2'; + document.querySelector('head').appendChild(el); + +}; + +/** + * @private + */ +SlideDeck.prototype.buildNextItem_ = function() { + var slide = this.slides_[this.curSlide_]; + var toBuild = slide.querySelector('.to-build'); + var built = slide.querySelector('.build-current'); + + if (built) { + built.classList.remove('build-current'); + if (built.classList.contains('fade')) { + built.classList.add('build-fade'); + } + } + + if (!toBuild) { + var items = slide.querySelectorAll('.build-fade'); + for (var j = 0, item; item = items[j]; j++) { + item.classList.remove('build-fade'); + } + return false; + } + + toBuild.classList.remove('to-build'); + toBuild.classList.add('build-current'); + + /*if (isChromeVoxActive()) { + speakAndSyncToNode(toBuild); + }*/ + + return true; +}; + +/** + * @param {boolean=} opt_dontPush + */ +SlideDeck.prototype.prevSlide = function(opt_dontPush) { + if (this.curSlide_ > 1) { + this.curSlide_--; + + this.updateSlides_(opt_dontPush); + } +}; + +/** + * @param {boolean=} opt_dontPush + */ +SlideDeck.prototype.nextSlide = function(opt_dontPush) { + + if (this.buildNextItem_()) { + return; + } + + if (this.curSlide_ < this.slides_.length - 1) { + this.curSlide_++; + + this.updateSlides_(opt_dontPush); + } +}; + +/** + * @private + */ +SlideDeck.prototype.updateSlides_ = function(opt_dontPush) { + var dontPush = opt_dontPush || false; + + var curSlide = this.curSlide_; + for (var i = 0; i < this.slides_.length; i++) { + switch (i) { + case curSlide - 2: + this.updateSlideClass_(i, 'far-past'); + break; + case curSlide - 1: + this.updateSlideClass_(i, 'past'); + break; + case curSlide: + this.updateSlideClass_(i, 'current'); + break; + case curSlide + 1: + this.updateSlideClass_(i, 'next'); + break; + case curSlide + 2: + this.updateSlideClass_(i, 'far-next'); + break; + default: + this.updateSlideClass_(i); + break; + } + }; + + /*this.triggerLeaveEvent(curSlide - 1); + triggerEnterEvent(curSlide);*/ + + window.setTimeout(this.disableSlideFrames_.bind(this, curSlide - 2), 301); + + this.enableSlideFrames_(curSlide - 1); + this.enableSlideFrames_(curSlide + 1); + this.enableSlideFrames_(curSlide + 2); + + /*if (isChromeVoxActive()) { + speakAndSyncToNode(slideEls[curSlide]); + }*/ + + this.updateHash_(dontPush); +}; + +/** + * @private + * @param {number} slideNo + */ +SlideDeck.prototype.enableSlideFrames_ = function(slideNo) { + var el = this.slides_[slideNo - 1]; + if (!el) { + return; + } + + var frames = el.getElementsByTagName('iframe'); + for (var i = 0, frame; frame = frames[i]; i++) { + this.enableFrame_(frame); + } +}; + +/** + * @private + * @param {number} slideNo + */ +SlideDeck.prototype.enableFrame_ = function(frame) { + var src = frame._src; + if (src && frame.src != src) { + frame.src = src; + } +}; + +/** + * @private + * @param {number} slideNo + */ +SlideDeck.prototype.disableSlideFrames_ = function(slideNo) { + var el = this.slides_[slideNo - 1]; + if (!el) { + return; + } + + var frames = el.getElementsByTagName('iframe'); + for (var i = 0, frame; frame = frames[i]; i++) { + this.disableFrame_(frame); + } +}; + +/** + * @private + * @param {Node} frame + */ +SlideDeck.prototype.disableFrame_ = function(frame) { + frame.src = 'about:blank'; +}; + +/** + * @private + * @param {number} slideNo + * @param {string} className + */ +SlideDeck.prototype.updateSlideClass_ = function(slideNo, className) { + var el = this.slides_[slideNo - 1]; + + if (!el) { + return; + } + + if (className) { + el.classList.add(className); + } + + for (var i = 0, slideClass; slideClass = this.SLIDE_CLASSES_[i]; i++) { + if (className != slideClass) { + el.classList.remove(slideClass); + } + } +}; + +/** + * @private + */ +SlideDeck.prototype.makeBuildLists_ = function () { + for (var i = this.curSlide_, slide; slide = this.slides_[i]; i++) { + var items = slide.querySelectorAll('.build > *'); + for (var j = 0, item; item = items[j]; j++) { + if (item.classList) { + item.classList.add('to-build'); + if (item.parentNode.classList.contains('fade')) { + item.classList.add('fade'); + } + } + } + } +}; + +/** + * @private + * @param {boolean} dontPush + */ +SlideDeck.prototype.updateHash_ = function(dontPush) { + if (!dontPush) { + var hash = '#' + this.curSlide_; + if (window.history.pushState) { + window.history.pushState(this.curSlide_, 'Slide ' + this.curSlide_, hash); + } else { + window.location.replace(hash); + } + + window['_gaq'] && window['_gaq'].push(['_trackPageview', document.location.href]); + } +}; + + +/** + * @private + * @param {string} favIcon + */ +SlideDeck.prototype.addFavIcon_ = function(favIcon) { + var el = document.createElement('link'); + el.rel = 'icon'; + el.type = 'image/png'; + el.href = favIcon; + document.querySelector('head').appendChild(el); +}; + +/** + * @private + * @param {string} theme + */ +SlideDeck.prototype.loadTheme_ = function(theme) { + var styles = ['base', theme]; + for (var i = 0, style; themeUrl = styles[i]; i++) { + var style = document.createElement('link'); + style.rel = 'stylesheet'; + style.type = 'text/css'; + if (themeUrl.indexOf('http') == -1) { + style.href = 'theme/' + themeUrl + '.css'; + } else { + style.href = themeUrl; + } + document.querySelector('head').appendChild(style); + } + + var viewportMeta = document.createElement('meta'); + viewportMeta.name = 'viewport'; + viewportMeta.content = 'width=1100,height=750'; + document.querySelector('head').appendChild(viewportMeta); + + var appleMeta = document.createElement('meta'); + appleMeta.name = 'apple-mobile-web-app-capable'; + appleMeta.content = 'yes'; + document.querySelector('head').appendChild(appleMeta); +}; + +/** + * @private + */ +SlideDeck.prototype.loadAnalytics_ = function() { + var _gaq = window['_gaq'] || []; + _gaq.push(['_setAccount', this.config_.settings.analyticsId]); + //_gaq.push(['_setDomainName', '.bleedinghtml5.appspot.com']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); +}; + +// Create the slidedeck +var slidedeck = new SlideDeck(); diff --git a/template.html b/template.html new file mode 100644 index 0000000..74220cc --- /dev/null +++ b/template.html @@ -0,0 +1,69 @@ + + + + Title + + + + + + + A Slide + + + + A Slide + + + + A Slide + + + + A Slide + + + + + + + + + + + diff --git a/theme/.base.css.swp b/theme/.base.css.swp new file mode 100644 index 0000000..563b356 Binary files /dev/null and b/theme/.base.css.swp differ diff --git a/theme/.default.css.swp b/theme/.default.css.swp new file mode 100644 index 0000000..1ae4a73 Binary files /dev/null and b/theme/.default.css.swp differ diff --git a/theme/base.css b/theme/base.css new file mode 100644 index 0000000..f9991b3 --- /dev/null +++ b/theme/base.css @@ -0,0 +1,123 @@ +/** + * 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/default.css b/theme/default.css new file mode 100644 index 0000000..18ddc40 --- /dev/null +++ b/theme/default.css @@ -0,0 +1,1134 @@ +/** + * 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), colo