/* * Karta kontaktnej osoby — stránka Kontakt, stĺpec „Ozvite sa priamo". * Vzor zo **core blokov**, nie vlastný blok: `core/group` → `core/image` * + tri `core/paragraph`. V `docs/06` je to pattern B11 „contact-person". * * Štýl visí na `core/group` (`functions/BlockStyles.php`) — vzor nemá typ * bloku, na ktorý by sa dal zavesiť, a stylesheet témy editor nenačítava. * * ── Odmerané na ráme `1280 Kontakt` (snímka 09-11 13-18-47) ─────────────── * * Mierka snímky: rám 912 px = 1280 dizajnových, teda 1,4035 dizajnu na pixel. * Overené na obsahovom stĺpci — ľavá hrana vyšla presne na 128. * * zvislá linka x 128–130 → **3 px**, a začína presne na hrane * obsahového stĺpca (rovnaká konštanta ako `border-left: 3` * v `docs/03`) * výška linky 240 — od hornej hrany fotky po spodok telefónu * fotka ø **64**, kruh (`is-style-rounded`) * text od linky 145 − 128 = **17 → 16** (fotka aj text zarovnané rovnako) * fotka → meno medzera **40** (spodok fotky 610, ink mena 726… mínus * half-leading; pri `small`/1,25 to vychádza na 40) * * Linku nesie `border-left` na grupe, nie pseudoprvok: grupa má výšku obsahu, * takže linka rastie s ním a netreba ju nikde dopočítavať. */ /* * Dve triedy, nie jedna: `:root :where(.wp-block-group)` z `theme.json` má * (0,1,0) a pri rovnakej špecificite vyhráva, lebo globálne štýly stoja * v `` za štýlmi blokov. `border-left` prešiel (jadro ho nenastavuje), * `padding-left` nie — odmerané, vychádzalo 0. * * Fotka je hore, text dole a medzi nimi je prázdno: v ráme má linka **240** * a fotka s textom sú na jej koncoch. `margin-block-end: auto` to drží bez * magickej medzery — keď text narastie, karta rastie s ním. */ /* * Zvislý rytmus stránky Kontakt: **64 pod H1 a 64 pod leadom na desktope, * 56 na oboch miestach pod 900** (Lukáš, 2026-09-15). * * Mobilná hodnota je **54, nie 56** — z Figmy vyšlo 56, ale rozdiel sú 2 px * a `spacing|100` (54) je „rytmus sekcií", ktorý drží zvyšok webu. Radšej * na škále než o dva pixely presnejšie mimo nej (rozhodol Lukáš, 2026-09-15). * * Je to v CSS a nie v atribútoch blokov zámerne: mobilnú hodnotu odstupu bloku * `theme.json` vyjadriť nevie — media query pozná len `styles.css`, kde sedí * typografia. Inline `style` z bloku by sa navyše nedal prebiť ničím okrem * `!important`. */ .egrant-contact-lead.wp-block-group, .egrant-contact-cols.wp-block-columns { margin-block-start: var(--wp--preset--spacing--110); /* 64 */ } @media (max-width: 900px) { .egrant-contact-lead.wp-block-group, .egrant-contact-cols.wp-block-columns { margin-block-start: var(--wp--preset--spacing--100); /* 54 */ } } .egrant-contact-person.wp-block-group { display: flex; flex-direction: column; /* * Grupa je v markupe `layout: default`, nie `constrained`. Constrained * dáva deťom `margin-inline: auto`, a `margin: auto` na flex položke * prebije `align-items` — fotka potom sedí na strede (odmerané: x 341 * namiesto 143). `align-items` tu drží deti pri ľavej hrane. */ align-items: flex-start; min-height: 240px; border-left: var(--wp--custom--border--accent, 3px solid #141414); padding-left: var(--wp--preset--spacing--30); /* 12px — odmerané 143 − 131 */ } /* * Fotka: rozmer aj kruh sú **v CSS, nie v atribútoch bloku**. * * Skúšal som to cez `width`/`height`/`scale` na `core/image` a editor blok * odmietol — „Blok obsahuje neočakávaný alebo nesprávny obsah". Uložený markup * sa musí presne zhodovať s tým, čo vyrobí `save()` jadra, a ručne písaný * `is-resized` s inline `style` sa s ním nezhodoval. Obrázky, ktoré v tomto * repe fungujú (`o-nas.php:121`), majú v atribútoch len `id`, `sizeSlug` * a `className`, a rozmer si berú zo štýlu — tak to robíme aj tu. * * `alt` je prázdny zámerne: meno stojí hneď pod fotkou ako text, takže * čítačka by ho inak prečítala dvakrát. */ .egrant-contact-person .egrant-contact-person__photo { margin-block-start: 0; margin-block-end: auto; } .egrant-contact-person .egrant-contact-person__photo img { display: block; width: 64px; height: 64px; object-fit: cover; border-radius: 50%; } /* * Meno, e-mail aj telefón — **17,6 / 21 / 600 / 0,2** (Lukáš z Figmy, * 2026-09-15). Veľkosť je preset `small`, ktorý je presne 17,6; prestrkanie * 0,2 sa dedí z roota (`styles.typography` v `theme.json`), takže sa nepíše. * * Riadkovanie je **literál 21**, nie pomer: root má 1,25, čo by pri 17,6 dalo * 22. Odmerané na ráme `1280 Kontakt` — rozteč riadkov mena, mailu a telefónu * vyšla 21,1 a 21,1. * * ⚠️ Literál platí len na desktope — mobilnú vetvu má na konci súboru. Pod 900 * klesne `small` na 16,6, ale literál by nechal rozteč na 21; rám `375 Kontakt` * má **23,2 = 16,6 × 1,4**. * * Váha 600 je na všetkých troch riadkoch. Že e-mail a telefón vyzerajú ľahšie, * robí farba (`neutral`), nie rez. */ .egrant-contact-person .egrant-contact-person__name, .egrant-contact-person .egrant-contact-person__line { margin-block: 0; font-size: var(--wp--preset--font-size--small); /* 17,6 */ line-height: 21px; font-weight: 600; } /* * E-mail a telefón sú odkazy, ale v ráme nie sú podčiarknuté ani farebne * odlíšené — sú to údaje, nie navigácia. Podčiarknutie pribudne až pri hoveri, * aby bolo zrejmé, že sa dá kliknúť. */ .egrant-contact-person .egrant-contact-person__line { color: var(--wp--preset--color--neutral); } .egrant-contact-person .egrant-contact-person__line a { color: inherit; text-decoration: none; } .egrant-contact-person .egrant-contact-person__line a:hover, .egrant-contact-person .egrant-contact-person__line a:focus-visible { color: var(--wp--preset--color--ink); text-decoration: underline; } /* * Nadpisy stĺpcov — **22,4 / 27 / 600 / 0,2** (Lukáš z Figmy, 2026-09-15). * * Veľkosť je preset `medium`, ktorý je presne 22,4 — a pod 900 klesne na 19,6. * Že je to na mobile správne, sedí s rámom: v `375 Kontakt` má „Nechajte nám * odkaz" ink 17,6, čo pri Saans (cap + descender ≈ 0,94 em) vychádza na 18,7, * teda 19,6 a nie 22,4. Preset teda pokrýva obe šírky sám. * * Riadkovanie a prestrkanie sa musia prebiť: `elements.h2` v `theme.json` má * `lineHeight: 1` a `letterSpacing: -0,6`, lebo je nastavené pre **64 px * sekčné nadpisy** homepage. Pri 22,4 to dá zlepené riadky a stiahnuté písmo. * Váha 600 príde z `elements.heading` sama. * * ⚠️ `h3` má v téme presne tieto hodnoty (`medium` × 1,2 = 26,88 ≈ 27), takže * by stačilo použiť `h3` — **nerobíme to zámerne**: pod `h1` by to preskočilo * úroveň nadpisu a audit prístupnosti to hlási ako chybu. Sémantika je h2, * vzhľad je h3. */ .egrant-contact-cols .egrant-contact-cols__title { line-height: 1.2; /* 22,4 × 1,2 = 26,88 ≈ 27 */ letter-spacing: 0.2px; /* 40 na desktope; pod 900 je 32 — mobilná vetva je na konci súboru. */ margin-block-end: var(--wp--preset--spacing--80); /* 40 */ } /* * ⚠️ Stĺpce sa lámu na **900**, nie na jadrových 781. * * 900 je `md` z `_breakpoints.scss` — tam už prepína typografia aj hero, takže * layout sa má lámať na tom istom mieste. Jadro má vlastných 781 (`columns` * `isStackedOnMobile`), a medzi 781 a 900 by stĺpce zostali vedľa seba, pričom * formulár by v 476 už nemal kde dýchať. Mobilný rám `375 Kontakt` má oba * celky pod sebou. */ @media (max-width: 900px) { .egrant-contact-cols.wp-block-columns:not(.is-not-stacked-on-mobile) { flex-wrap: wrap; } .egrant-contact-cols.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column { flex-basis: 100% !important; } /* * Na mobile **180**, nie desktopových 240. Rám `375 Kontakt`: zvislá * linka bloku 179,8 a medzera fotka → meno 51,8, kým render dával 240 * a 113 — teda o 60 px vyššiu dieru medzi fotkou a menom. * * Desktop zostáva 240 a sedí (rám 240,9). Je to tá istá dvojica hodnôt, * akú dostala karta v `card-grid` (rozhodol Lukáš 2026-09-15) — 240 na * desktope, 180 na mobile — len v inom bloku. * * Zostáva `min-height`, nie `height`: pri dlhšom mene či treťom kontakte * má blok narásť, nie text pretiecť. */ .egrant-contact-person.wp-block-group { min-height: 180px; } /* * Rozteč kontaktných údajov je na mobile **pomer, nie literál**. Desktopové * `line-height: 21px` je zadané pre 17,6; pod 900 klesne `small` na 16,6, * ale literál by rozteč nechal na 21. Rám `375 Kontakt` má **23,2**, čo je * presne 16,6 × 1,4 — odtiaľ pomer. * * Prečo nie literál 23,2: pomer prežije každú ďalšiu zmenu veľkosti písma, * a mobilná veľkosť `small` príde z `styles.css`, nie odtiaľto. * * Desktop zostáva na literáli 21 (rám 21,0–22,3) a nehýbe sa. */ .egrant-contact-person .egrant-contact-person__name, .egrant-contact-person .egrant-contact-person__line { line-height: 1.4; /* 16,6 × 1,4 = 23,24 */ } /* * Odstup nadpisu stĺpca od obsahu je na mobile **32**, nie desktopových 40. * Ink-to-ink v ráme `375 Kontakt` vyšla 35,3, kým render dával 44 — pri 32 * to sedí na 36 (rozdiel je polovičné prerozdelenie riadkovania nad prvým * labelom, ktoré do rámu nepatrí). * * Desktop zostáva 40 (ink-to-ink rám 44,0, render 44,4) a nehýbe sa. * * Platí to pre oba nadpisy stĺpcov — „Ozvite sa priamo" aj „Nechajte nám * odkaz" majú ten istý štýl a ten istý odstup od toho, čo je pod nimi. */ .egrant-contact-cols .egrant-contact-cols__title { margin-block-end: var(--wp--preset--spacing--70); /* 32 */ } }