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] 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%);
 }