continue working on post layout, add typography styles

src/components/Post.astro

@@ -70,7 +70,7 @@ footer {
 }
 </style>
 
-<article>
+<article class="prose">
     <header class="title">
         <h1>{ entry.data.title }</h1>
         <p class="subtitle">{ formatDate(entry.data.date) }</p>

src/layouts/BaseLayout.astro

@@ -1,4 +1,6 @@
 ---
+import '@fontsource-variable/figtree';
+import '@fontsource-variable/merriweather';
 import '@styles/main.css';
 ---
 

src/layouts/PostLayout.astro

@@ -1,56 +0,0 @@
----
-import BaseLayout from '@layouts/BaseLayout.astro';
----
-
-<style>
-/* 3-column grid: left gutter, center content, and right gutter */
-article {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr) minmax(0, var(--content-width)) minmax(0, 1fr);
-    /* a bit of breathing room for narrow screens */
-    padding: 0 var(--content-padding);
-}
-
-.left-gutter {
-    grid-column: 1 / 2;
-    justify-self: end;
-}
-
-.right-gutter {
-    grid-column: 3 / 4;
-    justify-self: start;
-}
-
-.title {
-    grid-column: 2 / 3;
-}
-
-.subtitle {
-    font-size: 0.9em;
-    font-style: italic;
-    margin-top: -0.75rem;
-}
-
-.post {
-    grid-column: 2 / 3;
-}
-</style>
-
-<BaseLayout>
-    <article>
-        <header class="title">
-            <h1>Working Title</h1>
-            <p class="subtitle">Subtitle</p>
-        </header>
-
-        <div class="left-gutter" />
-
-        <section class="post">
-            <slot />
-        </section>
-
-        <div class="right-gutter" />
-
-        <footer />
-    </article>
-</BaseLayout>

src/styles/main.css

@@ -1,9 +1,11 @@
 @import 'reset.css';
 @import 'vars.css';
+@import 'prose.css';
 
 body {
+    font-family: 'Figtree Variable', sans-serif;
+    font-weight: 350;
     font-size: var(--content-size);
     line-height: var(--content-line-height);
-    letter-spacing: -0.005em;
     color: var(--content-color);
 }

src/styles/prose.css

@@ -0,0 +1,51 @@
+.prose {
+    h1, h2, h3, h4, h5, h6 {
+        font-family: 'Merriweather Variable', serif;
+        font-weight: 600;
+        color: hsl(0 0% 27%);
+        letter-spacing: 0.015em;
+    }
+
+    h1 {
+        margin-top: 0.5em;
+        font-size: 2.15em;
+    }
+
+    h2 {
+        font-size: 1.6em;
+    }
+
+    h3 {
+        font-size: 1.25em;
+    }
+
+    h4 {
+        font-size: 1.1em;
+    }
+
+    h1, h2, h3, h4 {
+        margin-bottom: 0.5em;
+    }
+
+    p, ul, ol {
+        margin-bottom: 0.8em;
+    }
+
+    ul, ol, blockquote {
+        padding: 0;
+        margin-left: 2em;
+    }
+
+    blockquote {
+        position: relative;
+        font-style: italic;
+    }
+
+    blockquote::before {
+        content: '';
+        position: absolute;
+        left: -01em;
+        height: 100%;
+        border-right: 3px solid var(--accent-color);
+    }
+}

src/styles/vars.css

@@ -1,10 +1,10 @@
 :root {
     --content-size: 1.25rem;
     --content-size-sm: 1rem;
-    --content-line-height: 1.4;
+    --content-line-height: 1.5;
     --content-width: 52.5rem;
     --content-padding: 0.65rem;
-    --content-color: #1e1e1e;
+    --content-color: hsl(0deg 0% 20%);
     --content-color-faded: #555;
     --primary-color: hsl(202deg 72% 28%);
     --primary-color-faded: hsl(202deg 14% 36%);