major UI/UX improvements

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

api/v1/music/music.go

@@ -21,6 +21,102 @@ var placeholders = []Album{
 												},
 								},
 								Description: "she sample on my text 'til i 🚫🚫🚫",
+								Credits: []AlbumCredit{
+												AlbumCredit{
+																Name: "ari melody",
+																Url: "https://arimelody.me",
+																Role: "having the swag",
+												},
+												AlbumCredit{
+																Name: "zaire",
+																Url: "https://supitszaire.com",
+																Role: "having the swag",
+												},
+												AlbumCredit{
+																Name: "mae taylor",
+																Url: "https://mae.wtf",
+																Role: "having the swag",
+												},
+												AlbumCredit{
+																Name: "Loudar",
+																Url: "https://alex.targoninc.com",
+																Role: "having the swag",
+												},
+								},
+								Lyrics:
+								`(call me when you fall asleep)
+								(all in, let me ride the wave)
+
+								(okay!)
+
+								call me
+								when you fall asleep
+								(fall asleep, call on me)
+								(oh babe, why don'cha)
+								yeah, it's how you feel
+								when the stars come out
+								(you're never gonna get it)
+								(while you've lost yourself in a rut)
+								all in
+								let me ride the wave
+								(i'm so stressed)
+								(i need to fly out of this place)
+								yeah, 'cause we can drift
+								'til the break of dawn
+								(i think i'll be okay)
+								(if i can sleep today)
+
+								(switch it up!)
+
+								slumber party at 2AM
+								could think of nothing more perfect
+								than a moonlight jam
+
+								yeah, i've got no sleep
+								but I'm free today
+								yeah you could even say
+								that i'm free2play
+
+								you ain't here by my side
+								and i try to get by
+								with my head out the window
+								get a listen of this
+
+								the whispers of the trees
+								the crickets do be chirpin'
+								i guess that's how it goes
+
+								(call me when you fall asleep)
+								(all in, let me ride the wave)
+
+								(let's go!)
+
+								call me
+								when you fall asleep
+								(fall asleep, call on me)
+								(oh babe, why don'cha)
+								yeah, it's how you feel
+								when the stars come out
+								(you're never gonna get it)
+								(while you've lost yourself in a rut)
+								all in
+								let me ride the wave
+								(i'm so stressed)
+								(i need to fly out of this place)
+								yeah, 'cause we can drift
+								'til the break of dawn
+								(i think i'll be okay)
+								(if i can sleep today)
+
+								yeah... woo!
+								(BASS)
+								oh man...
+								i'm just sitting here
+								feeling the breeze
+								hanging out
+								listening to the crickets
+								and the trees in the breeze
+								living my best life`,
 				},
 				{
 								Id: "free2play",
@@ -60,6 +156,50 @@ var placeholders = []Album{
 												},
 								},
 								Description: "living the dream 🌌 ✨",
+								Credits: []AlbumCredit{
+												AlbumCredit{
+																Name: "ari melody",
+																Url: "https://arimelody.me",
+																Role: "vocals",
+												},
+												AlbumCredit{
+																Name: "ari melody",
+																Url: "https://arimelody.me",
+																Role: "production",
+												},
+												AlbumCredit{
+																Name: "ari melody",
+																Url: "https://arimelody.me",
+																Role: "artwork",
+												},
+								},
+								Lyrics:
+								`the truth is what you make of it
+								in the end, what you spend, is the end of it
+								when you're lost in the life
+								the life that you created on your own
+								i'm becoming one
+								with the soul that i see in the mirror
+								blending one and whole
+								this time, i'm real
+
+								i'm living the dream
+								i'm living my best life
+								running out of time
+								i gotta make this right
+								whenever you rise
+								whenever you come down
+								fall away from the light
+								and then fall into our arms
+
+								the truth is what you make of it
+								in the end, what you spend, is the end of it
+								when you're lost in the life
+								the life that you created on your own
+								i'm becoming one
+								with the soul that i see in the mirror
+								blending one and whole
+								this time, i'm real`,
 				},
 				{
 								Id: "gomyway",

api/v1/music/music_types.go

@@ -18,12 +18,20 @@ type (
 								Free bool;
 								Links []AlbumLink;
 								Description string;
+								Credits []AlbumCredit;
+								Lyrics string;
 				}
 
 				AlbumLink struct {
 								Name string;
 								Url string;
 				}
+
+				AlbumCredit struct {
+								Role string;
+								Name string;
+								Url string;
+				}
 )
 
 func (album Album) PrintArtists() string {

main.go

@@ -9,6 +9,7 @@ import (
 				"net/http"
 				"log"
 				"strings"
+        "time"
 
 				"github.com/gomarkdown/markdown"
 				"github.com/gomarkdown/markdown/html"
@@ -37,7 +38,12 @@ var templates = template.Must(template.ParseFiles(
 func web_handler(writer http.ResponseWriter, req *http.Request) {
 				uri := req.URL.Path
 				
-				fmt.Printf("%s %s (%s)\n", req.Method, req.URL.Path, req.Header["User-Agent"][0])
+				fmt.Printf("[%s] %s %s (%s)\n",
+                time.Now().Format(time.UnixDate),
+                req.Method,
+                req.URL.Path,
+                req.Header["User-Agent"][0],
+        )
 
 				if req.URL.Path == "/" {
 								index_handler(writer, req)

public/script/header.js

@@ -0,0 +1,14 @@
+const header_links = document.getElementById("header-links");
+const hamburger = document.getElementById("header-links-toggle");
+
+function toggle_header_links() {
+        header_links.classList.toggle("open");
+}
+
+document.addEventListener("click", event => {
+        if (!header_links.contains(event.target) && !hamburger.contains(event.target)) {
+                header_links.classList.remove("open");
+        }
+});
+
+hamburger.addEventListener("click", event => { toggle_header_links(); });

public/script/main.js

@@ -1,5 +1,4 @@
-const header_links = document.getElementById("header-links");
+import "./header.js";
-const hamburger = document.getElementById("header-links-toggle");
 
 function type_out(e) {
         const text = e.innerText;
@@ -55,12 +54,3 @@ function fill_list(list) {
 		fill_list(e);
 	});
 
-function toggle_header_links() {
-        header_links.classList.toggle("open");
-}
-
-document.addEventListener("click", event => {
-        if (!header_links.contains(event.target) && !hamburger.contains(event.target)) {
-                header_links.classList.remove("open");
-        }
-});

public/script/music-gateway.js

@@ -1,3 +1,5 @@
+import "./main.js";
+
 const bg = document.getElementById("background");
 bg.style.backgroundImage = `url(${bg.dataset.url})`;
 bg.removeAttribute("data-url");
@@ -17,11 +19,11 @@ document.getElementById("go-back").addEventListener("click", () => {
 apply_funny_bob_to_upcoming_tags();
 
 function apply_funny_bob_to_upcoming_tags() {
-        upcomingTags = document.querySelectorAll("#type.upcoming");
+        const upcomingTags = document.querySelectorAll("#type.upcoming");
         for (var i = 0; i < upcomingTags.length; i++) {
                 const tag = upcomingTags[i];
-                chars = tag.innerText.split("");
+                const chars = tag.innerText.split("");
-                result = chars.map((c, i) => `<span style="animation-delay: -${i * 100}ms;">${c}</span>`);
+                const result = chars.map((c, i) => `<span style="animation-delay: -${i * 100}ms;">${c}</span>`);
                 tag.innerHTML = result.join("");
         }
 }

public/style/colours.css

@@ -0,0 +1,19 @@
+:root {
+        --primary: #b7fd49;
+        --secondary: #f8e05b;
+        --tertiary: #f788fe;
+        --links: #5eb2ff;
+}
+
+.col-primary {
+        color: var(--primary);
+}
+
+.col-secondary {
+        color: var(--secondary);
+}
+
+.col-tertiary {
+        color: var(--tertiary);
+}
+

public/style/footer.css

@@ -0,0 +1,11 @@
+footer {
+        border-top: 1px solid #888;
+}
+
+#footer {
+        width: 	min(calc(100% - 4rem), 720px);
+        margin: auto;
+        padding: 2rem 0;
+        color: #aaa;
+}
+

public/style/header.css

@@ -0,0 +1,177 @@
+header {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100vw;
+        border-bottom: 1px solid #888;
+        background-color: #080808;
+        z-index: 1;
+}
+
+nav {
+        width: min(calc(100% - 4rem), 720px);
+        height: 3em;
+        margin: auto;
+        padding: 0 1em;
+        display: flex;
+        flex-direction: row;
+        gap: .8em;
+        align-items: center;
+}
+
+img#header-icon {
+        width: 2em;
+        height: 2em;
+        margin: .5em;
+        display: block;
+}
+
+#header-text {
+        width: 11em;
+        margin-left: -0.5rem;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        flex-grow: 1;
+}
+
+#header-text h1 {
+        margin: 0;
+        font-size: 1em;
+}
+
+#header-text h2 {
+        height: 1.2em;
+        line-height: 1.2em;
+        margin: 0;
+        font-size: .7em;
+        color: #bbb;
+}
+
+#header-links-toggle {
+        width: 3em;
+        height: 3em;
+        display: none;
+        justify-content: center;
+        align-items: center;
+        transition: background-color .2s;
+}
+
+#header-links-toggle:hover {
+        background-color: #fff2;
+}
+
+header ul#header-links {
+        margin: 0;
+        padding: 0;
+        display: flex;
+        flex-direction: row;
+        gap: .5em;
+        align-items: center;
+}
+
+header ul li {
+        list-style: none;
+}
+
+header ul li a,
+header ul li span {
+        padding: .4em .5em;
+        border: 1px solid var(--links);
+        color: var(--links);
+        border-radius: 2px;
+        background-color: transparent;
+        transition-property: color, border-color, background-color;
+        transition-duration: .2s;
+        animation-delay: 0s;
+        animation: list-item-fadein .2s forwards;
+        opacity: 0;
+        text-decoration: none;
+}
+
+header ul li span {
+        color: #aaa;
+        border-color: #aaa;
+        cursor: default;
+        text-decoration: none;
+}
+
+header ul li a:hover {
+        color: #eee;
+        border-color: #eee;
+        background-color: var(--links) !important;
+        text-decoration: none;
+}
+
+
+#toggle-crt a {
+        color: var(--primary);
+        border-color: var(--primary);
+        opacity: 1;
+}
+
+#toggle-crt a:hover {
+        color: #111;
+        background-color: var(--primary) !important;
+}
+
+#toggle-crt.disabled a {
+        opacity: .5 !important;
+}
+
+@media screen and (max-width: 780px) {
+        nav {
+                width: calc(100vw - 2rem);
+                margin: 0;
+        }
+
+        div#header-text {
+                flex-grow: 1;
+        }
+
+        a#header-links-toggle {
+                display: flex;
+        }
+
+        header ul#header-links {
+                position: fixed;
+                left: 0;
+                top: 2.7rem;
+                width: calc(100vw - 2rem);
+                padding: 1rem;
+                flex-direction: column;
+                gap: 1rem;
+                border-bottom: 1px solid #888;
+                background: #080808;
+                display: none;
+        }
+
+        header ul#header-links.open {
+                display: flex;
+        }
+
+        ul#header-links li {
+                width: 100%;
+        }	
+
+        ul#header-links li a,
+        ul#header-links li span {
+                margin: 0;
+                display: block;
+                font-size: 1rem;
+                text-align: center;
+        }
+}
+
+@keyframes list-item-fadein {
+        from {
+                opacity: 1;
+                background: #fff8;
+        }
+
+        to {
+                opacity: 1;
+                background: transparent;
+        }
+}
+

public/style/index.css

@@ -0,0 +1,151 @@
+@import url("/style/main.css");
+
+main {
+        width: 	min(calc(100% - 4rem), 720px);
+        min-height: calc(100vh - 10.3rem);
+        margin: 5rem auto 2rem auto;
+}
+
+main h1 {
+        line-height: 3rem;
+        color: var(--primary);
+}
+
+main h2 {
+        color: var(--secondary);
+}
+
+main h3 {
+        color: var(--tertiary);
+}
+
+div#me_irl {
+        width: fit-content;
+        height: fit-content;
+        border: 2px solid white;
+}
+
+div#me_irl img {
+        display: block;
+}
+
+div#me_irl::before {
+        content: "";
+        position: absolute;
+        width: 104px;
+        height: 104px;
+        transform: translate(2px, 2px);
+        background-image: linear-gradient(to top right,
+        var(--primary),
+        var(--secondary));
+        z-index: -1;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+small,
+blockquote {
+        transition: background-color 0.1s;
+}
+
+h1 a,
+h2 a,
+h3 a,
+h4 a,
+h5 a,
+h6 a {
+        color: inherit;
+}
+
+h1 a:hover,
+h2 a:hover,
+h3 a:hover,
+h4 a:hover,
+h5 a:hover,
+h6 a:hover {
+        text-decoration: none;
+}
+
+main h1:hover,
+main h2:hover,
+main h3:hover,
+main h4:hover,
+main h5:hover,
+main h6:hover,
+main p:hover,
+main small:hover,
+main blockquote:hover {
+        background-color: #fff1;
+}
+
+blockquote {
+        margin: 1rem 0;
+        padding: 0 2.5rem;
+}
+
+hr {
+        text-align: center;
+        line-height: 0px;
+        border-width: 1px 0 0 0;
+        border-color: #888f;
+        margin: 1.5em 0;
+        overflow: visible;
+}
+
+ul.links {
+        display: flex;
+        gap: 1em .5em;
+        flex-wrap: wrap;
+}
+
+ul.links li {
+        list-style: none;
+}
+
+ul.links li a {
+        padding: .2em .5em;
+        border: 1px solid var(--links);
+        color: var(--links);
+        border-radius: 2px;
+        background-color: transparent;
+        transition-property: color, border-color, background-color;
+        transition-duration: .2s;
+        animation-delay: 0s;
+        animation: list-item-fadein .2s forwards;
+        opacity: 0;
+}
+
+ul.links li a:hover {
+        color: #eee;
+        border-color: #eee;
+        background-color: var(--links) !important;
+        text-decoration: none;
+        box-shadow: 0 0 1em var(--links);
+}
+
+div#web-buttons {
+        margin: 2rem 0;
+}
+
+#web-buttons a {
+        text-decoration: none;
+}
+
+#web-buttons img {
+        image-rendering: auto;
+        image-rendering: crisp-edges;
+        image-rendering: pixelated;
+}
+
+#web-buttons img:hover {
+        margin: -1px;
+        border: 1px solid #eee;
+        transform: translate(-2px, -2px);
+        box-shadow: 1px 1px 0 #eee, 2px 2px 0 #eee;
+}
+

public/style/main.css

@@ -1,3 +1,7 @@
+@import url("/style/colours.css");
+@import url("/style/header.css");
+@import url("/style/footer.css");
+
 @font-face {
         font-family: "Monaspace Argon";
         src: url("/font/monaspace-argon/MonaspaceArgonVarVF[wght,wdth,slnt].woff2") format("woff2-variations");
@@ -6,25 +10,6 @@
         font-style: oblique 0deg 20deg;
 }
 
-:root {
-        --primary: #b7fd49;
-        --secondary: #f8e05b;
-        --tertiary: #f788fe;
-        --links: #5eb2ff;
-}
-
-.col-primary {
-        color: var(--primary);
-}
-
-.col-secondary {
-        color: var(--secondary);
-}
-
-.col-tertiary {
-        color: var(--tertiary);
-}
-
 body {
         margin: 0;
         padding: 0;
@@ -36,145 +21,6 @@ body {
         scroll-behavior: smooth;
 }
 
-header {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100vw;
-        border-bottom: 1px solid #888;
-        background-color: #080808;
-        z-index: 1;
-}
-
-nav {
-        width: min(calc(100% - 4rem), 720px);
-        height: 3em;
-        margin: auto;
-        padding: 0 1em;
-        display: flex;
-        flex-direction: row;
-        gap: .8em;
-        align-items: center;
-}
-
-img#header-icon {
-        width: 2em;
-        height: 2em;
-        margin: .5em;
-        display: block;
-}
-
-#header-text {
-        width: 11em;
-        margin-left: -0.5rem;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        flex-grow: 1;
-}
-
-#header-text h1 {
-        margin: 0;
-        font-size: 1em;
-}
-
-#header-text h2 {
-        height: 1.2em;
-        line-height: 1.2em;
-        margin: 0;
-        font-size: .7em;
-        color: #bbb;
-}
-
-#header-links-toggle {
-        width: 3em;
-        height: 3em;
-        display: none;
-        justify-content: center;
-        align-items: center;
-        transition: background-color .2s;
-}
-
-#header-links-toggle:hover {
-        background-color: #fff2;
-}
-
-header ul#header-links {
-        margin: 0;
-        padding: 0;
-        display: flex;
-        flex-direction: row;
-        gap: .5em;
-        align-items: center;
-}
-
-header ul li {
-        list-style: none;
-}
-
-header ul li a,
-header ul li span {
-        padding: .2em .5em;
-        border: 1px solid var(--links);
-        color: var(--links);
-        border-radius: 2px;
-        background-color: transparent;
-        transition-property: color, border-color, background-color;
-        transition-duration: .2s;
-        animation-delay: 0s;
-        animation: list-item-fadein .2s forwards;
-        opacity: 0;
-}
-
-header ul li span {
-        color: #aaa;
-        border-color: #aaa;
-        cursor: default;
-        text-decoration: none;
-}
-
-header ul li a:hover {
-        color: #eee;
-        border-color: #eee;
-        background-color: var(--links) !important;
-        text-decoration: none;
-}
-
-
-#toggle-crt a {
-        color: var(--primary);
-        border-color: var(--primary);
-        opacity: 1;
-}
-
-#toggle-crt a:hover {
-        color: #111;
-        background-color: var(--primary) !important;
-}
-
-#toggle-crt.disabled a {
-        opacity: .5 !important;
-}
-
-main {
-        width: 	min(calc(100% - 4rem), 720px);
-        min-height: calc(100vh - 10.3rem);
-        margin: 5rem auto 2rem auto;
-}
-
-main h1 {
-        line-height: 3rem;
-        color: var(--primary);
-}
-
-main h2 {
-        color: var(--secondary);
-}
-
-main h3 {
-        color: var(--tertiary);
-}
-
 a {
         color: var(--links);
         text-decoration: none;
@@ -199,124 +45,6 @@ span.newchar {
         }
 }
 
-span.hide {
-        display: none;
-}
-
-h1:hover span.hide {
-        display: initial;
-        opacity: 0.1;
-}
-
-div#me_irl {
-        width: fit-content;
-        height: fit-content;
-        border: 2px solid white;
-}
-
-div#me_irl img {
-        display: block;
-}
-
-div#me_irl::before {
-        content: "";
-        position: absolute;
-        width: 104px;
-        height: 104px;
-        transform: translate(2px, 2px);
-        background-image: linear-gradient(to top right,
-        var(--primary),
-        var(--secondary));
-        z-index: -1;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p,
-small,
-blockquote {
-        transition: background-color 0.1s;
-}
-
-h1 a,
-h2 a,
-h3 a,
-h4 a,
-h5 a,
-h6 a {
-        color: inherit;
-}
-
-h1 a:hover,
-h2 a:hover,
-h3 a:hover,
-h4 a:hover,
-h5 a:hover,
-h6 a:hover {
-        text-decoration: none;
-}
-
-main h1:hover,
-main h2:hover,
-main h3:hover,
-main h4:hover,
-main h5:hover,
-main h6:hover,
-main p:hover,
-main small:hover,
-main blockquote:hover {
-        background-color: #fff1;
-}
-
-blockquote {
-        margin: 1rem 0;
-        padding: 0 2.5rem;
-}
-
-hr {
-        text-align: center;
-        line-height: 0px;
-        border-width: 1px 0 0 0;
-        border-color: #888f;
-        margin: 1.5em 0;
-        overflow: visible;
-}
-
-ul.links {
-        display: flex;
-        gap: 1em .5em;
-        flex-wrap: wrap;
-}
-
-ul.links li {
-        list-style: none;
-}
-
-ul.links li a {
-        padding: .2em .5em;
-        border: 1px solid var(--links);
-        color: var(--links);
-        border-radius: 2px;
-        background-color: transparent;
-        transition-property: color, border-color, background-color;
-        transition-duration: .2s;
-        animation-delay: 0s;
-        animation: list-item-fadein .2s forwards;
-        opacity: 0;
-}
-
-ul.links li a:hover {
-        color: #eee;
-        border-color: #eee;
-        background-color: var(--links) !important;
-        text-decoration: none;
-        box-shadow: 0 0 1em var(--links);
-}
-
 @keyframes list-item-fadein {
         from {
                 opacity: 1;
@@ -329,56 +57,6 @@ ul.links li a:hover {
         }
 }
 
-div#web-buttons {
-        margin: 2rem 0;
-}
-
-#web-buttons a {
-        text-decoration: none;
-}
-
-#web-buttons img {
-        image-rendering: auto;
-        image-rendering: crisp-edges;
-        image-rendering: pixelated;
-}
-
-#web-buttons img:hover {
-        margin: -1px;
-        border: 1px solid #eee;
-        transform: translate(-2px, -2px);
-        box-shadow: 1px 1px 0 #eee, 2px 2px 0 #eee;
-}
-
-footer {
-        border-top: 1px solid #888;
-}
-
-#footer {
-        width: 	min(calc(100% - 4rem), 720px);
-        margin: auto;
-        padding: 2rem 0;
-        color: #aaa;
-}
-
-@keyframes overlay-flicker {
-        from {
-                opacity: .5;
-        }
-        to {
-                opacity: .6;
-        }
-}
-
-@keyframes overlay-scroll {
-        from {
-                background-position-y: 0;
-        }
-        to {
-                background-position-y: .2em;
-        }
-}
-
 #overlay {
         position: fixed;
         top: 0;
@@ -390,7 +68,6 @@ footer {
         background-repeat: repeat;
         opacity: .5;
         pointer-events: none;
-        /* animation: linear .05s infinite alternate overlay-flicker; */
         mix-blend-mode: overlay;
 }
 
@@ -399,48 +76,6 @@ footer {
                 font-size: 14px;
         }
 
-        nav {
-                width: calc(100vw - 2rem);
-                margin: 0;
-        }
-
-        div#header-text {
-                flex-grow: 1;
-        }
-
-        a#header-links-toggle {
-                display: flex;
-        }
-
-        header ul#header-links {
-                position: fixed;
-                left: 0;
-                top: 2.7rem;
-                width: calc(100vw - 2rem);
-                padding: 1rem;
-                flex-direction: column;
-                gap: 1rem;
-                border-bottom: 1px solid #888;
-                background: #080808;
-                display: none;
-        }
-
-        header ul#header-links.open {
-                display: flex;
-        }
-
-        ul#header-links li {
-                width: 100%;
-        }	
-
-        ul#header-links li a,
-        ul#header-links li span {
-                margin: 0;
-                display: block;
-                font-size: 1rem;
-                text-align: center;
-        }
-
         main {
                 margin-top: 4rem;
         }

public/style/music-gateway.css

@@ -1,3 +1,5 @@
+@import url("/style/main.css");
+
 @font-face {
         font-family: "Monaspace Argon";
         src: url("/font/monaspace-argon/MonaspaceArgonVarVF[wght,wdth,slnt].woff2") format("woff2-variations");
@@ -10,6 +12,7 @@ html,
 body {
         margin: 0;
         padding: 0;
+        font-size: 18px;
         color: #fff;
         background-color: #111;
         font-family: "Monaspace Argon", monospace;
@@ -29,39 +32,46 @@ body {
 }
 
 #go-back {
-        position: absolute;
+        position: fixed;
-        top: 1rem;
+        top: 4rem;
         left: 1rem;
         width: 2.5rem;
         height: 2.5rem;
         margin: 0;
         font-size: 1.5rem;
+        line-height: 2.6rem;
         display: flex;
         justify-content: center;
-        align-items: center;
         color: #fff;
-        background-color: #fff1;
+        background-color: #111;
         border-radius: 4px;
         text-decoration: none;
         box-shadow: 0 0 8px #0004;
-        z-index: 100
+        z-index: 1;
 }
 
 main {
+        position: absolute;
+        top: 3rem;
+        width: 100vw;
+        min-height: calc(100vh - 9rem);
+        margin: 0;
         display: flex;
-        min-height: calc(100vh - 6rem);
         justify-content: center;
-        align-items: center
+        align-items: center;
 }
 
 #music-container {
-        position: absolute;
         width: min(960px, calc(100vw - 4rem));
+        height: 360px;
         display: flex;
         flex-direction: row;
         flex-wrap: nowrap;
         gap: 4rem;
-        animation: card-init .5s forwards
+        font-size: 16px;
+        animation: card-init .5s forwards;
+        overflow-y: clip;
+        padding: 4rem;
 }
 
 #art-container {
@@ -87,6 +97,7 @@ main {
         width: 33.3%;
         height: 33.3%;
         z-index: 2;
+        /* pointer-events: none; */
 }
 
 #art-container > div.tilt-topleft {
@@ -178,8 +189,8 @@ main {
 #artwork {
         --shine: 1.05;
         --shadow: 0.8;
-        width: 100%;
+        width: 360px;
-        max-width: 512px;
+        height: 360px;
         margin: auto;
         display: flex;
         justify-content: center;
@@ -194,7 +205,19 @@ main {
 div#vertical-line {
         width: 1px;
         background-color: #fff4;
-        box-shadow: 0 0 16px #000;
+}
+
+div#info {
+        display: flex;
+        flex-direction: column;
+        transition: transform .5s ease;
+        gap: 6rem;
+}
+
+#title-container {
+        display: flex;
+        align-items: baseline;
+        flex-direction: row;
 }
 
 #title {
@@ -205,14 +228,15 @@ div#vertical-line {
 
 #year {
         margin-left: .9em;
-        font-size: .5em;
+        font-size: 1.2em;
-        color: #eee
+        color: #eee8;
+        font-weight: bold;
 }
 
 #artist {
         margin: .2em 0 1em 0;
         font-size: 1em;
-        color: #eee
+        color: #eee;
 }
 
 #title,
@@ -227,11 +251,11 @@ div#vertical-line {
         color: #fff;
         background-color: #111;
         text-transform: uppercase;
-        border-radius: 4px
+        border-radius: 4px;
 }
 
 #type.single {
-        background-color: #3b47f4
+        background-color: #3b47f4;
 }
 
 #type.ep {
@@ -308,6 +332,46 @@ div#vertical-line {
         font-size: 1.2em;
 }
 
+ul#extras {
+        list-style: none;
+        display: flex;
+        padding: 0;
+        gap: .6em;
+}
+
+ul#extras li a {
+        color: #888;
+        text-decoration: none;
+        font-style: italic;
+}
+
+div#info > div {
+        max-height: 360px;
+        min-height: 360px;
+        overflow-y: scroll;
+        padding: 2rem 4rem;
+        margin: -2rem -4rem;
+        mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
+}
+
+a.scrollback {
+        color: #888;
+        font-style: italic;
+}
+
+#credits ul {
+        list-style: "> ";
+}
+
+#credits ul li {
+        margin-bottom: 1rem;
+}
+
+#lyrics p {
+        max-width: 500px;
+        white-space: pre-line;
+}
+
 #share {
         margin: 0;
         display: inline-block;
@@ -416,6 +480,16 @@ footer a:hover {
         text-decoration: underline
 }
 
+@media only screen and (min-width: 800px) {
+        div#info:has(> #credits:target) {
+                transform: translateY(calc(-360px + -6rem));
+        }
+
+        div#info:has(> #lyrics:target) {
+                transform: translateY(calc((-360px + -6rem) * 2));
+        }
+}
+
 @media only screen and (max-width: 800px) {
         main {
                 min-height: calc(100vh - 4rem);
@@ -424,10 +498,10 @@ footer a:hover {
         #music-container {
                 width: calc(100vw - 8rem);
                 height: fit-content;
+                padding: 2rem 0 6rem 0;
                 gap: 1rem;
-                padding: 2rem 0;
                 flex-direction: column;
-                text-align: center
+                text-align: center;
         }
 
         #art-container {
@@ -436,21 +510,40 @@ footer a:hover {
         }
 
         #artwork {
-                max-width: 40vh;
+                width: 50vw;
-                max-height: 40vh;
+                height: auto;
         }
 
         #vertical-line {
                 display: none;
         }
 
-        #music-container #info {
+        div#info {
-                width: 100%
+                width: 100%;
+                gap: 2rem;
+        }
+
+        div#info > div {
+                max-height: fit-content;
+                min-height: fit-content;
+                padding: 0;
+                margin: 0;
+                overflow-y: unset;
+                mask-image: none;
+        }
+
+        a.scrollback {
+                display: none;
+        }
+
+        #title-container {
+                flex-direction: column;
+                align-items: center;
         }
 
         #year {
                 display: block;
-                margin: -.5em 0 .5rem;
+                margin: 0;
         }
 
         #links {
@@ -458,6 +551,15 @@ footer a:hover {
                 justify-content: center;
         }
 
+        #extras {
+                justify-content: center;
+        }
+
+        #credits ul {
+                padding: 0;
+                list-style: none;
+        }
+
         #share.active: : after {
                 transform: translate(calc(-50% - .6em),1.5em);
         }
@@ -471,21 +573,10 @@ footer a:hover {
                 font-size: .8rem;
         }
 
-}
+        #pride-flag {
+                display: none;
+        }
 
-#overlay {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100vw;
-        height: 100vh;
-        background-image: linear-gradient(180deg, rgba(0,0,0,0) 15%, rgb(0, 0, 0) 40%, rgb(0, 0, 0) 60%, rgba(0,0,0,0) 85%);
-        background-size: 100vw .2em;
-        background-repeat: repeat;
-        opacity: .5;
-        pointer-events: none;
-        /* animation: linear .05s infinite alternate overlay-flicker; */
-        mix-blend-mode: overlay;
 }
 
 @keyframes background-init {

public/style/music.css

@@ -1,3 +1,5 @@
+@import url("/style/index.css");
+
 div.music {
         margin-bottom: 1rem;
         padding: 1.5rem;

views/header.html

@@ -2,12 +2,12 @@
 
 <header>
         <nav>
-                <img src="img/favicon.png" id="header-icon" width="100" height="100" alt="">
+                <img src="/img/favicon.png" id="header-icon" width="100" height="100" alt="">
                 <div id="header-text">
                         <h1>ari melody</h1>
                         <h2>your local SPACEGIRL 💫</h2>
                 </div>
-                <a id="header-links-toggle" onclick="toggle_header_links()">
+                <a id="header-links-toggle">
                         <svg viewBox="0 0 70 50" xmlns="http://www.w3.org/2000/svg" width="24" height="24">
                                 <rect y="00" width="70" height="10" rx="5" fill="#eee" />
                                 <rect y="20" width="70" height="10" rx="5" fill="#eee" />

views/index.html

@@ -18,10 +18,10 @@
                 <meta property="og:site_name" content="ari melody">
                 <meta property="og:description" content="home to your local SPACEGIRL 💫">
 
-                <link rel="stylesheet" href="style/main.css">
+                <link rel="stylesheet" href="style/index.css">
 
-                <script src="/script/main.js" defer></script>
+                <script type="module" src="/script/main.js" defer></script>
-                <script src="/script/accessibility.js" defer></script>
+                <script type="application/javascript" src="/script/accessibility.js" defer></script>
                 <link rel="me" href="https://wetdry.world/@ari">
         </head>
         <body>

views/music-gateway.html

@@ -31,8 +31,8 @@
                 <meta name="twitter:image" content="https://arimelody.me{{.ResolveArtwork}}">
                 <meta name="twitter:image:alt" content="Cover art for &quot;{{.Title}}&quot;">
 
-                <script type="text/javascript" src="/script/music-gateway.js" defer=""></script>
+                <script type="module" src="/script/music-gateway.js" defer></script>
-                <script type="text/javascript" src="/script/prideflag.js" defer=""></script>
+                <script type="text/javascript" src="/script/prideflag.js" defer></script>
                 <link rel="stylesheet" href="/style/music-gateway.css">
         </head>
         <body>
@@ -41,6 +41,8 @@
 
                 <a id="go-back" title="back to arimelody.me" href="/music">&lt;</a>
 
+                {{block "header" .}}{{end}}
+
                 <main>
                         <div id="music-container">
                                 <div id="art-container">
@@ -52,11 +54,15 @@
                                         <div class="tilt-bottom"></div>
                                         <div class="tilt-bottomleft"></div>
                                         <div class="tilt-left"></div>
-                                        <img id="artwork" src="{{.ResolveArtwork}}" alt="{{.Title}} artwork">
+                                        <img id="artwork" src="{{.ResolveArtwork}}" alt="{{.Title}} artwork" width=240 height=240>
                                 </div>
                                 <div id="vertical-line"></div>
                                 <div id="info">
-                                        <h1 id="title">{{.Title}}<span id="year">{{.Year}}</span></h1>
+                                        <div id="main">
+                                                <div id="title-container">
+                                                        <h1 id="title">{{.Title}}</h1>
+                                                        <span id="year">{{.Year}}</span>
+                                                </div>
                                                 <p id="artist">{{.PrintArtists}}</p>
                                                 <p id="type" class="{{.Type}}">{{.Type}}</p>
 
@@ -85,8 +91,39 @@
                                                         {{.Description}}
                                                 </p>
 
+                                                <ul id="extras">
+                                                        {{if .Credits}}
+                                                        <li><a href="#credits">credits</a></li>
+                                                        {{end}}
+
+                                                        {{if .Lyrics}}
+                                                        <li><a href="#lyrics">lyrics</a></li>
+                                                        {{end}}
+                                                </ul>
+
                                                 <p id="share">share</p>
                                         </div>
+
+                                        {{if .Credits}}
+                                        <div id="credits">
+                                                <a href="#" class="scrollback">go back</a>
+                                                <h2>credits:</h2>
+                                                <ul>
+                                                        {{range .Credits}}
+                                                        <li><strong><a href="{{.Url}}">{{.Name}}</a></strong>: {{.Role}}</li>
+                                                        {{end}}
+                                                </ul>
+                                        </div>
+                                        {{end}}
+
+                                        {{if .Lyrics}}
+                                        <div id="lyrics">
+                                                <a href="#" class="scrollback">go back</a>
+                                                <h2>lyrics:</h2>
+                                                <p>{{.Lyrics}}</p>
+                                        </div>
+                                        {{end}}
+                                </div>
                                 <!-- <div id="tracks"> -->
                                 <!--         <% var file = `/audio/preview/${data.id}.webm` %> -->
                                 <!--         <% if (data.tracks && typeof(data.tracks) == typeof([])) { %> -->
@@ -114,8 +151,6 @@
                         </div>
                 </main>
 
-                <footer>
+                {{block "footer" .}}{{end}}
-                        <p>made with &#10084; by <a href="/" target="_blank">ari melody</a>, 2024</p>
-                </footer>
         </body>
 </html>

views/music.html

@@ -21,9 +21,9 @@
                 <link rel="stylesheet" href="/style/main.css">
                 <link rel="stylesheet" href="/style/music.css">
 
-                <script src="/script/main.js" defer></script>
+                <script type="module" src="/script/main.js" defer></script>
-                <script src="/script/accessibility.js" defer></script>
+                <script type="application/javascript" src="/script/accessibility.js" defer></script>
-                <script src="/script/music.js" defer></script>
+                <script type="application/javascript" src="/script/music.js" defer></script>
         </head>
         <body>
                 <header>