add a first version of the FOSDEM 2017 talk

[slides.git] / fosdem2017 / slides.css

diff --git a/fosdem2017/slides.css b/fosdem2017/slides.css
new file mode 100644 (file)
index 0000000..b3932db
--- /dev/null
+++ b/fosdem2017/slides.css
@@ -0,0 +1,334 @@
+/**************************
+ * styles for talk slides *
+ *    by Robert Kaiser    *
+ *    <kairo@kairo.at>    *
+ *   (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-64x40.png") no-repeat;
+}
+
+#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: 200px;
+  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: #fff;
+  background-image: radial-gradient(center 45px, ellipse farthest-corner, #FFFFEE 0, #fff 100%);
+  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;
+}
+
+.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 *****/
+