ari/arimelody.me
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

major UI/UX improvements

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

140
api/v1/music/music.go
View file

@ -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",

8
api/v1/music/music_types.go
View file

@ -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 {

8
main.go
View file

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

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

12
public/script/main.js
View file

@ -1,5 +1,4 @@
const header_links = document.getElementById("header-links");
const hamburger = document.getElementById("header-links-toggle");
import "./header.js";
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");
}
});

8
public/script/music-gateway.js
View file

@ -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("");
result = chars.map((c, i) => `<span style="animation-delay: -${i * 100}ms;">${c}</span>`);
const chars = tag.innerText.split("");
const result = chars.map((c, i) => `<span style="animation-delay: -${i * 100}ms;">${c}</span>`);
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;
}

373
public/style/main.css
View file

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

167
public/style/music-gateway.css
View file

@ -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;
top: 1rem;
position: fixed;
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%;
max-width: 512px;
width: 360px;
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;
color: #eee
font-size: 1.2em;
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;
max-height: 40vh;
width: 50vw;
height: auto;
}
#vertical-line {
display: none;
}
#music-container #info {
width: 100%
div#info {
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 {

2
public/style/music.css
View file

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

4
views/header.html
View file

@ -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" />

6
views/index.html
View file

@ -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 src="/script/accessibility.js" defer></script>
<script type="module" src="/script/main.js" defer></script>
<script type="application/javascript" src="/script/accessibility.js" defer></script>
<link rel="me" href="https://wetdry.world/@ari">
</head>
<body>

49
views/music-gateway.html
View file

@ -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="text/javascript" src="/script/prideflag.js" defer=""></script>
<script type="module" src="/script/music-gateway.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>
<p>made with &#10084; by <a href="/" target="_blank">ari melody</a>, 2024</p>
</footer>
{{block "footer" .}}{{end}}
</body>
</html>

6
views/music.html
View file

@ -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 src="/script/accessibility.js" defer></script>
<script src="/script/music.js" defer></script>
<script type="module" src="/script/main.js" defer></script>
<script type="application/javascript" src="/script/accessibility.js" defer></script>
<script type="application/javascript" src="/script/music.js" defer></script>
</head>
<body>
<header>