Add navigation

packages/website/src/lib/Nav.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+    import url from "./logo.svg?url";
+</script>
+
+<header id="navbar">
+    <div class="container">
+        <nav aria-label="Primary">
+            <a href="#page-content" class="screen-reader-only skip-navigation"
+                >Skip to content</a
+            >
+            <ul class="navbar-links">
+                <li>
+                    <a class="navbar-link-home" href="/">
+                        <img
+                            src={url}
+                            class="navbar-logo"
+                            alt=""
+                            width="28"
+                            height="28"
+                        />
+                        <span class="site-name">Jade Ellis</span>
+                    </a>
+                </li>
+                <!-- <li><a href="/about/" class="navbar-link">About</a></li>
+                <li><a href="/art/" class="navbar-link">Art</a></li>
+                <li><a href="/blog/" class="navbar-link">Blog</a></li> -->
+            </ul>
+        </nav>
+    </div>
+</header>
+
+<style>
+    #navbar {
+        flex-shrink: 0;
+        width: 100%;
+        padding-block: 12px;
+
+        background-color: var(--surface-color);
+        overflow-x: auto;
+        color: #fff;
+        
+    }
+    .container {
+        --container-max-width: calc(var(--page-width) + 6rem + 16px);
+    }
+    #navbar a {
+        text-decoration: none;
+    }
+    #navbar nav {
+        white-space: nowrap;
+        flex: 1 0 auto;
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 16px;
+    }
+    .navbar-logo {
+        width: 3rem;
+    }
+    .navbar-links {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        gap: 0.25em;
+        list-style: none;
+        margin: 0;
+        padding: 0;
+    }
+    .navbar-links > :first-child {
+        margin-inline-end: auto;
+    }
+    .navbar-link-home {
+        display: flex;
+        gap: 4px;
+        align-items: center;
+        padding: 8px;
+        font-weight: 700;
+    }
+
+    .skip-navigation {
+        top: 50%;
+        transform: translate(8px, -50%);
+        padding: 8px;
+        background-color: var(--color-navbar-bg);
+    }
+</style>

packages/website/src/lib/styles.css

@@ -1,6 +1,8 @@
 :root {
     color-scheme: light;
     --spacing: 24px;
+    --page-width: 57.75rem;
+
     --theme: #242424;
     --background-color: #f8f8f8;
     --surface-color: #fff;
@@ -13,10 +15,14 @@
     --font-color: rgba(0, 0, 0, .87);
     --font-color-contrast: rgba(255, 255, 255, 1);
     --font-color-secondary: rgba(0, 0, 0, .6);
+
+    --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+
     --font-family-base: Roboto, sans-serif;
     --font-family-heading: "Sen", Roboto, sans-serif;
+
     --border-radius: 8px;
-    --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+    
 }
 
 @media (prefers-color-scheme: dark) {
@@ -78,11 +84,18 @@ svg {
     height: 100%;
     display: block;
 }
-
+.container {
+    
+    --container-max-width: var(--page-width);
+    --padding-x: var(--spacing);
+    max-width: calc(var(--container-max-width) + 2*var(--padding-x));
+    /* width: 100%; */
+    margin-inline: auto;
+    padding-inline: var(--padding-x);
+  }
+  
 .main {
-    max-width: 1056px;
+    /* margin: 0 auto; */
-    margin: 0 auto;
-    padding: 0 var(--spacing);
     --edge-border-radius: var(--border-radius);
 }
 
@@ -103,4 +116,13 @@ svg {
 
 .edge {
     border-radius: var(--edge-border-radius);
-}
+}
+
+.screen-reader-only {
+    position: absolute;
+    clip: rect(0, 0, 0, 0);
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    white-space: nowrap;
+  }

packages/website/src/routes/+layout.svelte

@@ -1,11 +1,13 @@
 <script lang="ts">
     import "$lib/styles.css";
     import Favicons from "$lib/Favicons.svelte";
+    import Nav from "$lib/Nav.svelte";
 </script>
 <svelte:head>
     <Favicons />
 </svelte:head>
-<main class="main">
+<Nav />
+<main class="main container" id="page-content">
     <slot />
 
 </main>