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>