|
0
|
1 /*********************************
|
|
|
2 * CSS @media projection rules (not print or screen)
|
|
|
3 *
|
|
|
4 * 1) projection -> slideshow mode (display one slide at-a-time; hide all others)
|
|
|
5 * 2) screen -> outline mode (display all slides-at-once on screen)
|
|
|
6 * 3) print -> print (and print preview)
|
|
|
7 *
|
|
|
8 * toggle between projection/screen (that is, slideshow/outline) mode using t-key
|
|
|
9 */
|
|
|
10
|
|
|
11 //////////////////////////////////////
|
|
|
12 // note: this is a less extendend css script, to learn more about less; see lesscss.org)
|
|
|
13
|
|
|
14
|
|
|
15 html {
|
|
|
16 height: 100%;
|
|
|
17 }
|
|
|
18
|
|
|
19 body {
|
|
|
20 margin: 0;
|
|
|
21 padding: 0;
|
|
|
22
|
|
|
23 height: 100%;
|
|
|
24 min-height: 740px;
|
|
|
25
|
|
|
26 overflow-x: hidden;
|
|
|
27 overflow-y: auto;
|
|
|
28
|
|
|
29 background: rgb(215, 215, 215);
|
|
|
30 background: -o-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
|
|
|
31 background: -moz-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
|
|
|
32 background: -webkit-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
|
|
|
33 }
|
|
|
34
|
|
|
35 .presentation {
|
|
|
36 width: 100%;
|
|
|
37 height: 100%;
|
|
|
38 left: 0;
|
|
|
39 top: 0;
|
|
|
40
|
|
|
41 position: absolute;
|
|
|
42 -webkit-transform: translate3d(0, 0, 0);
|
|
|
43 }
|
|
|
44
|
|
|
45 .slide {
|
|
|
46 display: block;
|
|
|
47
|
|
|
48 position: absolute;
|
|
|
49 overflow: hidden;
|
|
|
50
|
|
|
51 width: 900px;
|
|
|
52 height: 700px;
|
|
|
53
|
|
|
54 left: 50%;
|
|
|
55 top: 50%;
|
|
|
56
|
|
|
57 margin-left: -450px;
|
|
|
58 margin-top: -350px;
|
|
|
59
|
|
|
60 padding: 40px 60px;
|
|
|
61
|
|
|
62 box-sizing: border-box; /* css note: lets use border-box; no need to add padding+border to get to 100% */
|
|
|
63 -o-box-sizing: border-box;
|
|
|
64 -moz-box-sizing: border-box;
|
|
|
65 -webkit-box-sizing: border-box;
|
|
|
66
|
|
|
67 border-radius: 10px;
|
|
|
68 -o-border-radius: 10px;
|
|
|
69 -moz-border-radius: 10px;
|
|
|
70 -webkit-border-radius: 10px;
|
|
|
71
|
|
|
72 background-color: white;
|
|
|
73
|
|
|
74 box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
|
|
|
75 border: 1px solid rgba(0, 0, 0, .3);
|
|
|
76
|
|
|
77 transition: transform .3s ease-out;
|
|
|
78 -o-transition: -o-transform .3s ease-out;
|
|
|
79 -moz-transition: -moz-transform .3s ease-out;
|
|
|
80 -webkit-transition: -webkit-transform .3s ease-out;
|
|
|
81 }
|
|
|
82
|
|
|
83
|
|
|
84 .slide {
|
|
|
85 display: none;
|
|
|
86 }
|
|
|
87
|
|
|
88 .slide.far-past {
|
|
|
89 display: block;
|
|
|
90 transform: translate(-2040px);
|
|
|
91 -o-transform: translate(-2040px);
|
|
|
92 -moz-transform: translate(-2040px);
|
|
|
93 -webkit-transform: translate3d(-2040px, 0, 0);
|
|
|
94 }
|
|
|
95 .slide.past {
|
|
|
96 display: block;
|
|
|
97 transform: translate(-1020px);
|
|
|
98 -o-transform: translate(-1020px);
|
|
|
99 -moz-transform: translate(-1020px);
|
|
|
100 -webkit-transform: translate3d(-1020px, 0, 0);
|
|
|
101 }
|
|
|
102
|
|
|
103 .slide.current {
|
|
|
104 display: block;
|
|
|
105 transform: translate(0);
|
|
|
106 -o-transform: translate(0);
|
|
|
107 -moz-transform: translate(0);
|
|
|
108 -webkit-transform: translate3d(0, 0, 0);
|
|
|
109 }
|
|
|
110
|
|
|
111 .slide.next {
|
|
|
112 display: block;
|
|
|
113 transform: translate(1020px);
|
|
|
114 -o-transform: translate(1020px);
|
|
|
115 -moz-transform: translate(1020px);
|
|
|
116 -webkit-transform: translate3d(1020px, 0, 0);
|
|
|
117 }
|
|
|
118
|
|
|
119 .slide.far-next {
|
|
|
120 display: block;
|
|
|
121 transform: translate(2040px);
|
|
|
122 -o-transform: translate(2040px);
|
|
|
123 -moz-transform: translate(2040px);
|
|
|
124 -webkit-transform: translate3d(2040px, 0, 0);
|
|
|
125 }
|
|
|
126
|
|
|
127
|
|
|
128 /***********
|
|
|
129 * styles
|
|
|
130 */
|
|
|
131
|
|
|
132 .slide h1 { // use h1 for title
|
|
|
133 margin-top: 200px;
|
|
|
134 }
|
|
|
135
|
|
|
136
|
|
|
137 .slide h2 { // use h2 for section title/segue
|
|
|
138 background: rgba(128, 141, 181, .75);
|
|
|
139 position: absolute;
|
|
|
140 bottom: 150px;
|
|
|
141 }
|
|
|
142
|
|
|
143 .slide h3 { // use h3 for section title/segue. original
|
|
|
144 background: rgba(128, 141, 181, .75);
|
|
|
145 padding-top: .2em;
|
|
|
146 padding-bottom: .3em;
|
|
|
147 margin-top: -.2em;
|
|
|
148 margin-left: -60px;
|
|
|
149 padding-left: 60px;
|
|
|
150 margin-right: -60px;
|
|
|
151 padding-right: 60px;
|
|
|
152 }
|
|
|
153
|
|
|
154 .slide h3-yellow { // use h3 for section title/segue. original
|
|
|
155 background: rgba(255, 204, 0, .75);
|
|
|
156 padding-top: .2em;
|
|
|
157 padding-bottom: .3em;
|
|
|
158 margin-top: -.2em;
|
|
|
159 margin-left: -60px;
|
|
|
160 padding-left: 60px;
|
|
|
161 margin-right: -60px;
|
|
|
162 padding-right: 60px;
|
|
|
163 }
|
|
|
164
|
|
|
165 .slide.fill h3 {
|
|
|
166 background: rgba(128, 141, 181, .75);
|
|
|
167 padding-top: .2em;
|
|
|
168 padding-bottom: .3em;
|
|
|
169 margin-top: -.2em;
|
|
|
170 margin-left: -60px;
|
|
|
171 padding-left: 60px;
|
|
|
172 margin-right: -60px;
|
|
|
173 padding-right: 60px;
|
|
|
174 }
|
|
|
175
|
|
|
176 .slide iframe {
|
|
|
177 width: 100%;
|
|
|
178
|
|
|
179 height: 620px;
|
|
|
180
|
|
|
181 background: white;
|
|
|
182 border: 1px solid rgb(192, 192, 192);
|
|
|
183 margin: -1px;
|
|
|
184 /*box-shadow: inset 0 2px 6px rgba(0, 0, 0, .1);*/
|
|
|
185
|
|
|
186 overflow: hidden;
|
|
|
187 }
|
|
|
188
|
|
|
189 .slide h3 + iframe {
|
|
|
190 background: rgba(128, 141, 181, .75);
|
|
|
191 margin-top: 40px;
|
|
|
192 height: 540px;
|
|
|
193 }
|
|
|
194
|
|
|
195 .slide.fill iframe {
|
|
|
196 position: absolute;
|
|
|
197 left: 0;
|
|
|
198 top: 0;
|
|
|
199 width: 100%;
|
|
|
200 height: 100%;
|
|
|
201
|
|
|
202 border: 0;
|
|
|
203 margin: 0;
|
|
|
204
|
|
|
205 border-radius: 10px;
|
|
|
206 -o-border-radius: 10px;
|
|
|
207 -moz-border-radius: 10px;
|
|
|
208 -webkit-border-radius: 10px;
|
|
|
209
|
|
|
210 z-index: -1;
|
|
|
211 }
|
|
|
212
|
|
|
213 .slide.fill img {
|
|
|
214 position: absolute;
|
|
|
215 left: 0;
|
|
|
216 top: 0;
|
|
|
217 min-width: 100%;
|
|
|
218 min-height: 100%;
|
|
|
219
|
|
|
220 border-radius: 10px;
|
|
|
221 -o-border-radius: 10px;
|
|
|
222 -moz-border-radius: 10px;
|
|
|
223 -webkit-border-radius: 10px;
|
|
|
224
|
|
|
225 z-index: -1;
|
|
|
226 }
|
|
|
227
|
|
|
228
|
|
|
229 .slide img.centered {
|
|
|
230 margin: 0 auto;
|
|
|
231 display: block;
|
|
|
232 }
|
|
|
233
|
|
|
234
|
|
|
235 table {
|
|
|
236 width: 100%;
|
|
|
237 border-collapse: collapse;
|
|
|
238 }
|
|
|
239
|
|
|
240 th {
|
|
|
241 text-align: left;
|
|
|
242 }
|
|
|
243
|
|
|
244 td,
|
|
|
245 th {
|
|
|
246 border: 1px solid rgb(224, 224, 224);
|
|
|
247 padding: 5px 10px;
|
|
|
248 vertical-align: top;
|
|
|
249 }
|
|
|
250
|
|
|
251 ul {
|
|
|
252 list-style-type: square;
|
|
|
253 }
|
|
|
254
|
|
|
255 .source {
|
|
|
256 position: absolute;
|
|
|
257 left: 60px;
|
|
|
258 top: 644px;
|
|
|
259 padding-right: 175px;
|
|
|
260
|
|
|
261 font-size: 15px;
|
|
|
262 letter-spacing: 0;
|
|
|
263 line-height: 18px;
|
|
|
264 }
|
|
|
265
|
|
|
266 q {
|
|
|
267 font-size: 300%; // 60px
|
|
|
268 display: block;
|
|
|
269 margin-left: 1em;
|
|
|
270 }
|
|
|
271
|
|
|
272 q::before {
|
|
|
273 content: '“';
|
|
|
274 color: rgb(192, 192, 192);
|
|
|
275 position: absolute;
|
|
|
276 display: inline-block;
|
|
|
277 margin-left: -1.1em;
|
|
|
278 width: 1em;
|
|
|
279 text-align: right;
|
|
|
280 }
|
|
|
281
|
|
|
282 q::after {
|
|
|
283 content: '”';
|
|
|
284 color: rgb(192, 192, 192);
|
|
|
285 }
|
|
|
286
|
|
|
287
|
|
|
288 div.author {
|
|
|
289 text-align: right;
|
|
|
290
|
|
|
291 margin-top: 20px;
|
|
|
292 margin-right: 150px;
|
|
|
293
|
|
|
294 font-size: 200%; // 40px;
|
|
|
295 }
|
|
|
296
|
|
|
297 div.author::before {
|
|
|
298 content: '—';
|
|
|
299 }
|
|
|
300
|
|
|
301
|
|
|
302 /***********
|
|
|
303 * smaller
|
|
|
304 */
|
|
|
305
|
|
|
306 .slide.smaller {
|
|
|
307
|
|
|
308 p, ul, table { font-size: 80%; } // 20px
|
|
|
309
|
|
|
310 pre {font-size: 60%;} // 15px
|
|
|
311
|
|
|
312 q { font-size: 200%; } // 40px
|
|
|
313 }
|
|
|
314
|
|
|
315
|
|
|
316
|
|
|
317
|
|
|
318 /*********************************
|
|
|
319 * general text-alignment classes
|
|
|
320 */
|
|
|
321
|
|
|
322 .left { text-align: left; }
|
|
|
323 .center { text-align: center; }
|
|
|
324 .right { text-align: right; }
|
|
|
325
|
|
|
326
|
|
|
327 /*********************************
|
|
|
328 * general color classes
|
|
|
329 */
|
|
|
330
|
|
|
331 .white { color: white; }
|
