diff options
-rw-r--r-- | images/google_developers_logo_white.png | bin | 0 -> 10427 bytes | |||
-rw-r--r-- | js/slides.js | 26 | ||||
-rw-r--r-- | template.html | 137 | ||||
-rw-r--r-- | theme/css/default.css | 298 | ||||
-rw-r--r-- | theme/sass/_base.scss | 10 | ||||
-rw-r--r-- | theme/sass/default.scss | 126 |
6 files changed, 446 insertions, 151 deletions
diff --git a/images/google_developers_logo_white.png b/images/google_developers_logo_white.png new file mode 100644 index 0000000..4fe17f7 --- /dev/null +++ b/images/google_developers_logo_white.png | |||
Binary files 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() { | |||
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 should reanimate on every slide enter. |
68 | var titleSlide = document.querySelector('#title-slide'); | 68 | var gbars = document.querySelectorAll('slide > .gdbar'); |
69 | titleSlide.addEventListener('slideenter', function(e) { | 69 | for (var i = 0, gbar; gbar = gbars[i]; ++i) { |
70 | this.buildNextItem_(); | 70 | var slide = gbar.parentElement; |
71 | }.bind(this), false); | 71 | slide.addEventListener('slideenter', function(e) { |
72 | titleSlide.addEventListener('slideleave', function(e) { | 72 | this.buildNextItem_(); |
73 | var bar = e.target.querySelector('.gdbar'); | 73 | }.bind(this), false); |
74 | bar.classList.remove('build-current'); | 74 | slide.addEventListener('slideleave', function(e) { |
75 | bar.classList.add('to-build'); | 75 | var bar = e.target.querySelector('.gdbar'); |
76 | }, false); | 76 | bar.classList.remove('build-current'); |
77 | bar.classList.add('to-build'); | ||
78 | }, false); | ||
79 | } | ||
77 | }; | 80 | }; |
78 | 81 | ||
79 | /** | 82 | /** |
@@ -175,8 +178,7 @@ SlideDeck.prototype.loadConfig_ = function() { | |||
175 | } | 178 | } |
176 | 179 | ||
177 | if (!!!('usePrettify' in settings) || settings.usePrettify) { | 180 | if (!!!('usePrettify' in settings) || settings.usePrettify) { |
178 | console.log('Use prettify'); | 181 | prettyPrint(); |
179 | //TODO | ||
180 | } | 182 | } |
181 | 183 | ||
182 | if (settings.analyticsId) { | 184 | if (settings.analyticsId) { |
@@ -489,7 +491,7 @@ SlideDeck.prototype.addFavIcon_ = function(favIcon) { | |||
489 | * @param {string} theme | 491 | * @param {string} theme |
490 | */ | 492 | */ |
491 | SlideDeck.prototype.loadTheme_ = function(theme) { | 493 | SlideDeck.prototype.loadTheme_ = function(theme) { |
492 | var styles = [theme]; | 494 | var styles = [/*'../../js/prettify/prettify',*/ theme]; |
493 | for (var i = 0, style; themeUrl = styles[i]; i++) { | 495 | for (var i = 0, style; themeUrl = styles[i]; i++) { |
494 | var style = document.createElement('link'); | 496 | var style = document.createElement('link'); |
495 | style.rel = 'stylesheet'; | 497 | 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 @@ | |||
7 | </head> | 7 | </head> |
8 | <body style="opacity: 0;"> | 8 | <body style="opacity: 0;"> |
9 | 9 | ||
10 | <slides> | 10 | <slides class="layout-widescreen"> |
11 | <slide class="logoslide"> | 11 | |
12 | <section class="flexcenter"> | 12 | <slide class="logoslide nobackground"> |
13 | <img src="images/google_developers_logo.png"> | 13 | <section class="flexbox vcenter"> |
14 | <span><img src="images/google_developers_logo.png"></span> | ||
14 | </section> | 15 | </section> |
15 | </slide> | 16 | </slide> |
16 | 17 | ||
17 | <slide id="title-slide"> | 18 | <slide id="title-slide" class="nobackground"> |
18 | <aside class="gdbar"><img src="images/google_developers_icon_128.png"></aside> | 19 | <aside class="gdbar"><img src="images/google_developers_icon_128.png"></aside> |
19 | <hgroup> | 20 | <hgroup> |
20 | <h1>Title Goes Here</h1> | 21 | <h1>Title Goes Here</h1> |
@@ -27,44 +28,145 @@ | |||
27 | </slide> | 28 | </slide> |
28 | 29 | ||
29 | <slide> | 30 | <slide> |
30 | <h2>Presentation Bullet Slide Layout</h2> | 31 | <h2>Slide with Bullets</h2> |
31 | <article> | 32 | <article> |
32 | <ul> | 33 | <ul> |
33 | <li>Bullet 1</li> | 34 | <li>Titles are formatted as Open Sans with bold applied and font size is set at 45</li> |
34 | <li>Bullet 2 | 35 | <li>Title capitalization is title case |
35 | <ul> | 36 | <ul> |
36 | <li>Bullet 3</li> | 37 | <li>Subtitle capitalization is title case</li> |
37 | </ul> | 38 | </ul> |
38 | </li> | 39 | </li> |
39 | <li>Bullet 4</li> | 40 | <li>Subtitle capitalization is title case</li> |
41 | <li>Titles and subtitles should never have a period at the end</li> | ||
40 | </ul> | 42 | </ul> |
41 | </article> | 43 | </article> |
42 | </slide> | 44 | </slide> |
43 | 45 | ||
44 | <slide> | 46 | <slide> |
45 | <hgroup> | 47 | <hgroup> |
46 | <h2>Presentation Bullet Slide Layout</h2> | 48 | <h2>Slide with Bullets that Build</h2> |
47 | <h3>Subtitle Placeholder</h3> | 49 | <h3>Subtitle Placeholder</h3> |
48 | </hgroup> | 50 | </hgroup> |
49 | <article> | 51 | <article> |
50 | A Slide2 | 52 | <p>A list where items build:</p> |
53 | <ul class="build"> | ||
54 | <li>Blah</li> | ||
55 | <li>Blah</li> | ||
56 | <li>Blah</li> | ||
57 | </ul> | ||
58 | <p>Another list, but items fade as they build:</p> | ||
59 | <ul class="build fade"> | ||
60 | <li>Hover over me!</li> | ||
61 | <li>Hover over me!</li> | ||
62 | <li>Hover over me!</li> | ||
63 | </ul> | ||
64 | </article> | ||
65 | </slide> | ||
66 | |||
67 | <slide> | ||
68 | <h2>Slide with Smaller Font</h2> | ||
69 | <article class="smaller"> | ||
70 | <ul> | ||
71 | <li>Titles are formatted as Open Sans with bold applied and font size is set at 45</li> | ||
72 | <li>Title capitalization is title case | ||
73 | <ul> | ||
74 | <li>Subtitle capitalization is title case</li> | ||
75 | </ul> | ||
76 | </li> | ||
77 | <li>Subtitle capitalization is title case</li> | ||
78 | <li>Titles and subtitles should never have a period at the end</li> | ||
79 | </ul> | ||
51 | </article> | 80 | </article> |
52 | </slide> | 81 | </slide> |
53 | 82 | ||
54 | <slide hidden> | 83 | <slide hidden> |
55 | A hidden slide | 84 | Hidden slides are left out of the presentation. |
85 | </slide> | ||
86 | |||
87 | <slide> | ||
88 | <hgroup> | ||
89 | <h2>Code Slide (with Subtitle Placeholder)</h2> | ||
90 | <h3>Subtitle Placeholder</h3> | ||
91 | </hgroup> | ||
92 | <article> | ||
93 | <pre class="prettyprint" data-lang="javascript"> | ||
94 | <script type='text/javascript'> | ||
95 | // Say hello world until the user starts questioning | ||
96 | // the meaningfulness of their existence. | ||
97 | function helloWorld(world) { | ||
98 | for (var i = 42; --i >= 0;) { | ||
99 | alert('Hello ' + String(world)); | ||
100 | } | ||
101 | } | ||
102 | </script> | ||
103 | </pre> | ||
104 | </article> | ||
105 | </slide> | ||
106 | |||
107 | <slide> | ||
108 | <hgroup> | ||
109 | <h2>Code Slide (Smaller Font)</h2> | ||
110 | </hgroup> | ||
111 | <article class="smaller"> | ||
112 | <pre class="prettyprint" data-lang="javascript"> | ||
113 | // Say hello world until the user starts questioning | ||
114 | // the meaningfulness of their existence. | ||
115 | function helloWorld(world) { | ||
116 | for (var i = 42; --i >= 0;) { | ||
117 | alert('Hello ' + String(world)); | ||
118 | } | ||
119 | } | ||
120 | </pre> | ||
121 | <pre class="prettyprint" data-lang="css"> | ||
122 | <style> | ||
123 | p { color: pink } | ||
124 | b { color: blue } | ||
125 | </style> | ||
126 | </pre> | ||
127 | <pre class="prettyprint" data-lang="html"> | ||
128 | <!DOCTYPE html> | ||
129 | <html> | ||
130 | <head> | ||
131 | <title>My Awesome Page</title> | ||
132 | </head> | ||
133 | <body> | ||
134 | <p>Hello world</p> | ||
135 | <body> | ||
136 | </html> | ||
137 | </pre> | ||
138 | </article> | ||
56 | </slide> | 139 | </slide> |
57 | 140 | ||
58 | <!-- Slide with speaker notes. Press 'n' to display.--> | ||
59 | <slide> | 141 | <slide> |
60 | <aside class="note"> | 142 | <aside class="note"> |
61 | <section>Speaker notes can go here!</section> | 143 | <section>Speaker notes can go here!</section> |
62 | </aside> | 144 | </aside> |
63 | <h2>Presentation Bullet Slide Layout</h2> | 145 | <h2>Slide with Speaker Notes</h2> |
64 | <article> | 146 | <article> |
65 | A Slide2 | 147 | Press 'n' |
66 | </article> | 148 | </article> |
67 | </slide> | 149 | </slide> |
150 | |||
151 | <slide class="thank-you-slide nobackground"> | ||
152 | <aside class="gdbar right"><img src="images/google_developers_icon_128.png"></aside> | ||
153 | <section class="flexbox vleft"> | ||
154 | <h1><Thanks You!></h1> | ||
155 | <p>Important contact information goes here.</p> | ||
156 | </section> | ||
157 | <p> | ||
158 | Insert contact info<br> | ||
159 | Insert contact info<br> | ||
160 | Insert contact info | ||
161 | </p> | ||
162 | </slide> | ||
163 | |||
164 | <slide class="logoslide dark nobackground"> | ||