-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmusthavesSELF2014.css
executable file
·509 lines (416 loc) · 13.7 KB
/
musthavesSELF2014.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
/*
* CSS for LinuxMustHavesSELF2014.html talk. Based on impress.js demo
* presentation.
* -- Jas Eckard
*/
/*
We start with a good ol' reset.
That's the one by Eric Meyer http://meyerweb.com/eric/tools/css/reset/
You can probably argue if it is needed here, or not, but for sure it
doesn't do any harm and gives us a fresh start.
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*
Now here is when interesting things start to appear.
We set up <body> styles with default font and nice gradient in the
background. And yes, there is a lot of repetition there because of
-prefixes but we don't want to leave anybody behind.
*/
body {
font-family: 'PT Sans', sans-serif;
min-height: 740px;
background: rgb(10, 10, 10);
background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 500, from(rgb(15, 15, 15)), to(rgb(65, 65, 65)));
background: -webkit-radial-gradient(rgb(15, 15, 15), rgb(65, 65, 65));
background: -moz-radial-gradient(rgb(15, 15, 15), rgb(65, 65, 65));
background: -ms-radial-gradient(rgb(15, 15, 15), rgb(65, 65, 65));
background: -o-radial-gradient(rgb(15, 15, 15), rgb(65, 65, 65));
background: radial-gradient(rgb(15, 15, 15), rgb(65, 65, 65));
}
/*
Now let's bring some text styles back ...
*/
b, strong { font-weight: bold }
i, em { font-style: italic }
/*
... and give links a nice look.
*/
a {
color: inherit;
text-decoration: none;
padding: 0 0.1em;
background: rgba(255,255,255,0.5);
text-shadow: -1px -1px 2px rgba(100,100,100,0.9);
border-radius: 0.2em;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
a:hover,
a:focus {
background: rgba(255,255,255,1);
text-shadow: -1px -1px 2px rgba(100,100,100,0.5);
}
/*
Because the main point behind the impress.js demo is to demo impress.js
we display a fallback message for users with browsers that don't support
all the features required by it.
All of the content will be still fully accessible for them, but I want
them to know that they are missing something - that's what the demo is
about, isn't it?
And then we hide the message, when support is detected in the browser.
*/
.fallback-message {
font-family: sans-serif;
line-height: 1.3;
width: 780px;
padding: 10px 10px 0;
margin: 20px auto;
border: 1px solid #1C4ABD;
border-radius: 10px;
background: #11247D;
}
.fallback-message p {
margin-bottom: 10px;
}
.impress-supported .fallback-message {
display: none;
}
/*
Now let's style the presentation steps.
We start with basics to make sure it displays correctly in everywhere ...
*/
.step {
position: relative;
width: 900px;
width: 1150px;
padding: 40px;
margin: 20px auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
font-family: 'PT Serif', georgia, serif;
font-size: 48px;
line-height: 1.5;
color: white;
}
/*
... and we enhance the styles for impress.js.
Basically we remove the margin and make inactive steps a little bit transparent.
*/
.impress-enabled .step {
margin: 0;
opacity: 0.3;
-webkit-transition: opacity 1.5s;
-moz-transition: opacity 1.5s;
-ms-transition: opacity 1.5s;
-o-transition: opacity 1.5s;
transition: opacity 1.5s;
}
.impress-enabled .step.active { opacity: 1 }
/*
These 'slide' step styles were heavily inspired by HTML5 Slides:
http://html5slides.googlecode.com/svn/trunk/styles.css
;)
They cover everything what you see on first three steps of the demo.
*/
.slide {
display: block;
width: 1000px;
height: 700px;
padding: 45px 65px;
background-color: black;
border: 1px solid rgba(0, 0, 0, .3);
border-radius: 10px;
box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
color: white;
text-shadow: 0 2px 2px rgba(0, 0, 0, .1);
font-family: 'Open Sans', Arial, sans-serif;
font-size: 50px;
line-height: 60px;
letter-spacing: 0px;
}
.slide q {
display: block;
font-size: 50px;
line-height: 72px;
margin-top: 100px;
}
.slide q strong {
white-space: nowrap;
}
/*
And now we start to style each step separately.
I agree that this may be not the most efficient, object-oriented and
scalable way of styling, but most of steps have quite a custom look
and typography tricks here and there, so they had to be styled separately.
First is the title step with a big <h1> (no room for padding) and some
3D positioning along Z axis.
*/
/*
The last step is an overview.
There is no content in it, so we make sure it's not visible because we want
to be able to click on other steps.
*/
#overview { display: none }
/*
We also make other steps visible and give them a pointer cursor using the
`impress-on-` class.
*/
.impress-on-overview .step {
opacity: 1;
cursor: pointer;
}
/*
Now, when we have all the steps styled let's give users a hint how
to navigate around the presentation.
The best way to do this would be to use JavaScript, show a delayed
hint for a first time users, then hide it and store a status in
cookie or localStorage...
But I wanted to have some CSS fun and avoid additional scripting...
Let me explain it first, so maybe the transition magic will be more
readable when you read the code.
First of all I wanted the hint to appear only when user is idle for
a while. You can't detect the 'idle' state in CSS, but I delayed
an appearing of the hint by 5s using transition-delay.
You also can't detect in CSS if the user is a first-time visitor,
so I had to make an assumption that I'll only show the hint on the
first step. And when the step is changed hide the hint, because I
can assume that user already knows how to navigate.
To summarize it - hint is shown when the user is on the first step
for longer than 5 seconds.
The other problem I had was caused by the fact that I wanted the
hint to fade in and out. It can be easily achieved by transitioning
the opacity property. But that also meant that the hint was always
on the screen, even if totally transparent. It covered part of the
screen and you couldn't correctly clicked through it.
Unfortunately you cannot transition between display `block` and
`none` in pure CSS, so I needed a way to not only fade out the hint
but also move it out of the screen.
I solved this problem by positioning the hint below the bottom of
the screen with CSS transform and moving it up to show it. But I
also didn't want this move to be visible. I wanted the hint only to
fade in and out visually, so I delayed the fade in transition, so it
starts when the hint is already in its correct position on the screen.
I know, it sounds complicated ... maybe it would be easier with
the code?
*/
.hint {
/*
We hide the hint until presentation is started and from browsers
not supporting impress.js, as they will have a linear scrollable
view ...
*/
display: none;
/*
... and give it some fixed position and nice styles.
*/
position: fixed;
left: 0;
right: 0;
bottom: 200px;
background: rgba(0,0,0,0.5);
color: #111;
text-align: center;
font-size: 50px;
padding: 20px;
z-index: 100;
/*
By default we don't want the hint to be visible, so we make it
transparent ...
*/
opacity: 0;
/*
... and position it below the bottom of the screen (relative to
it's fixed position)
*/
-webkit-transform: translateY(400px);
-moz-transform: translateY(400px);
-ms-transform: translateY(400px);
-o-transform: translateY(400px);
transform: translateY(400px);
/*
Now let's imagine that the hint is visible and we want to fade
it out and move out of the screen.
So we define the transition on the opacity property with 1s
duration and another transition on transform property delayed
by 1s so it will happen after the fade out on opacity finished.
This way user will not see the hint moving down.
*/
-webkit-transition: opacity 1s, -webkit-transform 0.5s 1s;
-moz-transition: opacity 1s, -moz-transform 0.5s 1s;
-ms-transition: opacity 1s, -ms-transform 0.5s 1s;
-o-transition: opacity 1s, -o-transform 0.5s 1s;
transition: opacity 1s, transform 0.5s 1s;
}
/*
Now we 'enable' the hint when presentation is initialized ...
*/
.impress-enabled .hint { display: block }
/*
... and we will show it when the first step (with id 'bored') is active.
*/
.impress-on-bored .hint {
/*
We remove the transparency and position the hint in its default fixed
position.
*/
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
/*
Now for fade in transition we have the oposite situation from
the one above.
First after 4.5s delay we animate the transform property to move
the hint into its correct position and after that we fade it in
with opacity transition.
*/
-webkit-transition: opacity 1s 5s, -webkit-transform 0.5s 4.5s;
-moz-transition: opacity 1s 5s, -moz-transform 0.5s 4.5s;
-ms-transition: opacity 1s 5s, -ms-transform 0.5s 4.5s;
-o-transition: opacity 1s 5s, -o-transform 0.5s 4.5s;
transition: opacity 1s 5s, transform 0.5s 4.5s;
}
/*
And as the last thing there is a workaround for quite strange bug.
It happens a lot in Chrome. I don't remember if I've seen it in Firefox.
Sometimes the element positioned in 3D (especially when it's moved back
along Z axis) is not clickable, because it falls 'behind' the <body>
element.
To prevent this, I decided to make <body> non clickable by setting
pointer-events property to `none` value.
Value if this property is inherited, so to make everything else clickable
I bring it back on the #impress element.
If you want to know more about `pointer-events` here are some docs:
https://developer.mozilla.org/en/CSS/pointer-events
There is one very important thing to notice about this workaround - it makes
everything 'unclickable' except what's in #impress element.
So use it wisely ... or don't use at all.
*/
.impress-enabled { pointer-events: none }
.impress-enabled #impress { pointer-events: auto }
/*
There is one funny thing I just realized.
Thanks to this workaround above everything except #impress element is invisible
for click events. That means that the hint element is also not clickable.
So basically all of this transforms and delayed transitions trickery was probably
not needed at all...
But it was fun to learn about it, wasn't it?
*/
/*
That's all I have for you in this file.
Thanks for reading. I hope you enjoyed it at least as much as I enjoyed writing it
for you.
*/
th {
font-size: 13px;
font-weight: bold;
}
td {
font-size: 12px;
white-space: nowrap;
font-family: courier, monospace;
padding-right: 8px;
}
.step h1 {
font-weight: bold;
font-size: 70px;
text-decoration: underline;
-webkit-transform: translateZ(50px);
-moz-transform: translateZ(50px);
-ms-transform: translateZ(50px);
-o-transform: translateZ(50px);
transform: translateZ(50px);
}
.slide h1 {
font-weight: bold;
font-size: 60px;
text-decoration: underline;
padding-bottom: 20px;
-webkit-transform: translateZ(50px);
-moz-transform: translateZ(50px);
-ms-transform: translateZ(50px);
-o-transform: translateZ(50px);
transform: translateZ(50px);
}
.slide h2 {
font-weight: bold;
font-size: 50px;
padding-bottom: 20px;
-webkit-transform: translateZ(50px);
-moz-transform: translateZ(50px);
-ms-transform: translateZ(50px);
-o-transform: translateZ(50px);
transform: translateZ(50px);
}
code {
font-family: courier, monospace;
}
#list {
padding: 100px;
background-color: white;
background-color: #bbb;
color: black;
line-height: 1.4;
width: 1256px;
}
#intro {
margin: 1px;
}
#intro h1 {
font-size: 100px;
line-height: 120px;
}
#intro h2 {
font-size: 90px;
line-height: 90px;
}