Nagłówek i stopka na pełną szerokość

Drobna zmiana, widoczna na każdej stronie: ciemny pasek u góry i stopka na dole teraz rozciągają się na pełną szerokość okna.

Do dziś mieściły się w tej samej 1180-pikselowej kolumnie co wszystko inne, więc na szerokim ekranie strona wyglądała jak pasek treści unoszący się w pustym tle. Stopka na stronach statystyk miała już pełną szerokość — była jedyna, i to właśnie ta niespójność dała początek tej zmianie.

Co się nie zmieniło

Zawartość wewnątrz tych pasków. Tekst, przyciski i liczby nadal wyrównują się do tych samych 1180 pikseli co sekcje poniżej, więc pasek jest szeroki, ale tekst już nie. Nikt nie czyta stuznakowych linii, a nagłówek rozciągnięty na 27-calowym monitorze to nie jest projekt, to przeoczenie.

Dlaczego nie zwykła sztuczka

Typowym sposobem na wyprowadzenie elementu poza wyśrodkowaną kolumnę jest ujemny margines względem 100vw. Ma wadę, którą łatwo przeoczyć na komputerze z wyłączonym paskiem przewijania: vw uwzględnia pasek przewijania. Blok staje się szerszy od widocznego obszaru dokładnie o tę szerokość, a całą stronę można przeciągnąć w bok o kilka pikseli — co na telefonie oznacza, że układ chwieje się pod kciukiem w trakcie czytania.

Dlatego pasek nie rozciąga się na zewnątrz, tylko zaczyna szeroko i dopełnia się do środka:

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

Wartości procentowe odnoszą się do elementu nadrzędnego, którym w tym przypadku jest treść strony, nieobejmująca paska przewijania. Poniżej 1180 pikseli wygrywa pierwsza wartość i pasek zachowuje rozsądny 20-pikselowy margines zamiast ujemnego. Bez drugiego kontenera, bez JavaScriptu i bez niczego do mierzenia w czasie działania.

Gdzie to obowiązuje

Strona główna, strona „O nas” i każda strona statystyk. Ta sama konstrukcja we wszystkich trzech, i o to właśnie chodziło.