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

style: adopt Gruvbox-inspired palette and serif typography

Browse Source 
Inspired by brennan.day — warm cream backgrounds (#fbf1c7),
Iowan Old Style/Palatino serif font, Gruvbox blue accent (#076678),
and matching code syntax theme in both light and dark modes.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
svemagie
2026-03-19 14:33:58 +01:00
parent af73aef0a4
commit 66414d8cd6
8 changed files with 151 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
_includes/components/sections/ai-usage.njk
View File

@@ -52,7 +52,7 @@
<h3 class="text-lg font-semibold text-surface-900 dark:text-surface-100 mb-3">AI-Involved Posts Over Time</h3> <h3 class="text-lg font-semibold text-surface-900 dark:text-surface-100 mb-3">AI-Involved Posts Over Time</h3>
<p class="text-sm text-surface-600 dark:text-surface-400 mb-4">Highlighted days had posts with AI involvement (level 1+). Empty boxes represent days with no AI-involved posts.</p> <p class="text-sm text-surface-600 dark:text-surface-400 mb-4">Highlighted days had posts with AI involvement (level 1+). Empty boxes represent days with no AI-involved posts.</p>
{% set graphLimit = sectionConfig.limit or 1 %} {% set graphLimit = sectionConfig.limit or 1 %}
{% postGraph aiPostsList, { prefix: "ai-section", limit: graphLimit, boxColorDark: "#44403c", highlightColorLight: "#d97706", highlightColorDark: "#fbbf24" } %} {% postGraph aiPostsList, { prefix: "ai-section", limit: graphLimit, boxColorDark: "#504945", highlightColorLight: "#076678", highlightColorDark: "#83a598" } %}
{% endif %} {% endif %}
</div> </div>

2
_includes/components/widgets/ai-usage.njk
View File

@@ -50,7 +50,7 @@
{# Compact post-graph — current year only, AI posts highlighted #} {# Compact post-graph — current year only, AI posts highlighted #}
{% if aiPostsList and aiPostsList.length %} {% if aiPostsList and aiPostsList.length %}
<div class="text-[10px] text-surface-600 dark:text-surface-400 mb-2">AI-involved posts this year</div> <div class="text-[10px] text-surface-600 dark:text-surface-400 mb-2">AI-involved posts this year</div>
{% postGraph aiPostsList, { prefix: "ai-widget", limit: 1, noLabels: true, boxColorDark: "#44403c", highlightColorLight: "#d97706", highlightColorDark: "#fbbf24" } %} {% postGraph aiPostsList, { prefix: "ai-widget", limit: 1, noLabels: true, boxColorDark: "#504945", highlightColorLight: "#076678", highlightColorDark: "#83a598" } %}
{% endif %} {% endif %}
<a href="/ai/" class="text-sm text-amber-600 dark:text-amber-400 hover:underline flex items-center gap-1 mt-3"> <a href="/ai/" class="text-sm text-amber-600 dark:text-amber-400 hover:underline flex items-center gap-1 mt-3">

2
_includes/layouts/page.njk
View File

@@ -79,7 +79,7 @@ withSidebar: true
{# Post graph showing AI posts (highlighted) on the full year grid #} {# Post graph showing AI posts (highlighted) on the full year grid #}
<h3 class="text-lg font-semibold text-surface-900 dark:text-surface-100 mb-3">AI-Involved Posts Over Time</h3> <h3 class="text-lg font-semibold text-surface-900 dark:text-surface-100 mb-3">AI-Involved Posts Over Time</h3>
<p class="text-sm text-surface-600 dark:text-surface-400 mb-4">Highlighted days had posts with AI involvement (level 1+). Empty boxes represent days with no AI-involved posts.</p> <p class="text-sm text-surface-600 dark:text-surface-400 mb-4">Highlighted days had posts with AI involvement (level 1+). Empty boxes represent days with no AI-involved posts.</p>
{% postGraph aiPostsList, { prefix: "ai", highlightColorLight: "#d97706", highlightColorDark: "#fbbf24" } %} {% postGraph aiPostsList, { prefix: "ai", highlightColorLight: "#076678", highlightColorDark: "#83a598" } %}
</section> </section>
{% endif %} {% endif %}

52
css/critical.css
View File

@@ -2,30 +2,30 @@
/* Covers: layout shell, header, dark mode toggle, font display, basic typography */ /* Covers: layout shell, header, dark mode toggle, font display, basic typography */
*,*::before,*::after{box-sizing:border-box} *,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased} 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}
/* Dark mode base — warm stone palette */ /* Dark mode base — Gruvbox-inspired warm palette */
body{background-color:#faf8f5;color:#1c1b19} body{background-color:#fbf1c7;color:#282828}
.dark body{background-color:#0f0e0d;color:#faf8f5} .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:#faf8f5;border-bottom:1px solid #e8e5df;padding-top:1rem;padding-bottom:1rem;position:sticky;top:0;z-index:50} .site-header{background-color:#fbf1c7;border-bottom:1px solid #d5c4a1;padding-top:1rem;padding-bottom:1rem;position:sticky;top:0;z-index:50}
.dark .site-header{background-color:#1c1b19;border-bottom-color:#3f3b35} .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:#1c1b19;text-decoration:none} .site-title{font-size:1.25rem;font-weight:700;color:#282828;text-decoration:none}
.dark .site-title{color:#faf8f5} .dark .site-title{color:#fbf1c7}
/* Header actions — hidden on mobile */ /* Header actions — hidden on mobile */
.header-actions{display:none} .header-actions{display:none}
@media(min-width:768px){.header-actions{display:flex;align-items:center;gap:1rem}} @media(min-width:768px){.header-actions{display:flex;align-items:center;gap:1rem}}
/* Mobile menu toggle */ /* Mobile menu toggle */
.menu-toggle{display:block;padding:0.5rem;border-radius:0.5rem;background:none;border:none;color:#5c5750;cursor:pointer} .menu-toggle{display:block;padding:0.5rem;border-radius:0.5rem;background:none;border:none;color:#665c54;cursor:pointer}
@media(min-width:768px){.menu-toggle{display:none}} @media(min-width:768px){.menu-toggle{display:none}}
.dark .menu-toggle{color:#a09a90} .dark .menu-toggle{color:#a89984}
/* Hidden utility */ /* Hidden utility */
.hidden{display:none!important} .hidden{display:none!important}
@@ -48,42 +48,46 @@ main.container{padding-top:1.5rem;padding-bottom:1.5rem}
/* Reserve sidebar space on desktop to prevent CLS when Alpine.js hydrates collapsible widgets */ /* Reserve sidebar space on desktop to prevent CLS when Alpine.js hydrates collapsible widgets */
@media(min-width:1024px){.sidebar{min-height:600px}} @media(min-width:1024px){.sidebar{min-height:600px}}
/* Font faces — in critical CSS so fonts begin downloading immediately. /* Font faces — keep Inter available for UI elements that use font-sans.
font-display:optional prevents FOUT/CLS: font either loads in time or fallback is kept. */ font-display:optional prevents FOUT/CLS: font either loads in time or fallback is kept. */
@font-face{font-family:'Inter';font-style:normal;font-display:optional;font-weight:400;src:url(/fonts/inter-latin-400-normal.woff2) format('woff2')} @font-face{font-family:'Inter';font-style:normal;font-display:optional;font-weight:400;src:url(/fonts/inter-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-display:optional;font-weight:600;src:url(/fonts/inter-latin-600-normal.woff2) format('woff2')} @font-face{font-family:'Inter';font-style:normal;font-display:optional;font-weight:600;src:url(/fonts/inter-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-display:optional;font-weight:700;src:url(/fonts/inter-latin-700-normal.woff2) format('woff2')} @font-face{font-family:'Inter';font-style:normal;font-display:optional;font-weight:700;src:url(/fonts/inter-latin-700-normal.woff2) format('woff2')}
/* Basic typography — prevent FOUT */ /* Basic typography */
h1,h2,h3,h4{margin:0;line-height:1.25} h1,h2,h3,h4{margin:0;line-height:1.25;font-weight:900}
a{color:#b45309} a{color:#076678}
.dark a{color:#fbbf24} .dark a{color:#83a598}
/* Prevent flash of unstyled content for nav */ /* Prevent flash of unstyled content for nav */
.site-nav{display:flex;align-items:center;gap:1rem} .site-nav{display:flex;align-items:center;gap:1rem}
.site-nav>a,.site-nav .nav-dropdown-trigger{color:#5c5750;text-decoration:none;padding-top:0.5rem;padding-bottom:0.5rem} .site-nav>a,.site-nav .nav-dropdown-trigger{color:#665c54;text-decoration:none;padding-top:0.5rem;padding-bottom:0.5rem}
.dark .site-nav>a,.dark .site-nav .nav-dropdown-trigger{color:#a09a90} .dark .site-nav>a,.dark .site-nav .nav-dropdown-trigger{color:#a89984}
/* Prevent FOUC — constrain images and SVG icons before Tailwind loads */ /* Prevent FOUC — constrain images and SVG icons before Tailwind loads */
img{max-width:100%;height:auto} img{max-width:100%;height:auto}
svg:not(:root):not([width]){width:1.25rem;height:1.25rem} svg:not(:root):not([width]){width:1.25rem;height:1.25rem}
/* Focus indicators — visible in critical CSS before Tailwind loads */ /* Focus indicators — visible in critical CSS before Tailwind loads */
a:focus-visible{outline:2px solid #b45309;outline-offset:2px;border-radius:2px} a:focus-visible{outline:2px solid #076678;outline-offset:2px;border-radius:2px}
.dark a:focus-visible{outline-color:#fbbf24} .dark a:focus-visible{outline-color:#83a598}
button:focus-visible,[type="button"]:focus-visible{outline:2px solid #b45309;outline-offset:2px;border-radius:4px} button:focus-visible,[type="button"]:focus-visible{outline:2px solid #076678;outline-offset:2px;border-radius:4px}
.dark button:focus-visible,.dark [type="button"]:focus-visible{outline-color:#fbbf24} .dark button:focus-visible,.dark [type="button"]:focus-visible{outline-color:#83a598}
/* Skip link */ /* Skip link */
.skip-link{position:absolute;top:-100%;left:0;z-index:100;background:#b45309;color:#fff;padding:0.5rem 1rem;font-weight:600;text-decoration:none} .skip-link{position:absolute;top:-100%;left:0;z-index:100;background:#076678;color:#fbf1c7;padding:0.5rem 1rem;font-weight:600;text-decoration:none}
.skip-link:focus{top:0;outline:none} .skip-link:focus{top:0;outline:none}
/* Selection colors — Gruvbox orange highlight */
::selection{background:#d65d0e;color:#fbf1c7}
.dark ::selection{background:#fe8019;color:#1d2021}
/* Skeleton loader — visible until Tailwind stylesheet loads */ /* Skeleton loader — visible until Tailwind stylesheet loads */
html.loading main.container>.page-content{display:none} html.loading main.container>.page-content{display:none}
html:not(.loading) .page-skeleton{display:none} html:not(.loading) .page-skeleton{display:none}
@keyframes skel-pulse{0%,100%{opacity:1}50%{opacity:.4}} @keyframes skel-pulse{0%,100%{opacity:1}50%{opacity:.4}}
.skel-bone{background:#e8e5df;border-radius:.5rem;animation:skel-pulse 1.5s ease-in-out infinite} .skel-bone{background:#d5c4a1;border-radius:.5rem;animation:skel-pulse 1.5s ease-in-out infinite}
.dark .skel-bone{background:#3f3b35} .dark .skel-bone{background:#504945}
.skel-circle{border-radius:50%} .skel-circle{border-radius:50%}
/* Reduced motion — disable animations for users who prefer it */ /* Reduced motion — disable animations for users who prefer it */

60
css/prism-theme.css
View File

@@ -1,5 +1,5 @@
/* Syntax Highlighting — PrismJS theme for indiekit-eleventy-theme /* Syntax Highlighting — PrismJS Gruvbox-inspired theme
Light mode: clean, high-contrast colors Light mode: warm, muted colors on cream
Dark mode: scoped under .dark (Tailwind darkMode: "class") */ Dark mode: scoped under .dark (Tailwind darkMode: "class") */
/* ── Base code block styling ── */ /* ── Base code block styling ── */
@@ -30,30 +30,30 @@ pre[class*="language-"] {
white-space: normal; white-space: normal;
} }
/* ── Light Mode ── */ /* ── Light Mode — Gruvbox Light ── */
code[class*="language-"], code[class*="language-"],
pre[class*="language-"] { pre[class*="language-"] {
color: #24292e; color: #3c3836;
} }
pre[class*="language-"] { pre[class*="language-"] {
background: #f4f2ee; background: #f2e5bc;
border: 1px solid #e1e4e8; border: 1px solid #d5c4a1;
} }
:not(pre) > code[class*="language-"] { :not(pre) > code[class*="language-"] {
background: #f4f2ee; background: #f2e5bc;
} }
.token.comment, .token.comment,
.token.prolog, .token.prolog,
.token.doctype, .token.doctype,
.token.cdata { .token.cdata {
color: #586069; color: #928374;
} }
.token.punctuation { .token.punctuation {
color: #24292e; color: #3c3836;
} }
.token.namespace { .token.namespace {
@@ -67,7 +67,7 @@ pre[class*="language-"] {
.token.constant, .token.constant,
.token.symbol, .token.symbol,
.token.deleted { .token.deleted {
color: #005cc5; color: #9d0006;
} }
.token.selector, .token.selector,
@@ -76,7 +76,7 @@ pre[class*="language-"] {
.token.char, .token.char,
.token.builtin, .token.builtin,
.token.inserted { .token.inserted {
color: #032f62; color: #79740e;
} }
.token.operator, .token.operator,
@@ -84,24 +84,24 @@ pre[class*="language-"] {
.token.url, .token.url,
.language-css .token.string, .language-css .token.string,
.style .token.string { .style .token.string {
color: #d73a49; color: #af3a03;
} }
.token.atrule, .token.atrule,
.token.attr-value, .token.attr-value,
.token.keyword { .token.keyword {
color: #d73a49; color: #076678;
} }
.token.function, .token.function,
.token.class-name { .token.class-name {
color: #6f42c1; color: #8f3f71;
} }
.token.regex, .token.regex,
.token.important, .token.important,
.token.variable { .token.variable {
color: #e36209; color: #b57614;
} }
.token.important, .token.important,
@@ -119,37 +119,37 @@ pre[class*="language-"] {
/* Line highlighting */ /* Line highlighting */
.highlight-line-active { .highlight-line-active {
background-color: #fffbdd; background-color: #d5c4a1;
display: inline-block; display: inline-block;
width: calc(100% + 2.5em); width: calc(100% + 2.5em);
margin-left: -1.25em; margin-left: -1.25em;
padding-left: 1.25em; padding-left: 1.25em;
} }
/* ── Dark Mode ── */ /* ── Dark Mode — Gruvbox Dark ── */
.dark code[class*="language-"], .dark code[class*="language-"],
.dark pre[class*="language-"] { .dark pre[class*="language-"] {
color: #e1e4e8; color: #ebdbb2;
} }
.dark pre[class*="language-"] { .dark pre[class*="language-"] {
background: #161b22; background: #1d2021;
border-color: #30363d; border-color: #504945;
} }
.dark :not(pre) > code[class*="language-"] { .dark :not(pre) > code[class*="language-"] {
background: #161b22; background: #1d2021;
} }
.dark .token.comment, .dark .token.comment,
.dark .token.prolog, .dark .token.prolog,
.dark .token.doctype, .dark .token.doctype,
.dark .token.cdata { .dark .token.cdata {
color: #8b949e; color: #928374;
} }
.dark .token.punctuation { .dark .token.punctuation {
color: #e1e4e8; color: #ebdbb2;
} }
.dark .token.property, .dark .token.property,
@@ -159,7 +159,7 @@ pre[class*="language-"] {
.dark .token.constant, .dark .token.constant,
.dark .token.symbol, .dark .token.symbol,
.dark .token.deleted { .dark .token.deleted {
color: #79c0ff; color: #fb4934;
} }
.dark .token.selector, .dark .token.selector,
@@ -168,7 +168,7 @@ pre[class*="language-"] {
.dark .token.char, .dark .token.char,
.dark .token.builtin, .dark .token.builtin,
.dark .token.inserted { .dark .token.inserted {
color: #a5d6ff; color: #b8bb26;
} }
.dark .token.operator, .dark .token.operator,
@@ -176,26 +176,26 @@ pre[class*="language-"] {
.dark .token.url, .dark .token.url,
.dark .language-css .token.string, .dark .language-css .token.string,
.dark .style .token.string { .dark .style .token.string {
color: #ff7b72; color: #fe8019;
} }
.dark .token.atrule, .dark .token.atrule,
.dark .token.attr-value, .dark .token.attr-value,
.dark .token.keyword { .dark .token.keyword {
color: #ff7b72; color: #83a598;
} }
.dark .token.function, .dark .token.function,
.dark .token.class-name { .dark .token.class-name {
color: #d2a8ff; color: #d3869b;
} }
.dark .token.regex, .dark .token.regex,
.dark .token.important, .dark .token.important,
.dark .token.variable { .dark .token.variable {
color: #ffa657; color: #fabd2f;
} }
.dark .highlight-line-active { .dark .highlight-line-active {
background-color: rgba(56, 139, 253, 0.15); background-color: rgba(131, 165, 152, 0.15);
} }

104
css/tailwind.css
View File

@@ -103,10 +103,10 @@
} }
} }
/* Body background — warm stone canvas */ /* Body — Gruvbox-inspired warm cream canvas with serif typography */
@layer base { @layer base {
body { body {
@apply bg-surface-50 dark:bg-surface-950 text-surface-900 dark:text-surface-100; @apply bg-surface-50 dark:bg-surface-950 text-surface-900 dark:text-surface-100 font-serif;
} }
/* P1: Date typography — all <time> elements get monospace for technical texture */ /* P1: Date typography — all <time> elements get monospace for technical texture */
@@ -118,7 +118,7 @@
button:focus-visible, button:focus-visible,
[role="button"]:focus-visible, [role="button"]:focus-visible,
summary:focus-visible { summary:focus-visible {
@apply outline-none ring-2 ring-amber-500/70 ring-offset-2 ring-offset-surface-50 rounded-sm; @apply outline-none ring-2 ring-accent-400/70 ring-offset-2 ring-offset-surface-50 rounded-sm;
} }
.dark button:focus-visible, .dark button:focus-visible,
@@ -130,11 +130,11 @@
input:focus-visible, input:focus-visible,
select:focus-visible, select:focus-visible,
textarea:focus-visible { textarea:focus-visible {
@apply outline-none ring-2 ring-amber-500/70 border-transparent; @apply outline-none ring-2 ring-accent-400/70 border-transparent;
} }
a:focus-visible { a:focus-visible {
@apply outline-none ring-2 ring-amber-500/70 ring-offset-1 ring-offset-surface-50 rounded-sm; @apply outline-none ring-2 ring-accent-400/70 ring-offset-1 ring-offset-surface-50 rounded-sm;
} }
.dark a:focus-visible { .dark a:focus-visible {
@@ -669,72 +669,72 @@
/* Pagefind UI theme overrides — outside @layer for higher specificity over Pagefind's :root defaults */ /* Pagefind UI theme overrides — outside @layer for higher specificity over Pagefind's :root defaults */
#search .pagefind-ui { #search .pagefind-ui {
--pagefind-ui-scale: 1; --pagefind-ui-scale: 1;
--pagefind-ui-primary: #b45309; --pagefind-ui-primary: #076678;
--pagefind-ui-text: #1c1b19; --pagefind-ui-text: #282828;
--pagefind-ui-background: #faf8f5; --pagefind-ui-background: #fbf1c7;
--pagefind-ui-border: #e8e5df; --pagefind-ui-border: #d5c4a1;
--pagefind-ui-tag: #f4f2ee; --pagefind-ui-tag: #f2e5bc;
--pagefind-ui-border-width: 1px; --pagefind-ui-border-width: 1px;
--pagefind-ui-border-radius: 8px; --pagefind-ui-border-radius: 8px;
--pagefind-ui-image-border-radius: 8px; --pagefind-ui-image-border-radius: 8px;
--pagefind-ui-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --pagefind-ui-font: "Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, serif;
} }
.dark #search .pagefind-ui { .dark #search .pagefind-ui {
--pagefind-ui-primary: #fbbf24; --pagefind-ui-primary: #83a598;
--pagefind-ui-text: #faf8f5; --pagefind-ui-text: #fbf1c7;
--pagefind-ui-background: #0f0e0d; --pagefind-ui-background: #1d2021;
--pagefind-ui-border: #5c5750; --pagefind-ui-border: #504945;
--pagefind-ui-tag: #2a2722; --pagefind-ui-tag: #3c3836;
} }
/* Search input */ /* Search input */
#search .pagefind-ui__search-input { #search .pagefind-ui__search-input {
background-color: #faf8f5; background-color: #fbf1c7;
color: #1c1b19; color: #282828;
border-color: #e8e5df; border-color: #d5c4a1;
font-weight: 400; font-weight: 400;
} }
.dark #search .pagefind-ui__search-input { .dark #search .pagefind-ui__search-input {
background-color: #1c1b19; background-color: #282828;
color: #faf8f5; color: #fbf1c7;
border-color: #5c5750; border-color: #504945;
} }
#search .pagefind-ui__search-input:focus { #search .pagefind-ui__search-input:focus {
outline: 2px solid #d97706; outline: 2px solid #076678;
outline-offset: 2px; outline-offset: 2px;
border-color: #d97706; border-color: #076678;
} }
.dark #search .pagefind-ui__search-input:focus { .dark #search .pagefind-ui__search-input:focus {
outline-color: #fbbf24; outline-color: #83a598;
border-color: #fbbf24; border-color: #83a598;
} }
/* Search clear button */ /* Search clear button */
#search .pagefind-ui__search-clear { #search .pagefind-ui__search-clear {
color: #5c5750; color: #665c54;
background-color: #faf8f5; background-color: #fbf1c7;
} }
.dark #search .pagefind-ui__search-clear { .dark #search .pagefind-ui__search-clear {
color: #a09a90; color: #a89984;
background-color: #1c1b19; background-color: #282828;
} }
#search .pagefind-ui__search-clear:hover { #search .pagefind-ui__search-clear:hover {
color: #1c1b19; color: #282828;
} }
.dark #search .pagefind-ui__search-clear:hover { .dark #search .pagefind-ui__search-clear:hover {
color: #faf8f5; color: #fbf1c7;
} }
/* Result links */ /* Result links */
#search .pagefind-ui__result-link { #search .pagefind-ui__result-link {
color: #b45309; color: #076678;
} }
#search .pagefind-ui__result-link:hover { #search .pagefind-ui__result-link:hover {
@@ -742,64 +742,64 @@
} }
.dark #search .pagefind-ui__result-link { .dark #search .pagefind-ui__result-link {
color: #fbbf24; color: #83a598;
} }
/* Result excerpts */ /* Result excerpts */
#search .pagefind-ui__result-excerpt { #search .pagefind-ui__result-excerpt {
color: #5c5750; color: #665c54;
} }
.dark #search .pagefind-ui__result-excerpt { .dark #search .pagefind-ui__result-excerpt {
color: #a09a90; color: #a89984;
} }
/* Highlighted search terms in results */ /* Highlighted search terms in results */
#search .pagefind-ui__result-excerpt mark, #search .pagefind-ui__result-excerpt mark,
#search mark { #search mark {
background-color: #fef3c7; background-color: #f2e5bc;
color: #92400e; color: #9d0006;
padding: 0.1em 0.2em; padding: 0.1em 0.2em;
border-radius: 2px; border-radius: 2px;
} }
.dark #search .pagefind-ui__result-excerpt mark, .dark #search .pagefind-ui__result-excerpt mark,
.dark #search mark { .dark #search mark {
background-color: #78350f; background-color: #504945;
color: #fde68a; color: #fabd2f;
} }
/* Message (result count) */ /* Message (result count) */
#search .pagefind-ui__message { #search .pagefind-ui__message {
color: #5c5750; color: #665c54;
} }
.dark #search .pagefind-ui__message { .dark #search .pagefind-ui__message {
color: #a09a90; color: #a89984;
} }
/* "Load more" button */ /* "Load more" button */
#search .pagefind-ui__button { #search .pagefind-ui__button {
color: #b45309; color: #076678;
background-color: #faf8f5; background-color: #fbf1c7;
border-color: #e8e5df; border-color: #d5c4a1;
cursor: pointer; cursor: pointer;
} }
#search .pagefind-ui__button:hover { #search .pagefind-ui__button:hover {
background-color: #fffbeb; background-color: #f2e5bc;
border-color: #b45309; border-color: #076678;
} }
.dark #search .pagefind-ui__button { .dark #search .pagefind-ui__button {
color: #fbbf24; color: #83a598;
background-color: #0f0e0d; background-color: #1d2021;
border-color: #3f3b35; border-color: #504945;
} }
.dark #search .pagefind-ui__button:hover { .dark #search .pagefind-ui__button:hover {
background-color: #1c1b19; background-color: #282828;
border-color: #fbbf24; border-color: #83a598;
} }
/* Filter panel labels */ /* Filter panel labels */

12
eleventy.config.js
View File

@@ -161,12 +161,12 @@ export default function (eleventyConfig) {
dayBoxTitle: true, dayBoxTitle: true,
selectorLight: ":root", selectorLight: ":root",
selectorDark: ".dark", selectorDark: ".dark",
boxColorLight: "#e7e5e4", // surface-200 (warm stone) boxColorLight: "#d5c4a1", // surface-200 (gruvbox)
highlightColorLight: "#d97706", // amber-600 (accent) highlightColorLight: "#076678", // gruvbox blue (accent)
textColorLight: "#1c1917", // surface-900 textColorLight: "#282828", // surface-900
boxColorDark: "#292524", // surface-800 boxColorDark: "#3c3836", // surface-800
highlightColorDark: "#fbbf24", // amber-400 highlightColorDark: "#83a598", // gruvbox blue light
textColorDark: "#fafaf9", // surface-50 textColorDark: "#fbf1c7", // surface-50
}); });
// JSON encode filter for JSON feed // JSON encode filter for JSON feed

57
tailwind.config.js
View File

@@ -16,36 +16,43 @@ export default {
theme: { theme: {
extend: { extend: {
colors: { colors: {
// Warm stone — surfaces, text, structure // Gruvbox-inspired warm cream/brown — surfaces, text, structure
surface: { surface: {
50: "#faf8f5", 50: "#fbf1c7",
100: "#f4f2ee", 100: "#f2e5bc",
200: "#e8e5df", 200: "#d5c4a1",
300: "#d5d0c8", 300: "#bdae93",
400: "#a09a90", 400: "#a89984",
500: "#7a746a", 500: "#7c6f64",
600: "#5c5750", 600: "#665c54",
700: "#3f3b35", 700: "#504945",
800: "#2a2722", 800: "#3c3836",
900: "#1c1b19", 900: "#282828",
950: "#0f0e0d", 950: "#1d2021",
}, },
// Warm amber — default interactive, CTAs, focus rings // Gruvbox blue — links, interactive, CTAs, focus rings
accent: { accent: {
50: "#fffbeb", 50: "#e8f4f6",
100: "#fef3c7", 100: "#c8dfe4",
200: "#fde68a", 200: "#97c5cf",
300: "#fcd34d", 300: "#6aabb9",
400: "#fbbf24", 400: "#458588",
500: "#f59e0b", 500: "#076678",
600: "#d97706", 600: "#065a6b",
700: "#b45309", 700: "#054d5c",
800: "#92400e", 800: "#04404d",
900: "#78350f", 900: "#03333e",
950: "#451a03", 950: "#022730",
}, },
}, },
fontFamily: { fontFamily: {
serif: [
'"Iowan Old Style"',
'"Palatino Linotype"',
'"URW Palladio L"',
"P052",
"serif",
],
sans: [ sans: [
'"Inter"', '"Inter"',
"system-ui", "system-ui",
@@ -70,7 +77,7 @@ export default {
typography: (theme) => ({ typography: (theme) => ({
DEFAULT: { DEFAULT: {
css: { css: {
"--tw-prose-links": theme("colors.accent.600"), "--tw-prose-links": theme("colors.accent.500"),
maxWidth: "none", maxWidth: "none",
}, },
}, },