move to Baskervville for headings, with proper smallcaps variant

src/components/Post.astro

@@ -1,8 +1,9 @@
 ---
-import type { CollectionEntry } from 'astro:content';
-import { render } from 'astro:content';
+import '@fontsource-variable/baskervville-sc';
 
-import SmallCaps from '@components/SmallCaps.astro';
+import type { CollectionEntry } from 'astro:content';
+
+import { render } from 'astro:content';
 import Toc from '@components/Toc.vue';
 import { formatDate } from '@lib/datefmt';
 
@@ -25,6 +26,10 @@ article {
     padding: 0 var(--content-padding);
 }
 
+h1 {
+    font-family: 'Baskervville SC Variable';
+}
+
 #left-gutter {
     grid-column: 1 / 2;
     justify-self: end;
@@ -70,12 +75,20 @@ footer {
         }
     }
 }
+
+article :global(section.post::first-letter) {
+    initial-letter: 2;
+    margin-right: 0.5rem;
+    color: var(--accent-color);
+    font-family: 'Baskervville';
+}
 </style>
 
 <article class="prose">
     <header class="title">
         <h1>
-            <SmallCaps text={entry.data.title} upperWeight={500} lowerWeight={800} />
+            <!-- <SmallCaps text={entry.data.title} upperWeight={500} lowerWeight={800} /> -->
+            { entry.data.title }
         </h1>
         <p class="subtitle">{ formatDate(entry.data.date) }</p>
     </header>

src/components/SmallCaps.astro

@@ -1,50 +0,0 @@
----
-// few web fonts have "true" smallcaps, so instead they just take the full-size caps and scale them
-// down to match the height of lowercase letters. But this leads to an awkward effect where the
-// scaled-down caps are "lighter" looking than the regular-sized caps, so here we reduce the weight
-// of just the full-sized caps to compensate.
-export interface Props {
-    text: string,
-    upperWeight?: number | string,
-    lowerWeight?: number | string,
-};
-
-const { text, upperWeight = 'inherit', lowerWeight = 'bolder' } = Astro.props;
-
-const upperOrDigit = /[A-Z0-9]+/g;
-let prevIdx = 0;
-let segments = [];
-for (const match of text.matchAll(upperOrDigit)) {
-    const lower = text.slice(prevIdx, match.index);
-    // if the first letter of the text is upper, this first segment will be '', so skip it
-    if (lower) {
-        segments.push({type: 'lower', chars: lower})
-    };
-    segments.push({type: 'upper', chars: match[0]})
-    prevIdx = match.index + match[0].length;
-}
-const final = text.slice(prevIdx);
-// if there is a final segment, it wasn't a match, so it must be lowercase
-if (final) {
-    segments.push({type: 'lower', chars: final})
-};
----
-
-<span class="small-caps">
-    { segments.map(s => <span class={s.type}>{ s.chars }</span>) }
-</span>
-
-
-<style define:vars={{ upperWeight, lowerWeight }}>
-.small-caps {
-    font-variant: small-caps;
-}
-
-.upper {
-    font-weight: var(--upperWeight);
-}
-
-.lower {
-    font-weight: var(--lowerWeight);
-}
-</style>

src/layouts/BaseLayout.astro

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

src/styles/main.css

@@ -1,3 +1,4 @@
+@import '@fontsource-variable/figtree';
 @import 'reset.css';
 @import 'vars.css';
 @import 'prose.css';

src/styles/prose.css

@@ -1,35 +1,34 @@
+@import '@fontsource-variable/baskervville';
+
 .prose {
     h1, h2, h3, h4, h5, h6 {
-        font-family: 'Merriweather Variable', serif;
-        font-weight: 600;
+        font-family: 'Baskervville Variable', serif;
+        font-weight: 650;
+        margin-bottom: 0.25rem;
         color: hsl(0 0% 27%);
         letter-spacing: 0.015em;
     }
 
     h1 {
         margin-top: 0.5em;
-        font-size: 2.15em;
+        font-size: 2.25em;
     }
 
     h2 {
-        font-size: 1.6em;
+        font-size: 1.75em;
     }
 
     h3 {
-        font-size: 1.25em;
+        font-size: 1.4em;
     }
 
     h4 {
-        font-size: 1.1em;
+        font-size: 1.2em;
     }
 
     h5, h6 {
+        font-size: 1em;
         font-weight: 700;
-        color: var(--content-color);
-    }
-
-    h1, h2, h3, h4 {
-        margin-bottom: 0.5em;
     }
 
     p, ul, ol {