jfmonty2/blog
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

move to Baskervville for headings, with proper smallcaps variant

Browse Source
This commit is contained in:
Joseph Montanaro
2026-03-05 08:15:24 -05:00
parent b0e6576b33
commit b291e93e75
7 changed files with 36 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
bun.lock
View File

@@ -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=="],

3
package.json
View File

@@ -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"
},

21
src/components/Post.astro
View File

@@ -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>

50
src/components/SmallCaps.astro
View File

@@ -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>

2
src/layouts/BaseLayout.astro
View File

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

1
src/styles/main.css
View File

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

21
src/styles/prose.css
View File

@@ -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 {