move to Baskervville for headings, with proper smallcaps variant

bun.lock

@@ -9,8 +9,9 @@
         "@astrojs/rss": "^4.0.15",
         "@astrojs/sitemap": "^3.7.0",
         "@astrojs/vue": "^5.1.4",
+        "@fontsource-variable/baskervville": "^5.2.3",
+        "@fontsource-variable/baskervville-sc": "^5.2.3",
         "@fontsource-variable/figtree": "^5.2.10",
-        "@fontsource-variable/merriweather": "^5.2.6",
         "astro": "^5.18.0",
         "sharp": "^0.34.5",
       },
@@ -173,9 +174,11 @@
 
     "@esbuild/win32-x64": ["@esbuild/win32-x64@0.27.3", "", { "os": "win32", "cpu": "x64" }, "sha512-4uJGhsxuptu3OcpVAzli+/gWusVGwZZHTlS63hh++ehExkVT8SgiEf7/uC/PclrPPkLhZqGgCTjd0VWLo6xMqA=="],
 
-    "@fontsource-variable/figtree": ["@fontsource-variable/figtree@5.2.10", "", {}, "sha512-a5Gumbpy3mdd+Yg31g6Qb7CmjYbrfyutJa3bWfP5q8A4GclIOwX7mI+ZuSHsJnw/mHvW6r9oh1AHJcJTIxK4JA=="],
+    "@fontsource-variable/baskervville": ["@fontsource-variable/baskervville@5.2.3", "", {}, "sha512-0RwdllhidVmgN23NPTJL81n8/K7CcdxdIdAEjspTPgtS62yE9deScUxyc8+RFRA5HxFAJqsCf9NBy4R3O93p0w=="],
 
-    "@fontsource-variable/merriweather": ["@fontsource-variable/merriweather@5.2.6", "", {}, "sha512-bHCDt99f/M48eUcFA86uh/oSPyn8r/ZxXR9l578wqLvjTwDzXx8A/XOAI05WfJ3LnH1rDufQX5RJwiZtbXUCkw=="],
+    "@fontsource-variable/baskervville-sc": ["@fontsource-variable/baskervville-sc@5.2.3", "", {}, "sha512-uXVaMQMkxtgU6+wGs1OUUT8xVFsxju8Hn6YsZq3fGwtSKIznra6e0KexxcThoHNAP2mLpy7GS3C6mblYU8QaTQ=="],
+
+    "@fontsource-variable/figtree": ["@fontsource-variable/figtree@5.2.10", "", {}, "sha512-a5Gumbpy3mdd+Yg31g6Qb7CmjYbrfyutJa3bWfP5q8A4GclIOwX7mI+ZuSHsJnw/mHvW6r9oh1AHJcJTIxK4JA=="],
 
     "@img/colour": ["@img/colour@1.0.0", "", {}, "sha512-A5P/LfWGFSl6nsckYtjw9da+19jB8hkJ6ACTGcDfEJ0aE+l2n2El7dsVM7UVHZQ9s2lmYMWlrS21YLy2IR1LUw=="],
 

package.json

@@ -5,8 +5,9 @@
     "@astrojs/rss": "^4.0.15",
     "@astrojs/sitemap": "^3.7.0",
     "@astrojs/vue": "^5.1.4",
+    "@fontsource-variable/baskervville": "^5.2.3",
+    "@fontsource-variable/baskervville-sc": "^5.2.3",
     "@fontsource-variable/figtree": "^5.2.10",
-    "@fontsource-variable/merriweather": "^5.2.6",
     "astro": "^5.18.0",
     "sharp": "^0.34.5"
   },

src/components/Post.astro

@@ -1,8 +1,9 @@
 ---
-import type { CollectionEntry } from 'astro:content';
+import '@fontsource-variable/baskervville-sc';
-import { render } from 'astro:content';
 
-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-family: 'Baskervville Variable', serif;
-        font-weight: 600;
+        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 {