From a37ca06241e152895d87e7736efdaea061ab756c Mon Sep 17 00:00:00 2001
From: ari melody <ari@arimelody.me>
Date: Fri, 17 May 2024 12:55:40 +0100
Subject: [PATCH] added fixed header link/button style. more lighthouse
 optimisations

---
 public/img/favicon-100.png     |  3 ---
 public/index.html              | 14 +++++++-------
 public/music.html              | 14 +++++++-------
 public/script/accessibility.js |  3 ++-
 public/style/main.css          | 28 ++++++++++++++++++----------
 5 files changed, 34 insertions(+), 28 deletions(-)
 delete mode 100644 public/img/favicon-100.png

diff --git a/public/img/favicon-100.png b/public/img/favicon-100.png
deleted file mode 100644
index 829d4e9..0000000
--- a/public/img/favicon-100.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:4f5831260ad6450d3af2d02a085579c120e755a4ce594f0f3a31268c7ca90d36
-size 20264
diff --git a/public/index.html b/public/index.html
index 9de8a5b..8647cf3 100644
--- a/public/index.html
+++ b/public/index.html
@@ -42,24 +42,24 @@
 			</a>
 			<ul id="header-links">
 				<li>
-					<a href="/">home</a>
+					<a href="/" class="header-link">home</a>
 				</li>
 				<li>
-					<a href="/music">music</a>
+					<a href="/music" class="header-link">music</a>
 				</li>
 				<li>
-					<a href="https://git.arimelody.me/ari/arimelody.me" target="_blank">source</a>
+					<a href="https://git.arimelody.me/ari/arimelody.me" target="_blank" class="header-link">source</a>
 				</li>
 				<li>
 					<!-- coming later! -->
-					<span title="coming later!">blog</span>
+					<span class="header-link disabled" title="coming later!">blog</span>
 				</li>
 				<li>
 					<!-- coming later! -->
-					<span title="coming later!">art</span>
+					<span class="header-link disabled" title="coming later!">art</span>
 				</li>
-				<li id="toggle-crt">
-					<a href="javascript:void(0)">crt</a>
+				<li>
+					<button id="toggle-crt" class="header-btn">crt</button>
 				</li>
 			</ul>
 		</nav>
diff --git a/public/music.html b/public/music.html
index af72c1d..f008473 100644
--- a/public/music.html
+++ b/public/music.html
@@ -42,24 +42,24 @@
 			</a>
 			<ul id="header-links">
 				<li>
-					<a href="/">home</a>
+					<a href="/" class="header-link">home</a>
 				</li>
 				<li>
-					<a href="/music">music</a>
+					<a href="/music" class="header-link">music</a>
 				</li>
 				<li>
-					<a href="https://git.arimelody.me/ari/arimelody.me" target="_blank">source</a>
+					<a href="https://git.arimelody.me/ari/arimelody.me" target="_blank" class="header-link">source</a>
 				</li>
 				<li>
 					<!-- coming later! -->
-					<span title="coming later!">blog</span>
+					<span class="header-link disabled" title="coming later!">blog</span>
 				</li>
 				<li>
 					<!-- coming later! -->
-					<span title="coming later!">art</span>
+					<span class="header-link disabled" title="coming later!">art</span>
 				</li>
-				<li id="toggle-crt">
-					<a href="javascript:void(0)">crt</a>
+				<li>
+					<button id="toggle-crt" class="header-btn">crt</button>
 				</li>
 			</ul>
 		</nav>
diff --git a/public/script/accessibility.js b/public/script/accessibility.js
index d0925ce..3f2e0cb 100644
--- a/public/script/accessibility.js
+++ b/public/script/accessibility.js
@@ -39,6 +39,7 @@ if (accessibility) {
 document.getElementById("toggle-crt").addEventListener("click", () => {
 	toggle_accessibility_setting("disable_crt");
 	document.querySelector('div#overlay').toggleAttribute("hidden");
-	document.getElementById('toggle-crt').className = accessibility.disable_crt ? "disabled" : "";
+        if (accessibility.disable_crt) document.getElementById('toggle-crt').classList.add("disabled");
+        else document.getElementById('toggle-crt').classList.remove("disabled");
 });
 
diff --git a/public/style/main.css b/public/style/main.css
index 9a2ba07..1a5880a 100644
--- a/public/style/main.css
+++ b/public/style/main.css
@@ -104,8 +104,7 @@ header ul li {
 	list-style: none;
 }
 
-header ul li a,
-header ul li span {
+.header-link {
 	padding: .2em .5em;
 	border: 1px solid var(--links);
 	color: var(--links);
@@ -118,33 +117,42 @@ header ul li span {
 	opacity: 0;
 }
 
-header ul li span {
+.header-link.disabled {
 	color: #aaa;
 	border-color: #aaa;
 	cursor: default;
 	text-decoration: none;
 }
 
-header ul li a:hover {
+.header-link:not(.disabled):hover {
 	color: #eee;
 	border-color: #eee;
 	background-color: var(--links) !important;
 	text-decoration: none;
 }
 
-
-#toggle-crt a {
+.header-btn {
+	padding: .2em .5em;
+        font-family: inherit;
+        font-size: inherit;
 	color: var(--primary);
-	border-color: var(--primary);
-	opacity: 1;
+	border: 1px solid var(--primary);
+	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;
 }
 
-#toggle-crt a:hover {
+.header-btn:hover {
 	color: #111;
 	background-color: var(--primary) !important;
+        opacity: 1 !important;
 }
 
-#toggle-crt.disabled a {
+.header-btn.disabled {
 	opacity: .5 !important;
 }