Fix visual inconsistencies.

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;
 }

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" },

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;
 }

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" },