giersig.eu/indiekit-blog
1
0
Fork 0
Code Issues Actions Packages Projects Releases Activity

style: serve Lora locally, lighten bg, bump article font size

Browse Source 
- 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 <noreply@anthropic.com>
This commit is contained in:
svemagie
2026-03-19 14:59:03 +01:00
parent 66414d8cd6
commit 1ed4cb4663
8 changed files with 100 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
_includes/layouts/page.njk
View File

@@ -31,7 +31,7 @@ withSidebar: true
{% endif %}
</header>
<div class="e-content prose dark:prose-invert prose-lg max-w-none">
<div class="e-content prose dark:prose-invert prose-xl max-w-none">
{{ content | safe }}
</div>

4
_includes/layouts/post.njk
View File

@@ -87,12 +87,12 @@ withBlogSidebar: true
<span>&#9888; {{ contentWarning }}</span>
<span class="text-xs text-amber-600 dark:text-amber-400">(click to show)</span>
</summary>
<div class="e-content prose prose-surface dark:prose-invert max-w-none mt-4{% if isInteraction and hasContent %} border-l-[3px] border-l-accent-500 dark:border-l-accent-400 pl-4{% endif %}">
<div class="e-content prose prose-lg prose-surface dark:prose-invert max-w-none mt-4{% if isInteraction and hasContent %} border-l-[3px] border-l-accent-500 dark:border-l-accent-400 pl-4{% endif %}">
{{ content | safe }}
</div>
</details>
{% else %}
<div class="e-content prose prose-surface dark:prose-invert max-w-none{% if isInteraction and hasContent %} border-l-[3px] border-l-accent-500 dark:border-l-accent-400 pl-4{% endif %}">
<div class="e-content prose prose-lg prose-surface dark:prose-invert max-w-none{% if isInteraction and hasContent %} border-l-[3px] border-l-accent-500 dark:border-l-accent-400 pl-4{% endif %}">
{{ content | safe }}
</div>
{% endif %}

6
css/critical.css
View File

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

74
css/tailwind.css
View File

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

11
eleventy.config.js
View File

@@ -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/");

10
package-lock.json generated
View File

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

1
package.json
View File

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

3
tailwind.config.js
View File

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