fix: navbar spacing final

Signed-off-by: Harshil <[email protected]>

Author: hars-21

layouts/partials/nav.html

@@ -1,16 +1,17 @@
 <!-- Navbar starts here -->
 <nav>
   <header>
-    <div class="flex flex-row px-4 md:px-8 lg:px-12 xl:px-16 justify-between py-4 md:py-5 items-center">
+    <div class="flex flex-row px-4 md:px-6 lg:px-12 xl:px-16 justify-between py-4 md:py-5 items-center">
 
       <!-- Logo -->
       <div>
-        <a href="/"><img src="/logo/large_logo.svg" class="h-10 lg:h-12 xl:h-14" alt="Cloud Native Postgres Logo"></a>
+        {{ $image := resources.Get "logo/large_logo.svg" }}
+        <a href="/"><img src="/logo/large_logo.svg" class="h-8 lg:h-12 xl:h-14" alt="Cloud Native Postgres Logo"></a>
       </div>
 
-      <!-- Desktop Menu -->
-      <div class="hidden lg:block">
-        <ul class="flex gap-4 xl:gap-8 text-base lg:text-lg xl:text-xl medium-gray my-5 pb-0">
+      <!-- Desktop & Tablet Menu -->
+      <div class="hidden md:block">
+        <ul class="flex gap-3 lg:gap-4 xl:gap-8 text-sm md:text-base lg:text-lg xl:text-xl medium-gray my-5 pb-0">
           <li><a href="/blog">Blog</a></li>
           <li><a href="/tags/tutorial">Tutorials</a></li>
           <li><a href="/releases">Releases</a></li>
@@ -20,15 +21,15 @@
         </ul>
       </div>
 
-      <!-- GitHub Button (Desktop) -->
-      <div class="hidden lg:block pt-2">
+      <!-- GitHub Button -->
+      <div class="hidden md:block pt-1.5">
         <a class="github-button" href="https://github.com/cloudnative-pg/cloudnative-pg"
-          data-color-scheme="no-preference: light; light: light; dark: dark;" data-size="large" data-show-count="true"
+          data-color-scheme="no-preference: light; light: light; dark: dark;" data-size="small" data-show-count="true"
           aria-label="Star cloudnative-pg/cloudnative-pg on GitHub">Star</a>
       </div>
 
-      <!-- Hamburger (Mobile & Tablet) -->
-      <div class="lg:hidden flex items-center" id="toggle-button">
+      <!-- Hamburger click -->
+      <div class="md:hidden flex items-center" id="toggle-button">
         <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor"
           stroke-width="2">
           <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
@@ -37,7 +38,7 @@
     </div>
 
     <!-- Mobile Menu -->
-    <div class="hidden lg:hidden bg-gray-1 px-4 py-3" id="navi-list">
+    <div class="hidden md:hidden bg-gray-1 px-4 py-3" id="navi-list">
       <ul class="space-y-2 text-lg charcoal">
         <li class="text-center py-2"><a href="/blog">Blog</a></li>
         <li class="text-center py-2"><a href="/tags/tutorial">Tutorials</a></li>
@@ -71,5 +72,19 @@
   toggleButton.addEventListener('click', () => {
     naviList.classList.toggle('hidden');
   })
+
+  // Responsive GitHub button sizing
+  function updateGitHubButtonSize() {
+    const githubButton = document.querySelector('.github-button');
+    if (githubButton && window.innerWidth >= 1024) {
+      githubButton.setAttribute('data-size', 'large');
+    } else if (githubButton) {
+      githubButton.setAttribute('data-size', 'small');
+    }
+  }
+
+  // Update on load and resize
+  window.addEventListener('load', updateGitHubButtonSize);
+  window.addEventListener('resize', updateGitHubButtonSize);
 </script>
 <!-- Navbar ends here -->