Make nav responsive

app/components/Nav.vue

@@ -1,22 +1,23 @@
 <script setup lang="ts"></script>
 <template>
     <header
-        class="flex items-center justify-between px-8 py-4 bg-surface border-b-primary border-b-[3px] sticky top-0 z-50"
+        class="flex items-center justify-between px-8 py-4 bg-surface border-b-primary border-b-[3px] sticky top-0 z-50 max-md:flex-wrap max-md:gap-3 max-md:py-3 max-md:px-4 max-md:w-full max-md:box-border max-sm:p-2 max-sm:gap-2"
     >
         <NuxtLink
             href="/"
-            class="flex items-center gap-2 no-underline font-extrabold text-2xl"
+            class="flex items-center gap-2 no-underline font-extrabold text-2xl flex-shrink-0 max-md:text-xl max-sm:text-base max-sm:gap-1.5"
             external
         >
             <NuxtImg
-                width="40px"
+                class="w-10 h-10 max-md:w-8 max-md:h-8 max-sm:w-6.5 max-sm:h-6.5"
-                height="40px"
                 src="images/icon.svg"
                 alt="Pumpkin"
             />
             <span>pumpkin</span>
         </NuxtLink>
-        <nav class="nav flex gap-2">
+        <nav
+            class="nav flex gap-2 max-md:order-3 max-md:w-full max-md:justify-center max-md:flex-wrap max-md:gap-1 max-md:box-border"
+        >
             <NuxtLink to="/" external>Home</NuxtLink>
             <NuxtLink to="https://docs.pumpkinmc.org/" external>Docs</NuxtLink>
             <NuxtLink to="/developers/" external>Developers</NuxtLink>
@@ -28,25 +29,34 @@
                 class="icon-btn"
                 title="GitHub"
             >
-                <Icon size="25" name="fa7-brands:github" />
+                <Icon
+                    name="fa7-brands:github"
+                    style="width: 25px; height: 25px"
+                />
             </a>
             <a
                 href="https://discord.com/invite/wT8XjrjKkf"
                 class="icon-btn"
                 title="Discord"
             >
-                <Icon size="25.5" name="fa7-brands:discord" />
+                <Icon
+                    name="fa7-brands:discord"
+                    style="width: 25px; height: 25px"
+                />
             </a>
             <a
                 href="https://github.com/sponsors/Snowiiii"
                 class="sponsor-btn"
                 title="Sponsor"
             >
-                <Icon size="22" name="fa7-solid:heart" />
+                <Icon
+                    name="fa7-solid:heart"
+                    style="width: 22px; height: 22px"
+                />
             </a>
             <a
                 href="/download/"
-                class="flex items-center justify-center h-10.5 px-5 bg-primary text-black font-bold text-[0.95rem] no-underline border-[3px] border-primary shadow-[3px_3px_0_var(--color-primary)] transition-all duration-100 ease-in-out hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[5px_5px_0_var(--color-primary)]"
+                class="download-btn flex items-center justify-center h-10.5 px-5 bg-primary text-black font-bold text-[0.95rem] no-underline border-[3px] border-primary shadow-[3px_3px_0_var(--color-primary)] transition-all duration-100 ease-in-out hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[5px_5px_0_var(--color-primary)]"
                 >Download</a
             >
         </div>
@@ -106,4 +116,50 @@
 .sponsor-btn:hover {
     @apply -translate-x-0.5 -translate-y-0.5 shadow-[5px_5px_0_var(--color-pink)];
 }
+
+@media (max-width: 768px) {
+    .nav a {
+        padding: 0.4rem 0.6rem;
+        font-size: 0.8rem;
+    }
+
+    .nav a::after {
+        display: none;
+    }
+
+    .download-btn {
+        height: 34px;
+        padding: 0 0.75rem;
+        font-size: 0.8rem;
+        box-shadow: none;
+    }
+
+    .icon-btn,
+    .sponsor-btn {
+        width: 34px;
+        height: 34px;
+        font-size: 1rem;
+        box-shadow: none;
+    }
+}
+
+@media (max-width: 480px) {
+    .nav a {
+        padding: 0.3rem 0.4rem;
+        font-size: 0.7rem;
+    }
+
+    .download-btn {
+        height: 28px;
+        padding: 0 0.4rem;
+        font-size: 0.7rem;
+    }
+
+    .icon-btn,
+    .sponsor-btn {
+        width: 28px;
+        height: 28px;
+        font-size: 0.85rem;
+    }
+}
 </style>