1 /**************************
2 * styles for talk slides *
6 **************************/
9 /***** base style *****/
12 font-family: 'Open Sans';
13 src: url('template/OpenSans-Regular-webfont.woff');
19 font-family: 'Open Sans';
20 src: url('template/OpenSans-Semibold-webfont.woff');
26 font-family: 'Open Sans';
27 src: url('template/OpenSans-Italic-webfont.woff');
33 font-family: 'Zilla Slab';
34 src: url('template/ZillaSlab-Regular.woff2');
40 font-family: 'Zilla Slab';
41 src: url('template/ZillaSlab-Bold.woff2');
47 font-family: 'Zilla Slab Highlight';
48 src: url('template/ZillaSlabHighlight-Regular.woff2');
54 font-family: 'Zilla Slab Highlight';
55 src: url('template/ZillaSlabHighlight-Bold.woff2');
61 overflow: hidden; /* to make translations not paint scrollbars */
70 font-family: "Open Sans", sans-serif;
89 font-family: "Zilla Slab", monospace;
90 border-bottom: 3px solid black;
103 background: url("template/mozilla_logo2017.svg") no-repeat;
111 width: -moz-fit-content;
112 width: -webkit-fit-content;
118 background-color: black;
121 #header-text.neartime {
125 #header-text.ontime {
129 #header-text.overtime {
138 width: calc(100% - 50px);
147 font-family: "Zilla Slab", monospace;
152 #slidenav a:visited {
168 /* header is 40px, 7px to have a bit of distance,
169 * 3px height-reducing on the bottom for safety */
171 height: calc(100% - 50px);
174 transition-property: transform, opacity;
175 transition-duration: 3s;
176 transition-timing-function: ease;
177 transform-origin: center 5em;
181 transform: translate(-100%, 0);
184 transform: scale(0.1) rotate(360deg) translate(-200%, 0);
186 transform: scale(0.1) translate(-400%, 0);
189 article[aria-selected="true"] {
191 transform: scale(1) rotate(0deg) translate(0, 0);
194 article[aria-selected="true"] ~ article {
197 transform: translate(100%, 0);
200 transform: scale(0.1) rotate(-360deg) translate(200%, 0);
202 transform: scale(0.1) translate(400%, 0);
205 /***** headers *****/
209 font-family: "Zilla Slab", monospace;
216 font-family: "Zilla Slab Highlight", "Zilla Slab", monospace;
222 font-family: "Zilla Slab", monospace;
223 background-color: black;
254 background-color: white;
255 /* box-shadow: 0 0 0 1px black inset; */
256 /* border-bottom: 1px solid black; */
259 .captionedbox-content {
263 border-top: 1px solid black;
266 .captionedbox-caption {
272 .simplebox + .simplebox,
273 .captionedbox + .simplebox,
274 .simplebox + .captionedbox,
275 .captionedbox + .captionedbox {
276 border-top: 1px solid black;
279 /***** misc formatting *****/
282 font-family: "Zilla Slab", monospace;
285 background-color: #FFF44F;
289 font-family: "Zilla Slab", monospace;
293 border: 1px solid black;
300 /* box-shadow: black 1px 1px 3px 2px; */
329 list-style-type: none;
333 list-style-type: none;
335 ul.arrows > li:before {
336 content: "\21d2\20"; /* \2192 would be single thin arrow, hex 20 is space */
348 text-decoration: underline;
351 a:link, a:visited { color: #00458B; text-decoration: none; }
352 a:hover, a:active { color: #959595; text-decoration: underline; }
354 mark a:link, mark a:visited { color: #005E5E; }
355 mark a:hover, mark a:active { color: #005E5E; }
357 h1 span a:link, h1 span a:visited,
358 h1 span a:hover, h1 span a:active { color: white; }
362 /***** small stuff *****/
373 margin: 0px 0px 0px 1em;
383 /***** specific slides *****/
388 vertical-align: bottom;
405 width: calc(100% - 2rem);
419 h2.endslidetext > span,
420 h3.endslidetext > span {
421 background-color: white;
425 .endslidetext:first-child {
429 .endslidetext:nth-child(2) {
433 .endslidetext:nth-child(3) {
437 @media (min-resolution: 1.3dppx) {
438 .endslidetext:first-child {
441 .endslidetext:nth-child(2) {
445 .endslidetext:nth-child(3) {