Шапка и подвал теперь во всю ширину

Небольшое изменение, заметное на каждой странице здесь: тёмная полоса вверху и подвал внизу теперь растягиваются на всю ширину окна.

До сегодняшнего дня они помещались в ту же колонку шириной 1180 пикселей, что и всё остальное, поэтому на широком экране страница выглядела как полоса содержимого, плавающая в пустом фоне. Подвал на страницах статистики уже был на всю ширину — он был единственным исключением, и именно это несоответствие всё это запустило.

Что не изменилось

Содержимое внутри этих полос. Текст, кнопки и цифры по-прежнему выравниваются по тем же 1180 пикселям, что и разделы под ними, так что полоса широкая, а текст — нет. Никто не читает строки в сто символов, а заголовок, растянутый на весь 27-дюймовый монитор, — это не дизайн, а недосмотр.

Почему не обычный приём

Обычный способ вывести элемент за пределы центрированной колонки — отрицательный отступ относительно 100vw. У него есть недостаток, который легко упустить на настольном компьютере с отключённой полосой прокрутки: vw включает в себя полосу прокрутки. Блок оказывается шире видимой области ровно на эту ширину, и всю страницу можно сдвинуть в сторону на несколько пикселей — а на телефоне это значит, что макет шатается под пальцем прямо во время чтения.

Поэтому полоса не расширяется наружу — она изначально широкая и получает отступ внутрь:

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

Проценты вычисляются относительно родителя элемента, а здесь это тело страницы, которое не включает полосу прокрутки. Ниже 1180 пикселей побеждает первое значение, и полоса сохраняет разумный отступ в 20 пикселей вместо отрицательного. Никакой второй обёртки, никакого JavaScript и ничего, что нужно было бы измерять во время выполнения.

Где это применяется

Главная страница, страница «О сервисе» и каждая страница статистики. Во всех трёх — одна и та же конструкция, в этом и была цель.