From e93e330242e5e61586a8c2497fff378c4dda0205 Mon Sep 17 00:00:00 2001 From: Brian Glass Date: Thu, 20 Aug 2026 12:45:52 -0400 Subject: [PATCH 1/5] Fix mobile page-nav: raise text-size floor, center wrapped toggles Two issues reported on mobile, both traced to nav.page-nav's sizing: - Day-nav text was hard to read: font-size: clamp(0.65em, calc(3.2cqw), 1.1em) was hitting its floor (13px, given the 20px root) at common phone widths, since the container-query-based scaling term shrinks below that floor there. Raised the floor to 0.8em (16px). - The two segmented controls (tradition/calendar toggles) were wrapping onto separate lines at common phone widths -- confirmed via a byte-for-byte diff against the pre-session CSS baseline that this specific behavior already existed before today's changes, not a regression from the CSS refactor or dark theme work. Raising the text floor above shifted the wrap threshold from ~385px to ~400px (larger text needs more room), which now lines up with the existing 400px breakpoint that already wraps day-nav away from the toggle row. Added justify-content: center to .toggle-row at that breakpoint so the two controls stack as a centered pair instead of the uncontrolled flex-end wrap, which left a lone wrapped-down control sitting oddly right-aligned under the row above it. Verified across 320-500px via a same-origin iframe (window resize doesn't affect the actual rendering viewport in this environment) at each of the breakpoint's edges plus representative phone widths -- wraps and centers correctly at <=400px, single row and correctly sized above it. Co-Authored-By: Claude Sonnet 5 Claude-Session: https://claude.ai/code/session_01Hf6j2xXQXywHVh3HAVRxB3 --- orthocal/static/main.css | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/orthocal/static/main.css b/orthocal/static/main.css index 2fa85d3..0d7e9d0 100644 --- a/orthocal/static/main.css +++ b/orthocal/static/main.css @@ -422,7 +422,7 @@ nav.page-nav { width: 75%; margin: 0 auto; padding: 0.4em 0 0.15em 0; - font-size: clamp(0.65em, calc(3.2cqw), 1.1em); + font-size: clamp(0.8em, calc(3.2cqw), 1.1em); font-family: var(--font-sans); /* This whole element is destroyed and rebuilt via an htmx OOB swap on every readings/calendar navigation. When it's near the top of the @@ -536,11 +536,19 @@ a.active { vertical-align: middle; } /* Let the day-nav and toggle row wrap onto two lines at the narrowest - viewports, alongside the topbar's own last-resort wrap above. */ + viewports, alongside the topbar's own last-resort wrap above. Below this + breakpoint the two segmented controls alone no longer fit side by side + either (see .toggle-row's own flex-wrap here) -- center them as a + stacked pair instead of leaving them at flex-end, where a lone + wrapped-down control would sit oddly right-aligned under the row above + it. */ @media (max-width: 400px) { .day-nav, .toggle-row { flex-wrap: wrap; } + .toggle-row { + justify-content: center; + } } /* ========================================================================== From 2afe9ef083d006b3510f3240ea5a06ffdc9c523f Mon Sep 17 00:00:00 2001 From: Brian Glass Date: Thu, 20 Aug 2026 13:42:29 -0400 Subject: [PATCH 2/5] Fix mobile toggle-row wrapping and date scaling Following up on the mobile page-nav sizing fix (day-nav text floor), the tradition/calendar toggle groups were still wrapping onto separate lines at common phone widths. Brian confirmed this was undesired -- they'd never stacked before -- so rather than accept the wrap and just style it better, this makes them actually fit on one line down to the narrowest realistic phone width (verified to 320px): - Removed the three "New" status badges (Greek tradition toggle x2, translation picker) entirely, across all breakpoints, not just narrow ones -- Brian's call, since those features have been live for a couple weeks and the badges were the single largest contributor to the toggle row's width (~35px). - Removed the now-fully-unused .status-badge CSS rule. - Tightened .toggle-row's gap (1rem -> 0.5rem) and .segmented-control label's padding (3px 14px -> 3px 9px). Verified via a same-origin iframe harness (measuring true content width vs. available width, independent of the wrap CSS itself) that this fits down to 320px with a small but real margin, and confirmed it doesn't look cramped at desktop widths either. - Removed .toggle-row from the 400px flex-wrap media query -- .day-nav still wraps onto its own line there when it doesn't fit alongside the toggle row, but the toggle row itself now stays nowrap and correctly sized instead of wrapping internally. Also: the date heading (main#orthocal > header h1's own text, e.g. "Thursday, August 20, 2026") was a flat 1.5em with no responsive scaling at all, while the day-title span below it already scaled fluidly via clamp(1em, calc(5cqw + 15px), 1.5em). At narrow widths the title's floor (1em, relative to h1's fixed size) equaled the date's fixed size, so they read as the same size -- and since everything else on the page shrinks on mobile, the unshrinking date increasingly stood out as oversized. Gave h1 its own clamp(1.1em, calc(4cqw + 12px), 1.5em): unchanged at desktop widths (still resolves to the same 1.5em/30px, verified), scales down at narrow ones. This also fixed a secondary side effect: since the title span's own clamp is relative to h1's (its parent) font-size, shrinking h1 correctly shrinks the title's floor too, restoring title-bigger-than-date hierarchy at every width instead of the two converging to equal size on mobile. Verified across 320-1400px via the same iframe harness used in the prior mobile-nav PR. Full test suite (162 tests) passes. Co-Authored-By: Claude Sonnet 5 Claude-Session: https://claude.ai/code/session_01Hf6j2xXQXywHVh3HAVRxB3 --- calendarium/templates/calendar.html | 2 +- calendarium/templates/readings.html | 3 +-- orthocal/static/main.css | 36 ++++++++--------------------- 3 files changed, 11 insertions(+), 30 deletions(-) diff --git a/calendarium/templates/calendar.html b/calendarium/templates/calendar.html index 8b3a89a..aec5c5e 100644 --- a/calendarium/templates/calendar.html +++ b/calendarium/templates/calendar.html @@ -28,7 +28,7 @@
- +
diff --git a/calendarium/templates/readings.html b/calendarium/templates/readings.html index ed36004..500d7bc 100644 --- a/calendarium/templates/readings.html +++ b/calendarium/templates/readings.html @@ -28,7 +28,7 @@
- +
@@ -105,7 +105,6 @@

Scripture Readings ({{ translation_label }})

{% endfor %} - New

{% endif %} diff --git a/orthocal/static/main.css b/orthocal/static/main.css index 0d7e9d0..f3fa249 100644 --- a/orthocal/static/main.css +++ b/orthocal/static/main.css @@ -473,7 +473,7 @@ a.active { display: flex; justify-content: flex-end; align-items: center; - gap: 1rem; + gap: 0.5rem; flex-wrap: nowrap; } .segmented-control { @@ -488,7 +488,7 @@ a.active { align-items: center; gap: 0.35em; margin: 0; - padding: 3px 14px; + padding: 3px 9px; color: var(--color-text-tertiary); cursor: pointer; transition-property: background-color, color; @@ -522,33 +522,15 @@ a.active { font-weight: bold; } } -.status-badge { - display: inline-block; - font-size: 0.65em; - font-weight: bold; - text-transform: uppercase; - letter-spacing: 0.05em; - color: var(--color-text-on-accent); - background-color: var(--color-accent); - border-radius: 3px; - padding: 1px 5px; - margin-left: 2px; - vertical-align: middle; -} -/* Let the day-nav and toggle row wrap onto two lines at the narrowest - viewports, alongside the topbar's own last-resort wrap above. Below this - breakpoint the two segmented controls alone no longer fit side by side - either (see .toggle-row's own flex-wrap here) -- center them as a - stacked pair instead of leaving them at flex-end, where a lone - wrapped-down control would sit oddly right-aligned under the row above - it. */ +/* Let the day-nav wrap onto its own line at the narrowest viewports, + alongside the topbar's own last-resort wrap above, when it no longer + fits alongside the toggle row. The toggle row itself (.toggle-row, + above) stays nowrap and is sized to always fit on one line down to the + narrowest realistic phone width instead of wrapping. */ @media (max-width: 400px) { - .day-nav, .toggle-row { + .day-nav { flex-wrap: wrap; } - .toggle-row { - justify-content: center; - } } /* ========================================================================== @@ -601,7 +583,7 @@ main#orthocal iframe { #orthocal-content > header h1 { margin-top: 0; color: var(--color-text-secondary); - font-size: 1.5em; + font-size: clamp(1.1em, calc(4cqw + 12px), 1.5em); } #orthocal-content > header h1 span { margin-top: 0; From b8778fa6b80677e1708827d49ba323b3303cf43b Mon Sep 17 00:00:00 2001 From: Brian Glass Date: Thu, 20 Aug 2026 14:02:49 -0400 Subject: [PATCH 3/5] Fix print.css: strip screen-only decoration added since the redesign Brian reported print output had degraded since the site redesign and asked to restore it to how it looked around June 18. Compared print.css and main.css against the commit current on that date (86579fe) to find what actually changed: - body's grain-texture background-image and gradient (main.css) are screen-only additions from PR #169 ("warm up the parchment color scheme", Aug 10) -- didn't exist June 18, never had a print reset, and were bleeding straight into print output, wasting ink. Added `background: none` for print. - #orthocal-content > header::before's gradient/shadow band (behind the date and day title) is a similarly new screen-only addition, also never reset for print. Hidden entirely for print. - The print-only 200% font-size boost on the date heading (`main#orthocal > header h1`) had gone silently dead: the #orthocal-content wrapper added in the Safari scroll-jump fix (#204) moved header out from being main#orthocal's direct child, and this selector was never updated to match. Fixed to `#orthocal-content > header h1`. - Two now-fully-dead border-zeroing rules removed: main#orthocal and .readings-columns/section.readings both had real borders back in June (`border-top: 8px solid #eee` and `border-top: 3px solid #ddd` respectively) that print correctly zeroed out. Neither element has a border at all anymore -- the two-column redesign uses grid gap for spacing instead -- so both print overrides were inert cruft. Verified via a static snapshot of the live rendered page (cache- busted to route around the local dev server's stale-ETag caching, same class of issue hit earlier this session) with print.css's media forced to apply normally: confirmed the texture and gradient band are gone and the date heading's 200% boost is active again. The two- column readings grid was not a regression -- it already collapses to one column via the existing 800px screen breakpoint at realistic print page widths, verified separately. One pre-existing, unchanged-since-June quirk noted but not chased: table.month's negative-margin bleed trick (`margin: -1in -1in -1in 0in`) only makes sense inside real @page pagination, so it can't be verified by forcing print.css to apply in normal screen rendering (and actually triggering print preview means a system dialog, which we avoid automating). Not a redesign regression since the technique is identical to June's. Co-Authored-By: Claude Sonnet 5 Claude-Session: https://claude.ai/code/session_01Hf6j2xXQXywHVh3HAVRxB3 --- orthocal/static/print.css | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/orthocal/static/print.css b/orthocal/static/print.css index e7f5b11..af4a4b2 100644 --- a/orthocal/static/print.css +++ b/orthocal/static/print.css @@ -7,6 +7,11 @@ html { body { padding: 0; margin: 1in 0 0 0; + /* The parchment grain texture and page-background gradient (main.css) + are screen-only decoration added well after this stylesheet was + written -- neither was ever meant to survive to print, and printing + them just wastes ink. */ + background: none; } .topbar { display: none; @@ -16,7 +21,6 @@ nav.page-nav { } main#orthocal { width: 100%; - border-top: 0; margin: 0; padding: 0; } @@ -36,10 +40,14 @@ table.month tr:first-child th { orphans: 2; column-rule: 0; } -.readings-columns { - border-top: 0; +/* The reddish gradient/shadow band behind the date and day title (main.css's + #orthocal-content > header::before) is screen-only decoration, added well + after this stylesheet was written -- same reasoning as body's background + above. */ +#orthocal-content > header::before { + display: none; } -main#orthocal > header h1 { +#orthocal-content > header h1 { font-size: 200%; } h1, h2, h3, h4 { From 6984fdd4c94cb129e3b2dd5182a2b0c0e40326ee Mon Sep 17 00:00:00 2001 From: Brian Glass Date: Thu, 20 Aug 2026 14:45:59 -0400 Subject: [PATCH 4/5] Restore multi-column readings (screen + print), print pagination hint Brian recalled readings used to flow in multiple columns, from before the redesign, and wanted that back -- and confirmed it should apply to screen too, not just print: back on June 18 (86579fe) main.css set `.passage { columns: 3 20em; column-gap: 2em; column-rule: 1px solid #ddd; }` unconditionally, with print.css only overriding column-rule to invisible. The redesign dropped multi-column entirely in favor of today's two-side-by-side-sections grid, and this session's earlier print.css restoration (previous commit) had reintroduced it as a print-only rule -- moved it back to being main.css-authoritative (screen included) with print as a thin override, matching how it actually worked in June. Used var(--color-border-subtle) for the column-rule instead of the original literal #ddd, so it stays dark-mode-correct instead of reintroducing an untokenized value the earlier refactor had eliminated. Also addressed Brian's report that readings were landing on page 2 instead of under the title on page 1: added `break-before: avoid` on .readings-columns as a page-break hint (not a guarantee -- the engine can still break there if content genuinely doesn't fit) alongside the column restoration, which should already substantially help just by shrinking the readings' own vertical footprint. Separately: removed the translation