diff options
author | Eric Bidelman | 2012-04-06 16:26:23 -0700 |
---|---|---|
committer | Eric Bidelman | 2012-04-06 16:26:23 -0700 |
commit | 321272492eaf2afe377a806ad666acdcb98ec658 (patch) | |
tree | c1b370981c9c4d7bceb58557c26bbacc0dbdd88e /theme/sass/default.scss | |
parent | de7412e5f6f208cb07519038d4537cf5fe467031 (diff) | |
download | io-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.scss | 1127 |
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 | |||
12 | body { | ||
13 | @include background-image(radial-gradient(50% 50%, #b1dfff 0%, #0c54ab 600px)); | ||
14 | background-attachment: fixed; | ||
15 | } | ||
16 | |||
17 | slides > 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 | |||
32 | slides.layout-widescreen > slide { | ||
33 | margin-left: -550px; | ||
34 | width: 1100px; | ||
35 | } | ||
36 | |||
37 | slides.layout-faux-widescreen > slide { | ||
38 | margin-left: -550px; | ||
39 | width: 1100px; | ||
40 | padding: 40px 160px; | ||
41 | } | ||
42 | |||
43 | slides > slide:not(.nobackground):not(.biglogo):not(.fill) { | ||
44 | background: white url(/images/gdd2011_banner.png) 105% 99% no-repeat; | ||
45 | } | ||
46 | |||
47 | slides.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 | |||
54 | slides.nobackground slide:not(.fill)::after, | ||
55 | slides.nobackground slide:not(.fill)::before { | ||
56 | color: inherit !important; | ||
57 | } | ||
58 | |||
59 | slides > 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 | |||
68 | slides > 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 | |||
77 | slides.layout-widescreen > slide:not(.nobackground):not(.biglogo), | ||
78 | slides.layout-faux-widescreen > slide:not(.nobackground):not(.biglogo) { | ||
79 | background-position-x: 0, 840px; | ||
80 | } | ||
81 | |||
82 | /* Slide Styles */ | ||
83 | |||
84 | slide.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 | |||
91 | slides > slide { | ||
92 | display: none; | ||
93 | } | ||
94 | |||
95 | slides > 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 | |||
103 | slides > 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 | |||
111 | slides > 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 | |||
119 | slides > 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 | |||
127 | slides > 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 | |||
135 | slides.layout-widescreen > slide.far-past, | ||
136 | slides.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 | |||
144 | slides.layout-widescreen > slide.past, | ||
145 | slides.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 | |||
153 | slides.layout-widescreen > slide.current, | ||
154 | slides.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 | |||
162 | slides.layout-widescreen > slide.next, | ||
163 | slides.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 | |||
171 | slides.layout-widescreen > slide.far-next, | ||
172 | slides.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 | |||
193 | b { | ||
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 | } | ||
223 | a { | ||
224 | color: rgb(0, 102, 204); | ||
225 | } | ||
226 | a:visited { | ||
227 | color: rgba(0, 102, 204, .75); | ||
228 | } | ||
229 | a:hover { | ||
230 | color: black; | ||
231 | } | ||
232 | |||
233 | p { | ||
234 | margin: 0; | ||
235 | padding: 0; | ||
236 | } | ||
237 | |||
238 | h1 { | ||
239 | font-size: 50px; | ||
240 | line-height: 1.5; | ||
241 | padding: 0; |