Fix all responsive issues

app/components/Nav.vue

@@ -1,58 +1,46 @@
 <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 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"
+        class="flex flex-col space-y-3 sm:space-y-0 sm:grid grid-cols-2 md:flex md:flex-row items-center justify-center md:gap-0 md:justify-between px-8 py-4 bg-surface border-b-primary border-b-[3px] sticky top-0 z-50"
     >
         <NuxtLink
             href="/"
-            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"
+            class="flex items-center gap-2 no-underline font-extrabold text-2xl flex-shrink-0"
             external
         >
-            <NuxtImg
+            <NuxtImg class="w-10 h-10" src="images/icon.svg" alt="Pumpkin" />
-                class="w-10 h-10 max-md:w-8 max-md:h-8 max-sm:w-6.5 max-sm:h-6.5"
-                src="images/icon.svg"
-                alt="Pumpkin"
-            />
             <span>pumpkin</span>
         </NuxtLink>
         <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"
+            class="nav flex gap-1 lg:gap-2 md:order-0 order-2 col-span-2 justify-center"
         >
             <NuxtLink to="/" external>Home</NuxtLink>
             <NuxtLink to="https://docs.pumpkinmc.org/" external>Docs</NuxtLink>
             <NuxtLink to="/developers/" external>Developers</NuxtLink>
             <NuxtLink to="/contributors/" external>Contributors</NuxtLink>
+            <NuxtLink to="/blog/" external>Blog</NuxtLink>
         </nav>
-        <div class="flex items-center gap-2">
+        <div class="flex items-center gap-2 justify-end">
             <a
                 href="https://github.com/Pumpkin-MC/Pumpkin"
                 class="icon-btn"
                 title="GitHub"
             >
-                <Icon
+                <Icon name="fa7-brands:github" />
-                    name="fa7-brands:github"
-                    style="width: 25px; height: 25px"
-                />
             </a>
             <a
                 href="https://discord.com/invite/wT8XjrjKkf"
                 class="icon-btn"
                 title="Discord"
             >
-                <Icon
+                <Icon name="fa7-brands:discord" />
-                    name="fa7-brands:discord"
-                    style="width: 25px; height: 25px"
-                />
             </a>
             <a
                 href="https://github.com/sponsors/Snowiiii"
                 class="sponsor-btn"
                 title="Sponsor"
             >
-                <Icon
+                <Icon name="fa7-solid:heart" />
-                    name="fa7-solid:heart"
-                    style="width: 22px; height: 22px"
-                />
             </a>
             <a
                 href="/download/"
@@ -64,41 +52,59 @@
 </template>
 
 <style scoped>
-@reference "@/assets/css/main.css"
+@reference "@/assets/css/main.css";
 
 .nav {
     display: flex;
     gap: 0.5rem;
-}
 
-.nav a {
+    a {
-    padding: 0.6rem 1.25rem;
+        padding: 0.6rem 1.25rem;
-    text-decoration: none;
+        text-decoration: none;
-    @apply text-muted;
+        @apply text-muted;
-    font-weight: 600;
+        font-weight: 600;
-    font-size: 1rem;
+        font-size: 1rem;
-    position: relative;
+        position: relative;
-    transition: all 0.15s ease;
+        transition: all 0.15s ease;
-}
+    }
 
-.nav a::after {
+    a::after {
-    content: "";
+        content: "";
-    position: absolute;
+        position: absolute;
-    bottom: 0;
+        bottom: 0;
-    left: 50%;
+        left: 50%;
-    transform: translateX(-50%);
+        transform: translateX(-50%);
-    width: 0;
+        width: 0;
-    height: 3px;
+        height: 3px;
-    @apply bg-primary;
+        @apply bg-primary;
-    transition: width 0.15s ease;
+        transition: width 0.15s ease;
-}
+    }
 
-.nav a:hover {
+    a:hover {
-    @apply text-foreground;
+        @apply text-foreground;
-}
+    }
 
-.nav a:hover::after {
+    a:hover::after {
-    width: 100%;
+        width: 100%;
+    }
+
+    @media (width <= theme(--breakpoint-lg)) {
+        a {
+            padding: 0.4rem 0.6rem;
+            font-size: 0.8rem;
+        }
+
+        a::after {
+            display: none;
+        }
+    }
+
+    @media (width <= theme(--breakpoint-md)) {
+        a {
+            padding: 0.3rem 0.4rem;
+            font-size: 0.7rem;
+        }
+    }
 }
 
 .icon-btn {
@@ -117,16 +123,7 @@
     @apply -translate-x-0.5 -translate-y-0.5 shadow-[5px_5px_0_var(--color-pink)];
 }
 
-@media (max-width: 768px) {
+@media (width <= theme(--breakpoint-lg)) {
-    .nav a {
-        padding: 0.4rem 0.6rem;
-        font-size: 0.8rem;
-    }
-
-    .nav a::after {
-        display: none;
-    }
-
     .download-btn {
         height: 34px;
         padding: 0 0.75rem;
@@ -143,12 +140,7 @@
     }
 }
 
-@media (max-width: 480px) {
+@media (width <= theme(--breakpoint-md)) {
-    .nav a {
-        padding: 0.3rem 0.4rem;
-        font-size: 0.7rem;
-    }
-
     .download-btn {
         height: 28px;
         padding: 0 0.4rem;

app/pages/index.vue

@@ -0,0 +1,5 @@
+<script setup lang="ts"></script>
+
+<template>
+    <h1>You shouldn't be able to see this!</h1>
+</template>

nuxt.config.ts

@@ -18,4 +18,9 @@ export default defineNuxtConfig({
             },
         ],
     },
+    nitro: {
+        prerender: {
+            ignore: ["/developers", "/contributors", "/download"],
+        },
+    },
 });