/* * Detail článku — `templates/single.html`. * * Od #48 (2026-09-18) je na konci súboru ešte jedna sekcia: **tabuľka * a zoznamy pre celý web**. Nie je to odbočka — súbor je zavesený na * `core/post-content`, a ten blok je aj v `templates/page.html`, takže sa * načítava na každej stránke. Dôvod, prečo tie pravidlá nedostali vlastný * súbor, je hranica zadania #48, nie technika; keď raz dostanú, patria pod * `core/table` a `core/list` v `functions/BlockStyles.php`. * * ── Odmerané na ráme `12880 detail-clanku` (snímka 09-01 13-30-27) ──────── * * Popisok rámu hovorí `12880`, je to preklep za 1280 (`docs/05`). Mierka: * rám je na snímke široký 1535 px pri návrhových 1280, teda 1,1992. * * obsahový stĺpec x **128**, šírka **1024** — ako všade inde * pilulka rubriky x 128, 72 × 38, obrys 2 px, priehľadné pozadie * H1 na celú šírku stĺpca, `x-large` 64/1 (odmerané: rozteč * riadkov 64,2, ink 60) * lead `medium` 22,4/1,2 (rozteč 26,7, ink 20,8), šírka * `measure` 552, **vľavo** — nie na stred * obrázok 1024 × 576, teda 16 : 9, radius 16 * telo článku **552 na stred v stĺpci 1024** — text začína na 364, * čo je 128 + (1024 − 552) / 2. Nie je to teda užší * stĺpec zarovnaný doľava ako lead, ale vycentrovaný. * * 🔴 Šablóna mala do 2026-09-15 `contentSize: 552px` na `main`, takže tých * 552 dostala aj pilulka, H1 aj obrázok — odmerané, všetkých päť prvkov malo * x 364 a šírku 552. Stĺpec je 1024 a užšie je len telo. */ /* * Pilulka rubriky je **tá istá obrysová pilulka** ako pod zbaliteľným * obsahom (`docs/11`, „Obrysová pilulka zbaľovača"): 2 px obrys `ink`, * priehľadné pozadie, radius pilulka, padding 8/20, `button` 14,4/600. * Odmerané tu: šírka 71,7 pri slove „Blog", výška 37,5, ľavý obrys na * x 127,6 a text na 149,3 → padding 20 + obrys 2. * * Je to tretí zápis tých istých šiestich vlastností (ďalšie dva sú * v `card-grid` a `collapsible-list`). Nespájajú sa, lebo každý žije v inom * bundli — bloky majú vlastný `style-index.css`, ktorý téma nenačítava. * Čísla majú jeden zdroj: `docs/11`. */ .egrant-post-category-pill { display: inline-block; padding: 8px var(--wp--preset--spacing--50); /* 8 / 20 */ border: 2px solid var(--wp--preset--color--ink); border-radius: var(--wp--custom--radius--pill, 9999px); font-size: var(--wp--preset--font-size--button); /* 14,4 */ font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; color: var(--wp--preset--color--ink); } /* * Na frontende rubrika odkaz nie je — archívy rubrík nie sú sprístupnené * (`functions/CategoryArchives.php`). Pravidlá tu zostávajú pre editor: ten * `core/post-terms` ďalej kreslí s `` a bez nich by pilulka mala * v šablóne podčiarknutý text v inej farbe než v ráme. */ .egrant-post-category-pill a { color: inherit; text-decoration: none; } .egrant-post-category-pill a:hover, .egrant-post-category-pill a:focus-visible { text-decoration: underline; } /* * Lead. `medium` 22,4 s riadkovaním 1,2 je to isté, čo má blokový štýl * „Lead" pri odstavci — `post-excerpt` ale odstavec nie je, takže sa štýl * nedá použiť a hodnoty sú tu. * * `max-width` bez `margin-inline: auto`: v ráme je lead **vľavo**, nie na * stred ako telo článku. */ /* * 🔴 Dvojtriedový selektor kvôli `max-width`. Jednotriedový `.egrant-post-lead` * má (0,1,0) — rovnako ako `:root :where(.is-layout-constrained) > *` * z jadra, ktoré leadu dáva šírku obsahového stĺpca — a pri zhode rozhoduje * poradie stylesheetov, ktoré je proti nám. Odmerané: lead mal 1024, nie 552. * Ten istý dôvod je zapísaný v `core-paragraph.css` pri štýloch „Lead" * a „Lead sekcie". */ .wp-block-post-excerpt.egrant-post-lead { max-width: var(--wp--custom--measure, 552px); font-size: var(--wp--preset--font-size--medium); /* 22,4 */ font-weight: 600; line-height: 1.2; } .egrant-post-lead p { margin-block: 0; } /* * Obrázok, resp. gradientová plocha. Pomer 16 : 9 je z rámu (1024 × 576) * a drží sa pomerom, nie výškou — pri užšom okne sa plocha zmenší celá. * * Plochu pri článku bez obrázka dopĺňa `functions/BlogList.php`; tam je aj * odvodenie, prečo je gradient zvislý a z ktorých piatich farieb. */ /* * Selektor je `.egrant-post-cover`, nie `.wp-block-post-featured-image` — * ten istý blok je aj vo výpise blogu a tam má vlastný pomer i radius * (`core-query.css`). Triedu dáva šablóna pri článku s obrázkom a * `BlogList.php` pri gradientovej ploche, takže platí v oboch prípadoch. */ /* * 64 nad plochou nesie CSS, nie šablóna. Pri článku bez obrázka vyrába blok * `BlogList.php` a ten vracia vlastný markup — atribúty bloku, teda aj * `style.spacing.margin`, sa do neho nedostanú. Odmerané: s marginom * v šablóne vyšla medzera 32 (predvolený `blockGap`) namiesto 64. */ /* * Dvojtriedovo, nech to prebije `blockGap` — `:root :where(.is-layout-flow) > *` * z jadra dáva `margin-block-start: 32px` a jednotriedový selektor s ním má * zhodnú špecificitu (odmerané: medzera zostala 32). */ .wp-block-post-featured-image.egrant-post-cover { margin-top: var(--wp--preset--spacing--110); /* 64 */ margin-bottom: 0; } .egrant-post-cover, .egrant-post-cover img { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--wp--custom--radius--xl); /* 16 */ object-fit: cover; } /* * Prvý a posledný blok tela nesmú pridať vlastný margin — odstup nad telom * dáva šablóna (`single.html`), nie prvý odstavec. */ .egrant-post-body > .wp-block-post-content > :first-child { margin-block-start: 0; } .egrant-post-body > .wp-block-post-content > :last-child { margin-block-end: 0; } /* * ── Telo článku ────────────────────────────────────────────────────────── * * Odmerané 2026-09-15 proti rámom `12880 detail-clanku` a `375 detail-clanku` * (ink-to-ink, rámy normalizované na 1280 / 375 design px). * * Do tejto chvíle telo nemalo vlastné štýly vôbec a brali sa UA hodnoty. Na * dnešnom obsahu to nebolo vidieť všade — ani jeden z 12 článkov nemá `h2` * ani `h3` — takže časť z toho je poistka na prvý článok, ktorý ich bude mať. */ /* * 🔴 Nadpis v tele mal 64 px, teda toľko, čo H1 stránky — v stĺpci 552 to * vyzeralo ako druhý titulok. Rám mu dáva 22,4 (mobil 19,6), čo bolo presne * preset `medium`; ten je dvojhodnotový a na mobile klesá sám, takže tu * netreba media query. * * ⚠️ Od 2026-09-15 má `medium` na mobile 17,6, nie 19,6 (rámy Produktu, O nás * a Kontaktu proti rámu Úvodu — pozri `theme.json`). Nadpis v tele tým na * mobile klesol z 19,6 na 17,6, hoci rám `375 detail-clanku` meria 19,6. * Nie je to vidieť — ani jeden z 12 článkov nadpis v tele nemá — a vlastnú * hodnotu sem nedávam bez Lukášovho rozhodnutia. */ .egrant-post-body h2, .egrant-post-body h3 { font-size: var(--wp--preset--font-size--medium); /* 22,4 → mobil 17,6 */ font-weight: 700; line-height: 1.2; margin-block-start: var(--wp--preset--spacing--110); /* 64 */ margin-block-end: var(--wp--preset--spacing--70); /* 32 */ } /* * Odrážky. Dve odchýlky naraz: položky nemali medzi sebou nič (rám 24, * odmerané na troch medzerách nezávisle) a zoznam bral UA odsadenie 40, * kým rám má guľôčku 9 od okraja stĺpca a text 26–28. Na mobilnom stĺpci * 335 je tých 12 px rozdielu ukradnutá šírka riadku. */ .egrant-post-body ul, .egrant-post-body ol { padding-inline-start: 28px; } .egrant-post-body li + li { margin-block-start: var(--wp--preset--spacing--60); /* 24 */ } /* * Po zozname nechá rám väčšiu medzeru než medzi odstavcami — 64 (mobil 56), * nie 32. Nie je to teda len `blockGap`, ktorý by sa uplatnil sám. */ .egrant-post-body > .wp-block-post-content > ul + *, .egrant-post-body > .wp-block-post-content > ol + * { margin-block-start: var(--wp--preset--spacing--110); /* 64 */ } /* Obrázok v obsahu má ten istý radius ako úvodná plocha. */ .egrant-post-body .wp-block-image img { border-radius: var(--wp--custom--radius--xl); /* 16 */ } /* * ── Zbaliteľné bloky a callout boxy v tele — návrh pre ne kresbu nemá ───── * * Dva útvary prenesené zo živého webu (`content/posts/vyhladavanie.php`): * šesť `core/details` (akordeón z Elementora, päť z nich má nadpis bez textu) * a dve `core/group` s dvojicou „nadpisok + text" — „Pozor!" a „Tip" (widget * Creative Addons). Ani jeden z nich nie je v žiadnom ráme, takže pre ne * neexistuje odmeraná hodnota. * * Rozhodol Lukáš (2026-09-17): **použije sa štýl, ktorý web už má** — žiadna * nová kresba, žiadny nový token, žiadna nová farba. Je to tá istá cesta, * akou sa v ten istý deň uzavrela hláška formulára * (`docs/15-nalezy-z-merania-2026-09-15/05-kontakt.md`, „Hláška formulára"). * * 🔴 Farby calloutov `~#FADDD5` a `~#D3D8F5` z `docs/11-design-tokeny/08-rozdiely-voci-02.md` * sa tu **nepoužívajú** — sú odčítané zo snímky, nie potvrdené, a sú * samostatná otvorená otázka. Akcentová linka nižšie nepotrebuje ani jednu * z nich. * * Všetko v tejto sekcii visí na `.egrant-post-body`, teda na triede, ktorú * dáva **len `templates/single.html`**. `wp_enqueue_block_style` pripojí tento * súbor aj na stránkach (`core/post-content` je aj v `page.html`) a tie sú * plné grúp — bez tej triedy by linku dostali všetky. */ /* * Zbaliteľný blok dostáva **obrysovú pilulku zbaľovača** — ten istý tvar, aký * má tlačidlo `egrant/collapsible-list` a pilulka pod mriežkou kariet. Hodnoty * sú odmerané, nie vymyslené: * `docs/11-design-tokeny/17-obrysova-pilulka-zbalovaca-odmerane-2026-09-15.md` * — výška **38**, obrys **2 px** `ink`, priehľadné pozadie, radius pilulka, * padding **8 / 20**, typografia presetu `button` (14,4 / 600 / 0,2). * * Je to štvrtý zápis tých istých vlastností (ďalšie tri sú v `card-grid`, * `collapsible-list` a vyššie v pilulke rubriky). Nespájajú sa, lebo každý žije * v inom bundli — čísla majú jeden zdroj, `docs/11`. * * ⚠️ Pilulka popisok **zmenšuje** zo zdedených 17,6/500 na 14,4/600. Je to * jeden balík, nie výber: tých 38 stojí práve na 14,4 × 1,25 + 2 × 8 + 2 × 2. * Držať 17,6 a zároveň 38 nejde. * * 🔴 Obrys si tie 2 px berie **z paddingu, nie navyše** — preto `padding-block` * 8 a nie 10 z `theme.json`. `box-sizing` to nespraví, výška pilulky je * automatická (odvodenie je v `docs/11`). * * Šírka je **podľa textu** (`inline-flex`), nie na celú šírku stĺpca — tak to * má pilulka všade inde. Dlhý popisok sa vnútri zlomí a pilulka tým vyrastie; * 38 platí pre jeden riadok. */ .egrant-post-body .wp-block-details > summary { display: inline-flex; align-items: center; /* 8 medzi popiskom a 16 chevronom — tá istá medzera, akú má chevron v dlaždici funkcionalít (`pattern-feature-tiles.css`). */ gap: var(--wp--preset--spacing--20); /* 8 */ padding: 8px var(--wp--preset--spacing--50); /* 8 / 20 */ border: 2px solid var(--wp--preset--color--ink); border-radius: var(--wp--custom--radius--pill, 9999px); background: transparent; font-size: var(--wp--preset--font-size--button); /* 14,4 */ font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; color: var(--wp--preset--color--ink); list-style: none; } /* * Natívny `▶` sa zhasína **trikrát a zámerne**: `list-style: none` vyššie, * `::marker` pre Chrome a Firefox a `::-webkit-details-marker` pre staršie * Safari, ktoré `::marker` na `summary` nepozná. Sú to tri samostatné * pravidlá, nie jeden zoznam selektorov — prehliadač, ktorý jeden z nich * nepozná, zahodí celé pravidlo, a v zozname by s ním zahodil aj ostatné. */ .egrant-post-body .wp-block-details > summary::marker { content: ""; } .egrant-post-body .wp-block-details > summary::-webkit-details-marker { display: none; } /* * Chevron je **ikona, ktorú web už má** — export z Figmy `ic-arrow.svg` * (16 × 16, výplňový ľavý chevron) vložený ako maska s `currentColor`, presne * ako šípky pása D (`pattern-system-preview.css`) a stránkovanie blogu * (`core-query.css`). Maska, nie ``: export má farbu natvrdo, takto berie * farbu popisku. * * Zbalené mieri **dolu** (−90°), otvorené **hore** (90°) — je to jeden tvar * otočený, takže sa tie dva stavy nemôžu rozísť. * * 🔴 **Bez prechodu, a je to zámer.** Animovaný `transform` si v Chrome zakladá * vlastnú vrstvu a text v okolí do nej prekreslí **šedým** vyhladzovaním; keď * vrstvu po dobehnutí zahodí, prekreslí ho späť na subpixelové, takže popisky * ostatných položiek na jeden snímok prebliknú — odmerané na páse K * (`pattern-accordion.css`, „Prechod ide na `width` a `height`"). Tam sa to * obišlo animovaním rozmerov; rotáciu takto obísť nejde, preto sa neanimuje. */ .egrant-post-body .wp-block-details > summary::after { content: ""; flex-shrink: 0; width: 16px; height: 16px; background-color: currentColor; -webkit-mask-image: url('data:image/svg+xml,'); mask-image: url('data:image/svg+xml,'); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; transform: rotate(-90deg); } .egrant-post-body .wp-block-details[open] > summary::after { transform: rotate(90deg); } /* * Callout boxy „Pozor!" a „Tip" dostávajú **akcentovú linku** — 3 px zvislá * linka zľava a **12** odsadenie za ňou. Je to jediný tvar vysadeného textu, * ktorý web má: `--wp--custom--border--accent` používajú `pattern-spec-list.css`, * `pattern-integrations.css` aj `pattern-contact-person.css`, tie isté 3 px * `ink` má karta v `card-grid` a zvislá linka pása J, a 12 je `spacing--30` — * tá istá hodnota za linkou. Rovnaké rozhodnutie a rovnaké dva tokeny ako * hláška formulára (`docs/15-nalezy-z-merania-2026-09-15/05-kontakt.md`). * * ⚠️ **Kontrakt s obsahom: grupa na najvyššej úrovni tela článku JE callout * box.** Tie dve grupy nemajú v obsahu ani jednu vlastnú triedu a dopisovať im * ju nejdeme (obsah sa nemení), takže ich nemá čo iné zacieliť. Keby do tela * článku pribudla grupa, ktorá je len obal rozloženia, musí toto pravidlo * dostať `:not(…)` — inak dostane linku aj ona. Dnes sú grupy v tele jediného * článku z dvanástich a sú to práve tie dve. * * `border-inline-start`, nie `border-left`: box je bežný text a preklad do * jazyka písaného sprava ho má prehodiť s ním. (Vzory vyššie majú `border-left` * preto, že im linka drží **stĺpec rozloženia**, nie čítanie — ten istý rozdiel * je zapísaný pri hláške formulára.) * * ⚠️ Šírku boxu drží `box-sizing: border-box` z jadra (`blocks/group/style.css`), * takže linka aj odsadenie idú **dovnútra** 552 — linka sedí na hrane stĺpca * a vysadí sa text, nie box. Bez toho by box pretiekol o 15 a celý sa posunul * doľava, lebo layout jadra mu dáva `max-width`, nie `width`. * * Špecificita je (0,3,0) proti (0,2,0), ktorú má `:root :where(.wp-block-group)` * z `theme.json` — o výsledku teda nerozhoduje poradie stylesheetov. */ .egrant-post-body > .wp-block-post-content > .wp-block-group { border-inline-start: var(--wp--custom--border--accent, 3px solid #141414); padding-inline-start: var(--wp--preset--spacing--30); /* 12 */ } /* * ── Mobil ──────────────────────────────────────────────────────────────── * * Rám sťahuje na 375 celý zvislý rytmus o 8 px: 32 → 24 a 64 → 56. Téma má * `spacingSizes` pevné v px, takže bez tohto nesie render desktopové čísla * všade. 900 je ten istý zlom, na ktorom prepína typografia. */ @media (max-width: 900px) { .egrant-post-body > .wp-block-post-content { --wp--style--block-gap: var(--wp--preset--spacing--60); /* 24 */ } .egrant-post-body > .wp-block-post-content > * { margin-block-start: var(--wp--preset--spacing--60); /* 24 */ } .egrant-post-body > .wp-block-post-content > :first-child { margin-block-start: 0; } /* * Cez `> .wp-block-post-content >`, nie `.egrant-post-body h2` — inak to * prehrá so všeobecným pravidlom nad ním (0,2,0 proti 0,1,1) a nadpis * dostane 24 ako každý iný blok. Odmerané: 24 namiesto 56. */ /* * 🔴 Veľkosť sa musí zopakovať, lebo preset `medium` klesol 2026-09-15 * na mobile z 19,6 na **17,6** (rámy Produktu, O nás a Kontaktu), kým * rám `375 detail-clanku` chce pre nadpis v tele **19,6**. Nadpis tela * teda preset ďalej nesleduje — na desktope sú obe hodnoty 22,4, takže * sa rozchádzajú len tu. * * Dnes to vidieť nie je: ani jeden z 12 článkov nadpis v tele nemá. * Je to poistka na prvý, ktorý ho mať bude. */ .egrant-post-body > .wp-block-post-content > h2, .egrant-post-body > .wp-block-post-content > h3 { font-size: 19.6px; margin-block-start: 56px; margin-block-end: var(--wp--preset--spacing--60); /* 24 */ } .egrant-post-body > .wp-block-post-content > ul + *, .egrant-post-body > .wp-block-post-content > ol + * { margin-block-start: 56px; } .wp-block-post-featured-image.egrant-post-cover { margin-top: 56px; } .egrant-post-body { margin-block-start: var(--wp--preset--spacing--60) !important; /* 24 */ } /* * Lead je jediná vec, ktorú rám na mobile **nezmenšuje** — drží 22,4, * kým preset `medium` klesá na 19,6. Preto literál, nie preset. */ .wp-block-post-excerpt.egrant-post-lead { font-size: 22.4px; } /* * Riadkovanie titulku tu už nie je. H1 má na mobile 36 a rozteč riadkov 38, * ale od 2026-09-15 to rieši `theme.json` globálne pre `h1`/`h2` pod 900 * (`calc(38 / 36)`) — to isté našli dvaja agenti nezávisle aj na Produkte. */ .egrant-post-title { margin-top: var(--wp--preset--spacing--50) !important; /* 20 */ } } /* * ── Tabuľka a zoznamy — celý web, nie len detail článku ─────────────────── * * Tento súbor je zavesený aj na `core/post-content` (`functions/BlockStyles.php`), * a ten blok je v `templates/single.html` **aj v `templates/page.html`** — * takže je na každom článku a na každej stránke. Pravidlá pod týmto nadpisom * preto **nie sú pod `.egrant-post-body`**: tabuľka a zoznamy sú vec témy, * nie jednej šablóny (#48). * * Odmerané na rámoch `1280 stylovanie` (snímka 09-11 13-23-33) a * `375 stylovanie` (13-24-15). Mierka: desktop 1157 px na 1280 návrhových, * mobil 489 px na 335 obsahových. Overené proti linke tabuľky, ktorá vyšla * 551,6 — teda `custom.measure` na pol pixela. */ /* * Tabuľka. Rám ju kreslí ako **čistý riadkový register**: bez pozadia buniek, * bez zvislých liniek, bez vodorovnej výplne. Pod každým riadkom vodorovná * linka, nad prvým riadkom nie. * * šírka 552 = `measure` (odmerané 551,6; mobil 335, plná šírka) * linka 2 px `ink`, pod každým riadkom (mobil to isté) * rozostup riadkov 34 desktop, 41,1 mobil * veľkosť písma 14,4 vo všetkých stĺpcoch (`button`, je v `theme.json`) * rez stĺpec 1 a hlavička 600, ostatné 500 * ľavé hrany stĺpcov 0 / 192 / 384 desktop, 0 / 122,4 / 244,9 mobil * * 🔴 **Hrúbka 2 px nemá token a je to vedomé.** `border.rule` je 0,8 px * v `surface-2`, `border.accent` 3 px v `ink` — ani jeden nesedí. Píše sa * preto literálom; token by vznikol pre jediné miesto. * * ⚠️ **Šírky stĺpcov sa z rámu určiť nedajú.** 192 na desktope a 122,4 na * mobile nie je ani v jednom prípade tretina tabuľky a tretí stĺpec je v oboch * užší než prvé dva — pravidlo za tým nie je. Tabuľka preto beží na * automatickom layoute (`has-fixed-layout` sa nepíše) a šírky určuje obsah. * * ⚠️ Linka pod **posledným** riadkom je z rámu `stylovanie`, kde ju majú * všetky tri riadky. Rám `1280 vseobecna-stranka` má linku len pod hlavičkou * a pod posledným riadkom nie — odmerané, je tam jediná. Platí `stylovanie`: * je to vzorkovnica, teda rám o štýle, nie o jednej stránke. */ .wp-block-table { max-width: var(--wp--custom--measure); /* 552 */ } /* * 🔴 **`separate`, nie `collapse` — a rozhoduje to o celom pixeli.** Jadro dáva * `collapse`, pri ktorom si zlúčenú 2 px linku delia obe susedné bunky po * jednom pixeli, takže jednoriadkový riadok vyjde 18 + 14 + 1 = **33**. * Rám meria **34**. So `separate` a nulovým `border-spacing` je linka celá * vnútri svojej bunky (18 + 14 + 2 = 34) a na mobile 18 + 21 + 2 = **41**, * čo je rámových 41,1. Zdvojenie liniek nehrozí — bunky majú len spodnú. * * 🔴 Selektor musí byť `figure.wp-block-table > table` — **typ `figure` je * to, čo rozhoduje**, nie ten `>`. Kombinátor do špecificity neprináša nič, * takže `.wp-block-table > table` má tých istých (0,1,1) ako jadrové * `.wp-block-table table` a vyhráva ten, kto je v `` nižšie. A to sa * líši od stránky k stránke: na detaile článku je jadro za témou, na stránke * pred ňou — odmerané, tá istá tabuľka vyšla raz 34 a raz 33. S `figure` * je to (0,1,2) a poradie už nerozhoduje. */ figure.wp-block-table > table { border-collapse: separate; border-spacing: 0; width: 100%; } /* * Jadro dáva `thead` spodnú linku 3 px a `tfoot` hornú * (`wp-includes/blocks/table/style.css`). Hlavičkové pravidlo rám nemá — * hlavička má tú istú 2 px linku ako každý iný riadok, a tú nesú bunky. */ .wp-block-table table thead, .wp-block-table table tfoot { border: 0; } /* * Dve triedy nestačia: jadro má na bunky `border: 1px solid; padding: .5em` * so špecificitou (0,1,1), takže selektor musí byť vyšší. Preto `table` * v strede — (0,1,2). * * Vodorovná výplň je vľavo nula, aby text stĺpca začínal presne na hrane * stĺpca, ako to rám meria. Vpravo je 20, inak by sa dlhý text zrazil so * susedným stĺpcom; rám takú hodnotu nehovorí, lebo v ňom je obsah krátky. */ .wp-block-table table td, .wp-block-table table th { border: 0; border-bottom: 2px solid var(--wp--preset--color--ink); padding: 7px var(--wp--preset--spacing--50) 7px 0; /* 7 / 20 */ font-weight: 500; text-align: left; vertical-align: top; } .wp-block-table table td:last-child, .wp-block-table table th:last-child { padding-right: 0; } /* * Prvý stĺpec je 600 — v hlavičke aj v tele. `th` prichádza od prehliadača * s `bold` (700), takže sa musí prepísať aj tam, kde 600 už platí od `td`. */ .wp-block-table table th, .wp-block-table table td:first-child, .wp-block-table table th:first-child { font-weight: 600; } /* * Číselné zoznamy a odrážky. Rám ich kreslí ako **jeden odsadzovací systém**: * odrážka aj číslo majú ten istý zvislý stred 12,5 od okraja obsahu a text * v oboch začína na 26,9 (mobil 26,0–28,1). * * `:where()` je tu zámerne — zráža špecificitu na (0,0,0), takže * `.egrant-post-body ul, ol` (0,1,1) vyššie v tomto súbore ďalej vyhráva * a **telo článku si drží svojich 28 a medzeru 24**, odmeranú na ráme * `375 detail-clanku`. Bez `:where()` by sa tie dve sady pravidiel bili * o to isté miesto a rozhodovalo by poradie v súbore. * * ⚠️ **Riadkovanie na mobile sa tu nerieši.** Rám meria 22,02, téma dá 20,75 — * ale nie preto, že by zoznam mal iné riadkovanie: rám sádže telo na mobile * na 17,6, kým preset `small` je tam 16,6. Je to vec presetu (#50), nie * zoznamu, a oprava na jednom mieste by rozišla zoznam so zvyškom textu. */ :where(.wp-block-list) { padding-inline-start: 27px; /* odmerané 26,9 */ } /* * 🔴 **Medzera medzi položkami je pod triedou stránky, nie globálna — a je to * nález z merania, nie opatrnosť.** Globálne (`:where(.wp-block-list) li + li`) * pridala 12 px dvom hotovým miestam, ktoré si odstup nastavujú inak: * * `/` — zoznam s fajočkami v hero (`hero/style.scss`, `li { display: flex }`) * mal medzi položkami 0, po zmene 12 * `/produkt/` — `egrant-spec-list` stojí na `padding-block: 7` a linke * 0,8 px na každej položke (`pattern-spec-list.css`), takže 12 px * margin by ten súvislý register roztrhal * * Odmerané pred opravou: `li:nth-child(2)` malo na oboch `margin-block-start: * 12px` namiesto `0px`. Ani jedno z tých dvoch miest odstup nikdy * nedeklarovalo — spoliehali sa na to, že ho nikto nedá. Odsadenie * (`padding-inline-start` vyššie) globálne zostať môže: obe si ho prepisujú * samy (0 a 12), rovnako ako telo článku (28). * * ⚠️ **Hodnotu rám nerozsúdi.** `1280 stylovanie` meria 12,2, `375 stylovanie` * 15,1–15,8 pre tú istú vec — jedno z tých čísel je nepresnosť kresby. Platí * desktopových 12; mobilná výnimka sa nepíše, kým to niekto nerozhodne. */ .egrant-general-body li + li { margin-block-start: var(--wp--preset--spacing--30); /* 12 */ } /* Šablóna „Textová stránka": Lead má šírku stĺpca (640), nie svojich 552. */ .wp-block-post-content.egrant-general-body { --wp--custom--measure: 640px; } /* * Mobilná výplň buniek. Rozostup riadkov je na `375 stylovanie` 41,1 proti * 34 na desktope, pri tom istom písme 14,4 a tej istej 2 px linke — * z toho vychádza 10,5 hore a 10,5 dole namiesto 7/7. */ @media (max-width: 900px) { .wp-block-table table td, .wp-block-table table th { padding-top: 10.5px; padding-bottom: 10.5px; } }