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;
225 background-color: black;
256 background-color: white;
257 /* box-shadow: 0 0 0 1px black inset; */
258 /* border-bottom: 1px solid black; */
261 .captionedbox-content {
265 border-top: 1px solid black;
268 .captionedbox-caption {
274 .simplebox + .simplebox,
275 .captionedbox + .simplebox,
276 .simplebox + .captionedbox,
277 .captionedbox + .captionedbox {
278 border-top: 1px solid black;
281 /***** misc formatting *****/
284 font-family: "Zilla Slab", monospace;
287 background-color: #FFF44F;
291 font-family: "Zilla Slab", monospace;
295 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; }
359 /***** small stuff *****/
370 margin: 0px 0px 0px 1em;
380 /***** specific slides *****/
385 vertical-align: bottom;
401 width: calc(100% - 2rem);
415 h2.endslidetext > span,
416 h3.endslidetext > span {
417 background-color: white;
421 .endslidetext:first-child {
425 .endslidetext:nth-child(2) {
429 .endslidetext:nth-child(3) {
433 @media (min-resolution: 1.3dppx) {
434 .endslidetext:first-child {
437 .endslidetext:nth-child(2) {
441 .endslidetext:nth-child(3) {