aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--template.html13
-rw-r--r--theme/css/io2013.css58
-rw-r--r--theme/scss/io2013.scss39
3 files changed, 96 insertions, 14 deletions
diff --git a/template.html b/template.html
index 1e09a8c..8cff66e 100644
--- a/template.html
+++ b/template.html
@@ -76,11 +76,20 @@ URL: https://code.google.com/p/io-2012-slides
76 <li>Pressing 'o' toggles overview mode</li> 76 <li>Pressing 'o' toggles overview mode</li>
77 <li>Pressing 'ESC' toggles off these goodies</li> 77 <li>Pressing 'ESC' toggles off these goodies</li>
78 </ul> 78 </ul>
79 </article>
80 </slide>
81
82 <slide>
83 <hgroup>
84 <h2>Slide with Bullets that Build</h2>
85 </hgroup>
86 <article>
79 <p>Another list, but items fade as they build:</p> 87 <p>Another list, but items fade as they build:</p>
80 <ul class="build fade"> 88 <ul class="build fade">
81 <li>Hover over me!</li> 89 <li>Hover over me!</li>
82 <li>Hover over me!</li> 90 <li>Hover over me!</li>
83 <li>Hover over me!</li> 91 <li>Hover over me!</li>
92 <li>Hover over me!</li>
84 </ul> 93 </ul>
85 </article> 94 </article>
86 </slide> 95 </slide>
@@ -143,11 +152,7 @@ function helloWorld(world) {
143&lt;/style&gt; 152&lt;/style&gt;
144</pre> 153</pre>
145<pre class="prettyprint" data-lang="html"> 154<pre class="prettyprint" data-lang="html">
146&lt;!DOCTYPE html>
147&lt;html> 155&lt;html>
148&lt;head>
149 &lt;title>My Awesome Page&lt;/title>
150&lt;/head>
151&lt;body> 156&lt;body>
152 &lt;p&gt;Hello world&lt;/p&gt; 157 &lt;p&gt;Hello world&lt;/p&gt;
153&lt;body> 158&lt;body>
diff --git a/theme/css/io2013.css b/theme/css/io2013.css
index 364eccb..6bdba98 100644
--- a/theme/css/io2013.css
+++ b/theme/css/io2013.css
@@ -1,28 +1,54 @@
1/* line 5, ../scss/io2013.scss */ 1/* line 6, ../scss/io2013.scss */
2* { 2* {
3 line-height: 1.3; 3 line-height: 1.3;
4} 4}
5 5
6/* line 9, ../scss/io2013.scss */ 6/* line 10, ../scss/io2013.scss */
7h2 { 7h2 {
8 font-weight: bold; 8 font-weight: bold;
9} 9}
10 10
11/* line 12, ../scss/io2013.scss */ 11/* line 13, ../scss/io2013.scss */
12h2, h3 { 12h2, h3 {
13 color: #515151; 13 color: #515151;
14} 14}
15 15
16/* line 16, ../scss/io2013.scss */ 16/* line 17, ../scss/io2013.scss */
17q, blockquote { 17q, blockquote {
18 font-weight: bold; 18 font-weight: bold;
19} 19}
20 20
21/* line 20, ../scss/io2013.scss */ 21/* line 21, ../scss/io2013.scss */
22slides > slide { 22slides > slide {
23 color: #515151; 23 color: #515151;
24} 24}
25/* line 24, ../scss/io2013.scss */ 25/* line 28, ../scss/io2013.scss */
26slides > slide:not(.nobackground):before {
27 background: none;
28 background-color: #e6e6e6;
29 height: 90px;
30 left: 0;
31 width: 100%;
32 bottom: 0;
33}
34/* line 36, ../scss/io2013.scss */
35slides > slide:not(.nobackground):after {
36 background: url(../../images/google_developers_icon_128.png) no-repeat 0 0;
37 -webkit-background-size: 30px;
38 -moz-background-size: 30px;
39 -o-background-size: 30px;
40 background-size: 30px;
41 background-position: 60px 50%;
42 left: 0;
43 bottom: 90px;
44 width: 100%;
45 -webkit-box-sizing: border-box;
46 -moz-box-sizing: border-box;
47 box-sizing: border-box;
48 text-align: right;
49 padding-right: 60px;
50}
51/* line 50, ../scss/io2013.scss */
26slides > slide.title-slide:after { 52slides > slide.title-slide:after {
27 content: ''; 53 content: '';
28 background: url(../../images/io2013/google-io-lockup-1.png) no-repeat 100% 50%; 54 background: url(../../images/io2013/google-io-lockup-1.png) no-repeat 100% 50%;
@@ -36,20 +62,32 @@ slides > slide.title-slide:after {
36 width: 100%; 62 width: 100%;
37 height: 90px; 63 height: 90px;
38} 64}
39/* line 36, ../scss/io2013.scss */ 65/* line 62, ../scss/io2013.scss */
40slides > slide.title-slide hgroup h1 { 66slides > slide.title-slide hgroup h1 {
41 font-weight: bold; 67 font-weight: bold;
42 line-height: 1.1; 68 line-height: 1.1;
43} 69}
44/* line 40, ../scss/io2013.scss */ 70/* line 66, ../scss/io2013.scss */
45slides > slide.title-slide hgroup h2, slides > slide.title-slide hgroup p { 71slides > slide.title-slide hgroup h2, slides > slide.title-slide hgroup p {
46 color: #515151; 72 color: #515151;
47} 73}
48/* line 43, ../scss/io2013.scss */ 74/* line 69, ../scss/io2013.scss */
49slides > slide.title-slide hgroup h2 { 75slides > slide.title-slide hgroup h2 {
50 margin-top: 0.25em; 76 margin-top: 0.25em;
51} 77}
52/* line 46, ../scss/io2013.scss */ 78/* line 72, ../scss/io2013.scss */
53slides > slide.title-slide hgroup p { 79slides > slide.title-slide hgroup p {
54 margin-top: 3em; 80 margin-top: 3em;
55} 81}
82/* line 78, ../scss/io2013.scss */
83slides > slide .source {
84 bottom: 130px;
85}
86/* line 82, ../scss/io2013.scss */
87slides > slide > article:only-child {
88 height: 88%;
89}
90/* line 86, ../scss/io2013.scss */
91slides > slide > article:only-child > iframe {
92 height: 100%;
93}
diff --git a/theme/scss/io2013.scss b/theme/scss/io2013.scss
index c728cfb..1bab7b0 100644
--- a/theme/scss/io2013.scss
+++ b/theme/scss/io2013.scss
@@ -1,4 +1,5 @@
1@import "compass/css3/background-size"; 1@import "compass/css3/background-size";
2@import "compass/css3/box-sizing";
2 3
3@import "variables"; 4@import "variables";
4 5
@@ -19,6 +20,31 @@ q, blockquote {
19 20
20slides > slide { 21slides > slide {
21 color: $gray-4; 22 color: $gray-4;
23
24 $grayBarHeight: 90px;
25
26 // Grey bottom bar.
27 &:not(.nobackground) {
28 &:before {
29 background: none;
30 background-color: $gray-1;
31 height: $grayBarHeight;
32 left: 0;
33 width: 100%;
34 bottom: 0;
35 }
36 &:after {
37 background: url(../../images/google_developers_icon_128.png) no-repeat 0 0;
38 @include background-size($brand-small-icon-size);
39 background-position: $slide-left-right-padding 50%;
40 left: 0;
41 bottom: $grayBarHeight;
42 width: 100%;
43 @include box-sizing(border-box);
44 text-align: right;
45 padding-right: $slide-left-right-padding;
46 }
47 }
22 48
23 &.title-slide { 49 &.title-slide {
24 &:after { 50 &:after {
@@ -48,4 +74,17 @@ slides > slide {
48 } 74 }
49 } 75 }
50 } 76 }
77
78 .source {
79 bottom: $grayBarHeight + 40;
80 }
81
82 > article:only-child {
83 height: 88%
84 }
85
86 > article:only-child > iframe {
87 height: 100%;
88 }
89
51} \ No newline at end of file 90} \ No newline at end of file