/* ========================================================================== Catch Signal: tide and fishing times pages (public/css/pages-tides.css) Loaded after base.css and pages.css by /tides, /tides/ and /tides/king-tides (scripts/seo/pages/tides.mjs). Colours come from the base.css variables, so the light and dark themes both work. Safari 15.4 floor: no nesting, no container queries, no color-mix(). Contents 1. Subline and the answer-first island 2. Tide chart (scrolls sideways on small screens) 3. Month tables, the reading key and credits 4. Hub and king tides tables 5. Phones: pinned Date column, tighter king tides table 6. Print ========================================================================== */ /* -------------------------------------------------------------------------- 1. Subline and the answer-first island (height reserved: pages.css .live) -------------------------------------------------------------------------- */ .doc .subline { margin-top: var(--space-3); } .tide-now { margin: var(--space-4) 0 var(--space-6); max-width: var(--measure); } .tide-now .tide-next { font-size: var(--fs-md); line-height: 1.45; } .tide-now .tide-next strong { font-weight: 600; } .tide-now .jump-today { margin-top: var(--space-2); font-size: var(--fs-sm); } /* -------------------------------------------------------------------------- 2. Tide chart: a self-hosted SVG with a transparent background, in a light and a dark variant (a source for prefers-color-scheme: dark, the only way these pages turn dark), set on the surface colour each variant's text contrast is worked out against. Below 760px it keeps a readable size (labels about 12px) and scrolls inside its box instead of the page. -------------------------------------------------------------------------- */ .tide-chart { margin: var(--space-3) 0 0; } .tide-chart .chart-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); } .doc .tide-chart img { display: block; width: 100%; min-width: 720px; height: auto; border-radius: 0; background: transparent; } /* not dimmed like the species photos in the dark theme (pages.css §4): the dark variant's colours are set for 4.5:1 */ .doc .tide-chart .chart-scroll picture img { filter: none; } .tide-chart figcaption { max-width: var(--measure); } /* -------------------------------------------------------------------------- 3. Month tables. Columns: 1 Date, 2 Tides, 3 Range, 4 Dawn tide, 5 Dusk tide, 6 Tide & light windows, 7 First light … last light, 8 Moon, 9 Solunar bite times. The time columns (2, 3, 7) are .num for the data font but read left-aligned, headers included. -------------------------------------------------------------------------- */ .prose .tide-table td, .prose .tide-table th { padding: var(--space-2); } .prose .tide-table td { font-size: var(--fs-xs); } .prose .tide-table td.num, .prose .tide-table th.num { text-align: left; } .prose .tide-table td.num strong { font-weight: 500; color: var(--ink); } .prose .tide-table tbody th[scope="row"] { white-space: nowrap; } .prose .tide-table tbody tr { scroll-margin-top: calc(var(--header-h) + var(--space-3)); } .prose .tide-table thead th { white-space: normal; vertical-align: bottom; } .prose .tide-table thead th:nth-child(6), .prose .tide-table thead th:nth-child(7), .prose .tide-table thead th:nth-child(9) { min-width: 8rem; } .prose .tide-table td:nth-child(4), .prose .tide-table td:nth-child(5) { min-width: 6rem; } .prose .tide-table td:nth-child(6) { min-width: 8rem; } .prose .tide-table td:last-child { min-width: 8.5rem; color: var(--muted); } .tide-credit { margin-top: var(--space-2); } .tide-credit a { color: inherit; } .tide-key { margin-top: var(--space-5); max-width: var(--measure); font-size: var(--fs-sm); color: var(--muted); } .tide-key h3 { color: var(--ink); } .tide-key ul { margin-top: var(--space-2); } #other-places h3, #best-tides h3 { margin-top: var(--space-5); } #other-places .tide-credit { margin-top: var(--space-4); } /* -------------------------------------------------------------------------- 4. Hub and king tides tables -------------------------------------------------------------------------- */ .prose .tide-hub-table td:last-child { white-space: nowrap; font-family: var(--font-data); font-size: var(--fs-xs); } .tide-next-cell { display: inline-block; min-height: 2.6em; } /* Place and station names wrap only between words (base.css lets .prose links break anywhere, which split 'Mooloolaba' into 'Moolool/aba' in these narrow first columns) */ .prose .tide-hub-table th a, .prose .king-table th a { overflow-wrap: normal; word-break: normal; } .prose .king-table td:nth-child(2), .prose .king-table td:first-child { white-space: nowrap; } .prose .king-table thead th { white-space: normal; vertical-align: bottom; } /* one station per row group: its name spans the group's rows */ .prose .king-table tbody th[scope="rowgroup"] { background: transparent; } /* -------------------------------------------------------------------------- 5. Phones: the month table's Date column stays pinned while the rest scrolls sideways (as pages-rules.css §6 does), so every row keeps its date; the king tides table tightens its padding to fit 375px. -------------------------------------------------------------------------- */ @media (max-width: 37.5rem) { .prose .tide-table thead th:first-child, .prose .tide-table tbody th[scope="row"] { position: sticky; left: 0; z-index: 1; box-shadow: inset -1px 0 0 var(--line); } .prose .tide-table thead th:first-child { background: var(--sunken); } .prose .tide-table tbody th[scope="row"] { background: var(--surface); } /* today's row: pages.css paints a translucent band; the pinned cell needs it opaque, with the marker kept */ .prose .tide-table tr.is-today > th[scope="row"] { background: linear-gradient(var(--band), var(--band)), var(--surface); box-shadow: inset 3px 0 0 var(--marker), inset -1px 0 0 var(--line); } .prose .king-table th, .prose .king-table td { padding-left: var(--space-2); padding-right: var(--space-2); } } /* -------------------------------------------------------------------------- 6. Print: full tables, no chart scrolling -------------------------------------------------------------------------- */ @media print { .tide-chart .chart-scroll { overflow: visible; border: 0; } .doc .tide-chart img { min-width: 0; } }