/* Blogul: lista de articole si pagina unui articol. Piesele comune (.card, .eyebrow, .section-head, .horizon) vin din components.css; aici sunt numai lucrurile proprii blogului. */ /* ============ LISTA ============ */ .blog-an { display: flex; align-items: center; gap: var(--s-20); margin: var(--s-60) 0 var(--s-30); font-size: var(--size-h4); font-weight: var(--w-medium); letter-spacing: var(--ls-ui); color: var(--text-3); } /* Linia care continua anul pana la marginea din dreapta. */ .blog-an::after { content: ""; flex: 1; height: 1px; background: var(--line-07); } .section-head + .blog-an { margin-top: var(--s-40); } .blog-grila { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); } .blog-card { display: flex; flex-direction: column; gap: var(--s-12); padding: var(--s-20); border-radius: var(--r-card); background: var(--surface-1); border: 1px solid var(--line-07); color: inherit; text-decoration: none; transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); } .blog-card:hover, .blog-card:focus-visible { border-color: var(--line-15); transform: translateY(-3px); } .blog-card__coperta { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-image); background: var(--surface-2); } .blog-card__data { margin: var(--s-10) 0 0; font-size: var(--size-small); color: var(--text-3); } .blog-card__titlu { margin: 0; color: var(--text-1); } .blog-card__rezumat { margin: 0; flex: 1; font-size: var(--size-small); line-height: var(--lh-body); color: var(--text-2); } .blog-card__subsol { display: flex; align-items: center; gap: var(--s-12); margin: var(--s-10) 0 0; font-size: var(--size-small); color: var(--text-3); } .blog-card__mai-mult { margin-inline-start: auto; color: var(--blue-text); } @media (max-width: 1024px) { .blog-grila { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 700px) { .blog-grila { grid-template-columns: 1fr; } } /* ============ ARTICOLUL ============ */ /* Antetul, textul si randul de partajare stau pe aceeasi axa centrata, cu aceeasi latime. Coperta ramane lata cat containerul, deci pagina arata ca o banda lata urmata de o coloana asezata la mijloc. Pana pe 10 august 2026 toate trei erau lipite de marginea stanga, iar textul de 744px lasa vreo 360 de pixeli goi in dreapta, sub o coperta care se intindea pe toata latimea. Vitalie a semnalat dezechilibrul; centrarea e alegerea lui dintre trei variante. Latimea e aceeasi (68ch) pentru toate trei: altfel titlul ar incepe intr-un loc si textul in altul, ceea ce citeste a greseala, nu a intentie. */ .articol__antet, .articol__text, .articol__partajare { max-width: 68ch; margin-inline: auto; } .articol__meta { display: flex; flex-wrap: wrap; gap: var(--s-10); margin: 0; font-size: var(--size-small); color: var(--text-3); } .articol__coperta { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; margin: var(--s-50) 0; border-radius: var(--r-image); } /* Latimea (68ch, ~68 de caractere pe rand) e pusa mai sus, impreuna cu antetul si cu randul de partajare. Un text de 700 de cuvinte lat cat containerul de 1200px se citeste prost - ochiul pierde randul. */ .articol__text { color: var(--text-2); font-size: var(--size-body); line-height: var(--lh-body); letter-spacing: var(--ls-body); /* Aliniere pe ambele margini, ceruta de Vitalie pe 10 august 2026. `hyphens: auto` merge cu ea: fara despartire in silabe, alinierea pe ambele margini intinde spatiile dintre cuvinte si lasa "rauri" albe pe verticala prin paragraf. Despartirea are nevoie de `lang` pe pagina - `base_v2.html` are ``. */ text-align: justify; hyphens: auto; } /* Pe ecran ingust randul are prea putine cuvinte ca sa se poata intinde frumos: alinierea pe ambele margini ar rupe cuvintele in doua si ar lasa goluri de un deget. Sub 700px se revine la aliniere la stanga. */ @media (max-width: 700px) { .articol__text { text-align: left; } } .articol__text p { margin: 0 0 var(--s-24); } .articol__text h2 { margin: var(--s-50) 0 var(--s-20); font-size: var(--size-h4); font-weight: var(--w-semibold); letter-spacing: var(--ls-h4); color: var(--text-1); } .articol__text h3 { margin: var(--s-30) 0 var(--s-12); font-size: var(--size-body); font-weight: var(--w-semibold); color: var(--text-1); } .articol__text ul { margin: 0 0 var(--s-24); padding-inline-start: var(--s-20); } .articol__text li { margin-bottom: var(--s-10); } .articol__text strong { color: var(--text-1); font-weight: var(--w-medium); } .articol__text a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; } .articol__text a:hover { color: var(--text-1); } .articol__partajare { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-20); margin-top: var(--s-50); padding-top: var(--s-24); border-top: 1px solid var(--line-07); color: var(--text-3); } /* Marimea mica sta pe eticheta, nu pe rand. `ch` se socoteste dupa marimea literei elementului pe care e scris, deci un font-size aici ar face ca cei 68ch de mai sus sa iasa 651px in loc de 744 si randul s-ar centra pe alta axa decat textul de deasupra lui. */ .articol__partajare-eticheta { font-size: var(--size-small); } /* Pictogramele sunt aceleasi ca in subsol si isi aduc stilul din base.css (`.social__link` / `.social__icon`). Aici doar se string mai aproape: in subsol stau intr-un rand propriu, aici stau langa un cuvant. */ .articol__partajare .social__link { padding: 6px; } .articol__partajare { gap: var(--s-12); } .articol__partajare-eticheta { margin-inline-end: var(--s-10); } .articol__partajare a { color: var(--text-2); } .articol__partajare a:hover { color: var(--text-1); } @media (max-width: 700px) { .articol__coperta { margin: var(--s-30) 0; } .articol__text h2 { margin-top: var(--s-40); } } /* ============================================================================= TEANCUL PE ANI Cerut de Vitalie pe 14 august 2026, dupa auditul de telefon: „blog face efectul ca la portofoliu pe ani, adica cand dai scroll in jos 2026 noutatile se ridica una peste alta". TOATE REGULILE DE AICI SUNT PE `.blog-grila--teanc`, NICIODATA PE `.blog-grila` SIMPLU. Aceeasi clasa `blog-grila` e folosita si de pagina unui articol, la „More from the blog". O regula scrisa pe ea ar aseza vertical cele trei cartonase de la piciorul fiecarui articol - douazeci si trei de pagini stricate deodata, si niciun test care sa se inroseasca. `.blog-rand` nu exista ca element decat acolo unde e nevoie de el: implicit e `display: contents`, adica se sterge cutia lui si cartonasele raman copiii grilei. Asa banda de tableta (721-1024px), pe care Vitalie a spus ca e „ok", nu se atinge deloc. ========================================================================== */ .blog-rand { display: contents; } /* --- TELEFON: cate una, ca pe portofoliu ---------------------------------- */ @media (max-width: 720px) { /* Grila devine sir pe verticala, altfel cartonasele raman elemente de grila - iar un element de grila se lipeste NUMAI in celula lui si n-ar urca niciodata peste cel de sub el. Lectia e platita deja pe portofoliu. */ .blog-grila--teanc { display: flex; flex-direction: column; } .blog-grila--teanc .blog-card { position: sticky; top: var(--lipire, 110px); /* Opac si cu umbra deasupra: cartonasul care urca trebuie sa para ca trece PESTE cel lipit. Pe negru pe negru, fara ele, miscarea se citeste ca o taietura, nu ca o suprapunere. */ background: var(--bg); box-shadow: 0 -18px 30px -12px rgba(0, 0, 0, .9); } /* Cele trei cartonase ale unui rand mostenesc acelasi `--lipire`, deci s-ar opri toate in acelasi loc si ar arata ca o singura foaie. Fiecare isi ia cate zece pixeli, si de-aia randul creste cu 30 in sablon, nu cu 20: trei cartonase au nevoie de loc intre doua trepte de rand. */ .blog-grila--teanc .blog-rand > .blog-card:nth-child(2) { top: calc(var(--lipire, 110px) + 10px); } .blog-grila--teanc .blog-rand > .blog-card:nth-child(3) { top: calc(var(--lipire, 110px) + 20px); } } /* --- CALCULATOR: randuri de trei, ca perechile de pe portofoliu ------------ Pragul e 1025, nu 900 ca pe portofoliu, si nu e o alegere: la 1024 grila blogului trece la doua coloane (mai sus in fisier). Daca lipirea ar porni la 900, intre 900 si 1024 un rand de trei s-ar rupe in 2 + 1 si ar lasa o gaura in dreapta la fiecare al doilea rand. Efectul se aprinde exact acolo unde chiar exista trei coloane. */ @media (min-width: 1025px) { .blog-grila--teanc { display: flex; flex-direction: column; } .blog-grila--teanc .blog-rand { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); position: sticky; top: var(--lipire, 110px); background: var(--bg); padding-block: var(--s-20); box-shadow: 0 -18px 30px -12px rgba(0, 0, 0, .9); } }