/* ========================================================================== ORWAK – Blog Figma: node 678:2289 (1440 × 3146) style.css → pages.css → ez a fájl A hero a pages.css alap-geometriájával megy (fotó 0→571, panel 327→755), ezért itt nincs --phero-* felülírás. Az oldal egyetlen saját szekciója a bejegyzés-rács; a kártya maga a style.css `.post` komponense, csak a blog aloldali méretezésével. ========================================================================== */ /* -------------------------------------------------------------------------- 0. Hero-bevezető szövegdoboz A pages.css 626px-es `.phero__lead` max-width-je a márkaszerviz oldal Figma-szövegdobozához van szabva. Ezen az oldalon a terv szövegdoboza (678:2371) 734px széles, és a MÉRT sortörés emiatt máshol van: terv (734px): „…és korszerű ipari" / „megoldásokról … csökkenthetők" / „a költségek, … hulladékkezelés." (618 / 622 / 431 px) 626px-szel: „…és korszerű" / „ipari … amelyekkel" / „csökkenthetők … hulladékkezelés." (595 / 552 / 567 px) A magasság mindkét esetben 3 × 25 = 75px, tehát a hero geometriája nem változik — csak a sorvégek rongya. Ez oldalspecifikus geometria, ezért itt a helye, nem a pages.css-ben. A tervben a harmadik sor NEM tördelésből jön: a Figma-szövegben kézi sortörés áll a „csökkenthetők" után (két bekezdés egy dobozban). 734px-en magától a „a költségek," is felférne a második sorra, ezért a törés `
`-kel van kirakva a HTML-be. 992px alatt a panel már úgyis keskenyebb ennél, ott a kézi törés csak csonka sort hagyna — ezért ott kikapcsol. */ .phero__lead { max-width: 734px; } /* -------------------------------------------------------------------------- 1. Bejegyzés-rács Figma: 3 oszlop 409px-enként (x = 83 / 516 / 948 → 24px oszlopköz), a sorok y = 833 / 1420 / 2007, tehát 587px-enként. Egy kártya tartalommagassága 286+15+24 +11+78 +11+50 +24+21 = 520, így a sorköz 587 − 520 = 67. Az oszlopszélesség nem 409px fixen: a .container 1274px-es sávjában (1274 − 2×24) / 3 = 408.67 — 1440-en a tervvel egyezik, fölötte pedig együtt nő a tartalomoszloppal, nem szakad el tőle. -------------------------------------------------------------------------- */ .bloglist__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; row-gap: 67px; } /* A .post a főoldalon carousel-elem (flex-basis 409px). Rácsban a flex értékek nem érvényesülnek, de a szándék legyen kiírva. */ .bloglist .post { flex: initial; min-width: 0; } /* A tervben MINDEN kártyán ugyanott kezdődik a kivonat (y = 425) és a „Tovább" (y = 499) — a címnek tehát kötött, 3 soros doboza van, akkor is, ha a szöveg csak két sort tölt ki. Enélkül a 2 és 3 soros címek alatt elcsúszna egymáshoz képest a rács. Itt korábban mindkét dobozon `-webkit-line-clamp` állt, azzal az indokkal, hogy az Effra helyett futó Figtree szélesebb, ezért a magyar mondatok túlcsordulnak a kötött dobozon. Az Effra megjött, és 1440-en MÉRVE a scrollHeight sehol nem lépi túl a doboz belmagasságát: a cím 78/78 (2 sor a hosszú, 3 sor a SOLARKIT-es kártyán), a kivonat 50/50 mindhárom oszlopban. A tervbeli sortörést tehát klipp nélkül is megkapjuk. A cím klippje EZZEL EGYÜTT teljesen kikerült: 769px-ig végigmérve a cím sehol nem lesz 3 sornál hosszabb (scrollHeight 78 vagy 88 = 3 × 26 + a sordoboz-ráhagyás), tehát a klippnek soha nincs dolga. A kötött magasság marad, mert az nem a betűtípusról szól: a terv minden kártyán ugyanoda teszi a kivonatot (425) és a „Tovább"-ot (499). */ .bloglist .post__title { height: 78px; /* 3 × 26px sormagasság */ overflow: hidden; } .bloglist .post__excerpt { margin-top: 11px; /* terv: cím 336→414, kivonat 425 */ height: 50px; /* 2 × 25px */ overflow: hidden; } /* A blogoldalon a „Tovább" narancs és aláhúzott (a főoldali kártyán szürke). `flex` és nem `inline-flex`: soron belüli elemként a 25px-es törzs-sormagasság miatt 5px-nyi sordoboz-ráhagyás kerülne a kártya aljára, és a rács sorai annyival lejjebb csúsznának a tervhez képest. */ .bloglist .post__more { display: flex; width: fit-content; margin-top: 24px; gap: 4px; font-weight: 400; color: var(--orange); } .bloglist .post__more:hover { color: #c9441f; } .bloglist .post__chev { border-color: var(--orange); } /* -------------------------------------------------------------------------- 2. Lapozó Figma: két 34px-es korong a 720-as oldalközépre zárva (x = 678 és 727), y = 2612 — a rács aljától (2527) 85px-re. Sötét korong, fehér nyíl; az „előző" 50%-os átlátszósággal, tehát kikapcsolt állapotban. -------------------------------------------------------------------------- */ .bloglist__nav { margin-top: 85px; } .bloglist__nav .nav-arrows__btn { background: #4a4a4a; box-shadow: 0 2px 4px rgba(0, 0, 0, .1); } .bloglist__nav .nav-arrows__btn::before { border-color: #fff; } .bloglist__nav .nav-arrows__btn[disabled] { cursor: default; } .bloglist__nav .nav-arrows__btn[disabled]:hover { opacity: .5; } /* -------------------------------------------------------------------------- 3. Reszponzív -------------------------------------------------------------------------- */ /* 1400px alatt a .container oldalpaddingja fix 48px-re vált, és az oszlop leszűkül a terv 409px-e alá (1360-on 405, 1300-on 385, 1100-on 319). A kivonat ilyenkor 3 sorra tördel (scrollHeight 80), a doboz viszont 2 soros marad — a harmadik sor szó nélkül eltűnne. A terv 2 soros teaser-t mutat, úgyhogy a doboz marad, de itt visszakerül a `line-clamp`, hogy a levágás „…"-t kapjon, ne csak abbamaradjon a mondat. 1401px fölött (ahol az oszlop a tervbeli 409px) ez a réteg nincs bekapcsolva. */ @media (max-width: 1400px) { .bloglist .post__excerpt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; } } @media (max-width: 1200px) { .bloglist__grid { row-gap: 56px; } } @media (max-width: 992px) { .phero__brk { display: none; } .bloglist__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; } .bloglist__nav { margin-top: 56px; } } @media (max-width: 768px) { .bloglist__grid { grid-template-columns: minmax(0, 1fr); row-gap: 40px; } /* Egy oszlopban nincs mihez igazítani, a kötött doboz viszont a kisebb betűmérethez képest túl magas (és 3 sornál rövidebb címnél üres helyet hagyna), a keskenyebb oszlopban pedig több sorra tördel — kötött magassággal itt tényleg levágna szöveget. A magasság ezért a tartalomhoz nő. */ .bloglist .post__title, .bloglist .post__excerpt { height: auto; } .bloglist .post__excerpt { display: block; -webkit-line-clamp: none; line-clamp: none; } .bloglist__nav { margin-top: 44px; } } /* ========================================================================== Lapozás — a nyilak eddig díszek voltak A rácsban mind a 9 bejegyzés egyszerre látszott, a lap alján lévő két nyíl pedig nem volt bekötve semmihez: rájuk lehetett kattintani, és nem történt semmi. Mostantól két lap van, laponként 6 kártya (két teljes sor) — így fele annyi látszik egyszerre, és a rács sem szakad meg félbevágott sorral. A mozgás iránykövető: a „következő" jobbról hozza be a kártyákat, az „előző" balról, 60ms-onként lépcsőzve. Az irányt a rács data-dir attribútuma mondja meg, a lépcsőt a --i, ugyanaz a minta, mint a belépő animációnál. ========================================================================== */ @keyframes bl-lap-elore { from { opacity: 0; transform: translateX(46px); } to { opacity: 1; transform: none; } } @keyframes bl-lap-vissza { from { opacity: 0; transform: translateX(-46px); } to { opacity: 1; transform: none; } } /* A `both` kitöltés a végállapotot is ráragasztaná az elemre, ami elnyomná a későbbi hovereket — ezért a JS leveszi az osztályt, amint az animáció véget ért. */ .bloglist__grid.is-lapoz[data-dir="elore"] .post { animation: bl-lap-elore var(--d-slow) var(--ease-out) both; } .bloglist__grid.is-lapoz[data-dir="vissza"] .post { animation: bl-lap-vissza var(--d-slow) var(--ease-out) both; } .bloglist__grid.is-lapoz .post { animation-delay: calc(var(--i, 0) * 60ms); } /* A letiltott nyíl ne csak halvány legyen, hanem ne is reagáljon. */ .bloglist__nav .nav-arrows__btn[disabled] { pointer-events: none; } @media (prefers-reduced-motion: reduce) { .bloglist__grid.is-lapoz .post { animation: none; } }