css marquee!

Author: wiidotmom

site/_data/assets.json

@@ -1,6 +1,6 @@
 {
   "/assets/css/gateway.css": "558fd0916ec1160dd874e3a4499b30d0",
-  "/assets/css/main.css": "f767f4ae6d863eca48b37780c1cda0df",
+  "/assets/css/main.css": "5b77ac14d53462a4272b201156617bc4",
   "/assets/css/vendor/highlightjs.css": "44f1ebb2c86da2cd1cfc99a04977bb60",
   "/assets/css/vendor/katex.min.css": "90c433df0c910af1ccb27d8a5c2614c6",
   "/assets/fonts/Minecraft-Bold.otf": "fe455a095e420be3e0f6ce1badaa5f08",
@@ -83,6 +83,6 @@
   "/assets/images/tooltip/background.png": "85a491c275a660ac4fa3f9a0fb3a8af1",
   "/assets/images/tooltip/frame.png": "8ac3e4872380ae7b9a289b6a75bc9fe4",
   "/assets/js/gate.js": "0deb7516f40b0134d4a6a07a50e9d8b4",
-  "/assets/js/main.js": "a29effc1164e44ef3184bf121b15b2e4",
+  "/assets/js/main.js": "4505ef9bbe452a9b4e3eb7c26c379a1d",
   "/assets/js/tooltip.js": "945863fc42b3bd7d8798c034dafe1f14"
 }

site/_includes/index.vto

@@ -87,7 +87,16 @@
           <a href="https://listenbrainz.org/user/igalaxy/" target="_blank">
             <div id="now-playing">
               <img id="now-playing-art" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" width="16" height="16">
-              <marquee id="now-playing-text" scrolldelay="200"><span id="now-playing-track"></span><span id="now-playing-artist"></span></marquee>
+              <div id="now-playing-text" class="marquee">
+                <p class="marquee-content">
+                  <span class="now-playing-track"></span>
+                  <span class="now-playing-artist"></span>
+                </p>
+                <p class="marquee-content" aria-hidden="true">
+                  <span class="now-playing-track"></span>
+                  <span class="now-playing-artist"></span>
+                </p>
+              </div>
             </div>
           </a>
           <ul id="today">

site/assets/css/main.css

@@ -254,6 +254,36 @@ noscript {
   opacity: 1;
 }
 
+@keyframes scroll {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(calc(-100% - var(--gap)));
+  }
+}
+
+.marquee {
+  --gap: 1rem;
+  display: flex;
+  overflow: hidden;
+  user-select: none;
+  gap: var(--gap);
+  white-space: nowrap;
+}
+
+.marquee-content {
+  flex-shrink: 0;
+  display: flex;
+  justify-content: space-around;
+  min-width: 100%;
+  animation: scroll 10s linear infinite;
+}
+
+.marquee:hover .marquee-content {
+  animation-play-state: paused;
+}
+
 #main-header {
   display: flex;
   height: 150px;
@@ -375,8 +405,9 @@ noscript {
         }
         #now-playing-text {
           flex-grow: 1;
-          #now-playing-track {
+          .now-playing-track {
             font-style: italic;
+            margin-right: 0.8em;
           }
         }
       }
@@ -611,11 +642,10 @@ img {
       text-decoration-style: solid;
     }
 
-    a[href]:not(:where(/* exclude hash only links */
-    [href^="#"], /* exclude javascript only links */
-    [href^="javascript:" i], /* exclude relative but not double slash only links */
-    [href^="/"]:not([href^="//"]), /* domains to exclude */
-    [href*="//wii.mom"], [data-no-style])):after {
+    a[href]:not(:where(/* exclude hash only links */ [href^="#"],
+    /* exclude javascript only links */ [href^="javascript:" i],
+    /* exclude relative but not double slash only links */ [href^="/"]:not([href^="//"]),
+    /* domains to exclude */ [href*="//wii.mom"], [data-no-style])):after {
       content: " ";
       display: inline-block;
       width: 14px;

site/assets/js/main.js

@@ -195,10 +195,12 @@ document.getElementById("avatar-image").src = avatars[Math.floor(Math.random() *
   if (data.track_metadata.mbid_mapping.caa_release_mbid != undefined) {
     document.getElementById("now-playing-art").src = track.art;
   }
-  document.getElementById("now-playing-track").textContent = track.track_name;
-  document.getElementById("now-playing-artist").textContent = ` by ${track.artist_name} - ${
-    Math.floor(track.seconds_since_listened / 60)
-  } minutes ago`;
+  for (t of document.getElementsByClassName("now-playing-track")) {
+    t.textContent = track.track_name;
+  }
+  for (a of document.getElementsByClassName("now-playing-artist")) {
+    a.textContent = `by ${track.artist_name} - ${Math.floor(track.seconds_since_listened / 60)} minutes ago`;
+  }
 })();
 
 (async () => {