From db75bd05eaaf5e39e0ac933d7771aa63c33fd25e Mon Sep 17 00:00:00 2001 From: Ricardo Date: Sat, 7 Mar 2026 18:03:06 +0100 Subject: [PATCH] fix: give each post type a unique domain color 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 --- .interface-design/system.md | 29 +++++++++---- _includes/components/widgets/recent-posts.njk | 43 ++++++++++++++----- articles.njk | 8 ++-- blog.njk | 10 +++-- notes.njk | 6 +-- 5 files changed, 67 insertions(+), 29 deletions(-) diff --git a/.interface-design/system.md b/.interface-design/system.md index 9360f96..e83cf9d 100644 --- a/.interface-design/system.md +++ b/.interface-design/system.md @@ -29,19 +29,32 @@ ## Domain Colors -Every section of the site has a color identity. On domain pages, links, hover states, and card borders use the domain color instead of amber. +Every post type and section has its own unique color identity. On collection pages, sparklines, card borders, icons, labels, hover states, and permalink links all use the domain color. No two post types share the same color. -### Domain Map (complete — every page accounted for) +### Post Type Colors (each unique — no sharing) -| Domain | Tailwind color | Light text | Dark text | Pages | -|--------|---------------|------------|-----------|-------| -| **Writing** | amber (= accent) | amber-700 | amber-400 | `/blog/`, `/articles/`, `/notes/`, `/bookmarks/`, `/digest/`, `/news/`, `/categories/`, individual posts | -| **Social** | rose | rose-600 | rose-400 | `/likes/`, `/replies/`, `/reposts/`, `/interactions/` | +| Post Type | Tailwind color | Light text | Dark text | Icon | Pages | +|-----------|---------------|------------|-----------|------|-------| +| **Articles** | indigo | indigo-600 | indigo-400 | document | `/articles/` | +| **Notes** | teal | teal-600 | teal-400 | chat bubble | `/notes/` | +| **Bookmarks** | amber | amber-600 | amber-400 | bookmark | `/bookmarks/` | +| **Likes** | red | red-600 | red-400 | heart (filled) | `/likes/` | +| **Replies** | sky | sky-600 | sky-400 | reply arrow | `/replies/` | +| **Reposts** | green | green-600 | green-400 | refresh arrows | `/reposts/` | +| **Photos** | purple | purple-600 | purple-400 | camera | `/photos/` | + +Each color is applied consistently across: sparkline wrapper, card `border-l`, SVG icon, label text, title hover, and permalink link. + +### Section Colors (non-post-type pages) + +| Section | Tailwind color | Light text | Dark text | Pages | +|---------|---------------|------------|-----------|-------| +| **Blog** (mixed) | amber | amber-600 | amber-400 | `/blog/` (sparkline only — individual cards use their post-type color) | | **Code** | emerald | emerald-600 | emerald-400 | `/github/`, `/github/starred/` | | **Music** | purple | purple-600 | purple-400 | `/funkwhale/`, `/listening/` | | **Video** | red | red-600 | red-400 | `/youtube/` | | **Reading** | orange | orange-600 | orange-400 | `/blogroll/`, `/podroll/`, `/readlater/` | -| **Neutral** | — (use accent) | — | — | `/` (home), `/about/`, `/cv/`, `/slashes/`, `/search/`, `/changelog/`, `/404` | +| **Neutral** | accent (amber) | — | — | `/` (home), `/about/`, `/cv/`, `/slashes/`, `/search/`, `/changelog/`, `/404` | ### Brand Colors (hardcoded hex — not domain colors) @@ -381,6 +394,6 @@ Reusable utility classes defined in `css/tailwind.css`: Audit findings — remaining gaps between this system and the current code: -1. **Domain colors on section pages** — some pages still use generic accent instead of domain color for links, hovers, card borders +1. ~~**Domain colors on section pages**~~ — ✅ Done: all 7 post-type collections + blog.njk mixed view + recent-posts widget use per-type colors 2. **Active states** — add to buttons where appropriate 3. **Consistent card hover** — some older templates use `hover:border-surface-400` instead of domain-colored border hover diff --git a/_includes/components/widgets/recent-posts.njk b/_includes/components/widgets/recent-posts.njk index d0447b0..7d437ae 100644 --- a/_includes/components/widgets/recent-posts.njk +++ b/_includes/components/widgets/recent-posts.njk @@ -19,7 +19,7 @@
- + Liked {{ likedUrl | replace("https://", "") | truncate(40) }}

@@ -25,10 +25,10 @@ permalink: "articles/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNu {% if paginatedArticles.length > 0 %}