slide-em-up 0.1.4 → 0.1.5

Sign up to get free protection for your applications and to get access to all the features.
@@ -0,0 +1,543 @@
1
+ /**
2
+ * HTML5 Slide Deck Theme - Moon
3
+ * Author: Eric Bidelman <ericbidelman@html5rocks.com>
4
+ */
5
+
6
+ body {
7
+ font: 16px "Lucida Grande", "Trebuchet MS", Verdana, sans-serif;
8
+ padding: 0;
9
+ margin: 0;
10
+ width: 100%;
11
+ height: 100%;
12
+ position: absolute;
13
+ left: 0px; top: 0px;
14
+ -webkit-font-smoothing: antialiased;
15
+ }
16
+
17
+ .presentation {
18
+ position: absolute;
19
+ height: 100%;
20
+ width: 100%;
21
+ left: 0px;
22
+ top: 0px;
23
+ display: block;
24
+ overflow: hidden;
25
+ background: #000;
26
+ background: -webkit-gradient(linear, left top, left bottom, from(#444), to(black));
27
+ background: -moz-linear-gradient(top, #444, black);
28
+ }
29
+
30
+ .slides {
31
+ width: 100%;
32
+ height: 100%;
33
+ left: 0;
34
+ top: 0;
35
+ position: absolute;
36
+ display: none;
37
+ -webkit-transition: -webkit-transform 1.5s ease-in-out;
38
+ -moz-transition: -moz-transform 1.5s ease-in-out;
39
+ -o-transition: -o-transform 1.5s ease-in-out;
40
+ transition: transform 1.5s ease-in-out;
41
+ }
42
+
43
+ .slide {
44
+ display: none;
45
+ position: absolute;
46
+ overflow: hidden;
47
+ width: 900px;
48
+ height: 700px;
49
+ left: 50%;
50
+ top: 50%;
51
+ margin-top: -350px;
52
+ background-color: #eee;
53
+ border-radius: 10px;
54
+ -moz-border-radius: 10px;
55
+ opacity: 0.35;
56
+
57
+ -webkit-transform: scale(0.8) translateZ(0);
58
+ -moz-transform: scale(0.8);
59
+ -o-transform: scale(0.8);
60
+
61
+ -webkit-transition-property: margin, -webkit-transform, opacity;
62
+ -webkit-transition-duration: 0.3s, 0.3s, 0.3s;
63
+ -webkit-transition-timing-function: ease-in-out;
64
+
65
+ -moz-transition-property: margin, -moz-transform, opacity;
66
+ -moz-transition-duration: 0.3s, 0.3s, 0.3s;
67
+ -moz-transition-timing-function: ease-in-out;
68
+
69
+ -o-transition-property: margin, -moz-transform, opacity;
70
+ -o-transition-duration: 0.3s, 0.3s, 0.3s;
71
+ -o-transition-timing-function: ease-in-out;
72
+
73
+ /* NOTE(slightlyoff): simpler animations for slower boxes */
74
+ /*
75
+ -webkit-transition: margin 0.3s ease-in-out;
76
+ -moz-transition: margin 0.3s ease-in-out;
77
+ -o-transition: margin 0.3s ease-in-out;
78
+ */
79
+ }
80
+
81
+ .slide:nth-child(even) {
82
+ border-radius: 10px 30px 10px 30px;
83
+ -moz-border-radius: 10px 20px 10px 20px;
84
+ }
85
+
86
+ .slide:nth-child(odd) {
87
+ border-radius: 20px 10px 20px 10px;
88
+ -moz-border-radius: 20px 10px 20px 10px;
89
+ }
90
+
91
+ .slide p, .slide textarea {
92
+ font-size: 20px;
93
+ }
94
+
95
+ .slide .counter {
96
+ color: #999999;
97
+ position: absolute;
98
+ left: 20px;
99
+ bottom: 20px;
100
+ display: block;
101
+ font-size: 12px;
102
+ width: 100%;
103
+ }
104
+
105
+ .slide:not(.transitionSlide) .counter:after {
106
+ content: '';
107
+ width: 32px;
108
+ height: 32px;
109
+ background-repeat: no-repeat;
110
+ background-position: right bottom;
111
+ position: absolute;
112
+ bottom: 0;
113
+ right: 45px;
114
+ opacity: 0.25;
115
+ }
116
+
117
+ .slide.title > .counter,
118
+ .slide.segue > .counter,
119
+ .slide.mainTitle > .counter {
120
+ display: none;
121
+ }
122
+
123
+ .slide.transitionSlide h2 {
124
+ font-size: 40px;
125
+ margin: 0;
126
+ line-height: 10px;
127
+ }
128
+ .slide.transitionSlide p {
129
+ margin: 0;
130
+ }
131
+
132
+ .slide.transitionSlide img {
133
+ opacity: 0.25;
134
+ width: 64px;
135
+ height: 64px;
136
+ }
137
+
138
+ .vbox {
139
+ display: -webkit-box;
140
+ -webkit-box-orient: vertical;
141
+ -webkit-box-align: stretch;
142
+
143
+ display: -moz-box;
144
+ -moz-box-orient: vertical;
145
+ -moz-box-align: stretch;
146
+
147
+ display: box;
148
+ box-orient: vertical;
149
+ box-align: stretch;
150
+ }
151
+
152
+ .hbox {
153
+ display: -webkit-box;
154
+ -webkit-box-orient: horizontal;
155
+ -webkit-box-align: stretch;
156
+
157
+ display: -moz-box;
158
+ -moz-box-orient: horizontal;
159
+ -moz-box-align: stretch;
160
+
161
+ display: box;
162
+ box-orient: horizontal;
163
+ box-align: stretch;
164
+ }
165
+
166
+ .flex {
167
+ -webkit-box-flex: 1;
168
+ -moz-box-flex: 1;
169
+ box-flex: 1;
170
+ }
171
+
172
+ .noflex {
173
+ -webkit-box-flex: 0;
174
+ -moz-box-flex: 0;
175
+ box-flex: 0;
176
+ }
177
+
178
+ .boxcenter {
179
+ -webkit-box-pack: center;
180
+ -moz-box-pack: center;
181
+ box-pack: center;
182
+ }
183
+
184
+ .slide.far-past {
185
+ display: block;
186
+ margin-left: -2400px;
187
+ }
188
+
189
+ .slide.past {
190
+ visibility: visible;
191
+ display: block;
192
+ margin-left: -1400px;
193
+ }
194
+
195
+ .slide.current {
196
+ visibility: visible;
197
+ display: block;
198
+ margin-left: -450px;
199
+ -webkit-transform: scale(1.0);
200
+ -moz-transform: scale(1.0);
201
+ -o-transform: scale(1.0);
202
+ opacity: 1.0;
203
+ }
204
+
205
+ .slide.future {
206
+ visibility: visible;
207
+ display: block;
208
+ margin-left: 500px;
209
+ }
210
+
211
+ .slide.far-future {
212
+ display: block;
213
+ margin-left: 1500px;
214
+ }
215
+
216
+ body.three-d div.presentation {
217
+ /*background: -webkit-gradient(radial, 50% 50%, 10, 50% 50%, 1000, from(#333), to(#000)); */
218
+ }
219
+
220
+ body.three-d div.slides {
221
+ -webkit-transform: translateX(50px) scale(0.8) rotateY(10deg);
222
+ -moz-transform: translateX(50px) scale(0.8) rotateY(10deg);
223
+ -o-transform: translateX(50px) scale(0.8) rotateY(10deg);
224
+ transform: translateX(50px) scale(0.8) rotateY(10deg);
225
+ }
226
+
227
+ /* Content */
228
+ /*
229
+ Font sizes:
230
+ header h1 - 50px
231
+ h2, p - 20px
232
+ default, pre, input - 16px
233
+ */
234
+
235
+ @font-face {
236
+ font-family: 'Yanone Kaffeesatz';
237
+ font-style: normal;
238
+ font-weight: 400;
239
+ src: url('/src/fonts/yanone/YanoneKaffeesatz-Regular.ttf') format('truetype');
240
+ }
241
+ @font-face {
242
+ font-family: 'Inconsolata';
243
+ font-style: normal;
244
+ font-weight: normal;
245
+ src: url('/src/fonts/inconsolata/Inconsolata.ttf') format('truetype');
246
+ }
247
+ @font-face {
248
+ font-family: 'JunctionRegular';
249
+ src: url('/src/fonts/junction02/junction02-webfont.eot');
250
+ src: local('☺'), url('/src/fonts/junction02/junction02-webfont.woff') format('woff'), url('/src/fonts/junction02/junction02-webfont.ttf') format('truetype'), url('/src/fonts/junction02/junction02-webfont.svg#webfontwzJOjWvv') format('svg');
251
+ font-weight: normal;
252
+ font-style: normal;
253
+ }
254
+ @font-face {
255
+ font-family: 'LeagueGothicRegular';
256
+ src: url('/src/fonts/leaguegothic/leaguegothic-webfont.eot');
257
+ src: local('☺'), url('/src/fonts/leaguegothic/leaguegothic-webfont.woff') format('woff'), url('/src/fonts/leaguegothic/leaguegothic-webfont.ttf') format('truetype'), url('/src/fonts/leaguegothic/leaguegothic-webfont.svg#webfontWgfhmMGx') format('svg');
258
+ font-weight: normal;
259
+ font-style: normal;
260
+ }
261
+
262
+ header {
263
+ font-family: Arial;
264
+ font-weight: normal;
265
+ letter-spacing: -.05em;
266
+ color: #0054AB;
267
+ font-weight: normal;
268
+ text-shadow: rgba(0, 0, 0, 0.2) 0 2px 5px;
269
+ position: absolute;
270
+ left: 30px;
271
+ top: 25px;
272
+ margin: 0;
273
+ padding: 0;
274
+ font-size: 50px;
275
+ }
276
+
277
+ h1 {
278
+ font-size: 100%;
279
+ display: inline;
280
+ font-weight: normal;
281
+ padding: 0;
282
+ margin: 0;
283
+ }
284
+
285
+ h2 {
286
+ font-family: Arial;
287
+ color: black;
288
+ font-size: 20px;
289
+ padding: 0;
290
+ margin: 15px 0 5px 0;
291
+ }
292
+
293
+ h2:first-child {
294
+ margin-top: 0;
295
+ }
296
+
297
+ section, footer {
298
+ font: Arial;
299
+ font-weight: normal;
300
+ color: #3f3f3f;
301
+ text-shadow: white 0px 1px 0px, rgba(0, 0, 0, 0.2) 0 2px 5px;
302
+ margin: 100px 30px 0;
303
+ display: block;
304
+ overflow: hidden;
305
+ }
306
+
307
+ footer {
308
+ font-size: 12px;
309
+ margin: 20px 0 0 30px;
310
+ }
311
+
312
+ a {
313
+ color: inherit;
314
+ display: inline-block;
315
+ text-decoration: none;
316
+ line-height: 110%;
317
+ border-bottom: 2px solid #3f3f3f;
318
+ }
319
+
320
+ .gmap a {
321
+ line-height: 100%;
322
+ border-bottom: none;
323
+ }
324
+
325
+ li {
326
+ list-style: none;
327
+ padding: 10px 0;
328
+ }
329
+
330
+ button {
331
+ font-size: 20px;
332
+ }
333
+
334
+ pre button {
335
+ margin: 2px;
336
+ }
337
+
338
+ .summary {
339
+ font-size: 30px;
340
+ }
341
+
342
+ .bullets {
343
+ font-size: 40px;
344
+ }
345
+
346
+ section.left {
347
+ float: left;
348
+ width: 390px;
349
+ }
350
+
351
+ section.small {
352
+ font-size: 24px;
353
+ }
354
+
355
+ section.small ul {
356
+ margin: 0 0 0 15px;
357
+ padding: 0;
358
+ }
359
+
360
+ section.small li {
361
+ padding-bottom: 0;
362
+ }
363
+
364
+ section.middle {
365
+ line-height: 68px;
366
+ text-align: center;
367
+ display: table-cell;
368
+ vertical-align: middle;
369
+ height: 700px;
370
+ width: 900px;
371
+ }
372
+
373
+ pre {
374
+ font: 'Inconsolata';
375
+ color: #000;
376
+ text-align: left;
377
+ padding: 10px 20px;
378
+ border-radius: 10px;
379
+ background: rgba(255, 204, 0, 0.05);
380
+ border: 2px solid rgba(255, 204, 0, 0.3);
381
+ /*text-shadow: rgba(0, 0, 0, 0.2) 0 2px 5px;*/
382
+ }
383
+
384
+ pre select {
385
+ font-family: Monaco, Courier;
386
+ border: 1px solid #c61800;
387
+ }
388
+
389
+ input {
390
+ font-size: 16px;
391
+ margin-right: 10px;
392
+ font-family: Helvetica;
393
+ padding: 3px 5px;
394
+ }
395
+ input[type="range"] {
396
+ width: 100%;
397
+ }
398
+
399
+ button {
400
+ font-family: Verdana;
401
+ }
402
+
403
+ button.large {
404
+ font-size: 32px;
405
+ }
406
+
407
+ pre b {
408
+ font-weight: normal;
409
+ color: #c61800;
410
+ text-shadow: #c61800 0 0 1px;
411
+ /*letter-spacing: -1px;*/
412
+ }
413
+ pre em {
414
+ font-weight: normal;
415
+ font-style: normal;
416
+ color: #18a600;
417
+ text-shadow: #18a600 0 0 1px;
418
+ }
419
+ pre input[type="range"] {
420
+ height: 6px;
421
+ cursor: pointer;
422
+ width: auto;
423
+ }
424
+
425
+ div.example {
426
+ display: block;
427
+ padding: 10px 20px;
428
+ color: black;
429
+ background: rgba(255, 255, 255, 0.4);
430
+ -webkit-border-radius: 8px;
431
+ -khtml-border-radius: 8px;
432
+ -moz-border-radius: 8px;
433
+ border-radius: 8px;
434
+ margin-bottom: 10px;
435
+ border: 1px solid rgba(0, 0, 0, 0.2);
436
+ }
437
+
438
+ video {
439
+ -moz-border-radius: 8px;
440
+ -khtml-border-radius: 8px;
441
+ -webkit-border-radius: 8px;
442
+ border-radius: 8px;
443
+ border: 1px solid rgba(0, 0, 0, 0.2);
444
+ }
445
+
446
+ .css,
447
+ .js,
448
+ .html,
449
+ .key {
450
+ font-family: 'Inconsolata';
451
+ color: black;
452
+ display: inline-block;
453
+ padding: 6px 10px 3px 10px;
454
+ font-size: 25px;
455
+ line-height: 30px;
456
+ text-shadow: none;
457
+ letter-spacing: 0;
458
+ bottom: 10px;
459
+ position: relative;
460
+ -moz-border-radius: 10px;
461
+ -khtml-border-radius: 10px;
462
+ -webkit-border-radius: 10px;
463
+ border-radius: 10px;
464
+ background: white;
465
+ box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px;
466
+ -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px;
467
+ -moz-box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px;
468
+ -o-box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px;
469
+ }
470
+
471
+ .key { font-family: Arial; }
472
+
473
+ :not(header) > .css,
474
+ :not(header) > .js,
475
+ :not(header) > .html,
476
+ :not(header) > .key {
477
+ margin: 0 5px;
478
+ bottom: 4px;
479
+ }
480
+
481
+ .css {
482
+ background: -webkit-gradient(linear, left top, left bottom, from(#ff4), to(#ffa));
483
+ background-color: #ff4;
484
+ background: -moz-linear-gradient(left top, #ff4, #ffa);
485
+ }
486
+ .js {
487
+ background: -webkit-gradient(linear, left top, left bottom, from(#4f4), to(#afa));
488
+ background-color: #4f4;
489
+ background: -moz-linear-gradient(left top, #4f4, #afa);
490
+ }
491
+ .html {
492
+ background: -webkit-gradient(linear, left top, left bottom, from(#e88), to(#fee));
493
+ background-color: #e88;
494
+ background: -moz-linear-gradient(left top, #e88, #fee);
495
+ }
496
+
497
+ .two-column {
498
+ -webkit-column-count: 2;
499
+ -moz-column-count: 2;
500
+ column-count: 2;
501
+ }
502
+
503
+ .summary li::before, .bullets li::before {
504
+ content: '· ';
505
+ }
506
+
507
+ .stroke {
508
+ -webkit-text-stroke-color: red;
509
+ -webkit-text-stroke-width: 1px;
510
+ } /* currently webkit-only */
511
+
512
+ .center {
513
+ text-align: center;
514
+ }
515
+
516
+ .formula {
517
+ font-size: 50px;
518
+ }
519
+
520
+ #presentation-counter {
521
+ color: #fff;
522
+ font: 100px 'Yanone Kaffeesatz';
523
+ letter-spacing: 1px;
524
+ position: relative;
525
+ top: 40%;
526
+ width: 100%;
527
+ text-align: center;
528
+ }
529
+
530
+ .hsl-value {
531
+ display: inline-block;
532
+ width: 50px;
533
+ }
534
+
535
+ [data-build] > * {
536
+ -webkit-transition: opacity 0.5s ease-in-out 0.2s;
537
+ -moz-transition: opacity 0.5s ease-in-out 0.2s;
538
+ -o-transition: opacity 0.5s ease-in-out 0.2s;
539
+ }
540
+
541
+ [data-build] > *.to-build {
542
+ opacity: 0;
543
+ }