fixed spacing in nav and footer

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

Author: hars-21

layouts/partials/footer.html

@@ -5,7 +5,7 @@
       class="max-w-6xl mx-auto grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-10 pb-10 border-b border-b-zinc-200">
 
       <!-- Learn -->
-      <div>
+      <div class="px-4">
         <h3 class="text-3xl font-semibold mb-0">Learn</h3>
         <div class="space-y-2 text-base text-red-500">
           <div><a href="/docs" class="hover:text-red-700 transition">Documentation</a></div>
@@ -16,7 +16,7 @@ <h3 class="text-3xl font-semibold mb-0">Learn</h3>
       </div>
 
       <!-- Community -->
-      <div>
+      <div class="px-4">
         <h3 class="text-3xl font-semibold mb-0">Community</h3>
         <div class="space-y-2 text-base text-red-500">
           <div><a href="/blog" class="hover:text-red-700 transition">Blog</a></div>
@@ -27,7 +27,7 @@ <h3 class="text-3xl font-semibold mb-0">Community</h3>
       </div>
 
       <!-- Logo + Social -->
-      <div class="flex flex-col items-center">
+      <div class="flex flex-col items-center px-4">
         <a href="https://cloudnative-pg.io/">
           <img src="/logo/large_logo.svg" alt="CloudNativePG Logo" class="mb-2">
         </a>

layouts/partials/nav.html

@@ -1,7 +1,7 @@
 <!--Navbar starts here-->
 <nav>
   <header>
-    <div class="md:flex md:flex-row md:px-16 md:justify-between py-5 items-center">
+    <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" }}
@@ -14,13 +14,13 @@
           </svg>
         </div>
       </div>
-      <div class="md:block hidden">
+      <div class="hidden md:block">
         {{ $image := resources.Get "logo/large_logo.svg" }}
-        <a href="/"><img src="/logo/large_logo.svg" class="h-14" alt="Cloud Native Postgres Logo"></a>
+        <a href="/"><img src="/logo/large_logo.svg" class="md:h-10 xl:h-14" alt="Cloud Native Postgres Logo"></a>
       </div>
 
       <div class="hidden md:block">
-        <ul class="md:flex gap-14 text-2xl medium-gray my-5 pb-0">
+        <ul class="md:flex md:gap-4 xl:gap-8 text-2xl 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>
@@ -56,7 +56,7 @@
       </div>
       <!--For hamburger click -->
 
-      <div class="my-4 hidden md:flex">
+      <div class="hidden md:block">
         <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>