feat: typography & CSS polish (Phase 4 — Browse Frontend Polish) #42

New issue

Closed

opened 2026-02-27 07:50:43 +00:00 by forgejo_admin · 0 comments

forgejo_admin commented

2026-02-27 07:50:43 +00:00

Owner

Plan

plan-2026-02-26-browse-frontend-polish — Phase 4

Repo

pal-e-docs — the repo where the code change happens

User Story

As a visitor to the pal-e-docs browse frontend
I need professional typography, readable tables, and styled code blocks
So that the site looks polished and interview-ready on any device

Acceptance Criteria

When I visit any note page on desktop or mobile
Then tables have borders, padding, header backgrounds, and alternating row colors
Then non-mermaid pre blocks have styled containers with background and overflow handling
Then Atkinson Hyperlegible is the primary body font
Then the nav wraps properly on mobile
Then mermaid rendering, lightbox, and auto-linked slugs still work

Additional Information

Current state: system font stack, completely unstyled tables (browser defaults), no pre block styling, no mobile-specific handling. All changes are CSS-only in base.html plus a Google Fonts <link> in <head>.

Checklist

PR opened with related notes
Tests cover the acceptance criteria
Docs updated if needed

project-pal-e-docs — parent project
issue-pal-e-docs-typography-css-polish — pal-e-docs issue note
plan-2026-02-26-browse-frontend-polish — Phase 4

### Plan `plan-2026-02-26-browse-frontend-polish` — Phase 4 ### Repo `pal-e-docs` — the repo where the code change happens ### User Story As a visitor to the pal-e-docs browse frontend I need professional typography, readable tables, and styled code blocks So that the site looks polished and interview-ready on any device ### Acceptance Criteria When I visit any note page on desktop or mobile Then tables have borders, padding, header backgrounds, and alternating row colors Then non-mermaid pre blocks have styled containers with background and overflow handling Then Atkinson Hyperlegible is the primary body font Then the nav wraps properly on mobile Then mermaid rendering, lightbox, and auto-linked slugs still work ### Additional Information Current state: system font stack, completely unstyled tables (browser defaults), no pre block styling, no mobile-specific handling. All changes are CSS-only in `base.html` plus a Google Fonts `<link>` in `<head>`. ### Checklist - [ ] PR opened with related notes - [ ] Tests cover the acceptance criteria - [ ] Docs updated if needed ### Related - `project-pal-e-docs` — parent project - `issue-pal-e-docs-typography-css-polish` — pal-e-docs issue note - `plan-2026-02-26-browse-frontend-polish` — Phase 4