aboutsummaryrefslogtreecommitdiff
path: root/theme/sass/default.scss
diff options
context:
space:
mode:
Diffstat (limited to 'theme/sass/default.scss')
-rw-r--r--theme/sass/default.scss1214
1 files changed, 360 insertions, 854 deletions
diff --git a/theme/sass/default.scss b/theme/sass/default.scss
index d1c6591..e218598 100644
--- a/theme/sass/default.scss
+++ b/theme/sass/default.scss
@@ -1,50 +1,85 @@
1@import "base"; 1@import "base";
2@import "compass/css3/user-interface";
3
4$social-tags: '#io2012 @yourtwitter';
5$brand-small-icon-size: 30px;
6
7$gray-1: #e6e6e6;
8$gray-2: #a9a9a9;
9$gray-3: #797979;
10$gray-4: #515151;
11
12$brand-blue: rgb(67, 135, 253);
13$brand-blue-secondary: #3c8ef3;
14$brand-blue-secondary2: #2a7cdf;
15
16$brand-red: rgb(244, 74, 63);
17$brand-red-secondary: #e0543e;
18$brand-red-secondary2: #d94d3a;
19
20$brand-yellow: rgb(255, 209, 77);
21$brand-yellow-secondary: #f9cc46;
22$brand-yellow-secondary2: #f6c000;
23
24$brand-green: rgb(13, 168, 97);
25$brand-green-secondary: #00a86d;
26$brand-green-secondary2: #009f5d;
27
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;
2 34
3/** 35/**
4 * Theme Styles 36 * Theme Styles
5 */ 37 */
6::selection { 38::selection {
7 color: white; 39 color: white;
8 background-color: red; 40 background-color: $brand-yellow;
9 @include text-shadow(none); 41 @include text-shadow(none);
10} 42}
11 43
12body { 44body {
13 @include background-image(radial-gradient(50% 50%, #b1dfff 0%, #0c54ab 600px)); 45 @include background-image(radial-gradient(50% 50%, $brand-blue 0%,
46 $brand-blue-secondary2 600px));
47 //@include background-image(linear-gradient(top, $brand-blue 60%, $brand-blue-secondary2));
14 background-attachment: fixed; 48 background-attachment: fixed;
15} 49}
16 50
17slides > slide { 51slides > slide {
18 width: 900px; 52 width: $slide-width;
19 height: 700px; 53 height: $slide-height;
20 margin-left: -450px; 54 margin-left: -$slide-width / 2;
21 margin-top: -350px; 55 margin-top: -$slide-height / 2;
22 56
23 padding: 40px 60px; 57 padding: $slide-top-bottom-padding $slide-left-right-padding;
24 58
25 background-color: white; 59 background-color: white;
26 60
27 @include border-radius(10px); 61 @include border-radius(5px);
28 @include box-shadow(5px 5px 20px black); 62 @include box-shadow(3px 3px 20px $gray-4);
29 @include transition(all .3s ease-out); 63 @include transition(all 0.3s ease-out);
30} 64}
31 65
32slides.layout-widescreen > slide { 66slides.layout-widescreen > slide {
33 margin-left: -550px; 67 margin-left: -$slide-width-widescreen / 2;
34 width: 1100px; 68 width: $slide-width-widescreen;
35} 69}
36 70
37slides.layout-faux-widescreen > slide { 71slides.layout-faux-widescreen > slide {
38 margin-left: -550px; 72 margin-left: -$slide-width-widescreen / 2;
39 width: 1100px; 73 width: $slide-width-widescreen;
40 padding: 40px 160px; 74 padding: $slide-top-bottom-padding 160px;
41} 75}
42 76
43slides > slide:not(.nobackground):not(.biglogo):not(.fill) { 77slides > slide:not(.nobackground):not(.logoslide):not(.fill) {
44 background: white url(/images/gdd2011_banner.png) 105% 99% no-repeat; 78 //background: white url(/images/google_developers_icon_128.png) ($brand-small-icon-size * 2) 98% no-repeat;
79 //@include background-size($brand-small-icon-size $brand-small-icon-size);
45} 80}
46 81
47slides.nobackground slide:not(.fill) { 82/*slides.nobackground slide:not(.fill) {
48 background: url(/images/devfest_logo_small.png) 98% 99% no-repeat, 83 background: url(/images/devfest_logo_small.png) 98% 99% no-repeat,
49 url(/images/bubbles.png) 5% -125px no-repeat, 84 url(/images/bubbles.png) 5% -125px no-repeat,
50 url(/images/colorbar.png) 0 91% repeat-x, 85 url(/images/colorbar.png) 0 91% repeat-x,
@@ -55,291 +90,175 @@ slides.nobackground slide:not(.fill)::after,
55slides.nobackground slide:not(.fill)::before { 90slides.nobackground slide:not(.fill)::before {
56 color: inherit !important; 91 color: inherit !important;
57} 92}
93*/
58 94
59slides > slide:not(:first-of-type):not(.biglogo):not(.fill):not(.nobackground)::after { 95slides > slide:not(:first-of-type):not(.fill):not(.nobackground) {
60 content: attr(data-slide-num) ' / ' attr(data-total-slides);
61 position: absolute;
62 bottom: 2%;
63 left: 2%;
64 font-size: 12pt;
65 color: white;
66}
67 96
68slides > slide:not(:first-of-type):not(.biglogo):not(.fill):not(.nobackground)::before { 97 &:before {
69 position: absolute; 98 content: $social-tags;
70 bottom: 14px; 99 position: absolute;
71 left: 275px; 100 bottom: $slide-top-bottom-padding / 2;
72 font-size: 18pt; 101 left: $slide-left-right-padding;
73 color: white; 102 background: url(/images/google_developers_icon_128.png) no-repeat 0 50%;
74 content: '@ebidel #gddjp'; 103 @include background-size($brand-small-icon-size $brand-small-icon-size);
104 padding-left: $brand-small-icon-size + 10;
105 height: $brand-small-icon-size;
106 line-height: 1.9;
107 }
108 &:after {
109 content: attr(data-slide-num) '/' attr(data-total-slides);
110 position: absolute;
111 bottom: $slide-top-bottom-padding / 2;
112 right: $slide-left-right-padding;
113 }
75} 114}
76 115
77slides.layout-widescreen > slide:not(.nobackground):not(.biglogo), 116/*slides.layout-widescreen > slide:not(.nobackground),
78slides.layout-faux-widescreen > slide:not(.nobackground):not(.biglogo) { 117slides.layout-faux-widescreen > slide:not(.nobackground) {
79 background-position-x: 0, 840px; 118 background-position-x: 0, 840px;
80} 119}*/
81
82/* Slide Styles */
83
84slide.biglogo {
85 background: url(/images/google_logo.png) 50% 50% no-repeat,
86 url(/images/gdd2011_banner.png) 105% 99% no-repeat, white;
87}
88 120
89/* Slides */ 121/* Slides */
90 122
91slides > slide { 123slides > slide {
92 display: none; 124 display: none;
93} 125 font-family: 'Open Sans', Arial, sans-serif;
126 color: $gray-3;
94 127
95slides > slide.far-past { 128 $translateX: 1020px;
96 display: block; 129 $rotateY: 30deg;
97 -o-transform: translate(-2040px); 130 $rotateX: 45deg;
98 -moz-transform: translate(-2040px);
99 -webkit-transform: translate3d(-2040px, 0, 0);
100 transform: translate(-2040px);
101}
102 131
103slides > slide.past { 132 &.far-past {
104 display: block; 133 display: block;
105 -o-transform: translate(-1020px) rotateY(30deg) rotateX(45deg); 134 @include transform(translate(-$translateX * 2));
106 -moz-transform: translate(-1020px) rotateY(30deg) rotateX(45deg); 135 @include transform(translate3d(-$translateX * 2, 0, 0));
107 -webkit-transform: translate3d(-1020px, 0, 0) rotateY(30deg) rotateX(45deg); 136 }
108 transform: translate(-1020px) rotateY(30deg) rotateX(45deg);
109}
110 137
111slides > slide.current { 138 &.past {
112 display: block; 139 display: block;
113 -o-transform: translate(0); 140 @include transform(translate(-$translateX) rotateY($rotateY) rotateX($rotateX));
114 -moz-transform: translate(0); 141 @include transform(translate3d(-$translateX, 0, 0) rotateY($rotateY) rotateX($rotateX));
115 -webkit-transform: translate3d(0, 0, 0); 142 }
116 transform: translate(0);
117}
118 143
119slides > slide.next { 144 &.current {
120 display: block; 145 display: block;
121 -o-transform: translate(1020px) rotateY(-30deg) rotateX(45deg); 146 @include transform(translate(0));
122 -moz-transform: translate(1020px) rotateY(-30deg) rotateX(45deg); 147 @include transform(translate3d(0, 0, 0));
123 -webkit-transform: translate3d(1020px, 0, 0) rotateY(-30deg) rotateX(45deg); 148 }
124 transform: translate(1020px) rotateY(-30deg) rotateX(45deg);
125}
126 149
127slides > slide.far-next { 150 &.next {
128 display: block; 151 display: block;
129 transform: translate(2040px); 152 @include transform(translate($translateX) rotateY(-$rotateY) rotateX($rotateX));
130 -o-transform: translate(2040px); 153 @include transform(translate3d($translateX, 0, 0) rotateY(-$rotateY) rotateX($rotateX));
131 -moz-transform: translate(2040px); 154 }
132 -webkit-transform: translate3d(2040px, 0, 0);
133}
134 155
135slides.layout-widescreen > slide.far-past, 156 &.far-next {
136slides.layout-faux-widescreen > slide.far-past { 157