/* hagtolur.css — viðbætur ofan á tokens.css og vefur.css. * * Þessi skrá er SKRIFUÐ AF scripts/build_site.py. Ekki breyta henni hér; * breyttu HAGTOLUR_CSS í skriftunni og keyrðu aftur. * * Hér er aðeins það sem vantaði fyrir þennan vef: landavalið, SVG-ritin sem * eru teiknuð í vafranum og flokkalitirnir 3-6. Allt annað - tokens, letur, * töflur, traustmerki, hreyfing - kemur óbreytt úr hönnunarkerfinu. */ /* ---- Aðgengi ------------------------------------------------------------ */ .sr-lesid { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* ---- Föst sigling -------------------------------------------------------- */ /* Siglingin fylgir skruninu svo lesandi komist milli síðnanna þriggja hvar sem hann er staddur í langri töflu. Hún situr áfram í flæðinu (sticky, ekki fixed) og því þarf efnið undir henni enga uppbót að ofan. Aðskilnaðurinn er sá sami og áður: ógegnsær pappírsflötur og 1px hárlína að neðan úr vefur.css. Enginn skuggi - DESIGN kafli 4 bannar box-shadow alls staðar, líka undir föstum haus þar sem hann er annars algengastur. Bakgrunnurinn er endurtekinn hér því ógegnsæi er forsenda þess að efnið renni ósýnilegt undir hausinn. z-index 100 er yfir sveimskýringum landavalsins (30) og öllu öðru á vefnum. Skýringarreitirnir opnast niður frá merkimiðanum sínum og geta því ekki lent undir hausnum; skarist þeir samt á hausinn að vera ofan á, ella skrifaði efnið sem á að renna undir hann yfir siglinguna. */ .siglingar { position: sticky; top: 0; z-index: 100; background: var(--paper); } /* Fastur haus skyggir á það sem skrunað er að - #-tengil á kafla, leit í síðunni, lyklaborðsfókus. scroll-padding-top á skrunílátinu sjálfu nær yfir þau öll í einu; scroll-margin-top á hverju marki næði aðeins því fyrsta. Gildið er rúm hæð haussins (mælt 65px í einni röð) og gott bil að auki. */ html { scroll-padding-top: 5.5rem; } /* Undir 500px brotnar siglingin í tvær raðir. Innskotið og bilin eru minnkuð um eitt þrep, sem færir hæðina úr 111px í 87px - fastur haus má ekki taka fimmtung af símaskjá. Skrunbilið fylgir þeirri hæð. */ @media (max-width: 720px) { html { scroll-padding-top: 6.5rem; } .siglingar-innri { padding-block: var(--s3); gap: var(--s2) var(--s4); } } /* ---- Meginmál ----------------------------------------------------------- */ /* Íslensk samsett orð eru löng og brotna illa. hyphens: auto virkar aðeins með lang="is", sem er á . tabular-nums: tokens.css setur það á töflur, tíma og hetjutölur. Hér eru tölur líka í fyrirsögnum gagnamynda, ásmerkingum, fyrirvörum og meginmáli, svo reglan er látin ná yfir allt eins og DESIGN kafli 2 segir: á öllum tölugildum, alls staðar. */ body { hyphens: auto; font-variant-numeric: tabular-nums; } svg text { font-variant-numeric: tabular-nums; } code, .monotala, td.tala, th.tala { hyphens: none; } code { font-family: var(--mono); font-size: 0.9em; color: var(--ink-2); } .innskot { font-family: var(--serif); font-size: 1.25rem; line-height: 1.5; color: var(--ink-2); } .maeling-nafn { font-size: var(--orsmatt); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 var(--s2); } .skralisti { padding-left: var(--s6); color: var(--ink-2); } .skralisti li { margin-bottom: var(--s2); } /* Stuttur listi í meginmáli, notaður fyrir sjónarhornin þrjú í innganginum. Innskot og bil, engir kassar (DESIGN kafli 4). */ .textalisti { margin: var(--s4) 0; padding-left: var(--s6); max-width: 62ch; } .textalisti li { margin-bottom: var(--s2); } /* Aðfaralínan yfir hetjutölunni segir hvaðan talan er tekin af tímabilunum þremur. H2-þrep leturstigans (DESIGN kafli 2) svo hún lesist á undan tölunni en yfirgnæfi hana ekki. */ .hetjuadfari { font-family: var(--serif); font-size: 1.75rem; font-weight: 600; line-height: 1.3; color: var(--ink); max-width: 30ch; margin: 0 0 var(--s4); } /* ---- Töflur ------------------------------------------------------------- */ .landatafla tbody th, .landatafla tfoot th { font-weight: 400; text-align: left; padding: var(--s3); border-bottom: 1px solid var(--rule); vertical-align: top; white-space: nowrap; } .landatafla td.tala { font-variant-numeric: tabular-nums; } .landatafla tbody th.audkenni { font-family: var(--mono); } .landatafla .tala-alls { font-weight: 600; } /* Ísland er efnið. Auðkennið er þyngd og hárlína, ekki litur - merking má aldrei hvíla á lit einum (DESIGN kafli 3). */ .landatafla tr.rad-island th, .landatafla tr.rad-island td { font-weight: 600; color: var(--ink); background: var(--paper-raised); } .landatafla tr.rad-vidmid th, .landatafla tr.rad-vidmid td { font-weight: 600; border-top: 1px solid var(--rule-strong); } .tafla-titill { font-family: var(--sans); font-size: var(--h3); font-weight: 600; margin: var(--s8) 0 var(--s3); } .tafla-skyring { font-size: var(--smatt); color: var(--ink-2); margin-bottom: var(--s3); max-width: 62ch; } /* ---- Landaval ----------------------------------------------------------- */ .val { border-top: 1px solid var(--rule); padding-top: var(--s6); } .val-hopar { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s3); } .val-hopar .hnappur { border-color: var(--rule-strong); } .val-hopar .hnappur[aria-pressed="true"] { background: var(--accent); color: var(--paper); border-color: var(--accent); } .val-lysing { font-size: var(--smatt); color: var(--ink-2); max-width: 62ch; margin-bottom: var(--s6); min-height: 3em; } .val-fyrirsogn { font-size: var(--orsmatt); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); margin: var(--s6) 0 var(--s3); } .val-listi { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(22ch, 1fr)); gap: var(--s1) var(--s4); } .val-listi li { break-inside: avoid; position: relative; } .val-listi label { display: flex; align-items: baseline; gap: var(--s2); font-size: var(--smatt); color: var(--ink-2); padding-block: 2px; cursor: pointer; } .val-listi input { accent-color: var(--accent); } .val-listi input:disabled + span { color: var(--ink); font-weight: 600; } .val-listi label:hover { color: var(--ink); } /* ---- Sveimskýring við ESB-viðmiðin -------------------------------------- Viðmiðin tvö svara ólíkum spurningum og því fylgir hvoru merkimiðanum stutt skýring. Punktalínan undir textanum segir að skýringin sé til; engin ný tákn. Reiturinn er hárlína og flötur, enginn skuggi (kafli 4). Hann er birtur við sveim og við sýnilegan lyklaborðsfókus á gátreitinn, og skjálesarar fá sama texta um aria-describedby. */ .val-skyring { position: static; } .val-skyring-ord { text-decoration-line: underline; text-decoration-style: dotted; text-decoration-color: var(--ink-3); text-decoration-thickness: 1px; text-underline-offset: 3px; } .val-skyring-blad { position: absolute; z-index: 30; top: calc(100% + var(--s1)); left: 0; width: max-content; /* 40ch brýtur textann snyrtilega; klemman heldur reitnum innan gluggans þegar hann er þröngur (umgjörðin er 24px hvorum megin). */ max-width: min(40ch, calc(100vw - 4rem)); padding: var(--s2) var(--s3); background: var(--paper-raised); border: 1px solid var(--rule-strong); border-radius: 2px; font-size: var(--smatt); font-weight: 400; line-height: 1.45; color: var(--ink-2); hyphens: auto; opacity: 0; visibility: hidden; /* Truflar hvorki smell á gátreitinn né á merkimiðann. */ pointer-events: none; transition: opacity 120ms ease-out, visibility 120ms; } .val-listi label:hover .val-skyring-blad { opacity: 1; visibility: visible; } /* Aðskilin regla: vafri sem þekkir ekki :focus-visible má ekki fella sveimregluna hér að ofan með sér. */ .val-listi input:focus-visible + .val-skyring .val-skyring-blad { opacity: 1; visibility: visible; } @supports not selector(:focus-visible) { .val-listi label:focus-within .val-skyring-blad { opacity: 1; visibility: visible; } } /* Viðmiðalistinn stendur í einum dálki þegar glugginn er þröngur, svo skýringarreiturinn eigi alltaf breiddina frá vinstri jaðri listans og klippist hvergi af. Á breiðum skjá kemst hann fyrir í dálkunum. */ @media (max-width: 72rem) { .val-listi.val-listi-vidmid { grid-template-columns: 1fr; } } .val-stada { font-size: var(--smatt); color: var(--ink-2); margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--rule); } .val-stada strong { color: var(--ink); } /* ---- Gagnamyndir -------------------------------------------------------- */ .rit { margin-block: var(--s12); } .rit-titill { font-family: var(--serif); font-size: var(--h2); font-weight: 600; line-height: var(--lh-fyrirsogn); max-width: 46ch; } /* Flokkalitirnir sex, föst röð, aldrei hringrás. vefur.css hafði 1-2. */ .rit-rod-1 { color: var(--cat-1); } .rit-rod-2 { color: var(--cat-2); } .rit-rod-3 { color: var(--cat-3); } .rit-rod-4 { color: var(--cat-4); } .rit-rod-5 { color: var(--cat-5); } .rit-rod-6 { color: var(--cat-6); } .rit-ferill { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .rit-sula { fill: currentColor; } /* 2px hringur í flatarlit þar sem mörk skarast (DESIGN kafli 5). */ .rit-punktur { fill: currentColor; stroke: var(--paper); stroke-width: 2; } .rit-svg { display: block; width: 100%; height: auto; } .rit-svg text { font-family: var(--sans); } .rit-nemi { fill: var(--paper); stroke: currentColor; stroke-width: 2; opacity: 0; } [data-virkt] .rit-nemi { opacity: 1; } .rit-endamerki { font-size: 13px; font-weight: 500; fill: var(--ink-2); } .rit-hopmerki { font-size: 13px; fill: var(--ink-2); } .rit-nullina { stroke: var(--rule-strong); stroke-width: 1; } .rit-skyringar { margin-top: var(--s4); } .rit-skyringar .rit-litur { background: currentColor; } .rit-skyringar li span:last-child { color: var(--ink-2); } .rit-skref { font-size: var(--smatt); color: var(--ink-2); margin: var(--s4) 0 0; max-width: 62ch; } @media (max-width: 720px) { .rit-titill { font-size: var(--h3); font-family: var(--sans); } }