From fad0451ba36e8be693008ab88b1d7f8d74912cd9 Mon Sep 17 00:00:00 2001 From: Brian Glass Date: Fri, 6 Nov 2026 07:51:34 -0500 Subject: [PATCH 1/4] Show the month calendar as a list of days on phones On a phone, the month table kept its seven columns, sized in vw, so each day was a 40px cell with 4-7px text. Below 600px it now lays out as one row per day: the date and weekday, then the fast, titles, feasts and saints in readable type, with the whole row still a link. CSS only, so the oEmbed HTML that other sites style themselves is unchanged. Also left-align the readings text on phones, where justifying a narrow column opens wide gaps between words. Co-Authored-By: Claude Opus 5.5 --- orthocal/static/main.css | 67 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 67 insertions(+) diff --git a/orthocal/static/main.css b/orthocal/static/main.css index a44ed69..d58c3ff 100644 --- a/orthocal/static/main.css +++ b/orthocal/static/main.css @@ -802,6 +802,12 @@ section.readings h2 { -ms-hyphens: auto; hyphens: auto; } +/* On a phone's narrow column, justifying opens wide gaps between words. */ +@media (max-width: 600px) { + #content, .passage { + text-align: left; + } +} .passage h2 { margin-top: 0; font-size: 1.1em; @@ -998,6 +1004,67 @@ p.day-number { font-size: 1.5em; } +/* Phones: a seven-column grid sized in vw leaves 40px cells with 4-7px text, + so the month becomes a list of days instead, one per row. This is CSS + only: the oEmbed API hands this same table HTML to other sites, which + style it themselves. The weekday names are English, like the header row + they replace (Python's calendar module writes that). */ +@media (max-width: 600px) { + table.month { + font-size: 1.2em; + width: 100%; + margin: 1em 0; + } + table.month, + table.month tbody, + table.month tr, + table.month tr:first-child th, + table.month td { + display: block; + width: auto; + } + /* The weekday header row, and the blank cells padding the first and + last weeks. */ + table.month tr:nth-child(2), + table.month td.noday { + display: none; + } + table.month td { + border-width: 0 0 1px 0; + } + table.month td a { + padding: 0.6em 1em; + } + table.month tr td p { + margin-bottom: 0.3em !important; + } + table.month ul { + margin-bottom: 0.3em; + } + table.month li + li:before { + padding: 0 0.4em; + } + table.month ul.saints li { + font-size: 0.85em; + } + p.day-number { + font-size: 1.3em; + font-weight: bold; + } + td.sun p.day-number::after { content: " Sunday"; } + td.mon p.day-number::after { content: " Monday"; } + td.tue p.day-number::after { content: " Tuesday"; } + td.wed p.day-number::after { content: " Wednesday"; } + td.thu p.day-number::after { content: " Thursday"; } + td.fri p.day-number::after { content: " Friday"; } + td.sat p.day-number::after { content: " Saturday"; } + td p.day-number::after { + font-size: 0.7em; + font-weight: normal; + color: var(--color-text-secondary); + } +} + /* ========================================================================== Saint search page ========================================================================== */ From 85897df73559404843f46d421c4111164c0b9b22 Mon Sep 17 00:00:00 2001 From: Brian Glass Date: Fri, 6 Nov 2026 08:00:31 -0500 Subject: [PATCH 2/4] Make the day and month navigation finger-sized on phones Below 600px the previous/today/next links (and the month links) become full-width buttons at least 44px tall, the tradition and calendar selects fill the row at 44px with 16px text, and the nav uses the full width with a 16px gutter. They were 26px links 4px apart, and 24px selects with 12px text, which iOS Safari zooms the page on when tapped. Co-Authored-By: Claude Opus 5.5 --- orthocal/static/main.css | 46 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 46 insertions(+) diff --git a/orthocal/static/main.css b/orthocal/static/main.css index d58c3ff..78d55ff 100644 --- a/orthocal/static/main.css +++ b/orthocal/static/main.css @@ -569,6 +569,52 @@ a.active { flex-wrap: wrap; } } +/* Phones: the day/month links become full-width buttons at least 44px tall + (Apple's minimum tap target), and the toggles get 16px text, below which + iOS Safari zooms the page when a is tapped. */ @media (max-width: 600px) { + /* The title row above shares the nav's gutter, so the title, the + hamburger and its menu line up with the buttons' edges. The column + gap and the nav's negative margin (1.5em each, but at different font + sizes) otherwise leave the hamburger 3px past the gutter. */ + .topbar-inner { + width: auto; + padding-left: 16px; + padding-right: 16px; + column-gap: 0; + } + .topbar-inner > nav { + margin-left: 0; + } + .topbar-inner > nav > ul { + right: 16px; + } nav.page-nav { width: auto; padding: 0.5em 16px; From 477a9dac5e382e142e79600590c45984b64d4594 Mon Sep 17 00:00:00 2001 From: Brian Glass Date: Fri, 6 Nov 2026 08:14:59 -0500 Subject: [PATCH 4/4] Add day links at the foot of the readings page, and widen text on phones A day's readings run to several screens on a phone, so changing days meant scrolling back to the top. Below 600px the readings page now ends with the same previous/today/next buttons; they swap in the new day and scroll to its start. Hidden on wider screens. The content area also takes the 16px gutter on phones instead of 75% of the screen, widening the text from about 280px to 343px on a 390px phone. Co-Authored-By: Claude Opus 5.5 --- calendarium/templates/readings.html | 9 +++++++++ orthocal/static/main.css | 26 +++++++++++++++++++++++++- 2 files changed, 34 insertions(+), 1 deletion(-) diff --git a/calendarium/templates/readings.html b/calendarium/templates/readings.html index b3a1735..629cb79 100644 --- a/calendarium/templates/readings.html +++ b/calendarium/templates/readings.html @@ -148,4 +148,13 @@

{{ reading.title }}

{% endif %} + + {# The same day links again at the foot of the page, for phones (see main.css), where a day runs to several screens. show:window:top brings the new day up from its start. #} + {% url "readings" tradition=tradition cal=cal year=previous_date.year month=previous_date.month day=previous_date.day as previous_url %} + {% url "readings" tradition=tradition cal=cal year=next_date.year month=next_date.month day=next_date.day as next_url %} + {% endblock %} diff --git a/orthocal/static/main.css b/orthocal/static/main.css index 8dded81..ac0f762 100644 --- a/orthocal/static/main.css +++ b/orthocal/static/main.css @@ -569,6 +569,11 @@ a.active { flex-wrap: wrap; } } +/* The second row of day links at the foot of the readings page is for + phones only (below). */ +.bottom-day-nav { + display: none; +} /* Phones: the day/month links become full-width buttons at least 44px tall (Apple's minimum tap target), and the toggles get 16px text, below which iOS Safari zooms the page when a