/************************** * styles for talk slides * * by Robert Kaiser * * * * (for FOSDEM 2013) * **************************/ /***** base style *****/ @font-face { font-family: 'Open Sans'; src: url('template/OpenSans-Regular-webfont.woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Open Sans'; src: url('template/OpenSans-Semibold-webfont.woff'); font-weight: bold; font-style: normal; } @font-face { font-family: 'Open Sans'; src: url('template/OpenSans-Italic-webfont.woff'); font-weight: normal; font-style: italic; } @font-face { font-family: 'Zilla Slab'; src: url('template/ZillaSlab-Regular.woff2'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Zilla Slab'; src: url('template/ZillaSlab-Bold.woff2'); font-weight: bold; font-style: normal; } @font-face { font-family: 'Zilla Slab Highlight'; src: url('template/ZillaSlabHighlight-Regular.woff2'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Zilla Slab Highlight'; src: url('template/ZillaSlabHighlight-Bold.woff2'); font-weight: bold; font-style: normal; } html { overflow: hidden; /* to make translations not paint scrollbars */ background: white; height: 100%; } body { margin: 0px; padding: 0px; border: 0px; font-family: "Open Sans", sans-serif; font-size: 2em; color: black; height: 100%; } ul { padding-left: 1.2em; margin-bottom: 0.5em; } ul:first-child, ul:last-child { margin-top: 0; } #header { height: 44px; position: relative; font-family: "Zilla Slab", monospace; border-bottom: 3px solid black; } #headerlogo { position: absolute; display: block; right: 2px; top: 2px; text-indent: -2000px; font-size: 1px; overflow: hidden; height: 40px; width: 140px; background: url("template/mozilla_logo2017.svg") no-repeat; } #header-text { position: relative; top: 5px; left: 25px; width: 200px; width: -moz-fit-content; width: -webkit-fit-content; width: fit-content; padding: 0 5px; font-size: 20px; font-weight: bold; color: white; background-color: black; } #header-text.neartime { color: #00FFFF; } #header-text.ontime { color: #54FFBD; } #header-text.overtime { color: #FF4F5E; } #subheader-text { color: black; position: relative; top: 3px; left: 25px; width: calc(100% - 50px); padding: 0 5px; font-size: 10px; } #slidenav { position: absolute; right: 200px; top: 15px; font-family: "Zilla Slab", monospace; font-size: 10px; } #slidenav a:link, #slidenav a:visited { color: black; } #slidenav a:hover, #slidenav a:active { color: #959595; } #slidenav .nolink { color: #E7E5E2; } article { position: absolute; width: 100%; /* header is 40px, 7px to have a bit of distance, * 3px height-reducing on the bottom for safety */ top: 47px; height: calc(100% - 50px); overflow: auto; transition-property: transform, opacity; transition-duration: 3s; transition-timing-function: ease; transform-origin: center 5em; opacity: 0; /* transform: translate(-100%, 0); */ /* transform: scale(0.1) rotate(360deg) translate(-200%, 0); */ transform: scale(0.1) translate(-400%, 0); } article[aria-selected="true"] { opacity: 1; transform: scale(1) rotate(0deg) translate(0, 0); } article[aria-selected="true"] ~ article { opacity: 0; /* transform: translate(100%, 0); */ /* transform: scale(0.1) rotate(-360deg) translate(200%, 0); */ transform: scale(0.1) translate(400%, 0); } /***** headers *****/ h1, h2, h3, h4 { margin: 0.5em 0; font-family: "Zilla Slab", monospace; font-weight: bold; color: black; text-align: center; } h1 { font-family: "Zilla Slab Highlight", "Zilla Slab", monospace; margin-top: 0.5em; font-size: 1.7em; } h1 span { font-family: "Zilla Slab", monospace; margin-top: 0.5em; font-size: 1.7em; background-color: black; color: white; padding: 0 10px; } h2 { font-size: 1.3em; } h3 { font-size: 1.1em; } h4 { font-size: 1em; text-align: left; } /***** boxes *****/ .simplebox { padding: 0.5em; } .captionedbox { padding: 0px; } .simplebox, .captionedbox { margin: 1em; background-color: white; /* box-shadow: 0 0 0 1px black inset; */ /* border-bottom: 1px solid black; */ } .captionedbox-content { margin: 0; padding: 0.5em; border: 0px; border-top: 1px solid black; } .captionedbox-caption { margin: 0; padding: 0.5em; font-weight: bold; } .simplebox + .simplebox, .captionedbox + .simplebox, .simplebox + .captionedbox, .captionedbox + .captionedbox { border-top: 1px solid black; } /***** misc formatting *****/ mark { font-family: "Zilla Slab", monospace; font-weight: bold; color: black; background-color: #FFF44F; } .decofont { font-family: "Zilla Slab", monospace; } .border { border: 1px solid black; padding: 0.5em; } .sshot { /* box-shadow: black 1px 1px 3px 2px; */ } .slidepic { float: right; margin-left: .5em; max-height: 20em; max-width: 25%; } .ensurepicinbox { clear: both; font-size: 1px; margin: 0; } .largetext { font-size: 2em; } ul > li { margin: 0.5em 0; } .columns2 { -moz-columns: 2; } ul.nobullets > li { list-style-type: none; } ul.arrows > li { list-style-type: none; } ul.arrows > li:before { content: "\21d2\20"; /* \2192 would be single thin arrow, hex 20 is space */ } .cent { text-align: center; } .topmargin { margin-top: 0.5em; } .akey { text-decoration: underline; } a:link, a:visited { color: #00458B; text-decoration: none; } a:hover, a:active { color: #959595; text-decoration: underline; } mark a:link, mark a:visited { color: #005E5E; } mark a:hover, mark a:active { color: #005E5E; } pre { margin: 0; } /***** small stuff *****/ small, .small { font-size: 0.75em; } ul.small, .small ul { padding: 0px; border: 0px; margin: 0px 0px 0px 1em; } ul.small > li .small ul > li { margin: 0px; padding: 0px; border: 0px; } /***** specific slides *****/ /* start slide */ .ccinline { border-width: 0; vertical-align: bottom; height: 1.75em; } /* end slide */ .endslidecontainer { position: relative; } .endslidepic { width: 100%; z-index: 1; } .endslidetext { position: absolute; width: calc(100% - 2rem); z-index: 3; } h1.endslidetext { color: white; font-size: 2.5em; } h2.endslidetext, h3.endslidetext { font-size: 1.5em; } h2.endslidetext > span, h3.endslidetext > span { background-color: white; padding: 0 10px; } .endslidetext:first-child { top: 1rem; } .endslidetext:nth-child(2) { top: 11rem; } .endslidetext:nth-child(3) { top: 17rem; } @media (min-resolution: 1.3dppx) { .endslidetext:first-child { top: .5rem; } .endslidetext:nth-child(2) { top: 9rem; } .endslidetext:nth-child(3) { top: 14rem; } }