make sure the gif has crispy pixels

Makefile

@@ -2,8 +2,8 @@ FONTS  = $(shell find fonts -type f)
 CSS    = style.css where.css
 PAGES  = index.html where.html pubkey.txt
 MEDIA  = $(patsubst %,media/%, \
-    mlem.gif mlem_static.png niss_uwu_bg_dim.png niss_uwu_bg.png \
+    bg.png bg_2x.png bg_dim.png bg_2x_dim.png \
-    cybre.png donphan.png types.png \
+    mlem.gif mlem_static.png cybre.png donphan.png types.png \
     niss-nisse.mp3 niss-nisse.ogg \
   ) \
   $(wildcard media/*.svg)

index.html

@@ -35,19 +35,19 @@
   <nav id=links>
     <ul>
       <li>
-        <a href=//gallery.niss.website>
+        <a href=https://gallery.niss.website>
           <img class=icon src=media/art.svg>
           art
         </a>
 
       <li>
-        <a href=//git.rhiannon.website/rhi>
+        <a href=https://git.rhiannon.website/rhi>
           <img class=icon src=media/code.svg>
           code
         </a>
 
       <li>
-        <a href=//lang.niss.website>
+        <a href=https://lang.niss.website>
           <img class=icon src=media/speech.svg>
           conlangs
         </a>
@@ -88,22 +88,27 @@
   </section>
 </main>
 
+
 <script>
-window.addEventListener('DOMContentLoaded', () => {
+window.addEventListener('DOMContentLoaded', function() {
   let link = document.getElementById('soundlink');
   let miku = document.getElementById('miku');
-  if (typeof miku.play == 'function') {
+
-    function playMiku(e) {
+  function play(e) {
-      miku.play();
     e.preventDefault();
+    miku.play();
   }
 
-    link.href = '#';
+  // attempt to ensure at least one of the sources is recognised
-    link.addEventListener('click', playMiku);
+  // (and that <audio> is supported)
+  if (!isNaN(miku.duration)) {
+    link.href = '#listen';
+    link.addEventListener('click', play);
   }
 });
 </script>
 
+
 <!--
   - mutant standard emoji by @Dzuque: 👉 https://mutant.tech 👈
     (licensed cc-by-nc-sa 4.0)

style.css

@@ -11,7 +11,9 @@ body {
         hsl(195deg, 100%, 67%),
         hsl(155deg, 70%,  62%)
       );
-  --bg-image: url(media/niss_uwu_bg.png);
+  --bg-image:
+    image-set(url(media/bg.png)    1x,
+              url(media/bg_2x.png) 2x);
   --size: 1.75rem;
   --weight: 600;
 
@@ -82,6 +84,12 @@ b {
 #mlem picture {
   filter: drop-shadow(0 0 30px var(--glow-col));
 }
+#mlem img {
+  /* firefox doesn't support "pixelated" but does treat "crisp-edges"
+   * to mean that */
+  image-rendering: crisp-edges;
+  image-rendering: pixelated;
+}
 
 header {
   margin: 0;
@@ -233,7 +241,9 @@ h1, h2 { --around-image: url(media/sparkles.svg); }
           hsl(195deg, 60%, 44%),
           hsl(155deg, 60%, 55%)
         );
-    --bg-image: url(media/niss_uwu_bg_dim.png);
+    --bg-image:
+      image-set(url(media/bg_dim.png)    1x,
+                url(media/bg_2x_dim.png) 2x);
   }
 
   main {