From 49b24058148a95f49d639bc378758e6e983ab70a Mon Sep 17 00:00:00 2001
From: Arthur Lu <root@tronnet.net>
Date: Tue, 26 Sep 2023 19:15:54 +0000
Subject: [PATCH] fix aria-current value for nav bar to "page", improve nav css
 readability

---
 account.html  |  2 +-
 config.html   |  2 +-
 css/nav.css   | 62 ++++++++++++++++++++++++++++++---------------------
 index.html    |  2 +-
 login.html    |  2 +-
 settings.html |  2 +-
 6 files changed, 42 insertions(+), 30 deletions(-)

diff --git a/account.html b/account.html
index 4a84b80..2d67fcb 100644
--- a/account.html
+++ b/account.html
@@ -51,7 +51,7 @@
 			<input type="checkbox" id="navtoggle">
 			<nav>
 				<a href="index.html">Instances</a>
-				<a href="account.html" aria-current="true">Account</a>
+				<a href="account.html" aria-current="page">Account</a>
 				<a href="settings.html">Settings</a>
 				<a href="login.html">Logout</a>
 			</nav>
diff --git a/config.html b/config.html
index e8f0463..c0c0d8a 100644
--- a/config.html
+++ b/config.html
@@ -18,7 +18,7 @@
 			<label for="navtoggle">&#9776;</label>
 			<input type="checkbox" id="navtoggle">
 			<nav>
-				<a href="index.html" aria-current="true">Instances</a>
+				<a href="index.html" aria-current="page">Instances</a>
 				<a href="account.html">Account</a>
 				<a href="settings.html">Settings</a>
 				<a href="login.html">Logout</a>
diff --git a/css/nav.css b/css/nav.css
index eb92fbb..bb0929b 100644
--- a/css/nav.css
+++ b/css/nav.css
@@ -5,6 +5,7 @@
 	--nav-header-text-color: black;
 	--nav-link-active-text-color: white;
 	--nav-link-active-bg-color: var(--main-bg-color, #404040);
+	--nav-transition-speed: 250ms;
 }
 
 @media screen and (prefers-color-scheme: light) {
@@ -20,7 +21,6 @@
 
 header {
 	display: grid;
-	grid-template-columns: auto 1fr;
 	align-items: center;
 	width: 100%;
 	background-color: var(--nav-bg-color);
@@ -42,8 +42,12 @@ nav {
 
 nav a, header h1, label[for="navtoggle"] {
 	text-align: left;
-	padding: 8px 10px;
+	padding-left: 8px;
+	padding-right: 8px;
 	text-decoration: none;
+	vertical-align: middle;
+	height: 2em;
+	line-height: 2em;
 }
 
 label[for="navtoggle"], #navtoggle {
@@ -51,37 +55,40 @@ label[for="navtoggle"], #navtoggle {
 }
 
 @media screen and (width >= 600px){
-	nav a:hover, nav a[aria-current="true"] {
-		color: var(--nav-link-active-text-color);
-		background-color: var(--nav-link-active-bg-color);
-	}
-	
-	nav:hover a[aria-current="true"] {
-		color: var(--nav-text-color);
-		background-color: var(--nav-bg-color);
-	}
-
-	nav:hover a[aria-current="true"]:hover {
-		color: var(--nav-link-active-text-color);
-		background-color: var(--nav-link-active-bg-color);
+	header {
+		grid-template-columns: auto 1fr;
 	}
 
 	nav {
 		display: flex;
 		align-items: center;
 	}
+
+	nav a[aria-current="page"], nav a:hover {
+		color: var(--nav-link-active-text-color);
+		background-color: var(--nav-link-active-bg-color);
+	}
+	
+	nav:hover a[aria-current="page"]:has(~ a:hover) {
+		color: var(--nav-text-color);
+		background-color: var(--nav-bg-color);
+	}
+
+	nav:hover a[aria-current="page"]:hover {
+		color: var(--nav-link-active-text-color);
+		background-color: var(--nav-link-active-bg-color);
+	}
 }
 
 @media screen and (width <= 600px){
 	header {
-		display: grid;
 		grid-template-columns: 1fr auto;
 	}
 
 	nav {
 		display: block;
 		position: absolute;
-		top: 43px;
+		top: 2em;
 		right: 0;
 		background-color: var(--nav-bg-color);
 	}
@@ -99,16 +106,21 @@ label[for="navtoggle"], #navtoggle {
   
 	#navtoggle ~ nav a {
 		height: 0;
-		padding: 0 0.5em;
-		border: 0;
-		transition: height 250ms cubic-bezier(0.23, 1, 0.32, 1);
-		visibility: hidden;
+		line-height: 2em;
+		opacity: 0;
+		transition: 
+			height var(--nav-transition-speed) cubic-bezier(0.23, 1, 0.32, 1), 
+			opacity var(--nav-transition-speed) cubic-bezier(0.23, 1, 0.32, 1)
+		;
 	}
 
 	#navtoggle:checked ~ nav a {
-		height: 2.5em;
-		padding: 0.5em;
-		transition: height 250ms cubic-bezier(0.23, 1, 0.32, 1);
-		visibility: visible;
+		height: 2em;
+		line-height: 2em;
+		opacity: 1;
+		transition: 
+			height var(--nav-transition-speed) cubic-bezier(0.23, 1, 0.32, 1), 
+			opacity var(--nav-transition-speed) cubic-bezier(0.23, 1, 0.32, 1)
+		;
 	}
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index e6d1c37..10e77a4 100644
--- a/index.html
+++ b/index.html
@@ -48,7 +48,7 @@
 			<label for="navtoggle">&#9776;</label>
 			<input type="checkbox" id="navtoggle">
 			<nav>
-				<a href="index.html" aria-current="true">Instances</a>
+				<a href="index.html" aria-current="page">Instances</a>
 				<a href="account.html">Account</a>
 				<a href="settings.html">Settings</a>
 				<a href="login.html">Logout</a>
diff --git a/login.html b/login.html
index 68dfee8..c93df16 100644
--- a/login.html
+++ b/login.html
@@ -16,7 +16,7 @@
 			<label for="navtoggle">&#9776;</label>
 			<input type="checkbox" id="navtoggle">
 			<nav>
-				<a href="login.html" aria-current="true">Login</a>
+				<a href="login.html" aria-current="page">Login</a>
 			</nav>
 		</header>
 		<main class="flex" style="justify-content: center; align-items: center;">
diff --git a/settings.html b/settings.html
index 0e155f8..08219bc 100644
--- a/settings.html
+++ b/settings.html
@@ -39,7 +39,7 @@
 			<nav>
 				<a href="index.html">Instances</a>
 				<a href="account.html">Account</a>
-				<a href="settings.html" aria-current="true">Settings</a>
+				<a href="settings.html" aria-current="page">Settings</a>
 				<a href="login.html">Logout</a>
 			</nav>
 		</header>