|
27
|
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 position: absolute;
|
|
|
139 bottom: 150px;
|
|
|
140 }
|
|
|
141
|
|
|
142 .slide.fill h3 {
|
|
|
143 background: rgba(255, 255, 255, .75);
|
|
|
144 padding-top: .2em;
|
|
|
145 padding-bottom: .3em;
|
|
|
146 margin-top: -.2em;
|
|
|
147 margin-left: -60px;
|
|
|
148 padding-left: 60px;
|
|
|
149 margin-right: -60px;
|
|
|
150 padding-right: 60px;
|
|
|
151 }
|
|
|
152
|
|
|
153 .slide iframe {
|
|
|
154 width: 100%;
|
|
|
155
|
|
|
156 height: 620px;
|
|
|
157
|
|
|
158 background: white;
|
|
|
159 border: 1px solid rgb(192, 192, 192);
|
|
|
160 margin: -1px;
|
|
|
161 /*box-shadow: inset 0 2px 6px rgba(0, 0, 0, .1);*/
|
|
|
162
|
|
|
163 overflow: hidden;
|
|
|
164 }
|
|
|
165
|
|
|
166 .slide h3 + iframe {
|
|
|
167 margin-top: 40px;
|
|
|
168 height: 540px;
|
|
|
169 }
|
|
|
170
|
|
|
171 .slide.fill iframe {
|
|
|
172 position: absolute;
|
|
|
173 left: 0;
|
|
|
174 top: 0;
|
|
|
175 width: 100%;
|
|
|
176 height: 100%;
|
|
|
177
|
|
|
178 border: 0;
|
|
|
179 margin: 0;
|
|
|
180
|
|
|
181 border-radius: 10px;
|
|
|
182 -o-border-radius: 10px;
|
|
|
183 -moz-border-radius: 10px;
|
|
|
184 -webkit-border-radius: 10px;
|
|
|
185
|
|
|
186 z-index: -1;
|
|
|
187 }
|
|
|
188
|
|
|
189 .slide.fill img {
|
|
|
190 position: absolute;
|
|
|
191 left: 0;
|
|
|
192 top: 0;
|
|
|
193 min-width: 100%;
|
|
|
194 min-height: 100%;
|
|
|
195
|
|
|
196 border-radius: 10px;
|
|
|
197 -o-border-radius: 10px;
|
|
|
198 -moz-border-radius: 10px;
|
|
|
199 -webkit-border-radius: 10px;
|
|
|
200
|
|
|
201 z-index: -1;
|
|
|
202 }
|
|
|
203
|
|
|
204
|
|
|
205 .slide img.centered {
|
|
|
206 margin: 0 auto;
|
|
|
207 display: block;
|
|
|
208 }
|
|
|
209
|
|
|
210
|
|
|
211 table {
|
|
|
212 width: 100%;
|
|
|
213 border-collapse: collapse;
|
|
|
214 }
|
|
|
215
|
|
|
216 th {
|
|
|
217 text-align: left;
|
|
|
218 }
|
|
|
219
|
|
|
220 td,
|
|
|
221 th {
|
|
|
222 border: 1px solid rgb(224, 224, 224);
|
|
|
223 padding: 5px 10px;
|
|
|
224 vertical-align: top;
|
|
|
225 }
|
|
|
226
|
|
|
227 ul {
|
|
|
228 list-style-type: square;
|
|
|
229 }
|
|
|
230
|
|
|
231 .source {
|
|
|
232 position: absolute;
|
|
|
233 left: 60px;
|
|
|
234 top: 644px;
|
|
|
235 padding-right: 175px;
|
|
|
236
|
|
|
237 font-size: 15px;
|
|
|
238 letter-spacing: 0;
|
|
|
239 line-height: 18px;
|
|
|
240 }
|
|
|
241
|
|
|
242 q {
|
|
|
243 font-size: 300%; // 60px
|
|
|
244 display: block;
|
|
|
245 margin-left: 1em;
|
|
|
246 }
|
|
|
247
|
|
|
248 q::before {
|
|
|
249 content: '“';
|
|
|
250 color: rgb(192, 192, 192);
|
|
|
251 position: absolute;
|
|
|
252 display: inline-block;
|
|
|
253 margin-left: -1.1em;
|
|
|
254 width: 1em;
|
|
|
255 text-align: right;
|
|
|
256 }
|
|
|
257
|
|
|
258 q::after {
|
|
|
259 content: '”';
|
|
|
260 color: rgb(192, 192, 192);
|
|
|
261 }
|
|
|
262
|
|
|
263
|
|
|
264 div.author {
|
|
|
265 text-align: right;
|
|
|
266
|
|
|
267 margin-top: 20px;
|
|
|
268 margin-right: 150px;
|
|
|
269
|
|
|
270 font-size: 200%; // 40px;
|
|
|
271 }
|
|
|
272
|
|
|
273 div.author::before {
|
|
|
274 content: '—';
|
|
|
275 }
|
|
|
276
|
|
|
277
|
|
|
278 /***********
|
|
|
279 * smaller
|
|
|
280 */
|
|
|
281
|
|
|
282 .slide.smaller {
|
|
|
283
|
|
|
284 p, ul, table { font-size: 80%; } // 20px
|
|
|
285
|
|
|
286 pre { font-size: 60%; } // 15px
|
|
|
287
|
|
|
288 q { font-size: 200%; } // 40px
|
|
|
289 }
|
|
|
290
|
|
|
291
|
|
|
292
|
|
|
293
|
|
|
294 /*********************************
|
|
|
295 * general text-alignment classes
|
|
|
296 */
|
|
|
297
|
|
|
298 .left { text-align: left; }
|
|
|
299 .center { text-align: center; }
|
|
|
300 .right { text-align: right; }
|
|
|
301
|
|
|
302
|
|
|
303 /*********************************
|
|
|
304 * general color classes
|
|
|
305 */
|
|
|
306
|
|
|
307 .white { color: white; }
|
