diff options
Diffstat (limited to 'theme/sass')
-rw-r--r-- | theme/sass/_base.scss | 10 | ||||
-rw-r--r-- | theme/sass/default.scss | 126 |
2 files changed, 109 insertions, 27 deletions
diff --git a/theme/sass/_base.scss b/theme/sass/_base.scss index 6490ef8..d8b9554 100644 --- a/theme/sass/_base.scss +++ b/theme/sass/_base.scss | |||
@@ -16,17 +16,25 @@ | |||
16 | -o-font-smoothing: $val; | 16 | -o-font-smoothing: $val; |
17 | } | 17 | } |
18 | 18 | ||
19 | @mixin flexcenter { | 19 | @mixin flexbox { |
20 | display: -webkit-box !important; | 20 | display: -webkit-box !important; |
21 | display: -moz-box !important; | 21 | display: -moz-box !important; |
22 | display: -ms-box !important; | 22 | display: -ms-box !important; |
23 | display: -o-box !important; | 23 | display: -o-box !important; |
24 | display: box !important; | 24 | display: box !important; |
25 | } | ||
26 | |||
27 | @mixin flex-center-center { | ||
25 | @include box-orient(vertical); | 28 | @include box-orient(vertical); |
26 | @include box-align(center); | 29 | @include box-align(center); |
27 | @include box-pack(center); | 30 | @include box-pack(center); |
28 | } | 31 | } |
29 | 32 | ||
33 | @mixin flex-left-center { | ||
34 | @include box-orient(vertical); | ||
35 | @include box-align(left); | ||
36 | @include box-pack(center); | ||
37 | } | ||
30 | 38 | ||
31 | /** | 39 | /** |
32 | * Base SlideDeck Styles | 40 | * Base SlideDeck Styles |
diff --git a/theme/sass/default.scss b/theme/sass/default.scss index 102b7b3..f1088ba 100644 --- a/theme/sass/default.scss +++ b/theme/sass/default.scss | |||
@@ -75,7 +75,7 @@ slides.layout-faux-widescreen > slide { | |||
75 | padding: $slide-top-bottom-padding 160px; | 75 | padding: $slide-top-bottom-padding 160px; |
76 | } | 76 | } |
77 | 77 | ||
78 | slides > slide:not(.nobackground):not(.logoslide):not(.fill) { | 78 | slides > slide:not(.nobackground):not(.fill) { |
79 | //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; |
80 | //@include background-size($brand-small-icon-size $brand-small-icon-size); | 80 | //@include background-size($brand-small-icon-size $brand-small-icon-size); |
81 | } | 81 | } |
@@ -93,7 +93,7 @@ slides.nobackground slide:not(.fill)::before { | |||
93 | } | 93 | } |
94 | */ | 94 | */ |
95 | 95 | ||
96 | slides > slide:not(:first-of-type):not(.fill):not(.nobackground) { | 96 | slides > slide:not(.fill):not(.nobackground) { |
97 | 97 | ||
98 | &:before { | 98 | &:before { |
99 | font-size: 12pt; | 99 | font-size: 12pt; |
@@ -165,8 +165,16 @@ slides > slide { | |||
165 | @include transform(translate3d($translateX * 2, 0, 0)); | 165 | @include transform(translate3d($translateX * 2, 0, 0)); |
166 | } | 166 | } |
167 | 167 | ||
168 | hgroup + article { | ||
169 | margin-top: 1.5em; | ||
170 | } | ||
171 | |||
168 | > article { | 172 | > article { |
169 | margin-top: 2em; | 173 | margin-top: 2em; |
174 | |||
175 | p { | ||
176 | margin-bottom: 1em; | ||
177 | } | ||
170 | } | 178 | } |
171 | } | 179 | } |
172 | 180 | ||
@@ -231,18 +239,10 @@ h2 { | |||
231 | line-height: 45px; | 239 | line-height: 45px; |
232 | letter-spacing: -2px; | 240 | letter-spacing: -2px; |
233 | color: $gray-4; | 241 | color: $gray-4; |
234 | |||
235 | //padding: 30px 60px; | ||
236 | |||
237 | //width: 100%; | ||
238 | //background: rgba(255, 255, 255, 0.3); | ||
239 | //@include box-shadow(0 1px 5px #333); | ||
240 | //@include box-sizing(border-box); | ||
241 | } | 242 | } |
242 | 243 | ||
243 | h3 { | 244 | h3 { |
244 | font-size: 30px; | 245 | font-size: 30px; |
245 | margin: 0 0 1em 0; | ||
246 | letter-spacing: -1px; | 246 | letter-spacing: -1px; |
247 | line-height: 2; | 247 | line-height: 2; |
248 | font-weight: inherit; | 248 | font-weight: inherit; |
@@ -250,21 +250,29 @@ h3 { | |||
250 | } | 250 | } |
251 | 251 | ||
252 | ul { | 252 | ul { |
253 | margin-left: 1.5em; | 253 | margin-left: 1.2em; |
254 | margin-bottom: 1em; | ||
254 | 255 | ||
255 | li { | 256 | li { |
256 | margin-bottom: 0.5em; | 257 | margin-bottom: 0.5em; |
257 | 258 | ||
258 | ul li:before { | 259 | ul { |
259 | content: '-'; | 260 | margin-left: 2em; |
261 | margin-bottom: 0; | ||
262 | |||
263 | li:before { | ||
264 | content: '-'; | ||
265 | font-weight: 600; | ||
266 | } | ||
260 | } | 267 | } |
261 | } | 268 | } |
262 | 269 | ||
263 | > li:before { | 270 | > li:before { |
264 | content: '·'; | 271 | content: '·'; |
265 | width: 0.5em; | 272 | //width: 0.5em; |
266 | margin-left: -1.3em; | 273 | margin-left: -1em; |
267 | position: absolute; | 274 | position: absolute; |
275 | font-weight: 600; | ||
268 | } | 276 | } |
269 | 277 | ||
270 | ul { | 278 | ul { |
@@ -276,11 +284,27 @@ pre { | |||
276 | font-family: 'Inconsolata', 'Courier New', monospace; | 284 | font-family: 'Inconsolata', 'Courier New', monospace; |
277 | font-size: 20px; | 285 | font-size: 20px; |
278 | line-height: 28px; | 286 | line-height: 28px; |
279 | padding: 10px 20px; | 287 | padding: 10px 0 10px $slide-left-right-padding; |
280 | letter-spacing: -1px; | 288 | letter-spacing: -1px; |
281 | margin-bottom: 20px; | 289 | margin-bottom: 20px; |
282 | @include text-shadow(none); | 290 | width: 106%; |
291 | background-color: $gray-1; | ||
292 | left: -$slide-left-right-padding; | ||
293 | position: relative; | ||
294 | @include box-sizing(border-box); | ||
283 | /*overflow: hidden;*/ | 295 | /*overflow: hidden;*/ |
296 | |||
297 | &:after { | ||
298 | content: attr(data-lang); | ||
299 | background-color: $gray-2; | ||
300 | right: 0; | ||
301 | top: 0; | ||
302 | position: absolute; | ||
303 | font-size: 16pt; | ||
304 | color: white; | ||
305 | padding: 2px 25px; | ||
306 | text-transform: uppercase; | ||
307 | } | ||
284 | } | 308 | } |
285 | 309 | ||
286 | code { | 310 | code { |
@@ -486,29 +510,32 @@ article.smaller { | |||
486 | 510 | ||
487 | .prettyprint .str, /* string content */ | 511 | .prettyprint .str, /* string content */ |
488 | .prettyprint .atv { /* a markup attribute value */ | 512 | .prettyprint .atv { /* a markup attribute value */ |
489 | color: rgb(0, 138, 53); | 513 | color: $brand-green-secondary2; //rgb(0, 138, 53); |
490 | } | 514 | } |
491 | .prettyprint .kwd, /* a keyword */ | 515 | .prettyprint .kwd, /* a keyword */ |
492 | .prettyprint .tag { /* a markup tag name */ | 516 | .prettyprint .tag { /* a markup tag name */ |
493 | color: rgb(0, 102, 204); | 517 | color: rgb(0, 102, 204); |
494 | } | 518 | } |
495 | .prettyprint .com { /* a comment */ | 519 | .prettyprint .com { /* a comment */ |
496 | color: rgb(127, 127, 127); | 520 | color: $gray-3; //rgb(127, 127, 127); |
497 | font-style: italic; | 521 | font-style: italic; |
498 | } | 522 | } |
499 | .prettyprint .lit { /* a literal value */ | 523 | .prettyprint .lit { /* a literal value */ |
500 | color: rgb(127, 0, 0); | 524 | color: $brand-yellow-secondary2; //rgb(127, 0, 0); |
501 | } | 525 | } |
502 | .prettyprint .pun, /* punctuation, lisp open bracket, lisp close bracket */ | 526 | .prettyprint .pun, /* punctuation, lisp open bracket, lisp close bracket */ |
503 | .prettyprint .opn, | 527 | .prettyprint .opn, |
504 | .prettyprint .clo { | 528 | .prettyprint .clo { |
505 | color: rgb(127, 127, 127); | 529 | color: $gray-4; //rgb(127, 127, 127); |
506 | } | 530 | } |
507 | .prettyprint .typ, /* a type name */ | 531 | .prettyprint .typ, /* a type name */ |
508 | .prettyprint .atn, /* a markup attribute name */ | 532 | .prettyprint .atn, /* a markup attribute name */ |
509 | .prettyprint .dec, | 533 | .prettyprint .dec, |
510 | .prettyprint .var { /* a declaration; a variable name */ | 534 | .prettyprint .var { /* a declaration; a variable name */ |
511 | color: rgb(127, 0, 127); | 535 | color: $brand-red-secondary2; //rgb(127, 0, 127); |
536 | } | ||
537 | .prettyprint .pln { | ||
538 | color: $gray-4; | ||
512 | } | 539 | } |
513 | 540 | ||
514 | .with-notes .note { | 541 | .with-notes .note { |
@@ -524,7 +551,8 @@ article.smaller { | |||
524 | top: 0; | 551 | top: 0; |
525 | left: 0; | 552 | left: 0; |
526 | background: rgba(0, 0, 0, 0.3); | 553 | background: rgba(0, 0, 0, 0.3); |
527 | @include flexcenter; | 554 | @include flexbox; |
555 | @include flex-center-center; | ||
528 | 556 | ||
529 | pointer-events: none; | 557 | pointer-events: none; |
530 | @include transition(all 0.2s ease-in-out); | 558 | @include transition(all 0.2s ease-in-out); |
@@ -557,14 +585,27 @@ input, button { | |||
557 | box-reflect: below 3px linear-gradient(rgba(255,255,255,0) 85%, white 150%); | 585 | box-reflect: below 3px linear-gradient(rgba(255,255,255,0) 85%, white 150%); |
558 | } | 586 | } |
559 | 587 | ||
560 | .flexcenter { | 588 | .flexbox { |
561 | @include flexcenter; | 589 | @include flexbox; |
590 | } | ||