Replace float+padding-left approach (which narrowed article text) with
position:absolute on each sidenote, placing it to the right of 100% of
.e-content so it paints in the existing left page margin. Text width is
unchanged. Requires viewport ≥ 1440px where the margin is 224px (210px
needed). JS sets each sidenote's top relative to its reference span via
getBoundingClientRect, with 8px overlap prevention.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Adds a "Recently Evergreened" section to /garden/ showing posts that
reached evergreen status within the last 90 days, with a dedicated
green celebration card style.
- New `recentEvergreens` Eleventy collection (evergreeSince within 90d)
- garden.njk: conditional celebration section above the stage groups
- tailwind.css: .garden-evergreen-celebration card (evergreen palette)
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Replace surface-100 (#f2e5bc) with a barely-there warm tint
(#f5f3e8) and soften the border (#e6e0cc) so tags read as
just slightly darker than the page background.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Set --tw-prose-body to Gruvbox yellow (#b57614 light, #ebdbb2 dark)
so article text has warm yellow tone like brennan.day
- Revert accent palette back to Gruvbox blue (#076678 / #83a598)
for links, focus rings, and interactive elements
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Cards were too yellow with surface-100; border provides
sufficient visual separation against the light background.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Replace accent palette (#076678 blue → #b57614 yellow light,
#83a598 green → #fabd2f yellow dark) across config, critical CSS,
pagefind overrides, and all hardcoded hex references
- Stack post meta rows (Planted / Tended) vertically via flex-col
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- 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>
- 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>
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>
Inspired by Maggie Appleton / Andy Matuschak — evergreen notes are
mature and reasonably complete but still alive and growing.
Sits between cultivate and question in the stage order.
Rendered in teal to distinguish from the green seedling/growing stages.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- css/tailwind.css: upgrade nav/mobile-nav/theme-toggle text from
surface-600 (fails 4.5:1) to surface-700 across .site-nav, .nav-dropdown-menu,
.menu-toggle, .mobile-nav, .mobile-nav-toggle, .theme-toggle, .mobile-theme-toggle
- post.njk: fix AI disclosure details and 'Also on:' span to surface-700
- webmentions.njk: fix summary to surface-700; fix Send button from
bg-accent-600 (3.18:1) to bg-accent-700 (4.95:1)
- h-card.njk: fix p-adr address and PGP key link to surface-700
- base.njk: fix mobile theme toggle aria-label per WCAG 2.5.3
- post-categories.njk: fix category pills text-accent-700 to text-accent-800
- post-navigation.njk: fix no-OG fallback Previous/Next labels to surface-700
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Bump all post-type label colours from -600 to -700 (light) and
-400 to -300 (dark) in blog.njk to meet WCAG AA/AAA contrast
ratios (green/teal/sky labels were failing AA at ~3-4:1)
- Replace four <p role="heading" aria-level="2"> in footer with
real <h2> elements for robust screen-reader support
- Bump footer link text from surface-600 to surface-700 (light)
and surface-400 to surface-300 (dark)
- Update hero.njk accent job-title and "Read more" link from
accent-600 to accent-700 / accent-400 to accent-300
- Update Tailwind typography prose link token from accent-600/400
to accent-700/300
- Tighten .p-category and .post-meta base styles in tailwind.css
(surface-600→700 light, surface-300→200 / surface-400→300)
- Bump hashtag link colours in tailwind.css (accent-600→700)
- Fix sparkline colour in notes.njk (teal-600→700 / teal-400→300)
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Add skip-to-main-content link and main content ID target
- Add prefers-reduced-motion media queries for all animations
- Enhance visible focus indicators (2px offset, high-contrast ring)
- Replace ~160 text-surface-500 instances with text-surface-600/dark:text-surface-400
for 4.5:1+ contrast ratio compliance
- Add aria-hidden="true" to ~30+ decorative SVG icons across sidebars/widgets
- Convert facepile containers from div to semantic ul/li with role="list"
- Add aria-label to icon-only buttons (share, sort controls)
- Add sr-only labels to form inputs (webmention, search)
- Add aria-live="polite" to dynamically loaded webmentions
- Add aria-label with relative+absolute date to time-difference component
- Add keyboard handlers (Enter/Space) to custom interactive elements
- Add aria-label to nav landmarks (table of contents)
- Fix modal focus trap and dialog accessibility
- Fix lightbox keyboard navigation and screen reader announcements
Confab-Link: http://localhost:8080/sessions/edb1b7b0-da66-4486-bd9c-d1cfa7553b88
- YouTube embeds now use lite-youtube facade (loads iframe on click,
~800 KiB savings per page with embedded videos)
- Avatar resized from 1000x1000 to 400x400 (152 KiB → 39 KiB)
- lite-yt-embed.css max-width changed to 100% for responsive layout
- Removed unused Tailwind primary color palette from CSS bundle
Confab-Link: http://localhost:8080/sessions/edb1b7b0-da66-4486-bd9c-d1cfa7553b88
Replace unstyled content flash with pulsing gray placeholder shapes
while the deferred Tailwind stylesheet loads. Uses a 'loading' class
on <html> that critical CSS uses to show skeleton / hide content,
removed by the stylesheet's onload handler.
Includes noscript fallback to bypass skeleton when JS is disabled.
Confab-Link: http://localhost:8080/sessions/edb1b7b0-da66-4486-bd9c-d1cfa7553b88
- Sparkline: change from fixed 120/180px to fluid width (flex-1 min-w-0)
filling the content area next to page titles across all 8 post type pages
- Blog filter: fix dark mode active pill contrast (dark:bg-accent-700)
- Interactions: replace wrong share icon with correct ActivityPub logo
- Interactions: add IndieWeb webmention provenance badge (globe icon)
- Interactions: improve platform detection (Bridgy Fed, more Fediverse instances)
Confab-Link: http://localhost:8080/sessions/0ec83454-d346-4329-8aaf-6b12139bf596
Add critical CSS rules to constrain images (max-width:100%) and inline
SVGs (default 1.25rem) before Tailwind loads. Add width/height HTML
attributes to avatar images in hero sections and h-card sidebar widget.
Confab-Link: http://localhost:8080/sessions/edb1b7b0-da66-4486-bd9c-d1cfa7553b88
Adds a markdown-it inline rule that transforms #tag text into
links to /categories/tag/ on-site. Syndication targets (Bluesky,
Mastodon, Bridgy) continue to receive raw #tag text, which their
native facet/hashtag detection handles automatically.
Edge cases handled: headings, hex colors, URL fragments, code
blocks, pure numbers are all excluded from conversion.
Confab-Link: http://localhost:8080/sessions/0ec83454-d346-4329-8aaf-6b12139bf596
Apply the collaboratively-written design system from .interface-design/system.md:
- Domain color map: Social pages (rose), Code pages (emerald), Reading pages
(orange), Music pages (purple) replace generic accent tokens
- Font-mono on all <time> elements via global CSS rule + wrap 7 non-<time> dates
- Shadow standardization: replace hover:shadow-lg with border-hover on news cards
- Active states: scale(0.97) press feedback on buttons and pagination links
- Gradient cleanup: remove to-white gradient on github featured project cards
- CV Skills & Interests: cycle through 8 distinct colors per family category
(amber, emerald, sky, rose, purple, orange, teal, indigo) on both CV page
and homepage
- Update system.md with refined palette documentation and domain color spec
Files: 19 changed across templates, CSS, and design documentation
Confab-Link: http://localhost:8080/sessions/bd3f7012-c703-47e9-bfe2-2ad04ce1842d
Replace the entire color system with a design-driven warm palette:
- Surface tokens: cold zinc grays → warm stone (#faf8f5 to #0f0e0d)
- Accent tokens: cold teal → warm amber (#fffbeb to #451a03)
- All bg-white → bg-surface-50 across templates (warm cream instead of pure white)
- Critical CSS: all hardcoded hex values updated to warm palette
- Prism code blocks: cold gray backgrounds → warm stone
- Pagefind search UI: blue buttons/links → amber interactive colors
- Dark mode: warm dark surfaces with amber accents throughout
Design system documented in .interface-design/system.md
Confab-Link: http://localhost:8080/sessions/bd3f7012-c703-47e9-bfe2-2ad04ce1842d
- Add teal accent color scale and activate Inter font via @font-face
- Neutralize nav/footer hovers from primary blue to surface neutrals
- Apply accent color to hero subtitle, FAB, CTA buttons, card hovers
- Fix reply post-type color from generic primary to distinctive sky blue
- Create centralized icon macro (icon.njk) with 24 reusable SVG icons
- Add per-widget-type icons and colored left-accent borders to all sidebars
- Update .p-category tags from blue to neutral surface with border
- Diversify color vocabulary: red (likes), amber (bookmarks/blogroll),
green (reposts), purple (funkwhale), sky (replies), orange (subscribe)
Confab-Link: http://localhost:8080/sessions/bd3f7012-c703-47e9-bfe2-2ad04ce1842d
Clicking Post now shows a dropdown with Note, Bookmark, Reply, Like,
Repost, and Article options. Each opens /posts/create with the
selected type and pre-filled URL/title in a popup window.
Add shared save-later.js module and per-item save buttons to
blogroll, podroll, listening, and news pages. Buttons are hidden
by default and only visible when logged in. Posts to the readlater
plugin API at /readlater/save.
The .post-list li rule used border-surface-200 which sets border-color
for ALL sides (shorthand). Combined with its higher specificity (0-1-1
vs 0-1-0), this overrode the border-l-{color} utility classes on
.post-card elements. Changing to border-b-surface-200 restricts the
color to only the bottom separator border, allowing the left border
color utilities to apply correctly.
Sidebar widgets are now wrapped in a collapsible Alpine.js container
with a title + chevron toggle. First 3 widgets open by default, rest
collapsed. State persists in localStorage across page loads. Inner
widget titles hidden by CSS to avoid duplication with wrapper titles.
The <is-land> custom element defaults to display:inline, which breaks
margin spacing between adjacent widgets. Setting it to block ensures
widgets wrapped in is-land (blogroll, social-activity, github, etc.)
get proper mb-4 spacing from the .widget class.
Widget cards now have white bg, border, and shadow in light mode for
clear visual separation. Each widget has bottom margin for spacing.
Recent-comments widget updated to use standard .widget/.widget-title
classes instead of custom sidebar-widget class.
- Add time-difference web component for relative dates
- Add @zachleat/table-saw for responsive tables
- Add webmention facepile styling with bookmarks support
- Add OG image thumbnails to post navigation
- Add @11ty/is-land for lazy widget hydration
- Wrap sidebar widgets in is-land for deferred loading
- Lazy-load webmention avatars with is-land
- Add @zachleat/filter-container for blog archive filtering
- Add posting frequency sparkline to blog header
- Inline critical CSS and defer full stylesheet loading
Uses markdown-it-anchor to generate linkable IDs on h2-h4 headings.
Headings become clickable links with a subtle # indicator on hover.
Includes scroll-margin-top so anchored headings don't hide behind
the sticky header.
When viewing a post that has mpUrl in its frontmatter, the FAB menu
shows an "Edit this post" link at the top that redirects to the
Indiekit admin edit form via /posts/edit?url=<mpUrl>.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Integrates @11ty/eleventy-plugin-syntaxhighlight (PrismJS) for
build-time syntax highlighting of fenced code blocks. Includes
a custom GitHub-inspired theme with dark mode support (.dark class).
All existing articles with triple-backtick code blocks will
automatically get highlighting on next Eleventy rebuild.
Also fixes overflow-x: hidden on .prose/.e-content that was
clipping scrollable code blocks — changed to overflow-x: clip.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Adds max-height (100vh minus header) and overflow-y auto to prevent
menu items from being cut off on small screens.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Auth detection via /session/login probe with sessionStorage cache.
Dashboard link appears in desktop and mobile nav when authenticated.
Floating action button with quick-create menu for Note, Article,
Photo, Bookmark, and Page post types.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Use high-specificity selectors outside @layer to properly override
Pagefind's :root defaults. Style input, results, marks, buttons,
tags, and clear button for both themes.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
