From 50d5922dcd3818eeb246466016710b777fc5d16f Mon Sep 17 00:00:00 2001 From: Jonathan Hvid Date: Wed, 10 Jun 2026 17:18:48 +0200 Subject: [PATCH] feat(ui): mobile responsive pass, larger type, pulse vote background, header MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Mobile: a hamburger nav with a dropdown, and ≤767/720px breakpoints across pages that collapse multi-column grids to one column and cut the 112px desktop side padding down for phones; admin gets a phone pass too. - Readability: bump the type-scale tokens and the small hardcoded sizes across user-facing pages (roadmap route excepted — already enlarged). - Pulse votes now sit in a warm terracotta-tinted panel so they stand out. - Header: 50% larger Fenja AI logo, the dot vertically centred to it, and a rebalanced "Project Bifrost" lockup (smaller, matched cap heights). Co-Authored-By: Claude Opus 4.8 (1M context) --- src/admin/admin.css | 14 +++ src/components/LatestDispatchBanner.astro | 18 +-- src/components/MembershipCard.astro | 2 +- src/components/RoadmapCarousel.astro | 6 +- src/layouts/AppLayout.astro | 138 +++++++++++++++++++--- src/pages/account.astro | 4 + src/pages/contribute.astro | 6 + src/pages/contribute/edit/[id].astro | 4 + src/pages/council-manifesto.astro | 4 + src/pages/dispatches/[slug].astro | 5 +- src/pages/dispatches/index.astro | 1 + src/pages/events.astro | 1 + src/pages/events/past.astro | 1 + src/pages/index.astro | 8 ++ src/pages/members.astro | 1 + src/pages/product.astro | 9 ++ src/pages/pulse.astro | 84 ++++++------- src/pages/updates/[slug].astro | 4 + src/pages/updates/index.astro | 7 ++ src/pages/vision.astro | 6 + src/styles/tokens.css | 16 +-- 21 files changed, 260 insertions(+), 79 deletions(-) diff --git a/src/admin/admin.css b/src/admin/admin.css index ede93a7..2adf298 100644 --- a/src/admin/admin.css +++ b/src/admin/admin.css @@ -1416,3 +1416,17 @@ transition: opacity var(--duration-fast) var(--ease-standard); } .bs-copy-btn:hover { opacity: 0.88; } + +/* ── Phone (≤600px) ───────────────────────────────────────────────── + The 767px breakpoint already stacks the sidebar + two-pane and the list + grid. This pass keeps the chrome from overflowing on a real phone: + lighter padding, a search box that can shrink, stacked summary rows and + panel footer buttons. Admin is fenja-only, so this is a "fit, don't + overflow" pass rather than a native mobile redesign. */ +@media (max-width: 600px) { + .bs-topbar { padding: 0 var(--space-4); } + .bs-main { padding: var(--space-4) var(--space-4); } + .bs-search-form { min-width: 0; } + .bs-summary-row { grid-template-columns: 1fr; gap: var(--space-1); } + .bs-panel-foot { flex-direction: column; align-items: stretch; gap: var(--space-2); } +} diff --git a/src/components/LatestDispatchBanner.astro b/src/components/LatestDispatchBanner.astro index 949d94a..ffa2cb8 100644 --- a/src/components/LatestDispatchBanner.astro +++ b/src/components/LatestDispatchBanner.astro @@ -85,14 +85,14 @@ const authorRole = latest?.author_title ?? 'team'; } .rr-dispatch-eyebrow { font-family: var(--font-sans); - font-size: 10px; + font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--on-surface-variant); } .rr-dispatch-kind { font-family: var(--font-sans); - font-size: 9px; + font-size: 10px; letter-spacing: 0.8px; padding: 2px 8px; border-radius: 3px; @@ -106,7 +106,7 @@ const authorRole = latest?.author_title ?? 'team'; .rr-dispatch-all { font-family: var(--font-sans); - font-size: 11px; + font-size: 12px; letter-spacing: 1px; color: var(--on-surface-variant); text-transform: uppercase; @@ -132,13 +132,13 @@ const authorRole = latest?.author_title ?? 'team'; } .rr-dispatch-text { max-width: 720px; } .rr-dispatch-p1 { - font-size: 14px; + font-size: 15px; line-height: 1.7; color: var(--on-surface); margin: 0 0 10px; } .rr-dispatch-p2 { - font-size: 14px; + font-size: 15px; line-height: 1.7; color: var(--on-surface-variant); margin: 0; @@ -158,12 +158,12 @@ const authorRole = latest?.author_title ?? 'team'; } .rr-dispatch-author-text { text-align: right; } .rr-dispatch-author-name { - font-size: 13px; + font-size: 14px; margin: 0; color: var(--on-surface); } .rr-dispatch-author-role { - font-size: 11px; + font-size: 12px; margin: 1px 0 0; color: var(--on-surface-variant); } @@ -178,12 +178,12 @@ const authorRole = latest?.author_title ?? 'team'; justify-content: center; font-family: var(--font-serif); font-style: italic; - font-size: 14px; + font-size: 15px; flex-shrink: 0; } .rr-dispatch-cta { font-family: var(--font-sans); - font-size: 11px; + font-size: 12px; letter-spacing: 1.2px; color: var(--pigment-terracotta); text-transform: uppercase; diff --git a/src/components/MembershipCard.astro b/src/components/MembershipCard.astro index fdaee04..65d8a41 100644 --- a/src/components/MembershipCard.astro +++ b/src/components/MembershipCard.astro @@ -78,7 +78,7 @@ const tags = readFocusTags(member.focus_tags); font-family: var(--font-serif); font-style: italic; font-weight: 700; - font-size: 13px; + font-size: 14px; line-height: 1; flex-shrink: 0; } diff --git a/src/components/RoadmapCarousel.astro b/src/components/RoadmapCarousel.astro index f62abf6..bc9b360 100644 --- a/src/components/RoadmapCarousel.astro +++ b/src/components/RoadmapCarousel.astro @@ -149,7 +149,7 @@ const hasArrows = items.length > 3; } .roadmap-all { font-family: var(--font-sans); - font-size: 11px; + font-size: 12px; letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--pigment-terracotta); @@ -233,7 +233,7 @@ const hasArrows = items.length > 3; } .card-status-label { font-family: var(--font-sans); - font-size: 10px; + font-size: 11px; letter-spacing: var(--tracking-wider); font-weight: 600; } @@ -246,7 +246,7 @@ const hasArrows = items.length > 3; margin: 0; } .card-desc { - font-size: 12px; + font-size: 13px; line-height: 1.55; color: var(--on-surface-variant); margin: 0; diff --git a/src/layouts/AppLayout.astro b/src/layouts/AppLayout.astro index 66303c7..ac6a19d 100644 --- a/src/layouts/AppLayout.astro +++ b/src/layouts/AppLayout.astro @@ -31,7 +31,21 @@ const year = new Date().getFullYear(); Project Bifrost -