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

- Download Lora (400/700, normal/italic, latin+ext) via @fontsource
  and serve from /fonts/ — no Google Fonts dependency
- Lighten light-mode background surface-50: #fefcf0 → #fffef5
- Give widgets and post-cards bg-surface-100 so they read as
  cards against the lighter canvas (brennan.day panel style)
- Nudge prose-lg base size: 1.125rem → 1.175rem with lh 1.8

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
svemagie
2026-03-19 15:25:02 +01:00
parent 606a7f6b1e
commit 234cc8ecea
3 changed files with 15 additions and 9 deletions
+2 -2
View File
@@ -5,14 +5,14 @@
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} 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 */ /* Dark mode base — Gruvbox-inspired warm palette */
body{background-color:#fefcf0;color:#282828} body{background-color:#fffef5;color:#282828}
.dark body{background-color:#1d2021;color:#fbf1c7} .dark body{background-color:#1d2021;color:#fbf1c7}
/* Container */ /* Container */
.container{max-width:64rem;margin-left:auto;margin-right:auto;padding-left:1rem;padding-right:1rem} .container{max-width:64rem;margin-left:auto;margin-right:auto;padding-left:1rem;padding-right:1rem}
/* Header — sticky, visible immediately */ /* Header — sticky, visible immediately */
.site-header{background-color:#fefcf0;border-bottom:1px solid #d5c4a1;padding-top:1rem;padding-bottom:1rem;position:sticky;top:0;z-index:50} .site-header{background-color:#fffef5;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} .dark .site-header{background-color:#282828;border-bottom-color:#504945}
.header-container{display:flex;align-items:center;justify-content:space-between} .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} .site-title{font-size:1.25rem;font-weight:700;color:#282828;text-decoration:none}
+6 -6
View File
@@ -457,7 +457,7 @@
/* Widget cards */ /* Widget cards */
.widget { .widget {
@apply p-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm overflow-hidden; @apply p-4 bg-surface-100 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm overflow-hidden;
} }
.widget-title { .widget-title {
@@ -494,7 +494,7 @@
/* Post cards */ /* Post cards */
.post-card { .post-card {
@apply p-5 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm overflow-hidden; @apply p-5 bg-surface-100 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm overflow-hidden;
} }
.post-header { .post-header {
@@ -737,7 +737,7 @@
--pagefind-ui-scale: 1; --pagefind-ui-scale: 1;
--pagefind-ui-primary: #076678; --pagefind-ui-primary: #076678;
--pagefind-ui-text: #282828; --pagefind-ui-text: #282828;
--pagefind-ui-background: #fefcf0; --pagefind-ui-background: #fffef5;
--pagefind-ui-border: #d5c4a1; --pagefind-ui-border: #d5c4a1;
--pagefind-ui-tag: #f2e5bc; --pagefind-ui-tag: #f2e5bc;
--pagefind-ui-border-width: 1px; --pagefind-ui-border-width: 1px;
@@ -756,7 +756,7 @@
/* Search input */ /* Search input */
#search .pagefind-ui__search-input { #search .pagefind-ui__search-input {
background-color: #fefcf0; background-color: #fffef5;
color: #282828; color: #282828;
border-color: #d5c4a1; border-color: #d5c4a1;
font-weight: 400; font-weight: 400;
@@ -782,7 +782,7 @@
/* Search clear button */ /* Search clear button */
#search .pagefind-ui__search-clear { #search .pagefind-ui__search-clear {
color: #665c54; color: #665c54;
background-color: #fefcf0; background-color: #fffef5;
} }
.dark #search .pagefind-ui__search-clear { .dark #search .pagefind-ui__search-clear {
@@ -847,7 +847,7 @@
/* "Load more" button */ /* "Load more" button */
#search .pagefind-ui__button { #search .pagefind-ui__button {
color: #076678; color: #076678;
background-color: #fefcf0; background-color: #fffef5;
border-color: #d5c4a1; border-color: #d5c4a1;
cursor: pointer; cursor: pointer;
} }
+7 -1
View File
@@ -18,7 +18,7 @@ export default {
colors: { colors: {
// Gruvbox-inspired warm cream/brown — surfaces, text, structure // Gruvbox-inspired warm cream/brown — surfaces, text, structure
surface: { surface: {
50: "#fefcf0", 50: "#fffef5",
100: "#f2e5bc", 100: "#f2e5bc",
200: "#d5c4a1", 200: "#d5c4a1",
300: "#bdae93", 300: "#bdae93",
@@ -82,6 +82,12 @@ export default {
maxWidth: "none", maxWidth: "none",
}, },
}, },
lg: {
css: {
fontSize: "1.175rem",
lineHeight: "1.8",
},
},
invert: { invert: {
css: { css: {
"--tw-prose-links": theme("colors.accent.400"), "--tw-prose-links": theme("colors.accent.400"),