AAAAA

88x31/index.html

@@ -60,7 +60,7 @@
             <p class="tagline">The little badges from around my site, all in one spot</p>
         </header>
 
-        <section class="button-page">
+        <div class="button-page">
             <aside class="button-wall" aria-label="88x31 buttons">
                 <!-- coding / web -->
                 <img src="/assets/88x31/doughmination.gif" alt="Doughmination" loading="lazy">
@@ -101,7 +101,7 @@
                 <img src="/assets/88x31/bluepantsu.gif" alt="Blue pantsu" loading="lazy">
                 <img src="/assets/88x31/underwearisforloser.gif" alt="Underwear is for losers" loading="lazy">
             </aside>
-        </section>
+        </div>
     </div>
 
     <script src="/js/cat.js" data-cat="/assets/oneko/classics/classic.png"></script>

dev-info/index.html

@@ -66,7 +66,7 @@
 
         <details class="waka-section tech-stack" id="tech-stack">
             <summary class="section-title">Tech Stack</summary>
-            <section class="dev-info" aria-label="Tech stack">
+            <div class="dev-info" role="region" aria-label="Tech stack">
             <!-- Languages -->
             <span class="tech-icon red" style="--si:url('https://cdn.simpleicons.org/python')" role="img" aria-label="Python"></span>
             <span class="tech-icon mauve" style="--si:url('https://cdn.simpleicons.org/openjdk')" role="img" aria-label="Java"></span>
@@ -133,7 +133,7 @@
             <!-- Hardware / IoT -->
             <span class="tech-icon pink" style="--si:url('https://cdn.simpleicons.org/arduino')" role="img" aria-label="Arduino"></span>
             <span class="tech-icon red" style="--si:url('https://cdn.simpleicons.org/raspberrypi')" role="img" aria-label="Raspberry Pi"></span>
-            </section>
+            </div>
         </details>
 
         <details class="waka-section hardware" id="waka-section-hardware">
@@ -238,11 +238,11 @@
 
         <div id="waka-content" hidden>
 
-            <section class="waka-section waka-total" id="waka-total">
+            <div class="waka-section waka-total" id="waka-total">
                 <div class="waka-total-num" id="waka-total-val">—</div>
                 <div class="waka-total-sub" id="waka-total-sub">total coding time</div>
                 <div class="waka-week" id="waka-week"></div>
-            </section>
+            </div>
 
             <details class="waka-section" id="waka-section-languages" hidden>
                 <summary class="section-title">Languages</summary>

js/music.js

@@ -156,6 +156,9 @@ console.log(`
   const lockBtn = $("#ly-lock");
   const recentBox = $("#recent");
   const topBox = $("#top");
+  // transparent 1x1 — keeps <img> valid (src required) while showing the ♪
+  // placeholder via CSS (.mnp-art:not(.has-art)) when there's no real art
+  const BLANK_ART = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
 
   // ---- state --------------------------------------------------------------
   // track: { song, artist, album, art, trackId, url, start, end, duration, live }
@@ -180,9 +183,11 @@ console.log(`
       npTitle.textContent = "—";
       npArtist.textContent = "";
       npAlbum.textContent = "";
-      npArt.removeAttribute("src");
+      npArt.src = BLANK_ART;
       npArt.classList.remove("has-art");
       npLink.removeAttribute("href");
+      npLink.removeAttribute("target");
+      npLink.removeAttribute("rel");
       progress.hidden = true;
       resetAccent();
       return;
@@ -194,8 +199,9 @@ console.log(`
     npArtist.textContent = track.artist || "";
     npAlbum.textContent = track.album || "";
     if (track.art) { npArt.src = track.art; npArt.classList.add("has-art"); }
-    else { npArt.removeAttribute("src"); npArt.classList.remove("has-art"); }
-    if (track.url) npLink.href = track.url; else npLink.removeAttribute("href");
+    else { npArt.src = BLANK_ART; npArt.classList.remove("has-art"); }
+    if (track.url) { npLink.href = track.url; npLink.target = "_blank"; npLink.rel = "noopener"; }
+    else { npLink.removeAttribute("href"); npLink.removeAttribute("target"); npLink.removeAttribute("rel"); }
     // progress bar only makes sense for a live track with real timestamps
     progress.hidden = !(track.live && track.start && track.end);
     if (!progress.hidden) barDur.textContent = mmss(track.duration);

music/index.html

@@ -46,8 +46,8 @@
         </header>
 
         <!-- now playing -->
-        <a class="mnp" id="np-link" target="_blank" rel="noopener">
-            <img class="mnp-art" id="np-art" alt="">
+        <a class="mnp" id="np-link">
+            <img class="mnp-art" id="np-art" alt="" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
             <div class="mnp-meta">
                 <span class="mnp-state" id="np-state">Connecting…</span>
                 <span class="mnp-title" id="np-title">—</span>
@@ -73,7 +73,7 @@
         <ul class="recent" id="recent"></ul>
 
         <!-- top artists (hidden until Last.fm data arrives) -->
-        <section id="top" hidden></section>
+        <div id="top" hidden></div>
         
     </main>