More mobile-friendly nav

src/components/Header.astro

@@ -10,7 +10,7 @@ const { current = '' } = Astro.props;
     display: flex;
     margin: 0 auto;
     max-width: 1400px;
-    padding: 2em;
+    padding: 1em;
     width: 100%;
   }
 </style>

src/components/Nav.astro

@@ -4,6 +4,19 @@ const { current = '' } = Astro.props;
 ---
 
 <style>
+
+  @media (orientation: portrait) {
+    nav {
+      justify-content: center;
+      flex-wrap: wrap;
+    }
+
+    .nav-buttons {
+      flex-wrap: wrap;
+      justify-content: space-evenly;
+    }
+  }
+
   nav {
     align-items: center;
     display: flex;
@@ -14,6 +27,12 @@ const { current = '' } = Astro.props;
     text-transform: uppercase;
   }
 
+  .nav-buttons {
+    display: flex;
+    flex-direction: row;
+    overflow-x: hidden;
+  }
+
   a {
     color: inherit;
     text-decoration: none;
@@ -56,9 +75,11 @@ const { current = '' } = Astro.props;
 </style>
 
 <nav>
-  <a class={current === "" ? "selected" : ""} href='/'>home</a>
+  <div class="nav-buttons">
-  <a class={current === "about" ? "selected" : ""} href='/about'>about</a>
+    <a class={current === "" ? "selected" : ""} href='/'>home</a>
-  <a class={current === "blog" ? "selected" : ""} href='/blog'>blog</a>
+    <a class={current === "about" ? "selected" : ""} href='/about'>about</a>
+    <a class={current === "blog" ? "selected" : ""} href='/blog'>blog</a>
+  </div>
   <div class="theme-toggle-container">
     <ThemeToggleButton client:load />
   </div>