From 6d079cebd8afb03ec1e5b3b6359b181a1e8f0d00 Mon Sep 17 00:00:00 2001
From: Indigolo <51833931+Indigolo@users.noreply.github.com>
Date: Wed, 20 Aug 2025 10:15:36 +0200
Subject: [PATCH] Fix Navbar responsiveness (#112)

---
 src/routes/Navbar.svelte | 8 ++++----
 tailwind.config.cjs      | 5 ++++-
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/routes/Navbar.svelte b/src/routes/Navbar.svelte
index ef353a3..31a473f 100755
--- a/src/routes/Navbar.svelte
+++ b/src/routes/Navbar.svelte
@@ -29,7 +29,7 @@
 	>
 
 	<button
-		class="z-50 rounded-full bg-black/50 p-2 md:backdrop-blur lg:hidden"
+		class="z-50 rounded-full bg-black/50 p-2 md:backdrop-blur nav:hidden"
 		on:click={toggleExpanded}
 		aria-label="Open Navigation"
 	>
@@ -42,7 +42,7 @@
 
 	<nav class="nav" class:!flex={isExpanded}>
 		<ul
-			class="flex flex-col items-center gap-5 rounded-full lg:h-full lg:max-h-full lg:flex-row [&_li]:transition-colors hover:[&_li]:text-cyan-300"
+			class="flex flex-col items-center gap-5 rounded-full nav:h-full nav:max-h-full nav:flex-row [&_li]:transition-colors hover:[&_li]:text-cyan-300"
 		>
 			<li>
 				<a
@@ -137,7 +137,7 @@
 		display: none;
 
 		/* Desktop classes */
-		@media screen(lg) {
+		@media screen(nav) {
 			@apply relative flex h-min w-max flex-row rounded-full bg-black/40 p-2 pl-5 pr-3 outline outline-primary/10;
 		}
 	}
@@ -149,7 +149,7 @@
 
 		@apply rounded-full p-1 transition-colors hover:bg-cyan-500 hover:text-white;
 
-		@media screen(lg) {
+		@media screen(nav) {
 			width: 2rem;
 			height: 2rem;
 		}
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index af98dcf..ba6ae91 100755
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -17,7 +17,10 @@ export default {
 			},
 			margin: { navbar: '3.5rem' },
 
-			screens: { '3xl': '2560px' },
+			screens: {
+				'3xl': '2560px',
+				'nav': '1124px'
+			},
 
 			typography: {
 				DEFAULT: {