diff --git a/bun.lock b/bun.lock index bb96810..42347bf 100644 --- a/bun.lock +++ b/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=="], diff --git a/package.json b/package.json index 139f3d0..4ff4060 100644 --- a/package.json +++ b/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" }, diff --git a/src/components/Post.astro b/src/components/Post.astro index 23ce955..d49d362 100644 --- a/src/components/Post.astro +++ b/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'; +}

- + + { entry.data.title }

{ formatDate(entry.data.date) }

diff --git a/src/components/SmallCaps.astro b/src/components/SmallCaps.astro deleted file mode 100644 index 62cfead..0000000 --- a/src/components/SmallCaps.astro +++ /dev/null @@ -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}) -}; ---- - - - { segments.map(s => { s.chars }) } - - - - diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro index 3f58802..15a36e4 100644 --- a/src/layouts/BaseLayout.astro +++ b/src/layouts/BaseLayout.astro @@ -1,6 +1,4 @@ --- -import '@fontsource-variable/figtree'; -import '@fontsource-variable/merriweather'; import '@styles/main.css'; --- diff --git a/src/styles/main.css b/src/styles/main.css index 22d327d..b2b2ea2 100644 --- a/src/styles/main.css +++ b/src/styles/main.css @@ -1,3 +1,4 @@ +@import '@fontsource-variable/figtree'; @import 'reset.css'; @import 'vars.css'; @import 'prose.css'; diff --git a/src/styles/prose.css b/src/styles/prose.css index 02a80ec..605012b 100644 --- a/src/styles/prose.css +++ b/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 {