The header and footer now run full width

A small change visible on every page here: the dark band at the top and the footer at the bottom now run the full width of the window.

Until today they sat inside the same 1180-pixel column as everything else, so on a wide screen the page was a strip of content floating in empty background. The footer on the statistics pages was already full width — it was the only one, and that inconsistency is what started this.

What did not change

The content inside those bands. Text, buttons and numbers still line up on the same 1180 pixels as the sections below them, so the band is wide and the writing is not. Nobody reads hundred-character lines, and a headline stretched across a 27-inch monitor is not a design, it is an oversight.

Why not the usual trick

The common way to break an element out of a centred column is a negative margin against 100vw. It has a flaw that is easy to miss on a desktop with the scrollbar switched off: vw includes the scrollbar. The block ends up wider than the visible area by exactly that width, and the whole page can be dragged sideways a few pixels — which on a phone means the layout wobbles under a thumb in the middle of reading.

So the band does not reach outwards, it starts wide and pads inwards:

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

Percentages resolve against the element's parent, which here is the page body and does not include the scrollbar. Below 1180 pixels the first value wins and the band keeps a sensible 20-pixel margin instead of a negative one. No second wrapper, no JavaScript, and nothing to measure at runtime.

Where it applies

The front page, the about page and every statistics page. Same construction in all three, which was the point.