feat: typography & CSS polish (#42) #43

Merged

forgejo_admin merged 1 commit from 42-feat-typography-css-polish-phase-4-brows into main

2026-02-27 08:11:00 +00:00

forgejo_admin commented

2026-02-27 07:53:44 +00:00

Owner

Summary

Add Atkinson Hyperlegible as primary font, table styling, pre block styling, heading hierarchy, and mobile nav wrapping
Phase 4 (final phase) of the browse frontend polish plan
All changes in a single file: base.html

Changes

src/pal_e_docs/templates/base.html:
- Added Google Fonts <link> with preconnect for Atkinson Hyperlegible (400, 700 weights)
- Set Atkinson Hyperlegible as primary font-family with existing system stack as fallback
- Added .note-content table styling: border-collapse, subtle borders (#e0e0e0), cell padding, bold header row with #f6f8fa background, alternating row colors (#f9f9f9), display: block; overflow-x: auto for mobile scroll
- Added .note-content pre styling: background (#f6f8fa), padding (1rem), border-radius (6px), overflow-x: auto
- Added .note-content pre code reset: removes background/padding so inline code styling doesn't double up inside pre blocks
- Updated pre.mermaid to explicitly reset padding and border-radius to 0 (prevents inheriting new pre styling)
- Added .note-content h3 (1.1rem) and .note-content h4 (1rem) with appropriate margins
- Added flex-wrap: wrap and gap: 0.5rem 1.5rem to nav for mobile wrapping

Test Plan

All 124 tests pass locally (PALDOCS_DATABASE_PATH=:memory: python -m pytest)
Visual: Atkinson Hyperlegible loads (verify in browser dev tools)
Visual: tables have borders, header background, alternating rows, horizontal scroll on mobile
Visual: pre blocks have gray background; code inside pre has no double background
Visual: mermaid diagrams still render with transparent background (not code-block styled)
Visual: nav wraps cleanly on narrow viewports
Visual: h3/h4 headings properly sized and spaced
Lightbox still works (click mermaid SVG to expand)
No regressions in auto-link styling

Review Checklist

Passed automated review-fix loop
No secrets committed
No unnecessary file changes
Commit messages are descriptive

plan-2026-02-26-browse-frontend-polish — Phase 4: Typography & CSS polish (final phase)
Forgejo issue #42

## Summary - Add Atkinson Hyperlegible as primary font, table styling, pre block styling, heading hierarchy, and mobile nav wrapping - Phase 4 (final phase) of the browse frontend polish plan - All changes in a single file: `base.html` ## Changes - `src/pal_e_docs/templates/base.html`: - Added Google Fonts `<link>` with preconnect for Atkinson Hyperlegible (400, 700 weights) - Set Atkinson Hyperlegible as primary font-family with existing system stack as fallback - Added `.note-content table` styling: border-collapse, subtle borders (#e0e0e0), cell padding, bold header row with #f6f8fa background, alternating row colors (#f9f9f9), `display: block; overflow-x: auto` for mobile scroll - Added `.note-content pre` styling: background (#f6f8fa), padding (1rem), border-radius (6px), overflow-x: auto - Added `.note-content pre code` reset: removes background/padding so inline code styling doesn't double up inside pre blocks - Updated `pre.mermaid` to explicitly reset padding and border-radius to 0 (prevents inheriting new pre styling) - Added `.note-content h3` (1.1rem) and `.note-content h4` (1rem) with appropriate margins - Added `flex-wrap: wrap` and `gap: 0.5rem 1.5rem` to nav for mobile wrapping ## Test Plan - [x] All 124 tests pass locally (`PALDOCS_DATABASE_PATH=:memory: python -m pytest`) - [ ] Visual: Atkinson Hyperlegible loads (verify in browser dev tools) - [ ] Visual: tables have borders, header background, alternating rows, horizontal scroll on mobile - [ ] Visual: pre blocks have gray background; code inside pre has no double background - [ ] Visual: mermaid diagrams still render with transparent background (not code-block styled) - [ ] Visual: nav wraps cleanly on narrow viewports - [ ] Visual: h3/h4 headings properly sized and spaced - [ ] Lightbox still works (click mermaid SVG to expand) - [ ] No regressions in auto-link styling ## Review Checklist - [ ] Passed automated review-fix loop - [ ] No secrets committed - [ ] No unnecessary file changes - [ ] Commit messages are descriptive ## Related Notes - `plan-2026-02-26-browse-frontend-polish` — Phase 4: Typography & CSS polish (final phase) - Forgejo issue #42

forgejo_admin added 1 commit

2026-02-27 07:53:44 +00:00

feat: typography & CSS polish for browse frontend (#42 )

ci/woodpecker/pr/woodpecker Pipeline was successful

Details

7cf8b48200

Add Atkinson Hyperlegible as primary font via Google Fonts. Style tables
with borders, header backgrounds, alternating row colors, and horizontal
scroll on mobile. Add pre block styling with background and padding,
resetting code inside pre to avoid double backgrounds. Add h3/h4
heading hierarchy. Enable nav wrapping on small screens. Ensure mermaid
pre blocks explicitly override new pre styling.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

forgejo_admin commented

2026-02-27 08:09:49 +00:00

Author

Owner

QA Review — PR #43: Typography & CSS Polish

Summary: APPROVE — Clean, focused CSS-only change. All acceptance criteria met. One non-blocking suggestion below.

Issues (blocking)

None.

Suggestions (non-blocking)

1. display: block on table changes layout semantics

.note-content table {
    width: 100%;
    display: block;
    overflow-x: auto;
}

display: block on a <table> disables the table layout algorithm — columns no longer auto-distribute width. This is a known pragmatic pattern for making tables horizontally scrollable without a wrapper <div>, and it works. But width: 100% is slightly misleading here because the table as a block element will always be 100% width of its parent — internal content scrolls via overflow-x, but the table never shrinks to fit narrow content.

In practice this works fine for a docs site. But if any table has very few/narrow columns, it'll stretch to full width unnecessarily. Not a real problem today, but worth a code comment:

/* display: block enables overflow-x scrolling without a wrapper div.
   Trade-off: table loses column auto-distribution. */

Take it or leave it — the behavior is correct for this use case.

2. tr:nth-child(even) includes <thead> rows if present

If any note content uses <thead>, the header row counts toward nth-child numbering. Since th has its own background: #f6f8fa this won't cause visual issues (the th background overrides the alternating color). But the alternating pattern may shift by one row between tables with and without <thead>. For a docs site with agent-authored content, this is cosmetic only and not worth over-engineering (e.g., tbody tr:nth-child(even) would only work if notes actually use <tbody> tags, which they likely don't).

Looks Good

Font setup is textbook. Preconnect hints for both Google Fonts domains, display=swap prevents FOIT, all four weight/style variants (400, 700, italic 400, italic 700) included. System stack as fallback is clean.
Mermaid override is correct. .note-content pre (specificity 0,1,1) at line 112 vs pre.mermaid (specificity 0,1,1) at line 160 — same specificity, later rule wins. The PR explicitly adds padding: 0 and border-radius: 0 to pre.mermaid to cover the new properties introduced by .note-content pre. Comment updated to "override .note-content pre styling" makes the intent clear. No regression possible.
pre code reset is thorough. Resets background, padding, border-radius, and font-size — covers all four properties from .note-content code that would otherwise double up inside pre blocks. font-size: inherit is the right call (inherits from pre, not from the code rule's 0.9em).
Nav mobile wrapping. flex-wrap: wrap + gap: 0.5rem 1.5rem (row gap, column gap) is the right approach. The auth controls in the inline <span style="margin-left: auto"> will push to a new row on narrow screens while maintaining right-alignment on wide screens.
Heading hierarchy. h3 at 1.1rem and h4 at 1rem with appropriate top margins create clear visual hierarchy below the existing h2 at 1.25rem. The margins are reasonable — top-heavy to create separation from preceding content.
Scope discipline. Only base.html modified. No changes to mermaid JS, lightbox JS, auto-link CSS, Jinja2 template blocks, or HTML structure. Font link in <head> is the only structural HTML addition. Exactly what Phase 4 called for.
No accessibility concerns. Atkinson Hyperlegible was designed specifically for readability/accessibility. Color contrast ratios are maintained (existing palette unchanged). Font sizes are reasonable (nothing below 0.75rem except badges which are decorative).

Verdict: Ship it. This is a clean, well-scoped CSS polish pass. The single file change, thorough pre/mermaid override handling, and restraint (no scope creep) are exactly right for a final polish phase.

## QA Review — PR #43: Typography & CSS Polish **Summary: APPROVE** — Clean, focused CSS-only change. All acceptance criteria met. One non-blocking suggestion below. --- ### Issues (blocking) None. --- ### Suggestions (non-blocking) **1. `display: block` on table changes layout semantics** ```css .note-content table { width: 100%; display: block; overflow-x: auto; } ``` `display: block` on a `<table>` disables the table layout algorithm — columns no longer auto-distribute width. This is a known pragmatic pattern for making tables horizontally scrollable without a wrapper `<div>`, and it works. But `width: 100%` is slightly misleading here because the table as a block element will always be 100% width of its parent — internal content scrolls via `overflow-x`, but the table never *shrinks* to fit narrow content. In practice this works fine for a docs site. But if any table has very few/narrow columns, it'll stretch to full width unnecessarily. Not a real problem today, but worth a code comment: ```css /* display: block enables overflow-x scrolling without a wrapper div. Trade-off: table loses column auto-distribution. */ ``` Take it or leave it — the behavior is correct for this use case. **2. `tr:nth-child(even)` includes `<thead>` rows if present** If any note content uses `<thead>`, the header row counts toward `nth-child` numbering. Since `th` has its own `background: #f6f8fa` this won't cause visual issues (the `th` background overrides the alternating color). But the alternating pattern may shift by one row between tables with and without `<thead>`. For a docs site with agent-authored content, this is cosmetic only and not worth over-engineering (e.g., `tbody tr:nth-child(even)` would only work if notes actually use `<tbody>` tags, which they likely don't). --- ### Looks Good - **Font setup is textbook.** Preconnect hints for both Google Fonts domains, `display=swap` prevents FOIT, all four weight/style variants (400, 700, italic 400, italic 700) included. System stack as fallback is clean. - **Mermaid override is correct.** `.note-content pre` (specificity 0,1,1) at line 112 vs `pre.mermaid` (specificity 0,1,1) at line 160 — same specificity, later rule wins. The PR explicitly adds `padding: 0` and `border-radius: 0` to `pre.mermaid` to cover the new properties introduced by `.note-content pre`. Comment updated to "override .note-content pre styling" makes the intent clear. No regression possible. - **`pre code` reset is thorough.** Resets `background`, `padding`, `border-radius`, and `font-size` — covers all four properties from `.note-content code` that would otherwise double up inside pre blocks. `font-size: inherit` is the right call (inherits from `pre`, not from the `code` rule's `0.9em`). - **Nav mobile wrapping.** `flex-wrap: wrap` + `gap: 0.5rem 1.5rem` (row gap, column gap) is the right approach. The auth controls in the inline `<span style="margin-left: auto">` will push to a new row on narrow screens while maintaining right-alignment on wide screens. - **Heading hierarchy.** `h3` at 1.1rem and `h4` at 1rem with appropriate top margins create clear visual hierarchy below the existing `h2` at 1.25rem. The margins are reasonable — top-heavy to create separation from preceding content. - **Scope discipline.** Only `base.html` modified. No changes to mermaid JS, lightbox JS, auto-link CSS, Jinja2 template blocks, or HTML structure. Font link in `<head>` is the only structural HTML addition. Exactly what Phase 4 called for. - **No accessibility concerns.** Atkinson Hyperlegible was designed specifically for readability/accessibility. Color contrast ratios are maintained (existing palette unchanged). Font sizes are reasonable (nothing below 0.75rem except badges which are decorative). --- **Verdict:** Ship it. This is a clean, well-scoped CSS polish pass. The single file change, thorough pre/mermaid override handling, and restraint (no scope creep) are exactly right for a final polish phase.