From f440410b76c041c1b0c9634d762eed1c8bdecdad Mon Sep 17 00:00:00 2001
From: Rhiannon Morris <rhi@rhiannon.website>
Date: Tue, 25 May 2021 16:03:05 +0200
Subject: [PATCH 1/3] improve non-js audio fallback

---
 index.html | 13 +++++++++++--
 style.css  |  4 ++--
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index 286bd60..21f86a1 100644
--- a/index.html
+++ b/index.html
@@ -67,7 +67,7 @@
     <dl>
       <dt> how to say
       <dd>
-        <a id=soundlink href=#>
+        <a id=soundlink>
           <span class=ipa>nɪs</span>, <span class=ipa>nɪsə</span>
         </a>
         <audio id=miku>
@@ -75,6 +75,9 @@
           <source src=media/niss-nisse.ogg type=audio/ogg>
           (<a href=media/niss-nisse.mp3>listen</a>)
         </audio>
+        <noscript>
+          (<a href=media/niss-nisse.mp3>listen</a>)
+        </noscript>
 
       <dt> prons       <dd title='she for niss, he for nisse'> it or they
       <dt> quantity    <dd> 2
@@ -90,7 +93,13 @@ window.addEventListener('DOMContentLoaded', () => {
   let link = document.getElementById('soundlink');
   let miku = document.getElementById('miku');
   if (typeof miku.play == 'function') {
-    link.addEventListener('click', e => { miku.play(); e.preventDefault(); });
+    function playMiku(e) {
+      miku.play();
+      e.preventDefault();
+    }
+
+    link.href = '#';
+    link.addEventListener('click', playMiku);
   }
 });
 </script>
diff --git a/style.css b/style.css
index 8239be1..8992f09 100644
--- a/style.css
+++ b/style.css
@@ -140,13 +140,13 @@ dd {
   }
 }
 
-a {
+a[href] {
   color: hsl(196deg, 100%, 85%);
   font-weight: 800;
   text-decoration: none;
   transition: color 0.2s ease-in-out;
 }
-a:hover {
+a[href]:hover {
   color: hsl(50deg, 100%, 82%);
 }
 

From 9311ec7173569ec221e2f2f7c7026e5f71a3987a Mon Sep 17 00:00:00 2001
From: Rhiannon Morris <rhi@rhiannon.website>
Date: Tue, 25 May 2021 16:03:15 +0200
Subject: [PATCH 2/3] make audio less quiet

---
 media/niss-nisse.mp3 | 4 ++--
 media/niss-nisse.ogg | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/media/niss-nisse.mp3 b/media/niss-nisse.mp3
index efdc2de..192d588 100644
--- a/media/niss-nisse.mp3
+++ b/media/niss-nisse.mp3
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:fa00e1fe02a08cb0e2f7f54ed1f0ab2d1b82c1845157bc8eab86d27518a2f871
-size 27706
+oid sha256:b68c2b121dbea39dcf4a80946f338241d9d306ee77574a8fad61f47d1493f43f
+size 27890
diff --git a/media/niss-nisse.ogg b/media/niss-nisse.ogg
index 71c7a7d..203496c 100644
--- a/media/niss-nisse.ogg
+++ b/media/niss-nisse.ogg
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:2d4db21fbdb68b5b95872ad486ab57cf0803c8419265eb36612a801b39eed33b
-size 26995
+oid sha256:96b80fce404bfbdb2e2143ea5041c600a853f15dcd60d64cec2fc1553890ef12
+size 29252

From 2996642ee5491f8212b62d37cd3478f43609a0a7 Mon Sep 17 00:00:00 2001
From: Rhiannon Morris <rhi@rhiannon.website>
Date: Tue, 25 May 2021 16:03:27 +0200
Subject: [PATCH 3/3] make links light up on tab too

---
 style.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/style.css b/style.css
index 8992f09..8c2714a 100644
--- a/style.css
+++ b/style.css
@@ -146,7 +146,7 @@ a[href] {
   text-decoration: none;
   transition: color 0.2s ease-in-out;
 }
-a[href]:hover {
+a[href]:where(:hover,:focus) {
   color: hsl(50deg, 100%, 82%);
 }