Make nav links smaller and closer together on mobile

This should prevent it from wrapping on most small phones, which doesn’t look good.
johnjago · Jun 14, 2024 · e8d9b95 · e8d9b95
1 parent 9d85531
commit e8d9b95
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 2 deletions.
diff --git a/layouts/partials/header-home.html b/layouts/partials/header-home.html
@@ -4,7 +4,7 @@
 			<a href="/" class="flex justify-center">
 				<div id="nav-logo" class="bg-gray-50 w-[80px] h-[40px]"></div>
 			</a>
-			<nav class="text-gray-50 font-semibold flex flex-wrap gap-8 items-center justify-center">
+			<nav class="text-gray-50 font-semibold flex flex-wrap gap-6 md:gap-8 items-center justify-center text-sm md:text-base">
 				<a href="/#features" class="transition">Features</a>
 				<a href="/#pricing" class="transition">Pricing</a>
 				<a href="/releases/" class="whitespace-nowrap transition">What’s new</a>

diff --git a/layouts/partials/header.html b/layouts/partials/header.html
@@ -4,7 +4,7 @@
 			<a href="/" class="flex justify-center">
 				<div id="nav-logo" class="bg-[#CB8A86] w-[80px] h-[40px]"></div>
 			</a>
-			<nav class="text-gray-800 font-semibold flex flex-wrap gap-8 items-center justify-center">
+			<nav class="text-gray-800 font-semibold flex flex-wrap gap-6 md:gap-8 items-center justify-center text-sm md:text-base">
 				<a href="/#features" class="transition">Features</a>
 				<a href="/#pricing" class="transition">Pricing</a>
 				<a href="/releases/" class="whitespace-nowrap transition">What’s new</a>