Header dan footer kini membentang selebar layar

Perubahan kecil yang terlihat di setiap halaman di sini: pita gelap di bagian atas dan footer di bagian bawah kini membentang selebar jendela.

Hingga hari ini keduanya berada di dalam kolom 1180 piksel yang sama seperti semua elemen lain, sehingga pada layar lebar halaman tampak sebagai jalur konten yang melayang di latar belakang kosong. Footer di halaman statistik sudah selebar penuh — hanya itu satu-satunya, dan ketidakkonsistenan itulah yang memicu perubahan ini.

Apa yang tidak berubah

Konten di dalam pita tersebut. Teks, tombol, dan angka tetap sejajar pada 1180 piksel yang sama seperti bagian di bawahnya, jadi pitanya lebar tetapi tulisannya tidak. Tidak ada yang membaca baris sepanjang seratus karakter, dan judul yang terbentang di monitor 27 inci bukanlah desain, melainkan kelalaian.

Mengapa tidak memakai trik yang biasa

Cara umum untuk mengeluarkan elemen dari kolom yang berada di tengah adalah margin negatif terhadap 100vw. Cara ini memiliki kelemahan yang mudah terlewat di desktop dengan scrollbar yang dinonaktifkan: vw mencakup scrollbar. Blok akhirnya lebih lebar daripada area yang terlihat tepat sebesar lebar tersebut, dan seluruh halaman dapat digeser ke samping beberapa piksel — yang di ponsel berarti tata letak bergoyang di bawah ibu jari di tengah membaca.

Jadi pita tidak menjangkau ke luar, melainkan dimulai lebar lalu diberi padding ke dalam:

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

Persentase dihitung terhadap induk elemen, yang di sini adalah body halaman dan tidak mencakup scrollbar. Di bawah 1180 piksel, nilai pertama yang berlaku dan pita mempertahankan margin 20 piksel yang wajar, bukan margin negatif. Tanpa pembungkus kedua, tanpa JavaScript, dan tidak ada yang perlu diukur saat runtime.

Di mana ini berlaku

Halaman depan, halaman Tentang dan setiap halaman statistik. Konstruksinya sama di ketiganya, dan memang itulah tujuannya.