aboutsummaryrefslogtreecommitdiff
path: root/theme/sass/default.scss
diff options
context:
space:
mode:
authorEric Bidelman2012-04-06 16:26:23 -0700
committerEric Bidelman2012-04-06 16:26:23 -0700
commit321272492eaf2afe377a806ad666acdcb98ec658 (patch)
treec1b370981c9c4d7bceb58557c26bbacc0dbdd88e /theme/sass/default.scss
parentde7412e5f6f208cb07519038d4537cf5fe467031 (diff)
downloadio-slides-remote-321272492eaf2afe377a806ad666acdcb98ec658.tar.gz
Adding compass/sass. Fixing slide # logic. Fixing slide # at bottom off slide. Fixigin prettify logic when it is false
Diffstat (limited to 'theme/sass/default.scss')
-rw-r--r--theme/sass/default.scss1127
1 files changed, 1127 insertions, 0 deletions
diff --git a/theme/sass/default.scss b/theme/sass/default.scss
new file mode 100644
index 0000000..d1c6591
--- /dev/null
+++ b/theme/sass/default.scss
@@ -0,0 +1,1127 @@
1@import "base";
2
3/**
4 * Theme Styles
5 */
6::selection {
7 color: white;
8 background-color: red;
9 @include text-shadow(none);
10}
11
12body {
13 @include background-image(radial-gradient(50% 50%, #b1dfff 0%, #0c54ab 600px));
14 background-attachment: fixed;
15}
16
17slides > slide {
18 width: 900px;
19 height: 700px;
20 margin-left: -450px;
21 margin-top: -350px;
22
23 padding: 40px 60px;
24
25 background-color: white;
26
27 @include border-radius(10px);
28 @include box-shadow(5px 5px 20px black);
29 @include transition(all .3s ease-out);
30}
31
32slides.layout-widescreen > slide {
33 margin-left: -550px;
34 width: 1100px;
35}
36
37slides.layout-faux-widescreen > slide {
38 margin-left: -550px;
39 width: 1100px;
40 padding: 40px 160px;
41}
42
43slides > slide:not(.nobackground):not(.biglogo):not(.fill) {
44 background: white url(/images/gdd2011_banner.png) 105% 99% no-repeat;
45}
46
47slides.nobackground slide:not(.fill) {
48 background: url(/images/devfest_logo_small.png) 98% 99% no-repeat,
49 url(/images/bubbles.png) 5% -125px no-repeat,
50 url(/images/colorbar.png) 0 91% repeat-x,
51 white !important;
52}
53
54slides.nobackground slide:not(.fill)::after,
55slides.nobackground slide:not(.fill)::before {
56 color: inherit !important;
57}
58
59slides > slide:not(:first-of-type):not(.biglogo):not(.fill):not(.nobackground)::after {
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
68slides > slide:not(:first-of-type):not(.biglogo):not(.fill):not(.nobackground)::before {
69 position: absolute;
70 bottom: 14px;
71 left: 275px;
72 font-size: 18pt;
73 color: white;
74 content: '@ebidel #gddjp';
75}
76
77slides.layout-widescreen > slide:not(.nobackground):not(.biglogo),
78slides.layout-faux-widescreen > slide:not(.nobackground):not(.biglogo) {
79 background-position-x: 0, 840px;
80}
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
89/* Slides */
90
91slides > slide {
92 display: none;
93}
94
95slides > slide.far-past {
96 display: block;
97 -o-transform: translate(-2040px);
98 -moz-transform: translate(-2040px);
99 -webkit-transform: translate3d(-2040px, 0, 0);
100 transform: translate(-2040px);
101}
102
103slides > slide.past {
104 display: block;
105 -o-transform: translate(-1020px) rotateY(30deg) rotateX(45deg);
106 -moz-transform: translate(-1020px) rotateY(30deg) rotateX(45deg);
107 -webkit-transform: translate3d(-1020px, 0, 0) rotateY(30deg) rotateX(45deg);
108 transform: translate(-1020px) rotateY(30deg) rotateX(45deg);
109}
110
111slides > slide.current {
112 display: block;
113 -o-transform: translate(0);
114 -moz-transform: translate(0);
115 -webkit-transform: translate3d(0, 0, 0);
116 transform: translate(0);
117}
118
119slides > slide.next {
120 display: block;
121 -o-transform: translate(1020px) rotateY(-30deg) rotateX(45deg);
122 -moz-transform: translate(1020px) rotateY(-30deg) rotateX(45deg);
123 -webkit-transform: translate3d(1020px, 0, 0) rotateY(-30deg) rotateX(45deg);
124 transform: translate(1020px) rotateY(-30deg) rotateX(45deg);
125}
126
127slides > slide.far-next {
128 display: block;
129 transform: translate(2040px);
130 -o-transform: translate(2040px);
131 -moz-transform: translate(2040px);
132 -webkit-transform: translate3d(2040px, 0, 0);
133}
134
135slides.layout-widescreen > slide.far-past,
136slides.layout-faux-widescreen > slide.far-past {
137 display: block;
138 transform: translate(-2260px);
139 -o-transform: translate(-2260px);
140 -moz-transform: translate(-2260px);
141 -webkit-transform: translate3d(-2260px, 0, 0);
142}
143
144slides.layout-widescreen > slide.past,
145slides.layout-faux-widescreen > slide.past {
146 display: block;
147 transform: translate(-1130px);
148 -o-transform: translate(-1130px);
149 -moz-transform: translate(-1130px);
150 -webkit-transform: translate3d(-1130px, 0, 0);
151}
152
153slides.layout-widescreen > slide.current,
154slides.layout-faux-widescreen > slide.current {
155 display: block;
156 transform: translate(0);
157 -o-transform: translate(0);
158 -moz-transform: translate(0);
159 -webkit-transform: translate3d(0, 0, 0);
160}
161
162slides.layout-widescreen > slide.next,
163slides.layout-faux-widescreen > slide.next {
164 display: block;
165 transform: translate(1130px);
166 -o-transform: translate(1130px);
167 -moz-transform: translate(1130px);
168 -webkit-transform: translate3d(1130px, 0, 0);
169}
170
171slides.layout-widescreen > slide.far-next,
172slides.layout-faux-widescreen > slide.far-next {
173 display: block;
174 transform: translate(2260px);
175 -o-transform: translate(2260px);
176 -moz-transform: translate(2260px);
177 -webkit-transform: translate3d(2260px, 0, 0);
178}
179
180.slides > article {
181 font-family: 'Open Sans', Arial, sans-serif;
182
183 color: #545454;
184 font-weight: 300;
185 text-shadow: 0 1px 1px rgba(0, 0, 0, .1);
186
187 font-size: 30px;
188 line-height: 36px;
189
190 letter-spacing: -1px;
191}
192
193b {
194 font-weight: 600;
195}
196
197.blue {
198 color: rgb(0, 102, 204);
199}
200.yellow {
201 color: rgb(255, 211, 25);
202}
203.green {
204 color: rgb(0, 138, 53);
205}
206.red {
207 color: rgb(255, 0, 0);
208}
209.black {
210 color: black;
211}
212.white {
213 color: white;
214}
215.dark {
216 background-color: rgba(0, 0, 0, 0.2);
217 color: white;
218}
219.bubble {
220 background-color: rgba(0, 0, 0, 0.8);
221 color: white;
222}
223a {
224 color: rgb(0, 102, 204);
225}
226a:visited {
227 color: rgba(0, 102, 204, .75);
228}
229a:hover {
230 color: black;
231}
232
233p {
234 margin: 0;
235 padding: 0;
236}
237
238h1 {
239 font-size: 50px;
240 line-height: 1.5;
241 padding: 0;