ari/arimelody.me-static
ari/arimelody.me-static
Archived
1
0
Fork 0
Code Issues 1 Pull requests Actions Projects Wiki Activity

toggleable crt effect (accessibility)! (also better mobile support)

Browse source
This commit is contained in:
ari melody 2023-10-15 04:23:53 +01:00
parent a2eec46ae4
commit 0369773a6e
Signed by: ari
GPG key ID: CF99829C92678188
7 changed files with 113 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
public/img/toggle_crt.svg Normal file
View file

@ -0,0 +1 @@
<?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 29 29" 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;"><path d="M29,2.5l0,16c0,1.38 -1.12,2.5 -2.5,2.5l-24,-0c-1.38,-0 -2.5,-1.12 -2.5,-2.5l-0,-16c-0,-1.38 1.12,-2.5 2.5,-2.5l24,-0c1.38,-0 2.5,1.12 2.5,2.5Zm-1,0c0,-0.828 -0.672,-1.5 -1.5,-1.5l-24,-0c-0.828,-0 -1.5,0.672 -1.5,1.5l0,16c0,0.828 0.672,1.5 1.5,1.5l24,-0c0.828,-0 1.5,-0.672 1.5,-1.5l0,-16Zm-24.5,2.5c-0.276,-0 -0.5,-0.224 -0.5,-0.5c0,-0.276 0.224,-0.5 0.5,-0.5l22,0c0.276,-0 0.5,0.224 0.5,0.5c0,0.276 -0.224,0.5 -0.5,0.5l-22,0Zm0,3c-0.276,0 -0.5,-0.224 -0.5,-0.5c-0,-0.276 0.224,-0.5 0.5,-0.5l22,-0c0.276,0 0.5,0.224 0.5,0.5c-0,0.276 -0.224,0.5 -0.5,0.5l-22,-0Zm0,9c-0.276,0 -0.5,-0.224 -0.5,-0.5c-0,-0.276 0.224,-0.5 0.5,-0.5l22,-0c0.276,0 0.5,0.224 0.5,0.5c-0,0.276 -0.224,0.5 -0.5,0.5l-22,-0Zm-0,-3c-0.276,-0 -0.5,-0.224 -0.5,-0.5c0,-0.276 0.224,-0.5 0.5,-0.5l22,0c0.276,-0 0.5,0.224 0.5,0.5c0,0.276 -0.224,0.5 -0.5,0.5l-22,0Zm-0,-3c-0.276,-0 -0.5,-0.224 -0.5,-0.5c0,-0.276 0.224,-0.5 0.5,-0.5l22,0c0.276,-0 0.5,0.224 0.5,0.5c0,0.276 -0.224,0.5 -0.5,0.5l-22,0Zm25.5,14.5l0,1c0,1.38 -1.12,2.5 -2.5,2.5l-24,0c-1.38,0 -2.5,-1.12 -2.5,-2.5l-0,-1c-0,-1.38 1.12,-2.5 2.5,-2.5l24,0c1.38,0 2.5,1.12 2.5,2.5Zm-1,0c0,-0.828 -0.672,-1.5 -1.5,-1.5l-24,0c-0.828,0 -1.5,0.672 -1.5,1.5l0,1c0,0.828 0.672,1.5 1.5,1.5l24,0c0.828,0 1.5,-0.672 1.5,-1.5l0,-1Z" style="fill:#fff;"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.7 KiB

6
public/index.html
View file

@ -20,7 +20,8 @@
<link rel="stylesheet" href="style/main.css">
<script src="script/main.js" defer="defer"></script>
<script src="/script/main.js" defer></script>
<script src="/script/accessibility.js" defer></script>
<link rel="me" href="https://wetdry.world/@ari">
</head>
<body>
@ -49,6 +50,9 @@
<!-- coming later! -->
<span title="coming later!">art</span>
</li>
<li>
<img src="/img/toggle_crt.svg" alt="" id="toggle-crt" width="24" height="24">
</li>
</ul>
</div>
</header>

14
public/music.html
View file

@ -9,6 +9,8 @@
<title>music - ari melody 💫</title>
<link rel="shortcut icon" href="/img/favicon.png" type="image/x-icon">
<meta name="description" content="music from your local SPACEGIRL 💫">
<meta property="og:title" content="ari melody music">
<meta property="og:type" content="website">
<meta property="og:url" content="www.arimelody.me/music">
@ -19,13 +21,14 @@
<link rel="stylesheet" href="/style/main.css">
<link rel="stylesheet" href="/style/music.css">
<script src="/script/main.js" defer="defer"></script>
<script src="/script/music.js" defer="defer"></script>
<script src="/script/main.js" defer></script>
<script src="/script/accessibility.js" defer></script>
<script src="/script/music.js" defer></script>
</head>
<body>
<header>
<div id="header">
<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>
@ -48,6 +51,11 @@
<!-- coming later! -->
<span title="coming later!">art</span>
</li>
<li id="toggle-crt" title="toggle CRT effect">
<svg width="24" height="24" viewBox="0 0 29 29" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="M29,2.5l0,16c0,1.38 -1.12,2.5 -2.5,2.5l-24,-0c-1.38,-0 -2.5,-1.12 -2.5,-2.5l-0,-16c-0,-1.38 1.12,-2.5 2.5,-2.5l24,-0c1.38,-0 2.5,1.12 2.5,2.5Zm-1,0c0,-0.828 -0.672,-1.5 -1.5,-1.5l-24,-0c-0.828,-0 -1.5,0.672 -1.5,1.5l0,16c0,0.828 0.672,1.5 1.5,1.5l24,-0c0.828,-0 1.5,-0.672 1.5,-1.5l0,-16Zm-24.5,2.5c-0.276,-0 -0.5,-0.224 -0.5,-0.5c0,-0.276 0.224,-0.5 0.5,-0.5l22,0c0.276,-0 0.5,0.224 0.5,0.5c0,0.276 -0.224,0.5 -0.5,0.5l-22,0Zm0,3c-0.276,0 -0.5,-0.224 -0.5,-0.5c-0,-0.276 0.224,-0.5 0.5,-0.5l22,-0c0.276,0 0.5,0.224 0.5,0.5c-0,0.276 -0.224,0.5 -0.5,0.5l-22,-0Zm0,9c-0.276,0 -0.5,-0.224 -0.5,-0.5c-0,-0.276 0.224,-0.5 0.5,-0.5l22,-0c0.276,0 0.5,0.224 0.5,0.5c-0,0.276 -0.224,0.5 -0.5,0.5l-22,-0Zm-0,-3c-0.276,-0 -0.5,-0.224 -0.5,-0.5c0,-0.276 0.224,-0.5 0.5,-0.5l22,0c0.276,-0 0.5,0.224 0.5,0.5c0,0.276 -0.224,0.5 -0.5,0.5l-22,0Zm-0,-3c-0.276,-0 -0.5,-0.224 -0.5,-0.5c0,-0.276 0.224,-0.5 0.5,-0.5l22,0c0.276,-0 0.5,0.224 0.5,0.5c0,0.276 -0.224,0.5 -0.5,0.5l-22,0Zm25.5,14.5l0,1c0,1.38 -1.12,2.5 -2.5,2.5l-24,0c-1.38,0 -2.5,-1.12 -2.5,-2.5l-0,-1c-0,-1.38 1.12,-2.5 2.5,-2.5l24,0c1.38,0 2.5,1.12 2.5,2.5Zm-1,0c0,-0.828 -0.672,-1.5 -1.5,-1.5l-24,0c-0.828,0 -1.5,0.672 -1.5,1.5l0,1c0,0.828 0.672,1.5 1.5,1.5l24,0c0.828,0 1.5,-0.672 1.5,-1.5l0,-1Z"/>
</svg>
</li>
</ul>
</div>
</header>

45
public/script/accessibility.js Normal file
View file

@ -0,0 +1,45 @@
const accessibility = JSON.parse(localStorage.getItem("accessibility"));
function toggle_accessibility_setting(name) {
if (accessibility[name]) {
delete accessibility[name];
update_accessibility();
return true;
}
accessibility[name] = true;
update_accessibility();
return true;
}
function set_accessibility_setting(name, value) {
accessibility[name] = value;
update_accessibility();
return true;
}
function clear_accessibility_setting(name) {
if (!accessibility[name]) return false;
delete accessibility[name];
update_accessibility();
return true;
}
function update_accessibility() {
localStorage.setItem("accessibility", JSON.stringify(accessibility));
}
if (accessibility) {
if (accessibility.disable_crt) {
document.querySelector('div#overlay').setAttribute("hidden", true);
document.body.style.textShadow = "none";
document.getElementById('toggle-crt').classList.add("active");
}
}
document.getElementById("toggle-crt").addEventListener("click", () => {
toggle_accessibility_setting("disable_crt");
document.querySelector('div#overlay').toggleAttribute("hidden");
document.body.style.textShadow = accessibility.disable_crt ? "none" : null;
document.getElementById('toggle-crt').classList.toggle("active");
});

29
public/script/main.js
View file

@ -1,20 +1,3 @@
document.addEventListener("DOMContentLoaded", () => {
[...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);
});
setTimeout(() => {
document.querySelector("footer").style.display = "none";
document.querySelector("footer").style.display = null;
}, 1000);
});
function type_out(e) {
const text = e.innerText;
const original = e.innerHTML;
@ -57,3 +40,15 @@ function fill_list(list) {
item.style.animationPlayState = "playing";
});
}
[...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);
});

22
public/style/main.css
View file

@ -28,6 +28,7 @@ header {
flex-direction: row;
gap: 1em;
padding: 0 1em;
overflow-x: scroll;
}
img#header-icon {
@ -99,6 +100,23 @@ header ul li a:hover {
text-decoration: none;
}
#toggle-crt {
margin-top: 4px;
padding: 4px;
fill: var(--links);
cursor: pointer;
transition: fill .1s, opacity .1s;
opacity: .5;
}
#toggle-crt:hover {
fill: #eee;
}
#toggle-crt.active {
opacity: 1;
}
main {
width: min(calc(100% - 4rem), 720px);
min-height: calc(100vh - 10.3rem);
@ -300,6 +318,10 @@ footer {
}
@media screen and (max-width: 520px) {
body {
font-size: 14px;
}
#header-text {
display: none;
}

17
public/style/music.css
View file

@ -66,11 +66,14 @@ h3.music-type-upcoming {
}
.music-links {
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 {
@ -113,3 +116,17 @@ h2.question {
border-radius: 4px;
}
@media screen and (max-width: 520px) {
a.music {
flex-direction: column;
}
.music-artwork,
.music-details {
text-align: center;
align-items: center;
display: flex;
flex-direction: column;
}
}