adjusted bottom margin of footer; images on projects page now shrink on mobile

src/lib/viewport/header.svelte

@@ -0,0 +1,47 @@
+{#snippet headerContent()}
+    <a href="/">Home</a>
+    <a href="/projects">Projects</a>
+    <a href="/projects/projectn5/devlog">Project N5</a>
+    <a href="/blog">Blog</a>
+    <a href="/about">About</a>
+{/snippet}
+
+<div class="header-content">
+    {@render headerContent()}
+</div>
+
+<style>
+    .header-content {
+        box-sizing: border-box;
+        width: 100%;
+        max-width: var(--page-width);
+        /* min-height: 72px; */
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        gap: 16px;
+        align-items: center;
+        padding: 0 var(--margin-content-side);
+        margin: 0 auto;
+    }
+
+    a {
+        font-family: var(--font-stylised);
+        font-size: 1rem;
+        font-weight: bold;
+        text-decoration: none;
+    }
+    
+    a:link {
+        color: var(--color-text);
+    }
+    /* visited link */
+    a:visited {
+        color: var(--color-text);
+    }
+    /* mouse over link */
+    a:hover {
+        color: var(--color-highlight);
+        /* text-decoration: underline dashed 2px var(--color-highlight); */
+    }
+</style>