[brianglass]

GoatCounter shows about two thirds of human page views come from phones. Everything here applies below 600px only. It is CSS only apart from the bottom navigation row.

Calendar. On phones the month table kept seven vw-sized columns: 40px cells with 4–7px text. It now becomes a list, one row per day:

• the date and weekday;
• then the fast, the Sunday titles, feasts and saints, at 15–18px.

The whole row is still a link, and fast days keep their shading.

Day and month navigation.

• Previous / today / next: these were 26px-tall links 4px apart. They are now full-width bordered buttons at least 44px tall, Apple's minimum tap target. The calendar's month links get the same.
• Tradition and calendar selects: these were 24px tall with 12px text. Below 16px, iOS Safari zooms the page when a select is tapped. They now fill the row at 44px with 16px text.
• Width: the nav uses the full width with a 16px gutter instead of 75%.
• Title row: the site title, the hamburger and its open menu share that 16px gutter, so they line up with the buttons' edges.

Readings.

• Text: the scripture and lives are left-aligned instead of justified, which opened wide gaps between words. Hyphenation stays on.
• Width: the content area takes the same 16px gutter instead of 75% of the screen. On a 390px phone the text goes from about 280px to 343px wide, and a day's page is about 13% shorter.
• Bottom navigation: the page ends with the same previous / today / next buttons, since a day runs to several screens. They swap in the new day like the top ones, then scroll to its start (show:window:top). This row is hidden on wider screens. This is the only template change.

Scope. render_calendar_html also feeds the oEmbed API, whose HTML other sites style themselves, so the markup is unchanged. calendar_embed.html has its own inline styles. The weekday names come from the cells' sun…sat classes and are in English, like the header row they replace.

Testing. Checked at 390px and 320px: no horizontal scroll. At 320px the "next day" button wraps onto its own row. At 1200px the table and nav are unchanged. All 300 tests pass.

🤖 Generated with Claude Code