/* --- UI scale (accessibility size control) -------------------------------- The header's "A A A" group sets --ui-scale on (js/ui-scale.js, before first paint). `zoom` on the root scales the entire rendered page — text, images, borders, spacing — like browser zoom. This has to be `zoom` rather than a root font-size: the site is written in px/pt, so almost nothing would follow a font-size change. Note the media queries below still match against the *real* viewport width, not the scaled one, so the breakpoints do not shift as the reader scales up. Consequence: viewport units (vh/vw) are NOT scaled by zoom, so the handful of rules using them divide by --ui-scale to stay screen-sized (see #root, .toast-container, .modal). */ :root { --ui-scale: 1; zoom: var(--ui-scale); } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Noto Sans Lao Looped', sans-serif; display: flex; flex-direction: row; height: 100%; margin: 0; } #root { display: flex; flex-direction: column; width: 100%; /* Cap the overall content width and centre it so the site doesn't sprawl on wide monitors. Adjust this one value to make the whole site wider/narrower. */ max-width: 1000px; margin: 0 auto; justify-content: space-between; position: relative; min-height: calc(100vh / var(--ui-scale)); } /* The destaques column needs room *beside* the feed, so the cap above is lifted — but only on pages that actually have one. The aside is emitted only when something is marked as a destaque (see layout/base.html), so :has() is enough and the renderer needs no body class. The extra 186px is the column plus the row gap, which leaves the article cards exactly the width they have today. Browsers without :has() keep the 1000px cap: the feed narrows by the column's width, which is a tighter layout, not a broken one. */ #root:has(#destaques) { max-width: 1186px; } .blank-size-bar { width: 0px; } header { display: flex; flex-direction: column; align-items: center; text-align: center; font-family: 'Oleo Script Swash Caps', sans-serif; margin-top: 5px; } #title { font-size: 40pt; /* Rendered as an (links to the unfiltered home feed) but must look like plain header text, not a default blue underlined link. */ color: inherit; text-decoration: none; cursor: pointer; } #header-top { display: flex; flex-direction: row; justify-content: space-between; width: 100%; } #social-media { display: flex; flex-direction: row; align-items: center; /* Gap between icons so each keeps ≥24px of clear space (WCAG 2.2 target-size). */ gap: 4px; padding: 0px; } #social-media a { font-size: 16pt; /* ≥24×24 tap target (was 22×25). Centre the glyph in the padded box. */ display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 28px; min-height: 28px; } /* Size control: three "A"s of growing size, flat like the rest of the chrome (thin black rules, no filled "UI" buttons). The pressed one is outlined. */ #ui-scale { display: flex; flex-direction: row; align-items: center; gap: 4px; padding: 0; /* #header-top is space-between, which would strand this middle child in the empty centre. Push it against the search box instead — the two are the reader's controls, the social icons on the left are links out. */ margin-left: auto; margin-right: 10px; } .ui-scale-btn { /* ≥24×24 tap target (WCAG 2.2), same as the social icons. */ min-width: 26px; min-height: 26px; padding: 0 4px; display: inline-flex; align-items: center; justify-content: center; /* Not `inherit`:
is set in the Oleo Script display face, which would render these as decorative script "A"s instead of a legible size preview. */ font-family: 'Noto Sans Lao Looped', sans-serif; line-height: 1; color: inherit; background: transparent; /* Transparent (not absent) so the box doesn't shift when it gains a border. */ border: 1px solid transparent; border-radius: 3px; cursor: pointer; transition: border-color 150ms ease, background-color 150ms ease; } /* The glyph itself previews the size it selects — that is the whole affordance. */ .ui-scale-btn[data-scale='1'] { font-size: 11px; } .ui-scale-btn[data-scale='1.15'] { font-size: 14px; } .ui-scale-btn[data-scale='1.3'] { font-size: 17px; } .ui-scale-btn:hover, .ui-scale-btn:focus-visible { border-color: black; outline: none; } .ui-scale-btn[aria-pressed='true'] { border-color: black; background-color: rgba(0, 0, 0, 0.06); font-weight: 600; } #search-box { height: 25px; /* Shrink-to-fit rather than a fixed 30%: its contents are fixed-width and right-aligned, so a wider box was just empty space on its left — which the size control (pushed right by its auto margin) would butt against instead of sitting next to the field. The mobile breakpoints size it by flex-basis, so they are unaffected. */ width: auto; vertical-align: bottom; padding: 0px; display: flex; flex-direction: row; justify-content: end; } #search-box-input { height: 25px; width: 150px; font-size: 13px; } #search-box-btn { height: 25px; width: 25px; padding: 0px; margin: 0px; vertical-align: middle; } /* MAIN */ /* Header + nav + main wrapper. Grows to fill the viewport so a short listing (e.g. the last page with only a couple of cards) still pushes the footer — and the pagination bar (see #pagination) — to the bottom. */ .page-content { display: flex; flex-direction: column; flex: 1; } /* The body and the destaques column, side by side. The header and nav sit above it inside .page-content, so they keep the full width and are not narrowed by the column. */ .content-row { display: flex; flex-direction: row; /* Fill the leftover height inside .page-content, so main's own flex:1 still reaches the bottom and #pagination's auto top margin can sink to it. */ flex: 1; gap: 16px; min-width: 0; } main { padding-left: 4px; padding-right: 4px; display: flex; flex-direction: column; align-items: center; /* Fill the leftover height inside .content-row so #pagination's auto top margin can push it to the bottom on short pages. */ flex: 1; /* A flex item's floor is its content, and the cards carry a fixed 200px thumbnail — without this the feed would refuse to shrink and push the destaques column off the row on narrow desktops. */ min-width: 0; } /* DESTAQUES (the highlights column) */ #destaques { flex: none; /* Sets the tile size: the card is a full-width square inside this column, so this one value is what makes a destaque bigger or smaller. Keep it in step with the #root cap above. */ width: 170px; /* Hug the content: the column must not stretch to the feed's height. */ align-self: flex-start; margin-top: 4px; padding: 0 4px; /* Deliberately NOT sticky. Five square cards still run past a short viewport, and a sticky box taller than the viewport pins its top and hides its own bottom — worse than just scrolling with the page. */ } #destaques h2 { /* The body face, not the brand script: the script is reserved for the site title, and a section marker reads better set as a label than as a signature competing with it. */ font-family: 'Noto Sans Lao Looped', sans-serif; font-size: 0.85em; font-weight: 700; text-transform: uppercase; /* Tracking is what makes a short word read as a label, but it also has to fit the 170px column — hence looser type at a smaller size. */ letter-spacing: 0.1em; margin: 3px 0 8px; padding-bottom: 6px; /* border-bottom: 1px solid #333; */ text-align: center; /* TEST DESTAQUES BLACK */ padding-top: 6px; color: white; background-color: #ff7e26; } #destaques ul { list-style: none; margin: 0; padding: 0; } #destaques li + li { margin-top: 8px; } /* A square tile: the cover fills the whole card and the title sits over its foot. Image and title only, deliberately — the column is too narrow for the excerpt a listing card carries, and the uniform square crop is what makes five of them read as one set rather than as a list of odds and ends. */ .destaque { position: relative; display: block; /* The card *is* the image, so a single ratio governs both. */ aspect-ratio: 1 / 1; overflow: hidden; color: #fff; text-decoration: none; border: 1px solid black; box-shadow: 3px 3px 3px #ccc; /* Shows through only while the photo is still loading. */ background: #333; transition: box-shadow 200ms ease-in-out; } .destaque:hover { box-shadow: 3px 3px 10px #999; } .destaque img, .destaque-img-placeholder { display: block; /* Fill the card so the title can float over it. */ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } /* No cover image — only reachable for legacy or unpublished data, since publishing requires one. Dark, so the white title stays readable on it. */ .destaque-img-placeholder { background: #4a4a4a; } .destaque-text { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; padding: 18px 6px 6px; /* This gradient carries the contrast: the title is white over whatever photo the article happens to have, so legibility cannot depend on the image being dark. The tall transparent tail keeps the edge from reading as a band across the picture. */ background: linear-gradient(to top, rgba(0, 0, 0, 0.88), rgba(0, 0, 0, 0.65) 55%, rgba(0, 0, 0, 0)); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); } .destaque-type { font-size: 0.6em; text-transform: uppercase; letter-spacing: 0.04em; color: #e0e0e0; } .destaque-title { /* Sized so three lines of a long title still fit inside a 160px tile. */ font-size: 0.88em; line-height: 1.22em; font-weight: 600; margin-top: 2px; /* Clip at 3 lines so a long title can't climb over the whole photo. */ display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* Narrow (≤767px): the feed is already one card per row here, so there is no room for anything beside it — the column drops below the feed and spreads into a two-up grid so five destaques don't turn into five screens of scrolling. */ @media only screen and (max-width: 767px) { .content-row { flex-direction: column; } #destaques { width: 100%; align-self: stretch; margin-top: 20px; } #destaques ul { display: grid; /* auto-fill rather than a fixed column count: it keeps every tile close to the ~160px it has in the desktop column, letting the number of columns follow the width instead of stretching two tiles across a tablet. */ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; } #destaques li + li { margin-top: 0; } } /* ARTICLES */ #articles { display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 4px; /* Guaranteed gap before the pagination bar. Its own margin-top is `auto` (to sink to the bottom on short pages), which collapses to 0 on full pages — so this keeps a consistent gap in both cases. */ margin-bottom: 24px; gap: 8px; /* main centers its children (align-items: center), so this grid would otherwise shrink to its content width — collapsing the cards when they hold little text. Force it to span main's full width so the 50% cards keep their columns regardless of how short the text is. */ width: 100%; } #articles article { position: relative; display: flex; flex-basis: -webkit-calc(50% - 4px); flex-basis: -moz-calc(50% - 4px); flex-basis: calc(50% - 4px); line-height: 1.2em; border: 1px solid black; margin-top: 4px; padding-left: 3px; padding-right: 3px; /* Fixed height (≈ the 200px image) so the preview clips instead of growing the card. */ height: 210px; overflow: hidden; box-shadow: 3px 3px 3px #ccc; cursor: pointer; transition: box-shadow 200ms ease-in-out; } /* Whole listing card is a link. display:contents keeps the
as the flex item so the two-column grid is unaffected. */ .article-card { display: contents; color: inherit; text-decoration: none; } #articles .article-card:hover article { box-shadow: 3px 3px 10px #999; } .article-body { display: flex; flex-direction: row; /* Fill the card so the text column can stretch to the image's height. */ flex: 1; min-width: 0; overflow: hidden; } #articles article img { width: 200px; height: 200px; object-fit: cover; /* padding: 4px; */ margin-top: 4px; flex: none; } .article-text { margin: 0; margin-left: 4px; margin-bottom: 4px; /* Column layout so the preview paragraph can flex to fill remaining height. */ display: flex; flex-direction: column; flex: 1; min-width: 0; overflow: hidden; } .article-text h2 { font-size: 1.1em; flex: none; } .article-date { display: block; flex: none; margin-top: 2px; font-size: 0.7em; /* AA-contrast gray on white (was #888, which fails WCAG AA). */ color: #6b6b6b; } /* Keeps the card layout uniform when an article has no image (avoids an empty ). */ .article-img-placeholder { width: 200px; height: 200px; margin-top: 4px; flex: none; background: #ececec; } .article-text p { margin-top: 6px; margin-bottom: 0; font-size: 0.85em; /* Airier line spacing so the preview is easier on the eye. */ line-height: 1.5em; /* Grow the preview to the bottom of the card (dynamic, not a fixed line count) and clip the overflow. */ flex: 1; min-height: 0; overflow: hidden; /* Fade only where long text actually reaches the bottom edge; short previews sit above the fade region and stay fully opaque. */ -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%); mask-image: linear-gradient(to bottom, #000 82%, transparent 100%); } /* The type bar. Its colours are a *section's* choice, set in the backoffice and emitted by the renderer as two custom properties in an inline style on this element (renderer.js -> typeBarStyle). The fallbacks below are the site default, so a section that has picked nothing carries no style attribute at all and looks exactly as it always did — and the responsive rule further down still only has to flip the geometry, never repeat a colour. */ .article-type { background-color: var(--type-bar-bg, black); color: var(--type-bar-fg, white); /* No vertical margin so the bar fills the full card height; keep the horizontal gap to the image. */ margin: 0 4px; writing-mode: vertical-lr; transform: rotate(180deg); white-space: nowrap; display: flex; justify-content: center; align-items: center; min-width: 45px; /* Fill the card's height. align-self:stretch is unreliable here because the vertical (orthogonal) writing-mode makes browsers size the bar to its vertical text content instead of stretching, leaving white gaps top and bottom. An explicit height:100% resolves against the
's definite 210px height and forces a full-height bar regardless of label length. */ align-self: stretch; height: 100%; } .article-type span { /* Inherit, never `white`: the label's colour is the bar's, and a literal here would beat the inline custom property set on the parent. */ color: inherit; font-size: 1.3em; text-align: center; font-weight: 600; } /* RESPONSIVE LISTING CARDS Wide (default): two cards per row, horizontal — a lateral (vertical-text) type bar | photo | text. Narrow (≤767px): one vertical card per row. The type label moves to a horizontal bar on top (so its text is horizontal, not vertical), followed by title, date, photo, then the text preview. */ @media only screen and (max-width: 767px) { /* One card per line; column flow with no fixed height so the photo and text stack freely instead of being clipped to a horizontal card's height. */ #articles article { flex-basis: 100%; flex-direction: column; height: auto; } .article-body { flex-direction: column; } /* Flatten .article-text so its title/date/text become flex siblings of the photo inside .article-body — letting `order` slot the photo between the date and the text preview. */ .article-text { display: contents; } .article-text h2 { order: 1; margin-left: 4px; } .article-date { order: 2; margin-left: 4px; } /* Full-width cover, still forced square (crops the wider axis) like the desktop 200x200 thumbnail. The selector must include `#articles article` to beat the base `#articles article img { width: 200px }` rule (an ID selector outweighs a plain class, and media queries add no specificity). */ #articles article img, .article-img-placeholder { order: 3; width: 100%; aspect-ratio: 1 / 1; height: auto; object-fit: cover; object-position: center; margin: 8px 0 0; } .article-text p { order: 4; /* Fixed clip height instead of flex-fill (there's no fixed card height to fill now). It has to be `height`, not `max-height`: an *empty* fade region under a short excerpt is what keeps short previews fully opaque — the desktop card gets that for free from `flex: 1` stretching the paragraph to the card's foot. 4.5 lines of 1.5em, so the cut always lands mid-line and the mask has half a line to dissolve. */ flex: none; height: 6.75em; margin: 8px 4px 6px; /* The shared mask fades over a *percentage* of the box, and this box is barely half the desktop one — 18% of it is ~0.8 of a line, too little to read as a fade, so the preview looked hard-cut here. Fade over a fixed 1.9em (~1.25 lines) instead, matching the desktop feel. */ -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 1.9em), transparent 100%); mask-image: linear-gradient(to bottom, #000 calc(100% - 1.9em), transparent 100%); } /* On top → horizontal bar with HORIZONTAL text: reset the wide layout's vertical writing-mode + rotate. (The vertical-text bar is only correct when it's lateral, i.e. the wide two-column layout above.) */ .article-type { margin: 4px 0 0; min-width: 0; width: 100%; height: 30px; writing-mode: horizontal-tb; transform: none; justify-content: center; } .article-type span { font-size: 1em; width: 100%; text-align: center; } } .pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; /* Top margin `auto`: in main's flex column this sinks the bar to the bottom when the page is short (few cards), so it sits just above the footer instead of hugging the last row. On a full page the auto margin is 0 and #articles' margin-bottom supplies the gap. */ margin: auto 0 8px; } .pagination.is-loading { opacity: 0.6; pointer-events: none; } /* The items are links (a disabled control is a ), so the box has to be laid out explicitly — an inline anchor would ignore min-width and not centre its label the way a