/* The port hubs — /ports and /ports/{slug}. ============================================================================================ A SEPARATE FILE, for the reason routes.PORT_STYLESHEET states: style.css is served at a URL built from its own bytes, so a rule added there changes the in the head of every page this site publishes, and the whole of this round rests on those pages not changing. Every selector is scoped under `.port-page`, a wrapper the two templates put around their own content. Scoping on a wrapper rather than on a body class is what lets base.html's tag stay the byte-for-byte string it has always been. NOTHING HERE INVENTS A LOOK. The colours and the rhythm are the tokens style.css already declares — navy, ink, warm, warm-line, quiet — and the story block is the Daily River Log's own shape, because it is the Log's own writing being shown. The gauge plates are not styled here at all: they are `_info.html`'s `gstat` component, which style.css already dresses on nine other pages, and re-dressing it here would put two authors on one component. Reading copy stays at or above 16px, as everywhere else on this site. */ /* ---- shell ------------------------------------------------------------------------------- */ .port-page { padding-bottom: 2.5rem; } .port-head { margin: 0 0 1.6rem; } .port-page h1 { margin: 0 0 .5rem; line-height: 1.18; } .port-page .lede { margin: 0; max-width: 60ch; color: var(--ink-soft); } .port-page h2 { margin: 2rem 0 .8rem; line-height: 1.25; } /* ---- the water ---------------------------------------------------------------------------- */ .port-stretch { margin: 0 0 1.6rem; padding: 0 0 1.4rem; border-bottom: 1px solid var(--warm-line); } .port-stretch:last-of-type { border-bottom: 0; padding-bottom: .4rem; } .port-stretch h3 { margin: 0 0 .3rem; line-height: 1.3; } .port-stretch-what, .port-stretch-count { margin: 0 0 .4rem; color: var(--ink-soft); } .port-stretch-kind { font-weight: 600; color: var(--navy); } .port-governing { margin: .6rem 0 .8rem; font-weight: 600; color: var(--navy); max-width: 60ch; } /* One column on a phone, side by side once there is room. The plates size themselves; this only decides how many stand beside each other. */ .port-readings { display: grid; gap: 1rem; grid-template-columns: 1fr; } .port-noreading { margin: .6rem 0 .8rem; max-width: 60ch; } .port-deeper { margin: .8rem 0 0; } .port-limits { margin: 1.2rem 0 0; padding: .9rem 1rem; background: var(--warm); border: 1px solid var(--warm-line); max-width: 70ch; color: var(--ink-soft); } /* ---- the story ---------------------------------------------------------------------------- */ .port-page .story { margin: 0; max-width: 70ch; } .port-page .story-art { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; margin: 0 0 .8rem; } .port-page .story-title { margin: 0; font-size: 1.2rem; line-height: 1.3; color: var(--navy); } .port-page .story-body { margin: .6rem 0 0; } .port-page .story-credit { margin: .7rem 0 0; color: var(--ink-soft); overflow-wrap: anywhere; } .port-page .fineprint { margin: .8rem 0 0; color: var(--ink-soft); } /* ---- the sailings, and the index ---------------------------------------------------------- */ .port-sailing-list, .port-index { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; grid-template-columns: 1fr; } .port-index li { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; padding-bottom: .55rem; border-bottom: 1px solid var(--warm-line); } .port-index-count { color: var(--ink-soft); } .port-more, .port-back { margin: 1rem 0 0; max-width: 60ch; } /* ---- once there is room ------------------------------------------------------------------- */ @media (min-width: 700px) { .port-readings { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); } .port-sailing-list, .port-index { grid-template-columns: repeat(2, minmax(0, 1fr)); } }