From 040692b421bbbd2ed1ad1f5527f9649b824d5266 Mon Sep 17 00:00:00 2001
From: Robert Kaiser <kairo@kairo.at>
Date: Mon, 30 Apr 2018 16:36:49 +0200
Subject: [PATCH] Some display adjustments, make keys actually work in modern
 browsers

---
 linuxwochen2018/index.html | 21 +++++++++++----------
 linuxwochen2018/slides.css | 13 ++++++++-----
 linuxwochen2018/slides.js  | 30 ++++++++++++++++++------------
 3 files changed, 37 insertions(+), 27 deletions(-)

diff --git a/linuxwochen2018/index.html b/linuxwochen2018/index.html
index dfea7a8..3384c53 100755
--- a/linuxwochen2018/index.html
+++ b/linuxwochen2018/index.html
@@ -86,7 +86,7 @@
 
 <div class="simplebox">
 <img src="vrheadset-boy.png" class="slidepic"
- alt="A-Frame - aframe-io">
+ alt="Boy with VR headset">
 <ul>
   <li>WebXR - <mark>Virtual &amp; Augmented Reality</mark> (WebVR &amp; AR)</li>
   <li><a href="https://research.mozilla.org/mixed-reality/">research.mozilla.org/mixed-reality</a></li>
@@ -107,13 +107,13 @@
 Example:
 <pre>
 &lt;<mark>a-scene</mark>&gt;
-  &lt;a-sphere position="0 1.25 -1" radius="1.25" color="#EF2D5E"&gt;&lt;/a-sphere&gt;
-  &lt;<mark>a-cube</mark> position="-1 0.5 1" rotation="0 0 0" width="1" height="1" depth="1" color="#4CC3D9"&gt;
-    &lt;<mark>a-animation</mark> attribute="rotation" repeat="indefinite" to="0 360 0"&gt;&lt;/a-animation&gt;
+  &lt;a-sphere <small>position="0 1.25 -1" radius="1.25" color="#EF2D5E"</small>&gt;&lt;/a-sphere&gt;
+  &lt;<mark>a-cube</mark> <small>position="-1 0.5 1" rotation="0 0 0" …</small>&gt;
+    &lt;<mark>a-animation</mark> <small>attribute="rotation" … to="0 360 0"</small>&gt;&lt;/a-animation&gt;
   &lt;/a-cube&gt;
-  &lt;a-cylinder position="1 0.75 1" radius="0.5" height="1.5" color="#FFC65D"&gt;&lt;/a-cylinder&gt;
-  &lt;a-plane rotation="-90 0 0" width="4" height="4" color="#7BC8A4"&gt;&lt;/a-plane&gt;
-  &lt;a-sky color="#ECECEC"&gt;&lt;/a-sky&gt;
+  &lt;a-cylinder <small>position="1 0.75 1" …</small>&gt;&lt;/a-cylinder&gt;
+  &lt;a-plane <small>…</small>&gt;&lt;/a-plane&gt;
+  &lt;a-sky <small>color="#ECECEC"</small>&gt;&lt;/a-sky&gt;
 &lt;/a-scene&gt;
 </pre>
 <p><a href="https://codepen.io/mozvr/pen/jqERjQ">edit/view</a>
@@ -123,7 +123,7 @@ Example:
 </article>
 
 <article id="codecs" data-title="Open Media Codecs">
-<h1><span>Open Media Codecs - Daala &amp; AV1</span></h1>
+<h1><span>Open Media Codecs</span></h1>
 
 <div class="simplebox">
 <img src="av1-comingsoon.png" class="slidepic" alt="AV1 - Coming Soon">
@@ -132,8 +132,9 @@ Example:
   <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>
+  <li><a href="https://aomedia.org/the-alliance-for-open-media-kickstarts-video-innovation-era-with-av1-release/">Released</a>:
+    AV1 bitstream frozen since March/April 2018</li>
+  <li>Next: Opimized de-/encoders, hardware support, ...</li>
 </ul>
 <p class="ensurepicinbox"></p>
 </div>
diff --git a/linuxwochen2018/slides.css b/linuxwochen2018/slides.css
index af56611..caadf1d 100644
--- a/linuxwochen2018/slides.css
+++ b/linuxwochen2018/slides.css
@@ -358,7 +358,7 @@ pre { margin: 0; }
 
 /***** small stuff *****/
 
-.small,
+small,
 .small {
   font-size: 0.75em;
 }
@@ -409,7 +409,7 @@ h1.endslidetext {
 
 h2.endslidetext,
 h3.endslidetext {
-  font-size: 2em;
+  font-size: 1.5em;
 }
 
 h2.endslidetext > span,
@@ -427,15 +427,18 @@ h3.endslidetext > span {
 }
 
 .endslidetext:nth-child(3) {
-  top: 21rem;
+  top: 17rem;
 }
 
 @media (min-resolution: 1.3dppx) {
+  .endslidetext:first-child {
+    top: .5rem;
+  }
   .endslidetext:nth-child(2) {
-    top: 6rem;
+    top: 9rem;
   }
 
   .endslidetext:nth-child(3) {
-    top: 11rem;
+    top: 14rem;
   }
 }
diff --git a/linuxwochen2018/slides.js b/linuxwochen2018/slides.js
index 3107289..0064698 100644
--- a/linuxwochen2018/slides.js
+++ b/linuxwochen2018/slides.js
@@ -192,25 +192,31 @@ function timerFired() {
 
   function handleKeyPress(e) {
     e = e || event;
-    switch (e.keyCode) {
+    switch (e.key) {
       // See https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode#Constants_for_keyCode_value
-      case e.DOM_VK_LEFT:
-      case e.DOM_VK_DOWN:
-      case e.DOM_VK_PAGE_DOWN:
-      case e.DOM_VK_H: //8bitdo Zero "X"
+      case "ArrowLeft":
+      case "ArrowDown":
+      case "Left": // non-standard, old browsers
+      case "Down": // non-standard, old browsers
+      case "PageDown":
+      case "H": //8bitdo Zero "X"
+      case "h": //8bitdo Zero "X"
         go("prev"); break;
-      case e.DOM_VK_RIGHT:
-      case e.DOM_VK_UP:
-      case e.DOM_VK_PAGE_UP:
-      case e.DOM_VK_J: //8bitdo Zero "B"
+      case "ArrowRight":
+      case "ArrowUp":
+      case "Right": // non-standard, old browsers
+      case "Up": // non-standard, old browsers
+      case "PageUp":
+      case "J": //8bitdo Zero "B"
+      case "j": //8bitdo Zero "B"
         go("next"); break;
-      case e.DOM_VK_HOME:
+      case "Home":
         go("start"); break;
-      case e.DOM_VK_END:
+      case "End":
         go("toc"); break;
     }
   }
 
   window.onclick = handleClick;
-  window.onkeypress = handleKeyPress;
+  window.onkeydown = handleKeyPress;
 })();
-- 
2.43.0