Fix mobile page-nav sizing and print stylesheet regressions

calendarium/templates/calendar.html

@@ -28,7 +28,7 @@
 		<div class="toggle-row" hx-params="none">
 			<div class="segmented-control">
 				<label title="OCA, ROCOR"><input type="radio" name="tradition" value="slavic" {% if tradition == "slavic" %}checked=""{% endif %} hx-get="{% url "calendar" tradition="slavic" cal=cal year=this_month.year month=this_month.month %}" hx-select="#orthocal-content" hx-target="#orthocal-content" hx-swap="outerHTML" hx-push-url="true">Slavic</label>
-				<label title="Antiochian, Greek Archdiocese"><input type="radio" name="tradition" value="greek" {% if tradition == "greek" %}checked=""{% endif %} hx-get="{% url "calendar" tradition="greek" cal=cal year=this_month.year month=this_month.month %}" hx-select="#orthocal-content" hx-target="#orthocal-content" hx-swap="outerHTML" hx-push-url="true">Greek<span class="status-badge">New</span></label>
+				<label title="Antiochian, Greek Archdiocese"><input type="radio" name="tradition" value="greek" {% if tradition == "greek" %}checked=""{% endif %} hx-get="{% url "calendar" tradition="greek" cal=cal year=this_month.year month=this_month.month %}" hx-select="#orthocal-content" hx-target="#orthocal-content" hx-swap="outerHTML" hx-push-url="true">Greek</label>
 			</div>
 			<div class="segmented-control">
 				<label><input type="radio" name="calendar" value="gregorian" {% if cal == "gregorian" %}checked=""{% endif %} hx-get="{% url "calendar" tradition=tradition cal="gregorian" year=this_month.year month=this_month.month %}" hx-select="#orthocal-content" hx-target="#orthocal-content" hx-swap="outerHTML" hx-push-url="true">Gregorian</label>

calendarium/templates/readings.html

@@ -28,7 +28,7 @@
 		<div class="toggle-row" hx-params="none">
 			<div class="segmented-control">
 				<label title="OCA, ROCOR"><input type="radio" name="tradition" value="slavic" {% if tradition == "slavic" %}checked=""{% endif %} hx-get="{% if translation %}{% url "readings" tradition="slavic" cal=cal translation=translation year=date.year month=date.month day=date.day %}{% else %}{% url "readings" tradition="slavic" cal=cal year=date.year month=date.month day=date.day %}{% endif %}" hx-select="#orthocal-content" hx-target="#orthocal-content" hx-swap="outerHTML" hx-push-url="true">Slavic</label>
-				<label title="Antiochian, Greek Archdiocese"><input type="radio" name="tradition" value="greek" {% if tradition == "greek" %}checked=""{% endif %} hx-get="{% if translation %}{% url "readings" tradition="greek" cal=cal translation=translation year=date.year month=date.month day=date.day %}{% else %}{% url "readings" tradition="greek" cal=cal year=date.year month=date.month day=date.day %}{% endif %}" hx-select="#orthocal-content" hx-target="#orthocal-content" hx-swap="outerHTML" hx-push-url="true">Greek<span class="status-badge">New</span></label>
+				<label title="Antiochian, Greek Archdiocese"><input type="radio" name="tradition" value="greek" {% if tradition == "greek" %}checked=""{% endif %} hx-get="{% if translation %}{% url "readings" tradition="greek" cal=cal translation=translation year=date.year month=date.month day=date.day %}{% else %}{% url "readings" tradition="greek" cal=cal year=date.year month=date.month day=date.day %}{% endif %}" hx-select="#orthocal-content" hx-target="#orthocal-content" hx-swap="outerHTML" hx-push-url="true">Greek</label>
 			</div>
 			<div class="segmented-control">
 				<label><input type="radio" name="calendar" value="gregorian" {% if cal == "gregorian" %}checked=""{% endif %} hx-get="{% if translation %}{% url "readings" tradition=tradition cal="gregorian" translation=translation year=date.year month=date.month day=date.day %}{% else %}{% url "readings" tradition=tradition cal="gregorian" year=date.year month=date.month day=date.day %}{% endif %}" hx-select="#orthocal-content" hx-target="#orthocal-content" hx-swap="outerHTML" hx-push-url="true">Gregorian</label>
@@ -105,7 +105,6 @@ <h1>Scripture Readings&nbsp;({{ translation_label }})</h1>
 					<option value="{% url "readings" tradition=tradition cal=cal translation=value year=date.year month=date.month day=date.day %}" {% if translation == value %}selected{% endif %}>{{ label }}</option>
 					{% endfor %}
 				</select>
-				<span class="status-badge">New</span>
 			</label>
 		</p>
 		{% endif %}

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
@@ -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,23 +522,13 @@ 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. */
+/* 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;
     }
 }
@@ -593,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;
@@ -689,6 +679,9 @@ section.readings h2 {
     color: var(--color-text-secondary);
 }
 .passage {
+    columns: 3 20em;
+    column-gap: 2em;
+    column-rule: 1px solid var(--color-border-subtle);
     padding-top: 2em;
     widows: 3;
     orphans: 3;

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;
 }
@@ -31,15 +35,49 @@ table.month tr:first-child th {
 .print-exclude {
     display: none;
 }
+/* The select's own border and native dropdown caret only make sense as an
+   interactive-control affordance -- on paper it's just inert text, so drop
+   both rather than carry them over from the screen styling. */
+.translation-picker select {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    border: none;
+}
+/* The columns/column-gap themselves are inherited from main.css's .passage
+   rule (restored there too, matching how this worked in June -- print was
+   only ever a thin override on top of a shared screen-authoritative base,
+   not a separate layout). column-rule stays off for print specifically,
+   same as it always did even back when main.css set one for screen. */
 .passage {
+    column-rule: none;
     widows: 2;
     orphans: 2;
-    column-rule: 0;
 }
+/* Keep the two sections (Scripture Readings / Commemorations) side by side
+   for print, matching the screen layout. main.css already has a
+   @media (max-width: 800px) that would collapse this to one column, but
+   print engines don't agree on what width that ends up evaluating against
+   for a page box (confirmed: Chrome collapsed it at print, Safari didn't)
+   -- re-assert the side-by-side values here so print doesn't depend on
+   that breakpoint matching (or not) at all. Also bias the page-break
+   engine against starting the readings on page 2 -- a hint, not a
+   guarantee, but combined with the compact multi-column layout above it
+   should keep the readings under the title on page 1 for all but the
+   longest commemoration lists. */
 .readings-columns {
-    border-top: 0;
+    grid-template-columns: 1fr 1fr;
+    gap: 3em;
+    break-before: avoid;
+}
+/* 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 {