some UX improvements

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

public/script/header.js

@@ -1,3 +1,4 @@
+const header_home = document.getElementById("header-home");
 const header_links = document.getElementById("header-links");
 const hamburger = document.getElementById("header-links-toggle");
 
@@ -12,3 +13,8 @@ document.addEventListener("click", event => {
 });
 
 hamburger.addEventListener("click", event => { toggle_header_links(); });
+
+header_home.addEventListener("click", event => {
+        event.preventDefault();
+        location.href = "/";
+});

public/style/header.css

@@ -19,6 +19,13 @@ nav {
         align-items: center;
 }
 
+#header-home {
+        flex-grow: 1;
+        display: flex;
+        gap: .5em;
+        cursor: pointer;
+}
+
 img#header-icon {
         width: 2em;
         height: 2em;
@@ -28,7 +35,6 @@ img#header-icon {
 
 #header-text {
         width: 11em;
-        margin-left: -0.5rem;
         display: flex;
         flex-direction: column;
         justify-content: center;
@@ -120,6 +126,10 @@ header ul li a:hover {
 }
 
 @media screen and (max-width: 780px) {
+        header {
+                font-size: 14px;
+        }
+
         nav {
                 width: calc(100vw - 2rem);
                 margin: 0;
@@ -158,7 +168,7 @@ header ul li a:hover {
         ul#header-links li span {
                 margin: 0;
                 display: block;
-                font-size: 1rem;
+                font-size: 1em;
                 text-align: center;
         }
 }

public/style/music-gateway.css

@@ -490,7 +490,7 @@ footer a:hover {
         text-decoration: underline
 }
 
-@media only screen and (min-width: 800px) {
+@media only screen and (min-width: 1105px) {
         div#music-container:has(:not(> div#info #credits:target):not(> div#info #credits:target)) {
                 div#extras ul li:first-of-type a {
                         color: #eee;
@@ -516,7 +516,7 @@ footer a:hover {
         }
 }
 
-@media only screen and (max-width: 800px) {
+@media only screen and (max-width: 1105px) {
         main {
                 min-height: calc(100vh - 4rem);
         }
@@ -526,6 +526,7 @@ footer a:hover {
                 height: fit-content;
                 padding: 2rem 0 6rem 0;
                 gap: 1rem;
+                font-size: 12px;
                 flex-direction: column;
                 text-align: center;
         }
@@ -536,8 +537,10 @@ footer a:hover {
         }
 
         #artwork {
-                width: 50vw;
+                width: auto;
+                max-width: 50vw;
                 height: auto;
+                max-height: 50vh;
         }
 
         #vertical-line {
@@ -558,6 +561,10 @@ footer a:hover {
                 mask-image: none;
         }
 
+        div#info p {
+                margin: 0 auto;
+        }
+
         div#extras {
                 display: none;
         }
@@ -572,6 +579,10 @@ footer a:hover {
                 margin: 0;
         }
 
+        #artist {
+                margin: .2em auto 1em auto;
+        }
+
         #links {
                 margin: 2rem 0;
                 justify-content: center;