From bd9511ff65eb358b788c54ab5f50a2e57480b375 Mon Sep 17 00:00:00 2001
From: Barrett Ruth <br.barrettruth@gmail.com>
Date: Mon, 2 Jun 2025 11:06:58 -0500
Subject: [PATCH] feat: mobile support

---
 public/styles/common.css    | 10 ++++++++++
 public/styles/index.css     | 10 ++++++++++
 public/styles/posts.css     | 13 +++++++++++++
 src/components/Header.astro | 19 +++++++++++++++++++
 4 files changed, 52 insertions(+)

diff --git a/public/styles/common.css b/public/styles/common.css
index 47643f0..fea137f 100644
--- a/public/styles/common.css
+++ b/public/styles/common.css
@@ -74,3 +74,13 @@ pre {
     "liga" 0,
     "calt" 0;
 }
+
+@media (max-width: 768px) {
+  header {
+    font-size: 0.9em;
+  }
+
+  footer {
+    font-size: 0.9em;
+  }
+}
diff --git a/public/styles/index.css b/public/styles/index.css
index 00818fd..d85701c 100644
--- a/public/styles/index.css
+++ b/public/styles/index.css
@@ -71,3 +71,13 @@ ul {
   width: 100%;
   right: 0;
 }
+
+@media (max-width: 768px) {
+  .topics {
+    font-size: 1.8em;
+  }
+
+  .posts {
+    font-size: 1.2em;
+  }
+}
diff --git a/public/styles/posts.css b/public/styles/posts.css
index ddfdec2..fc3bcde 100644
--- a/public/styles/posts.css
+++ b/public/styles/posts.css
@@ -150,3 +150,16 @@ pre * {
   font-weight: normal;
 }
 
+@media (max-width: 768px) {
+  .post-title {
+    font-size: 1.8em;
+  }
+
+  .post-meta {
+    font-size: 1.2em;
+  }
+
+  .post-article {
+    font-size: 1em;
+  }
+}
diff --git a/src/components/Header.astro b/src/components/Header.astro
index 934e430..161dec0 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -135,4 +135,23 @@ const promptText = topic ? `barrett@ruth:~$ ${topic}` : "barrett@ruth:~$";
     margin-left: 25px;
     text-decoration: none;
   }
+
+  @media (max-width: 768px) {
+    header {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+    
+    .header-links {
+      align-self: flex-end;
+      display: flex;
+      flex-direction: column;
+      text-align: right;
+      gap: 5px;
+    }
+
+    .header-links a {
+      margin-left: 0;
+    }
+  }
 </style>