feat(ui): condensed-sans ledger CSS and Barlow Condensed typography

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>
This commit is contained in:
archeious 2026-04-17 16:58:03 -06:00
parent 4ba4a1ba18
commit 368a4d0741
2 changed files with 712 additions and 401 deletions

File diff suppressed because it is too large Load diff

View file

@ -4,14 +4,14 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="viewport" content="width=device-width,initial-scale=1">
<title>Quartermaster</title> <title>Quartermaster</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600&family=Barlow:ital,wght@0,400;0,500;1,400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="{{ url_for('static', path='app.css') }}"> <link rel="stylesheet" href="{{ url_for('static', path='app.css') }}">
<link rel="icon" type="image/png" href="{{ url_for('static', path='brand/logo-shield-wide.png') }}">
<script src="https://unpkg.com/htmx.org@2.0.3" defer></script> <script src="https://unpkg.com/htmx.org@2.0.3" defer></script>
</head> </head>
<body> <body>
<header>
<h1>Quartermaster</h1>
<p class="subtitle">Household budget</p>
</header>
<main> <main>
{% block content %}{% endblock %} {% block content %}{% endblock %}
</main> </main>