add release credits update UI
Signed-off-by: ari melody <ari@arimelody.me>
This commit is contained in:
parent
7914fba52a
commit
34cddcfdb2
27 changed files with 630 additions and 340 deletions
9
public/img/external-link.svg
Normal file
9
public/img/external-link.svg
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg width="100%" height="100%" viewBox="0 0 128 128" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
||||
<g transform="matrix(1,0,0,1,-8,-8)">
|
||||
<g transform="matrix(0.9375,0,0,0.9375,8,16)">
|
||||
<path d="M110.222,70.621C110.222,68.866 111.298,67.289 112.932,66.649C114.567,66.008 116.427,66.434 117.62,67.723L126.864,77.707C127.594,78.495 128,79.53 128,80.605L128,96C128,113.661 113.661,128 96,128L32,128C14.339,128 0,113.661 0,96L0,32C0,14.339 14.339,0 32,0L47.395,0C48.47,-0 49.505,0.406 50.293,1.136L60.277,10.38C61.566,11.573 61.992,13.433 61.351,15.068C60.711,16.702 59.134,17.778 57.379,17.778L32,17.778C24.151,17.778 17.778,24.151 17.778,32L17.778,96C17.778,103.849 24.151,110.222 32,110.222L96,110.222C103.849,110.222 110.222,103.849 110.222,96L110.222,70.621ZM65.524,82.956C64.724,83.756 63.638,84.206 62.507,84.206C61.375,84.206 60.29,83.757 59.49,82.956L45.044,68.51C44.243,67.71 43.794,66.625 43.794,65.493C43.794,64.362 44.244,63.276 45.044,62.476L92.16,15.36L75.55,-1.25C74.33,-2.47 73.965,-4.305 74.625,-5.899C75.286,-7.494 76.842,-8.533 78.567,-8.533L132.267,-8.533C133.398,-8.533 134.484,-8.084 135.284,-7.284C136.084,-6.483 136.533,-5.398 136.533,-4.267L136.533,49.433C136.533,51.158 135.494,52.714 133.899,53.375C132.305,54.035 130.47,53.67 129.25,52.45L112.64,35.84L65.524,82.956Z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
|
|
@ -2,84 +2,72 @@ import "./header.js";
|
|||
import "./config.js";
|
||||
|
||||
function type_out(e) {
|
||||
const text = e.innerText;
|
||||
const original = e.innerHTML;
|
||||
e.innerText = "";
|
||||
const delay = 25;
|
||||
let chars = 0;
|
||||
const text = e.innerText;
|
||||
const original = e.innerHTML;
|
||||
const delay = 25;
|
||||
let chars = 0;
|
||||
|
||||
function insert_char(character, parent) {
|
||||
const c = document.createElement("span");
|
||||
c.innerText = character;
|
||||
parent.appendChild(c);
|
||||
c.classList.add("newchar");
|
||||
function insert_char(character, parent) {
|
||||
if (chars == 0) parent.innerHTML = "";
|
||||
const c = document.createElement("span");
|
||||
c.innerText = character;
|
||||
parent.appendChild(c);
|
||||
c.classList.add("newchar");
|
||||
}
|
||||
|
||||
function normalize() {
|
||||
e.innerHTML = original;
|
||||
}
|
||||
|
||||
function increment_char() {
|
||||
const newchar = text.substring(chars, chars + 1);
|
||||
insert_char(newchar, e);
|
||||
chars++;
|
||||
if (chars <= text.length) {
|
||||
setTimeout(increment_char, delay);
|
||||
} else {
|
||||
setTimeout(normalize, 250);
|
||||
}
|
||||
}
|
||||
|
||||
function normalize() {
|
||||
e.innerHTML = original;
|
||||
}
|
||||
|
||||
function increment_char() {
|
||||
const newchar = text.substring(chars - 1, chars);
|
||||
insert_char(newchar, e);
|
||||
chars++;
|
||||
if (chars <= text.length) {
|
||||
setTimeout(increment_char, delay);
|
||||
} else {
|
||||
setTimeout(normalize, 250);
|
||||
}
|
||||
}
|
||||
|
||||
increment_char();
|
||||
increment_char();
|
||||
}
|
||||
|
||||
function fill_list(list) {
|
||||
const items = list.querySelectorAll("li a, li span");
|
||||
items.innerText = "";
|
||||
const delay = 100;
|
||||
const items = list.querySelectorAll("li a, li span");
|
||||
items.innerText = "";
|
||||
const delay = 100;
|
||||
|
||||
items.forEach((item, iter) => {
|
||||
item.style.animationDelay = `${iter * delay}ms`;
|
||||
item.style.animationPlayState = "playing";
|
||||
});
|
||||
items.forEach((item, iter) => {
|
||||
item.style.animationDelay = `${iter * delay}ms`;
|
||||
item.style.animationPlayState = "playing";
|
||||
});
|
||||
}
|
||||
|
||||
function start() {
|
||||
[...document.querySelectorAll("h1, h2, h3, h4, h5, h6")]
|
||||
.filter((e) => e.innerText != "")
|
||||
.forEach((e) => {
|
||||
type_out(e);
|
||||
});
|
||||
[...document.querySelectorAll("ol, ul")]
|
||||
.filter((e) => e.innerText != "")
|
||||
.forEach((e) => {
|
||||
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;
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
[...document.querySelectorAll(".typeout")]
|
||||
.filter((e) => e.innerText != "")
|
||||
.forEach((e) => {
|
||||
type_out(e);
|
||||
console.log(e);
|
||||
});
|
||||
[...document.querySelectorAll("ol, ul")]
|
||||
.filter((e) => e.innerText != "")
|
||||
.forEach((e) => {
|
||||
fill_list(e);
|
||||
});
|
||||
|
||||
const top_button = document.getElementById("backtotop");
|
||||
window.onscroll = () => {
|
||||
if (!top_button) return;
|
||||
const btt_threshold = 100;
|
||||
if (
|
||||
document.body.scrollTop > btt_threshold ||
|
||||
document.documentElement.scrollTop > btt_threshold
|
||||
) {
|
||||
top_button.classList.add("active");
|
||||
} else {
|
||||
top_button.classList.remove("active");
|
||||
}
|
||||
const top_button = document.getElementById("backtotop");
|
||||
window.onscroll = () => {
|
||||
if (!top_button) return;
|
||||
const btt_threshold = 100;
|
||||
if (
|
||||
document.body.scrollTop > btt_threshold ||
|
||||
document.documentElement.scrollTop > btt_threshold
|
||||
) {
|
||||
top_button.classList.add("active");
|
||||
} else {
|
||||
top_button.classList.remove("active");
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener("swap", () => {
|
||||
start();
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,117 +0,0 @@
|
|||
const swap_event = new Event("swap");
|
||||
|
||||
let caches = {};
|
||||
|
||||
async function cached_fetch(url) {
|
||||
let cached = caches[url];
|
||||
|
||||
const res = cached === undefined ? await fetch(url) : await fetch(url, {
|
||||
headers: {
|
||||
"If-Modified-Since": cached.last_modified
|
||||
}
|
||||
});
|
||||
|
||||
if (res.status === 304 && cached !== undefined) {
|
||||
return cached.content;
|
||||
}
|
||||
if (res.status !== 200) return;
|
||||
if (!res.headers.get("content-type").startsWith("text/html")) return;
|
||||
|
||||
const text = await res.text();
|
||||
if (res.headers.get("last-modified")) {
|
||||
caches[url] = {
|
||||
content: text,
|
||||
last_modified: res.headers.get("last-modified")
|
||||
}
|
||||
}
|
||||
return text;
|
||||
}
|
||||
|
||||
async function swap(url, stateful) {
|
||||
if (typeof url !== 'string') return;
|
||||
|
||||
const segments = window.location.href.split("/");
|
||||
if (url.startsWith(window.location.origin) && segments[segments.length - 1].includes("#")) {
|
||||
window.location.href = url;
|
||||
return;
|
||||
}
|
||||
|
||||
if (stateful && window.location.href.endsWith(url)) return;
|
||||
|
||||
const text = await cached_fetch(url);
|
||||
const content = new DOMParser().parseFromString(text, "text/html");
|
||||
|
||||
const stylesheets = [...content.querySelectorAll("link[rel='stylesheet']")];
|
||||
|
||||
// swap title
|
||||
document.title = content.title;
|
||||
// swap body html
|
||||
document.body.innerHTML = content.body.innerHTML;
|
||||
// swap stylesheets
|
||||
const old_sheets = document.head.querySelectorAll("link[rel='stylesheet']");
|
||||
stylesheets.forEach(stylesheet => {
|
||||
let exists = false;
|
||||
old_sheets.forEach(old_sheet => {
|
||||
if (old_sheet.href === stylesheet.href) exists = true;
|
||||
});
|
||||
if (!exists) document.head.appendChild(stylesheet);
|
||||
});
|
||||
old_sheets.forEach(old_sheet => {
|
||||
let exists = false;
|
||||
stylesheets.forEach(stylesheet => {
|
||||
if (stylesheet.href === old_sheet.href) exists = true;
|
||||
});
|
||||
if (!exists) old_sheet.remove();
|
||||
});
|
||||
// push history
|
||||
if (stateful) history.pushState(url, "", url);
|
||||
|
||||
bind(document.body);
|
||||
}
|
||||
|
||||
function bind(content) {
|
||||
if (typeof content !== 'object' || content.nodeType !== Node.ELEMENT_NODE) return;
|
||||
|
||||
content.querySelectorAll("[swap-url]").forEach(element => {
|
||||
const href = element.attributes.getNamedItem('swap-url').value;
|
||||
|
||||
element.addEventListener("click", event => {
|
||||
event.preventDefault();
|
||||
swap(href, true);
|
||||
});
|
||||
|
||||
[...element.querySelectorAll("a[href], [swap-url]")].forEach(element => {
|
||||
if (element.href) {
|
||||
if (!element.href.endsWith(href)) return;
|
||||
element.attributes.removeNamedItem("href");
|
||||
}
|
||||
const swap_url = element.attributes.getNamedItem("swap-url");
|
||||
if (swap_url) {
|
||||
if (!swap_url.endsWith(href)) return;
|
||||
element.attributes.removeNamedItem("swap-url");
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
content.querySelectorAll("a[href]:not([swap-url])").forEach(element => {
|
||||
if (element.href.includes("#")) return;
|
||||
if (!element.href.startsWith(window.location.origin)) return;
|
||||
const href = element.href.substring(window.location.origin.length);
|
||||
if (href.includes(".")) return;
|
||||
|
||||
element.addEventListener("click", event => {
|
||||
event.preventDefault();
|
||||
swap(element.href, true);
|
||||
});
|
||||
});
|
||||
|
||||
document.dispatchEvent(swap_event);
|
||||
}
|
||||
|
||||
window.addEventListener("popstate", event => {
|
||||
swap(event.state, false);
|
||||
});
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
bind(document.body);
|
||||
});
|
||||
1
public/script/vendor/htmx.min.js
vendored
Normal file
1
public/script/vendor/htmx.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -4,131 +4,136 @@
|
|||
@import url("/style/prideflag.css");
|
||||
|
||||
@font-face {
|
||||
font-family: "Monaspace Argon";
|
||||
src: url("/font/monaspace-argon/MonaspaceArgonVarVF[wght,wdth,slnt].woff2") format("woff2-variations");
|
||||
font-weight: 125 950;
|
||||
font-stretch: 75% 125%;
|
||||
font-style: oblique 0deg 20deg;
|
||||
font-family: "Monaspace Argon";
|
||||
src: url("/font/monaspace-argon/MonaspaceArgonVarVF[wght,wdth,slnt].woff2") format("woff2-variations");
|
||||
font-weight: 125 950;
|
||||
font-stretch: 75% 125%;
|
||||
font-style: oblique 0deg 20deg;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: #080808;
|
||||
color: #eee;
|
||||
font-family: "Monaspace Argon", monospace;
|
||||
font-size: 18px;
|
||||
text-shadow: 0 0 3em;
|
||||
scroll-behavior: smooth;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: #080808;
|
||||
color: #eee;
|
||||
font-family: "Monaspace Argon", monospace;
|
||||
font-size: 18px;
|
||||
text-shadow: 0 0 3em;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
main {
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--links);
|
||||
text-decoration: none;
|
||||
color: var(--links);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a.link-button {
|
||||
padding: .3em .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;
|
||||
padding: .3em .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;
|
||||
}
|
||||
|
||||
a.link-button:hover {
|
||||
color: #eee;
|
||||
border-color: #eee;
|
||||
background-color: var(--links) !important;
|
||||
text-decoration: none;
|
||||
box-shadow: 0 0 1em var(--links);
|
||||
color: #eee;
|
||||
border-color: #eee;
|
||||
background-color: var(--links) !important;
|
||||
text-decoration: none;
|
||||
box-shadow: 0 0 1em var(--links);
|
||||
}
|
||||
|
||||
a img {
|
||||
height: .9em;
|
||||
transform: translateY(.1em);
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 1em;
|
||||
color: #aaa;
|
||||
font-size: 1em;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
span.newchar {
|
||||
animation: newchar 0.25s;
|
||||
animation: newchar 0.25s;
|
||||
}
|
||||
|
||||
a#backtotop {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
padding: .5em .8em;
|
||||
display: block;
|
||||
border-radius: 2px;
|
||||
border: 1px solid transparent;
|
||||
text-decoration: none;
|
||||
opacity: .5;
|
||||
transition-property: opacity, transform, border-color, background-color, color;
|
||||
transition-duration: .2s;
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
padding: .5em .8em;
|
||||
display: block;
|
||||
border-radius: 2px;
|
||||
border: 1px solid transparent;
|
||||
text-decoration: none;
|
||||
opacity: .5;
|
||||
transition-property: opacity, transform, border-color, background-color, color;
|
||||
transition-duration: .2s;
|
||||
}
|
||||
|
||||
a#backtotop.active {
|
||||
top: 4rem;
|
||||
top: 4rem;
|
||||
}
|
||||
|
||||
a#backtotop:hover {
|
||||
color: #eee;
|
||||
border-color: #eee;
|
||||
background-color: var(--links);
|
||||
box-shadow: 0 0 1em var(--links);
|
||||
opacity: 1;
|
||||
color: #eee;
|
||||
border-color: #eee;
|
||||
background-color: var(--links);
|
||||
box-shadow: 0 0 1em var(--links);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@keyframes newchar {
|
||||
from {
|
||||
background: #fff8;
|
||||
}
|
||||
from {
|
||||
background: #fff8;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes list-item-fadein {
|
||||
from {
|
||||
opacity: 1;
|
||||
background: #fff8;
|
||||
}
|
||||
from {
|
||||
opacity: 1;
|
||||
background: #fff8;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
background: transparent;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
#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;
|
||||
mix-blend-mode: 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;
|
||||
mix-blend-mode: overlay;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 780px) {
|
||||
body {
|
||||
font-size: 14px;
|
||||
}
|
||||
body {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
main {
|
||||
margin-top: 4rem;
|
||||
}
|
||||
main {
|
||||
margin-top: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -459,6 +459,12 @@ div#extras ul li a.active {
|
|||
display: none;
|
||||
}
|
||||
|
||||
.album-track-subheading {
|
||||
width: fit-content;
|
||||
padding: .3em 1em;
|
||||
background: #101010;
|
||||
}
|
||||
|
||||
footer {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue