fix: align templates with wireframe styling #34

Merged

mark merged 1 commits from fix/wireframe-styling-audit into main 2026-03-02 23:21:56 +00:00

Conversation 0 Commits 1 Files Changed 8 +41 -16

mark commented 2026-03-02 20:08:02 +00:00

Owner

Copy Link

Wireframe Audit Fixes

Audited all Django templates against wireframe.html and fixed the following differences:

Tag borders (white border bug)

border-current/20 on article header tags was invalid — Tailwind CSS can't apply opacity modifiers to currentColor. This caused a bare border with the default colour (white/light grey), producing the visible white borders on tags.

Fix: Added a border key to TagMetadata.get_css_classes() and a new get_tag_border_css template filter that returns the correct per-tag border colour class (e.g. border-brand-cyan/20).

Missing icons

• Added calendar SVG icon before date in article header
• Added clock SVG icon before read time in article header
• Added clock SVG icon before read time on home page featured article

Article card footer layout

Removed the extra min read span and justify-between layout from article_card.html to match the wireframe's simpler left-aligned Read Article → link.

Code block rounding

Added rounded-md to the code block template matching the wireframe.

Tailwind CSS rebuild

Rebuilt styles.css — all new utility classes are included.

Test

Added test_get_tag_border_css_fallback for the new filter. All existing tests pass.

## Wireframe Audit Fixes Audited all Django templates against `wireframe.html` and fixed the following differences: ### Tag borders (white border bug) `border-current/20` on article header tags was invalid — Tailwind CSS can't apply opacity modifiers to `currentColor`. This caused a bare `border` with the default colour (white/light grey), producing the visible white borders on tags. **Fix:** Added a `border` key to `TagMetadata.get_css_classes()` and a new `get_tag_border_css` template filter that returns the correct per-tag border colour class (e.g. `border-brand-cyan/20`). ### Missing icons - Added calendar SVG icon before date in article header - Added clock SVG icon before read time in article header - Added clock SVG icon before read time on home page featured article ### Article card footer layout Removed the extra `min read` span and `justify-between` layout from `article_card.html` to match the wireframe's simpler left-aligned `Read Article →` link. ### Code block rounding Added `rounded-md` to the code block template matching the wireframe. ### Tailwind CSS rebuild Rebuilt `styles.css` — all new utility classes are included. ### Test Added `test_get_tag_border_css_fallback` for the new filter. All existing tests pass.

mark added 1 commit 2026-03-02 20:08:03 +00:00

fix: align templates with wireframe styling ... d65a802afb

- Fix article header tag borders: replace broken border-current/20
  (Tailwind can't apply opacity to currentColor) with per-tag border
  colour classes via new get_tag_border_css filter
- Add calendar icon before article date in article header
- Add clock icon before read time in article header and home featured
- Match article card footer to wireframe (remove extra min-read span)
- Add rounded-md to code block matching wireframe

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

mark merged commit 49baf6a37d into main 2026-03-02 23:21:56 +00:00

mark deleted branch fix/wireframe-styling-audit 2026-03-02 23:21:56 +00:00

mark referenced this issue from a commit 2026-03-02 23:21:57 +00:00

Merge pull request 'fix: align templates with wireframe styling' (#34) from fix/wireframe-styling-audit into main

Sign in to join this conversation.

Reviewers

No Reviewers

Labels

No items

No Label

Milestone

No items

No Milestone

Projects

Clear projects

No project

Assignees

Clear assignees

claude codex_a codex_b codex_c mark

No Assignees

1 Participants

Notifications

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: nohype/main-site#34