--- /dev/null
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" height="31px" width="88px" version="1.1" y="0px" x="0px" viewBox="0 0 88 31">
+ <title>Creative Commons “Attribution-Share Alike” license icon</title>
+ <path d="m2.499 0.352l83.127 0.148c1.161 0 2.198-0.173 2.198 2.333l-0.102 27.552h-87.321v-27.655c0-1.235 0.119-2.378 2.098-2.378z" fill="#AAB2AB"/>
+ <path d="m25.316 14.449c0.003 5.557-4.471 10.065-9.993 10.069-5.522 0.003-10.001-4.5-10.005-10.057v-0.012c-0.003-5.558 4.471-10.066 9.994-10.069 5.522-0.004 10.001 4.5 10.005 10.057-0.001 0.003-0.001 0.007-0.001 0.012zm21.148-11.143c4.349 0 7.875 3.548 7.875 7.925s-3.526 7.926-7.875 7.926c-4.35 0-7.875-3.548-7.875-7.926-0.001-4.377 3.525-7.925 7.875-7.925zm28.632 7.751c0.003 4.314-3.47 7.814-7.757 7.818-4.286 0.003-7.765-3.492-7.769-7.806v-0.012c-0.002-4.314 3.471-7.814 7.758-7.817s7.765 3.492 7.768 7.806v0.011z" fill="#FFF"/>
+ <path d="m23.446 6.252c2.217 2.232 3.326 4.964 3.326 8.197s-1.089 5.936-3.269 8.11c-2.313 2.289-5.046 3.434-8.2 3.434-3.116 0-5.802-1.135-8.057-3.405-2.256-2.271-3.383-4.982-3.383-8.138s1.127-5.889 3.383-8.198c2.198-2.232 4.884-3.348 8.057-3.348 3.212 0 5.926 1.116 8.143 3.348zm-14.707 1.501c-1.875 1.905-2.812 4.138-2.812 6.698 0 2.561 0.928 4.773 2.783 6.64s4.064 2.801 6.627 2.801 4.791-0.942 6.684-2.829c1.797-1.752 2.697-3.955 2.697-6.611 0-2.636-0.914-4.874-2.74-6.712s-4.04-2.757-6.641-2.757-4.801 0.923-6.598 2.77zm4.933 5.572c-0.287-0.628-0.715-0.942-1.287-0.942-1.011 0-1.516 0.685-1.516 2.054 0 1.37 0.505 2.055 1.516 2.055 0.667 0 1.145-0.333 1.431-1.002l1.401 0.751c-0.668 1.194-1.67 1.792-3.006 1.792-1.03 0-1.856-0.317-2.476-0.954-0.621-0.636-0.931-1.512-0.931-2.629 0-1.099 0.32-1.97 0.959-2.616s1.436-0.968 2.39-0.968c1.413 0 2.424 0.56 3.035 1.679l-1.516 0.78zm6.593 0c-0.287-0.628-0.707-0.942-1.261-0.942-1.031 0-1.547 0.685-1.547 2.054 0 1.37 0.516 2.055 1.547 2.055 0.669 0 1.137-0.333 1.404-1.002l1.433 0.751c-0.667 1.194-1.667 1.792-3.001 1.792-1.029 0-1.853-0.317-2.473-0.954-0.619-0.636-0.928-1.512-0.928-2.629 0-1.099 0.314-1.97 0.943-2.616 0.628-0.646 1.428-0.968 2.4-0.968 1.41 0 2.42 0.56 3.029 1.679l-1.546 0.78zm66.088-13.325h-84.706c-0.908 0-1.647 0.744-1.647 1.658v28.967c0 0.207 0.167 0.375 0.372 0.375h87.256c0.205 0 0.372-0.168 0.372-0.375v-28.967c0-0.914-0.739-1.658-1.647-1.658zm-84.706 0.749h84.705c0.498 0 0.903 0.408 0.903 0.909v20.109h-60.541c-2.219 4.038-6.494 6.779-11.401 6.779-4.908 0-9.183-2.738-11.4-6.779h-3.169v-20.109c0-0.501 0.405-0.909 0.903-0.909zm65.63 1.751c-2.355 0-4.349 0.827-5.98 2.481-1.675 1.712-2.512 3.737-2.512 6.077s0.837 4.351 2.512 6.034c1.674 1.683 3.668 2.524 5.98 2.524 2.342 0 4.371-0.849 6.089-2.546 1.616-1.611 2.427-3.616 2.427-6.012s-0.824-4.422-2.471-6.077c-1.645-1.654-3.66-2.481-6.045-2.481zm0.022 1.54c1.93 0 3.569 0.685 4.918 2.054 1.361 1.355 2.043 3.01 2.043 4.964 0 1.968-0.666 3.602-2.001 4.9-1.405 1.397-3.058 2.096-4.96 2.096-1.901 0-3.541-0.691-4.917-2.074-1.376-1.384-2.064-3.024-2.064-4.921s0.695-3.552 2.086-4.964c1.332-1.371 2.965-2.055 4.895-2.055zm-3.791 5.809c0.34-2.153 1.846-3.304 3.733-3.304 2.716 0 4.369 1.982 4.369 4.626 0 2.58-1.76 4.584-4.411 4.584-1.824 0-3.457-1.13-3.755-3.347h2.143c0.063 1.151 0.806 1.556 1.866 1.556 1.209 0 1.994-1.13 1.994-2.857 0-1.812-0.679-2.771-1.951-2.771-0.934 0-1.739 0.341-1.909 1.513l0.623-0.003-1.687 1.697-1.686-1.697 0.671 0.003zm-14.765-0.911c0-0.306-0.246-0.553-0.55-0.553h-3.478c-0.303 0-0.55 0.247-0.55 0.553v3.5h0.971v4.145h2.636v-4.145h0.971v-3.5zm-2.288-3.408c0.656 0 1.189 0.536 1.189 1.197s-0.533 1.197-1.189 1.197c-0.657 0-1.189-0.536-1.189-1.197s0.532-1.197 1.189-1.197zm-0.012-3.03c-2.355 0-4.349 0.827-5.981 2.481-1.675 1.711-2.512 3.737-2.512 6.076s0.837 4.351 2.512 6.034c1.674 1.683 3.668 2.524 5.981 2.524 2.342 0 4.371-0.849 6.088-2.547 1.619-1.611 2.428-3.615 2.428-6.012s-0.823-4.421-2.47-6.076c-1.645-1.654-3.661-2.48-6.046-2.48zm0.022 1.539c1.93 0 3.569 0.685 4.917 2.054 1.363 1.355 2.044 3.01 2.044 4.963 0 1.968-0.666 3.602-2.001 4.9-1.405 1.398-3.058 2.096-4.96 2.096-1.901 0-3.541-0.691-4.917-2.075-1.377-1.383-2.065-3.023-2.065-4.921 0-1.896 0.695-3.551 2.086-4.963 1.334-1.369 2.966-2.054 4.896-2.054z"/>
+ <path d="m69.277 24.171l1.816 4.888h-1.109l-0.367-1.089h-1.816l-0.381 1.089h-1.074l1.836-4.888h1.095zm0.062 2.997l-0.612-1.793h-0.014l-0.633 1.793h1.259zm-6.079 0.682c0.059 0.115 0.137 0.207 0.234 0.277 0.098 0.071 0.211 0.124 0.342 0.158 0.133 0.034 0.268 0.051 0.408 0.051 0.095 0 0.197-0.008 0.306-0.023s0.21-0.047 0.306-0.093c0.094-0.046 0.174-0.108 0.236-0.188 0.064-0.08 0.096-0.181 0.096-0.305 0-0.132-0.042-0.238-0.126-0.321-0.083-0.083-0.194-0.15-0.329-0.206-0.136-0.055-0.29-0.102-0.461-0.143-0.173-0.042-0.348-0.088-0.523-0.138-0.182-0.046-0.358-0.102-0.531-0.167-0.171-0.066-0.325-0.152-0.461-0.258-0.137-0.104-0.246-0.235-0.33-0.393-0.083-0.158-0.125-0.349-0.125-0.572 0-0.252 0.053-0.469 0.16-0.654 0.105-0.184 0.246-0.338 0.418-0.462 0.172-0.123 0.366-0.214 0.584-0.274 0.217-0.059 0.436-0.088 0.652-0.088 0.254 0 0.497 0.028 0.73 0.086 0.232 0.057 0.44 0.149 0.621 0.277 0.182 0.127 0.326 0.291 0.432 0.49 0.107 0.198 0.16 0.439 0.16 0.723h-1.036c-0.009-0.146-0.04-0.268-0.091-0.363-0.053-0.096-0.121-0.172-0.207-0.227s-0.184-0.094-0.295-0.115c-0.11-0.023-0.23-0.035-0.361-0.035-0.086 0-0.172 0.01-0.258 0.027-0.086 0.019-0.163 0.051-0.232 0.096-0.07 0.047-0.129 0.104-0.174 0.172s-0.067 0.155-0.067 0.26c0 0.096 0.019 0.174 0.054 0.232 0.037 0.061 0.109 0.115 0.215 0.165s0.254 0.101 0.441 0.151c0.188 0.049 0.434 0.113 0.736 0.191 0.092 0.018 0.217 0.051 0.377 0.1 0.161 0.047 0.32 0.123 0.479 0.229 0.159 0.105 0.296 0.246 0.412 0.422 0.115 0.176 0.173 0.4 0.173 0.674 0 0.225-0.044 0.432-0.13 0.623-0.086 0.192-0.214 0.357-0.384 0.496-0.171 0.141-0.381 0.248-0.632 0.326-0.252 0.078-0.544 0.116-0.874 0.116-0.268 0-0.527-0.033-0.779-0.1-0.251-0.065-0.474-0.171-0.667-0.312-0.192-0.143-0.346-0.323-0.459-0.543-0.113-0.219-0.168-0.479-0.163-0.78h1.036c-0.001 0.165 0.028 0.304 0.087 0.418zm-17.287-3.679h1.198l1.138 1.931 1.13-1.931h1.19l-1.803 3.012v1.876h-1.07v-1.903l-1.783-2.985zm-1.975 0c0.231 0 0.442 0.021 0.633 0.062s0.354 0.108 0.491 0.201c0.136 0.094 0.241 0.219 0.316 0.373 0.075 0.155 0.112 0.348 0.112 0.575 0 0.247-0.055 0.451-0.167 0.616-0.11 0.164-0.276 0.298-0.493 0.402 0.3 0.088 0.523 0.239 0.672 0.456 0.148 0.218 0.223 0.479 0.223 0.784 0 0.246-0.049 0.46-0.144 0.641-0.095 0.18-0.224 0.327-0.386 0.441-0.161 0.114-0.346 0.199-0.552 0.254-0.207 0.055-0.419 0.082-0.638 0.082h-2.358v-4.888h2.291v0.001zm-0.137 1.976c0.191 0 0.347-0.046 0.47-0.136 0.123-0.092 0.185-0.239 0.185-0.444 0-0.114-0.021-0.208-0.062-0.28s-0.095-0.129-0.164-0.17-0.146-0.07-0.235-0.086c-0.089-0.016-0.181-0.023-0.276-0.023h-1v1.14h1.082zm0.062 2.075c0.105 0 0.205-0.01 0.3-0.03 0.095-0.021 0.18-0.055 0.252-0.104 0.073-0.047 0.13-0.112 0.174-0.194s0.065-0.187 0.065-0.315c0-0.25-0.071-0.43-0.212-0.536-0.141-0.107-0.328-0.161-0.559-0.161h-1.166v1.341h1.146z" fill="#FFF"/>
+</svg>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <meta name="Author" content="KaiRo - Robert Kaiser">
+ <title>Mozilla Emerging Technologies</title>
+ <link rel="stylesheet" type="text/css" href="slides.css">
+ <script type="text/javascript" src="slides.js"></script>
+ <link rel="contents" href="#index" title="Überblick">
+ <link rel="index" id="link-toc" href="#toc" title="Inhalt">
+ <link rel="start" id="link-start" href="#index" title="Start">
+</head>
+<body onload="docLoaded();">
+<header id="header"><div id="header-text">Emerging Tech</div>
+ <div id="subheader-text"></div>
+ <a id="headerlogo" href="#index" title="Startseite">Mozilla</a>
+</header>
+<nav id="slidenav">
+ <a href="#toc" id="nav-toc" accesskey="t">toc</a> ||
+ <a href="#index" id="nav-start" accesskey="s">start</a> ||
+ <a href="#" id="nav-prev" accesskey="p" hidden>< back</a>
+ <span id="nav-prev-nolink" class="nolink">< back</span> |
+ <a href="#" id="nav-next" id="goNext" accesskey="n" hidden>fwd ></a>
+ <span id="nav-next-nolink" class="nolink">fwd ></span>
+</nav>
+
+<article id="toc" data-title="Inhalt">
+<h1><span>Inhalt</span></h1>
+<h2>Mozilla Emerging Technologies</h2>
+
+<div class="captionedbox">
+<p class="captionedbox-caption">The following slides are available in this presentation:</p>
+<div class="captionedbox-content">
+<ul id="toc-list">
+</ul>
+</article>
+
+<article id="index" data-title="Start Page" data-seconds="600">
+<h1><span>Mozilla Emerging Technologies</span></h1>
+<h2>New Technologies for the Open Web</h2>
+
+<div class="simplebox decofont">
+<mark><a href="http://home.kairo.at/">Robert Kaiser</a></mark>,
+"KaiRo" <kairo@kairo.at>
+<br><small>Mozilla Tech Speaker</small>
+</div>
+
+<div class="captionedbox">
+<p class="captionedbox-caption decofont">Slides:
+ <a href="https://slides.kairo.at/linuxwochen2018/">https://slides.kairo.at/linuxwochen2018/</a></p>
+<div class="captionedbox-content small">
+<ul class="small">
+ <li>Created for a
+ <a href="https://cfp.linuxwochen.at/de/LWW18/public/events/741">presentation</a>
+ at <a href="http://www.linuxwochen.at/">Linuxwochen 2018</a> in Wien/Vienna.</li>
+ <li>Written in HTML 5 with CSS 3 and JavaScript.</li>
+ <li>Navigation via links on all slides, via access keys
+ (e.g. "n"/Alt+Shift+N for "next") or back/forward arrow keys</li>
+ <li><a href="#toc">Contents</a></li>
+ <li><a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/"><img
+ alt="Lizenziert unter CC-BY-SA," class="ccinline" src="cc-by-sa.svg"></a>
+ 04/2018 Robert Kaiser -
+ "Mozilla", "Firefox" and their logos are
+ <a href="http://www.mozilla.org/foundation/trademarks/list.html">trademarks
+ of Mozilla Foundation</a>.</li>
+</ul>
+</div>
+</div>
+</article>
+
+<article id="mozet" data-title="Emerging Technologies Group">
+<h1><span>Emerging Technologies Group</span></h1>
+
+<div class="simplebox">
+<ul>
+ <li>R&D organization @ Mozilla, a.k.a. <mark>Mozilla Research</mark></li>
+ <li><a href="https://research.mozilla.org/">research.mozilla.org</a></li>
+ <li><a href="https://www.mozilla.org/en-US/technology/">mozilla.org/technology</a></li>
+ <li>Multiple teams for different technologies</li>
+</ul>
+</div>
+</article>
+
+<article id="webxr" data-title="Mixed Reality">
+<h1><span>Mixed Reality (XR)</span></h1>
+
+<div class="simplebox">
+<img src="vrheadset-boy.png" class="slidepic"
+ alt="A-Frame - aframe-io">
+<ul>
+ <li>WebXR - <mark>Virtual & Augmented Reality</mark> (WebVR & AR)</li>
+ <li><a href="https://research.mozilla.org/mixed-reality/">research.mozilla.org/mixed-reality</a></li>
+ <li><a href="https://webvr.info/">webvr.info</a> - WebVR API, <mark>Open Standard</mark></li>
+ <li>In concert with WebGL, WebAudio and Gamepad APIs</li>
+ <li>Windows: Firefox release, Mac: Nightly, Linux: in development</li>
+</ul>
+<p class="ensurepicinbox"></p>
+</div>
+</article>
+
+<article id="aframe" data-title="A-Frame">
+<h1><span>A-Frame - XR Made Simple</span></h1>
+
+<div class="simplebox">
+<img src="aframe-sticker.png" class="slidepic"
+ alt="A-Frame - aframe-io">
+Example:
+<pre>
+<<mark>a-scene</mark>>
+ <a-sphere position="0 1.25 -1" radius="1.25" color="#EF2D5E"></a-sphere>
+ <<mark>a-cube</mark> position="-1 0.5 1" rotation="0 0 0" width="1" height="1" depth="1" color="#4CC3D9">
+ <<mark>a-animation</mark> attribute="rotation" repeat="indefinite" to="0 360 0"></a-animation>
+ </a-cube>
+ <a-cylinder position="1 0.75 1" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
+ <a-plane rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
+ <a-sky color="#ECECEC"></a-sky>
+</a-scene>
+</pre>
+<p><a href="https://codepen.io/mozvr/pen/jqERjQ">edit/view</a>
+- More at <a href="https://aframe.io/">aframe.io</a>
+<p class="ensurepicinbox"></p>
+</div>
+</article>
+
+<article id="codecs" data-title="Open Media Codecs">
+<h1><span>Open Media Codecs - Daala & AV1</span></h1>
+
+<div class="simplebox">
+<img src="av1-comingsoon.png" class="slidepic" alt="AV1 - Coming Soon">
+<ul>
+ <li><a href="https://www.opus-codec.org/">Opus</a>: <mark>royalty-free, open, universal</mark> audio codec</li>
+ <li>Next target: do the same with video</li>
+ <li>Mozilla/Xiph: Daala + Google: VP9 + Cisco: Thor</li>
+ <li><a href="http://aomedia.org/">Alliance for Open Media (AOMedia)</a> for collaboration</li>
+ <li>AV1 bitstream frozen since April 2018</li>
+ <li>Next: De-/Encoding perf, hardware support, ...</li>
+</ul>
+<p class="ensurepicinbox"></p>
+</div>
+</article>
+
+<article id="speech" data-title="Speech & Learning">
+<h1><span>Speech & Machine Learning</span></h1>
+
+<div class="simplebox">
+<img src="speechlearning.png" class="slidepic" alt="Speech Recording + Learning">
+<ul>
+ <li><a href="https://voice.mozilla.org/">Common Voice</a>: Open repository for <mark>voice recordings</mark></li>
+ <li>Machine learning to train speech-to-text (STT) systems</li>
+ <li>DeepSpeech / Pipsqueak: Mozilla STT, open source</li>
+ <li><mark>Offline speech recognition</mark> engine, for security + privacy, can run on RPi3</li>
+ <li><a href="https://blog.mozilla.org/blog/2017/11/29/announcing-the-initial-release-of-mozillas-open-source-speech-recognition-model-and-voice-dataset/">Only
+ 6.5% error rate on first released model</a></li>
+ <li><a href="https://research.mozilla.org/machine-learning/">research.mozilla.org/machine-learning</a></li>
+</ul>
+<p class="ensurepicinbox"></p>
+</div>
+</article>
+
+<article id="rust" data-title="Rust">
+<h1><span>Programmiersprache - Rust</span></h1>
+
+<div class="simplebox">
+</div>
+</article>
+
+<article id="servo" data-title="Servo Web-Engine">
+<h1><span>Web-Engine - Servo</span></h1>
+
+<div class="simplebox">
+</div>
+</article>
+
+<article id="wasm" data-title="WebAssembly">
+<h1><span>WebAssembly</span></h1>
+
+<div class="simplebox">
+</div>
+</article>
+
+<article id="iot" data-title="Web of Things">
+<h1><span>IoT - Things Gateway</span></h1>
+
+<div class="simplebox">
+</div>
+</article>
+
+<article id="end" data-title="Ende">
+
+<div class="simplebox">
+<h1 class="cent" style="position: relative; z-index: 3; color: #FFFFFF; font-size: 2.5em;">Fragen?</h1>
+<img src="mister_tricorder.jpg" class="sshot"
+ style="width: 100%; margin-top: -4.5em; position: relative; z-index: 1;"
+ alt="Data & Mister Tricorder">
+</div>
+</article>
+
+</body>
+</html>
--- /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: 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; }
+
+.ccinline {
+ border-width: 0;
+ vertical-align: bottom;
+ height: 1.75em;
+}
+
+/***** 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 *****/
+
--- /dev/null
+/******************************
+ * JavaScript for talk slides *
+ * by Robert Kaiser *
+ * <kairo@kairo.at> *
+ * (for FOSDEM 2011) *
+ ******************************/
+
+var slides = {};
+var articleNodes;
+var currentSlide;
+var currentIdx;
+var defaultIdx = 1; // set to slide index to show by default
+var firstIdx = 2; // set no value if to use first available
+var lastIdx; // set no value if to use last available
+
+var pageTitle, headerText, subHeaderText;
+var navPrev, navNext, navPrevNolink, navNextNolink;
+
+// Slide timer - color variation of headerText
+// Time per slide is total presentation length divided by number of slides
+// except start and end slide.
+var presLengthSeconds = 30 * 60;
+var slideStart, timerMSec;
+
+// Called when the document has been loaded.
+function docLoaded() {
+ pageTitle = document.getElementsByTagName("title")[0];
+ headerText = document.getElementById("header-text");
+ subHeaderText = document.getElementById("subheader-text");
+ navPrev = document.getElementById("nav-prev");
+ navNext = document.getElementById("nav-next");
+ navPrevNolink = document.getElementById("nav-prev-nolink");
+ navNextNolink = document.getElementById("nav-next-nolink");
+ articleNodes = document.getElementsByTagName("article");
+
+ if (!firstIdx)
+ firstIdx = 0;
+ if (!lastIdx)
+ lastIdx = articleNodes.length - 1;
+ var slideSeconds = presLengthSeconds / (lastIdx - firstIdx);
+ timerMSec = 1000 * (slideSeconds / 3);
+
+ // Get a list of all slides (articles).
+ subHeaderText.textContent = articleNodes.length + " slides...";
+ for (var i = 0; i < articleNodes.length; ++i) {
+ subHeaderText.textContent = "Indexing slide " + i + " / " + articleNodes.length;
+ if (!articleNodes[i].id)
+ articleNodes[i].id = "slide_" + i;
+
+ slides[articleNodes[i].id] = {
+ "idx": i,
+ "name": articleNodes[i].id,
+ "title": articleNodes[i].dataset.title ? articleNodes[i].dataset.title : articleNodes[i].id,
+ "obj": articleNodes[i],
+ "timeSeconds": articleNodes[i].dataset.seconds ? articleNodes[i].dataset.seconds : slideSeconds,
+ };
+
+ if (location.hash.length &&
+ (location.hash == "#" + articleNodes[i].id || location.hash == "#" + i)) {
+ articleNodes[i].setAttribute("aria-selected", "true");
+ currentSlide = slides[articleNodes[i].id];
+ currentIdx = i;
+ }
+ }
+
+ if (!currentSlide) {
+ currentIdx = defaultIdx;
+ currentSlide = slides[articleNodes[currentIdx].id];
+ currentSlide.obj.setAttribute("aria-selected", "true");
+ location.hash = "#" + currentSlide.name;
+ }
+ updateDisplay();
+}
+
+// Called when the hash part of the location changes.
+function locationHashChanged() {
+ if (location.hash.length > 1) {
+ var hashtag = location.hash.substring(1);
+ // If not a number, treat as ID
+ if (isNaN(hashtag) && slides[hashtag]) {
+ currentSlide.obj.removeAttribute("aria-selected");
+ currentSlide = slides[hashtag];
+ currentIdx = currentSlide.idx;
+ currentSlide.obj.setAttribute("aria-selected", "true");
+ updateDisplay();
+ }
+ else if (articleNodes[hashtag]) {
+ currentSlide.obj.removeAttribute("aria-selected");
+ currentIdx = hashtag;
+ currentSlide = slides[articleNodes[currentIdx].id];
+ currentSlide.obj.setAttribute("aria-selected", "true");
+ updateDisplay();
+ }
+ }
+}
+window.onhashchange = locationHashChanged;
+
+// Update the display after we updated what slide is shown.
+function updateDisplay() {
+ if (currentIdx >= firstIdx && currentIdx <= lastIdx &&
+ currentSlide.name != "toc")
+ subHeaderText.textContent = (currentIdx - firstIdx + 1) + "/" +
+ (lastIdx - firstIdx + 1) + " - " +
+ currentSlide.title;
+ else
+ subHeaderText.textContent = currentSlide.title;
+ pageTitle.textContent = headerText.textContent + ": " + currentSlide.title;
+ if (currentIdx > firstIdx && currentSlide.name != "toc") {
+ navPrev.hidden = false;
+ navPrev.href = "#" + articleNodes[currentIdx - 1].id;
+ navPrevNolink.hidden = true;
+ }
+ else {
+ navPrev.hidden = true;
+ navPrevNolink.hidden = false;
+ }
+ if (currentIdx < lastIdx && currentSlide.name != "toc") {
+ navNext.hidden = false;
+ navNext.href = "#" + articleNodes[currentIdx + 1].id;
+ navNextNolink.hidden = true;
+ }
+ else {
+ navNext.hidden = true;
+ navNextNolink.hidden = false;
+ }
+ headerText.className = "";
+ slideStart = new Date();
+ timerMSec = 1000 * (currentSlide.timeSeconds / 3);
+ if (currentSlide.name == "toc")
+ createTOC();
+ else
+ setTimeout(timerFired, timerMSec);
+}
+
+// Create TOC list.
+function createTOC() {
+ var list = document.getElementById("toc-list");
+ if (!list.getElementsByTagName("li").length) {
+ for (var slide in slides) {
+ if (slide != "toc") {
+ var item = document.createElement("li");
+ var link = document.createElement("a");
+ var slideHeaders = slides[slide].obj.getElementsByTagName("h1");
+ if (slideHeaders.length)
+ link.textContent = slideHeaders[0].textContent;
+ else
+ link.textContent = slides[slide].title;
+ link.href = "#" + slides[slide].name;
+ item.appendChild(link);
+ list.appendChild(item);
+ }
+ }
+ }
+}
+
+// Do timed color variation on slides.
+function timerFired() {
+ var slideCurrent = new Date();
+ var secondsDiff = Math.round((slideCurrent.getTime() - slideStart.getTime()) / 1000);
+ if (secondsDiff >= currentSlide.timeSeconds) {
+ headerText.className = "overtime";
+ }
+ else if (secondsDiff >= Math.round(2 * currentSlide.timeSeconds / 3)) {
+ headerText.className = "ontime";
+ setTimeout(timerFired, timerMSec);
+ }
+ else if (secondsDiff >= Math.round(currentSlide.timeSeconds / 3)) {
+ headerText.className = "neartime";
+ setTimeout(timerFired, timerMSec);
+ }
+ else {
+ // We should never come here, but if we do, go into a 100ms loop until we get over the upcoming step.
+ setTimeout(timerFired, 100);
+ }
+}
+
+// Keyboard/click nav functionality, mostly inherited from FOSDEM 2007.
+(function() {
+ function go(where) {
+ where = where || "next";
+ var navElem = document.getElementById("nav-" + where);
+ if (!navElem.hidden)
+ window.location.href = navElem.href;
+ }
+
+ function handleClick(e) {
+ e = e || event;
+ var target = (window.event) ? e.srcElement : e.target;
+ if (e.which == 1 && target.nodeName != "A" && target.nodeName != "VIDEO")
+ go("next");
+ }
+
+ function handleKeyPress(e) {
+ e = e || event;
+ switch (e.keyCode) {
+ case e.DOM_VK_LEFT:
+ go("prev"); break;
+ case e.DOM_VK_RIGHT:
+ go("next"); break;
+ }
+ }
+
+ window.onclick = handleClick;
+ window.onkeypress = handleKeyPress;
+})();
--- /dev/null
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 360 102.8" style="enable-background:new 0 0 360 102.8;" xml:space="preserve">
+<style type="text/css">
+ .st0{fill:#FFFFFF;}
+</style>
+<g>
+ <rect y="-0.2" width="360" height="102.9"/>
+ <path class="st0" d="M343.8,73.7c-0.7,0.2-1.3,0.3-1.9,0.3c-2.1,0-3.1-0.9-3.1-3.5V51c0-10.3-8.2-15.3-17.9-15.3
+ c-7.4,0-11.4,0.9-19.3,4.1L300,50.2l10.3,1.1l1.5-5.1c2.1-1.1,4.2-1.3,6.9-1.3c7.3,0,7.4,5.5,7.4,10.1v1.5
+ c-2.3-0.3-4.9-0.4-7.4-0.4c-10.3,0-21,2.6-21,13.7c0,9.4,7.4,12.9,13.9,12.9c7.3,0,11.9-4.4,14.5-9c0.6,5.5,3.9,9,9.9,9
+ c2.8,0,5.7-0.8,8.1-2.1L343.8,73.7z M316.2,73.4c-3.9,0-5.3-2.3-5.3-5.2c0-4.9,4-6.2,8.6-6.2c2.1,0,4.4,0.3,6.5,0.6
+ C325.7,70.1,320.8,73.4,316.2,73.4z M298.9,12.9l-19.5,68.7h-12.7l19.5-68.7H298.9z M272.7,12.9l-19.5,68.7h-12.7L260,12.9H272.7z
+ M218.7,36.6h13.5v16.2h-13.5V36.6z M218.7,65.5h13.5v16.2h-13.5V65.5z M199,64.9l10.2,1l-2.8,15.8h-39.3l-1.3-6.8l24.8-28.5h-14.1
+ l-2,7l-9.3-1l1.6-15.8h39.5l1,6.8l-25,28.5h14.6L199,64.9z M134.5,35.7c-16.2,0-24.2,10.9-24.2,24.1c0,14.4,9.6,22.9,23.5,22.9
+ c14.4,0,24.8-9.1,24.8-23.5C158.6,46.6,150.7,35.7,134.5,35.7z M134.2,72.7c-7,0-10.6-6-10.6-13.8c0-8.5,4.1-13.4,10.7-13.4
+ c6.1,0,11,4.1,11,13.2C145.3,67.4,140.9,72.7,134.2,72.7z M98.7,71.8h6v9.8H85.9V56.3c0-7.8-2.6-10.8-7.7-10.8
+ c-6.2,0-8.7,4.4-8.7,10.7v15.7h6v9.8H56.6V56.3c0-7.8-2.6-10.8-7.7-10.8c-6.2,0-8.7,4.4-8.7,10.7v15.7h8.6v9.8H21.4v-9.8h6V46.4h-6
+ v-9.8h18.9v6.8c2.7-4.8,7.4-7.7,13.7-7.7c6.5,0,12.5,3.1,14.7,9.7c2.5-6,7.6-9.7,14.7-9.7c8.1,0,15.5,4.9,15.5,15.6V71.8z"/>
+</g>
+</svg>