aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--images/google_developers_icon_128.pngbin0 -> 7911 bytes
-rw-r--r--images/google_developers_icon_64.svg55
-rw-r--r--images/google_developers_logo.pngbin0 -> 21013 bytes
-rw-r--r--js/slides.js58
-rw-r--r--template.html129
-rw-r--r--theme/css/default.css1422
-rw-r--r--theme/sass/_base.scss24
-rw-r--r--theme/sass/default.scss1214
8 files changed, 1048 insertions, 1854 deletions
diff --git a/images/google_developers_icon_128.png b/images/google_developers_icon_128.png
new file mode 100644
index 0000000..582f905
--- /dev/null
+++ b/images/google_developers_icon_128.png
Binary files differ
diff --git a/images/google_developers_icon_64.svg b/images/google_developers_icon_64.svg
new file mode 100644
index 0000000..093f87a
--- /dev/null
+++ b/images/google_developers_icon_64.svg
@@ -0,0 +1,55 @@
1<?xml version="1.0" encoding="utf-8"?>
2<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
4<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
5 width="64px" height="64px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
6<g>
7 <g>
8 <radialGradient id="SVGID_1_" cx="46.6426" cy="3.9438" r="44.8096" gradientUnits="userSpaceOnUse">
9 <stop offset="0" style="stop-color:#0DA960"/>
10 <stop offset="1" style="stop-color:#03914B"/>
11 </radialGradient>
12 <path fill="url(#SVGID_1_)" d="M55.595,43.111c0.652,1.079,0.666,2.783,0.105,3.952l7.779-12.955c0.694-1.162,0.694-3.054,0-4.21
13 L50.905,8.956c-0.695-1.155-2.369-2.104-3.722-2.104H36.228c-1.349,0-1.885,0.949-1.19,2.104l7.827,13.031
14 c0.048,0.066,0.115,0.125,0.156,0.185L55.595,43.111z"/>
15 <radialGradient id="SVGID_2_" cx="48.1445" cy="32.0298" r="33.2363" gradientUnits="userSpaceOnUse">
16 <stop offset="0" style="stop-color:#FFCD4D"/>
17 <stop offset="1" style="stop-color:#F6C338"/>
18 </radialGradient>
19 <path fill="url(#SVGID_2_)" d="M36.228,57.148h10.956c1.353,0,3.026-0.941,3.722-2.105l4.795-7.979
20 c0.561-1.169,0.547-2.873-0.105-3.952l-7.979-13.213c0.694,1.156,0.694,3.048,0,4.21l-7.779,12.945
21 c-0.04,0.087-0.06,0.188-0.103,0.269l-4.776,7.951C34.468,56.318,34.971,57.148,36.228,57.148z"/>
22 <linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="58.6494" y1="38.4805" x2="44.5011" y2="38.4805">
23 <stop offset="0" style="stop-color:#231F20;stop-opacity:0.2"/>
24 <stop offset="1" style="stop-color:#F1F2F2;stop-opacity:0.25"/>
25 </linearGradient>
26 <path fill="url(#SVGID_3_)" d="M55.595,43.111l-7.979-13.213c0.694,1.156,0.694,3.048,0,4.21l-2.809,4.681L55.7,47.063
27 C56.261,45.895,56.247,44.19,55.595,43.111z"/>
28 </g>
29 <g>
30
31 <radialGradient id="SVGID_4_" cx="-163.5859" cy="70.9922" r="44.812" gradientTransform="matrix(-1 0 0 -1 -146.2246 131.0488)" gradientUnits="userSpaceOnUse">
32 <stop offset="0" style="stop-color:#4387FD"/>
33 <stop offset="1" style="stop-color:#4683EA"/>
34 </radialGradient>
35 <path fill="url(#SVGID_4_)" d="M8.403,20.889c-0.645-1.081-0.667-2.783-0.099-3.953L0.521,29.893
36 c-0.693,1.161-0.693,3.053,0,4.211l12.58,20.938c0.693,1.157,2.37,2.105,3.714,2.105h10.958c1.352,0,1.89-0.948,1.194-2.105
37 l-7.831-13.029c-0.044-0.066-0.116-0.125-0.154-0.188L8.403,20.889z"/>
38
39 <radialGradient id="SVGID_5_" cx="-162.0825" cy="99.0752" r="33.2407" gradientTransform="matrix(-1 0 0 -1 -146.2246 131.0488)" gradientUnits="userSpaceOnUse">
40 <stop offset="0" style="stop-color:#E04A3F"/>
41 <stop offset="1" style="stop-color:#CD372D"/>
42 </radialGradient>
43 <path fill="url(#SVGID_5_)" d="M27.773,6.852H16.815c-1.345,0-3.021,0.944-3.714,2.104l-4.796,7.979
44 c-0.568,1.17-0.546,2.873,0.099,3.953l7.985,13.216c-0.696-1.158-0.696-3.05,0-4.211l7.778-12.948
45 c0.039-0.086,0.058-0.185,0.108-0.269l4.773-7.949C29.538,7.681,29.029,6.852,27.773,6.852z"/>
46
47 <linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="-151.5752" y1="105.5283" x2="-165.7284" y2="105.5283" gradientTransform="matrix(-1 0 0 -1 -146.2246 131.0488)">
48 <stop offset="0" style="stop-color:#231F20;stop-opacity:0.2"/>
49 <stop offset="1" style="stop-color:#F1F2F2;stop-opacity:0.25"/>
50 </linearGradient>
51 <path fill="url(#SVGID_6_)" d="M8.403,20.889l7.985,13.216c-0.696-1.158-0.696-3.05,0-4.211l2.811-4.681L8.305,16.936
52 C7.737,18.105,7.758,19.808,8.403,20.889z"/>
53 </g>
54</g>
55</svg>
diff --git a/images/google_developers_logo.png b/images/google_developers_logo.png
new file mode 100644
index 0000000..4e75eac
--- /dev/null
+++ b/images/google_developers_logo.png
Binary files differ
diff --git a/js/slides.js b/js/slides.js
index 3cb2852..c6fe1ed 100644
--- a/js/slides.js
+++ b/js/slides.js
@@ -42,14 +42,14 @@ SlideDeck.prototype.getCurrentSlideFromHash_ = function() {
42 * @private 42 * @private
43 */ 43 */
44SlideDeck.prototype.handleDomLoaded_ = function() { 44SlideDeck.prototype.handleDomLoaded_ = function() {
45 this.slides_ = document.querySelectorAll('slide:not(.hidden)'); 45 this.slides_ = document.querySelectorAll('slide:not([hidden])');
46 46
47 for (var i = 0, slide; slide = this.slides_[i]; ++i) { 47 for (var i = 0, slide; slide = this.slides_[i]; ++i) {
48 slide.dataset.slideNum = i + 1; 48 slide.dataset.slideNum = i + 1;
49 slide.dataset.totalSlides = this.slides_.length; 49 slide.dataset.totalSlides = this.slides_.length;
50 } 50 }
51 51
52 // Load config 52 // Load config.
53 this.loadConfig_(); 53 this.loadConfig_();
54 this.addEventListeners_(); 54 this.addEventListeners_();
55 this.updateSlides_(); 55 this.updateSlides_();
@@ -61,8 +61,13 @@ SlideDeck.prototype.handleDomLoaded_ = function() {
61SlideDeck.prototype.addEventListeners_ = function() { 61SlideDeck.prototype.addEventListeners_ = function() {
62 document.addEventListener('keydown', this.handleBodyKeyDown_.bind(this), 62 document.addEventListener('keydown', this.handleBodyKeyDown_.bind(this),
63 false); 63 false);
64 window.addEventListener('popstate', this.handlePopState_.bind(this), 64 window.addEventListener('popstate', this.handlePopState_.bind(this), false);
65 false); 65
66 var self = this;
67 var titleSlide = document.querySelector('#title-slide');
68 titleSlide.addEventListener('slideenter', function(e) {
69 self.buildNextItem_();
70 }, false);
66}; 71};
67 72
68/** 73/**
@@ -253,6 +258,36 @@ SlideDeck.prototype.nextSlide = function(opt_dontPush) {
253 } 258 }
254}; 259};
255 260
261/* Slide events */
262
263/**
264 * Triggered when a slide enter/leave event should be dispatched.
265 *
266 * @param {string} type The type of event to trigger
267 * (e.g. 'onslideenter', 'onslideleave').
268 * @param {number} slideNo The index of the slide that is being left.
269 */
270SlideDeck.prototype.triggerSlideEvent = function(type, slideNo) {
271 var el = this.getSlideEl_(slideNo);
272 if (!el) {
273 return;
274 }
275
276 // Call onslideenter/onslideleave if the attribute is defined on this slide.
277 var func = el.getAttribute(type);
278 if (func) {
279 new Function(func).call(el); // TODO: Don't use new Function() :(
280 }
281
282 // Dispatch event to listeners setup using addEventListener.
283 var evt = document.createEvent('Event');
284 evt.initEvent(type.substring(2), true, true);
285 evt.slideNumber = slideNo + 1; // Make it readable
286 evt.slide = el;
287
288 el.dispatchEvent(evt);
289};
290
256/** 291/**
257 * @private 292 * @private
258 */ 293 */
@@ -283,8 +318,8 @@ SlideDeck.prototype.updateSlides_ = function(opt_dontPush) {
283 } 318 }
284 }; 319 };
285 320
286 /*this.triggerLeaveEvent(curSlide - 1); 321 this.triggerSlideEvent('onslideleave', curSlide - 1);
287 triggerEnterEvent(curSlide);*/ 322 this.triggerSlideEvent('onslideenter', curSlide);
288 323
289 window.setTimeout(this.disableSlideFrames_.bind(this, curSlide - 2), 301); 324 window.setTimeout(this.disableSlideFrames_.bind(this, curSlide - 2), 301);
290 325
@@ -389,9 +424,9 @@ SlideDeck.prototype.updateSlideClass_ = function(slideNo, className) {
389 * @private 424 * @private
390 */ 425 */
391SlideDeck.prototype.makeBuildLists_ = function () { 426SlideDeck.prototype.makeBuildLists_ = function () {
392 for (var i = this.curSlide_, slide; slide = this.slides_[i]; i++) { 427 for (var i = this.curSlide_, slide; slide = this.slides_[i]; ++i) {
393 var items = slide.querySelectorAll('.build > *'); 428 var items = slide.querySelectorAll('.build > *');
394 for (var j = 0, item; item = items[j]; j++) { 429 for (var j = 0, item; item = items[j]; ++j) {
395 if (item.classList) { 430 if (item.classList) {
396 item.classList.add('to-build'); 431 item.classList.add('to-build');
397 if (item.parentNode.classList.contains('fade')) { 432 if (item.parentNode.classList.contains('fade')) {
@@ -399,6 +434,13 @@ SlideDeck.prototype.makeBuildLists_ = function () {
399 } 434 }
400 } 435 }
401 } 436 }
437 // Setup Google Developer icon slide out bars.
438 var bars = slide.querySelectorAll('.gdbar');
439 for (var j = 0, bar; bar = bars[j]; ++j) {
440 if (bar.classList) {
441 bar.classList.add('to-build');
442 }
443 }
402 } 444 }
403}; 445};
404 446
diff --git a/template.html b/template.html
index 3100726..365adea 100644
--- a/template.html
+++ b/template.html
@@ -5,65 +5,88 @@
5 <meta charset="utf-8"> 5 <meta charset="utf-8">
6 <meta http-equiv="X-UA-Compatible" content="chrome=1"> 6 <meta http-equiv="X-UA-Compatible" content="chrome=1">
7</head> 7</head>
8<body style="display: none"> 8<body style="opacity: 0;">
9 <slides>
10 <slide>
11 A Slide
12 </slide>
13 9
14 <slide> 10<slides>
15 A Slide 11 <slide class="logoslide">
16 </slide> 12 <section class="flexcenter">
13 <img src="images/google_developers_logo.png">
14 </section>
15 </slide>
17 16
18 <slide> 17 <slide id="title-slide">
19 A Slide 18 <!-- <aside class="bar"></aside> -->
20 </slide> 19 <aside class="gdbar"><img src="images/google_developers_icon_128.png"></aside>
20 <hgroup>
21 <h1>Title Goes Here</h1>
22 <h2>Subtitle Goes Here</h2>
23 <p>
24 Speaker Name<br>
25 Title
26 </p>
27 </hgroup>
28 </slide>