aboutsummaryrefslogtreecommitdiff
path: root/theme/sass
diff options
context:
space:
mode:
Diffstat (limited to 'theme/sass')
-rw-r--r--theme/sass/_base.scss41
-rw-r--r--theme/sass/default.scss73
2 files changed, 59 insertions, 55 deletions
diff --git a/theme/sass/_base.scss b/theme/sass/_base.scss
index d8b9554..141aafe 100644
--- a/theme/sass/_base.scss
+++ b/theme/sass/_base.scss
@@ -86,48 +86,10 @@ slides > slide {
86 @include box-sizing(border-box); 86 @include box-sizing(border-box);
87} 87}
88 88
89
90/* Clickable/tappable areas */
91/*
92.slide-area {
93 z-index: 1000;
94
95 position: absolute;
96 left: 0;
97 top: 0;
98 width: 150px;
99 height: 700px;
100
101 left: 50%;
102 top: 50%;
103
104 cursor: pointer;
105 margin-top: -350px;
106
107 tap-highlight-color: transparent;
108 -o-tap-highlight-color: transparent;
109 -moz-tap-highlight-color: transparent;
110 -webkit-tap-highlight-color: transparent;
111}
112#prev-slide-area {
113 margin-left: -550px;
114}
115#next-slide-area {
116 margin-left: 400px;
117}
118.slides.layout-widescreen #prev-slide-area,
119.slides.layout-faux-widescreen #prev-slide-area {
120 margin-left: -650px;
121}
122.slides.layout-widescreen #next-slide-area,
123.slides.layout-faux-widescreen #next-slide-area {
124 margin-left: 500px;
125}*/
126
127/* Slide styles */ 89/* Slide styles */
128 90
129 91
130article.fill iframe { 92/*article.fill iframe {
131 position: absolute; 93 position: absolute;
132 left: 0; 94 left: 0;
133 top: 0; 95 top: 0;
@@ -156,3 +118,4 @@ slide.fill img {
156 118
157 z-index: -1; 119 z-index: -1;
158} 120}
121*/ \ No newline at end of file
diff --git a/theme/sass/default.scss b/theme/sass/default.scss
index b7b5ef5..4dcbb7a 100644
--- a/theme/sass/default.scss
+++ b/theme/sass/default.scss
@@ -33,7 +33,17 @@ $slide-top-bottom-padding: 40px;
33$slide-left-right-padding: 60px; 33$slide-left-right-padding: 60px;
34$slide-border-radius: 5px; 34$slide-border-radius: 5px;
35 35
36$article-cotent-top-padding: 45px; 36$slide-tap-area-width: 100px;
37
38$article-content-top-padding: 45px;
39
40@mixin highlight-color($color: $brand-yellow) {
41 -webkit-tap-highlight-color: $color;
42 -moz-tap-highlight-color: $color;
43 -ms-tap-highlight-color: $color;
44 -o-tap-highlight-color: $color;
45 tap-highlight-color: $color;
46}
37 47
38/** 48/**
39 * Theme Styles 49 * Theme Styles
@@ -183,7 +193,7 @@ slides > slide {
183 } 193 }
184 194
185 > hgroup + article { 195 > hgroup + article {
186 margin-top: $article-cotent-top-padding; 196 margin-top: $article-content-top-padding;
187 197
188 p { 198 p {
189 margin-bottom: 1em; 199 margin-bottom: 1em;
@@ -195,14 +205,7 @@ slides > slide {
195 } 205 }
196} 206}
197 207
198slides.layout-widescreen > slide {
199 margin-left: -$slide-width-widescreen / 2;
200 width: $slide-width-widescreen;
201}
202
203slides.layout-faux-widescreen > slide { 208slides.layout-faux-widescreen > slide {
204 margin-left: -$slide-width-widescreen / 2;
205 width: $slide-width-widescreen;
206 padding: $slide-top-bottom-padding 160px; 209 padding: $slide-top-bottom-padding 160px;
207} 210}
208 211
@@ -211,6 +214,11 @@ slides.layout-faux-widescreen {
211 214
212 $translateX: 1130px; 215 $translateX: 1130px;
213 216
217 > slide {
218 margin-left: -$slide-width-widescreen / 2;
219 width: $slide-width-widescreen;
220 }
221
214 > slide.far-past { 222 > slide.far-past {
215 display: block; 223 display: block;
216 @include transform(translate(-$translateX * 2)); 224 @include transform(translate(-$translateX * 2));
@@ -240,6 +248,14 @@ slides.layout-faux-widescreen {
240 @include transform(translate($translateX * 2)); 248 @include transform(translate($translateX * 2));
241 @include transform(translate3d($translateX * 2, 0, 0)); 249 @include transform(translate3d($translateX * 2, 0, 0));
242 } 250 }
251
252 #prev-slide-area {
253 margin-left: -$slide-width-widescreen / 2 - $slide-tap-area-width;
254 }
255
256 #next-slide-area {
257 margin-left: $slide-width-widescreen / 2;
258 }
243} 259}
244 260
245b { 261b {
@@ -353,7 +369,7 @@ code {
353 369
354iframe { 370iframe {
355 width: 100%; 371 width: 100%;
356 height: $slide-height - ($slide-top-bottom-padding * 2) - ($article-cotent-top-padding * 2); 372 height: $slide-height - ($slide-top-bottom-padding * 2) - ($article-content-top-padding * 2);
357 background: white; 373 background: white;
358 border: 1px solid $gray-1; 374 border: 1px solid $gray-1;
359 @include box-sizing(border-box); 375 @include box-sizing(border-box);
@@ -363,10 +379,6 @@ dt {
363 font-weight: bold; 379 font-weight: bold;
364} 380}
365 381
366h3 + iframe {
367 height: 540px;
368}
369
370button { 382button {
371 display: inline-block; 383 display: inline-block;
372 @include background(linear-gradient(#F9F9F9 40%, #E3E3E3 70%)); 384 @include background(linear-gradient(#F9F9F9 40%, #E3E3E3 70%));
@@ -640,7 +652,7 @@ input, button {
640 vertical-align: middle; 652 vertical-align: middle;
641} 653}
642 654
643.centered { 655/*.centered {
644 text-align: center; 656 text-align: center;
645} 657}
646 658
@@ -650,7 +662,7 @@ input, button {
650 -o-box-reflect: below 3px -o-linear-gradient(rgba(255,255,255,0) 85%, white 150%); 662 -o-box-reflect: below 3px -o-linear-gradient(rgba(255,255,255,0) 85%, white 150%);
651 -ms-box-reflect: below 3px -ms-linear-gradient(rgba(255,255,255,0) 85%, white 150%); 663 -ms-box-reflect: below 3px -ms-linear-gradient(rgba(255,255,255,0) 85%, white 150%);
652 box-reflect: below 3px linear-gradient(rgba(255,255,255,0) 85%, white 150%); 664 box-reflect: below 3px linear-gradient(rgba(255,255,255,0) 85%, white 150%);
653} 665}*/
654 666
655.flexbox { 667.flexbox {
656 @include flexbox; 668 @include flexbox;
@@ -673,6 +685,35 @@ input, button {
673 opacity: 0; 685 opacity: 0;
674} 686}
675 687
688/* Clickable/tappable areas */
689.slide-area {
690 z-index: 1000;
691
692 position: absolute;
693 left: 0;
694 top: 0;
695 width: $slide-tap-area-width;
696 height: $slide-height;
697
698 left: 50%;
699 top: 50%;
700
701 cursor: pointer;
702 margin-top: -$slide-height / 2;
703
704 //@include highlight-color(rgba(51, 51, 51, 0.5));
705}
706#prev-slide-area {
707 margin-left: -$slide-width-widescreen / 2;
708 //@include border-radius(10px 0 0 10px);
709 //@include box-shadow(-5px 0 10px #222 inset);
710}
711#next-slide-area {
712 margin-left: $slide-width / 2;
713 //@include border-radius(0 10px 10px 0);
714 //@include box-shadow(5px 0 10px #222 inset);
715}
716
676/* ===== SLIDE CONTENT ===== */ 717/* ===== SLIDE CONTENT ===== */
677.logoslide { 718.logoslide {
678 img { 719 img {