From 79c730f664bd8bda196c13282c5650f4ab282b25 Mon Sep 17 00:00:00 2001 From: Eric Bidelman Date: Sun, 8 Apr 2012 17:51:12 -0700 Subject: More styling. Fixes for FF --- images/google_developers_logo_white.png | Bin 0 -> 10427 bytes js/slides.js | 26 +-- template.html | 137 +++++++++++++-- theme/css/default.css | 298 ++++++++++++++++++++++---------- theme/sass/_base.scss | 10 +- theme/sass/default.scss | 126 +++++++++++--- 6 files changed, 446 insertions(+), 151 deletions(-) create mode 100644 images/google_developers_logo_white.png diff --git a/images/google_developers_logo_white.png b/images/google_developers_logo_white.png new file mode 100644 index 0000000..4fe17f7 Binary files /dev/null and b/images/google_developers_logo_white.png differ diff --git a/js/slides.js b/js/slides.js index f6d5cc6..dab51f9 100644 --- a/js/slides.js +++ b/js/slides.js @@ -65,15 +65,18 @@ SlideDeck.prototype.addEventListeners_ = function() { window.addEventListener('popstate', this.handlePopState_.bind(this), false); // Google Developer icon gray bar should reanimate on every slide enter. - var titleSlide = document.querySelector('#title-slide'); - titleSlide.addEventListener('slideenter', function(e) { - this.buildNextItem_(); - }.bind(this), false); - titleSlide.addEventListener('slideleave', function(e) { - var bar = e.target.querySelector('.gdbar'); - bar.classList.remove('build-current'); - bar.classList.add('to-build'); - }, false); + var gbars = document.querySelectorAll('slide > .gdbar'); + for (var i = 0, gbar; gbar = gbars[i]; ++i) { + var slide = gbar.parentElement; + slide.addEventListener('slideenter', function(e) { + this.buildNextItem_(); + }.bind(this), false); + slide.addEventListener('slideleave', function(e) { + var bar = e.target.querySelector('.gdbar'); + bar.classList.remove('build-current'); + bar.classList.add('to-build'); + }, false); + } }; /** @@ -175,8 +178,7 @@ SlideDeck.prototype.loadConfig_ = function() { } if (!!!('usePrettify' in settings) || settings.usePrettify) { - console.log('Use prettify'); - //TODO + prettyPrint(); } if (settings.analyticsId) { @@ -489,7 +491,7 @@ SlideDeck.prototype.addFavIcon_ = function(favIcon) { * @param {string} theme */ SlideDeck.prototype.loadTheme_ = function(theme) { - var styles = [theme]; + var styles = [/*'../../js/prettify/prettify',*/ theme]; for (var i = 0, style; themeUrl = styles[i]; i++) { var style = document.createElement('link'); style.rel = 'stylesheet'; diff --git a/template.html b/template.html index a55f3fe..3ac5bf0 100644 --- a/template.html +++ b/template.html @@ -7,14 +7,15 @@ - - -
- + + + +
+
- +

Title Goes Here

@@ -27,44 +28,145 @@ -

Presentation Bullet Slide Layout

+

Slide with Bullets

    -
  • Bullet 1
    • -
  • Bullet 2 +
  • Titles are formatted as Open Sans with bold applied and font size is set at 45
    • +
  • Title capitalization is title case
      -
    • Bullet 3
      • +
    • Subtitle capitalization is title case
    • -
  • Bullet 4
    • +
  • Subtitle capitalization is title case
    • +
  • Titles and subtitles should never have a period at the end
-

Presentation Bullet Slide Layout

+

Slide with Bullets that Build

Subtitle Placeholder

- A Slide2 +

A list where items build:

+
    +
  • Blah
    • +
  • Blah
    • +
  • Blah
    • +
+

Another list, but items fade as they build:

+
    +
  • Hover over me!
    • +
  • Hover over me!
    • +
  • Hover over me!
    • +
+
+ + + +

Slide with Smaller Font

+
+
    +
  • Titles are formatted as Open Sans with bold applied and font size is set at 45
    • +
  • Title capitalization is title case +
      +
    • Subtitle capitalization is title case
      • +
    +
    • +
  • Subtitle capitalization is title case
    • +
  • Titles and subtitles should never have a period at the end
    • +
+ + +
+

Code Slide (with Subtitle Placeholder)

+

Subtitle Placeholder

+
+
+ 
+<script type='text/javascript'>
+  // Say hello world until the user starts questioning
+  // the meaningfulness of their existence.
+  function helloWorld(world) {
+    for (var i = 42; --i >= 0;) {
+      alert('Hello ' + String(world));
+    }
+  }
+</script>
+
+
+ + + +
+

Code Slide (Smaller Font)

+
+
+ 
+// Say hello world until the user starts questioning
+// the meaningfulness of their existence.
+function helloWorld(world) {
+  for (var i = 42; --i >= 0;) {
+    alert('Hello ' + String(world));
+  }
+}
+
+
+<style>
+  p { color: pink }
+  b { color: blue }
+</style>
+
+
+<!DOCTYPE html>
+<html>
+<head>
+  <title>My Awesome Page</title>
+</head>
+<body>
+  <p>Hello world</p>
+<body>
+</html>
+
+
- -

Presentation Bullet Slide Layout

+

Slide with Speaker Notes

- A Slide2 + Press 'n'
+ + + +
+

<Thanks You!>

+

Important contact information goes here.

+
+

+ Insert contact info
+ Insert contact info
+ Insert contact info +

+ + + +
+ +
+ + + diff --git a/theme/css/default.css b/theme/css/default.css index 03e25d1..714af1c 100644 --- a/theme/css/default.css +++ b/theme/css/default.css @@ -66,13 +66,13 @@ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, /** * Base SlideDeck Styles */ -/* line 34, ../sass/_base.scss */ +/* line 42, ../sass/_base.scss */ html { height: 100%; overflow: hidden; } -/* line 39, ../sass/_base.scss */ +/* line 47, ../sass/_base.scss */ body { margin: 0; padding: 0; @@ -92,12 +92,12 @@ body { transition: opacity 800ms ease-in; } -/* line 57, ../sass/_base.scss */ +/* line 65, ../sass/_base.scss */ slides > slide[hidden] { display: none !important; } -/* line 61, ../sass/_base.scss */ +/* line 69, ../sass/_base.scss */ slides { width: 100%; height: 100%; @@ -115,7 +115,7 @@ slides { transform-style: preserve-3d; } -/* line 72, ../sass/_base.scss */ +/* line 80, ../sass/_base.scss */ slides > slide { display: block; position: absolute; @@ -165,7 +165,7 @@ slides > slide { margin-left: 500px; }*/ /* Slide styles */ -/* line 122, ../sass/_base.scss */ +/* line 130, ../sass/_base.scss */ article.fill iframe { position: absolute; left: 0; @@ -183,7 +183,7 @@ article.fill iframe { z-index: -1; } -/* line 137, ../sass/_base.scss */ +/* line 145, ../sass/_base.scss */ slide.fill { background-repeat: no-repeat; -moz-background-size: cover; @@ -192,7 +192,7 @@ slide.fill { background-size: cover; } -/* line 142, ../sass/_base.scss */ +/* line 150, ../sass/_base.scss */ slide.fill img { position: absolute; left: 0; @@ -274,7 +274,7 @@ slides.nobackground slide:not(.fill)::before { } */ /* line 98, ../sass/default.scss */ -slides > slide:not(:first-of-type):not(.fill):not(.nobackground):before { +slides > slide:not(.fill):not(.nobackground):before { font-size: 12pt; content: "#io2012 @yourtwitter"; position: absolute; @@ -290,7 +290,7 @@ slides > slide:not(:first-of-type):not(.fill):not(.nobackground):before { line-height: 1.9; } /* line 110, ../sass/default.scss */ -slides > slide:not(:first-of-type):not(.fill):not(.nobackground):after { +slides > slide:not(.fill):not(.nobackground):after { font-size: 12pt; content: attr(data-slide-num) "/" attr(data-total-slides); position: absolute; @@ -387,11 +387,19 @@ slides > slide.far-next { transform: translate3d(2040px, 0, 0); } /* line 168, ../sass/default.scss */ +slides > slide hgroup + article { + margin-top: 1.5em; +} +/* line 172, ../sass/default.scss */ slides > slide > article { margin-top: 2em; } +/* line 175, ../sass/default.scss */ +slides > slide > article p { + margin-bottom: 1em; +} -/* line 178, ../sass/default.scss */ +/* line 186, ../sass/default.scss */ slides.layout-widescreen > slide.far-past, slides.layout-faux-widescreen > slide.far-past { display: block; @@ -406,7 +414,7 @@ slides.layout-faux-widescreen > slide.far-past { -ms-transform: translate3d(-2260px, 0, 0); transform: translate3d(-2260px, 0, 0); } -/* line 184, ../sass/default.scss */ +/* line 192, ../sass/default.scss */ slides.layout-widescreen > slide.past, slides.layout-faux-widescreen > slide.past { display: block; @@ -421,7 +429,7 @@ slides.layout-faux-widescreen > slide.past { -ms-transform: translate3d(-1130px, 0, 0); transform: translate3d(-1130px, 0, 0); } -/* line 190, ../sass/default.scss */ +/* line 198, ../sass/default.scss */ slides.layout-widescreen > slide.current, slides.layout-faux-widescreen > slide.current { display: block; @@ -436,7 +444,7 @@ slides.layout-faux-widescreen > slide.current { -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } -/* line 196, ../sass/default.scss */ +/* line 204, ../sass/default.scss */ slides.layout-widescreen > slide.next, slides.layout-faux-widescreen > slide.next { display: block; @@ -451,7 +459,7 @@ slides.layout-faux-widescreen > slide.next { -ms-transform: translate3d(1130px, 0, 0); transform: translate3d(1130px, 0, 0); } -/* line 202, ../sass/default.scss */ +/* line 210, ../sass/default.scss */ slides.layout-widescreen > slide.far-next, slides.layout-faux-widescreen > slide.far-next { display: block; @@ -467,30 +475,30 @@ slides.layout-faux-widescreen > slide.far-next { transform: translate3d(2260px, 0, 0); } -/* line 209, ../sass/default.scss */ +/* line 217, ../sass/default.scss */ b { font-weight: 600; } -/* line 213, ../sass/default.scss */ +/* line 221, ../sass/default.scss */ a { color: #0066cc; } -/* line 216, ../sass/default.scss */ +/* line 224, ../sass/default.scss */ a:visited { color: rgba(0, 102, 204, 0.75); } -/* line 220, ../sass/default.scss */ +/* line 228, ../sass/default.scss */ a:hover { color: black; } -/* line 225, ../sass/default.scss */ +/* line 233, ../sass/default.scss */ h1, h2, h3 { font-weight: 600; } -/* line 229, ../sass/default.scss */ +/* line 237, ../sass/default.scss */ h2 { font-size: 45px; line-height: 45px; @@ -498,10 +506,9 @@ h2 { color: #515151; } -/* line 243, ../sass/default.scss */ +/* line 244, ../sass/default.scss */ h3 { font-size: 30px; - margin: 0 0 1em 0; letter-spacing: -1px; line-height: 2; font-weight: inherit; @@ -510,48 +517,74 @@ h3 { /* line 252, ../sass/default.scss */ ul { - margin-left: 1.5em; + margin-left: 1.2em; + margin-bottom: 1em; } -/* line 255, ../sass/default.scss */ +/* line 256, ../sass/default.scss */ ul li { margin-bottom: 0.5em; } -/* line 258, ../sass/default.scss */ +/* line 259, ../sass/default.scss */ +ul li ul { + margin-left: 2em; + margin-bottom: 0; +} +/* line 263, ../sass/default.scss */ ul li ul li:before { content: '-'; + font-weight: 600; } -/* line 263, ../sass/default.scss */ +/* line 270, ../sass/default.scss */ ul > li:before { content: '·'; - width: 0.5em; - margin-left: -1.3em; + margin-left: -1em; position: absolute; + font-weight: 600; } -/* line 270, ../sass/default.scss */ +/* line 278, ../sass/default.scss */ ul ul { margin-top: .5em; } -/* line 275, ../sass/default.scss */ +/* line 283, ../sass/default.scss */ pre { font-family: 'Inconsolata', 'Courier New', monospace; font-size: 20px; line-height: 28px; - padding: 10px 20px; + padding: 10px 0 10px 60px; letter-spacing: -1px; margin-bottom: 20px; - text-shadow: none; + width: 106%; + background-color: #e6e6e6; + left: -60px; + position: relative; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; /*overflow: hidden;*/ } +/* line 297, ../sass/default.scss */ +pre:after { + content: attr(data-lang); + background-color: #a9a9a9; + right: 0; + top: 0; + position: absolute; + font-size: 16pt; + color: white; + padding: 2px 25px; + text-transform: uppercase; +} -/* line 286, ../sass/default.scss */ +/* line 310, ../sass/default.scss */ code { font-size: 95%; font-family: 'Inconsolata', 'Courier New', monospace; color: black; } -/* line 292, ../sass/default.scss */ +/* line 316, ../sass/default.scss */ iframe { width: 100%; height: 620px; @@ -560,17 +593,17 @@ iframe { margin: -1px; } -/* line 300, ../sass/default.scss */ +/* line 324, ../sass/default.scss */ dt { font-weight: bold; } -/* line 304, ../sass/default.scss */ +/* line 328, ../sass/default.scss */ h3 + iframe { height: 540px; } -/* line 308, ../sass/default.scss */ +/* line 332, ../sass/default.scss */ button { display: inline-block; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(40%, #f9f9f9), color-stop(70%, #e3e3e3)); @@ -599,12 +632,12 @@ button { font-size: 10pt; } -/* line 323, ../sass/default.scss */ +/* line 347, ../sass/default.scss */ button:hover { border-color: black; } -/* line 327, ../sass/default.scss */ +/* line 351, ../sass/default.scss */ button:active { background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(40%, #e3e3e3), color-stop(70%, #f9f9f9)); background: -webkit-linear-gradient(#e3e3e3 40%, #f9f9f9 70%); @@ -614,62 +647,62 @@ button:active { background: linear-gradient(#e3e3e3 40%, #f9f9f9 70%); } -/* line 331, ../sass/default.scss */ +/* line 355, ../sass/default.scss */ .blue { color: #0066cc; } -/* line 334, ../sass/default.scss */ +/* line 358, ../sass/default.scss */ .yellow { color: #ffd319; } -/* line 337, ../sass/default.scss */ +/* line 361, ../sass/default.scss */ .green { color: #008a35; } -/* line 340, ../sass/default.scss */ +/* line 364, ../sass/default.scss */ .red { color: red; } -/* line 343, ../sass/default.scss */ +/* line 367, ../sass/default.scss */ .black { color: black; } -/* line 346, ../sass/default.scss */ +/* line 370, ../sass/default.scss */ .white { color: white; } -/* line 349, ../sass/default.scss */ +/* line 373, ../sass/default.scss */ .dark { background-color: rgba(0, 0, 0, 0.2); color: white; } -/* line 354, ../sass/default.scss */ +/* line 378, ../sass/default.scss */ img.centered { margin: 0 auto; display: block; } -/* line 359, ../sass/default.scss */ +/* line 383, ../sass/default.scss */ table { width: 100%; border-collapse: collapse; margin-top: 40px; } -/* line 365, ../sass/default.scss */ +/* line 389, ../sass/default.scss */ th { font-weight: 600; text-align: left; } -/* line 371, ../sass/default.scss */ +/* line 395, ../sass/default.scss */ td, th { border: 1px solid #e0e0e0; @@ -677,7 +710,7 @@ th { vertical-align: top; } -/* line 377, ../sass/default.scss */ +/* line 401, ../sass/default.scss */ q { display: block; font-size: 60px; @@ -685,7 +718,7 @@ q { margin-left: 20px; margin-top: 100px; } -/* line 384, ../sass/default.scss */ +/* line 408, ../sass/default.scss */ q:before { content: '“'; position: absolute; @@ -696,7 +729,7 @@ q:before { font-size: 90px; color: silver; } -/* line 394, ../sass/default.scss */ +/* line 418, ../sass/default.scss */ q:after { content: '”'; position: absolute; @@ -705,19 +738,19 @@ q:after { color: silver; } -/* line 403, ../sass/default.scss */ +/* line 427, ../sass/default.scss */ div.author { text-align: right; font-size: 40px; margin-top: 20px; margin-right: 150px; } -/* line 410, ../sass/default.scss */ +/* line 434, ../sass/default.scss */ div.author:before { content: '—'; } -/* line 415, ../sass/default.scss */ +/* line 439, ../sass/default.scss */ slide.fill { -moz-border-radius: 5px; -webkit-border-radius: 5px; @@ -726,7 +759,7 @@ slide.fill { -khtml-border-radius: 5px; border-radius: 5px; } -/* line 418, ../sass/default.scss */ +/* line 442, ../sass/default.scss */ slide.fill h3 { background: rgba(255, 255, 255, 0.75); padding-top: .2em; @@ -737,7 +770,7 @@ slide.fill h3 { margin-right: -60px; padding-right: 60px; } -/* line 429, ../sass/default.scss */ +/* line 453, ../sass/default.scss */ slide.fill h4 { display: inline; position: absolute; @@ -746,106 +779,111 @@ slide.fill h4 { } /* Size variants */ -/* line 440, ../sass/default.scss */ +/* line 464, ../sass/default.scss */ article.smaller p, article.smaller ul { font-size: 20px; line-height: 24px; letter-spacing: 0; } -/* line 445, ../sass/default.scss */ +/* line 469, ../sass/default.scss */ article.smaller table { font-size: 20px; line-height: 24px; letter-spacing: 0; } -/* line 450, ../sass/default.scss */ +/* line 474, ../sass/default.scss */ article.smaller pre { font-size: 15px; line-height: 20px; letter-spacing: 0; } -/* line 455, ../sass/default.scss */ +/* line 479, ../sass/default.scss */ article.smaller q { font-size: 40px; line-height: 48px; } -/* line 459, ../sass/default.scss */ +/* line 483, ../sass/default.scss */ article.smaller q:before, article.smaller q:after { font-size: 60px; } /* Builds */ -/* line 468, ../sass/default.scss */ +/* line 492, ../sass/default.scss */ .build > * { -moz-transition: opacity 0.5s ease-in-out 0.2s; -webkit-transition: opacity 0.5s ease-in-out 0.2s; -o-transition: opacity 0.5s ease-in-out 0.2s; transition: opacity 0.5s ease-in-out 0.2s; } -/* line 472, ../sass/default.scss */ +/* line 496, ../sass/default.scss */ .build .to-build { opacity: 0; } -/* line 476, ../sass/default.scss */ +/* line 500, ../sass/default.scss */ .build .build-fade { opacity: 0.5; } -/* line 479, ../sass/default.scss */ +/* line 503, ../sass/default.scss */ .build .build-fade:hover { opacity: 1.0; } /* Pretty print */ -/* line 488, ../sass/default.scss */ +/* line 512, ../sass/default.scss */ .prettyprint .str, .prettyprint .atv { /* a markup attribute value */ - color: #008a35; + color: #009f5d; } -/* line 492, ../sass/default.scss */ +/* line 516, ../sass/default.scss */ .prettyprint .kwd, .prettyprint .tag { /* a markup tag name */ color: #0066cc; } -/* line 495, ../sass/default.scss */ +/* line 519, ../sass/default.scss */ .prettyprint .com { /* a comment */ - color: #7f7f7f; + color: #797979; font-style: italic; } -/* line 499, ../sass/default.scss */ +/* line 523, ../sass/default.scss */ .prettyprint .lit { /* a literal value */ - color: #7f0000; + color: #f6c000; } -/* line 504, ../sass/default.scss */ +/* line 528, ../sass/default.scss */ .prettyprint .pun, .prettyprint .opn, .prettyprint .clo { - color: #7f7f7f; + color: #515151; } -/* line 510, ../sass/default.scss */ +/* line 534, ../sass/default.scss */ .prettyprint .typ, .prettyprint .atn, .prettyprint .dec, .prettyprint .var { /* a declaration; a variable name */ - color: #7f007f; + color: #d94d3a; +} + +/* line 537, ../sass/default.scss */ +.prettyprint .pln { + color: #515151; } -/* line 514, ../sass/default.scss */ +/* line 541, ../sass/default.scss */ .with-notes .note { opacity: 1; pointer-events: auto; } -/* line 519, ../sass/default.scss */ +/* line 546, ../sass/default.scss */ .note { position: absolute; z-index: 100; @@ -884,7 +922,7 @@ article.smaller q:before, article.smaller q:after { -khtml-border-radius: 5px; border-radius: 5px; } -/* line 535, ../sass/default.scss */ +/* line 563, ../sass/default.scss */ .note > section { background: #fff; -moz-border-radius: 5px; @@ -901,17 +939,17 @@ article.smaller q:before, article.smaller q:after { padding: 2em; } -/* line 544, ../sass/default.scss */ +/* line 572, ../sass/default.scss */ input, button { vertical-align: middle; } -/* line 548, ../sass/default.scss */ +/* line 576, ../sass/default.scss */ .centered { text-align: center; } -/* line 552, ../sass/default.scss */ +/* line 580, ../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%); @@ -920,13 +958,17 @@ input, button { box-reflect: below 3px linear-gradient(rgba(255, 255, 255, 0) 85%, #ffffff 150%); } -/* line 560, ../sass/default.scss */ -.flexcenter { +/* line 588, ../sass/default.scss */ +.flexbox { display: -webkit-box !important; display: -moz-box !important; display: -ms-box !important; display: -o-box !important; display: box !important; +} + +/* line 592, ../sass/default.scss */ +.flexbox.vcenter { -moz-box-orient: vertical; -webkit-box-orient: vertical; -ms-box-orient: vertical; @@ -940,16 +982,61 @@ input, button { -ms-box-pack: center; box-pack: center; height: 100%; + width: 100%; +} + +/* line 598, ../sass/default.scss */ +.flexbox.vleft { + -moz-box-orient: vertical; + -webkit-box-orient: vertical; + -ms-box-orient: vertical; + box-orient: vertical; + -moz-box-align: left; + -webkit-box-align: left; + -ms-box-align: left; + box-align: left; + -moz-box-pack: center; + -webkit-box-pack: center; + -ms-box-pack: center; + box-pack: center; + height: 100%; + width: 100%; } /* ===== SLIDE CONTENT ===== */ -/* line 569, ../sass/default.scss */ +/* line 606, ../sass/default.scss */ +.logoslide.dark { + background: #515151; +} +/* line 610, ../sass/default.scss */ .logoslide img { width: 383px; height: 92px; } -/* line 575, ../sass/default.scss */ +/* line 616, ../sass/default.scss */ +.thank-you-slide { + background: #4387fd; + color: white; +} +/* line 620, ../sass/default.scss */ +.thank-you-slide h1 { + font-size: 60px; +} +/* line 624, ../sass/default.scss */ +.thank-you-slide section > p { + margin-top: 2em; + font-size: 20pt; +} +/* line 629, ../sass/default.scss */ +.thank-you-slide > p { + position: absolute; + bottom: 80px; + font-size: 24pt; + line-height: 1.3; +} + +/* line 637, ../sass/default.scss */ aside.gdbar { height: 97px; width: 155px; @@ -979,11 +1066,32 @@ aside.gdbar { transition: all 0.5s ease-out 0.6s; /* Better to transition only on background-size, but not sure how to do that with the mixin. */ } -/* line 587, ../sass/default.scss */ +/* line 649, ../sass/default.scss */ aside.gdbar.to-build { background-size: 0 100%; } -/* line 591, ../sass/default.scss */ +/* line 653, ../sass/default.scss */ +aside.gdbar.right { + right: 0; + left: -moz-initial; + left: initial; + top: 254px; + /* 96 is height of gray icon bar */ + -moz-transform: rotateZ(180deg); + -webkit-transform: rotateZ(180deg); + -o-transform: rotateZ(180deg); + -ms-transform: rotateZ(180deg); + transform: rotateZ(180deg); +} +/* line 660, ../sass/default.scss */ +aside.gdbar.right img { + -moz-transform: rotateZ(180deg); + -webkit-transform: rotateZ(180deg); + -o-transform: rotateZ(180deg); + -ms-transform: rotateZ(180deg); + transform: rotateZ(180deg); +} +/* line 665, ../sass/default.scss */ aside.gdbar img { width: 85px; height: 85px; @@ -992,25 +1100,25 @@ aside.gdbar img { margin: 8px 12px; } -/* line 601, ../sass/default.scss */ +/* line 675, ../sass/default.scss */ #title-slide hgroup { position: absolute; bottom: 150px; } -/* line 605, ../sass/default.scss */ +/* line 679, ../sass/default.scss */ #title-slide hgroup h1 { font-size: 65px; line-height: 1.4; letter-spacing: -3px; color: #515151; } -/* line 612, ../sass/default.scss */ +/* line 686, ../sass/default.scss */ #title-slide hgroup h2 { font-size: 34px; color: #a9a9a9; font-weight: inherit; } -/* line 618, ../sass/default.scss */ +/* line 692, ../sass/default.scss */ #title-slide hgroup p { font-size: 20px; color: #797979; diff --git a/theme/sass/_base.scss b/theme/sass/_base.scss index 6490ef8..d8b9554 100644 --- a/theme/sass/_base.scss +++ b/theme/sass/_base.scss @@ -16,17 +16,25 @@ -o-font-smoothing: $val; } -@mixin flexcenter { +@mixin flexbox { display: -webkit-box !important; display: -moz-box !important; display: -ms-box !important; display: -o-box !important; display: box !important; +} + +@mixin flex-center-center { @include box-orient(vertical); @include box-align(center); @include box-pack(center); } +@mixin flex-left-center { + @include box-orient(vertical); + @include box-align(left); + @include box-pack(center); +} /** * Base SlideDeck Styles diff --git a/theme/sass/default.scss b/theme/sass/default.scss index 102b7b3..f1088ba 100644 --- a/theme/sass/default.scss +++ b/theme/sass/default.scss @@ -75,7 +75,7 @@ slides.layout-faux-widescreen > slide { padding: $slide-top-bottom-padding 160px; } -slides > slide:not(.nobackground):not(.logoslide):not(.fill) { +slides > slide:not(.nobackground):not(.fill) { //background: white url(../../images/google_developers_icon_128.png) ($brand-small-icon-size * 2) 98% no-repeat; //@include background-size($brand-small-icon-size $brand-small-icon-size); } @@ -93,7 +93,7 @@ slides.nobackground slide:not(.fill)::before { } */ -slides > slide:not(:first-of-type):not(.fill):not(.nobackground) { +slides > slide:not(.fill):not(.nobackground) { &:before { font-size: 12pt; @@ -165,8 +165,16 @@ slides > slide { @include transform(translate3d($translateX * 2, 0, 0)); } + hgroup + article { + margin-top: 1.5em; + } + > article { margin-top: 2em; + + p { + margin-bottom: 1em; + } } } @@ -231,18 +239,10 @@ h2 { line-height: 45px; letter-spacing: -2px; color: $gray-4; - - //padding: 30px 60px; - - //width: 100%; - //background: rgba(255, 255, 255, 0.3); - //@include box-shadow(0 1px 5px #333); - //@include box-sizing(border-box); } h3 { font-size: 30px; - margin: 0 0 1em 0; letter-spacing: -1px; line-height: 2; font-weight: inherit; @@ -250,21 +250,29 @@ h3 { } ul { - margin-left: 1.5em; + margin-left: 1.2em; + margin-bottom: 1em; li { margin-bottom: 0.5em; - ul li:before { - content: '-'; + ul { + margin-left: 2em; + margin-bottom: 0; + + li:before { + content: '-'; + font-weight: 600; + } } } > li:before { content: '·'; - width: 0.5em; - margin-left: -1.3em; + //width: 0.5em; + margin-left: -1em; position: absolute; + font-weight: 600; } ul { @@ -276,11 +284,27 @@ pre { font-family: 'Inconsolata', 'Courier New', monospace; font-size: 20px; line-height: 28px; - padding: 10px 20px; + padding: 10px 0 10px $slide-left-right-padding; letter-spacing: -1px; margin-bottom: 20px; - @include text-shadow(none); + width: 106%; + background-color: $gray-1; + left: -$slide-left-right-padding; + position: relative; + @include box-sizing(border-box); /*overflow: hidden;*/ + + &:after { + content: attr(data-lang); + background-color: $gray-2; + right: 0; + top: 0; + position: absolute; + font-size: 16pt; + color: white; + padding: 2px 25px; + text-transform: uppercase; + } } code { @@ -486,29 +510,32 @@ article.smaller { .prettyprint .str, /* string content */ .prettyprint .atv { /* a markup attribute value */ - color: rgb(0, 138, 53); + color: $brand-green-secondary2; //rgb(0, 138, 53); } .prettyprint .kwd, /* a keyword */ .prettyprint .tag { /* a markup tag name */ color: rgb(0, 102, 204); } .prettyprint .com { /* a comment */ - color: rgb(127, 127, 127); + color: $gray-3; //rgb(127, 127, 127); font-style: italic; } .prettyprint .lit { /* a literal value */ - color: rgb(127, 0, 0); + color: $brand-yellow-secondary2; //rgb(127, 0, 0); } .prettyprint .pun, /* punctuation, lisp open bracket, lisp close bracket */ .prettyprint .opn, .prettyprint .clo { - color: rgb(127, 127, 127); + color: $gray-4; //rgb(127, 127, 127); } .prettyprint .typ, /* a type name */ .prettyprint .atn, /* a markup attribute name */ .prettyprint .dec, .prettyprint .var { /* a declaration; a variable name */ - color: rgb(127, 0, 127); + color: $brand-red-secondary2; //rgb(127, 0, 127); +} +.prettyprint .pln { + color: $gray-4; } .with-notes .note { @@ -524,7 +551,8 @@ article.smaller { top: 0; left: 0; background: rgba(0, 0, 0, 0.3); - @include flexcenter; + @include flexbox; + @include flex-center-center; pointer-events: none; @include transition(all 0.2s ease-in-out); @@ -557,14 +585,27 @@ input, button { box-reflect: below 3px linear-gradient(rgba(255,255,255,0) 85%, white 150%); } -.flexcenter { - @include flexcenter; +.flexbox { + @include flexbox; +} + +.flexbox.vcenter { + @include flex-center-center; height: 100%; + width: 100%; +} + +.flexbox.vleft { + @include flex-left-center; + height: 100%; + width: 100%; } /* ===== SLIDE CONTENT ===== */ .logoslide { - //@include flexcenter; + &.dark { + background: $gray-4; + } img { width: 383px; @@ -572,6 +613,27 @@ input, button { } } +.thank-you-slide { + background: $brand-blue; + color: white; + + h1 { + font-size: 60px; + } + + section > p { + margin-top: 2em; + font-size: 20pt; + } + + > p { + position: absolute; + bottom: $slide-top-bottom-padding * 2; + font-size: 24pt; + line-height: 1.3; + } +} + aside.gdbar { height: 97px; width: 155px; @@ -588,6 +650,18 @@ aside.gdbar { background-size: 0 100%; } + &.right { + right: 0; + left: -moz-initial; + left: initial; + top: ($slide-height / 2) - 96; /* 96 is height of gray icon bar */ + @include transform(rotateZ(180deg)); + + img { + @include transform(rotateZ(180deg)); + } + } + img { width: 85px; height: 85px; -- cgit v1.2.3