diff options
-rw-r--r-- | js/slides.js | 4 | ||||
-rw-r--r-- | template.html | 35 | ||||
-rw-r--r-- | theme/css/default.css | 301 | ||||
-rw-r--r-- | theme/sass/default.scss | 72 |
4 files changed, 266 insertions, 146 deletions
diff --git a/js/slides.js b/js/slides.js index eee44ee..3f2366b 100644 --- a/js/slides.js +++ b/js/slides.js | |||
@@ -123,6 +123,10 @@ SlideDeck.prototype.onBodyKeyDown_ = function(e) { | |||
123 | e.preventDefault(); | 123 | e.preventDefault(); |
124 | break; | 124 | break; |
125 | 125 | ||
126 | case 72: // H | ||
127 | document.body.classList.toggle('highlight-code'); | ||
128 | break; | ||
129 | |||
126 | case 78: // N | 130 | case 78: // N |
127 | document.body.classList.toggle('with-notes'); | 131 | document.body.classList.toggle('with-notes'); |
128 | break; | 132 | break; |
diff --git a/template.html b/template.html index a86bf46..21af68e 100644 --- a/template.html +++ b/template.html | |||
@@ -100,14 +100,15 @@ URL: https://code.google.com/p/io-2012-slides | |||
100 | <h3>Subtitle Placeholder</h3> | 100 | <h3>Subtitle Placeholder</h3> |
101 | </hgroup> | 101 | </hgroup> |
102 | <article> | 102 | <article> |
103 | <p>Press 'h' to highlight important sections of code (wrapped in <code><b></code>).</p> | ||
103 | <pre class="prettyprint" data-lang="javascript"> | 104 | <pre class="prettyprint" data-lang="javascript"> |
104 | <script type='text/javascript'> | 105 | <script type='text/javascript'> |
105 | // Say hello world until the user starts questioning | 106 | // Say hello world until the user starts questioning |
106 | // the meaningfulness of their existence. | 107 | // the meaningfulness of their existence. |
107 | function helloWorld(world) { | 108 | function helloWorld(world) { |
108 | for (var i = 42; --i >= 0;) { | 109 | <b>for (var i = 42; --i >= 0;) { |
109 | alert('Hello ' + String(world)); | 110 | alert('Hello ' + String(world)); |
110 | } | 111 | }</b> |
111 | } | 112 | } |
112 | </script> | 113 | </script> |
113 | </pre> | 114 | </pre> |
@@ -156,7 +157,7 @@ function helloWorld(world) { | |||
156 | <h2>Slide with Speaker Notes</h2> | 157 | <h2>Slide with Speaker Notes</h2> |
157 | </hgroup> | 158 | </hgroup> |
158 | <article> | 159 | <article> |
159 | Press 'n' | 160 | Press 'n' to show speaker notes on a slide. |
160 | </article> | 161 | </article> |
161 | </slide> | 162 | </slide> |
162 | 163 | ||
@@ -262,7 +263,33 @@ function helloWorld(world) { | |||
262 | </article> | 263 | </article> |
263 | </slide> | 264 | </slide> |
264 | 265 | ||
265 | 266 | <slide> | |
267 | <hgroup> | ||
268 | <h2>Slide styles</h2> | ||
269 | </hgroup> | ||
270 | <article class="smaller columns-2"> | ||
271 | <ul> | ||
272 | <li class="red">class="red"</li> | ||
273 | <li class="red2">class="red2"</li> | ||
274 | <li class="red3">class="red3"</li> | ||
275 | <li class="blue">class="blue"</li> | ||
276 | <li class="blue2">class="blue2"</li> | ||
277 | <li class="blue3">class="blue3"</li> | ||
278 | <li class="green">class="green"</li> | ||
279 | <li class="green2">class="green2"</li> | ||
280 | </ul> | ||
281 | <ul> | ||
282 | <li class="green3">class="green3"</li> | ||
283 | <li class="yellow">class="yellow"</li> | ||
284 | <li class="yellow2">class="yellow2"</li> | ||
285 | <li class="yellow3">class="yellow3"</li> | ||
286 | <li class="gray">class="gray"</li> | ||
287 | <li class="gray2">class="gray2"</li> | ||
288 | <li class="gray3">class="gray3"</li> | ||
289 | <li class="gray4">class="gray4"</li> | ||
290 | </ul> | ||
291 | </article> | ||
292 | </slide> | ||
266 | <slide class="segue dark nobackground"> | 293 | <slide class="segue dark nobackground"> |
267 | <aside class="gdbar"><img src="images/google_developers_icon_128.png"></aside> | 294 | <aside class="gdbar"><img src="images/google_developers_icon_128.png"></aside> |
268 | <hgroup class="auto-fadein"> | 295 | <hgroup class="auto-fadein"> |
diff --git a/theme/css/default.css b/theme/css/default.css index 63c72a8..d82a3c2 100644 --- a/theme/css/default.css +++ b/theme/css/default.css | |||
@@ -205,21 +205,21 @@ slide.fill img { | |||
205 | /** | 205 | /** |
206 | * Theme Styles | 206 | * Theme Styles |
207 | */ | 207 | */ |
208 | /* line 40, ../sass/default.scss */ | 208 | /* line 41, ../sass/default.scss */ |
209 | ::selection { | 209 | ::selection { |
210 | color: white; | 210 | color: white; |
211 | background-color: #ffd14d; | 211 | background-color: #ffd14d; |
212 | text-shadow: none; | 212 | text-shadow: none; |
213 | } | 213 | } |
214 | 214 | ||
215 | /* line 46, ../sass/default.scss */ | 215 | /* line 47, ../sass/default.scss */ |
216 | ::-webkit-scrollbar { | 216 | ::-webkit-scrollbar { |
217 | height: 16px; | 217 | height: 16px; |
218 | overflow: visible; | 218 | overflow: visible; |
219 | width: 16px; | 219 | width: 16px; |
220 | } | 220 | } |
221 | 221 | ||
222 | /* line 51, ../sass/default.scss */ | 222 | /* line 52, ../sass/default.scss */ |
223 | ::-webkit-scrollbar-thumb { | 223 | ::-webkit-scrollbar-thumb { |
224 | background-color: rgba(0, 0, 0, 0.1); | 224 | background-color: rgba(0, 0, 0, 0.1); |
225 | background-clip: padding-box; | 225 | background-clip: padding-box; |
@@ -233,30 +233,30 @@ slide.fill img { | |||
233 | border-width: 1px 1px 1px 6px; | 233 | border-width: 1px 1px 1px 6px; |
234 | } | 234 | } |
235 | 235 | ||
236 | /* line 60, ../sass/default.scss */ | 236 | /* line 61, ../sass/default.scss */ |
237 | ::-webkit-scrollbar-thumb:hover { | 237 | ::-webkit-scrollbar-thumb:hover { |
238 | background-color: rgba(0, 0, 0, 0.5); | 238 | background-color: rgba(0, 0, 0, 0.5); |
239 | } | 239 | } |
240 | 240 | ||
241 | /* line 63, ../sass/default.scss */ | 241 | /* line 64, ../sass/default.scss */ |
242 | ::-webkit-scrollbar-button { | 242 | ::-webkit-scrollbar-button { |
243 | height: 0; | 243 | height: 0; |
244 | width: 0; | 244 | width: 0; |
245 | } | 245 | } |
246 | 246 | ||
247 | /* line 67, ../sass/default.scss */ | 247 | /* line 68, ../sass/default.scss */ |
248 | ::-webkit-scrollbar-track { | 248 | ::-webkit-scrollbar-track { |
249 | background-clip: padding-box; | 249 | background-clip: padding-box; |
250 | border: solid transparent; | 250 | border: solid transparent; |
251 | border-width: 0 0 0 4px; | 251 | border-width: 0 0 0 4px; |
252 | } | 252 | } |
253 | 253 | ||
254 | /* line 72, ../sass/default.scss */ | 254 | /* line 73, ../sass/default.scss */ |
255 | ::-webkit-scrollbar-corner { | 255 | ::-webkit-scrollbar-corner { |
256 | background: transparent; | 256 | background: transparent; |
257 | } | 257 | } |
258 | 258 | ||
259 | /* line 76, ../sass/default.scss */ | 259 | /* line 77, ../sass/default.scss */ |
260 | body { | 260 | body { |
261 | background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 600, color-stop(0%, #b1dfff), color-stop(100%, #2a7cdf)); | 261 | background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 600, color-stop(0%, #b1dfff), color-stop(100%, #2a7cdf)); |
262 | background-image: -webkit-radial-gradient(50% 50%, #b1dfff 0%, #2a7cdf 600px); | 262 | background-image: -webkit-radial-gradient(50% 50%, #b1dfff 0%, #2a7cdf 600px); |
@@ -267,7 +267,7 @@ body { | |||
267 | background-attachment: fixed; | 267 | background-attachment: fixed; |
268 | } | 268 | } |
269 | 269 | ||
270 | /* line 82, ../sass/default.scss */ | 270 | /* line 83, ../sass/default.scss */ |
271 | slides > slide { | 271 | slides > slide { |
272 | width: 900px; | 272 | width: 900px; |
273 | height: 700px; | 273 | height: 700px; |
@@ -292,13 +292,13 @@ slides > slide { | |||
292 | transition: all 0.3s ease-out; | 292 | transition: all 0.3s ease-out; |
293 | } | 293 | } |
294 | 294 | ||
295 | /* line 98, ../sass/default.scss */ | 295 | /* line 99, ../sass/default.scss */ |
296 | slides.layout-widescreen > slide { | 296 | slides.layout-widescreen > slide { |
297 | margin-left: -550px; | 297 | margin-left: -550px; |
298 | width: 1100px; | 298 | width: 1100px; |
299 | } | 299 | } |
300 | 300 | ||
301 | /* line 103, ../sass/default.scss */ | 301 | /* line 104, ../sass/default.scss */ |
302 | slides.layout-faux-widescreen > slide { | 302 | slides.layout-faux-widescreen > slide { |
303 | margin-left: -550px; | 303 | margin-left: -550px; |
304 | width: 1100px; | 304 | width: 1100px; |
@@ -317,7 +317,7 @@ slides.nobackground slide:not(.fill)::before { | |||
317 | color: inherit !important; | 317 | color: inherit !important; |
318 | } | 318 | } |
319 | */ | 319 | */ |
320 | /* line 129, ../sass/default.scss */ | 320 | /* line 130, ../sass/default.scss */ |
321 | slides > slide:not(.fill):not(.nobackground):before { | 321 | slides > slide:not(.fill):not(.nobackground):before { |
322 | font-size: 12pt; | 322 | font-size: 12pt; |
323 | content: "#io2012"; | 323 | content: "#io2012"; |
@@ -333,7 +333,7 @@ slides > slide:not(.fill):not(.nobackground):before { | |||
333 | height: 30px; | 333 | height: 30px; |
334 | line-height: 1.9; | 334 | line-height: 1.9; |
335 | } | 335 | } |
336 | /* line 141, ../sass/default.scss */ | 336 | /* line 142, ../sass/default.scss */ |
337 | slides > slide:not(.fill):not(.nobackground):after { | 337 | slides > slide:not(.fill):not(.nobackground):after { |
338 | font-size: 12pt; | 338 | font-size: 12pt; |
339 | content: attr(data-slide-num) "/" attr(data-total-slides); | 339 | content: attr(data-slide-num) "/" attr(data-total-slides); |
@@ -343,7 +343,7 @@ slides > slide:not(.fill):not(.nobackground):after { | |||
343 | line-height: 1.9; | 343 | line-height: 1.9; |
344 | } | 344 | } |
345 | 345 | ||
346 | /* line 152, ../sass/default.scss */ | 346 | /* line 153, ../sass/default.scss */ |
347 | slides > slide.title-slide:after { | 347 | slides > slide.title-slide:after { |
348 | content: ''; | 348 | content: ''; |
349 | background: url(../../images/io2012_logo.png) no-repeat 100% 50%; | 349 | background: url(../../images/io2012_logo.png) no-repeat 100% 50%; |
@@ -363,7 +363,7 @@ slides.layout-faux-widescreen > slide:not(.nobackground) { | |||
363 | background-position-x: 0, 840px; | 363 | background-position-x: 0, 840px; |
364 | }*/ | 364 | }*/ |
365 | /* Slides */ | 365 | /* Slides */ |
366 | /* line 171, ../sass/default.scss */ | 366 | /* line 172, ../sass/default.scss */ |
367 | slides > slide { |