major UI/UX improvements

Signed-off-by: ari melody <ari@arimelody.me>
This commit is contained in:
ari melody 2024-03-18 15:04:04 +00:00
parent 93539c8376
commit 6efd47c6c6
17 changed files with 739 additions and 458 deletions

View file

@ -21,6 +21,102 @@ var placeholders = []Album{
}, },
}, },
Description: "she sample on my text 'til i 🚫🚫🚫", 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", Id: "free2play",
@ -60,6 +156,50 @@ var placeholders = []Album{
}, },
}, },
Description: "living the dream 🌌 ✨", 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", Id: "gomyway",

View file

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

View file

@ -9,6 +9,7 @@ import (
"net/http" "net/http"
"log" "log"
"strings" "strings"
"time"
"github.com/gomarkdown/markdown" "github.com/gomarkdown/markdown"
"github.com/gomarkdown/markdown/html" "github.com/gomarkdown/markdown/html"
@ -37,7 +38,12 @@ var templates = template.Must(template.ParseFiles(
func web_handler(writer http.ResponseWriter, req *http.Request) { func web_handler(writer http.ResponseWriter, req *http.Request) {
uri := req.URL.Path 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 == "/" { if req.URL.Path == "/" {
index_handler(writer, req) index_handler(writer, req)

14
public/script/header.js Normal file
View file

@ -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(); });

View file

@ -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) { function type_out(e) {
const text = e.innerText; const text = e.innerText;
@ -55,12 +54,3 @@ function fill_list(list) {
fill_list(e); 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");
}
});

View file

@ -1,3 +1,5 @@
import "./main.js";
const bg = document.getElementById("background"); const bg = document.getElementById("background");
bg.style.backgroundImage = `url(${bg.dataset.url})`; bg.style.backgroundImage = `url(${bg.dataset.url})`;
bg.removeAttribute("data-url"); bg.removeAttribute("data-url");
@ -17,11 +19,11 @@ document.getElementById("go-back").addEventListener("click", () => {
apply_funny_bob_to_upcoming_tags(); apply_funny_bob_to_upcoming_tags();
function 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++) { for (var i = 0; i < upcomingTags.length; i++) {
const tag = upcomingTags[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(""); tag.innerHTML = result.join("");
} }
} }

19
public/style/colours.css Normal file
View file

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

11
public/style/footer.css Normal file
View file

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

177
public/style/header.css Normal file
View file

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

151
public/style/index.css Normal file
View file

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

View file

@ -1,3 +1,7 @@
@import url("/style/colours.css");
@import url("/style/header.css");
@import url("/style/footer.css");
@font-face { @font-face {
font-family: "Monaspace Argon"; font-family: "Monaspace Argon";
src: url("/font/monaspace-argon/MonaspaceArgonVarVF[wght,wdth,slnt].woff2") format("woff2-variations"); src: url("/font/monaspace-argon/MonaspaceArgonVarVF[wght,wdth,slnt].woff2") format("woff2-variations");
@ -6,25 +10,6 @@
font-style: oblique 0deg 20deg; 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 { body {
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -36,145 +21,6 @@ body {
scroll-behavior: smooth; 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 { a {
color: var(--links); color: var(--links);
text-decoration: none; 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 { @keyframes list-item-fadein {
from { from {
opacity: 1; 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 { #overlay {
position: fixed; position: fixed;
top: 0; top: 0;
@ -390,7 +68,6 @@ footer {
background-repeat: repeat; background-repeat: repeat;
opacity: .5; opacity: .5;
pointer-events: none; pointer-events: none;
/* animation: linear .05s infinite alternate overlay-flicker; */
mix-blend-mode: overlay; mix-blend-mode: overlay;
} }
@ -399,48 +76,6 @@ footer {
font-size: 14px; 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 { main {
margin-top: 4rem; margin-top: 4rem;
} }

View file

@ -1,3 +1,5 @@
@import url("/style/main.css");
@font-face { @font-face {
font-family: "Monaspace Argon"; font-family: "Monaspace Argon";
src: url("/font/monaspace-argon/MonaspaceArgonVarVF[wght,wdth,slnt].woff2") format("woff2-variations"); src: url("/font/monaspace-argon/MonaspaceArgonVarVF[wght,wdth,slnt].woff2") format("woff2-variations");
@ -10,6 +12,7 @@ html,
body { body {
margin: 0; margin: 0;
padding: 0; padding: 0;
font-size: 18px;
color: #fff; color: #fff;
background-color: #111; background-color: #111;
font-family: "Monaspace Argon", monospace; font-family: "Monaspace Argon", monospace;
@ -29,39 +32,46 @@ body {
} }
#go-back { #go-back {
position: absolute; position: fixed;
top: 1rem; top: 4rem;
left: 1rem; left: 1rem;
width: 2.5rem; width: 2.5rem;
height: 2.5rem; height: 2.5rem;
margin: 0; margin: 0;
font-size: 1.5rem; font-size: 1.5rem;
line-height: 2.6rem;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center;
color: #fff; color: #fff;
background-color: #fff1; background-color: #111;
border-radius: 4px; border-radius: 4px;
text-decoration: none; text-decoration: none;
box-shadow: 0 0 8px #0004; box-shadow: 0 0 8px #0004;
z-index: 100 z-index: 1;
} }
main { main {
position: absolute;
top: 3rem;
width: 100vw;
min-height: calc(100vh - 9rem);
margin: 0;
display: flex; display: flex;
min-height: calc(100vh - 6rem);
justify-content: center; justify-content: center;
align-items: center align-items: center;
} }
#music-container { #music-container {
position: absolute;
width: min(960px, calc(100vw - 4rem)); width: min(960px, calc(100vw - 4rem));
height: 360px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: nowrap; flex-wrap: nowrap;
gap: 4rem; gap: 4rem;
animation: card-init .5s forwards font-size: 16px;
animation: card-init .5s forwards;
overflow-y: clip;
padding: 4rem;
} }
#art-container { #art-container {
@ -87,6 +97,7 @@ main {
width: 33.3%; width: 33.3%;
height: 33.3%; height: 33.3%;
z-index: 2; z-index: 2;
/* pointer-events: none; */
} }
#art-container > div.tilt-topleft { #art-container > div.tilt-topleft {
@ -178,8 +189,8 @@ main {
#artwork { #artwork {
--shine: 1.05; --shine: 1.05;
--shadow: 0.8; --shadow: 0.8;
width: 100%; width: 360px;
max-width: 512px; height: 360px;
margin: auto; margin: auto;
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -194,7 +205,19 @@ main {
div#vertical-line { div#vertical-line {
width: 1px; width: 1px;
background-color: #fff4; 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 { #title {
@ -205,14 +228,15 @@ div#vertical-line {
#year { #year {
margin-left: .9em; margin-left: .9em;
font-size: .5em; font-size: 1.2em;
color: #eee color: #eee8;
font-weight: bold;
} }
#artist { #artist {
margin: .2em 0 1em 0; margin: .2em 0 1em 0;
font-size: 1em; font-size: 1em;
color: #eee color: #eee;
} }
#title, #title,
@ -227,11 +251,11 @@ div#vertical-line {
color: #fff; color: #fff;
background-color: #111; background-color: #111;
text-transform: uppercase; text-transform: uppercase;
border-radius: 4px border-radius: 4px;
} }
#type.single { #type.single {
background-color: #3b47f4 background-color: #3b47f4;
} }
#type.ep { #type.ep {
@ -308,6 +332,46 @@ div#vertical-line {
font-size: 1.2em; 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 { #share {
margin: 0; margin: 0;
display: inline-block; display: inline-block;
@ -416,6 +480,16 @@ footer a:hover {
text-decoration: underline 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) { @media only screen and (max-width: 800px) {
main { main {
min-height: calc(100vh - 4rem); min-height: calc(100vh - 4rem);
@ -424,10 +498,10 @@ footer a:hover {
#music-container { #music-container {
width: calc(100vw - 8rem); width: calc(100vw - 8rem);
height: fit-content; height: fit-content;
padding: 2rem 0 6rem 0;
gap: 1rem; gap: 1rem;
padding: 2rem 0;
flex-direction: column; flex-direction: column;
text-align: center text-align: center;
} }
#art-container { #art-container {
@ -436,21 +510,40 @@ footer a:hover {
} }
#artwork { #artwork {
max-width: 40vh; width: 50vw;
max-height: 40vh; height: auto;
} }
#vertical-line { #vertical-line {
display: none; 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 { #year {
display: block; display: block;
margin: -.5em 0 .5rem; margin: 0;
} }
#links { #links {
@ -458,6 +551,15 @@ footer a:hover {
justify-content: center; justify-content: center;
} }
#extras {
justify-content: center;
}
#credits ul {
padding: 0;
list-style: none;
}
#share.active: : after { #share.active: : after {
transform: translate(calc(-50% - .6em),1.5em); transform: translate(calc(-50% - .6em),1.5em);
} }
@ -471,21 +573,10 @@ footer a:hover {
font-size: .8rem; 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 { @keyframes background-init {

View file

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

View file

@ -2,12 +2,12 @@
<header> <header>
<nav> <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"> <div id="header-text">
<h1>ari melody</h1> <h1>ari melody</h1>
<h2>your local SPACEGIRL 💫</h2> <h2>your local SPACEGIRL 💫</h2>
</div> </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"> <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="00" width="70" height="10" rx="5" fill="#eee" />
<rect y="20" width="70" height="10" rx="5" fill="#eee" /> <rect y="20" width="70" height="10" rx="5" fill="#eee" />

View file

@ -18,10 +18,10 @@
<meta property="og:site_name" content="ari melody"> <meta property="og:site_name" content="ari melody">
<meta property="og:description" content="home to your local SPACEGIRL 💫"> <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"> <link rel="me" href="https://wetdry.world/@ari">
</head> </head>
<body> <body>

View file

@ -31,8 +31,8 @@
<meta name="twitter:image" content="https://arimelody.me{{.ResolveArtwork}}"> <meta name="twitter:image" content="https://arimelody.me{{.ResolveArtwork}}">
<meta name="twitter:image:alt" content="Cover art for &quot;{{.Title}}&quot;"> <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"> <link rel="stylesheet" href="/style/music-gateway.css">
</head> </head>
<body> <body>
@ -41,6 +41,8 @@
<a id="go-back" title="back to arimelody.me" href="/music">&lt;</a> <a id="go-back" title="back to arimelody.me" href="/music">&lt;</a>
{{block "header" .}}{{end}}
<main> <main>
<div id="music-container"> <div id="music-container">
<div id="art-container"> <div id="art-container">
@ -52,11 +54,15 @@
<div class="tilt-bottom"></div> <div class="tilt-bottom"></div>
<div class="tilt-bottomleft"></div> <div class="tilt-bottomleft"></div>
<div class="tilt-left"></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>
<div id="vertical-line"></div> <div id="vertical-line"></div>
<div id="info"> <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="artist">{{.PrintArtists}}</p>
<p id="type" class="{{.Type}}">{{.Type}}</p> <p id="type" class="{{.Type}}">{{.Type}}</p>
@ -85,8 +91,39 @@
{{.Description}} {{.Description}}
</p> </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> <p id="share">share</p>
</div> </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"> --> <!-- <div id="tracks"> -->
<!-- <% var file = `/audio/preview/${data.id}.webm` %> --> <!-- <% var file = `/audio/preview/${data.id}.webm` %> -->
<!-- <% if (data.tracks && typeof(data.tracks) == typeof([])) { %> --> <!-- <% if (data.tracks && typeof(data.tracks) == typeof([])) { %> -->
@ -114,8 +151,6 @@
</div> </div>
</main> </main>
<footer> {{block "footer" .}}{{end}}
<p>made with &#10084; by <a href="/" target="_blank">ari melody</a>, 2024</p>
</footer>
</body> </body>
</html> </html>

View file

@ -21,9 +21,9 @@
<link rel="stylesheet" href="/style/main.css"> <link rel="stylesheet" href="/style/main.css">
<link rel="stylesheet" href="/style/music.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> </head>
<body> <body>
<header> <header>