💄 More visual tweaks for header

src/components/Header/Nav.astro

@@ -10,10 +10,12 @@ const pathComponents = pathname.split('/').slice(1);
 	{
 		navLinks.map((link) => (
 			<li>
-				<a href={`/${link.path}`}>
-					<span>{link.label}</span>
+				<a
+					href={`/${link.path}`}
+					class={pathComponents[0] === link.path ? 'selected' : null}
+				>
+					{link.label}
 				</a>
-				{pathComponents[0] === link.path ? <div class="underline" /> : null}
 			</li>
 		))
 	}
@@ -24,13 +26,21 @@ const pathComponents = pathname.split('/').slice(1);
 		display: flex;
 		flex-direction: row;
 		list-style: none;
-		gap: 20px;
+		gap: 10px;
 		font-size: 1.15rem;
 		font-weight: 600;
 	}
 
+	a {
+		color: var(--text);
+		padding: 5px 10px;
+		border-radius: var(--radius);
+		transition: background-color 0.2s ease-in-out;
+	}
+
 	a:hover {
-		text-decoration: none;
+		background-color: rgba(0, 0, 0, 0.04);
+		opacity: 1;
 	}
 
 	.selected {
@@ -42,9 +52,16 @@ const pathComponents = pathname.split('/').slice(1);
 		background-color: var(--orange);
 	}
 
-	@media screen and (max-width: 600px) {
+	@media screen and (max-width: 768px) {
 		nav {
 			display: none;
 		}
 	}
+
+	@media (prefers-color-scheme: dark) {
+		a:hover {
+			background-color: rgba(231, 237, 255, 0.1);
+			opacity: 1;
+		}
+	}
 </style>