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 = `
`
+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 = `
`
+const linksHelper = document.getElementById("linksHelper");
+linksHelper.insertBefore(document.createElement("hs"), document.getElementById("headerLinks"));
const songs = [
{ file: "Velkommen.mp3", name: 'Velkommen', artwork: "velkommen.jpg" },