remove bottom margin of boxes so end slide can lost scroll bar if things fit nicely
[slides.git] / tsmeetup201809 / slides.css
... / ...
CommitLineData
1/**************************
2 * styles for talk slides *
3 * by Robert Kaiser *
4 * <kairo@kairo.at> *
5 * (for FOSDEM 2013) *
6 **************************/
7
8
9/***** base style *****/
10
11@font-face {
12 font-family: 'Open Sans';
13 src: url('template/OpenSans-Regular-webfont.woff');
14 font-weight: normal;
15 font-style: normal;
16}
17
18@font-face {
19 font-family: 'Open Sans';
20 src: url('template/OpenSans-Semibold-webfont.woff');
21 font-weight: bold;
22 font-style: normal;
23}
24
25@font-face {
26 font-family: 'Open Sans';
27 src: url('template/OpenSans-Italic-webfont.woff');
28 font-weight: normal;
29 font-style: italic;
30}
31
32@font-face {
33 font-family: 'Zilla Slab';
34 src: url('template/ZillaSlab-Regular.woff2');
35 font-weight: normal;
36 font-style: normal;
37}
38
39@font-face {
40 font-family: 'Zilla Slab';
41 src: url('template/ZillaSlab-Bold.woff2');
42 font-weight: bold;
43 font-style: normal;
44}
45
46@font-face {
47 font-family: 'Zilla Slab Highlight';
48 src: url('template/ZillaSlabHighlight-Regular.woff2');
49 font-weight: normal;
50 font-style: normal;
51}
52
53@font-face {
54 font-family: 'Zilla Slab Highlight';
55 src: url('template/ZillaSlabHighlight-Bold.woff2');
56 font-weight: bold;
57 font-style: normal;
58}
59
60html {
61 overflow: hidden; /* to make translations not paint scrollbars */
62 background: white;
63 height: 100%;
64}
65
66body {
67 margin: 0px;
68 padding: 0px;
69 border: 0px;
70 font-family: "Open Sans", sans-serif;
71 font-size: 2em;
72 color: black;
73 height: 100%;
74}
75
76ul {
77 padding-left: 1.2em;
78 margin-bottom: 0.5em;
79}
80
81ul:first-child,
82ul:last-child {
83 margin-top: 0;
84}
85
86#header {
87 height: 44px;
88 position: relative;
89 font-family: "Zilla Slab", monospace;
90 border-bottom: 3px solid black;
91}
92
93#headerlogo {
94 position: absolute;
95 display: block;
96 right: 2px;
97 top: 2px;
98 text-indent: -2000px;
99 font-size: 1px;
100 overflow: hidden;
101 height: 40px;
102 width: 140px;
103 background: url("template/mozilla_logo2017.svg") no-repeat;
104}
105
106#header-text {
107 position: relative;
108 top: 5px;
109 left: 25px;
110 width: 200px;
111 width: -moz-fit-content;
112 width: -webkit-fit-content;
113 width: fit-content;
114 padding: 0 5px;
115 font-size: 20px;
116 font-weight: bold;
117 color: white;
118 background-color: black;
119}
120
121#header-text.neartime {
122 color: #00FFFF;
123}
124
125#header-text.ontime {
126 color: #54FFBD;
127}
128
129#header-text.overtime {
130 color: #FF4F5E;
131}
132
133#subheader-text {
134 color: black;
135 position: relative;
136 top: 3px;
137 left: 25px;
138 width: calc(100% - 50px);
139 padding: 0 5px;
140 font-size: 10px;
141}
142
143#slidenav {
144 position: absolute;
145 right: 200px;
146 top: 15px;
147 font-family: "Zilla Slab", monospace;
148 font-size: 10px;
149}
150
151#slidenav a:link,
152#slidenav a:visited {
153 color: black;
154}
155
156#slidenav a:hover,
157#slidenav a:active {
158 color: #959595;
159}
160
161#slidenav .nolink {
162 color: #E7E5E2;
163}
164
165article {
166 position: absolute;
167 width: 100%;
168 /* header is 40px, 7px to have a bit of distance,
169 * 3px height-reducing on the bottom for safety */
170 top: 47px;
171 height: calc(100% - 50px);
172 overflow: auto;
173
174 transition-property: transform, opacity;
175 transition-duration: 3s;
176 transition-timing-function: ease;
177 transform-origin: center 5em;
178
179 opacity: 0;
180/*
181 transform: translate(-100%, 0);
182*/
183/*
184 transform: scale(0.1) rotate(360deg) translate(-200%, 0);
185*/
186 transform: scale(0.1) translate(-400%, 0);
187}
188
189article[aria-selected="true"] {
190 opacity: 1;
191 transform: scale(1) rotate(0deg) translate(0, 0);
192}
193
194article[aria-selected="true"] ~ article {
195 opacity: 0;
196/*
197 transform: translate(100%, 0);
198*/
199/*
200 transform: scale(0.1) rotate(-360deg) translate(200%, 0);
201*/
202 transform: scale(0.1) translate(400%, 0);
203}
204
205/***** headers *****/
206
207h1, h2, h3, h4 {
208 margin: 0.5em 0;
209 font-family: "Zilla Slab", monospace;
210 font-weight: bold;
211 color: black;
212 text-align: center;
213}
214
215h1 {
216 font-family: "Zilla Slab Highlight", "Zilla Slab", monospace;
217 margin-top: 0.5em;
218 font-size: 2.2em;
219}
220
221h1 span {
222 font-family: "Zilla Slab", monospace;
223 background-color: black;
224 color: white;
225 padding: 0 10px;
226}
227
228h2 {
229 font-size: 1.3em;
230}
231
232h3 {
233 font-size: 1.1em;
234}
235
236h4 {
237 font-size: 1em;
238 text-align: left;
239}
240
241/***** boxes *****/
242
243.simplebox {
244 padding: 0.5em;
245}
246
247.captionedbox {
248 padding: 0px;
249}
250
251.simplebox,
252.captionedbox {
253 margin: 1em;
254 background-color: white;
255 /* box-shadow: 0 0 0 1px black inset; */
256 /* border-bottom: 1px solid black; */
257}
258
259.captionedbox-content {
260 margin: 0;
261 padding: 0.5em;
262 border: 0px;
263 border-top: 1px solid black;
264}
265
266.captionedbox-caption {
267 margin: 0;
268 padding: 0.5em;
269 font-weight: bold;
270}
271
272.simplebox + .simplebox,
273.captionedbox + .simplebox,
274.simplebox + .captionedbox,
275.captionedbox + .captionedbox {
276 border-top: 1px solid black;
277}
278
279/***** misc formatting *****/
280
281mark {
282 font-family: "Zilla Slab", monospace;
283 font-weight: bold;
284 color: black;
285 background-color: #FFF44F;
286}
287
288.decofont {
289 font-family: "Zilla Slab", monospace;
290}
291
292.border {
293 border: 1px solid black;
294 padding: 0.5em;
295}
296
297.sshot {
298 max-width: 100%;
299 max-height: 20em;
300 /* box-shadow: black 1px 1px 3px 2px; */
301}
302
303.slidepic {
304 float: right;
305 margin-left: .5em;
306 max-height: 20em;
307 max-width: 25%;
308}
309
310.ensurepicinbox {
311 clear: both;
312 font-size: 1px;
313 margin: 0;
314}
315
316.largetext {
317 font-size: 2em;
318}
319
320ul > li {
321 margin: 0.5em 0;
322}
323
324.columns2 {
325 -moz-columns: 2;
326}
327
328ul.nobullets > li {
329 list-style-type: none;
330}
331
332ul.arrows > li {
333 list-style-type: none;
334}
335ul.arrows > li:before {
336 content: "\21d2\20"; /* \2192 would be single thin arrow, hex 20 is space */
337}
338
339.cent {
340 text-align: center;
341}
342
343.topmargin {
344 margin-top: 0.5em;
345}
346
347.akey {
348 text-decoration: underline;
349}
350
351a:link, a:visited { color: #00458B; text-decoration: none; }
352a:hover, a:active { color: #959595; text-decoration: underline; }
353
354mark a:link, mark a:visited { color: #005E5E; }
355mark a:hover, mark a:active { color: #005E5E; }
356
357h1 span a:link, h1 span a:visited,
358h1 span a:hover, h1 span a:active { color: white; }
359
360pre { margin: 0; }
361
362/***** small stuff *****/
363
364small,
365.small {
366 font-size: 0.75em;
367}
368
369ul.small,
370.small ul {
371 padding: 0px;
372 border: 0px;
373 margin: 0px 0px 0px 1em;
374}
375
376ul.small > li
377.small ul > li {
378 margin: 0px;
379 padding: 0px;
380 border: 0px;
381}
382
383/***** specific slides *****/
384
385/* start slide */
386.ccinline {
387 border-width: 0;
388 vertical-align: bottom;
389 height: 1.75em;
390}
391
392/* end slide */
393.endslidecontainer {
394 position: relative;
395}
396
397.endslidepic {
398 width: 100%;
399 max-height: initial;
400 z-index: 1;
401}
402
403.endslidetext {
404 position: absolute;
405 width: calc(100% - 2rem);
406 z-index: 3;
407}
408
409h1.endslidetext {
410/* color: white; */
411 font-size: 2.5em;
412}
413
414h2.endslidetext,
415h3.endslidetext {
416 font-size: 1.5em;
417}
418
419h2.endslidetext > span,
420h3.endslidetext > span {
421 background-color: white;
422 padding: 0 10px;
423}
424
425.endslidetext:first-child {
426 top: 1rem;
427}
428
429.endslidetext:nth-child(2) {
430 top: 11rem;
431}
432
433.endslidetext:nth-child(3) {
434 top: 17rem;
435}
436
437@media (min-resolution: 1.3dppx) {
438 .endslidetext:first-child {
439 top: .5rem;
440 }
441 .endslidetext:nth-child(2) {
442 top: 9rem;
443 }
444
445 .endslidetext:nth-child(3) {
446 top: 14rem;
447 }
448}