fix: navbar spacing completed

Signed-off-by: Harshil <harshilgupta.2005@gmail.com>

Author: hars-21

assets/css/style.css

@@ -341,11 +341,11 @@ ul,
 li {
     list-style-type: disc;
     margin-left: 1em;
-    font-size: 20px;
 }
 
 ul {
     padding-bottom: 24px;
+    font-size: 20px;
 }
 
 header ul,

layouts/partials/nav.html

@@ -1,26 +1,16 @@
-<!--Navbar starts here-->
+<!-- Navbar starts here -->
 <nav>
   <header>
-    <div class="md:flex md:flex-row md:px-12 xl:px-16 md:justify-between py-5 items-center">
-      <div class="flex justify-between px-4 md:hidden">
-        <div>
-          {{ $image := resources.Get "logo/large_logo.svg" }}
-          <a href="/"><img src="/logo/large_logo.svg" class="md:h-14 h-9" alt="Cloud Native Postgres Logo"></a>
-        </div>
-        <div class="h-6 my-auto" id="toggle-button">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"
-            stroke-width="2">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
-          </svg>
-        </div>
-      </div>
-      <div class="hidden md:block">
-        {{ $image := resources.Get "logo/large_logo.svg" }}
-        <a href="/"><img src="/logo/large_logo.svg" class="md:h-10 xl:h-14" alt="Cloud Native Postgres Logo"></a>
+    <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">
+      
+      <!-- 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>
       </div>
 
-      <div class="hidden md:block">
-        <ul class="md:flex md:gap-4 xl:gap-8 text-2xl medium-gray my-5 pb-0">
+      <!-- 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">
           <li><a href="/blog">Blog</a></li>
           <li><a href="/tags/tutorial">Tutorials</a></li>
           <li><a href="/releases">Releases</a></li>
@@ -29,41 +19,51 @@
           <li><a href="/end_users">End Users</a></li>
         </ul>
       </div>
-      <!--For hamburger click-->
-      <div class="py-4 bg-gray-1 mt-5 hidden" id="navi-list">
-        <ul class="md:flex gap-14 text-2xl md:medium-gray charcoal">
-          <li class="text-center py-4"><a href="/blog">Blog</a></li>
-          <li class="text-center py-4"><a href="/tags/tutorial">Tutorials</a></li>
-          <li class="text-center py-4"><a href="/releases">Releases</a></li>
-          <li class="text-center py-4"><a href="/docs">Documentation</a></li>
-          <li class="text-center py-4"><a href="/support">Support</a></li>
-          <li class="text-center py-4"><a href="/end_users">End Users</a></li>
-        </ul>
-        <div class="flex gap-3 py-4 justify-center bg-gray-1 fill-cnp-blue">
-          <a href="https://github.com/cloudnative-pg/cloudnative-pg">
-            <img src="/icons/Git.svg" alt="Github">
-          </a>
-          <a href="https://cloud-native.slack.com/archives/C08MAUJ7NPM">
-            <img src="/icons/Slack.svg" alt="Slack">
-          </a>
-          <a href="https://x.com/CloudNativePg">
-            <img src="/icons/x.svg" alt="x" style="width:28px; height:43px;">
-          </a>
-          <a href="https://www.youtube.com/channel/UCTGH88W1BiuRRPTzJUDPJyA">
-            <img src="/icons/YouTube.svg" alt="YouTube">
-          </a>
-        </div>
-      </div>
-      <!--For hamburger click -->
 
-      <div class="hidden md:block">
+      <!-- GitHub Button (Desktop) -->
+      <div class="hidden lg:block pt-2">
         <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"
           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">
+        <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" />
+        </svg>
+      </div>
+    </div>
+
+    <!-- Mobile Menu -->
+    <div class="hidden lg: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>
+        <li class="text-center py-2"><a href="/releases">Releases</a></li>
+        <li class="text-center py-2"><a href="/docs">Documentation</a></li>
+        <li class="text-center py-2"><a href="/support">Support</a></li>
+        <li class="text-center py-2"><a href="/end_users">End Users</a></li>
+      </ul>
+      <div class="flex gap-3 py-4 justify-center">
+        <a href="https://github.com/cloudnative-pg/cloudnative-pg">
+          <img src="/icons/Git.svg" alt="Github">
+        </a>
+        <a href="https://cloud-native.slack.com/archives/C08MAUJ7NPM">
+          <img src="/icons/Slack.svg" alt="Slack">
+        </a>
+        <a href="https://x.com/CloudNativePg">
+          <img src="/icons/x.svg" alt="x" style="width:28px; height:43px;">
+        </a>
+        <a href="https://www.youtube.com/channel/UCTGH88W1BiuRRPTzJUDPJyA">
+          <img src="/icons/YouTube.svg" alt="YouTube">
+        </a>
+      </div>
     </div>
   </header>
 </nav>
+
 <script>
   const toggleButton = document.getElementById('toggle-button')
   const naviList = document.getElementById('navi-list')
@@ -72,3 +72,4 @@
     naviList.classList.toggle('hidden');
   })
 </script>
+<!-- Navbar ends here -->