--- /dev/null
+/**************************
+ * styles for talk slides *
+ * by Robert Kaiser *
+ * <kairo@kairo.at> *
+ * (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;
+ }
+}
projects / slides.git / blobdiff