/************************** * styles for talk slides * * by Robert Kaiser * * * * (for FOSDEM 2017) * **************************/ /***** base style *****/ @font-face { font-family: 'Liberation Sans'; src: url('template/LiberationSans-Regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Liberation Sans'; src: url('template/LiberationSans-Italic-webfont.woff') format('woff'); font-weight: normal; font-style: italic; } @font-face { font-family: 'Liberation Sans'; src: url('template/LiberationSans-Bold-webfont.woff') format('woff'); font-weight: bold; font-style: normal; } @font-face { font-family: 'Liberation Sans'; src: url('template/LiberationSans-BoldItalic-webfont.woff') format('woff'); font-weight: bold; font-style: italic; } html { overflow: hidden; /* to make translations not paint scrollbars */ background: #FFFFEE; height: 100%; } body { margin: 0px; padding: 0px; border: 0px; font-family: "Liberation Sans", sans-serif; font-size: 2em; color: #336699; background: url("template/page-background-top.png") top left repeat-x; height: 100%; } ul { padding-left: 1.2em; margin-bottom: 0.5em; } ul:first-child, ul:last-child { margin-top: 0; } #header { height: 40px; position: relative; border-top: 1px solid white; } #headerlogo { position: absolute; display: block; right: 25px; top: 3px; text-indent: -2000px; font-size: 1px; overflow: hidden; height: 40px; width: 64px; background: url("template/KaiRoLogo-256x160.png") no-repeat; background-size: 64px 40px; } #header-text { position: relative; top: 5px; left: 25px; width: calc(100% - 50px); font-size: 20px; font-weight: bold; color: #336699; } #header-text.neartime { color: #6080FF; } #header-text.ontime { color: #40AA40; } #header-text.overtime { color: #FF8080; } #subheader-text { color: #336699; position: relative; top: 3px; left: 25px; width: calc(100% - 50px); font-size: 10px; } #slidenav { position: absolute; right: 120px; top: 15px; font-size: 10px; } #slidenav a:link, #slidenav a:visited { color: #669999; } #slidenav a:hover, #slidenav a:active { color: #88BBBB; } #slidenav .nolink { color: #CCCCCC; } 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-weight: bold; color: #FFFFEE; background: #003366; text-align: center; } h1 { margin-top: 0; font-size: 1.7em; } 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: #FFFFFF; box-shadow: #AAAA80 3px 3px 2px 0; } .captionedbox-content { margin: 0; padding: 0.5em; border: 0px; border-top: 1px solid #89AACC; } .captionedbox-caption { margin: 0; padding: 0.5em; font-weight: bold; } /***** misc formatting *****/ mark { font-weight: bold; color: #FF6600; background-color: transparent; } s { text-decoration: line-through; color: #808080; } .border { border: 1px solid #336699; padding: 0.5em; } .sshot { box-shadow: #6d7581 3px 3px 2px 0; } .slidepic { float: right; margin-left: .5em; max-width: 33%; } .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: #669999; text-decoration: none; } a:hover, a:active { color: #88BBBB; text-decoration: underline; } mark a:link, mark a:visited { color: #FF6600; } mark a:hover, mark a:active { color: #FF6600; } 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 *****/ .endslidecontainer { position: relative; } .endslidepic { width: 100%; z-index: 1; } .endslidetext { position: absolute; width: calc(100% - 2rem); z-index: 3; } h1.endslidetext { font-size: 2.5em; } h2.endslidetext, h3.endslidetext { font-size: 2em; } .endslidetext:first-child { top: 1rem; } .endslidetext:nth-child(2) { top: 20rem; } .endslidetext:nth-child(3) { top: 30rem; } @media (min-resolution: 1.3dppx) { .endslidetext:nth-child(2) { top: 15rem; } .endslidetext:nth-child(3) { top: 25rem; } }