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

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

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

Що не змінилося

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

Чому не звичний прийом

Звичний спосіб вивести елемент за межі центрованої колонки — це від'ємний відступ відносно 100vw. У нього є вада, яку легко не помітити на комп'ютері з вимкненою смугою прокрутки: vw включає в себе смугу прокрутки. Блок виявляється ширшим за видиму область рівно на цю ширину, і всю сторінку можна перетягнути вбік на кілька пікселів — а на телефоні це означає, що макет хитається під пальцем просто під час читання.

Тож смуга не тягнеться назовні — вона починається широкою і додає відступи всередину:

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

Відсотки обчислюються відносно батьківського елемента, яким тут є тіло сторінки, і воно не включає смугу прокрутки. Нижче за 1180 пікселів перемагає перше значення, і смуга зберігає розумний відступ у 20 пікселів замість від'ємного. Жодної другої обгортки, жодного JavaScript, і нічого вимірювати під час виконання.

Де це застосовується

Головна сторінка, сторінка «Про нас» і кожна сторінка статистики. Однакова конструкція в усіх трьох, і саме в цьому була суть.