From 1ed4cb4663bcafc074d92a9fd38db9f71af57b5d Mon Sep 17 00:00:00 2001 From: svemagie <869694+svemagie@users.noreply.github.com> Date: Thu, 19 Mar 2026 14:59:03 +0100 Subject: [PATCH] style: serve Lora locally, lighten bg, bump article font size MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Install @fontsource/lora and serve latin/latin-ext woff2 files (weights 400/700, normal + italic) via Eleventy passthrough copy - Lora now leads the serif font stack in Tailwind and critical CSS, with Iowan Old Style / Palatino as system-font fallbacks - Light-mode background lightened: #fbf1c7 → #fefcf0 (still warm, noticeably less yellow) - Article prose bumped: post.njk prose-lg, page.njk prose-xl Co-Authored-By: Claude Sonnet 4.6 --- _includes/layouts/page.njk | 2 +- _includes/layouts/post.njk | 4 +-- css/critical.css | 6 ++-- css/tailwind.css | 74 +++++++++++++++++++++++++++++++++++--- eleventy.config.js | 11 ++++++ package-lock.json | 10 ++++++ package.json | 1 + tailwind.config.js | 3 +- 8 files changed, 100 insertions(+), 11 deletions(-) diff --git a/_includes/layouts/page.njk b/_includes/layouts/page.njk index 5451bbe..049d8f1 100644 --- a/_includes/layouts/page.njk +++ b/_includes/layouts/page.njk @@ -31,7 +31,7 @@ withSidebar: true {% endif %} -
+
{{ content | safe }}
diff --git a/_includes/layouts/post.njk b/_includes/layouts/post.njk index d10b373..fa4e37f 100644 --- a/_includes/layouts/post.njk +++ b/_includes/layouts/post.njk @@ -87,12 +87,12 @@ withBlogSidebar: true ⚠ {{ contentWarning }} (click to show) -
+
{{ content | safe }}
{% else %} -
+
{{ content | safe }}
{% endif %} diff --git a/css/critical.css b/css/critical.css index 9451b34..163c72e 100644 --- a/css/critical.css +++ b/css/critical.css @@ -2,17 +2,17 @@ /* Covers: layout shell, header, dark mode toggle, font display, basic typography */ *,*::before,*::after{box-sizing:border-box} -body{margin:0;font-family:"Iowan Old Style","Palatino Linotype","URW Palladio L",P052,serif;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} +body{margin:0;font-family:"Lora","Iowan Old Style","Palatino Linotype","URW Palladio L",P052,serif;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} /* Dark mode base — Gruvbox-inspired warm palette */ -body{background-color:#fbf1c7;color:#282828} +body{background-color:#fefcf0;color:#282828} .dark body{background-color:#1d2021;color:#fbf1c7} /* Container */ .container{max-width:64rem;margin-left:auto;margin-right:auto;padding-left:1rem;padding-right:1rem} /* Header — sticky, visible immediately */ -.site-header{background-color:#fbf1c7;border-bottom:1px solid #d5c4a1;padding-top:1rem;padding-bottom:1rem;position:sticky;top:0;z-index:50} +.site-header{background-color:#fefcf0;border-bottom:1px solid #d5c4a1;padding-top:1rem;padding-bottom:1rem;position:sticky;top:0;z-index:50} .dark .site-header{background-color:#282828;border-bottom-color:#504945} .header-container{display:flex;align-items:center;justify-content:space-between} .site-title{font-size:1.25rem;font-weight:700;color:#282828;text-decoration:none} diff --git a/css/tailwind.css b/css/tailwind.css index 3d79016..9c23c64 100644 --- a/css/tailwind.css +++ b/css/tailwind.css @@ -1,3 +1,69 @@ +/* Lora font — latin + latin-ext subsets, weights 400/700, normal + italic */ +@font-face { + font-family: 'Lora'; + font-style: normal; + font-display: optional; + font-weight: 400; + src: url(/fonts/lora-latin-ext-400-normal.woff2) format('woff2'); + unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; +} +@font-face { + font-family: 'Lora'; + font-style: normal; + font-display: optional; + font-weight: 400; + src: url(/fonts/lora-latin-400-normal.woff2) format('woff2'); + unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; +} +@font-face { + font-family: 'Lora'; + font-style: italic; + font-display: optional; + font-weight: 400; + src: url(/fonts/lora-latin-ext-400-italic.woff2) format('woff2'); + unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; +} +@font-face { + font-family: 'Lora'; + font-style: italic; + font-display: optional; + font-weight: 400; + src: url(/fonts/lora-latin-400-italic.woff2) format('woff2'); + unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; +} +@font-face { + font-family: 'Lora'; + font-style: normal; + font-display: optional; + font-weight: 700; + src: url(/fonts/lora-latin-ext-700-normal.woff2) format('woff2'); + unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; +} +@font-face { + font-family: 'Lora'; + font-style: normal; + font-display: optional; + font-weight: 700; + src: url(/fonts/lora-latin-700-normal.woff2) format('woff2'); + unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; +} +@font-face { + font-family: 'Lora'; + font-style: italic; + font-display: optional; + font-weight: 700; + src: url(/fonts/lora-latin-ext-700-italic.woff2) format('woff2'); + unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; +} +@font-face { + font-family: 'Lora'; + font-style: italic; + font-display: optional; + font-weight: 700; + src: url(/fonts/lora-latin-700-italic.woff2) format('woff2'); + unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; +} + /* Inter font — latin + latin-ext subsets, weights 400/500/600/700 */ @font-face { font-family: 'Inter'; @@ -671,7 +737,7 @@ --pagefind-ui-scale: 1; --pagefind-ui-primary: #076678; --pagefind-ui-text: #282828; - --pagefind-ui-background: #fbf1c7; + --pagefind-ui-background: #fefcf0; --pagefind-ui-border: #d5c4a1; --pagefind-ui-tag: #f2e5bc; --pagefind-ui-border-width: 1px; @@ -690,7 +756,7 @@ /* Search input */ #search .pagefind-ui__search-input { - background-color: #fbf1c7; + background-color: #fefcf0; color: #282828; border-color: #d5c4a1; font-weight: 400; @@ -716,7 +782,7 @@ /* Search clear button */ #search .pagefind-ui__search-clear { color: #665c54; - background-color: #fbf1c7; + background-color: #fefcf0; } .dark #search .pagefind-ui__search-clear { @@ -781,7 +847,7 @@ /* "Load more" button */ #search .pagefind-ui__button { color: #076678; - background-color: #fbf1c7; + background-color: #fefcf0; border-color: #d5c4a1; cursor: pointer; } diff --git a/eleventy.config.js b/eleventy.config.js index 7ed3259..32f54fc 100644 --- a/eleventy.config.js +++ b/eleventy.config.js @@ -525,6 +525,17 @@ export default function (eleventyConfig) { "node_modules/@fontsource/inter/files/inter-latin-*-normal.woff2": "fonts", "node_modules/@fontsource/inter/files/inter-latin-ext-*-normal.woff2": "fonts", }); + // Copy Lora font files (latin + latin-ext, weights 400/700, normal + italic) + eleventyConfig.addPassthroughCopy({ + "node_modules/@fontsource/lora/files/lora-latin-400-normal.woff2": "fonts", + "node_modules/@fontsource/lora/files/lora-latin-ext-400-normal.woff2": "fonts", + "node_modules/@fontsource/lora/files/lora-latin-400-italic.woff2": "fonts", + "node_modules/@fontsource/lora/files/lora-latin-ext-400-italic.woff2": "fonts", + "node_modules/@fontsource/lora/files/lora-latin-700-normal.woff2": "fonts", + "node_modules/@fontsource/lora/files/lora-latin-ext-700-normal.woff2": "fonts", + "node_modules/@fontsource/lora/files/lora-latin-700-italic.woff2": "fonts", + "node_modules/@fontsource/lora/files/lora-latin-ext-700-italic.woff2": "fonts", + }); // Watch for content changes eleventyConfig.addWatchTarget("./content/"); diff --git a/package-lock.json b/package-lock.json index 07c3890..2293cb4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,6 +18,7 @@ "@atproto/api": "^0.12.0", "@chrisburnell/eleventy-cache-webmentions": "^2.2.7", "@fontsource/inter": "^5.2.8", + "@fontsource/lora": "^5.2.8", "@kevingimbel/eleventy-plugin-mermaid": "^3.0.1", "@quasibit/eleventy-plugin-sitemap": "^2.2.0", "@resvg/resvg-js": "^2.6.2", @@ -550,6 +551,15 @@ "url": "https://github.com/sponsors/ayuhito" } }, + "node_modules/@fontsource/lora": { + "version": "5.2.8", + "resolved": "https://registry.npmjs.org/@fontsource/lora/-/lora-5.2.8.tgz", + "integrity": "sha512-AQlfsHw4TP1x/eb2IZ6VjQ70ctKa39m9JN9A4zlvDOeKYLrCs+GaYIEQ86Y6YfSPGHn01bErXkRcyktOW0LOPQ==", + "license": "OFL-1.1", + "funding": { + "url": "https://github.com/sponsors/ayuhito" + } + }, "node_modules/@iarna/toml": { "version": "2.2.5", "resolved": "https://registry.npmjs.org/@iarna/toml/-/toml-2.2.5.tgz", diff --git a/package.json b/package.json index 2f0e3a1..9e780ac 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "@atproto/api": "^0.12.0", "@chrisburnell/eleventy-cache-webmentions": "^2.2.7", "@fontsource/inter": "^5.2.8", + "@fontsource/lora": "^5.2.8", "@kevingimbel/eleventy-plugin-mermaid": "^3.0.1", "@quasibit/eleventy-plugin-sitemap": "^2.2.0", "@resvg/resvg-js": "^2.6.2", diff --git a/tailwind.config.js b/tailwind.config.js index 9206ea5..aeec740 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -18,7 +18,7 @@ export default { colors: { // Gruvbox-inspired warm cream/brown — surfaces, text, structure surface: { - 50: "#fbf1c7", + 50: "#fefcf0", 100: "#f2e5bc", 200: "#d5c4a1", 300: "#bdae93", @@ -47,6 +47,7 @@ export default { }, fontFamily: { serif: [ + '"Lora"', '"Iowan Old Style"', '"Palatino Linotype"', '"URW Palladio L"',