aboutsummaryrefslogtreecommitdiff
path: root/theme/sass
diff options
context:
space:
mode:
authorEric Bidelman2012-04-13 18:49:50 -0700
committerEric Bidelman2012-04-13 18:49:50 -0700
commitdb9d27b49f808228f3385cfcdc1c034f76c6b8da (patch)
treeae841933d79049e2bc7810fbe48e3fe75cc5f06e /theme/sass
parentbb0557c16f9a6bb8a0b547e735b30c6bb962b8cb (diff)
downloadio-slides-remote-db9d27b49f808228f3385cfcdc1c034f76c6b8da.tar.gz
Slides sliding in is oldschool. We now fade between slides
Diffstat (limited to 'theme/sass')
-rw-r--r--theme/sass/default.scss81
1 files changed, 53 insertions, 28 deletions
diff --git a/theme/sass/default.scss b/theme/sass/default.scss
index 89d38d0..a5d9c69 100644
--- a/theme/sass/default.scss
+++ b/theme/sass/default.scss
@@ -85,9 +85,11 @@ $article-content-top-padding: 45px;
85} 85}
86 86
87body { 87body {
88 @include background-image(radial-gradient(50% 50%, #b1dfff 0%, 88 //@include background-image(radial-gradient(50% 50%, #b1dfff 0%,
89 $brand-blue-secondary2 600px)); 89 // $brand-blue-secondary2 600px));
90 background-attachment: fixed; 90 //background-attachment: fixed;
91 //@include background(linear-gradient(white, white 85%, $gray-1));
92 background: black;
91} 93}
92 94
93slides > slide { 95slides > slide {
@@ -95,8 +97,8 @@ slides > slide {
95 font-family: 'Open Sans', Arial, sans-serif; 97 font-family: 'Open Sans', Arial, sans-serif;
96 font-size: 26px; 98 font-size: 26px;
97 color: $gray-3; 99 color: $gray-3;
98 @include background(linear-gradient(white, white 85%, $gray-1)); 100 //@include background(linear-gradient(white, white 85%, $gray-1));
99 background-color: white; 101 //background-color: white;
100 width: $slide-width; 102 width: $slide-width;
101 height: $slide-height; 103 height: $slide-height;
102 margin-left: -$slide-width / 2; 104 margin-left: -$slide-width / 2;
@@ -104,29 +106,32 @@ slides > slide {
104 padding: $slide-top-bottom-padding $slide-left-right-padding; 106 padding: $slide-top-bottom-padding $slide-left-right-padding;
105 107
106 @include border-radius($slide-border-radius); 108 @include border-radius($slide-border-radius);
107 @include box-shadow(5px 5px 20px $gray-4); 109 //@include box-shadow(5px 5px 20px $gray-4);
108 @include transition(all 0.3s ease-out); 110 @include transition(all 0.6s ease-out);
109 111
110 $translateX: 1020px; 112 //$translateX: 1020px;
111 $rotateY: 30deg; 113 //$rotateY: 30deg;
112 $rotateX: 45deg; 114 //$rotateX: 45deg;
113 115
114 &.far-past { 116 &.far-past {
115 display: block; 117 //display: block;
116 @include transform(translate(-$translateX * 2)); 118 display: none;
117 @include transform(translate3d(-$translateX * 2, 0, 0)); 119 //@include transform(translate(-$translateX * 2));
120 //@include transform(translate3d(-$translateX * 2, 0, 0));
118 } 121 }
119 122
120 &.past { 123 &.past {
121 display: block; 124 display: block;
122 @include transform(translate(-$translateX) rotateY($rotateY) rotateX($rotateX)); 125 //@include transform(translate(-$translateX) rotateY($rotateY) rotateX($rotateX));
123 @include transform(translate3d(-$translateX, 0, 0) rotateY($rotateY) rotateX($rotateX)); 126 //@include transform(translate3d(-$translateX, 0, 0) rotateY($rotateY) rotateX($rotateX));
127 opacity: 0;
124 } 128 }
125 129
126 &.current { 130 &.current {
127 display: block; 131 display: block;
128 @include transform(translate(0)); 132 //@include transform(translate(0));
129 @include transform(translate3d(0, 0, 0)); 133 //@include transform(translate3d(0, 0, 0));
134 opacity: 1;
130 135
131 .auto-fadein { 136 .auto-fadein {
132 opacity: 1; 137 opacity: 1;
@@ -139,14 +144,17 @@ slides > slide {
139 144
140 &.next { 145 &.next {
141 display: block; 146 display: block;
142 @include transform(translate($translateX) rotateY(-$rotateY) rotateX($rotateX)); 147 //@include transform(translate($translateX) rotateY(-$rotateY) rotateX($rotateX));
143 @include transform(translate3d($translateX, 0, 0) rotateY(-$rotateY) rotateX($rotateX)); 148 //@include transform(translate3d($translateX, 0, 0) rotateY(-$rotateY) rotateX($rotateX));
149 opacity: 0;
150 pointer-events: none;
144 } 151 }
145 152
146 &.far-next { 153 &.far-next {
147 display: block; 154 //display: block;
148 @include transform(translate($translateX * 2)); 155 display: none;
149 @include transform(translate3d($translateX * 2, 0, 0)); 156 //@include transform(translate($translateX * 2));
157 //@include transform(translate3d($translateX * 2, 0, 0));
150 } 158 }
151 159
152 &.dark { 160 &.dark {
@@ -192,6 +200,17 @@ slides > slide {
192 } 200 }
193 } 201 }
194 202
203 &.backdrop {
204 z-index: -1;
205 display: block !important;
206 @include background(linear-gradient(white, white 85%, $gray-1));
207 background-color: white;
208
209 &:after, &:before {
210 display: none;
211 }
212 }
213
195 > hgroup + article { 214 > hgroup + article {
196 margin-top: $article-content-top-padding; 215 margin-top: $article-content-top-padding;
197 216
@@ -221,30 +240,36 @@ slides.layout-faux-widescreen {
221 240
222 > slide.far-past { 241 > slide.far-past {
223 display: block; 242 display: block;
243 display: none;
224 @include transform(translate(-$translateX * 2)); 244 @include transform(translate(-$translateX * 2));
225 @include transform(translate3d(-$translateX * 2, 0, 0)); 245 @include transform(translate3d(-$translateX * 2, 0, 0));
226 } 246 }
227 247
228 > slide.past { 248 > slide.past {
229 display: block; 249 display: block;
230 @include transform(translate(-$translateX)); 250 //@include transform(translate(-$translateX));
231 @include transform(translate3d(-$translateX, 0, 0)); 251 //@include transform(translate3d(-$translateX, 0, 0));
252 opacity: 0;
232 } 253 }
233 254
234 > slide.current { 255 > slide.current {
235 display: block; 256 display: block;
236 @include transform(translate(0)); 257 //@include transform(translate(0));
237 @include transform(translate3d(0, 0, 0)); 258 //@include transform(translate3d(0, 0, 0));
259 opacity: 1;
238 } 260 }
239 261
240 > slide.next { 262 > slide.next {
241 display: block; 263 display: block;
242 @include transform(translate($translateX)); 264 //@include transform(translate($translateX));
243 @include transform(translate3d($translateX, 0, 0)); 265 //@include transform(translate3d($translateX, 0, 0));
266 opacity: 0;
267 pointer-events: none;
244 } 268 }
245 269
246 > slide.far-next { 270 > slide.far-next {
247 display: block; 271 display: block;
272 display: none;
248 @include transform(translate($translateX * 2)); 273 @include transform(translate($translateX * 2));
249 @include transform(translate3d($translateX * 2, 0, 0)); 274 @include transform(translate3d($translateX * 2, 0, 0));
250 } 275 }