Antetul și subsolul ocupă acum toată lățimea

O mică schimbare vizibilă pe fiecare pagină de aici: banda întunecată din partea de sus și subsolul din partea de jos ocupă acum întreaga lățime a ferestrei.

Până azi stăteau în aceeași coloană de 1180 de pixeli ca tot restul, așa că pe un ecran lat pagina era o fâșie de conținut plutind pe un fundal gol. Subsolul paginilor de statistici avea deja lățimea completă — era singurul, iar această inconsecvență a declanșat totul.

Ce nu s-a schimbat

Conținutul din interiorul acelor benzi. Textul, butoanele și cifrele se aliniază în continuare pe aceiași 1180 de pixeli ca secțiunile de sub ele, așa că banda este lată, dar textul nu. Nimeni nu citește rânduri de o sută de caractere, iar un titlu întins pe un monitor de 27 de inchi nu este design, ci o scăpare.

De ce nu trucul obișnuit

Metoda obișnuită de a scoate un element dintr-o coloană centrată este o margine negativă raportată la 100vw. Are un defect ușor de ratat pe un desktop cu bara de derulare dezactivată: vw include bara de derulare. Blocul ajunge mai lat decât zona vizibilă exact cu această lățime, iar întreaga pagină poate fi trasă lateral cu câțiva pixeli — ceea ce pe un telefon înseamnă că aspectul se clatină sub deget în mijlocul lecturii.

Așa că banda nu se întinde spre exterior, ci pornește lată și adaugă spațiere spre interior:

padding-inline: max(20px, calc((100% - 1180px) / 2))

Procentele se calculează față de părintele elementului, care aici este corpul paginii și nu include bara de derulare. Sub 1180 de pixeli câștigă prima valoare, iar banda păstrează o margine rezonabilă de 20 de pixeli în loc de una negativă. Fără un al doilea container, fără JavaScript și fără nimic de măsurat la rulare.

Unde se aplică

Pagina principală, pagina Despre și fiecare pagină de statistici. Aceeași construcție în toate trei, iar asta era ideea.