fix aria-current value for nav bar to "page",

improve nav css readability

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>

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>

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"] {
+	header {
-		color: var(--nav-link-active-text-color);
+		grid-template-columns: auto 1fr;
-		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);
 	}
 
 	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;
+		line-height: 2em;
-		border: 0;
+		opacity: 0;
-		transition: height 250ms cubic-bezier(0.23, 1, 0.32, 1);
+		transition: 
-		visibility: hidden;
+			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;
+		height: 2em;
-		padding: 0.5em;
+		line-height: 2em;
-		transition: height 250ms cubic-bezier(0.23, 1, 0.32, 1);
+		opacity: 1;
-		visibility: visible;
+		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)
+		;
 	}
 }

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>

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;">

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>