aboutsummaryrefslogtreecommitdiff
path: root/theme/sass
diff options
context:
space:
mode:
Diffstat (limited to 'theme/sass')
-rw-r--r--theme/sass/_base.scss10
-rw-r--r--theme/sass/default.scss126
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
78slides > slide:not(.nobackground):not(.logoslide):not(.fill) { 78slides > 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
96slides > slide:not(:first-of-type):not(.fill):not(.nobackground) { 96slides > 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
243h3 { 244h3 {
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
252ul { 252ul {
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
286code { 310code {
@@ -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}
591
592.flexbox.vcenter {