/* * Pás F — Integrácie. Vzor zo core blokov, nie vlastný blok. * * Celá sekcia je `core/group` → `core/heading` + `core/paragraph` (lead) + * `core/columns`, a v každom stĺpci titulok, položky ako `core/group` * a `core/separator` medzi nimi. Vlastný blok tu nie je čo robiť — jadro * pokrýva všetko vrátane tej vodorovnej linky. * * Vzor nemá typ bloku, na ktorý by sa štýl dal zavesiť, takže tento súbor * visí na `core/group` (`functions/BlockStyles.php`). Tým sa dostane na * frontend aj do editora — stylesheet témy editor nenačítava. * * ── Vzhľad stojí na polohe, nie na triedach na odstavcoch ────────────────── * * Do 2026-09-10 mal každý odstavec v páse svoju rolu napísanú ako trieda * (`__col-title`, `__entry-name`, `__entry-desc`) a redaktor ju musel zadať * v *Pokročilé → Ďalšia trieda CSS*. Krehké to bolo dvojako: dá sa preklepnúť, * a hlavne si na ňu redaktor musí vzpomenúť — duplikovaná alebo od nuly * postavená položka vyzerala zle, kým triedu niekto nedopísal. * * Rola je pritom daná **polohou** a tú vie CSS prečítať samo (zadal Lukáš, * 2026-09-10): * * - titulok stĺpca = **prvý** odstavec v `.egrant-integrations__col` * - názov položky = **prvý** odstavec v `.egrant-integrations__entry` * - popis položky = **ďalšie** odstavce v tej istej položke * * Preto `:first-of-type` a nie `:first-child`: rola patrí prvému *odstavcu*, * aj keby pred ním niekto vložil obrázok alebo nadpis. * * Štruktúrne triedy (`egrant-integrations`, `__col`, `__list`, `__entry`) * zostávajú — na tie sa selektory vešajú a bez nich by pás nemal kde začať. * Sedia na blokoch, ktoré redaktor nevytvára po jednom, takže sa vzoru * a obsahu držia samy. * * ── A tá istá rola sa dá aj vybrať ───────────────────────────────────────── * * Súbežne s polohou existujú tri blokové štýly pre `core/paragraph`, aby tá * istá rola šla vybrať z panela *Štýly*: `integrations-col-title`, * `integrations-name` a `integrations-desc` (registrácia * `functions/BlockStyles.php`, **vzhľad `theme.json`**, * `styles.blocks.core/paragraph.variations`). * * 🔴 **Hodnoty sú preto zapísané dvakrát a musia si zostať rovné.** Tu podľa * polohy, v `theme.json` podľa vybraného štýlu; zdroj oboch je to isté * meranie z Figmy nižšie. Keď sa jedno zmení, druhé musí ísť s ním — inak * bude ten istý odstavec vyzerať inak podľa toho, odkiaľ vzhľad prišel. * * ⚠️ Keď sa tie dve cesty **nezhodnú**, vyhrá poloha. WordPress vypisuje * variácie ako `:root :where(p.is-style-…)`, čo je vďaka `:where()` * špecificita (0,1,0), kým selektory tu majú (0,1,1) a (0,2,1). Redaktor teda * neprebije polohu tým, že prvému odstavcu položky vyberie „Popis integrácie". * Je to známy dôsledok, nie chyba: poloha je pravidlo pásu a štýl je na to, * aby tú istú sadzbu dostal odstavec, ktorý v tej polohe nestojí. * * ── Odkiaľ sú hodnoty ────────────────────────────────────────────────────── * * Zo snímky `2026-09-01 13-25-33` (rám `1280 Uvod (dizajn 1024)`), meranej * pomerovou metódou: rám 1951 displayed px → 1280 design px. Veľkosti písma * riešil solver z metrík Saans (per-em ink profil), nie odhad z výšky inku. * Časť potvrdil Lukáš priamo z Figmy (2026-09-10). * * ── Padding 15/15, aj keď v CSS stojí 12 vľavo ───────────────────────────── * * Vo Figme je padding stĺpca **15 vľavo aj vpravo** (Lukáš, 2026-09-10) a tých * 15 sa meria **od hrany rámu, ktorá 3px linku zahŕňa**. V CSS to isté píšeme * ako `border-left: 3px` + `padding-left: 12px` — text potom začína 15 od * vonkajšej hrany linky, presne ako v dizajne. Odmerané: ink textu začína * konzistentne 15,1 od linky (linka na x 128,6 široká 2,62, text na 143,7). * * 🔴 Prototyp má `border-left: 3px` **a k tomu** `padding: 0 15px`, čím text * odsadí na 18. Nie je zlá tá hodnota, ale to, že ju pripočítal k linke * namiesto toho, aby ju do nej započítal. Rovnaká konvencia platí pri karte. */ .egrant-integrations__col { /* Stĺpce stoja na tej istej trojici ako mriežka kariet — odmerané linky na x 128,6 / 473,7 / 818,8, teda 3 × 333,33 s gapom 12. Gap dáva `blockGap` na `core/columns` v obsahu. */ border-left: var(--wp--custom--border--accent, 3px solid #141414); padding: 0 15px 0 12px; box-sizing: border-box; } /* * Titulok stĺpca — prvý odstavec v stĺpci. * * 17,6/21/600/0,2 — potvrdil Lukáš z Figmy, a solver dal na dvoch stĺpcoch * nezávisle 17,57 a 17,55. Je to tá istá veľkosť ako názov karty, takže * preset „Základný". * * ⚠️ Ten preset sa na mobile láme na 16,6. Pri názve karty je to odmerané, tu * **nie je** — mobilný rám Integrácií som nemeral. Ak sa ukáže, že titulok * stĺpca má na mobile zostať 17,6, patrí sem override ako pri číselných * kartách. Rovnaký override by vtedy potrebovala aj variácia * `integrations-col-title` v `theme.json` — preto je aj tam ten **preset** * a nie literál 17,6: obe cesty musia mať aj mobilnú hodnotu rovnakú. * * Stĺpec má presne dve deti, titulok a zoznam, takže `> p:first-of-type` je * jednoznačné. */ .egrant-integrations__col > p:first-of-type { font-size: var(--wp--preset--font-size--small, 17.6px); line-height: 21px; font-weight: 600; letter-spacing: 0.2px; /* 64 pod titulkom (potvrdil Lukáš) nesie `blockGap` stĺpca v obsahu, nie margin tu — flow layout jadra dáva svojim deťom `margin-block: 0` selektorom `.wp-container-… > *` a to je (0,2,0), teda viac než trieda titulku. Odmerané: s marginom vyšlo 32 namiesto 64. */ } /* * Položka: názov a jeden alebo viac popisných riadkov. * * Vnútri položky **nie je žiadny odstup** — riadky sedia na rytme 18 * z `line-height`. Odmerané: ink jednotlivých riadkov 844,4 → 862,1 → 880,5, * teda presne 18 medzi sebou. */ .egrant-integrations__entry { /* Ukotvenie pre natiahnutú kliknutelnú plochu odkazu, viď nižšie. */ position: relative; } /* * Názov aj popis sú 14,4/18/0,2 a líšia sa **len tučnosťou**, takže spoločná * sadzba je na všetkých odstavcoch položky a rozdiel nesie jedno pravidlo * nižšie. Popis tým dostane 500 a názov si ho prepíše na 600. * * `font-size` je preset `button` — „Tlačidlo a drobný text (14,4)", teda * krok škály, nie len tlačidlo (`docs/11-design-tokeny/16`). To isté má * nadpis v `pattern-logos.css` a zoznam v `pattern-spec-list.css`. * * `font-weight: 500` a `color` sú zhodné s globálom v `theme.json` * (`styles.typography.fontWeight`, `styles.color.text`), takže dnes nič * nemenia. Sú tu napísané zámerne: sadzba položky nemá ticho závisieť od * toho, že sa globál nezmení. */ .egrant-integrations__entry > p { font-size: var(--wp--preset--font-size--button); /* 14,4 */ line-height: 18px; font-weight: 500; letter-spacing: 0.2px; color: var(--wp--preset--color--ink, #141414); } .egrant-integrations__entry > p:first-of-type { font-weight: 600; } /* * Deliaca linka medzi položkami. * * Margin linky je **8 hore aj dole** (potvrdil Lukáš z Figmy; odmerané na * snímke 7,7 a 7,8). Linka teda sedí **na strede** medzery medzi položkami, * nie na jej konci. * * Drží to `blockGap: 8` (`spacing|20`) na zoznamu v obsahu, **nie margin tu**. Flow * layout jadra dáva `margin-block-start` každému súrodencovi okrem prvého, * takže oddeľovač dostane 7,6 nad sebou a nasledujúca položka ďalších 7,6 — * dohromady 7,6 + 0,8 + 7,6 = 16. Margin tu by sa s tým pravidlom bil * o rovnakú špecificitu (0,2,0 proti 0,2,0) a rozhodovalo by poradie * načítania, čo je zbytočne krehké. 7,6 nie je na spacing škále zámerne — * je to odmeraná konstanta, nie voľba redaktora. * * Šírka linky je paddingový box stĺpca: odmerané 143,7 → 445,5 v prvom * stĺpci a 833,9 → 1135,7 v treťom, teda 15 od linky stĺpca vľavo aj vpravo. * Vychádza to samo z `padding` na stĺpci, netreba to nastavovať. */ .egrant-integrations .wp-block-separator { border-top: var(--wp--custom--border--rule, 0.8px solid #e4e2dd); border-right: 0; border-bottom: 0; border-left: 0; /* Jadro dáva oddeľovaču `max-width: 100px` v štýle „wide“ aj v základnom — tu má ísť cez celú šírku zoznamu. */ max-width: none; width: 100%; opacity: 1; } /* * Položky s odkazom (stĺpce „eGovernment a ekonomika“ a „Dokumenty a granty“). * * Odkaz je v odstavci s názvom, nie na celej položke — `core/group` `href` * nemá. Kliknutelná plocha sa ale dá natiahnuť na celú položku, takže * chovanie z prototypu zostáva: „CES“ sú tri znaky, čo je príliš malý cieľ. * * Rozdelenie pseudoelementov: `::before` je tá natiahnutá plocha (je mimo * toku, takže flex riadok neovplyvní) a `::after` je šípka, ktorá musí ostať * za textom. * * Šípku nesie **poloha, nie blokový štýl** — je to vlastnosť odstavca * s odkazom v položke, a `theme.json` pseudoelementy pre bloky nepozná. * Odstavec, ktorý dostane štýl „Názov integrácie“ mimo položky, teda šípku * nemá ani keď v ňom odkaz je. Je to zámer: šípka hlási externý odkaz * v zozname integrácií, nie kdekoľvek v texte. */ .egrant-integrations__entry > p:first-of-type a { display: inline-flex; align-items: center; /* 4 medzi textom a šípkou — potvrdil Lukáš z Figmy. */ gap: 4px; text-decoration: none; color: inherit; transition: color var(--wp--custom--transition--base, 0.2s ease); } .egrant-integrations__entry > p:first-of-type a::before { content: ''; position: absolute; inset: 0; } .egrant-integrations__entry > p:first-of-type a::after { content: ''; /* 12,8 × 12,8 — potvrdil Lukáš z Figmy. Export `ic_external-link.svg` má plátno 13 a kresba v ňom zaberá 8,25 jednotky, takže pri 12,8 je viditeľná šípka 8,1 — a to je presne to, čo je odmerané na snímke (7,9 pri „SIGNI“, 8,5 pri „GrACE“). */ width: 12.8px; height: 12.8px; flex-shrink: 0; /* Maska a nie ``: export má `stroke="#141414"` natvrdo, takže by pri hoveri zostal čierny za zosvetleným textom. S maskou berie šípka `currentColor` a bledne s ním. */ 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; } /* * Hover: názov aj popis zosvetlia na `muted`, aby celá položka čítala ako * jeden cieľ. Súrodenecký selektor a nie `:has()` na položke — popis * nasleduje za názvom len pri položkách, ktoré odkaz naozaj majú. */ .egrant-integrations__entry > p:first-of-type:has(a:hover), .egrant-integrations__entry > p:first-of-type:has(a:focus-visible) { color: var(--wp--preset--color--muted, #6b6b6b); } .egrant-integrations__entry > p:first-of-type:has(a:hover) ~ p, .egrant-integrations__entry > p:first-of-type:has(a:focus-visible) ~ p { color: var(--wp--preset--color--muted, #6b6b6b); }