aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--images/sky.jpgbin0 -> 204942 bytes
-rw-r--r--template.html57
-rw-r--r--theme/css/default.css232
-rw-r--r--theme/sass/default.scss54
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 */
243slides > slide.far-past { 243slides > 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 */
282slides > slide:not(.fill):not(.nobackground):before { 282slides > 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 */
298slides > slide:not(.fill):not(.nobackground):after { 298slides > 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 */
321slides > slide.backdrop { 321slides > 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 */
588button:hover { 587button: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 */
593button:active { 592button: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;