archeious/quartermaster
1
0
Fork 0
Code Issues 4 Pull requests 1 Projects Releases Packages Wiki Activity Actions

UI redesign: condensed-sans ledger style with logo in the zero hero #18

Merged
claude-code merged 6 commits from feat/17-condensed-sans-redesign into main 2026-04-17 17:04:55 -06:00
Conversation 0 Commits 6 Files changed 26 +3593 -455
claude-code commented 2026-04-17 16:59:00 -06:00
Collaborator
Copy link

Closes #17 (will be manually closed on merge).

Summary

Full UI overhaul. The old generic scaffold look is replaced by a condensed-sans ledger style anchored to the Quartermaster logo.

  • Typography: Barlow Condensed throughout (300-800 + italic) via Google Fonts, plus Barlow proportional as a secondary pair. No system-ui, no Inter. Tabular lining figures in every numeric column.
  • Palette: warm cream paper, warm near-black ink, burgundy accent sampled from the logo shield (#732629).
  • Layout: zero hero with the full logo on the left; applied / planned flank the big zero on the month page, budget / planning flank on the config page. <details> groups with a hairline CSS chevron. Dense entry rows with a 2-pixel progress bar riding the bottom border (sage / ochre / accent / indigo by state). Primary Debt Target as a single row with a burgundy left bar and ↳ margin glyph.
  • Nav: month-line unifies prev / title / next / state / lifecycle button into one horizontal row.
  • Content labels: pretty_year_month("2026-04") → "April 2026" for display; URLs still use the raw slug.
  • Colophon: "the art of giving every dollar a job" italic tagline at the foot of every page.
  • Favicon: the shield mark.

Design history kept in docs/mockups/ (three HTML iterations + cleaned logo assets).

Files changed

src/quartermaster/static/app.css              full rewrite
src/quartermaster/static/brand/*              new, logo-full / logo-mark-wide / logo-shield-wide
src/quartermaster/templates/base.html         font imports, favicon, cleaner body
src/quartermaster/templates/index.html        new layout
src/quartermaster/templates/month.html        new layout
src/quartermaster/templates/month_create.html new layout
src/quartermaster/templates/partials/*.html   all refreshed
src/quartermaster/month_service.py            pretty_year_month()
src/quartermaster/routes_month.py             pass pretty_year_month to templates
tests/test_zero_amount.py                     drop retired zero-widget-pair selector
.gitignore                                    exclude root logo.png + Zone.Identifier
docs/mockups/                                 design history

Test plan

  • uv run pytest passes (102/102)
  • uv run alembic upgrade head unchanged, no schema migrations in this PR
  • Live smoke on throwaway DB:
    • / renders the new budget layout with logo in the zero widget
    • Seed entries across every section (income, fixed bills, debt minimums, sinking fund, food, subscriptions, other); group totals calculate correctly
    • Setting the Primary Debt Target works; burgundy left bar + ↳ glyph render
    • /month/2026-04/create lands on the "No snapshot yet" flow in the new style
    • Create → /month/2026-04 shows Planning badge and Activate button
    • Favicon loads from /static/brand/logo-shield-wide.png

Out of scope

  • Closed-month archived paper tone (separate follow-up)
  • Any schema or routing changes
  • Wiki page updates for the new look (can follow once you're happy)

Screenshot notes

I could not run a real browser from the CLI, so the only visual verification is the HTML structure + CSS class validation from curl. Pull the branch, uv run alembic upgrade head, uv run uvicorn quartermaster.main:app --reload, and eyeball.

Closes #17 (will be manually closed on merge). ## Summary Full UI overhaul. The old generic scaffold look is replaced by a condensed-sans ledger style anchored to the Quartermaster logo. * **Typography**: Barlow Condensed throughout (300-800 + italic) via Google Fonts, plus Barlow proportional as a secondary pair. No system-ui, no Inter. Tabular lining figures in every numeric column. * **Palette**: warm cream paper, warm near-black ink, burgundy accent sampled from the logo shield (`#732629`). * **Layout**: zero hero with the full logo on the left; applied / planned flank the big zero on the month page, budget / planning flank on the config page. `<details>` groups with a hairline CSS chevron. Dense entry rows with a 2-pixel progress bar riding the bottom border (sage / ochre / accent / indigo by state). Primary Debt Target as a single row with a burgundy left bar and `↳` margin glyph. * **Nav**: month-line unifies prev / title / next / state / lifecycle button into one horizontal row. * **Content labels**: `pretty_year_month("2026-04")` → "April 2026" for display; URLs still use the raw slug. * **Colophon**: "the art of giving every dollar a job" italic tagline at the foot of every page. * **Favicon**: the shield mark. Design history kept in `docs/mockups/` (three HTML iterations + cleaned logo assets). ## Files changed ``` src/quartermaster/static/app.css full rewrite src/quartermaster/static/brand/* new, logo-full / logo-mark-wide / logo-shield-wide src/quartermaster/templates/base.html font imports, favicon, cleaner body src/quartermaster/templates/index.html new layout src/quartermaster/templates/month.html new layout src/quartermaster/templates/month_create.html new layout src/quartermaster/templates/partials/*.html all refreshed src/quartermaster/month_service.py pretty_year_month() src/quartermaster/routes_month.py pass pretty_year_month to templates tests/test_zero_amount.py drop retired zero-widget-pair selector .gitignore exclude root logo.png + Zone.Identifier docs/mockups/ design history ``` ## Test plan * [x] `uv run pytest` passes (102/102) * [x] `uv run alembic upgrade head` unchanged, no schema migrations in this PR * [x] Live smoke on throwaway DB: * [x] `/` renders the new budget layout with logo in the zero widget * [x] Seed entries across every section (income, fixed bills, debt minimums, sinking fund, food, subscriptions, other); group totals calculate correctly * [x] Setting the Primary Debt Target works; burgundy left bar + `↳` glyph render * [x] `/month/2026-04/create` lands on the "No snapshot yet" flow in the new style * [x] Create → `/month/2026-04` shows Planning badge and Activate button * [x] Favicon loads from `/static/brand/logo-shield-wide.png` ## Out of scope * Closed-month archived paper tone (separate follow-up) * Any schema or routing changes * Wiki page updates for the new look (can follow once you're happy) ## Screenshot notes I could not run a real browser from the CLI, so the only visual verification is the HTML structure + CSS class validation from curl. Pull the branch, `uv run alembic upgrade head`, `uv run uvicorn quartermaster.main:app --reload`, and eyeball.
claude-code added 6 commits 2026-04-17 16:59:00 -06:00 
logo.png at the repo root is a working 4.8MB source; optimised
variants used by the running app live in src/quartermaster/static/brand/
(full mark, mark-wide without wordmark, shield-wide for favicon).
Background checkerboard was masked out of all three so they sit on
any page colour. Gitignore the root source and WSL Zone.Identifier
sidecars.

Refs #17

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Swap the old minimal stylesheet for a comprehensive condensed-sans
ledger system:

* Barlow Condensed everywhere (300-800 + italic), via Google Fonts;
  Barlow proportional as a secondary pair. No more system-ui stack.
* Warm cream paper background with layered radial gradients for
  depth. Ink is warm near-black; accent is the logo burgundy
  #732629 sampled directly from the shield.
* Tabular lining figures for every numeric column.
* <details> groups with a hairline chevron rotating on [open].
* Dense entry rows with a 2px progress bar riding the row's bottom
  border. State colours by deviation: sage at-plan, ochre under,
  accent over, indigo new-in-month.
* Primary Debt Target card with a burgundy left bar and margin
  glyph so it reads as a hint pointing inward.
* State badges inline as tracked-caps labels with bullet separators
  (planning indigo, active sage, closed muted italic).
* Favicon wired to the shield mark.

Refs #17

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Rebuild index.html, month.html, month_create.html, and every partial
against the new stylesheet:

* Drop the old Quartermaster / Household budget header block.
* Zero hero carries the logo on the left column with flanking
  Applied / Planned on the month page, and a Budget / Planning-for
  split on the budget page. Colophon tagline at the foot of every
  page.
* month_nav switches to a single horizontal line: prev / title /
  next / state badge / lifecycle button, with the month picker
  wrapping below when present.
* Entry rows render through the new table.entries grid (name,
  planned, applied, actions) with the notes row tucked underneath
  and hidden when empty via :has(input:placeholder-shown).
* Primary Debt Target card uses the target-section styling with the
  burgundy left bar.
* Back to Budget / Back to Configuration link justified right under
  each month nav.

Refs #17

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
pretty_year_month('2026-04') -> 'April 2026' for display. The
templates fall back to the raw year_month slug when the helper
returns nothing. Used by month.html and month_create.html to give
the nav a broadsheet feel; the URL routes still use the YYYY-MM
slug everywhere.

Refs #17

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The condensed-sans redesign unifies budget and month zero widgets
into a single class; the pair variant is distinguished by column
count, not class. Assertion now checks that the month page still
renders both Applied and Planned labels alongside the zero widget
id.

Refs #17

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Three iterations captured under docs/mockups/ with shared logo
assets:

* month-editorial-ledger.html — first pass, loose spacing, Fraunces
  serif throughout, no logo.
* month-editorial-ledger-dense.html — tightened spacing, logo
  integrated as masthead and behind the zero widget.
* month-condensed-sans.html — the shipped direction. Logo in the
  zero hero, Barlow Condensed everywhere, masthead dropped.

These give a paper trail for why the app looks the way it does and
a sandbox for future typographic experiments without touching the
live CSS.

Refs #17

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
claude-code merged commit 52e3217aee into main 2026-04-17 17:04:55 -06:00
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels
No items
No labels
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference: archeious/quartermaster#18
No description provided.
Delete branch "feat/17-condensed-sans-redesign"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?