aboutsummaryrefslogtreecommitdiff
path: root/theme/scss
diff options
context:
space:
mode:
authorEric Bidelman2013-04-29 14:53:53 -0700
committerEric Bidelman2013-04-29 14:53:53 -0700
commit07fa54cb316721ea1522f801063dd2109530a8bf (patch)
treeae56a9e73651d42a7c6aa9b6b5d90085540fd871 /theme/scss
parentfa1c41da5a639fd54c064a5a34fdef9cbb794cd8 (diff)
downloadio-slides-remote-07fa54cb316721ea1522f801063dd2109530a8bf.tar.gz
io2013 style updates
Diffstat (limited to 'theme/scss')
-rw-r--r--theme/scss/_base.scss2
-rw-r--r--theme/scss/_variables.scss34
-rw-r--r--theme/scss/default.scss36
-rw-r--r--theme/scss/io2013.scss51
4 files changed, 87 insertions, 36 deletions
diff --git a/theme/scss/_base.scss b/theme/scss/_base.scss
index a5b99cb..50504db 100644
--- a/theme/scss/_base.scss
+++ b/theme/scss/_base.scss
@@ -11,6 +11,8 @@
11@import "compass/css3/transform"; 11@import "compass/css3/transform";
12@import "compass/css3/transition"; 12@import "compass/css3/transition";
13 13
14@import "variables";
15
14@mixin font-smoothing($val: antialiased) { 16@mixin font-smoothing($val: antialiased) {
15 -webkit-font-smoothing: $val; 17 -webkit-font-smoothing: $val;
16 -moz-font-smoothing: $val; 18 -moz-font-smoothing: $val;
diff --git a/theme/scss/_variables.scss b/theme/scss/_variables.scss
new file mode 100644
index 0000000..d07f907
--- /dev/null
+++ b/theme/scss/_variables.scss
@@ -0,0 +1,34 @@
1$social-tags: '';
2$brand-small-icon-size: 30px;
3
4$gray-1: #e6e6e6;
5$gray-2: #a9a9a9;
6$gray-3: #797979;
7$gray-4: #515151;
8
9$brand-blue: rgb(67, 135, 253);
10$brand-blue-secondary: #3c8ef3;
11$brand-blue-secondary2: #2a7cdf;
12
13$brand-red: rgb(244, 74, 63);
14$brand-red-secondary: #e0543e;
15$brand-red-secondary2: #d94d3a;
16
17$brand-yellow: rgb(255, 209, 77);
18$brand-yellow-secondary: #f9cc46;
19$brand-yellow-secondary2: #f6c000;
20
21$brand-green: rgb(13, 168, 97);
22$brand-green-secondary: #00a86d;
23$brand-green-secondary2: #009f5d;
24
25$slide-width: 900px;
26$slide-height: 700px;
27$slide-width-widescreen: 1100px;
28$slide-top-bottom-padding: 40px;
29$slide-left-right-padding: 60px;
30$slide-border-radius: 5px;
31
32$slide-tap-area-width: 100px;
33
34$article-content-top-padding: 45px;
diff --git a/theme/scss/default.scss b/theme/scss/default.scss
index f1e9816..b8d11b0 100644
--- a/theme/scss/default.scss
+++ b/theme/scss/default.scss
@@ -2,41 +2,6 @@
2@import "compass/css3/columns"; 2@import "compass/css3/columns";
3@import "compass/css3/user-interface"; 3@import "compass/css3/user-interface";
4 4
5$social-tags: '#yourhashtag';
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) { 5@mixin highlight-color($color: $brand-yellow) {
41 -webkit-tap-highlight-color: $color; 6 -webkit-tap-highlight-color: $color;
42 -moz-tap-highlight-color: $color; 7 -moz-tap-highlight-color: $color;
@@ -51,7 +16,6 @@ $article-content-top-padding: 45px;
51} 16}
52 17
53 18
54
55/** 19/**
56 * Theme Styles 20 * Theme Styles
57 */ 21 */
diff --git a/theme/scss/io2013.scss b/theme/scss/io2013.scss
new file mode 100644
index 0000000..c728cfb
--- /dev/null
+++ b/theme/scss/io2013.scss
@@ -0,0 +1,51 @@
1@import "compass/css3/background-size";
2
3@import "variables";
4
5* {
6 line-height: 1.3;
7}
8
9h2 {
10 font-weight: bold;
11}
12h2, h3 {
13 color: $gray-4;
14}
15
16q, blockquote {
17 font-weight: bold;
18}
19
20slides > slide {
21 color: $gray-4;
22
23 &.title-slide {
24 &:after {
25 content: '';
26 background: url(../../images/io2013/google-io-lockup-1.png) no-repeat 100% 50%;
27 @include background-size(contain);
28 position: absolute;
29 bottom: $slide-top-bottom-padding + 40;
30 right: $slide-top-bottom-padding;
31 width: 100%;
32 height: 90px;
33 }
34
35 hgroup {
36 h1 {
37 font-weight: bold;
38 line-height: 1.1;
39 }
40 h2, p {
41 color: $gray-4;
42 }
43 h2 {
44 margin-top: 0.25em;
45 }
46 p {
47 margin-top: 3em;
48 }
49 }
50 }
51} \ No newline at end of file