diff options
-rw-r--r-- | js/slides.js | 22 | ||||
-rw-r--r-- | template.html | 12 | ||||
-rw-r--r-- | theme/css/default.css | 225 | ||||
-rw-r--r-- | theme/sass/default.scss | 43 |
4 files changed, 196 insertions, 106 deletions
diff --git a/js/slides.js b/js/slides.js index dab51f9..e48924c 100644 --- a/js/slides.js +++ b/js/slides.js | |||
@@ -64,24 +64,42 @@ SlideDeck.prototype.addEventListeners_ = function() { | |||
64 | false); | 64 | false); |
65 | window.addEventListener('popstate', this.handlePopState_.bind(this), false); | 65 | window.addEventListener('popstate', this.handlePopState_.bind(this), false); |
66 | 66 | ||
67 | // Google Developer icon gray bar should reanimate on every slide enter. | 67 | // Google Developer icon gray bar and segue slide titles should reanimate on |
68 | // every slide enter. | ||
68 | var gbars = document.querySelectorAll('slide > .gdbar'); | 69 | var gbars = document.querySelectorAll('slide > .gdbar'); |
69 | for (var i = 0, gbar; gbar = gbars[i]; ++i) { | 70 | for (var i = 0, gbar; gbar = gbars[i]; ++i) { |
70 | var slide = gbar.parentElement; | 71 | var slide = gbar.parentElement; |
72 | |||
71 | slide.addEventListener('slideenter', function(e) { | 73 | slide.addEventListener('slideenter', function(e) { |
72 | this.buildNextItem_(); | 74 | this.buildNextItem_(); |
75 | if (e.target.classList.contains('segue')) { | ||
76 | e.target.querySelector('hgroup').classList.add('on'); | ||
77 | } | ||
73 | }.bind(this), false); | 78 | }.bind(this), false); |
79 | |||
74 | slide.addEventListener('slideleave', function(e) { | 80 | slide.addEventListener('slideleave', function(e) { |
75 | var bar = e.target.querySelector('.gdbar'); | 81 | var bar = e.target.querySelector('.gdbar'); |
76 | bar.classList.remove('build-current'); | 82 | bar.classList.remove('build-current'); |
77 | bar.classList.add('to-build'); | 83 | bar.classList.add('to-build'); |
84 | if (e.target.classList.contains('segue')) { | ||
85 | e.target.querySelector('hgroup').classList.remove('on'); | ||
86 | } | ||
78 | }, false); | 87 | }, false); |
79 | } | 88 | } |
89 | |||
90 | // document.addEventListener('webkitTransitionEnd', function(e) { | ||
91 | // var el = e.target; | ||
92 | // var property = e.propertyName; | ||
93 | // if (el.classList.contains('gdbar') && property == 'background-size') { | ||
94 | // console.log('done'); | ||
95 | // el.parentElement.parentElement.querySelector('article hgroup').classList.add('on'); | ||
96 | // } | ||
97 | // }, false); | ||
80 | }; | 98 | }; |
81 | 99 | ||
82 | /** | 100 | /** |
83 | * @private | 101 | * @private |
84 | * @param {Event} e | 102 | * @param {Event} e The pop event. |
85 | */ | 103 | */ |
86 | SlideDeck.prototype.handlePopState_ = function(e) { | 104 | SlideDeck.prototype.handlePopState_ = function(e) { |
87 | if (e.state != null) { | 105 | if (e.state != null) { |
diff --git a/template.html b/template.html index 3ac5bf0..a69caae 100644 --- a/template.html +++ b/template.html | |||
@@ -148,10 +148,20 @@ function helloWorld(world) { | |||
148 | </article> | 148 | </article> |
149 | </slide> | 149 | </slide> |
150 | 150 | ||
151 | <slide class="segue dark nobackground"> | ||
152 | <aside class="gdbar"><img src="images/google_developers_icon_128.png"></aside> | ||
153 | <article class="flexbox vleft"> | ||
154 | <hgroup> | ||
155 | <h2>Segue Slide</h2> | ||
156 | <h3>Subtitle Placeholder</h3> | ||
157 | </hgroup> | ||
158 | </article> | ||
159 | </slide> | ||
160 | |||
151 | <slide class="thank-you-slide nobackground"> | 161 | <slide class="thank-you-slide nobackground"> |
152 | <aside class="gdbar right"><img src="images/google_developers_icon_128.png"></aside> | 162 | <aside class="gdbar right"><img src="images/google_developers_icon_128.png"></aside> |
153 | <section class="flexbox vleft"> | 163 | <section class="flexbox vleft"> |
154 | <h1><Thanks You!></h1> | 164 | <h2><Thanks You!></h2> |
155 | <p>Important contact information goes here.</p> | 165 | <p>Important contact information goes here.</p> |
156 | </section> | 166 | </section> |
157 | <p> | 167 | <p> |
diff --git a/theme/css/default.css b/theme/css/default.css index 714af1c..c2022de 100644 --- a/theme/css/default.css +++ b/theme/css/default.css | |||
@@ -387,19 +387,23 @@ slides > slide.far-next { | |||
387 | transform: translate3d(2040px, 0, 0); | 387 | transform: translate3d(2040px, 0, 0); |
388 | } | 388 | } |
389 | /* line 168, ../sass/default.scss */ | 389 | /* line 168, ../sass/default.scss */ |
390 | slides > slide.dark { | ||
391 | background: #515151; | ||
392 | } | ||
393 | /* line 172, ../sass/default.scss */ | ||
390 | slides > slide hgroup + article { | 394 | slides > slide hgroup + article { |
391 | margin-top: 1.5em; | 395 | margin-top: 1.5em; |
392 | } | 396 | } |
393 | /* line 172, ../sass/default.scss */ | 397 | /* line 176, ../sass/default.scss */ |
394 | slides > slide > article { | 398 | slides > slide > article { |
395 | margin-top: 2em; | 399 | margin-top: 2em; |
396 | } | 400 | } |
397 | /* line 175, ../sass/default.scss */ | 401 | /* line 179, ../sass/default.scss */ |
398 | slides > slide > article p { | 402 | slides > slide > article p { |
399 | margin-bottom: 1em; | 403 | margin-bottom: 1em; |
400 | } | 404 | } |
401 | 405 | ||
402 | /* line 186, ../sass/default.scss */ | 406 | /* line 190, ../sass/default.scss */ |
403 | slides.layout-widescreen > slide.far-past, | 407 | slides.layout-widescreen > slide.far-past, |
404 | slides.layout-faux-widescreen > slide.far-past { | 408 | slides.layout-faux-widescreen > slide.far-past { |
405 | display: block; | 409 | display: block; |
@@ -414,7 +418,7 @@ slides.layout-faux-widescreen > slide.far-past { | |||
414 | -ms-transform: translate3d(-2260px, 0, 0); | 418 | -ms-transform: translate3d(-2260px, 0, 0); |
415 | transform: translate3d(-2260px, 0, 0); | 419 | transform: translate3d(-2260px, 0, 0); |
416 | } | 420 | } |
417 | /* line 192, ../sass/default.scss */ | 421 | /* line 196, ../sass/default.scss */ |
418 | slides.layout-widescreen > slide.past, | 422 | slides.layout-widescreen > slide.past, |
419 | slides.layout-faux-widescreen > slide.past { | 423 | slides.layout-faux-widescreen > slide.past { |
420 | display: block; | 424 | display: block; |
@@ -429,7 +433,7 @@ slides.layout-faux-widescreen > slide.past { | |||
429 | -ms-transform: translate3d(-1130px, 0, 0); | 433 | -ms-transform: translate3d(-1130px, 0, 0); |
430 | transform: translate3d(-1130px, 0, 0); | 434 | transform: translate3d(-1130px, 0, 0); |
431 | } | 435 | } |
432 | /* line 198, ../sass/default.scss */ | 436 | /* line 202, ../sass/default.scss */ |
433 | slides.layout-widescreen > slide.current, | 437 | slides.layout-widescreen > slide.current, |
434 | slides.layout-faux-widescreen > slide.current { | 438 | slides.layout-faux-widescreen > slide.current { |
435 | display: block; | 439 | display: block; |
@@ -444,7 +448,7 @@ slides.layout-faux-widescreen > slide.current { | |||
444 | -ms-transform: translate3d(0, 0, 0); | 448 | -ms-transform: translate3d(0, 0, 0); |
445 | transform: translate3d(0, 0, 0); | 449 | transform: translate3d(0, 0, 0); |
446 | } | 450 | } |
447 | /* line 204, ../sass/default.scss */ | 451 | /* line 208, ../sass/default.scss */ |
448 | slides.layout-widescreen > slide.next, | 452 | slides.layout-widescreen > slide.next, |
449 | slides.layout-faux-widescreen > slide.next { | 453 | slides.layout-faux-widescreen > slide.next { |
450 | display: block; | 454 | display: block; |
@@ -459,7 +463,7 @@ slides.layout-faux-widescreen > slide.next { | |||
459 | -ms-transform: translate3d(1130px, 0, 0); | 463 | -ms-transform: translate3d(1130px, 0, 0); |
460 | transform: translate3d(1130px, 0, 0); | 464 | transform: translate3d(1130px, 0, 0); |
461 | } | 465 | } |
462 | /* line 210, ../sass/default.scss */ | 466 | /* line 214, ../sass/default.scss */ |
463 | slides.layout-widescreen > slide.far-next, | 467 | slides.layout-widescreen > slide.far-next, |
464 | slides.layout-faux-widescreen > slide.far-next { | 468 | slides.layout-faux-widescreen > slide.far-next { |
465 | display: block; | 469 | display: block; |
@@ -475,30 +479,30 @@ slides.layout-faux-widescreen > slide.far-next { | |||
475 | transform: translate3d(2260px, 0, 0); | 479 | transform: translate3d(2260px, 0, 0); |
476 | } | 480 | } |
477 | 481 | ||
478 | /* line 217, ../sass/default.scss */ | 482 | /* line 221, ../sass/default.scss */ |
479 | b { | 483 | b { |
480 | font-weight: 600; | 484 | font-weight: 600; |
481 | } | 485 | } |
482 | 486 | ||
483 | /* line 221, ../sass/default.scss */ | 487 | /* line 225, ../sass/default.scss */ |
484 | a { | 488 | a { |
485 | color: #0066cc; | 489 | color: #0066cc; |
486 | } | 490 | } |
487 | /* line 224, ../sass/default.scss */ | 491 | /* line 228, ../sass/default.scss */ |
488 | a:visited { | 492 | a:visited { |
489 | color: rgba(0, 102, 204, 0.75); | 493 | color: rgba(0, 102, 204, 0.75); |
490 | } | 494 | } |
491 | /* line 228, ../sass/default.scss */ | 495 | /* line 232, ../sass/default.scss */ |
492 | a:hover { | 496 | a:hover { |
493 | color: black; | 497 | color: black; |
494 | } | 498 | } |
495 | 499 | ||
496 | /* line 233, ../sass/default.scss */ | 500 | /* line 237, ../sass/default.scss */ |
497 | h1, h2, h3 { | 501 | h1, h2, h3 { |
498 | font-weight: 600; | 502 | font-weight: 600; |
499 | } | 503 | } |
500 | 504 | ||
501 | /* line 237, ../sass/default.scss */ | 505 | /* line 241, ../sass/default.scss */ |
502 | h2 { | 506 | h2 { |
503 | font-size: 45px; | 507 | font-size: 45px; |
504 | line-height: 45px; | 508 | line-height: 45px; |
@@ -506,7 +510,7 @@ h2 { | |||
506 | color: #515151; | 510 | color: #515151; |
507 | } | 511 | } |
508 | 512 | ||
509 | /* line 244, ../sass/default.scss */ | 513 | /* line 248, ../sass/default.scss */ |
510 | h3 { | 514 | h3 { |
511 | font-size: 30px; | 515 | font-size: 30px; |
512 | letter-spacing: -1px; | 516 | letter-spacing: -1px; |
@@ -515,38 +519,38 @@ h3 { | |||
515 | color: #797979; | 519 | color: #797979; |
516 | } | 520 | } |
517 | 521 | ||
518 | /* line 252, ../sass/default.scss */ | 522 | /* line 256, ../sass/default.scss */ |
519 | ul { | 523 | ul { |
520 | margin-left: 1.2em; | 524 | margin-left: 1.2em; |
521 | margin-bottom: 1em; | 525 | margin-bottom: 1em; |
522 | } | 526 | } |
523 | /* line 256, ../sass/default.scss */ | 527 | /* line 260, ../sass/default.scss */ |
524 | ul li { | 528 | ul li { |
525 | margin-bottom: 0.5em; | 529 | margin-bottom: 0.5em; |
526 | } | 530 | } |
527 | /* line 259, ../sass/default.scss */ | 531 | /* line 263, ../sass/default.scss */ |