Cabeçalho e rodapé em toda a largura

Uma pequena alteração visível em todas as páginas aqui: a faixa escura no topo e o rodapé no fundo ocupam agora toda a largura da janela.

Até hoje, estavam dentro da mesma coluna de 1180 pixels que tudo o resto, pelo que, num ecrã largo, a página era uma tira de conteúdo a flutuar num fundo vazio. O rodapé nas páginas de estatísticas já ocupava toda a largura — era o único, e foi essa inconsistência que deu origem a isto.

O que não mudou

O conteúdo dentro dessas faixas. Texto, botões e números continuam alinhados nos mesmos 1180 pixels que as secções abaixo deles, pelo que a faixa é larga, mas o texto não é. Ninguém lê linhas de cem caracteres, e um título esticado por um monitor de 27 polegadas não é um design, é um descuido.

Porque não o truque habitual

A forma habitual de tirar um elemento de uma coluna centrada é uma margem negativa contra 100vw. Tem uma falha fácil de não notar num computador de secretária com a barra de deslocamento desativada: vw inclui a barra de deslocamento. O bloco acaba mais largo do que a área visível exatamente por essa largura, e a página inteira pode ser arrastada lateralmente alguns pixels — o que, num telemóvel, significa que o layout oscila sob o polegar enquanto se está a tentar ler.

Por isso, a faixa não se estica para fora: começa larga e recua para dentro:

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

As percentagens resolvem-se em relação ao elemento pai, que aqui é o body da página e não inclui a barra de deslocamento. Abaixo dos 1180 pixels, o primeiro valor prevalece, e a faixa mantém uma margem sensata de 20 pixels em vez de uma negativa. Sem segundo wrapper, sem JavaScript, e nada para medir em tempo de execução.

Onde se aplica

A página inicial, a página Sobre e todas as páginas de estatísticas. A mesma construção nas três, que era o objetivo.