some mobile layout enhancements

src/lib/viewport/header.svelte

@@ -1,4 +1,4 @@
-{#snippet headerContent()}
+{#snippet headerLinks()}
     <a href="/">Home</a>
     <a href="/projects">Projects</a>
     <a href="/projects/projectn5/devlog">Project N5</a>
@@ -7,11 +7,13 @@
 {/snippet}
 
 <div class="header-content">
-    {@render headerContent()}
+    <div class="header-links">
+        {@render headerLinks()}
+    </div>
 </div>
 
 <style>
-    .header-content {
+    .header-links {
         box-sizing: border-box;
         width: 100%;
         max-width: var(--page-width);
@@ -26,7 +28,7 @@
     }
 
     a {
-        font-family: var(--font-stylised);
+        font-family: var(--font-);
         font-size: 1rem;
         font-weight: bold;
         text-decoration: none;
@@ -44,4 +46,14 @@
         color: var(--color-highlight);
         /* text-decoration: underline dashed 2px var(--color-highlight); */
     }
+
+    @media screen and (max-width: 500px) {
+        .header-links {
+            justify-content: center;
+        }
+
+        a {
+            font-size: 0.8rem;
+        }
+    }
 </style>