finish css overhaul

src/routes/+layout.svelte

@@ -1,26 +1,29 @@
-<style>
+<style lang="scss">
     .header {
-        background-color: #4f5f68;
+        background: hsl(202deg 14% 36%);
     }
 
     nav {
         max-width: 30rem;
         margin: 0 auto;
-        display: flex;
-        justify-content: space-around;
-    }
 
-    nav a {
-        color: white;
-        width: 8rem;
-        min-width: 6rem;
-        font-size: 1.5rem;
-        text-decoration: none;
-        text-align: center;
-        padding: 0.25rem 0;
-    }
-    nav a:hover {
-        background-color: #00000025;
+        display: flex;
+        justify-content: space-between;
+
+        & a {
+            flex: 1;
+            max-width: 8rem;
+            padding: 0.25rem 1rem;
+
+            font-size: 1.75rem;
+            color: white;
+            text-decoration: none;
+            text-align: center;
+
+            &:hover {
+                background: hsl(0deg 0% 0% / 10%);
+            }
+        }
     }
 </style>
 

src/routes/_posts/the-enduring-shell.svx

@@ -20,4 +20,4 @@ A lot of time has passed since then, and now I can easily imagine situations whe
 
 ## CLI apps are easier to write
 
-
+blah blah words here

src/routes/about/+page.svelte

@@ -1,3 +1,7 @@
+<script>
+    import '$styles/prose.scss';
+</script>
+
 <style>
     .content {
         max-width: var(--content-width);
@@ -10,7 +14,7 @@
 </svelte:head>
 
 
-<div class="content">
+<div class="prose content">
     <h1>About Me</h1>
 
     <p>(Joe's wife wrote this because Joe feels weird writing about himself.)</p>

src/routes/posts/+page.svelte

@@ -1,75 +1,86 @@
 <script>
+    import '$styles/prose.scss'; 
+
     import { formatDate } from '$lib/datefmt.js';
     import { postData } from '../_posts/all.js';
 </script>
 
-<style>
-    #posts {
-        /*text-align:  center;*/
+<style lang="scss">
+    .wrapper {
+        padding: 0 var(--content-padding);
+    }
+
+    .posts {
         max-width:  var(--content-width);
         margin:  0 auto;
     }
 
     hr {
-        margin: 2rem 0;
+        margin: 2.5rem 0;
         border-color: #eee;
     }
 
     .post-date {
-        color: #808080;
+        color: var(--content-color-faded);
     }
 
     .draft-notice {
-        vertical-align: 0.3rem;
-        font-size: 0.6rem;
+        vertical-align: middle;
+        font-size: 0.75rem;
         padding: 0 0.3rem;
         color: #e00;
         background-color: #ffd9d9;
         border: 1px solid red;
-        border-radius: 20%/50%;
-        margin: 0 0.2rem;
+        border-radius: 20% / 50%;
     }
 
     .post-link {
         text-decoration: none;
-    }
-    .post-link:hover {
-        text-decoration: underline;
+
+        &:hover {
+            text-decoration: underline;
+        }
     }
 
     h2 {
-        font-size: 1.25rem;
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
         margin-top: 0.5rem;
         margin-bottom: 0.75rem;
+        font-size: 1.5rem;
+
+        & a {
+            color: currentcolor;
+        }
     }
 
-    h2 a {
-        color: currentcolor;
-    }
 </style>
 
 <svelte:head>
     <title>Posts</title>
 </svelte:head>
 
-<div id="posts">
-    <h1 style:text-align="center">All Posts</h1>
-    {#each postData as post, idx}
-        <div class="post">
-            <div class="post-date">{new Date(post.date).toISOString().split('T')[0]}</div>
-            <h2>
-                <a data-sveltekit-preload-data="hover" class="post-link" href="/{post.slug}">
-                    {post.title}
-                </a>
-                {#if post.draft}
-                    <span class="draft-notice">Draft</span>
-                {/if}
-            </h2>
-            <p>{post.description}</p>
-        </div>
+<div class="wrapper">
+    <div class="posts prose">
+        <h1 style:text-align="center">All Posts</h1>
+        {#each postData as post, idx}
+            <div class="post">
+                <div class="post-date">{new Date(post.date).toISOString().split('T')[0]}</div>
+                <h2 class="prose">
+                    <a data-sveltekit-preload-data="hover" class="post-link" href="/{post.slug}">
+                        {post.title}
+                    </a>
+                    {#if post.draft}
+                        <span class="draft-notice">Draft</span>
+                    {/if}
+                </h2>
+                <p>{post.description}</p>
+            </div>
 
-        {#if idx < postData.length - 1}
-        <hr>
-        {/if}
-    {/each}
+            {#if idx < postData.length - 1}
+            <hr>
+            {/if}
+        {/each}
+    </div>
 </div>