From 8c249236ee9d0849fa1af73a01c7a6911095b283 Mon Sep 17 00:00:00 2001
From: regalijan <r@regalijan.com>
Date: Thu, 19 Oct 2023 16:50:19 -0400
Subject: [PATCH] Unbork mobile nav

---
 components/Navigation.tsx | 52 ++++++++++++++++++---------------------
 index.css                 |  2 +-
 2 files changed, 25 insertions(+), 29 deletions(-)

diff --git a/components/Navigation.tsx b/components/Navigation.tsx
index 568f08b..db86985 100644
--- a/components/Navigation.tsx
+++ b/components/Navigation.tsx
@@ -68,20 +68,13 @@ export default function (props: {
 
   return (
     <>
-      <style media="(min-width: 1281px)">
+      <style media="all and (min-width: 1281px)">
         {`
           #nav-menu {
             display: none
           }
         `}
       </style>
-      <style media="(max-width: 1280px)">
-        {`
-          #nav-links {
-            display: none
-          }
-        `}
-      </style>
       <Box as="section" pb={{ base: "6" }}>
         <Box as="nav" boxSizing="unset">
           <Container display="grid" maxW="container.xl" py={{ base: "6" }}>
@@ -104,26 +97,29 @@ export default function (props: {
               </a>
               <Spacer />
               <Spacer />
-              <Flex alignItems="center" className="nav-links">
-                <HStack gap="3rem" whiteSpace="nowrap">
-                  <Link href="/about" size="lg">
-                    About Us
-                  </Link>
-                  <Link href="/team" size="lg">
-                    Our Team
-                  </Link>
-                  <Link href="/support" size="lg">
-                    Support
-                  </Link>
-                  <Link
-                    display={hasMod() ? undefined : "none"}
-                    href="/mod-queue"
-                    size="lg"
-                  >
-                    Moderation
-                  </Link>
-                </HStack>
-              </Flex>
+              <HStack
+                alignItems="center"
+                gap="3rem"
+                whiteSpace="nowrap"
+                className="nav-links"
+              >
+                <Link href="/about" size="lg">
+                  About Us
+                </Link>
+                <Link href="/team" size="lg">
+                  Our Team
+                </Link>
+                <Link href="/support" size="lg">
+                  Support
+                </Link>
+                <Link
+                  display={hasMod() ? undefined : "none"}
+                  href="/mod-queue"
+                  size="lg"
+                >
+                  Moderation
+                </Link>
+              </HStack>
               <Spacer />
               <Spacer />
               <div className="nav-links">
diff --git a/index.css b/index.css
index 956f830..ba35556 100644
--- a/index.css
+++ b/index.css
@@ -84,6 +84,6 @@ button:focus-visible {
 
 @media (max-width: 1280px) {
   .nav-links {
-    display: none;
+    display: none !important;
   }
 }