diff options
author | Eric Bidelman | 2012-04-07 17:20:45 -0700 |
---|---|---|
committer | Eric Bidelman | 2012-04-07 17:20:45 -0700 |
commit | 1a10348622e92803cc9a90ec4369bb6974cc5329 (patch) | |
tree | f29792498f236de313635620bc04da3981af584c /theme/sass | |
parent | cb6cac6cb3f19a51254b7bb25acf86799c352989 (diff) | |
download | io-slides-remote-1a10348622e92803cc9a90ec4369bb6974cc5329.tar.gz |
slideleave now fires when navigating backwards
Diffstat (limited to 'theme/sass')
-rw-r--r-- | theme/sass/_base.scss | 2 | ||||
-rw-r--r-- | theme/sass/default.scss | 86 |
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 | ||
57 | slides > slide[hidden] { | 57 | slides > 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 | ||
44 | body { | 44 | body { |
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 | ||
77 | slides > slide:not(.nobackground):not(.logoslide):not(.fill) { | 78 | slides > 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 { | |||
95 | slides > slide:not(:first-of-type):not(.fill):not(.nobackground) { | 96 | slides > 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 | ||
163 | slides.layout-widescreen, | 173 | slides.layout-widescreen, |
@@ -240,31 +250,26 @@ h3 { | |||
240 | } | 250 | } |
241 | 251 | ||
242 | ul { | 252 | ul { |
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 | ||
250 | li { | 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 | |
260 | ul > li::before { | 270 | ul { |
261 | content: '·'; | 271 | margin-top: .5em; |
262 | width: 0.5em; | 272 | } |
263 | margin-left: -1.3em; | ||
264 | position: absolute; | ||
265 | } | ||
266 | ul li ul li::before { | ||
267 | content: ''; | ||
268 | } | 273 | } |
269 | 274 | ||
270 | pre { | 275 | pre { |
@@ -302,12 +307,7 @@ h3 + iframe { | |||
302 | 307 | ||
303 | button { | 308 | button { |
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 | ||
327 | button:active { | 327 | button: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 | ||
420 | slide.fill { | 415 | slide.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 |