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

merge main into feature/accountsettings

Browse source
This commit is contained in:
ari melody 2025-01-22 11:40:44 +00:00
parent 0052c470f9 c6afc274c2
commit cee99a6932
Signed by: ari
GPG key ID: CF99829C92678188
9 changed files with 355 additions and 315 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

63
public/script/config.js
View file

@ -1,42 +1,33 @@
function toggle_config_setting(config, name) {
if (config[name]) {
delete config[name];
update_config(config);
return true;
}
config[name] = true;
update_config(config);
return true;
}
const DEFAULT_CONFIG = {
crt: false
};
const config = (() => {
let saved = localStorage.getItem("config");
if (saved) {
const config = JSON.parse(saved);
setCRT(config.crt || DEFAULT_CONFIG.crt);
return config;
}
function set_config_setting(config, name, value) {
config[name] = value;
update_config(config);
return true;
}
localStorage.setItem("config", JSON.stringify(DEFAULT_CONFIG));
return DEFAULT_CONFIG;
})();
function clear_config_setting(config, name) {
if (!config[name]) return false;
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");
}
function saveConfig() {
localStorage.setItem("config", JSON.stringify(config));
}
document.getElementById("toggle-crt").addEventListener("click", () => {
toggle_config_setting(config, "disable_crt");
document.querySelector('div#overlay').toggleAttribute("hidden");
document.getElementById('toggle-crt').className = config.disable_crt ? "disabled" : "";
config.crt = !config.crt;
setCRT(config.crt);
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();
});

29
public/style/colours.css
View file

@ -1,19 +1,34 @@
:root {
--primary: #b7fd49;
--secondary: #f8e05b;
--tertiary: #f788fe;
--links: #5eb2ff;
--background: #080808;
--on-background: #f0f0f0;
--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 {
color: var(--primary);
color: var(--primary);
}
.col-secondary {
color: var(--secondary);
color: var(--secondary);
}
.col-tertiary {
color: var(--tertiary);
color: var(--tertiary);
}

242
public/style/header.css
View file

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

122
public/style/index.css
View file

@ -1,43 +1,43 @@
main {
width: min(calc(100% - 4rem), 720px);
min-height: calc(100vh - 10.3rem);
margin: 0 auto 2rem auto;
padding-top: 4rem;
width: min(calc(100% - 4rem), 720px);
min-height: calc(100vh - 10.3rem);
margin: 0 auto 2rem auto;
padding-top: 4rem;
}
main h1 {
line-height: 3rem;
color: var(--primary);
line-height: 3rem;
color: var(--primary);
}
main h2 {
color: var(--secondary);
color: var(--secondary);
}
main h3 {
color: var(--tertiary);
color: var(--tertiary);
}
div#me_irl {
width: fit-content;
height: fit-content;
border: 2px solid white;
width: fit-content;
height: fit-content;
border: 2px solid white;
}
div#me_irl img {
display: block;
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;
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,
@ -49,7 +49,7 @@ h6,
p,
small,
blockquote {
transition: background-color 0.1s;
transition: background-color 0.1s;
}
h1 a,
@ -58,7 +58,7 @@ h3 a,
h4 a,
h5 a,
h6 a {
color: inherit;
color: inherit;
}
h1 a:hover,
@ -67,7 +67,7 @@ h3 a:hover,
h4 a:hover,
h5 a:hover,
h6 a:hover {
text-decoration: none;
text-decoration: none;
}
main h1:hover,
@ -79,72 +79,72 @@ main h6:hover,
main p:hover,
main small:hover,
main blockquote:hover {
background-color: #fff1;
background-color: #fff1;
}
blockquote {
margin: 1rem 0;
padding: 0 2.5rem;
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;
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;
display: flex;
gap: 1em .5em;
flex-wrap: wrap;
}
ul.links li {
list-style: none;
list-style: none;
}
ul.links li a {
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;
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;
}
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);
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;
margin: 2rem 0;
}
#web-buttons a {
text-decoration: none;
text-decoration: none;
}
#web-buttons img {
image-rendering: auto;
image-rendering: crisp-edges;
image-rendering: pixelated;
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;
margin: -1px;
border: 1px solid #eee;
transform: translate(-2px, -2px);
box-shadow: 1px 1px 0 #eee, 2px 2px 0 #eee;
}

35
public/style/main.css
View file

@ -14,15 +14,17 @@
body {
margin: 0;
padding: 0;
background: #080808;
color: #eee;
background: var(--background);
color: var(--on-background);
font-family: "Monaspace Argon", monospace;
font-size: 18px;
text-shadow: 0 0 3em;
scroll-behavior: smooth;
transition: color .2s, background-color .2s;
}
main {
body.crt #overlay {
display: block;
}
a {
@ -118,6 +120,7 @@ a#backtotop:hover {
left: 0;
width: 100vw;
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-size: 100vw .2em;
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;
}
}

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

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

149
public/style/music.css
View file

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

8
views/index.html
View file

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