aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--js/slides.js27
-rw-r--r--template.html5
-rw-r--r--theme/css/default.css40
-rw-r--r--theme/sass/default.scss5
4 files changed, 50 insertions, 27 deletions
diff --git a/js/slides.js b/js/slides.js
index d1b094b..5363183 100644
--- a/js/slides.js
+++ b/js/slides.js
@@ -75,6 +75,33 @@ SlideDeck.prototype.onDomLoaded_ = function(e) {
75SlideDeck.prototype.addEventListeners_ = function() { 75SlideDeck.prototype.addEventListeners_ = function() {
76 document.addEventListener('keydown', this.onBodyKeyDown_.bind(this), false); 76 document.addEventListener('keydown', this.onBodyKeyDown_.bind(this), false);
77 window.addEventListener('popstate', this.onPopState_.bind(this), false); 77 window.addEventListener('popstate', this.onPopState_.bind(this), false);
78
79 var slides = document.querySelector('slides');
80 slides.addEventListener('slideenter',
81 this.handleSlideMovement_.bind(this), false);
82 slides.addEventListener('slideleave',
83 this.handleSlideMovement_.bind(this), false);
84};
85
86/**
87 * @private
88 * Callback to perform generic tasks on slideenter/slideleave events.
89 */
90SlideDeck.prototype.handleSlideMovement_ = function(e) {
91 var slide = e.target;
92 var gdbar = slide.querySelector('aside[is="x-gdbar"]');
93 if (gdbar) {
94 if (e.type == 'slideenter') {
95 // Need slight delay here for case where you're on the current slide
96 // and the animation needs to run. This is because the web compontents
97 // polyfill fires on DOMContentLoaded (e.g. a race condition).
98 setTimeout(function() {
99 gdbar.classList.add('active');
100 }, 5);
101 } else {
102 gdbar.classList.remove('active');
103 }
104 }
78}; 105};
79 106
80/** 107/**
diff --git a/template.html b/template.html
index 973666a..e119ad1 100644
--- a/template.html
+++ b/template.html
@@ -12,6 +12,8 @@ URL: https://code.google.com/p/io-2012-slides
12 <title>Title</title> 12 <title>Title</title>
13 <meta charset="utf-8"> 13 <meta charset="utf-8">
14 <meta http-equiv="X-UA-Compatible" content="chrome=1"> 14 <meta http-equiv="X-UA-Compatible" content="chrome=1">
15 <link rel="components" href="x-gdbar.html">
16 <script src="js/polyfills/components-polyfill.js"></script>
15</head> 17</head>
16<body style="opacity: 0;"> 18<body style="opacity: 0;">
17 19
@@ -24,7 +26,8 @@ URL: https://code.google.com/p/io-2012-slides
24 </slide> 26 </slide>
25 27
26 <slide class="title-slide segue nobackground"> 28 <slide class="title-slide segue nobackground">
27 <aside class="gdbar"><img src="images/google_developers_icon_128.png"></aside> 29 <!--<aside class="gdbar"><img src="images/google_developers_icon_128.png"></aside>-->
30 <aside is="x-gdbar"></aside>
28 <!-- The content of this hgroup is replaced programmatically through the config. --> 31 <!-- The content of this hgroup is replaced programmatically through the config. -->
29 <hgroup class="auto-fadein"> 32 <hgroup class="auto-fadein">
30 <h1 data-config-title><!-- populated from config --></h1> 33 <h1 data-config-title><!-- populated from config --></h1>
diff --git a/theme/css/default.css b/theme/css/default.css
index ba79793..bb77b38 100644
--- a/theme/css/default.css
+++ b/theme/css/default.css
@@ -1140,31 +1140,27 @@ input, button {
1140 line-height: 2.8; 1140 line-height: 2.8;
1141} 1141}
1142/* line 736, ../sass/default.scss */ 1142/* line 736, ../sass/default.scss */
1143.segue aside {
1144 width: 215px !important;
1145}
1146/* line 739, ../sass/default.scss */
1147.segue hgroup { 1143.segue hgroup {
1148 position: absolute; 1144 position: absolute;
1149 bottom: 225px; 1145 bottom: 225px;
1150} 1146}
1151 1147
1152/* line 745, ../sass/default.scss */ 1148/* line 742, ../sass/default.scss */
1153.thank-you-slide { 1149.thank-you-slide {
1154 background: #4387fd; 1150 background: #4387fd;
1155 color: white; 1151 color: white;
1156} 1152}
1157/* line 749, ../sass/default.scss */ 1153/* line 746, ../sass/default.scss */
1158.thank-you-slide h2 { 1154.thank-you-slide h2 {
1159 font-size: 60px; 1155 font-size: 60px;
1160 color: inherit; 1156 color: inherit;
1161} 1157}
1162/* line 754, ../sass/default.scss */ 1158/* line 751, ../sass/default.scss */
1163.thank-you-slide article > p { 1159.thank-you-slide article > p {
1164 margin-top: 2em; 1160 margin-top: 2em;
1165 font-size: 20pt; 1161 font-size: 20pt;
1166} 1162}
1167/* line 759, ../sass/default.scss */ 1163/* line 756, ../sass/default.scss */
1168.thank-you-slide > p { 1164.thank-you-slide > p {
1169 position: absolute; 1165 position: absolute;
1170 bottom: 80px; 1166 bottom: 80px;
@@ -1172,10 +1168,10 @@ input, button {
1172 line-height: 1.3; 1168 line-height: 1.3;
1173} 1169}
1174 1170
1175/* line 767, ../sass/default.scss */ 1171/* line 764, ../sass/default.scss */
1176aside.gdbar { 1172aside.gdbar {
1177 height: 97px; 1173 height: 97px;
1178 width: 155px; 1174 width: 215px;
1179 position: absolute; 1175 position: absolute;
1180 left: 0; 1176 left: 0;
1181 top: 125px; 1177 top: 125px;
@@ -1201,7 +1197,7 @@ aside.gdbar {
1201 transition: all 0.5s ease-out 0.5s; 1197 transition: all 0.5s ease-out 0.5s;
1202 /* Better to transition only on background-size, but not sure how to do that with the mixin. */ 1198 /* Better to transition only on background-size, but not sure how to do that with the mixin. */
1203} 1199}
1204/* line 778, ../sass/default.scss */ 1200/* line 775, ../sass/default.scss */
1205aside.gdbar.right { 1201aside.gdbar.right {
1206 right: 0; 1202 right: 0;
1207 left: -moz-initial; 1203 left: -moz-initial;
@@ -1214,7 +1210,7 @@ aside.gdbar.right {
1214 -o-transform: rotateZ(180deg); 1210 -o-transform: rotateZ(180deg);
1215 transform: rotateZ(180deg); 1211 transform: rotateZ(180deg);
1216} 1212}
1217/* line 785, ../sass/default.scss */ 1213/* line 782, ../sass/default.scss */
1218aside.gdbar.right img { 1214aside.gdbar.right img {
1219 -webkit-transform: rotateZ(180deg); 1215 -webkit-transform: rotateZ(180deg);
1220 -moz-transform: rotateZ(180deg); 1216 -moz-transform: rotateZ(180deg);
@@ -1222,13 +1218,13 @@ aside.gdbar.right img {
1222 -o-transform: rotateZ(180deg); 1218 -o-transform: rotateZ(180deg);
1223 transform: rotateZ(180deg); 1219 transform: rotateZ(180deg);
1224} 1220}
1225/* line 790, ../sass/default.scss */ 1221/* line 787, ../sass/default.scss */
1226aside.gdbar.bottom { 1222aside.gdbar.bottom {
1227 top: -moz-initial; 1223 top: -moz-initial;
1228 top: initial; 1224 top: initial;
1229 bottom: 60px; 1225 bottom: 60px;
1230} 1226}
1231/* line 796, ../sass/default.scss */ 1227/* line 793, ../sass/default.scss */
1232aside.gdbar img { 1228aside.gdbar img {
1233 width: 85px; 1229 width: 85px;
1234 height: 85px; 1230 height: 85px;
@@ -1237,24 +1233,24 @@ aside.gdbar img {
1237 margin: 8px 15px; 1233 margin: 8px 15px;
1238} 1234}
1239 1235
1240/* line 807, ../sass/default.scss */ 1236/* line 804, ../sass/default.scss */
1241.title-slide hgroup { 1237.title-slide hgroup {
1242 bottom: 100px; 1238 bottom: 100px;
1243} 1239}
1244/* line 810, ../sass/default.scss */ 1240/* line 807, ../sass/default.scss */
1245.title-slide hgroup h1 { 1241.title-slide hgroup h1 {
1246 font-size: 65px; 1242 font-size: 65px;
1247 line-height: 1.4; 1243 line-height: 1.4;
1248 letter-spacing: -3px; 1244 letter-spacing: -3px;
1249 color: #515151; 1245 color: #515151;
1250} 1246}
1251/* line 817, ../sass/default.scss */ 1247/* line 814, ../sass/default.scss */
1252.title-slide hgroup h2 { 1248.title-slide hgroup h2 {
1253 font-size: 34px; 1249 font-size: 34px;
1254 color: #a9a9a9; 1250 color: #a9a9a9;
1255 font-weight: inherit; 1251 font-weight: inherit;
1256} 1252}
1257/* line 823, ../sass/default.scss */ 1253/* line 820, ../sass/default.scss */
1258.title-slide hgroup p { 1254.title-slide hgroup p {
1259 font-size: 20px; 1255 font-size: 20px;
1260 color: #797979; 1256 color: #797979;
@@ -1262,11 +1258,11 @@ aside.gdbar img {
1262 margin-top: 2em; 1258 margin-top: 2em;
1263} 1259}
1264 1260
1265/* line 832, ../sass/default.scss */ 1261/* line 829, ../sass/default.scss */
1266.quote { 1262.quote {
1267 color: #e6e6e6; 1263 color: #e6e6e6;
1268} 1264}
1269/* line 835, ../sass/default.scss */ 1265/* line 832, ../sass/default.scss */
1270.quote .author { 1266.quote .author {
1271 font-size: 24px; 1267 font-size: 24px;
1272 position: absolute; 1268 position: absolute;
@@ -1274,12 +1270,12 @@ aside.gdbar img {
1274 line-height: 1.4; 1270 line-height: 1.4;
1275} 1271}
1276 1272
1277/* line 844, ../sass/default.scss */ 1273/* line 841, ../sass/default.scss */
1278[data-config-contact] a { 1274[data-config-contact] a {
1279 color: white; 1275 color: white;
1280 border-bottom: none; 1276 border-bottom: none;
1281} 1277}
1282/* line 848, ../sass/default.scss */ 1278/* line 845, ../sass/default.scss */
1283[data-config-contact] span { 1279[data-config-contact] span {
1284 width: 115px; 1280 width: 115px;
1285 display: inline-block; 1281 display: inline-block;
diff --git a/theme/sass/default.scss b/theme/sass/default.scss
index 4d