slide-em-up 0.1.4 → 0.1.5

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