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