optimised templates, broke tracks, improved music gateway UX. we ball

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

public/style/index.css

@@ -3,7 +3,8 @@
 main {
         width: 	min(calc(100% - 4rem), 720px);
         min-height: calc(100vh - 10.3rem);
-        margin: 5rem auto 2rem auto;
+        margin: 0 auto 2rem auto;
+        padding-top: 5rem;
 }
 
 main h1 {

public/style/main.css

@@ -21,6 +21,9 @@ body {
         scroll-behavior: smooth;
 }
 
+main {
+}
+
 a {
         color: var(--links);
         text-decoration: none;

public/style/music-gateway.css

@@ -70,7 +70,6 @@ main {
         gap: 4rem;
         font-size: 16px;
         animation: card-init .5s forwards;
-        overflow-y: clip;
         padding: 4rem;
 }
 
@@ -97,7 +96,6 @@ main {
         width: 33.3%;
         height: 33.3%;
         z-index: 2;
-        /* pointer-events: none; */
 }
 
 #art-container > div.tilt-topleft {
@@ -208,10 +206,25 @@ div#vertical-line {
 }
 
 div#info {
-        display: flex;
-        flex-direction: column;
-        transition: transform .5s ease;
-        gap: 6rem;
+        margin: -4rem;
+        padding: 4rem;
+        height: 360px;
+        overflow: scroll;
+        scroll-behavior: smooth;
+        scrollbar-width: thin;
+        scrollbar-color: #111;
+        mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
+}
+
+div#info > div {
+        min-height: 360px;
+        padding: 4rem 1rem 4rem 4rem;
+        margin: -4rem -3.5rem -4rem -4rem;
+}
+
+div#info p {
+        max-width: 500px;
+        white-space: pre-line;
 }
 
 #title-container {
@@ -279,18 +292,26 @@ div#info {
         display: inline-block;
 }
 
-#links {
+ul#links {
+        width: 100%;
         margin: 1rem 0;
+        padding: 0;
         display: flex;
         flex-direction: row;
         flex-wrap: wrap;
-        gap: .5rem
+        gap: .5rem;
+        list-style: none;
 }
 
-#links a {
-        padding: .5em .8em;
-        border-radius: 4px;
+ul#links li {
         flex-grow: 1;
+}
+
+ul#links a {
+        width: calc(100% - 1.6em);
+        padding: .5em .8em;
+        display: block;
+        border-radius: 4px;
         font-size: 1em;
         color: #111;
         background-color: #fff;
@@ -299,31 +320,31 @@ div#info {
         transition: filter .1s,-webkit-filter .1s
 }
 
-#links a.buy {
+ul#links a.buy {
         background-color: #ff94e9
 }
 
-#links a.presave {
+ul#links a.presave {
         background-color: #ff94e9
 }
 
-#links a.spotify {
+ul#links a.spotify {
         background-color: #8cff83
 }
 
-#links a.applemusic {
+ul#links a.applemusic {
         background-color: #8cd9ff
 }
 
-#links a.soundcloud {
+ul#links a.soundcloud {
         background-color: #fdaa6d
 }
 
-#links a.youtube {
+ul#links a.youtube {
         background-color: #ff6e6e
 }
 
-#links a:hover {
+ul#links a:hover {
         filter: brightness(125%);
         -webkit-filter: brightness(125%)
 }
@@ -357,24 +378,11 @@ div#extras ul li a {
         transition: color .1s linear;
 }
 
-div#extras ul li a:hover {
+div#extras ul li a:hover,
+div#extras ul li a.active {
         color: #eee;
 }
 
-div#info > div {
-        max-height: 360px;
-        min-height: 360px;
-        overflow-y: scroll;
-        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;
@@ -497,6 +505,7 @@ footer a:hover {
         text-decoration: underline
 }
 
+/*
 @media only screen and (min-width: 1105px) {
         div#music-container:not(:has(> div#info #credits:target)):not(:has(> div#info #lyrics:target)) {
                 div#extras ul li:first-of-type a {
@@ -505,23 +514,18 @@ footer a:hover {
         }
 
         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;
                 }
         }
 }
+*/
 
 @media only screen and (max-width: 1105px) {
         main {
@@ -557,11 +561,12 @@ footer a:hover {
         div#info {
                 width: 100%;
                 gap: 2rem;
+                height: auto;
+                overflow-y: auto;
         }
 
         div#info > div {
-                max-height: fit-content;
-                min-height: fit-content;
+                min-height: auto;
                 padding: 0;
                 margin: 0;
                 overflow-y: unset;