diff --git a/.gitignore b/.gitignore index a68d65f..0e14640 100644 --- a/.gitignore +++ b/.gitignore @@ -68,6 +68,10 @@ quartermaster.db-journal backups/ docs/wiki/ +# Brand source assets (optimised versions live in src/quartermaster/static/brand/) +/logo.png +*:Zone.Identifier + # Flask stuff: instance/ .webassets-cache diff --git a/docs/mockups/assets/logo-full.png b/docs/mockups/assets/logo-full.png new file mode 100644 index 0000000..c11aaf9 Binary files /dev/null and b/docs/mockups/assets/logo-full.png differ diff --git a/docs/mockups/assets/logo-mark-128.png b/docs/mockups/assets/logo-mark-128.png new file mode 100644 index 0000000..cf0f8d0 Binary files /dev/null and b/docs/mockups/assets/logo-mark-128.png differ diff --git a/docs/mockups/assets/logo-mark-wide.png b/docs/mockups/assets/logo-mark-wide.png new file mode 100644 index 0000000..7e7c760 Binary files /dev/null and b/docs/mockups/assets/logo-mark-wide.png differ diff --git a/docs/mockups/assets/logo-mark.png b/docs/mockups/assets/logo-mark.png new file mode 100644 index 0000000..78d952b Binary files /dev/null and b/docs/mockups/assets/logo-mark.png differ diff --git a/docs/mockups/assets/logo-shield-wide.png b/docs/mockups/assets/logo-shield-wide.png new file mode 100644 index 0000000..14edc13 Binary files /dev/null and b/docs/mockups/assets/logo-shield-wide.png differ diff --git a/docs/mockups/assets/logo-shield.png b/docs/mockups/assets/logo-shield.png new file mode 100644 index 0000000..3710503 Binary files /dev/null and b/docs/mockups/assets/logo-shield.png differ diff --git a/docs/mockups/month-condensed-sans.html b/docs/mockups/month-condensed-sans.html new file mode 100644 index 0000000..6a744e7 --- /dev/null +++ b/docs/mockups/month-condensed-sans.html @@ -0,0 +1,814 @@ + + + + + + Quartermaster · April 2026 · Condensed Ledger + + + + + + + +
+ + + +
+ Back to Budget › +
+ + +
+
+ Quartermaster +
+
+
Applied
+
$2,500.00
+
+
+

Zero Amount

+

$0.00

+

the month balances

+
+
+
Planned
+
$2,500.00
+
+
+ + +
+ + + Income + $2,500.00 / $2,500.00 + + +
+
+

Incomes

+
$2,500.00 / $2,500.00
+
+
+
+ + + + +

+
+
+ +
+
+ + +
+ + + Committed + $1,720.00 / $1,720.00 + + +
+
+

Fixed Amount Bills

+
$1,280.00 / $1,280.00
+
+
+
+ + + + +

+
+
+ + + + +

+
+
+ +
+ +
+
+

Debt Minimums

+
$70.00 / $70.00
+
+
+
+ + + + +

+
+
+ + + + +

+
+
+ +
+ +
+ Primary Debt TargetCard A28.9% APR · avalanche focus + 370.00 + 370.00 + +
+
+ + +
+ + + Savings + $300.00 / $300.00 + + +
+
+

Sinking Funds

+
$300.00 / $300.00
+
+
+
+ + + + +

+
+
+ +
+
+ + +
+ + + Flexible + $480.00 / $470.00 + + +
+
+

Food and Essentials

+
$430.00 / $400.00
+
+
+
+ modified + + + +

+
+
+ +
+ +
+
+

Subscriptions

+
$30.00 / $40.00
+
+
+
+ + + + +

+
+
+ + + + +

+
+
+ +
+ +
+
+

Other

+
$20.00 / $30.00
+
+
+
+ + + + +

+
+
+ new this month + + + +

+
+
+ +
+
+ + + +
+ + diff --git a/docs/mockups/month-editorial-ledger-dense.html b/docs/mockups/month-editorial-ledger-dense.html new file mode 100644 index 0000000..4ca8c01 --- /dev/null +++ b/docs/mockups/month-editorial-ledger-dense.html @@ -0,0 +1,877 @@ + + + + + + Quartermaster · April 2026 · Editorial Ledger (dense) + + + + + + + + +
+ + +
+ + + — the monthly reckoning + +
+ Vol. MMXXVI·No. 04 + Active · balanced +
+
+ + + +
+ Back to Budget +
+ + +
+
+
Applied
+
$2,500.00
+
+
+

Zero Amount

+

$0.00

+

the month balances

+
+
+
Planned
+
$2,500.00
+
+
+ + +
+ + + Income + $2,500.00 / $2,500.00 + + +
+
+

Incomes

+
$2,500.00 / $2,500.00
+
+
+
+ + + + +

+
+
+ +
+
+ + +
+ + + Committed + $1,720.00 / $1,720.00 + + +
+
+

Fixed Amount Bills

+
$1,280.00 / $1,280.00
+
+
+
+ + + + +

+
+
+ + + + +

+
+
+ +
+ +
+
+

Debt Minimums

+
$70.00 / $70.00
+
+
+
+ + + + +

+
+
+ + + + +

+
+
+ +
+ +
+ Primary Debt TargetCard A28.9% APR · avalanche focus + 370.00 + 370.00 + +
+
+ + +
+ + + Savings + $300.00 / $300.00 + + +
+
+

Sinking Funds

+
$300.00 / $300.00
+
+
+
+ + + + +

+
+
+ +
+
+ + +
+ + + Flexible + $480.00 / $470.00 + + +
+
+

Food and Essentials

+
$430.00 / $400.00
+
+
+
+ modified + + + +

+
+
+ +
+ +
+
+

Subscriptions

+
$30.00 / $40.00
+
+
+
+ + + + +

+
+
+ + + + +

+
+
+ +
+ +
+
+

Other

+
$20.00 / $30.00
+
+
+
+ + + + +

+
+
+ new this month + + + +

+
+
+ +
+
+ + + +
+ + diff --git a/docs/mockups/month-editorial-ledger.html b/docs/mockups/month-editorial-ledger.html new file mode 100644 index 0000000..855e4f6 --- /dev/null +++ b/docs/mockups/month-editorial-ledger.html @@ -0,0 +1,1055 @@ + + + + + + Quartermaster · April 2026 · Editorial Ledger Mockup + + + + + + + +
+ + +
+

Quartermaster

+
+ Household Budget + · + Vol. MMXXVI + · + No. 04 +
+
+ + + + +
+ Active +
+ Back to Budget + +
+
+ + +
+

Zero Amount

+

+ $0.00 +

+

— the month balances —

+ +
+
+
Applied
+
$2,500.00
+
+
+
+
Planned
+
$2,500.00
+
+
+
+ + +
+ + + Income + + $2,500.00 + / + $2,500.00 + + + +
+
+

Incomes

+
$2,500.00 / $2,500.00
+
+ +
+
+ + + + +
+
+

+
+ +
+ +
+
+
+ + +
+ + + Committed + + $1,720.00 + / + $1,720.00 + + + + +
+
+

Fixed Amount Bills

+
$1,280.00 / $1,280.00
+
+ +
+
+ + + + +
+
+

+
+ +
+
+ + + + +
+
+

+
+ +
+ +
+
+ + +
+
+

Debt Minimums

+
$70.00 / $70.00
+
+ +
+
+ + + + +
+
+

+
+ +
+
+ + + + +
+
+

+
+ +
+ +
+
+ + +
+
+
Primary Debt Target
+
$370.00 / $370.00
+
+
Card A
+
28.9% APR · avalanche focus · receives leftover at close
+
+
+ + +
+ + + Savings + + $300.00 + / + $300.00 + + + +
+
+

Sinking Funds

+
$300.00 / $300.00
+
+ +
+
+ + + + +
+
+

+
+ +
+ +
+
+
+ + +
+ + + Flexible + + $480.00 + / + $470.00 + + + + +
+
+

Food and Essentials

+
$430.00 / $400.00
+
+ +
+
+ + + modified + + + + +
+
+

+
+ +
+ +
+
+ + +
+
+

Subscriptions

+
$30.00 / $40.00
+
+ +
+
+ + + + +
+
+

+
+ +
+
+ + + + +
+
+

+
+ +
+ +
+
+ + +
+
+

Other

+
$20.00 / $30.00
+
+ +
+
+ + + + +
+
+

+
+ +
+
+ + + new this month + + + + +
+
+

+
+ +
+ +
+
+
+ + + + +
+ + diff --git a/src/quartermaster/month_service.py b/src/quartermaster/month_service.py index 9ecc0b9..097adb1 100644 --- a/src/quartermaster/month_service.py +++ b/src/quartermaster/month_service.py @@ -83,6 +83,19 @@ def shift_year_month(year_month: str, delta: int) -> str: return f"{new_year:04d}-{new_month0 + 1:02d}" +_MONTH_NAMES = [ + "", "January", "February", "March", "April", "May", "June", + "July", "August", "September", "October", "November", "December", +] + + +def pretty_year_month(year_month: str) -> str: + if not valid_year_month(year_month): + return year_month + year, month = year_month.split("-") + return f"{_MONTH_NAMES[int(month)]} {year}" + + def get_month(db: Session, year_month: str) -> Month | None: stmt = select(Month).where(Month.year_month == year_month) return db.scalar(stmt) diff --git a/src/quartermaster/routes_month.py b/src/quartermaster/routes_month.py index 729dee6..e64fc75 100644 --- a/src/quartermaster/routes_month.py +++ b/src/quartermaster/routes_month.py @@ -131,6 +131,9 @@ def view_month( "month_create.html", { "year_month": year_month, + "pretty_year_month": month_service.pretty_year_month(year_month), + "pretty_prev": month_service.pretty_year_month(prev_ym), + "pretty_next": month_service.pretty_year_month(next_ym), "prev_year_month": prev_ym, "next_year_month": next_ym, "all_months": all_months, @@ -148,6 +151,9 @@ def view_month( { "month": month, "year_month": year_month, + "pretty_year_month": month_service.pretty_year_month(year_month), + "pretty_prev": month_service.pretty_year_month(prev_ym), + "pretty_next": month_service.pretty_year_month(next_ym), "prev_year_month": prev_ym, "next_year_month": next_ym, "all_months": all_months, diff --git a/src/quartermaster/static/app.css b/src/quartermaster/static/app.css index c8cdf8d..2574f91 100644 --- a/src/quartermaster/static/app.css +++ b/src/quartermaster/static/app.css @@ -1,487 +1,798 @@ :root { - --bg: #f7f6f2; - --ink: #1f1f1f; - --muted: #6b6b6b; - --accent: #2f6b4f; - --danger: #a03030; - --rule: #d8d6cf; - --row: #fafaf7; + --paper: #f5efe0; + --paper-deep: #efe7d4; + --paper-soft: #faf5e8; + --paper-stripe: #f1ead9; + --ink: #1a1814; + --ink-soft: #3a362e; + --muted: #7e7668; + --rule: #c8bfa8; + --rule-soft: #dcd4bf; + + --accent: #732629; + --accent-dark: #4d1214; + --accent-soft: #a13a40; + --ochre: #9c6b1a; + --sage: #2d4a30; + --sage-soft: #6a8870; + --indigo: #353a5e; + + --sans: "Barlow Condensed", "Oswald", sans-serif; + --sans-wide: "Barlow", "Helvetica Neue", sans-serif; } -* { box-sizing: border-box; } +*, *::before, *::after { box-sizing: border-box; } -body { +html, body { margin: 0; - font-family: system-ui, -apple-system, "Segoe UI", sans-serif; + padding: 0; color: var(--ink); - background: var(--bg); - line-height: 1.4; + background: var(--paper); + font-family: var(--sans); + font-weight: 400; + font-feature-settings: "lnum" 1; + line-height: 1.35; + background-image: + radial-gradient(circle at 18% 10%, rgba(200, 191, 168, 0.16) 0, transparent 42%), + radial-gradient(circle at 84% 82%, rgba(200, 191, 168, 0.12) 0, transparent 50%); } -header { - padding: 1.25rem 2rem 0.25rem; - border-bottom: 1px solid var(--rule); - background: #fff; -} +main { min-height: 100vh; } -header h1 { - margin: 0; - font-size: 1.4rem; -} - -.subtitle { - margin: 0; - color: var(--muted); - font-size: 0.9rem; -} - -main { - padding: 1rem 0 3rem; -} - -.budget { - max-width: 720px; +.page { + max-width: 880px; margin: 0 auto; - padding: 0 1rem; + padding: 1.25rem 1.25rem 3rem; + position: relative; } +/* =============== NAV LINES =============== */ + +.month-nav, +.month-line { + display: grid; + grid-template-columns: 1fr auto 1fr auto auto; + align-items: baseline; + gap: 1rem; + padding: 0.4rem 0 0.55rem; + border-bottom: 1px solid var(--ink); +} +.budget-nav { + display: grid; + grid-template-columns: 1fr auto auto; + align-items: baseline; + gap: 1rem; + padding: 0.4rem 0 0.55rem; + border-bottom: 1px solid var(--ink); +} + +.nav-link, +.nav-month { + font-family: var(--sans); + font-weight: 400; + font-style: italic; + font-size: 1rem; + color: var(--muted); + text-decoration: none; + transition: color 0.12s; + letter-spacing: 0.02em; +} +.nav-link:hover, +.nav-month:hover { color: var(--ink); } +.nav-month.prev { text-align: right; } +.nav-month .chev { font-style: normal; margin: 0 0.25em; } + +.month-label, +.month-title { + font-family: var(--sans); + font-weight: 600; + font-size: 1.45rem; + letter-spacing: 0.12em; + text-transform: uppercase; + margin: 0; + white-space: nowrap; +} +.month-title .year { + font-weight: 300; + font-style: italic; + margin-left: 0.35em; + letter-spacing: 0.06em; + color: var(--muted); +} + +.state-badge { + font-family: var(--sans); + font-weight: 500; + font-size: 0.85rem; + letter-spacing: 0.22em; + text-transform: uppercase; + color: var(--muted); +} +.state-badge::before { content: "· "; opacity: 0.5; letter-spacing: 0; } +.state-badge::after { content: " ·"; opacity: 0.5; letter-spacing: 0; } +.state-badge.state-planning { color: var(--indigo); } +.state-badge.state-active { color: var(--sage); } +.state-badge.state-closed { color: var(--muted); text-transform: none; letter-spacing: 0.04em; font-style: italic; } +.state-badge.state-closed::before, +.state-badge.state-closed::after { content: ""; } + +.lifecycle-form { margin: 0; } + +.lifecycle-form button, +.btn-close { + font-family: var(--sans); + font-weight: 600; + font-size: 0.85rem; + color: var(--ink); + background: var(--paper-soft); + border: 1px solid var(--ink); + padding: 0.25rem 0.9rem 0.3rem; + cursor: pointer; + letter-spacing: 0.12em; + text-transform: uppercase; + transition: background 0.12s ease, color 0.12s ease, opacity 0.12s ease; +} +.lifecycle-form button:hover, +.btn-close:hover { background: var(--ink); color: var(--paper); } +.lifecycle-form button.secondary { background: transparent; } +.lifecycle-form button[disabled] { + cursor: not-allowed; + opacity: 0.45; + color: var(--muted); + border-color: var(--muted); +} +.lifecycle-form button[disabled]:hover { + background: var(--paper-soft); + color: var(--muted); +} + +.back-link-row { + display: flex; + justify-content: flex-end; + padding: 0.3rem 0 0; +} +.back-link { + font-family: var(--sans); + font-weight: 500; + font-size: 0.7rem; + letter-spacing: 0.22em; + text-transform: uppercase; + color: var(--muted); + text-decoration: none; +} +.back-link:hover { color: var(--ink); } + +.spacer { flex: 1; } + +.month-picker { + font-family: var(--sans); + font-weight: 400; + font-size: 0.88rem; + padding: 0.2rem 0.45rem; + border: 1px solid var(--rule); + background: var(--paper-soft); + color: var(--ink); + letter-spacing: 0.04em; +} + +/* =============== ZERO HERO =============== */ + +.zero-widget { + display: grid; + grid-template-columns: auto 1fr auto 1fr; + align-items: center; + gap: 1.8rem; + padding: 1rem 0.25rem 1rem; + border-bottom: 3px double var(--ink); +} +.zero-widget.single { + grid-template-columns: auto 1fr; +} + +.zero-brand { justify-self: start; } +.zero-brand img { + height: 132px; + width: auto; + display: block; + mix-blend-mode: multiply; +} + +.zero-side { + display: flex; + flex-direction: column; + gap: 0.05rem; +} +.zero-side.left { text-align: right; padding-right: 0.3rem; } +.zero-side.right { text-align: left; padding-left: 0.3rem; } + +.zero-sublabel { + font-family: var(--sans); + font-weight: 500; + font-size: 0.7rem; + letter-spacing: 0.3em; + text-transform: uppercase; + color: var(--muted); +} +.zero-subvalue { + font-family: var(--sans); + font-weight: 500; + font-size: 1.45rem; + color: var(--ink); + font-feature-settings: "lnum" 1, "tnum" 1; +} +.zero-subvalue .cent { font-size: 0.7em; vertical-align: 0.4em; color: var(--muted); margin-left: 0.08em; } + +.zero-center { text-align: center; padding: 0 0.4rem; } +.zero-label { + font-family: var(--sans); + font-weight: 500; + font-size: 0.72rem; + letter-spacing: 0.36em; + text-transform: uppercase; + color: var(--muted); + margin: 0 0 0.15rem; +} +.zero-value { + font-family: var(--sans); + font-weight: 500; + font-size: clamp(2.8rem, 7vw, 4.4rem); + line-height: 0.95; + letter-spacing: -0.015em; + margin: 0; + color: var(--sage); + font-feature-settings: "lnum" 1, "tnum" 1; +} +.zero-value .dollar { font-size: 0.5em; vertical-align: 0.4em; color: var(--muted); margin-right: 0.04em; font-weight: 400; } +.zero-value .cent { font-size: 0.38em; vertical-align: 1em; color: var(--muted); margin-left: 0.05em; font-weight: 400; } +.zero-value.tone-zero { color: var(--sage); } +.zero-value.tone-positive { color: var(--ochre); } +.zero-value.tone-negative { color: var(--accent); } + +.zero-caption { + font-family: var(--sans); + font-style: italic; + font-weight: 400; + font-size: 0.88rem; + color: var(--muted); + margin: 0.2rem 0 0; + letter-spacing: 0.02em; +} + +/* =============== GROUPS =============== */ + +details.group { + border-bottom: 1px solid var(--ink); + margin: 0; +} +details.group[open] { padding-bottom: 0.6rem; } + +details.group > summary { + display: grid; + grid-template-columns: auto 1fr auto; + gap: 0.75rem; + align-items: baseline; + padding: 0.6rem 0 0.4rem; + cursor: pointer; + list-style: none; + user-select: none; + border-bottom: 1px solid var(--rule); +} +details.group > summary::-webkit-details-marker { display: none; } +details.group[open] > summary { border-bottom: none; } + +details.group .chevron { + display: inline-block; + width: 0.7rem; + height: 0.7rem; + position: relative; + transform: rotate(-90deg); + transition: transform 0.15s ease; +} +details.group .chevron::before { + content: ""; + position: absolute; top: 50%; left: 0; + width: 0.7rem; height: 1px; + background: var(--ink); transform: translateY(-0.5px); +} +details.group .chevron::after { + content: ""; + position: absolute; top: 50%; left: 50%; + width: 1px; height: 0.7rem; + background: var(--ink); transform: translate(-50%, -50%); + transition: opacity 0.15s ease; +} +details.group[open] > summary .chevron { transform: rotate(0); } +details.group[open] > summary .chevron::after { opacity: 0; } + +.group-name { + font-family: var(--sans); + font-weight: 700; + font-size: 1.25rem; + letter-spacing: 0.12em; + text-transform: uppercase; +} + +.group-total { + font-family: var(--sans); + font-weight: 500; + font-size: 1rem; + font-feature-settings: "lnum" 1, "tnum" 1; +} +.group-total .divider { color: var(--rule); margin: 0 0.15em; font-weight: 300; } +.group-total .planned { color: var(--muted); font-size: 0.92em; font-weight: 400; } +.group-total .applied { color: var(--ink); } + +/* =============== SECTIONS =============== */ + .section { - margin-top: 1.5rem; + padding: 0.4rem 0 0.4rem; + display: grid; + grid-template-columns: minmax(0, 1fr); } +.section + .section { border-top: 1px dashed var(--rule); } .section-header { - display: flex; - justify-content: space-between; + display: grid; + grid-template-columns: 1fr auto; + gap: 0.5rem; align-items: baseline; - padding: 0.25rem 0.5rem; - border-bottom: 2px solid var(--ink); + padding: 0.15rem 0.25rem 0.2rem; } .section-header h2 { + font-family: var(--sans); + font-size: 0.72rem; + font-weight: 700; + letter-spacing: 0.26em; + text-transform: uppercase; + color: var(--ink-soft); margin: 0; - font-size: 1.05rem; - font-weight: 600; - letter-spacing: 0.01em; } .total { - font-variant-numeric: tabular-nums; - font-weight: 600; - color: var(--accent); -} - -.total.empty { - color: var(--muted); + font-family: var(--sans); font-weight: 500; + font-size: 0.9rem; + color: var(--ink-soft); + font-feature-settings: "lnum" 1, "tnum" 1; } +.total .divider { color: var(--rule); margin: 0 0.2em; font-weight: 300; } +.total .planned { color: var(--muted); font-weight: 400; } +.total .applied { color: var(--ink-soft); } +.total.empty { color: var(--muted); } + +/* =============== ENTRY TABLE =============== */ table.entries { width: 100%; border-collapse: collapse; - font-variant-numeric: tabular-nums; + font-family: var(--sans); +} +table.entries thead { display: none; } + +table.entries tbody tr.entry { + display: grid; + grid-template-columns: minmax(0, 1fr) 5.5rem 5.5rem 1.2rem; + gap: 0.6rem; + align-items: baseline; + padding: 0.26rem 0.25rem 0.28rem; + position: relative; + border-bottom: 1px dotted var(--rule); +} +table.entries tbody tr.entry:hover { background: var(--paper-stripe); } +table.entries tbody tr.entry td { + padding: 0; + border: none; + vertical-align: baseline; + min-width: 0; } -table.entries td { - padding: 0.35rem 0.5rem; - border-bottom: 1px solid var(--rule); - vertical-align: middle; +table.entries tbody tr.entry::after { + content: ""; + position: absolute; + left: 0; right: 0; bottom: -1px; + height: 2px; + background: var(--sage-soft); + width: min(100%, calc(var(--ratio, 1) * 100%)); + transition: width 0.25s ease; + opacity: 0.7; } - -tr.entry td.entry-name { width: auto; } -tr.entry td.entry-amount { - width: 9rem; - text-align: right; - color: var(--muted); +table.entries tbody tr.entry.state-edited::after, +table.entries tbody tr.entry[data-deviation="over"]::after { + background: var(--accent); + opacity: 0.85; } -tr.entry td.entry-actions { - width: 2.25rem; - text-align: right; +table.entries tbody tr.entry.state-new_in_month::after { + background: var(--indigo); + opacity: 0.55; } tr.empty td { + padding: 0.4rem 0.5rem !important; color: var(--muted); font-style: italic; + font-size: 0.9rem; } tr.add-row td { - padding: 0.35rem 0.5rem; + padding: 0.4rem 0.25rem 0.2rem !important; + border-bottom: none !important; + grid-column: 1 / -1; + display: block; +} + +.entry-name { + font-family: var(--sans); + font-weight: 500; + font-size: 1.02rem; + color: var(--ink); + letter-spacing: 0.01em; + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.entry-name input { + font: inherit; + color: inherit; background: transparent; - border-bottom: none; -} - -.muted { color: var(--muted); font-style: italic; } - -tr.entry-notes-row td { - padding: 0 0.5rem 0.35rem; - border-bottom: 1px solid var(--rule); -} - -.notes-input { + border: none; + border-bottom: 1px solid transparent; + padding: 0; width: 100%; - padding: 0.2rem 0.4rem; + outline: none; + transition: border-color 0.12s; +} +.entry-name input:hover { border-bottom-color: var(--rule); } +.entry-name input:focus { border-bottom-color: var(--ink); } + +.entry-amount { + font-family: var(--sans); + font-weight: 500; + font-size: 1rem; + color: var(--ink); + font-feature-settings: "lnum" 1, "tnum" 1; + text-align: right; + min-width: 0; +} +.entry-amount input { + font: inherit; + font-variant-numeric: tabular-nums; + color: inherit; + background: transparent; + border: none; + border-bottom: 1px solid transparent; + padding: 0; + width: 100%; + outline: none; + text-align: right; + transition: border-color 0.12s; +} +.entry-amount input:hover { border-bottom-color: var(--rule); } +.entry-amount input:focus { border-bottom-color: var(--ink); } + +/* On the budget page the planned-amount cell is the only numeric cell; + still render it like a ledger number. */ +tr.entry td.entry-amount:first-of-type { color: var(--ink); } + +.entry-actions button.delete { + font-family: var(--sans); + font-size: 1.2rem; + line-height: 1; + color: var(--rule); + background: none; + border: none; + cursor: pointer; + padding: 0; + opacity: 0; + transition: color 0.12s ease, opacity 0.12s ease; + align-self: center; + font-weight: 400; +} +tr.entry:hover .entry-actions button.delete { opacity: 1; } +.entry-actions button.delete:hover { color: var(--accent); } + +/* Notes row — hidden when empty, shown on hover or when value is set */ +tr.entry-notes-row { + display: block; + grid-column: 1 / -1; + font-family: var(--sans); + font-style: italic; + font-weight: 400; font-size: 0.85rem; color: var(--muted); + line-height: 1.3; + padding: 0; + margin-top: -0.25rem; +} +tr.entry-notes-row td { + padding: 0 0.25rem 0.25rem !important; + border-bottom: 1px dotted var(--rule) !important; +} +tr.entry-notes-row input.notes-input { + font: inherit; + font-style: italic; + color: inherit; background: transparent; border: none; - border-bottom: 1px dashed transparent; -} - -.notes-input:hover, -.notes-input:focus { - border-bottom-color: var(--rule); + padding: 0; + width: 100%; outline: none; } - -.notes-input:not(:placeholder-shown) { - color: var(--ink); +tr.entry-notes-row input.notes-input::placeholder { + color: var(--rule); font-style: italic; } - -.add-form .add-notes { - grid-column: 1 / -1; - font-size: 0.85rem; +tr.entry-notes-row:has(input:placeholder-shown) { display: none; } +tr.entry:hover + tr.entry-notes-row:has(input:placeholder-shown) { + display: block; + opacity: 0.5; } -button.delete { - background: transparent; - border: none; - color: var(--danger); +.tag { + font-family: var(--sans); + font-size: 0.58rem; + font-weight: 600; + letter-spacing: 0.26em; + text-transform: uppercase; + padding: 0.03rem 0.4rem 0.05rem; + margin-left: 0.45rem; + vertical-align: 0.15em; + border: 1px solid currentColor; + color: var(--ochre); + display: inline-block; +} +.tag-edited { color: var(--ochre); } +.tag-new { color: var(--indigo); } + +/* =============== PRIMARY DEBT TARGET =============== */ + +.section.target-section { + padding: 0.4rem 0 0.4rem 0.75rem; + border-left: 3px solid var(--accent); + background: linear-gradient(90deg, rgba(115, 38, 41, 0.05), transparent 40%); + position: relative; +} +.section.target-section::before { + content: "↳"; + position: absolute; + left: -1.1rem; + top: 0.45rem; + color: var(--accent); + font-family: var(--sans); font-size: 1rem; - cursor: pointer; - padding: 0 0.25rem; - line-height: 1; + font-weight: 400; +} +.section.target-section .section-header h2 { + color: var(--accent); +} +.section.target-section .total .applied, +.section.target-section .total .planned { + color: var(--ink); } -.add-form { - display: grid; - grid-template-columns: 1fr 9rem auto; - gap: 0.5rem; +.target-section .entries td.entry-name { + font-family: var(--sans); + font-weight: 600; + font-size: 1.02rem; + text-transform: uppercase; + letter-spacing: 0.04em; +} +.target-section .entries td.entry-name .muted { + font-weight: 400; + text-transform: none; + letter-spacing: 0.02em; + color: var(--muted); + font-style: italic; } .target-form { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem; + align-items: center; } - -input[type=text], -input[type=number], -select { - padding: 0.35rem 0.5rem; +.target-form label { + grid-column: 1 / -1; + font-size: 0.66rem; + color: var(--muted); + letter-spacing: 0.22em; + text-transform: uppercase; + font-weight: 500; +} +.target-form select { + font-family: var(--sans); + font-size: 0.9rem; + padding: 0.2rem 0.4rem; border: 1px solid var(--rule); - border-radius: 3px; - font: inherit; - background: #fff; + background: var(--paper-soft); + color: var(--ink); } - -button[type=submit] { - padding: 0.35rem 0.9rem; - background: var(--accent); - color: #fff; - border: none; - border-radius: 3px; +.target-form button[type="submit"] { + font-family: var(--sans); + font-weight: 600; + font-size: 0.8rem; + padding: 0.25rem 0.8rem; + border: 1px solid var(--ink); + background: var(--paper-soft); + color: var(--ink); + letter-spacing: 0.12em; + text-transform: uppercase; cursor: pointer; - font: inherit; + transition: background 0.12s ease, color 0.12s ease; } +.target-form button[type="submit"]:hover { background: var(--ink); color: var(--paper); } -.target-section .section-header { - border-bottom-style: dashed; -} +/* =============== ADD FORM =============== */ -/* Section groups --------------------------------------------------------- */ - -details.group { - margin-top: 1rem; - border-top: 2px solid var(--ink); -} - -details.group:last-of-type { - border-bottom: 2px solid var(--ink); -} - -details.group > summary { - display: flex; - align-items: baseline; +.add-form, +.month-add-form { + display: grid; + grid-template-columns: minmax(0, 1fr) 5.5rem auto; gap: 0.5rem; - padding: 0.6rem 0.5rem; + align-items: center; + padding-top: 0.5rem; +} +.add-form input[type="text"], +.add-form input[type="number"], +.month-add-form input[type="text"], +.month-add-form input[type="number"] { + font-family: var(--sans); + font-size: 0.95rem; + padding: 0.2rem 0.4rem; + border: 1px solid var(--rule); + background: var(--paper-soft); + color: var(--ink); + outline: none; + transition: border-color 0.12s; +} +.add-form input[type="number"], +.month-add-form input[type="number"] { text-align: right; font-variant-numeric: tabular-nums; } +.add-form input:focus, +.month-add-form input:focus { border-color: var(--ink); } +.add-form button[type="submit"], +.month-add-form button[type="submit"] { + font-family: var(--sans); + font-weight: 600; + font-size: 0.8rem; + padding: 0.25rem 0.9rem; + border: 1px solid var(--ink); + background: var(--paper-soft); + color: var(--ink); + letter-spacing: 0.12em; + text-transform: uppercase; cursor: pointer; - list-style: none; - user-select: none; + transition: background 0.12s ease, color 0.12s ease; +} +.add-form button[type="submit"]:hover, +.month-add-form button[type="submit"]:hover { background: var(--ink); color: var(--paper); } + +.add-form input.add-notes, +.month-add-form input.add-notes { + grid-column: 1 / -1; + font-style: italic; + font-size: 0.88rem; + padding: 0.15rem 0.4rem; } -details.group > summary::-webkit-details-marker { display: none; } +/* Disabled inputs (closed month) */ +input[disabled], +select[disabled], +button[disabled] { + cursor: not-allowed; + color: var(--muted); + background: transparent; + opacity: 0.8; +} -details.group > summary .chevron { - display: inline-block; - width: 0.8rem; - transition: transform 0.12s ease-out; +/* =============== MONTH CREATE FLOW =============== */ + +.month-missing { + padding: 2rem 1rem; + text-align: center; + border-top: 1px solid var(--rule); + border-bottom: 1px solid var(--rule); + margin: 1rem 0; +} +.month-missing h2 { + font-family: var(--sans); + font-weight: 700; + font-size: 1.25rem; + letter-spacing: 0.12em; + text-transform: uppercase; + margin: 0 0 0.75rem; color: var(--muted); } - -details.group > summary .chevron::before { - content: "\25B6"; /* black right-pointing triangle */ - font-size: 0.7rem; +.month-missing-body { + max-width: 520px; + margin: 0 auto 1.2rem; + color: var(--ink-soft); + font-style: italic; + font-size: 0.95rem; + line-height: 1.4; } - -details.group[open] > summary .chevron { - transform: rotate(90deg); -} - -details.group > summary .group-name { - flex: 1; - font-size: 1.05rem; +.month-create-form button { + font-family: var(--sans); font-weight: 700; + font-size: 0.9rem; + letter-spacing: 0.18em; text-transform: uppercase; + padding: 0.5rem 1.5rem; + border: 2px solid var(--ink); + background: var(--paper-soft); + color: var(--ink); + cursor: pointer; + transition: background 0.12s ease, color 0.12s ease; +} +.month-create-form button:hover { background: var(--ink); color: var(--paper); } + +/* =============== COLOPHON =============== */ + +.colophon { + text-align: center; + margin: 2rem 0 0; + padding-top: 1rem; + border-top: 1px solid var(--rule); + font-family: var(--sans); + font-style: italic; + font-weight: 400; + font-size: 0.78rem; + color: var(--muted); letter-spacing: 0.08em; } - -details.group > summary .group-total { - font-variant-numeric: tabular-nums; - font-weight: 700; - color: var(--accent); - font-size: 1.05rem; -} - -details.group > .section { - margin-top: 0.5rem; - margin-bottom: 1rem; - padding-left: 1rem; -} - -details.group > .section:last-child { - margin-bottom: 0.75rem; -} - -/* Zero Amount widget ----------------------------------------------------- */ - -:root { - --tone-zero: #2f6b4f; - --tone-positive: #b77b00; - --tone-negative: #a03030; -} - -.zero-widget { - margin-top: 1rem; - padding: 1rem 1.25rem; - background: #fff; - border: 1px solid var(--rule); - border-radius: 6px; - text-align: center; -} - -.zero-widget .zero-label { - font-size: 0.75rem; - text-transform: uppercase; - letter-spacing: 0.15em; - color: var(--muted); - margin-bottom: 0.25rem; -} - -.zero-widget .zero-value { - font-size: 2.4rem; - font-weight: 700; - font-variant-numeric: tabular-nums; - line-height: 1.1; -} - -.zero-widget .zero-sublabel { - font-size: 0.7rem; - text-transform: uppercase; - letter-spacing: 0.1em; - color: var(--muted); -} - -.zero-widget-pair .zero-values { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 1.5rem; -} - -.zero-widget-pair .zero-value { - font-size: 2rem; -} - -.tone-zero { color: var(--tone-zero); } -.tone-positive { color: var(--tone-positive); } -.tone-negative { color: var(--tone-negative); } - -/* Monthly view ----------------------------------------------------------- */ - -.month-nav { - display: flex; - align-items: center; - gap: 0.75rem; - padding: 0.5rem 0; - margin-top: 1rem; - flex-wrap: wrap; -} - -.month-nav .month-label { - font-size: 1.2rem; +.colophon .signoff { + font-family: var(--sans); + font-size: 0.62rem; + font-style: normal; font-weight: 600; - padding: 0 0.5rem; -} - -.month-nav .nav-link { - color: var(--accent); - text-decoration: none; - padding: 0.25rem 0.5rem; - border: 1px solid var(--rule); - border-radius: 3px; - background: #fff; - font-size: 0.9rem; -} - -.month-nav .nav-link:hover { - background: #f0ece0; -} - -.month-nav .state-badge { - padding: 0.15rem 0.6rem; - border-radius: 999px; - font-size: 0.75rem; - font-weight: 700; + letter-spacing: 0.3em; text-transform: uppercase; - letter-spacing: 0.1em; -} - -.state-badge.state-planning { - background: #e9ecf5; - color: #3a4fa1; -} - -.state-badge.state-active { - background: #d9f0e4; - color: #1f6b44; -} - -.state-badge.state-closed { - background: #e8e6dd; - color: #4a4a40; - text-transform: none; - letter-spacing: 0; -} - -.month-nav .lifecycle-form { - margin: 0; -} - -.month-nav .lifecycle-form button { - padding: 0.35rem 0.9rem; - font-size: 0.9rem; - border: 1px solid var(--rule); - border-radius: 3px; - cursor: pointer; - font: inherit; - background: var(--accent); - color: #fff; -} - -.month-nav .lifecycle-form button.secondary { - background: #fff; - color: var(--accent); -} - -.month-nav .lifecycle-form button[disabled] { - opacity: 0.5; - cursor: not-allowed; - background: #c5d4ce; - color: #fff; -} - -input[disabled], -select[disabled] { - background: #f4f3ef; - color: #6b6b6b; - cursor: not-allowed; -} - -.month-nav .spacer { - flex: 1; -} - -.month-nav .month-picker { - padding: 0.3rem 0.5rem; - font-size: 0.9rem; -} - -.total .divider { color: var(--muted); - margin: 0 0.25rem; - font-weight: 400; + margin-top: 0.2rem; } -.total .planned { - color: var(--muted); +/* =============== RESPONSIVE =============== */ + +@media (max-width: 640px) { + .zero-widget, + .zero-widget.single { + grid-template-columns: 1fr; + gap: 0.5rem; + text-align: center; + padding: 0.75rem 0.25rem; + } + .zero-brand { justify-self: center; } + .zero-brand img { height: 100px; } + .zero-side.left, + .zero-side.right { text-align: center; padding: 0; } + .zero-center { padding: 0.25rem 0; } } -table.month-entries thead th { - text-align: left; - padding: 0.25rem 0.5rem; - font-size: 0.8rem; - color: var(--muted); - font-weight: 500; - border-bottom: 1px solid var(--rule); -} - -table.month-entries th.col-planned, -table.month-entries th.col-applied { - text-align: right; - width: 8rem; -} - -table.month-entries th.col-actions { - width: 2.25rem; -} - -table.month-entries td.entry-name input[name="name"] { - width: 100%; - min-width: 8rem; -} - -table.month-entries td.entry-amount input { - width: 100%; - text-align: right; -} - -tr.entry.state-edited { - background: #fff7e0; -} - -tr.entry.state-new_in_month { - background: #e8f2ff; -} - -.tag { - display: inline-block; - margin-left: 0.4rem; - padding: 0.05rem 0.4rem; - border-radius: 3px; - font-size: 0.72rem; - font-weight: 600; - text-transform: lowercase; - letter-spacing: 0.02em; -} - -.tag-edited { - background: #f4d07a; - color: #5a3f00; -} - -.tag-new { - background: #9cc5ef; - color: #123a66; -} - -.month-add-form { - grid-template-columns: 1fr 9rem auto; -} - -.month-missing-body { - padding: 0.75rem 0.5rem; - color: var(--muted); -} - -.month-create-form { - padding: 0.25rem 0.5rem 0.75rem; +@media (max-width: 520px) { + .page { padding: 1rem 0.85rem 2rem; } + .month-nav, + .month-line, + .budget-nav { + grid-template-columns: 1fr 1fr; + gap: 0.4rem; + } + .month-title, + .month-label { + grid-column: 1 / -1; + text-align: center; + font-size: 1.1rem; + } + .state-badge, + .lifecycle-form, + .back-link, + .month-picker, + .nav-link { + grid-column: 1 / -1; + text-align: center; + justify-self: center; + } + table.entries tbody tr.entry { + grid-template-columns: minmax(0, 1fr) 4.6rem 4.6rem 1rem; + gap: 0.4rem; + } } diff --git a/src/quartermaster/static/brand/logo-full.png b/src/quartermaster/static/brand/logo-full.png new file mode 100644 index 0000000..c11aaf9 Binary files /dev/null and b/src/quartermaster/static/brand/logo-full.png differ diff --git a/src/quartermaster/static/brand/logo-mark-wide.png b/src/quartermaster/static/brand/logo-mark-wide.png new file mode 100644 index 0000000..7e7c760 Binary files /dev/null and b/src/quartermaster/static/brand/logo-mark-wide.png differ diff --git a/src/quartermaster/static/brand/logo-shield-wide.png b/src/quartermaster/static/brand/logo-shield-wide.png new file mode 100644 index 0000000..14edc13 Binary files /dev/null and b/src/quartermaster/static/brand/logo-shield-wide.png differ diff --git a/src/quartermaster/templates/base.html b/src/quartermaster/templates/base.html index 807588b..5ae4fae 100644 --- a/src/quartermaster/templates/base.html +++ b/src/quartermaster/templates/base.html @@ -4,14 +4,14 @@ Quartermaster + + + + -
-

Quartermaster

-

Household budget

-
{% block content %}{% endblock %}
diff --git a/src/quartermaster/templates/index.html b/src/quartermaster/templates/index.html index 04e85e4..d2b1da3 100644 --- a/src/quartermaster/templates/index.html +++ b/src/quartermaster/templates/index.html @@ -1,10 +1,9 @@ {% extends "base.html" %} {% block content %} -
-