, som skulle have vaeret foert igennem baade layoutet, build.py og renderingen. */ .kp main:has(.kp-artikelhoved) .kp-hero { border-bottom: 0; } .kp main:has(.kp-artikelhoved) .kp-block { border-top: 0; padding-block: clamp(1.75rem, 3vw, 3rem); } /* Luften over rubrikken bliver staaende. Det er kun vejen ned i teksten, der bliver kortere. */ .kp .kp-artikelhoved { padding-block: clamp(4.5rem, 13vw, 11rem) clamp(1.75rem, 3vw, 3rem); } /* ---------------- Deleknapper ---------------- Runde flader i sitets egen blaek, saa de laeses som knapper uden at blive en farve, sitet ellers ikke har. Ikonerne er tegnet i to slags: mail og link i tynde streger som resten af sitets ikoner, de tre maerker som de fyldte former, logoerne skal have. */ .kp .kp-del__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .625rem; } .kp .kp-del__disc { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; padding: 0; cursor: pointer; /* Haarlinje som resten af sitets inddeling. Ingen flade -- ringen alene giver knappen dens form og dens klikflade. */ background: none; border: 1px solid var(--kp-line); color: var(--kp-ink); transition: border-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard), background var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard), color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard); } .kp .kp-del__disc svg { width: 1.25rem; height: 1.25rem; display: block; } /* De tre maerker er fyldte former og vejer tungere end de tegnede ikoner ved samme maal. De saettes en tak mindre, saa raekken har samme vaegt hele vejen henover. */ .kp .kp-del__disc svg.kp-del__maerke { width: 1.0625rem; height: 1.0625rem; } .kp .kp-del__disc:hover { border-color: var(--kp-ink); } .kp .kp-del__disc:focus-visible { outline: 2px solid var(--kp-ink); outline-offset: 3px; } /* Kvitteringen paa kopiér: fluebenet afloeser kaeden i to sekunder */ .kp .kp-del__tegn { display: grid; place-items: center; } .kp .kp-del__tegn--ok { display: none; } .kp .kp-del__kopi[data-ok] .kp-del__tegn { display: none; } .kp .kp-del__kopi[data-ok] .kp-del__tegn--ok { display: grid; } .kp .kp-del__kopi[data-ok] { background: var(--kp-ink); border-color: var(--kp-ink); color: var(--kp-paper); } /* Modulet nederst har ingen marginlabel at flugte med. Knapperne staar i stedet centreret over tekstspalten. */ .kp .kp-del__liste--midt { justify-content: center; } .kp .kp-del__rubrik { text-align: center; } /* Raekken under bylinen. Samme knapper, mindre -- den skal ikke tage magten fra manchetten, den staar ved siden af. */ .kp .kp-del__liste--lille { gap: .375rem; margin-top: .875rem; } .kp .kp-del__liste--lille .kp-del__disc { width: 2rem; height: 2rem; } .kp .kp-del__liste--lille .kp-del__disc svg { width: .875rem; height: .875rem; } .kp .kp-del__liste--lille .kp-del__disc svg.kp-del__maerke { width: .75rem; height: .75rem; } /* Bylinen har nu to dele: navnet med portraettet, og knapperne under */ .kp .kp-byline { display: block; } .kp .kp-byline__navne { display: flex; align-items: center; gap: .875rem; } /* Bylinen peger paa om-siden. Den skal ikke se ud som et link i broedteksten -- stregen kommer frem, naar man er ved den. */ .kp a.kp-byline__navne { color: inherit; text-decoration: none; } .kp a.kp-byline__navne:hover .kp-byline__navn { color: var(--kp-mute); } .kp a.kp-byline__navne:focus-visible { outline: 2px solid var(--kp-ink); outline-offset: 4px; border-radius: 4px; } /* ---------------- Artikeloversigten ---------------- Bruger oversigtsposterne, sitet allerede har: marginlabel, metalinje, rubrik, uddrag og et link videre. Den foerste post staar stoerst. */ .kp .kp-artikler { padding-block: clamp(1rem, 2vw, 2rem) clamp(2rem, 5vw, 4rem); } /* Marginlabelen og metalinjen er samme grad og samme form, og saa skal de ogsaa staa paa samme linje. Labelen baerer ellers en luft, der er sat til at flugte med en rubrik, ikke med en linje i labelgrad. */ @media (min-width: 900px) { .kp .kp-post:has(.kp-kicker) .kp-label { margin-top: 0; padding-top: 0; line-height: 1.4; } } /* Posten er ét link, men kun saa bredt som teksten. Et link paa tvaers af hele skaermen bliver ramt ved et uheld. Maalene er de samme, som afsnittene i posten har i forvejen, saa klikfladen slutter praecis dér, hvor teksten slutter. Ingen hovereffekt: markoeren er signalet, og «Læs artiklen» baerer i forvejen sin streg. */ .kp a.kp-post__krop { display: block; max-width: var(--kp-oversigt); color: inherit; text-decoration: none; } .kp a.kp-post__krop:hover .kp-link { color: var(--kp-ink); border-bottom-color: var(--kp-ink); } .kp a.kp-post__krop:focus-visible { outline: 2px solid var(--kp-ink); outline-offset: 6px; } /* Underrubrikken er et span inde i linket og skal selv sige, at den er en blok. Metalinjen holdes udenfor: den er flex i forvejen. */ .kp a.kp-post__krop .kp-post__under { display: block; } .kp .kp-post__under { font-family: var(--md-sys-typescale-brand-font); font-size: 1.125rem !important; line-height: 1.35; color: var(--kp-mute); margin: -.35rem 0 1rem !important; max-width: 34ch; } .kp .kp-post--lead .kp-post__under { font-size: 1.375rem !important; }