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

improved visibility of crt toggle

Browse source
This commit is contained in:
ari melody 2023-11-21 13:55:58 +00:00
parent 46401e9dd9
commit a757c76c74
Signed by: ari
GPG key ID: CF99829C92678188
3 changed files with 17 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
public/index.html
View file

@ -50,10 +50,8 @@
<!-- coming later! --> <!-- coming later! -->
<span title="coming later!">art</span> <span title="coming later!">art</span>
</li> </li>
<li id="toggle-crt" title="toggle CRT effect"> <li id="toggle-crt">
<svg width="24" height="24" viewBox="0 0 29 29" version="1.1" xmlns="http://www.w3.org/2000/svg"> <a href="javascript:void(0)">crt</a>
<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> </li>
</ul> </ul>
</div> </div>

5
public/script/accessibility.js
View file

@ -32,14 +32,13 @@ if (accessibility) {
if (accessibility.disable_crt) { if (accessibility.disable_crt) {
document.querySelector('div#overlay').setAttribute("hidden", true); document.querySelector('div#overlay').setAttribute("hidden", true);
document.body.style.textShadow = "none"; document.body.style.textShadow = "none";
document.getElementById('toggle-crt').classList.add("active"); document.getElementById('toggle-crt').classList.add("disabled");
} }
} }
document.getElementById("toggle-crt").addEventListener("click", () => { document.getElementById("toggle-crt").addEventListener("click", () => {
toggle_accessibility_setting("disable_crt"); toggle_accessibility_setting("disable_crt");
document.querySelector('div#overlay').toggleAttribute("hidden"); document.querySelector('div#overlay').toggleAttribute("hidden");
document.body.style.textShadow = accessibility.disable_crt ? "none" : null; document.getElementById('toggle-crt').className = accessibility.disable_crt ? "disabled" : "";
document.getElementById('toggle-crt').classList.toggle("active");
}); });

27
public/style/main.css
View file

@ -89,7 +89,7 @@ header ul li span {
color: #aaa; color: #aaa;
border-color: #aaa; border-color: #aaa;
cursor: default; cursor: default;
text-decoration: none !important; text-decoration: none;
} }
header ul li a:hover { header ul li a:hover {
@ -99,23 +99,22 @@ header ul li a:hover {
text-decoration: none; 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 { #toggle-crt a {
fill: #eee; color: var(--primary);
} border-color: var(--primary);
#toggle-crt.active {
opacity: 1; opacity: 1;
} }
#toggle-crt a:hover {
color: #111;
background-color: var(--primary) !important;
}
#toggle-crt.disabled a {
opacity: .5 !important;
}
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);