Cabecera y pie a todo el ancho
Un pequeño cambio visible en todas las páginas de aquí: la banda oscura de arriba y el pie de página de abajo ahora ocupan todo el ancho de la ventana.
Hasta hoy estaban dentro de la misma columna de 1180 píxeles que todo lo demás, así que en una pantalla ancha la página era una franja de contenido flotando en un fondo vacío. El pie de página de las páginas de estadísticas ya ocupaba todo el ancho —era el único—, y esa inconsistencia es lo que dio pie a esto.
Lo que no cambió
El contenido dentro de esas bandas. El texto, los botones y los números siguen alineados en los mismos 1180 píxeles que las secciones de debajo, así que la banda es ancha y el texto no lo es. Nadie lee líneas de cien caracteres, y un titular estirado a lo ancho de un monitor de 27 pulgadas no es un diseño, es un descuido.
Por qué no el truco habitual
La forma habitual de sacar un elemento de una columna centrada es un margen negativo contra 100vw. Tiene un fallo que es fácil pasar por alto en un escritorio con la barra de desplazamiento desactivada: vw incluye la barra de desplazamiento. El bloque acaba siendo más ancho que el área visible exactamente en ese ancho, y toda la página se puede arrastrar lateralmente unos píxeles —lo que en un móvil significa que el diseño se tambalea bajo el pulgar mientras se intenta leer.
Así que la banda no se extiende hacia fuera, sino que empieza ancha y añade relleno hacia dentro:
padding-inline: max(20px, calc((100% - 1180px) / 2))
Los porcentajes se resuelven respecto al elemento padre, que aquí es el cuerpo de la página y no incluye la barra de desplazamiento. Por debajo de 1180 píxeles gana el primer valor y la banda mantiene un margen razonable de 20 píxeles en lugar de uno negativo. Sin un segundo contenedor, sin JavaScript, y sin nada que medir en tiempo de ejecución.
Dónde se aplica
La página principal, la página de información y todas las páginas de estadísticas. La misma construcción en las tres, que era la idea.