diff options
-rw-r--r-- | template.html | 13 | ||||
-rw-r--r-- | theme/css/io2013.css | 58 | ||||
-rw-r--r-- | theme/scss/io2013.scss | 39 |
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 | </style> | 152 | </style> |
144 | </pre> | 153 | </pre> |
145 | <pre class="prettyprint" data-lang="html"> | 154 | <pre class="prettyprint" data-lang="html"> |
146 | <!DOCTYPE html> | ||
147 | <html> | 155 | <html> |
148 | <head> | ||
149 | <title>My Awesome Page</title> | ||
150 | </head> | ||
151 | <body> | 156 | <body> |
152 | <p>Hello world</p> | 157 | <p>Hello world</p> |
153 | <body> | 158 | <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 */ |
7 | h2 { | 7 | h2 { |
8 | font-weight: bold; | 8 | font-weight: bold; |
9 | } | 9 | } |
10 | 10 | ||
11 | /* line 12, ../scss/io2013.scss */ | 11 | /* line 13, ../scss/io2013.scss */ |
12 | h2, h3 { | 12 | h2, h3 { |
13 | color: #515151; | 13 | color: #515151; |
14 | } | 14 | } |
15 | 15 | ||
16 | /* line 16, ../scss/io2013.scss */ | 16 | /* line 17, ../scss/io2013.scss */ |
17 | q, blockquote { | 17 | q, 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 */ |
22 | slides > slide { | 22 | slides > slide { |
23 | color: #515151; | 23 | color: #515151; |
24 | } | 24 | } |
25 | /* line 24, ../scss/io2013.scss */ | 25 | /* line 28, ../scss/io2013.scss */ |
26 | slides > 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 */ | ||
35 | slides > 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 */ | ||
26 | slides > slide.title-slide:after { | 52 | slides > 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 */ |
40 | slides > slide.title-slide hgroup h1 { | 66 | slides > 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 */ |
45 | slides > slide.title-slide hgroup h2, slides > slide.title-slide hgroup p { | 71 | slides > 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 */ |
49 | slides > slide.title-slide hgroup h2 { | 75 | slides > 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 */ |
53 | slides > slide.title-slide hgroup p { | 79 | slides > slide.title-slide hgroup p { |
54 | margin-top: 3em; | 80 | margin-top: 3em; |
55 | } | 81 | } |
82 | /* line 78, ../scss/io2013.scss */ | ||
83 | slides > slide .source { | ||
84 | bottom: 130px; | ||
85 | } | ||
86 | /* line 82, ../scss/io2013.scss */ | ||
87 | slides > slide > article:only-child { | ||
88 | height: 88%; | ||
89 | } | ||
90 | /* line 86, ../scss/io2013.scss */ | ||
91 | slides > 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 | ||
20 | slides > slide { | 21 | slides > 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 |