merge main into feature/accountsettings

This commit is contained in:
ari melody 2025-01-22 11:40:44 +00:00
commit cee99a6932
Signed by: ari
GPG key ID: CF99829C92678188
9 changed files with 355 additions and 315 deletions

View file

@ -1,42 +1,33 @@
function toggle_config_setting(config, name) { const DEFAULT_CONFIG = {
if (config[name]) { crt: false
delete config[name]; };
update_config(config); const config = (() => {
return true; let saved = localStorage.getItem("config");
} if (saved) {
config[name] = true; const config = JSON.parse(saved);
update_config(config); setCRT(config.crt || DEFAULT_CONFIG.crt);
return true; return config;
} }
function set_config_setting(config, name, value) { localStorage.setItem("config", JSON.stringify(DEFAULT_CONFIG));
config[name] = value; return DEFAULT_CONFIG;
update_config(config); })();
return true;
}
function clear_config_setting(config, name) { function saveConfig() {
if (!config[name]) return false; localStorage.setItem("config", JSON.stringify(config));
delete config[name];
update_config(config);
return true;
}
function update_config(config) {
localStorage.setItem("config", JSON.stringify(config));
}
const config = JSON.parse(localStorage.getItem("config")) || {};
if (config) {
if (config.disable_crt) {
document.querySelector('div#overlay').setAttribute("hidden", true);
document.body.style.textShadow = "none";
document.getElementById('toggle-crt').classList.add("disabled");
}
} }
document.getElementById("toggle-crt").addEventListener("click", () => { document.getElementById("toggle-crt").addEventListener("click", () => {
toggle_config_setting(config, "disable_crt"); config.crt = !config.crt;
document.querySelector('div#overlay').toggleAttribute("hidden"); setCRT(config.crt);
document.getElementById('toggle-crt').className = config.disable_crt ? "disabled" : ""; saveConfig();
}); });
function setCRT(/** @type boolean */ enabled) {
if (enabled) {
document.body.classList.add("crt");
} else {
document.body.classList.remove("crt");
}
document.getElementById('toggle-crt').className = enabled ? "" : "disabled";
}

16
public/script/index.js Normal file
View file

@ -0,0 +1,16 @@
const hexPrimary = document.getElementById("hex-primary");
const hexSecondary = document.getElementById("hex-secondary");
const hexTertiary = document.getElementById("hex-tertiary");
function updateHexColours() {
const style = getComputedStyle(document.body);
hexPrimary.textContent = style.getPropertyValue('--primary');
hexSecondary.textContent = style.getPropertyValue('--secondary');
hexTertiary.textContent = style.getPropertyValue('--tertiary');
}
updateHexColours();
window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", () => {
updateHexColours();
});

View file

@ -1,19 +1,34 @@
:root { :root {
--primary: #b7fd49; --background: #080808;
--secondary: #f8e05b; --on-background: #f0f0f0;
--tertiary: #f788fe;
--links: #5eb2ff; --primary: #b7fd49;
--secondary: #f8e05b;
--tertiary: #f788fe;
--links: #5eb2ff;
}
@media (prefers-color-scheme: light) {
:root {
--background: #ffffff;
--on-background: #101010;
--primary: #6d9e23;
--secondary: #a5911e;
--tertiary: #a92cb1;
--links: #3ba1ff;
}
} }
.col-primary { .col-primary {
color: var(--primary); color: var(--primary);
} }
.col-secondary { .col-secondary {
color: var(--secondary); color: var(--secondary);
} }
.col-tertiary { .col-tertiary {
color: var(--tertiary); color: var(--tertiary);
} }

View file

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

View file

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

View file

@ -14,15 +14,17 @@
body { body {
margin: 0; margin: 0;
padding: 0; padding: 0;
background: #080808; background: var(--background);
color: #eee; color: var(--on-background);
font-family: "Monaspace Argon", monospace; font-family: "Monaspace Argon", monospace;
font-size: 18px; font-size: 18px;
text-shadow: 0 0 3em;
scroll-behavior: smooth; scroll-behavior: smooth;
transition: color .2s, background-color .2s;
} }
main { body.crt #overlay {
display: block;
} }
a { a {
@ -118,6 +120,7 @@ a#backtotop:hover {
left: 0; left: 0;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
display: none;
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-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-size: 100vw .2em;
background-repeat: repeat; background-repeat: repeat;
@ -136,3 +139,27 @@ a#backtotop:hover {
} }
} }
@media (prefers-color-scheme: light) {
a.link-button:hover {
box-shadow: none;
}
@keyframes list-item-fadein {
from {
opacity: 1;
background: var(--links);
}
to {
opacity: 1;
background: transparent;
}
}
}
@media (prefers-color-scheme: dark) {
body.crt {
text-shadow: 0 0 3em;
}
}

View file

@ -17,6 +17,10 @@ body {
font-family: "Monaspace Argon", monospace; font-family: "Monaspace Argon", monospace;
} }
header {
background-color: #111;
}
#background { #background {
position: fixed; position: fixed;
top: 0; top: 0;
@ -258,7 +262,7 @@ div#info p {
#title, #title,
#artist { #artist {
text-shadow: 0 .05em 2px #0004 text-shadow: 0 .05em 2px #0004;
} }
#type { #type {

View file

@ -1,146 +1,129 @@
main { main {
width: min(calc(100% - 4rem), 720px); width: min(calc(100% - 4rem), 720px);
min-height: calc(100vh - 10.3rem); min-height: calc(100vh - 10.3rem);
margin: 0 auto 2rem auto; margin: 0 auto 2rem auto;
padding-top: 4rem; padding-top: 4rem;
} }
main nav { main nav {
margin: -1rem .5rem 1rem .5rem; margin: -1rem .5rem 1rem .5rem;
} }
div.music { div.music {
margin-bottom: 1rem; margin-bottom: 1rem;
padding: 1.5rem; padding: 1.5rem;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: 1.5em; gap: 1.5em;
border: 1px solid #222; border: 1px solid #8882;
border-radius: 4px; border-radius: 4px;
background-color: #ffffff08; background-color: #ffffff08;
transition: background-color .1s; transition: background-color .1s;
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
} }
div.music:hover { div.music:hover {
background-color: #fff1; background-color: #fff1;
} }
div.music a { div.music a {
text-decoration: none; text-decoration: none;
} }
.music h1:hover, .music h1:hover,
.music h2:hover, .music h2:hover,
.music h3:hover { .music h3:hover {
background: initial; background: initial;
} }
.music-artwork img { .music-artwork img {
border: 1px solid #888; border: 1px solid #8888;
} }
.music-title { .music-title {
margin: 0; margin: 0;
color: #eee; color: var(--on-background);
font-size: 1.6em; font-size: 1.6em;
line-height: 1.6em; line-height: 1.6em;
}
.music-title a {
color: inherit;
transition: color .2s;
} }
.music-year { .music-year {
color: #888; color: #888;
} }
.music-artist { .music-artist {
margin: -.5rem 0 0 0; margin: -.5rem 0 0 0;
font-size: 1em; font-size: 1em;
color: #aaa; color: #aaa;
} }
h3[class^=music-type] { h3[class^=music-type] {
margin: 0 0 1rem 0; margin: 0 0 1rem 0;
font-size: .8em; font-size: .8em;
color: #eee; color: #eee;
transition: color .2s;
} }
h3.music-type-single { h3.music-type-single {
color: var(--tertiary); color: var(--tertiary);
} }
h3.music-type-compilation { h3.music-type-compilation {
color: var(--secondary); color: var(--secondary);
} }
h3.music-type-album { h3.music-type-album {
color: var(--primary); color: var(--primary);
} }
h3.music-type-upcoming { h3.music-type-upcoming {
color: #f47070; color: #f47070;
} }
.music-links { .music-links {
width: fit-content; width: fit-content;
margin: .5em 0; margin: .5em 0;
padding: 0; padding: 0;
display: flex; display: flex;
gap: .5rem; gap: .5rem;
flex-wrap: wrap; flex-wrap: wrap;
line-height: 1.7em; line-height: 1.7em;
justify-content: center; justify-content: center;
} }
.music-links li { .music-links li {
list-style: none; list-style: none;
} }
/*
.music-links li a {
padding: .2em .5em;
border: 1px solid #65b4fd;
color: #65b4fd;
border-radius: 2px;
background-color: transparent;
transition-property: color, border-color, background-color;
transition-duration: .2s;
animation: list-item-fadein .2s forwards;
animation-delay: 0s;
opacity: 0;
}
.music-links li a:hover {
color: #eee;
border-color: #eee;
background-color: var(--links) !important;
text-decoration: none;
}
*/
h2.question { h2.question {
margin: 1rem 0; margin: 1rem 0;
padding: 1rem 1.5rem; padding: 1rem 1.5rem;
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
} }
div.answer { div.answer {
margin: -1rem 0 1rem 0; margin: -1rem 0 1rem 0;
padding: .5em 1.5em; padding: .5em 1.5em;
border-radius: 4px; border-radius: 4px;
} }
@media screen and (max-width: 740px) { @media screen and (max-width: 740px) {
div.music { div.music {
flex-direction: column; flex-direction: column;
} }
.music-artwork, .music-artwork,
.music-details { .music-details {
text-align: center; text-align: center;
align-items: center; align-items: center;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
} }

View file

@ -16,6 +16,8 @@
<link rel="me" href="https://ice.arimelody.me/@ari"> <link rel="me" href="https://ice.arimelody.me/@ari">
<link rel="me" href="https://wetdry.world/@ari"> <link rel="me" href="https://wetdry.world/@ari">
<script type="module" src="/script/index.js" defer> </script>
{{end}} {{end}}
{{define "content"}} {{define "content"}}
@ -66,9 +68,9 @@
<strong>my colours 🌈</strong> <strong>my colours 🌈</strong>
</p> </p>
<ul> <ul>
<li>primary: <span class="col-primary">#b7fd49</span></li> <li>primary: <span class="col-primary" id="hex-primary">#b7fd49</span></li>
<li>secondary: <span class="col-secondary">#f8e05b</span></li> <li>secondary: <span class="col-secondary" id="hex-secondary">#f8e05b</span></li>
<li>tertiary: <span class="col-tertiary">#f788fe</span></li> <li>tertiary: <span class="col-tertiary" id="hex-tertiary">#f788fe</span></li>
</ul> </ul>
<p> <p>