aboutsummaryrefslogtreecommitdiff
path: root/theme/sass
diff options
context:
space:
mode:
authorEric Bidelman2012-04-07 17:20:45 -0700
committerEric Bidelman2012-04-07 17:20:45 -0700
commit1a10348622e92803cc9a90ec4369bb6974cc5329 (patch)
treef29792498f236de313635620bc04da3981af584c /theme/sass
parentcb6cac6cb3f19a51254b7bb25acf86799c352989 (diff)
downloadio-slides-remote-1a10348622e92803cc9a90ec4369bb6974cc5329.tar.gz
slideleave now fires when navigating backwards
Diffstat (limited to 'theme/sass')
-rw-r--r--theme/sass/_base.scss2
-rw-r--r--theme/sass/default.scss86
2 files changed, 40 insertions, 48 deletions
diff --git a/theme/sass/_base.scss b/theme/sass/_base.scss
index 445710b..6490ef8 100644
--- a/theme/sass/_base.scss
+++ b/theme/sass/_base.scss
@@ -51,7 +51,7 @@ body {
51 51
52 color: #fff; 52 color: #fff;
53 @include font-smoothing(antialiased); 53 @include font-smoothing(antialiased);
54 @include transition(opacity 600ms ease-in); 54 @include transition(opacity 800ms ease-in);
55} 55}
56 56
57slides > slide[hidden] { 57slides > slide[hidden] {
diff --git a/theme/sass/default.scss b/theme/sass/default.scss
index e218598..102b7b3 100644
--- a/theme/sass/default.scss
+++ b/theme/sass/default.scss
@@ -25,12 +25,12 @@ $brand-green: rgb(13, 168, 97);
25$brand-green-secondary: #00a86d; 25$brand-green-secondary: #00a86d;
26$brand-green-secondary2: #009f5d; 26$brand-green-secondary2: #009f5d;
27 27
28
29$slide-width: 900px; 28$slide-width: 900px;
30$slide-height: 700px; 29$slide-height: 700px;
31$slide-width-widescreen: 1100px; 30$slide-width-widescreen: 1100px;
32$slide-top-bottom-padding: 40px; 31$slide-top-bottom-padding: 40px;
33$slide-left-right-padding: 60px; 32$slide-left-right-padding: 60px;
33$slide-border-radius: 5px;
34 34
35/** 35/**
36 * Theme Styles 36 * Theme Styles
@@ -42,7 +42,7 @@ $slide-left-right-padding: 60px;
42} 42}
43 43
44body { 44body {
45 @include background-image(radial-gradient(50% 50%, $brand-blue 0%, 45 @include background-image(radial-gradient(50% 50%, #b1dfff 0%,
46 $brand-blue-secondary2 600px)); 46 $brand-blue-secondary2 600px));
47 //@include background-image(linear-gradient(top, $brand-blue 60%, $brand-blue-secondary2)); 47 //@include background-image(linear-gradient(top, $brand-blue 60%, $brand-blue-secondary2));
48 background-attachment: fixed; 48 background-attachment: fixed;
@@ -57,9 +57,10 @@ slides > slide {
57 padding: $slide-top-bottom-padding $slide-left-right-padding; 57 padding: $slide-top-bottom-padding $slide-left-right-padding;
58 58
59 background-color: white; 59 background-color: white;
60 font-size: 26px;
60 61
61 @include border-radius(5px); 62 @include border-radius($slide-border-radius);
62 @include box-shadow(3px 3px 20px $gray-4); 63 @include box-shadow(5px 5px 20px $gray-4);
63 @include transition(all 0.3s ease-out); 64 @include transition(all 0.3s ease-out);
64} 65}
65 66
@@ -75,7 +76,7 @@ slides.layout-faux-widescreen > slide {
75} 76}
76 77
77slides > slide:not(.nobackground):not(.logoslide):not(.fill) { 78slides > slide:not(.nobackground):not(.logoslide):not(.fill) {
78 //background: white url(/images/google_developers_icon_128.png) ($brand-small-icon-size * 2) 98% no-repeat; 79 //background: white url(../../images/google_developers_icon_128.png) ($brand-small-icon-size * 2) 98% no-repeat;
79 //@include background-size($brand-small-icon-size $brand-small-icon-size); 80 //@include background-size($brand-small-icon-size $brand-small-icon-size);
80} 81}
81 82
@@ -95,21 +96,24 @@ slides.nobackground slide:not(.fill)::before {
95slides > slide:not(:first-of-type):not(.fill):not(.nobackground) { 96slides > slide:not(:first-of-type):not(.fill):not(.nobackground) {
96 97
97 &:before { 98 &:before {
99 font-size: 12pt;
98 content: $social-tags; 100 content: $social-tags;
99 position: absolute; 101 position: absolute;
100 bottom: $slide-top-bottom-padding / 2; 102 bottom: $slide-top-bottom-padding / 2;
101 left: $slide-left-right-padding; 103 left: $slide-left-right-padding;
102 background: url(/images/google_developers_icon_128.png) no-repeat 0 50%; 104 background: url(../../images/google_developers_icon_128.png) no-repeat 0 50%;
103 @include background-size($brand-small-icon-size $brand-small-icon-size); 105 @include background-size($brand-small-icon-size $brand-small-icon-size);
104 padding-left: $brand-small-icon-size + 10; 106 padding-left: $brand-small-icon-size + 10;
105 height: $brand-small-icon-size; 107 height: $brand-small-icon-size;
106 line-height: 1.9; 108 line-height: 1.9;
107 } 109 }
108 &:after { 110 &:after {
111 font-size: 12pt;
109 content: attr(data-slide-num) '/' attr(data-total-slides); 112 content: attr(data-slide-num) '/' attr(data-total-slides);
110 position: absolute; 113 position: absolute;
111 bottom: $slide-top-bottom-padding / 2; 114 bottom: $slide-top-bottom-padding / 2;
112 right: $slide-left-right-padding; 115 right: $slide-left-right-padding;
116 line-height: 1.9;
113 } 117 }
114} 118}
115 119
@@ -125,6 +129,8 @@ slides > slide {
125 font-family: 'Open Sans', Arial, sans-serif; 129 font-family: 'Open Sans', Arial, sans-serif;
126 color: $gray-3; 130 color: $gray-3;
127 131
132 @include background(linear-gradient(white, white 85%, $gray-1));
133
128 $translateX: 1020px; 134 $translateX: 1020px;
129 $rotateY: 30deg; 135 $rotateY: 30deg;
130 $rotateX: 45deg; 136 $rotateX: 45deg;
@@ -158,6 +164,10 @@ slides > slide {
158 @include transform(translate($translateX * 2)); 164 @include transform(translate($translateX * 2));
159 @include transform(translate3d($translateX * 2, 0, 0)); 165 @include transform(translate3d($translateX * 2, 0, 0));
160 } 166 }
167
168 > article {
169 margin-top: 2em;
170 }
161} 171}
162 172
163slides.layout-widescreen, 173slides.layout-widescreen,
@@ -240,31 +250,26 @@ h3 {
240} 250}
241 251
242ul { 252ul {
243 margin-left: .75em; 253 margin-left: 1.5em;
244 254
245 ul { 255 li {
246 margin-top: .5em; 256 margin-bottom: 0.5em;
247 }
248}
249 257
250li { 258 ul li:before {
251 margin-bottom: 0.5em; 259 content: '-';
260 }
261 }
252 262
253 &:before { 263 > li:before {
254 content: '·'; 264 content: '·';
255 width: .75em; 265 width: 0.5em;
256 margin-left: -.75em; 266 margin-left: -1.3em;
257 position: absolute; 267 position: absolute;
258 } 268 }
259} 269
260ul > li::before { 270 ul {
261 content: '·'; 271 margin-top: .5em;
262 width: 0.5em; 272 }
263 margin-left: -1.3em;
264 position: absolute;
265}
266ul li ul li::before {
267 content: '';
268} 273}
269 274
270pre { 275pre {
@@ -302,12 +307,7 @@ h3 + iframe {
302 307
303button { 308button {
304 display: inline-block; 309 display: inline-block;
305 background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#F9F9F9), to(#E3E3E3)); 310 @include background(linear-gradient(#F9F9F9 40%, #E3E3E3 70%));
306 background: -webkit-linear-gradient(#F9F9F9 40%, #E3E3E3 70%);
307 background: -moz-linear-gradient(#F9F9F9 40%, #E3E3E3 70%);
308 background: -ms-linear-gradient(#F9F9F9 40%, #E3E3E3 70%);
309 background: -o-linear-gradient(#F9F9F9 40%, #E3E3E3 70%);
310 background: linear-gradient(#F9F9F9 40%, #E3E3E3 70%);
311 border: 1px solid #999; 311 border: 1px solid #999;
312 @include border-radius(3px); 312 @include border-radius(3px);
313 padding: 5px 8px; 313 padding: 5px 8px;
@@ -325,12 +325,7 @@ button:hover {
325} 325}
326 326
327button:active { 327button:active {
328 background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#E3E3E3), to(#F9F9F9)); 328 @include background(linear-gradient(#E3E3E3 40%, #F9F9F9 70%));
329 background: -webkit-linear-gradient(#E3E3E3 40%, #F9F9F9 70%);
330 background: -moz-linear-gradient(#E3E3E3 40%, #F9F9F9 70%);
331 background: -ms-linear-gradient(#E3E3E3 40%, #F9F9F9 70%);
332 background: -o-linear-gradient(#E3E3E3 40%, #F9F9F9 70%);
333 background: linear-gradient(#E3E3E3 40%, #F9F9F9 70%);
334} 329}
335 330
336.blue { 331.blue {
@@ -418,7 +413,7 @@ div.author {
418} 413}
419 414
420slide.fill { 415slide.fill {
421 @include border-radius(10px); 416 @include border-radius($slide-border-radius);
422 417
423 h3 { 418 h3 {
424 background: rgba(255, 255, 255, .75); 419 background: rgba(255, 255, 255, .75);
@@ -522,26 +517,25 @@ article.smaller {
522} 517}
523 518
524.note { 519.note {
525 font-size: 20px;
526 position: absolute; 520 position: absolute;
527 z-index: 100; 521 z-index: 100;
528 width: 100%; 522 width: 100%;
529 height: 100%; 523 height: 100%;
530 top: 0; 524 top: 0;
531 left: 0; 525