aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--js/slides.js2
-rw-r--r--template.html12
-rw-r--r--theme/css/default.css404
-rw-r--r--theme/sass/default.scss81
4 files changed, 228 insertions, 271 deletions
diff --git a/js/slides.js b/js/slides.js
index d1b094b..f0e3900 100644
--- a/js/slides.js
+++ b/js/slides.js
@@ -50,7 +50,7 @@ SlideDeck.prototype.getCurrentSlideFromHash_ = function() {
50 * @private 50 * @private
51 */ 51 */
52SlideDeck.prototype.onDomLoaded_ = function(e) { 52SlideDeck.prototype.onDomLoaded_ = function(e) {
53 this.slides_ = document.querySelectorAll('slide:not([hidden])'); 53 this.slides_ = document.querySelectorAll('slide:not([hidden]):not(.backdrop)');
54 54
55 // Load config. 55 // Load config.
56 this.loadConfig_(); 56 this.loadConfig_();
diff --git a/template.html b/template.html
index 973666a..da89780 100644
--- a/template.html
+++ b/template.html
@@ -74,7 +74,7 @@ URL: https://code.google.com/p/io-2012-slides
74 74
75 <slide> 75 <slide>
76 <hgroup> 76 <hgroup>
77 <h2>Slide with Smaller Font</h2> 77 <h2>Slide with (Smaller Font)</h2>
78 </hgroup> 78 </hgroup>
79 <article class="smaller"> 79 <article class="smaller">
80 <ul> 80 <ul>
@@ -172,7 +172,7 @@ function helloWorld(world) {
172 172
173 <slide> 173 <slide>
174 <hgroup> 174 <hgroup>
175 <h2>Slide with Image (centered horz/vert)</h2> 175 <h2>Slide with Image (Centered horz/vert)</h2>
176 </hgroup> 176 </hgroup>
177 <article class="flexbox vcenter" style="height: 80%;"> 177 <article class="flexbox vcenter" style="height: 80%;">
178 <img src="images/barchart.png" alt="Description" title="Description"> 178 <img src="images/barchart.png" alt="Description" title="Description">
@@ -210,7 +210,7 @@ function helloWorld(world) {
210 210
211 <slide> 211 <slide>
212 <hgroup> 212 <hgroup>
213 <h2>Table Option A (small text)</h2> 213 <h2>Table Option A (Smaller Text)</h2>
214 <h3>Subtitle Placeholder</h3> 214 <h3>Subtitle Placeholder</h3>
215 </hgroup> 215 </hgroup>
216 <article class="smaller"> 216 <article class="smaller">
@@ -265,7 +265,7 @@ function helloWorld(world) {
265 265
266 <slide> 266 <slide>
267 <hgroup> 267 <hgroup>
268 <h2>Slide styles</h2> 268 <h2>Slide Styles</h2>
269 </hgroup> 269 </hgroup>
270 <article class="smaller columns-2"> 270 <article class="smaller columns-2">
271 <ul> 271 <ul>
@@ -313,7 +313,7 @@ function helloWorld(world) {
313 313
314 <slide> 314 <slide>
315 <hgroup> 315 <hgroup>
316 <h2>Slide with iframe</h2> 316 <h2>Slide with Iframe</h2>
317 </hgroup> 317 </hgroup>
318 <article> 318 <article>
319 <iframe data-src="http://www.google.com/doodle4google/history.html"></iframe> 319 <iframe data-src="http://www.google.com/doodle4google/history.html"></iframe>
@@ -343,6 +343,8 @@ function helloWorld(world) {
343 </article> 343 </article>
344 </slide> 344 </slide>
345 345
346 <slide class="backdrop"></slide>
347
346</slides> 348</slides>
347 349
348<script type="text/slide-config"> 350<script type="text/slide-config">
diff --git a/theme/css/default.css b/theme/css/default.css
index bb77b38..a6c1826 100644
--- a/theme/css/default.css
+++ b/theme/css/default.css
@@ -214,28 +214,15 @@ slide.fill img {
214 214
215/* line 87, ../sass/default.scss */ 215/* line 87, ../sass/default.scss */
216body { 216body {
217 background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 600, color-stop(0%, #b1dfff), color-stop(100%, #2a7cdf)); 217 background: black;
218 background-image: -webkit-radial-gradient(50% 50%, #b1dfff 0%, #2a7cdf 600px);
219 background-image: -moz-radial-gradient(50% 50%, #b1dfff 0%, #2a7cdf 600px);
220 background-image: -o-radial-gradient(50% 50%, #b1dfff 0%, #2a7cdf 600px);
221 background-image: -ms-radial-gradient(50% 50%, #b1dfff 0%, #2a7cdf 600px);
222 background-image: radial-gradient(50% 50%, #b1dfff 0%, #2a7cdf 600px);
223 background-attachment: fixed;
224} 218}
225 219
226/* line 93, ../sass/default.scss */ 220/* line 95, ../sass/default.scss */
227slides > slide { 221slides > slide {
228 display: none; 222 display: none;
229 font-family: 'Open Sans', Arial, sans-serif; 223 font-family: 'Open Sans', Arial, sans-serif;
230 font-size: 26px; 224 font-size: 26px;
231 color: #797979; 225 color: #797979;
232 background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(85%, #ffffff), color-stop(100%, #e6e6e6));
233 background: -webkit-linear-gradient(#ffffff, #ffffff 85%, #e6e6e6);
234 background: -moz-linear-gradient(#ffffff, #ffffff 85%, #e6e6e6);
235 background: -o-linear-gradient(#ffffff, #ffffff 85%, #e6e6e6);
236 background: -ms-linear-gradient(#ffffff, #ffffff 85%, #e6e6e6);
237 background: linear-gradient(#ffffff, #ffffff 85%, #e6e6e6);
238 background-color: white;
239 width: 900px; 226 width: 900px;
240 height: 700px; 227 height: 700px;
241 margin-left: -450px; 228 margin-left: -450px;
@@ -246,101 +233,52 @@ slides > slide {
246 -ms-border-radius: 5px; 233 -ms-border-radius: 5px;
247 -o-border-radius: 5px; 234 -o-border-radius: 5px;
248 border-radius: 5px; 235 border-radius: 5px;
249 -webkit-box-shadow: 5px 5px 20px #515151; 236 -webkit-transition: all 0.6s ease-out;
250 -moz-box-shadow: 5px 5px 20px #515151; 237 -moz-transition: all 0.6s ease-out;
251 box-shadow: 5px 5px 20px #515151; 238 -ms-transition: all 0.6s ease-out;
252 -webkit-transition: all 0.3s ease-out; 239 -o-transition: all 0.6s ease-out;
253 -moz-transition: all 0.3s ease-out; 240 transition: all 0.6s ease-out;
254 -ms-transition: all 0.3s ease-out; 241}
255 -o-transition: all 0.3s ease-out; 242/* line 116, ../sass/default.scss */
256 transition: all 0.3s ease-out;
257}
258/* line 114, ../sass/default.scss */
259slides > slide.far-past { 243slides > slide.far-past {
260 display: block; 244 display: none;
261 -webkit-transform: translate(-2040px); 245}
262 -moz-transform: translate(-2040px); 246/* line 123, ../sass/default.scss */
263 -ms-transform: translate(-2040px);
264 -o-transform: translate(-2040px);
265 transform: translate(-2040px);
266 -webkit-transform: translate3d(-2040px, 0, 0);
267 -moz-transform: translate3d(-2040px, 0, 0);
268 -ms-transform: translate3d(-2040px, 0, 0);
269 -o-transform: translate3d(-2040px, 0, 0);
270 transform: translate3d(-2040px, 0, 0);
271}
272/* line 120, ../sass/default.scss */
273slides > slide.past { 247slides > slide.past {
274 display: block; 248 display: block;
275 -webkit-transform: translate(-1020px) rotateY(30deg) rotateX(45deg); 249 opacity: 0;
276 -moz-transform: translate(-1020px) rotateY(30deg) rotateX(45deg); 250}
277 -ms-transform: translate(-1020px) rotateY(30deg) rotateX(45deg); 251/* line 130, ../sass/default.scss */
278 -o-transform: translate(-1020px) rotateY(30deg) rotateX(45deg);
279 transform: translate(-1020px) rotateY(30deg) rotateX(45deg);
280 -webkit-transform: translate3d(-1020px, 0, 0) rotateY(30deg) rotateX(45deg);
281 -moz-transform: translate3d(-1020px, 0, 0) rotateY(30deg) rotateX(45deg);
282 -ms-transform: translate3d(-1020px, 0, 0) rotateY(30deg) rotateX(45deg);
283 -o-transform: translate3d(-1020px, 0, 0) rotateY(30deg) rotateX(45deg);
284 transform: translate3d(-1020px, 0, 0) rotateY(30deg) rotateX(45deg);
285}
286/* line 126, ../sass/default.scss */
287slides > slide.current { 252slides > slide.current {
288 display: block; 253 display: block;
289 -webkit-transform: translate(0); 254 opacity: 1;
290 -moz-transform: translate(0);
291 -ms-transform: translate(0);
292 -o-transform: translate(0);
293 transform: translate(0);
294 -webkit-transform: translate3d(0, 0, 0);
295 -moz-transform: translate3d(0, 0, 0);
296 -ms-transform: translate3d(0, 0, 0);
297 -o-transform: translate3d(0, 0, 0);
298 transform: translate3d(0, 0, 0);
299} 255}
300/* line 131, ../sass/default.scss */ 256/* line 136, ../sass/default.scss */
301slides > slide.current .auto-fadein { 257slides > slide.current .auto-fadein {
302 opacity: 1; 258 opacity: 1;
303} 259}
304/* line 135, ../sass/default.scss */ 260/* line 140, ../sass/default.scss */
305slides > slide.current .gdbar { 261slides > slide.current .gdbar {
306 -webkit-background-size: 100% 100%; 262 -webkit-background-size: 100% 100%;
307 -moz-background-size: 100% 100%; 263 -moz-background-size: 100% 100%;
308 -o-background-size: 100% 100%; 264 -o-background-size: 100% 100%;
309 background-size: 100% 100%; 265 background-size: 100% 100%;
310} 266}
311/* line 140, ../sass/default.scss */ 267/* line 145, ../sass/default.scss */
312slides > slide.next { 268slides > slide.next {
313 display: block; 269 display: block;
314 -webkit-transform: translate(1020px) rotateY(-30deg) rotateX(45deg); 270 opacity: 0;
315 -moz-transform: translate(1020px) rotateY(-30deg) rotateX(45deg); 271 pointer-events: none;
316 -ms-transform: translate(1020px) rotateY(-30deg) rotateX(45deg); 272}
317 -o-transform: translate(1020px) rotateY(-30deg) rotateX(45deg); 273/* line 153, ../sass/default.scss */
318 transform: translate(1020px) rotateY(-30deg) rotateX(45deg);
319 -webkit-transform: translate3d(1020px, 0, 0) rotateY(-30deg) rotateX(45deg);
320 -moz-transform: translate3d(1020px, 0, 0) rotateY(-30deg) rotateX(45deg);
321 -ms-transform: translate3d(1020px, 0, 0) rotateY(-30deg) rotateX(45deg);
322 -o-transform: translate3d(1020px, 0, 0) rotateY(-30deg) rotateX(45deg);
323 transform: translate3d(1020px, 0, 0) rotateY(-30deg) rotateX(45deg);
324}
325/* line 146, ../sass/default.scss */
326slides > slide.far-next { 274slides > slide.far-next {
327 display: block; 275 display: none;
328 -webkit-transform: translate(2040px); 276}
329 -moz-transform: translate(2040px); 277/* line 160, ../sass/default.scss */
330 -ms-transform: translate(2040px);
331 -o-transform: translate(2040px);
332 transform: translate(2040px);
333 -webkit-transform: translate3d(2040px, 0, 0);
334 -moz-transform: translate3d(2040px, 0, 0);
335 -ms-transform: translate3d(2040px, 0, 0);
336 -o-transform: translate3d(2040px, 0, 0);
337 transform: translate3d(2040px, 0, 0);