aboutsummaryrefslogtreecommitdiff
path: root/theme/sass
diff options
context:
space:
mode:
Diffstat (limited to 'theme/sass')
-rw-r--r--theme/sass/default.scss166
1 files changed, 72 insertions, 94 deletions
diff --git a/theme/sass/default.scss b/theme/sass/default.scss
index 271015c..b7b5ef5 100644
--- a/theme/sass/default.scss
+++ b/theme/sass/default.scss
@@ -81,99 +81,21 @@ body {
81} 81}
82 82
83slides > slide { 83slides > slide {
84 display: none;
85 font-family: 'Open Sans', Arial, sans-serif;
86 font-size: 26px;
87 color: $gray-3;
88 @include background(linear-gradient(white, white 85%, $gray-1));
89 background-color: white;
84 width: $slide-width; 90 width: $slide-width;
85 height: $slide-height; 91 height: $slide-height;
86 margin-left: -$slide-width / 2; 92 margin-left: -$slide-width / 2;
87 margin-top: -$slide-height / 2; 93 margin-top: -$slide-height / 2;
88
89 padding: $slide-top-bottom-padding $slide-left-right-padding; 94 padding: $slide-top-bottom-padding $slide-left-right-padding;
90 95
91 background-color: white;
92 font-size: 26px;
93
94 @include border-radius($slide-border-radius); 96 @include border-radius($slide-border-radius);
95 @include box-shadow(5px 5px 20px $gray-4); 97 @include box-shadow(5px 5px 20px $gray-4);
96 @include transition(all 0.3s ease-out); 98 @include transition(all 0.3s ease-out);
97}
98
99slides.layout-widescreen > slide {
100 margin-left: -$slide-width-widescreen / 2;
101 width: $slide-width-widescreen;
102}
103
104slides.layout-faux-widescreen > slide {
105 margin-left: -$slide-width-widescreen / 2;
106 width: $slide-width-widescreen;
107 padding: $slide-top-bottom-padding 160px;
108}
109
110slides > slide:not(.nobackground):not(.fill) {
111 //background: white url(../../images/google_developers_icon_128.png) ($brand-small-icon-size * 2) 98% no-repeat;
112 //@include background-size($brand-small-icon-size $brand-small-icon-size);
113}
114
115/*slides.nobackground slide:not(.fill) {
116 background: url(/images/devfest_logo_small.png) 98% 99% no-repeat,
117 url(/images/bubbles.png) 5% -125px no-repeat,
118 url(/images/colorbar.png) 0 91% repeat-x,
119 white !important;
120}
121
122slides.nobackground slide:not(.fill)::after,
123slides.nobackground slide:not(.fill)::before {
124 color: inherit !important;
125}
126*/
127
128slides > slide:not(.fill):not(.nobackground) {
129
130 &:before {
131 font-size: 12pt;
132 content: $social-tags;
133 position: absolute;
134 bottom: $slide-top-bottom-padding / 2;
135 left: $slide-left-right-padding;
136 background: url(../../images/google_developers_icon_128.png) no-repeat 0 50%;
137 @include background-size($brand-small-icon-size $brand-small-icon-size);
138 padding-left: $brand-small-icon-size + 10;
139 height: $brand-small-icon-size;
140 line-height: 1.9;
141 }
142 &:after {
143 font-size: 12pt;
144 content: attr(data-slide-num) '/' attr(data-total-slides);
145 position: absolute;
146 bottom: $slide-top-bottom-padding / 2;
147 right: $slide-left-right-padding;
148 line-height: 1.9;
149 }
150}
151
152slides > slide.title-slide {
153 &:after {
154 content: '';
155 background: url(../../images/io2012_logo.png) no-repeat 100% 50%;
156 @include background-size(contain);
157 position: absolute;
158 bottom: $slide-top-bottom-padding;
159 right: $slide-top-bottom-padding;
160 width: 100%;
161 height: 60px;
162 }
163}
164
165/*slides.layout-widescreen > slide:not(.nobackground),
166slides.layout-faux-widescreen > slide:not(.nobackground) {
167 background-position-x: 0, 840px;
168}*/
169
170/* Slides */
171
172slides > slide {
173 display: none;
174 font-family: 'Open Sans', Arial, sans-serif;
175 color: $gray-3;
176 @include background(linear-gradient(white, white 85%, $gray-1));
177 99
178 $translateX: 1020px; 100 $translateX: 1020px;
179 $rotateY: 30deg; 101 $rotateY: 30deg;
@@ -221,6 +143,45 @@ slides > slide {
221 background: $gray-4; 143 background: $gray-4;
222 } 144 }
223 145
146 &:not(.fill):not(.nobackground) {
147 //background: white url(../../images/google_developers_icon_128.png) ($brand-small-icon-size * 2) 98% no-repeat;
148 //@include background-size($brand-small-icon-size $brand-small-icon-size);
149
150 &:before {
151 font-size: 12pt;
152 content: $social-tags;
153 position: absolute;
154 bottom: $slide-top-bottom-padding / 2;
155 left: $slide-left-right-padding;
156 background: url(../../images/google_developers_icon_128.png) no-repeat 0 50%;
157 @include background-size($brand-small-icon-size $brand-small-icon-size);
158 padding-left: $brand-small-icon-size + 10;
159 height: $brand-small-icon-size;
160 line-height: 1.9;
161 }
162 &:after {
163 font-size: 12pt;
164 content: attr(data-slide-num) '/' attr(data-total-slides);
165 position: absolute;
166 bottom: $slide-top-bottom-padding / 2;
167 right: $slide-left-right-padding;
168 line-height: 1.9;
169 }
170 }
171
172 &.title-slide {
173 &:after {
174 content: '';
175 background: url(../../images/io2012_logo.png) no-repeat 100% 50%;
176 @include background-size(contain);
177 position: absolute;
178 bottom: $slide-top-bottom-padding;
179 right: $slide-top-bottom-padding;
180 width: 100%;
181 height: 60px;
182 }
183 }
184
224 > hgroup + article { 185 > hgroup + article {
225 margin-top: $article-cotent-top-padding; 186 margin-top: $article-cotent-top-padding;
226 187
@@ -234,6 +195,17 @@ slides > slide {
234 } 195 }
235} 196}
236 197
198slides.layout-widescreen > slide {
199 margin-left: -$slide-width-widescreen / 2;
200 width: $slide-width-widescreen;
201}
202
203slides.layout-faux-widescreen > slide {
204 margin-left: -$slide-width-widescreen / 2;
205 width: $slide-width-widescreen;
206 padding: $slide-top-bottom-padding 160px;
207}
208
237slides.layout-widescreen, 209slides.layout-widescreen,
238slides.layout-faux-widescreen { 210slides.layout-faux-widescreen {
239 211
@@ -325,7 +297,6 @@ ul {
325 297
326 > li:before { 298 > li:before {
327 content: '·'; 299 content: '·';
328 //width: 0.5em;
329 margin-left: -1em; 300 margin-left: -1em;
330 position: absolute; 301 position: absolute;
331 font-weight: 600; 302 font-weight: 600;
@@ -336,7 +307,8 @@ ul {
336 } 307 }
337} 308}
338 309
339.highlight-code { 310// Code highlighting only effects the current slide.
311.highlight-code slide.current {
340 pre > * { 312 pre > * {
341 opacity: 0.25; 313 opacity: 0.25;
342 @include transition(opacity 0.5s ease-in); 314 @include transition(opacity 0.5s ease-in);
@@ -627,9 +599,16 @@ article.smaller {
627 color: $gray-4; 599 color: $gray-4;
628} 600}
629 601
630.with-notes .note { 602// Speaker notes only show the current slide.
631 opacity: 1; 603.with-notes {
632 pointer-events: auto; 604 slide.current {
605 @include transform(rotateY(180deg) !important);
606 }
607 .note {
608 opacity: 1;
609 @include transform(rotateY(180deg));
610 pointer-events: auto;
611 }
633} 612}
634 613
635.note { 614.note {
@@ -640,13 +619,12 @@ article.smaller {
640 top: 0; 619 top: 0;
641 left: 0; 620 left: 0;
642 background: rgba(0, 0, 0, 0.3); 621 background: rgba(0, 0, 0, 0.3);
622 opacity: 0;
623 pointer-events: none;
643 @include flexbox; 624 @include flexbox;
644 @include flex-center-center; 625 @include flex-center-center;
645 626 @include transition(transform 0.2s cubic-bezier(.10, .10, .25, .90),
646 pointer-events: none; 627 opacity 0.4s ease-in-out 0.4s);
647 @include transition(all 0.2s ease-in-out);
648 opacity: 0;
649
650 @include border-radius($slide-border-radius); 628 @include border-radius($slide-border-radius);
651 629
652 > section { 630 > section {