From 5d6cf1ba0c6cf99d733c045c2516c5604199092a Mon Sep 17 00:00:00 2001
From: YouHaveTrouble <youhavetrouble@youhavetrouble.me>
Date: Tue, 14 May 2024 19:03:26 +0200
Subject: [PATCH] More mobile-friendly nav

---
 src/components/Header.astro |  2 +-
 src/components/Nav.astro    | 27 ++++++++++++++++++++++++---
 2 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/src/components/Header.astro b/src/components/Header.astro
index b9951d8..0d2cdeb 100644
--- a/src/components/Header.astro
+++ b/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>
diff --git a/src/components/Nav.astro b/src/components/Nav.astro
index 3e6b6cc..33798b0 100644
--- a/src/components/Nav.astro
+++ b/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>
-  <a class={current === "about" ? "selected" : ""} href='/about'>about</a>
-  <a class={current === "blog" ? "selected" : ""} href='/blog'>blog</a>
+  <div class="nav-buttons">
+    <a class={current === "" ? "selected" : ""} href='/'>home</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>