diff options
-rw-r--r-- | images/sky.jpg | bin | 0 -> 204942 bytes | |||
-rw-r--r-- | template.html | 57 | ||||
-rw-r--r-- | theme/css/default.css | 232 | ||||
-rw-r--r-- | theme/sass/default.scss | 54 |
4 files changed, 185 insertions, 158 deletions
diff --git a/images/sky.jpg b/images/sky.jpg new file mode 100644 index 0000000..480893c --- /dev/null +++ b/images/sky.jpg | |||
Binary files differ | |||
diff --git a/template.html b/template.html index da89780..4ff22b0 100644 --- a/template.html +++ b/template.html | |||
@@ -167,6 +167,7 @@ function helloWorld(world) { | |||
167 | </hgroup> | 167 | </hgroup> |
168 | <article> | 168 | <article> |
169 | <img src="images/chart.png" alt="Description" title="Description"> | 169 | <img src="images/chart.png" alt="Description" title="Description"> |
170 | <footer class="source">source: place source info here</footer> | ||
170 | </article> | 171 | </article> |
171 | </slide> | 172 | </slide> |
172 | 173 | ||
@@ -176,6 +177,7 @@ function helloWorld(world) { | |||
176 | </hgroup> | 177 | </hgroup> |
177 | <article class="flexbox vcenter" style="height: 80%;"> | 178 | <article class="flexbox vcenter" style="height: 80%;"> |
178 | <img src="images/barchart.png" alt="Description" title="Description"> | 179 | <img src="images/barchart.png" alt="Description" title="Description"> |
180 | <footer class="source">source: place source info here</footer> | ||
179 | </article> | 181 | </article> |
180 | </slide> | 182 | </slide> |
181 | 183 | ||
@@ -267,29 +269,35 @@ function helloWorld(world) { | |||
267 | <hgroup> | 269 | <hgroup> |
268 | <h2>Slide Styles</h2> | 270 | <h2>Slide Styles</h2> |
269 | </hgroup> | 271 | </hgroup> |
270 | <article class="smaller columns-2"> | 272 | <article class="smaller"> |
271 | <ul> | 273 | <div class="columns-2"> |
272 | <li class="red">class="red"</li> | 274 | <ul> |
273 | <li class="red2">class="red2"</li> | 275 | <li class="red">class="red"</li> |
274 | <li class="red3">class="red3"</li> | 276 | <li class="red2">class="red2"</li> |
275 | <li class="blue">class="blue"</li> | 277 | <li class="red3">class="red3"</li> |
276 | <li class="blue2">class="blue2"</li> | 278 | <li class="blue">class="blue"</li> |
277 | <li class="blue3">class="blue3"</li> | 279 | <li class="blue2">class="blue2"</li> |
278 | <li class="green">class="green"</li> | 280 | <li class="blue3">class="blue3"</li> |
279 | <li class="green2">class="green2"</li> | 281 | <li class="green">class="green"</li> |
280 | </ul> | 282 | <li class="green2">class="green2"</li> |
281 | <ul> | 283 | </ul> |
282 | <li class="green3">class="green3"</li> | 284 | <ul> |
283 | <li class="yellow">class="yellow"</li> | 285 | <li class="green3">class="green3"</li> |
284 | <li class="yellow2">class="yellow2"</li> | 286 | <li class="yellow">class="yellow"</li> |
285 | <li class="yellow3">class="yellow3"</li> | 287 | <li class="yellow2">class="yellow2"</li> |
286 | <li class="gray">class="gray"</li> | 288 | <li class="yellow3">class="yellow3"</li> |
287 | <li class="gray2">class="gray2"</li> | 289 | <li class="gray">class="gray"</li> |
288 | <li class="gray3">class="gray3"</li> | 290 | <li class="gray2">class="gray2"</li> |
289 | <li class="gray4">class="gray4"</li> | 291 | <li class="gray3">class="gray3"</li> |
290 | </ul> | 292 | <li class="gray4">class="gray4"</li> |
293 | </ul> | ||
294 | </div> | ||
295 | <div> | ||
296 | <button>Button</button> <button disabled>Disabled</button> | ||
297 | </div> | ||
291 | </article> | 298 | </article> |
292 | </slide> | 299 | </slide> |
300 | |||
293 | <slide class="segue dark nobackground"> | 301 | <slide class="segue dark nobackground"> |
294 | <aside class="gdbar"><img src="images/google_developers_icon_128.png"></aside> | 302 | <aside class="gdbar"><img src="images/google_developers_icon_128.png"></aside> |
295 | <hgroup class="auto-fadein"> | 303 | <hgroup class="auto-fadein"> |
@@ -298,6 +306,13 @@ function helloWorld(world) { | |||
298 | </hgroup> | 306 | </hgroup> |
299 | </slide> | 307 | </slide> |
300 | 308 | ||
309 | <slide class="fill nobackground" style="background-image: url(images/sky.jpg)"> | ||
310 | <hgroup> | ||
311 | <h2 class="white">Full Image (with Optional Header)</h2> | ||
312 | </hgroup> | ||
313 | <footer class="source white">www.flickr.com/photos/25797459@N06/5438799763/</footer> | ||
314 | </slide> | ||
315 | |||
301 | <slide class="segue dark quote nobackground"> | 316 | <slide class="segue dark quote nobackground"> |
302 | <aside class="gdbar right bottom"><img src="images/google_developers_icon_128.png"></aside> | 317 | <aside class="gdbar right bottom"><img src="images/google_developers_icon_128.png"></aside> |
303 | <article class="flexbox vleft auto-fadein"> | 318 | <article class="flexbox vleft auto-fadein"> |
diff --git a/theme/css/default.css b/theme/css/default.css index a6c1826..6024807 100644 --- a/theme/css/default.css +++ b/theme/css/default.css | |||
@@ -233,11 +233,11 @@ slides > slide { | |||
233 | -ms-border-radius: 5px; | 233 | -ms-border-radius: 5px; |
234 | -o-border-radius: 5px; | 234 | -o-border-radius: 5px; |
235 | border-radius: 5px; | 235 | border-radius: 5px; |
236 | -webkit-transition: all 0.6s ease-out; | 236 | -webkit-transition: all 0.6s ease-in-out; |
237 | -moz-transition: all 0.6s ease-out; | 237 | -moz-transition: all 0.6s ease-in-out; |
238 | -ms-transition: all 0.6s ease-out; | 238 | -ms-transition: all 0.6s ease-in-out; |
239 | -o-transition: all 0.6s ease-out; | 239 | -o-transition: all 0.6s ease-in-out; |
240 | transition: all 0.6s ease-out; | 240 | transition: all 0.6s ease-in-out; |
241 | } | 241 | } |
242 | /* line 116, ../sass/default.scss */ | 242 | /* line 116, ../sass/default.scss */ |
243 | slides > slide.far-past { | 243 | slides > slide.far-past { |
@@ -279,7 +279,7 @@ slides > slide.dark { | |||
279 | background: #515151; | 279 | background: #515151; |
280 | } | 280 | } |
281 | /* line 168, ../sass/default.scss */ | 281 | /* line 168, ../sass/default.scss */ |
282 | slides > slide:not(.fill):not(.nobackground):before { | 282 | slides > slide:not(.nobackground):before { |
283 | font-size: 12pt; | 283 | font-size: 12pt; |
284 | content: "#io2012"; | 284 | content: "#io2012"; |
285 | position: absolute; | 285 | position: absolute; |
@@ -295,7 +295,7 @@ slides > slide:not(.fill):not(.nobackground):before { | |||
295 | line-height: 1.9; | 295 | line-height: 1.9; |
296 | } | 296 | } |
297 | /* line 180, ../sass/default.scss */ | 297 | /* line 180, ../sass/default.scss */ |
298 | slides > slide:not(.fill):not(.nobackground):after { | 298 | slides > slide:not(.nobackground):after { |
299 | font-size: 12pt; | 299 | font-size: 12pt; |
300 | content: attr(data-slide-num) "/" attr(data-total-slides); | 300 | content: attr(data-slide-num) "/" attr(data-total-slides); |
301 | position: absolute; | 301 | position: absolute; |
@@ -319,7 +319,7 @@ slides > slide.title-slide:after { | |||
319 | } | 319 | } |
320 | /* line 203, ../sass/default.scss */ | 320 | /* line 203, ../sass/default.scss */ |
321 | slides > slide.backdrop { | 321 | slides > slide.backdrop { |
322 | z-index: -1; | 322 | z-index: -10; |
323 | display: block !important; | 323 | display: block !important; |
324 | background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(85%, #ffffff), color-stop(100%, #e6e6e6)); | 324 | background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(85%, #ffffff), color-stop(100%, #e6e6e6)); |
325 | background: -webkit-linear-gradient(#ffffff, #ffffff 85%, #e6e6e6); | 325 | background: -webkit-linear-gradient(#ffffff, #ffffff 85%, #e6e6e6); |
@@ -566,7 +566,7 @@ button { | |||
566 | background: -o-linear-gradient(#f9f9f9 40%, #e3e3e3 70%); | 566 | background: -o-linear-gradient(#f9f9f9 40%, #e3e3e3 70%); |
567 | background: -ms-linear-gradient(#f9f9f9 40%, #e3e3e3 70%); | 567 | background: -ms-linear-gradient(#f9f9f9 40%, #e3e3e3 70%); |
568 | background: linear-gradient(#f9f9f9 40%, #e3e3e3 70%); | 568 | background: linear-gradient(#f9f9f9 40%, #e3e3e3 70%); |
569 | border: 1px solid #999; | 569 | border: 1px solid #a9a9a9; |
570 | -webkit-border-radius: 3px; | 570 | -webkit-border-radius: 3px; |
571 | -moz-border-radius: 3px; | 571 | -moz-border-radius: 3px; |
572 | -ms-border-radius: 3px; | 572 | -ms-border-radius: 3px; |
@@ -580,17 +580,16 @@ button { | |||
580 | user-select: none; | 580 | user-select: none; |
581 | cursor: pointer; | 581 | cursor: pointer; |
582 | text-shadow: 1px 1px white; | 582 | text-shadow: 1px 1px white; |
583 | font-weight: 700; | ||
584 | font-size: 10pt; | 583 | font-size: 10pt; |
585 | } | 584 | } |
586 | 585 | ||
587 | /* line 422, ../sass/default.scss */ | 586 | /* line 421, ../sass/default.scss */ |
588 | button:hover { | 587 | button:not(:disabled):hover { |
589 | border-color: black; | 588 | border-color: #515151; |
590 | } | 589 | } |
591 | 590 | ||
592 | /* line 426, ../sass/default.scss */ | 591 | /* line 425, ../sass/default.scss */ |
593 | button:active { | 592 | button:not(:disabled):active { |
594 | background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(40%, #e3e3e3), color-stop(70%, #f9f9f9)); | 593 | background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(40%, #e3e3e3), color-stop(70%, #f9f9f9)); |
595 | background: -webkit-linear-gradient(#e3e3e3 40%, #f9f9f9 70%); | 594 | background: -webkit-linear-gradient(#e3e3e3 40%, #f9f9f9 70%); |
596 | background: -moz-linear-gradient(#e3e3e3 40%, #f9f9f9 70%); | 595 | background: -moz-linear-gradient(#e3e3e3 40%, #f9f9f9 70%); |
@@ -599,87 +598,102 @@ button:active { | |||
599 | background: linear-gradient(#e3e3e3 40%, #f9f9f9 70%); | 598 | background: linear-gradient(#e3e3e3 40%, #f9f9f9 70%); |
600 | } | 599 | } |
601 | 600 | ||
602 | /* line 430, ../sass/default.scss */ | 601 | /* line 429, ../sass/default.scss */ |
602 | :disabled { | ||
603 | color: #a9a9a9; | ||
604 | } | ||
605 | |||
606 | /* line 433, ../sass/default.scss */ | ||
603 | .blue { | 607 | .blue { |
604 | color: #4387fd; | 608 | color: #4387fd; |
605 | } | 609 | } |
606 | 610 | ||
607 | /* line 433, ../sass/default.scss */ | 611 | /* line 436, ../sass/default.scss */ |
608 | .blue2 { | 612 | .blue2 { |
609 | color: #3c8ef3; | 613 | color: #3c8ef3; |
610 | } | 614 | } |
611 | 615 | ||
612 | /* line 436, ../sass/default.scss */ | 616 | /* line 439, ../sass/default.scss */ |
613 | .blue3 { | 617 | .blue3 { |
614 | color: #2a7cdf; | 618 | color: #2a7cdf; |
615 | } | 619 | } |
616 | 620 | ||
617 | /* line 439, ../sass/default.scss */ | 621 | /* line 442, ../sass/default.scss */ |
618 | .yellow { | 622 | .yellow { |
619 | color: #ffd14d; | 623 | color: #ffd14d; |
620 | } | 624 | } |
621 | 625 | ||
622 | /* line 442, ../sass/default.scss */ | 626 | /* line 445, ../sass/default.scss */ |
623 | .yellow2 { | 627 | .yellow2 { |
624 | color: #f9cc46; | 628 | color: #f9cc46; |
625 | } | 629 | } |
626 | 630 | ||
627 | /* line 445, ../sass/default.scss */ | 631 | /* line 448, ../sass/default.scss */ |
628 | .yellow3 { | 632 | .yellow3 { |
629 | color: #f6c000; |