From 01b1f99b16969a9709fead10ac51a083cff39888 Mon Sep 17 00:00:00 2001
From: Adrian Victor <adrianvictor@disroot.org>
Date: Sun, 8 Feb 2026 20:52:23 -0300
Subject: [PATCH] Fix visual inconsistencies.

---
 docs/static/main.css        | 32 ++++++++++++++++++++++++++++++++
 docs/static/scripts/main.js |  5 ++++-
 static/main.css             | 32 ++++++++++++++++++++++++++++++++
 static/scripts/main.js      |  5 ++++-
 4 files changed, 72 insertions(+), 2 deletions(-)

diff --git a/docs/static/main.css b/docs/static/main.css
index cd8c414..e15fc85 100644
--- a/docs/static/main.css
+++ b/docs/static/main.css
@@ -45,6 +45,11 @@ select {
     inline-size: fit-content;
     height: 1.4em;
     margin-top: auto;
+    opacity: .6;
+}
+
+#music:hover {
+    opacity: 1;
 }
 
 header {
@@ -174,10 +179,18 @@ textarea, input, button {
     gap: .2em;
 }
 
+#linksHelper:hover {
+    opacity: 1;
+}
+
 #headerLinks {
     user-select: none;
 }
 
+#headerLinks a {
+    color: white;
+}
+
 #headerLinks a {
     margin-right: .2em;
     margin-left: .2em;
@@ -560,6 +573,7 @@ input[type="range"]::-webkit-slider-runnable-track, input[type="range"]::-moz-ra
     width: 5em;
     height: 100%;
     object-fit: cover;
+    object-position: left top;
     opacity: .4;
     filter: grayscale(1);
 }
@@ -579,6 +593,11 @@ input[type="range"]::-webkit-slider-runnable-track, input[type="range"]::-moz-ra
 
 .drawerSong.selected img {
     filter: none;
+    /* width: auto; */
+}
+
+.drawerSong.selected {
+    width: 10em;
 }
 
 .playlistTitle {
@@ -606,6 +625,19 @@ input[type="range"]::-webkit-slider-runnable-track, input[type="range"]::-moz-ra
     font-size: larger;
 }
 
+hs {
+    border-bottom: thin solid white;
+}
+
+#linksHelper hs {
+    margin: .2em 0;
+    opacity: .6;
+}
+
+#linkshelper:hover hs {
+    opacity: 1;
+}
+
 .hidden {
     display: none;
 }
diff --git a/docs/static/scripts/main.js b/docs/static/scripts/main.js
index c73a3dc..c11da94 100644
--- a/docs/static/scripts/main.js
+++ b/docs/static/scripts/main.js
@@ -1,11 +1,14 @@
 // This script handles the playback of music in the header's miniplayer ;)
 const body = document.querySelector("body");
 
-document.getElementById("music").innerHTML = `
+const musicdiv = document.getElementById("music");
+musicdiv.innerHTML = `
 <img src="/static/images/gears.svg" class="optionsToggle invertedc">
 <img src="/static/images/sound-on.png" id="sound">
 <select name="song" id="songSelection"></select>
 `
+const linksHelper = document.getElementById("linksHelper");
+linksHelper.insertBefore(document.createElement("hs"), document.getElementById("headerLinks"));
 
 const songs = [
     { file: "Velkommen.mp3", name: 'Velkommen', artwork: "velkommen.jpg" },
diff --git a/static/main.css b/static/main.css
index cd8c414..e15fc85 100644
--- a/static/main.css
+++ b/static/main.css
@@ -45,6 +45,11 @@ select {
     inline-size: fit-content;
     height: 1.4em;
     margin-top: auto;
+    opacity: .6;
+}
+
+#music:hover {
+    opacity: 1;
 }
 
 header {
@@ -174,10 +179,18 @@ textarea, input, button {
     gap: .2em;
 }
 
+#linksHelper:hover {
+    opacity: 1;
+}
+
 #headerLinks {
     user-select: none;
 }
 
+#headerLinks a {
+    color: white;
+}
+
 #headerLinks a {
     margin-right: .2em;
     margin-left: .2em;
@@ -560,6 +573,7 @@ input[type="range"]::-webkit-slider-runnable-track, input[type="range"]::-moz-ra
     width: 5em;
     height: 100%;
     object-fit: cover;
+    object-position: left top;
     opacity: .4;
     filter: grayscale(1);
 }
@@ -579,6 +593,11 @@ input[type="range"]::-webkit-slider-runnable-track, input[type="range"]::-moz-ra
 
 .drawerSong.selected img {
     filter: none;
+    /* width: auto; */
+}
+
+.drawerSong.selected {
+    width: 10em;
 }
 
 .playlistTitle {
@@ -606,6 +625,19 @@ input[type="range"]::-webkit-slider-runnable-track, input[type="range"]::-moz-ra
     font-size: larger;
 }
 
+hs {
+    border-bottom: thin solid white;
+}
+
+#linksHelper hs {
+    margin: .2em 0;
+    opacity: .6;
+}
+
+#linkshelper:hover hs {
+    opacity: 1;
+}
+
 .hidden {
     display: none;
 }
diff --git a/static/scripts/main.js b/static/scripts/main.js
index c73a3dc..c11da94 100644
--- a/static/scripts/main.js
+++ b/static/scripts/main.js
@@ -1,11 +1,14 @@
 // This script handles the playback of music in the header's miniplayer ;)
 const body = document.querySelector("body");
 
-document.getElementById("music").innerHTML = `
+const musicdiv = document.getElementById("music");
+musicdiv.innerHTML = `
 <img src="/static/images/gears.svg" class="optionsToggle invertedc">
 <img src="/static/images/sound-on.png" id="sound">
 <select name="song" id="songSelection"></select>
 `
+const linksHelper = document.getElementById("linksHelper");
+linksHelper.insertBefore(document.createElement("hs"), document.getElementById("headerLinks"));
 
 const songs = [
     { file: "Velkommen.mp3", name: 'Velkommen', artwork: "velkommen.jpg" },