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

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

Browse source 
Signed-off-by: ari melody <ari@arimelody.me>
This commit is contained in:
ari melody 2024-03-21 05:19:18 +00:00
parent 6ec813dd58
commit 18c13699af
17 changed files with 593 additions and 496 deletions
Download patch file Download diff file Expand all files Collapse all files

1
public/script/lib/htmx.min.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

8
public/script/main.js
View file

@ -55,3 +55,11 @@ function fill_list(list) {
fill_list(e);
});
document.addEventListener("htmx:afterSwap", async event => {
const res = await event.detail.xhr.response;
var new_head = res.substring(res.indexOf("<head>")+1, res.indexOf("</head>"));
if (new_head) {
document.head.innerHTML = new_head;
}
window.scrollY = 0;
});

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

@ -28,6 +28,34 @@ function apply_funny_bob_to_upcoming_tags() {
}
}
const extras_pairs = Array.from(document.querySelectorAll("div#info > div").values().map(container => {
return {
container,
button: document.getElementById("extras").querySelector(`ul li a[href="#${container.id}"]`)
};
}));
const info_container = document.getElementById("info")
info_container.addEventListener("scroll", update_extras_buttons);
function update_extras_buttons() {
console.clear();
const info_rect = info_container.getBoundingClientRect();
const info_y = info_rect.y;
const font_size = parseFloat(getComputedStyle(document.documentElement).fontSize);
console.log("info_y: " + info_y);
let current = extras_pairs[0];
extras_pairs.forEach(pair => {
pair.button.classList.remove("active");
const scroll_diff = pair.container.getBoundingClientRect().y -
info_rect.y -
info_rect.height / 2 +
4 * font_size;
if (scroll_diff <= 0) current = pair;
console.log(`${pair.container.id}: ${scroll_diff}`);
})
current.button.classList.add("active");
}
update_extras_buttons();
document.querySelectorAll("div#extras ul li a[href]").forEach(link => {
link.addEventListener("click", event => {
event.preventDefault();

2
public/script/prideflag.js
View file

@ -63,4 +63,4 @@ function load_pride_flag_style() {
load_pride_flag_style();
pride_flag = create_pride_flag();
document.body.appendChild(pride_flag);
document.querySelector("main").appendChild(pride_flag);

3
public/style/index.css
View file

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

3
public/style/main.css
View file

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

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

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