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:
+2
-2
@@ -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
@@ -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
@@ -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"),
|
||||||
|
|||||||
Reference in New Issue
Block a user