aboutsummaryrefslogtreecommitdiff
path: root/theme/scss
diff options
context:
space:
mode:
Diffstat (limited to 'theme/scss')
-rw-r--r--theme/scss/_base.scss128
-rw-r--r--theme/scss/default.scss937
-rw-r--r--theme/scss/phone.scss35
3 files changed, 1100 insertions, 0 deletions
diff --git a/theme/scss/_base.scss b/theme/scss/_base.scss
new file mode 100644
index 0000000..a3b00a8
--- /dev/null
+++ b/theme/scss/_base.scss
@@ -0,0 +1,128 @@
1@import "compass/reset";
2@import "compass/css3/border-radius";
3@import "compass/css3/box";
4@import "compass/css3/box-shadow";
5@import "compass/css3/box-sizing";
6@import "compass/css3/images";
7@import "compass/css3/text-shadow";
8@import "compass/css3/background-size";
9@import "compass/css3/transform";
10@import "compass/css3/transition";
11
12@mixin font-smoothing($val: antialiased) {
13 -webkit-font-smoothing: $val;
14 -moz-font-smoothing: $val;
15 -ms-font-smoothing: $val;
16 -o-font-smoothing: $val;
17}
18
19@mixin flexbox {
20 display: -webkit-box !important;
21 display: -moz-box !important;
22 display: -ms-box !important;
23 display: -o-box !important;
24 display: box !important;
25}
26
27@mixin flex-center-center {
28 @include box-orient(vertical);
29 @include box-align(center);
30 @include box-pack(center);
31}
32
33@mixin flex-left-center {
34 @include box-orient(vertical);
35 @include box-align(left);
36 @include box-pack(center);
37}
38
39/**
40 * Base SlideDeck Styles
41 */
42html {
43 height: 100%;
44 overflow: hidden;
45}
46
47body {
48 margin: 0;
49 padding: 0;
50
51 opacity: 0;
52
53 height: 100%;
54 min-height: 740px;
55 width: 100%;
56
57 overflow: hidden;
58
59 color: #fff;
60 @include font-smoothing(antialiased);
61 @include transition(opacity 800ms ease-in 100ms); // Add small delay to prevent jank.
62
63 &.loaded {
64 opacity: 1;
65 }
66}
67
68input, button {
69 vertical-align: middle;
70}
71
72slides > slide[hidden] {
73 display: none !important;
74}
75
76slides {
77 width: 100%;
78 height: 100%;
79 position: absolute;
80 left: 0;
81 top: 0;
82 @include transform(translate3d(0, 0, 0));
83 @include perspective(1000);
84 @include transform-style(preserve-3d);
85}
86
87slides > slide {
88 display: block;
89 position: absolute;
90 overflow: hidden;
91 left: 50%;
92 top: 50%;
93 @include box-sizing(border-box);
94}
95
96/* Slide styles */
97
98
99/*article.fill iframe {
100 position: absolute;
101 left: 0;
102 top: 0;
103 width: 100%;
104 height: 100%;
105
106 border: 0;
107 margin: 0;
108
109 @include border-radius(10px);
110
111 z-index: -1;
112}
113
114slide.fill {
115 background-repeat: no-repeat;
116 @include background-size(cover);
117}
118
119slide.fill img {
120 position: absolute;
121 left: 0;
122 top: 0;
123 min-width: 100%;
124 min-height: 100%;
125
126 z-index: -1;
127}
128*/ \ No newline at end of file
diff --git a/theme/scss/default.scss b/theme/scss/default.scss
new file mode 100644
index 0000000..0cc6e47
--- /dev/null
+++ b/theme/scss/default.scss
@@ -0,0 +1,937 @@
1@import "base";
2@import "compass/css3/columns";
3@import "compass/css3/user-interface";
4
5$social-tags: '#io2012';
6$brand-small-icon-size: 30px;
7
8$gray-1: #e6e6e6;
9$gray-2: #a9a9a9;
10$gray-3: #797979;
11$gray-4: #515151;
12
13$brand-blue: rgb(67, 135, 253);
14$brand-blue-secondary: #3c8ef3;
15$brand-blue-secondary2: #2a7cdf;
16
17$brand-red: rgb(244, 74, 63);
18$brand-red-secondary: #e0543e;
19$brand-red-secondary2: #d94d3a;
20
21$brand-yellow: rgb(255, 209, 77);
22$brand-yellow-secondary: #f9cc46;
23$brand-yellow-secondary2: #f6c000;
24
25$brand-green: rgb(13, 168, 97);
26$brand-green-secondary: #00a86d;
27$brand-green-secondary2: #009f5d;
28
29$slide-width: 900px;
30$slide-height: 700px;
31$slide-width-widescreen: 1100px;
32$slide-top-bottom-padding: 40px;
33$slide-left-right-padding: 60px;
34$slide-border-radius: 5px;
35
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}
47
48/**
49 * Theme Styles
50 */
51::selection {
52 color: white;
53 background-color: $brand-yellow;
54 @include text-shadow(none);
55}
56
57::-webkit-scrollbar {
58 height: 16px;
59 overflow: visible;
60 width: 16px;
61}
62::-webkit-scrollbar-thumb {
63 background-color: rgba(0, 0, 0, .1);
64 background-clip: padding-box;
65 border: solid transparent;
66 min-height: 28px;
67 padding: 100px 0 0;
68 @include box-shadow(inset 1px 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.07));
69 border-width: 1px 1px 1px 6px;
70}
71::-webkit-scrollbar-thumb:hover {
72 background-color: rgba(0, 0, 0, 0.5);
73}
74::-webkit-scrollbar-button {
75 height: 0;
76 width: 0;
77}
78::-webkit-scrollbar-track {
79 background-clip: padding-box;
80 border: solid transparent;
81 border-width: 0 0 0 4px;
82}
83::-webkit-scrollbar-corner {
84 background: transparent;
85}
86
87body {
88 background: black;
89}
90
91slides > slide {
92 display: none;
93 font-family: 'Open Sans', Arial, sans-serif;
94 font-size: 26px;
95 color: $gray-3;
96 //@include background(linear-gradient(white, white 85%, $gray-1));
97 //background-color: white;
98 width: $slide-width;
99 height: $slide-height;
100 margin-left: -$slide-width / 2;
101 margin-top: -$slide-height / 2;
102 padding: $slide-top-bottom-padding $slide-left-right-padding;
103
104 @include border-radius($slide-border-radius);
105 //@include box-shadow(5px 5px 20px $gray-4);
106 @include transition(all 0.6s ease-in-out);
107
108 //$translateX: 1020px;
109 //$rotateY: 30deg;
110 //$rotateX: 45deg;
111
112 &.far-past {
113 //display: block;
114 display: none;
115 //@include transform(translate(-$translateX * 2));
116 //@include transform(translate3d(-$translateX * 2, 0, 0));
117 }
118
119 &.past {
120 display: block;
121 //@include transform(translate(-$translateX) rotateY($rotateY) rotateX($rotateX));
122 //@include transform(trans