feat: mobile support

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;
+  }
+}

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;
+  }
+}

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;
+  }
+}

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>