X-Git-Url: https://git-public.kairo.at/?p=slides.git;a=blobdiff_plain;f=fhwn201810%2Fslides.css;fp=fhwn201810%2Fslides.css;h=8f8d05fd82fcf3f9b52fa8d3365ad07089ee5151;hp=0000000000000000000000000000000000000000;hb=48498de81ed84f6ebb27c7631dac3ef67f2735ac;hpb=7c8bf335369c2a6a826c7fb51ac2966e8cbaece6 diff --git a/fhwn201810/slides.css b/fhwn201810/slides.css new file mode 100644 index 0000000..8f8d05f --- /dev/null +++ b/fhwn201810/slides.css @@ -0,0 +1,448 @@ +/************************** + * 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: 2.2em; +} + +h1 span { + font-family: "Zilla Slab", monospace; + 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 { + max-width: 100%; + max-height: 20em; + /* 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; } + +h1 span a:link, h1 span a:visited, +h1 span a:hover, h1 span a:active { color: white; } + +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%; + max-height: initial; + 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; + } +}