{% endfor %}
- New
{% endif %}
diff --git a/orthocal/static/main.css b/orthocal/static/main.css
index 2fa85d3..4d91d4b 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
@@ -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;
diff --git a/orthocal/static/print.css b/orthocal/static/print.css
index e7f5b11..98a088f 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;
}
@@ -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 {