- 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
Articles, notes, and bookmarks were all sharing amber, which
defeats the purpose of per-type color identity.
New complete color map (7 unique colors):
- Articles: indigo (long-form writing)
- Notes: teal (short posts)
- Bookmarks: amber (saved links)
- Likes: red (heart)
- Replies: sky (conversation)
- Reposts: green (sharing)
- Photos: purple (visual)
Updated across collection pages, blog.njk mixed view,
recent-posts widget (now shows type-specific icons and colors
for all 7 types), and design system documentation.
Confab-Link: http://localhost:8080/sessions/0ec83454-d346-4329-8aaf-6b12139bf596
Each post type now has a unique, consistent color applied across
sparkline, card border, icon, label, hover state, and permalink:
- Articles/Notes/Bookmarks: amber
- Likes: red (was rose)
- Replies: sky (was rose)
- Reposts: green (was rose)
- Photos: purple
Replaces generic accent/rose colors with type-specific colors in
blog.njk mixed-type view and all individual collection pages.
Confab-Link: http://localhost:8080/sessions/0ec83454-d346-4329-8aaf-6b12139bf596
The sparkline SVG containers were using <span> elements as flex items.
While a span's outer display is blockified in flex context, its inner
display remains inline, causing SVG width:100% to resolve against the
inline content width (~22px) instead of the flex-allocated width (~670px).
Switching to <div> provides block inner display, allowing the SVG to
fill the available space correctly.
Confab-Link: http://localhost:8080/sessions/0ec83454-d346-4329-8aaf-6b12139bf596
- 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
- Replace broken client-side type filter on /blog/ with navigation
pill links to dedicated collection pages (with post counts)
- Replace Load More with proper prev/next/page-number pagination
on Interactions inbound tab (20 per page, filter resets page)
- Add auto-unfurl transform for standalone external links in notes
- Exclude Digest and Categories pages from Pagefind search index
- Add Pagefind search filters for post type, year, and category
- Add Pagefind filter metadata to page.njk layout
Confab-Link: http://localhost:8080/sessions/956f4251-b4a9-4bc9-b214-53402ad1fe63
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
Show AI transparency metadata (text level, code level, tools) as a
subtle aside on individual posts and compact badges in blog listing.
Supports both camelCase and underscore property names.
Confab-Link: http://localhost:8080/sessions/83d68915-7921-4cc4-a838-c331fd1c4d6e
Add color-coded left borders to post cards on all blog listing and
category pages, and make sidebar widgets collapsible with localStorage
persistence on both listing and single-post sidebars.
Use two-strategy approach to work around async shortcode limitation
in deeply nested Nunjucks includes:
- blog.njk: async {% unfurl %} shortcode (top-level, works fine)
- recent-posts.njk: sync {{ url | unfurlCard | safe }} filter
(reads from pre-populated disk cache)
eleventy.before hook scans content files and pre-fetches all
interaction URLs before templates render, ensuring the sync filter
always has data — even on first build.
- 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
Likes, bookmarks, reposts, replies, and photos now render with
distinct type icons, colored labels, target URLs, and proper
microformat classes (u-like-of, u-bookmark-of, etc.) instead of
all appearing as generic notes.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Make all headings responsive (text-2xl sm:text-3xl pattern)
- Make all section headings responsive (text-xl sm:text-2xl)
- Add responsive margins (mb-6 sm:mb-8 pattern)
- Fix flex layouts to stack on mobile (flex-col sm:flex-row)
- Make images responsive (w-20 sm:w-24 pattern)
- Add responsive padding (p-4 sm:p-6)
- Improve grid gaps for mobile (gap-3 sm:gap-4)
- Add CSS utilities for table overflow and touch scrolling
- Restyle 404 page with proper responsive design
Files updated: 22 template and CSS files across all pages
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
