From a757c76c74d6788c892d7e5e7b816f1bec3ca32e Mon Sep 17 00:00:00 2001
From: ari melody <ari@arimelody.me>
Date: Tue, 21 Nov 2023 13:55:58 +0000
Subject: [PATCH] improved visibility of crt toggle

---
 public/index.html              |  6 ++----
 public/script/accessibility.js |  5 ++---
 public/style/main.css          | 27 +++++++++++++--------------
 3 files changed, 17 insertions(+), 21 deletions(-)

diff --git a/public/index.html b/public/index.html
index 26b210f..b91d794 100644
--- a/public/index.html
+++ b/public/index.html
@@ -50,10 +50,8 @@
 					<!-- 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 id="toggle-crt">
+					<a href="javascript:void(0)">crt</a>
 				</li>
 			</ul>
 		</div>
diff --git a/public/script/accessibility.js b/public/script/accessibility.js
index dac8d17..d0925ce 100644
--- a/public/script/accessibility.js
+++ b/public/script/accessibility.js
@@ -32,14 +32,13 @@ 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').classList.add("disabled");
 	}
 }
 
 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");
+	document.getElementById('toggle-crt').className = accessibility.disable_crt ? "disabled" : "";
 });
 
diff --git a/public/style/main.css b/public/style/main.css
index 2347384..2208d56 100644
--- a/public/style/main.css
+++ b/public/style/main.css
@@ -89,7 +89,7 @@ header ul li span {
 	color: #aaa;
 	border-color: #aaa;
 	cursor: default;
-	text-decoration: none !important;
+	text-decoration: none;
 }
 
 header ul li a:hover {
@@ -99,23 +99,22 @@ 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 {
+#toggle-crt a {
+	color: var(--primary);
+	border-color: var(--primary);
 	opacity: 1;
 }
 
+#toggle-crt a:hover {
+	color: #111;
+	background-color: var(--primary) !important;
+}
+
+#toggle-crt.disabled a {
+	opacity: .5 !important;
+}
+
 main {
 	width: 	min(calc(100% - 4rem), 720px);
 	min-height: calc(100vh - 10.3rem);