major database optimisations

Signed-off-by: ari melody <ari@arimelody.me>

public/script/main.js

@@ -1,4 +1,5 @@
 import "./header.js";
+import "./accessibility.js";
 
 function type_out(e) {
         const text = e.innerText;

public/script/music-gateway.js

@@ -28,6 +28,16 @@ function apply_funny_bob_to_upcoming_tags() {
         }
 }
 
+document.querySelectorAll("div#extras ul li a[href]").forEach(link => {
+        link.addEventListener("click", event => {
+                event.preventDefault();
+                location.replace(link.href);
+        });
+});
+
+/*
+ * handling track previews (currently not implemented)
+
 const previews = document.querySelectorAll("[id^=preview-]");
 for (const preview of previews) {
         preview.addEventListener("click", (e) => {
@@ -67,3 +77,5 @@ function stopPreview(preview) {
 }
 
 stopPreviews();
+
+*/

public/style/music-gateway.css

@@ -332,28 +332,43 @@ div#info {
         font-size: 1.2em;
 }
 
-ul#extras {
-        list-style: none;
+div#extras ul {
+        height: 100%;
+        margin: 0;
         display: flex;
         padding: 0;
         gap: .6em;
+        list-style: none;
+        flex-direction: column;
+        justify-content: space-evenly;
 }
 
-ul#extras li a {
+div#extras ul li a {
         color: #888;
         text-decoration: none;
         font-style: italic;
+        writing-mode: vertical-rl;
+        transition: color .1s linear;
+}
+
+div#extras ul li a:hover {
+        color: #eee;
 }
 
 div#info > div {
         max-height: 360px;
         min-height: 360px;
         overflow-y: scroll;
-        padding: 2rem 4rem;
-        margin: -2rem -4rem;
+        padding: 2rem 1rem 2rem 4rem;
+        margin: -2rem -3.5rem -2rem -4rem;
         mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
 }
 
+div#info p {
+        max-width: 500px;
+        white-space: pre-line;
+}
+
 a.scrollback {
         color: #888;
         font-style: italic;
@@ -367,11 +382,6 @@ a.scrollback {
         margin-bottom: 1rem;
 }
 
-#lyrics p {
-        max-width: 500px;
-        white-space: pre-line;
-}
-
 #share {
         margin: 0;
         display: inline-block;
@@ -481,12 +491,28 @@ footer a:hover {
 }
 
 @media only screen and (min-width: 800px) {
-        div#info:has(> #credits:target) {
-                transform: translateY(calc(-360px + -6rem));
+        div#music-container:has(:not(> div#info #credits:target):not(> div#info #credits:target)) {
+                div#extras ul li:first-of-type a {
+                        color: #eee;
+                }
         }
 
-        div#info:has(> #lyrics:target) {
-                transform: translateY(calc((-360px + -6rem) * 2));
+        div#music-container:has(> div#info #credits:target) {
+                div#info {
+                        transform: translateY(calc(-360px + -6rem));
+                }
+                div#extras ul li a[href="#credits"] {
+                        color: #eee;
+                }
+        }
+
+        div#music-container:has(> div#info #lyrics:target) {
+                div#info {
+                        transform: translateY(calc((-360px + -6rem) * 2));
+                }
+                div#extras ul li a[href="#lyrics"] {
+                        color: #eee;
+                }
         }
 }
 
@@ -532,7 +558,7 @@ footer a:hover {
                 mask-image: none;
         }
 
-        a.scrollback {
+        div#extras {
                 display: none;
         }