sier det.
-en rundt hvert dt/dd-par er det HTML gir oss til å gruppere dem, og
det er den JavaScript viser og skjuler. Merk at både .ol-post og .ol-bolk
må få en egen display:none: en grid- eller blokkregel her slår nettleserens
egen [hidden]-regel, og oppslagene ville da aldri bli borte. */
.ol-caption { font-size: .82rem; margin: 1.6rem 0 .6rem; }
.ol-liste { margin-bottom: 2rem; }
.ol-bolk h2 { margin: 2rem 0 .6rem; }
.ol-antall { font-size: .78rem; font-weight: 400; letter-spacing: .03em;
color: var(--text-light); text-transform: none; }
.ol-dl { margin: 0; }
.ol-post { display: grid; grid-template-columns: minmax(9rem, 16rem) 1fr;
gap: .2rem 1.4rem; padding: .5rem 0; align-items: baseline;
border-bottom: 1px solid var(--border); }
.ol-post dt, .ol-post dd { margin: 0; }
.ol-it { font-weight: 700; }
.ol-ut { font-style: italic; font-size: .84rem; color: var(--text-light); }
.ol-merk { display: block; font-size: .86rem; color: var(--text-light);
margin-top: .2rem; }
.ol-post[hidden], .ol-bolk[hidden] { display: none; }
@media (max-width: 560px) {
.ol-post { grid-template-columns: 1fr; gap: .1rem; }
}
/* ---------- Månedsvelgerens fem soner ------------------------------------
Alle fem står i dokumentet; JavaScript viser den ene leseren har valgt.
.mv-bolk må få sin egen display:none - en section er blokk, og en senere
blokkregel ville ellers slå nettleserens [hidden]. */
.mv-bolk[hidden] { display: none; }
.mv-bolk h3 { margin: 2rem 0 .35rem; }
.mv-kilde { font-size: .8rem; color: var(--text-light); margin: 0 0 .5rem;
font-style: italic; }
.mv-om { margin: 0 0 .4rem; }
/* De tre best rangerte månedene merkes i den tabellen som vises. */
.vt-tabell tbody tr.mv-topp { background: rgba(0,0,0,.05); }
.vt-tabell tbody tr.mv-topp th:first-child::after { content: " ★";
color: var(--accent); }
/* ---------- Fergestrekningene under avstandstabellen ---------------------
Fergekolonnen navngir overfarten og lenker hit; forklaringen står én gang,
som ekte tekst. Den lå før i hver eneste rad - den samme prosaen 447
ganger - og et title-attributt ville bare flyttet stumheten. */
.fg-liste { margin: .8rem 0 1.6rem; }
.fg-post { padding: .6rem 0; border-bottom: 1px solid var(--border); }
.fg-post dt { font-weight: 700; margin: 0 0 .2rem; }
.fg-post dd { margin: 0; }
.fg-antall { color: var(--text-light); font-size: .86rem; }
.fg-post:target dt { color: var(--brand); }
/* ---------- Fullverdig fotokreditt VED bildet -----------------------------
CC BY(-SA) 2, 3 og 4. Se bildkredit() i bygg.py.
Den staar UNDER bildet, ikke oppaa: heroen har med vilje ikke noe moerkt
overlegg (linje 493-496 slaar det av), og hvit tekst paa et lyst motiv er
ikke lesbar. Under bildet er den alltid lesbar, uansett motiv.
Fargen er IKKE var(--muted): denne sajten har ingen --muted, og en
udefinert variabel faar hele regelen droppet uten feil - teksten ville
arvet broedtekstfargen. Se css-udefinert-variabel-feiler-stille.
Den er heller ikke var(--text-light) (#66707A). Maalt: 5,04:1 mot hvit,
men bare 4,48:1 mot travertin (--bg) og 3,96:1 mot --bg-2. Karusellinja og
seksjoner med vekslende bakgrunn ligger ikke paa hvit, saa den ville falt
under AA nettopp der. #5A6572 gir 5,93 / 5,27 / 4,65 - over 4,5:1 paa alle
tre bakgrunnene sajten bruker.
Stoerrelsen er .78rem - stor nok til aa leses, liten nok til ikke aa
konkurrere med ingressen. Ikke mindre: en kreditt som ikke kan leses er
ingen kreditt. */
.bildekreditt-inline {
margin: .45rem 0 0; font-size: .78rem; line-height: 1.5;
color: #5A6572;
}
.bildekreditt-inline a {
color: inherit; text-decoration: underline;
text-decoration-thickness: 1px; text-underline-offset: 2px;
text-decoration-color: rgba(90, 101, 114, .5);
}
.bildekreditt-inline a:hover,
.bildekreditt-inline a:focus-visible { text-decoration-color: currentColor; }
/* Etter heroen: samme tekstkolonne som resten av sida, hoeyrestilt saa den
ikke konkurrerer med broedteksten. Venstrestilt paa smal skjerm, der den
ellers brytes til flere linjer med ujevn hoeyrekant. */
.page-hero + .bildekreditt-inline,
.hero + .bildekreditt-inline {
max-width: var(--maxw); margin: .5rem auto 0; padding: 0 1.2rem;
text-align: right;
}
.bildekreditt-karusell { padding-bottom: .6rem; }
.article-figure figcaption .bildekreditt-inline { margin-top: .35rem; }
@media (max-width: 640px) {
.page-hero + .bildekreditt-inline,
.hero + .bildekreditt-inline { text-align: left; }
}
/* ---------- Kredittabellens fire filter ---------------------------------- */
.kredfilter {
display: grid; gap: .8rem; margin: 1.6rem 0 .6rem;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.kredfilter label { display: block; font-size: .82rem; color: var(--text-light); }
.kredfilter label > span { display: block; margin-bottom: .25rem; font-weight: 600; }
.kredfilter input, .kredfilter select {
width: 100%; padding: .5rem .6rem; font: inherit; font-size: .92rem;
border: 1px solid var(--border); border-radius: var(--r-sm);
background: var(--white); color: var(--text);
}
.kredfilter input:focus-visible, .kredfilter select:focus-visible {
outline: 2px solid var(--accent); outline-offset: 1px;
}
.kredtall { margin: .2rem 0 1rem; font-size: .88rem; color: var(--text-light); }
.kredtom { margin: 1rem 0; font-style: italic; color: var(--text-light); }