From 0369773a6e47cfdcb2c00d0353d06524e9a51087 Mon Sep 17 00:00:00 2001 From: ari melody Date: Sun, 15 Oct 2023 04:23:53 +0100 Subject: [PATCH] toggleable crt effect (accessibility)! (also better mobile support) --- public/img/toggle_crt.svg | 1 + public/index.html | 6 ++++- public/music.html | 14 ++++++++--- public/script/accessibility.js | 45 ++++++++++++++++++++++++++++++++++ public/script/main.js | 29 +++++++++------------- public/style/main.css | 22 +++++++++++++++++ public/style/music.css | 17 +++++++++++++ 7 files changed, 113 insertions(+), 21 deletions(-) create mode 100644 public/img/toggle_crt.svg create mode 100644 public/script/accessibility.js diff --git a/public/img/toggle_crt.svg b/public/img/toggle_crt.svg new file mode 100644 index 0000000..47887c8 --- /dev/null +++ b/public/img/toggle_crt.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/index.html b/public/index.html index 8401936..5847bb4 100644 --- a/public/index.html +++ b/public/index.html @@ -20,7 +20,8 @@ - + + @@ -49,6 +50,9 @@ art +
  • + +
    • diff --git a/public/music.html b/public/music.html index 147a4a3..93985cf 100644 --- a/public/music.html +++ b/public/music.html @@ -9,6 +9,8 @@ music - ari melody 💫 + + @@ -19,13 +21,14 @@ - - + + +
    diff --git a/public/script/accessibility.js b/public/script/accessibility.js new file mode 100644 index 0000000..093eebe --- /dev/null +++ b/public/script/accessibility.js @@ -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"); +}); + diff --git a/public/script/main.js b/public/script/main.js index 6f6e4ad..75027e0 100644 --- a/public/script/main.js +++ b/public/script/main.js @@ -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); + }); + diff --git a/public/style/main.css b/public/style/main.css index 0aecf58..4263412 100644 --- a/public/style/main.css +++ b/public/style/main.css @@ -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; } diff --git a/public/style/music.css b/public/style/music.css index 8431585..d5f98ab 100644 --- a/public/style/music.css +++ b/public/style/music.css @@ -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; + } +} +