# Rumah yang Lebih Rapi: Catatan Perombakan Tampilan Legawa.com

- Link: https://legawa.com/lhagima-project/catatan-perombakan-tampilan-legawa-com/
- Published: 2026-11-12T14:56:14+07:00
- Author: Cahya

Beberapa bulan lalu legawa.com berganti logo: matahari di atas dua lapis awan. Wajahnya
sudah baru, tetapi rumahnya masih berantakan. Beranda berupa daftar judul panjang
tanpa gambar, sebelas rubrik ditumpuk dalam satu kolom, dan tombol cari hanya berupa
ikon kecil yang mudah terlewat. Siang ini saya akhirnya membereskannya.

Tulisan ini catatan tentang apa saja yang berubah, dari tampilan awal sampai tampilan
yang Anda lihat sekarang. Sebagian untuk arsip pribadi, sebagian lagi untuk pembaca
yang mungkin bingung kenapa letak beberapa hal berpindah.

[⌊Cuplikan layar beranda lama Bhyllabus l'énigme: menu dalam tanda kurung bertumpuk,
tombol Singgah di Facebook, ikon cari, dan daftar tulisan tanpa gambar.⌉⌊Cuplikan
layar beranda lama Bhyllabus l'énigme: menu dalam tanda kurung bertumpuk, tombol
Singgah di Facebook, ikon cari, dan daftar tulisan tanpa gambar.⌉[

Beranda lama: rapi, tetapi sepi petunjuk.

## Apa yang Kurang dari Tampilan Lama

Tema Archivist yang dipakai blog ini sebenarnya sudah saya sukai sejak awal. Nuansa
mesin ketik di atas kertas cokelat muda itu cocok dengan blog yang lebih banyak 
berisi catatan. Masalahnya ada di cara isi disusun:

 * Beranda hanya menampilkan judul dan tanggal. Tidak ada gambar, sehingga semua
   tulisan terlihat sama pentingnya.
 * Sebelas rubrik ditumpuk berurutan dalam satu kolom panjang, jadi pembaca harus
   menggulir jauh untuk menemukan rubrik di bawah.
 * Tautan kategori di bagian atas hanya melompat ke bawah halaman, bukan membuka
   halaman rubriknya.
 * Pencarian hanya berupa ikon kecil, dan di halaman tulisan tidak ada jalan pintas
   ke rubrik lain.
 * Teks di beberapa tombol nyaris hilang saat disorot, karena latarnya berubah menjadi
   krem sementara teksnya tetap krem.

## Beranda: dari Daftar Panjang ke Kartu

Beranda sekarang dibuka dengan sapaan singkat _Selamat singgah._ di sisi kiri, lengkap
dengan kotak pencarian yang langsung terlihat dan ikon jejaring sosial. Di sisi 
kanan ada tulisan terbaru dalam kartu besar bergambar.

Di bawahnya berderet enam tulisan terbaru berikutnya dalam bentuk kartu bergambar,
tiga per baris, lalu bagian _Buku Pilihan_. Bagian paling bawah, _Telusuri per Rubrik_,
menggantikan kolom panjang tadi dengan kisi kartu. Setiap kartu memuat nama rubrik,
satu kalimat deskripsi, tiga judul terbaru, dan tautan ke semua tulisan di rubrik
itu. Kartu terakhir berisi ajakan untuk bertegur sapa lewat halaman Kontak atau 
Telegram.

[⌊Cuplikan layar beranda baru Bhyllabus l'énigme: header dengan bilah rubrik, sapaan
Selamat singgah dengan kotak pencarian, dan kartu tulisan terbaru bergambar.⌉⌊Cuplikan
layar beranda baru Bhyllabus l'énigme: header dengan bilah rubrik, sapaan Selamat
singgah dengan kotak pencarian, dan kartu tulisan terbaru bergambar.⌉[

Beranda baru: sapaan, pencarian, dan tulisan terbaru langsung terlihat.

## Header dan Footer yang Ikut ke Mana-Mana

Menu utama tetap tiga butir, yaitu Beranda, Tentang, dan Kontak. Tanda kurung siku
khas tema lama saya pertahankan, hanya kini berjajar mendatar dan ditemani tombol
cari. Tepat di bawahnya ada bilah rubrik tipis berisi sebelas tautan langsung ke
halaman kategori. Bilah ini muncul di semua halaman, jadi pembaca yang masuk dari
mesin pencari tetap bisa melompat ke rubrik lain tanpa harus kembali ke beranda.
Di ponsel, bilah itu bisa digeser ke samping.

Footer yang dulu hanya berisi satu baris tautan kini terbagi menjadi empat kolom:
tentang blog beserta ikon jejaring sosial, daftar rubrik, halaman-halaman penting,
dan kebijakan situs. Di baris paling bawah ada tautan kecil untuk kembali ke atas.

## Halaman Tulisan, Rubrik, dan Pencarian

Halaman tulisan tunggal kini dibuka dengan judul besar, lalu gambar unggulan selebar
halaman. Kolom teksnya sengaja dibatasi sekitar 44rem agar baris tidak terlalu panjang
untuk mata. Setelah isi tulisan ada tag, tombol berbagi, lalu dua kartu navigasi
ke tulisan sebelumnya dan selanjutnya. Kedua kartu itu kini memenuhi lebar halaman,
satu di kiri dan satu di kanan, dan seluruh kartunya bisa diklik. Di bawahnya menyusul
_Tulisan Serupa_, tiga kartu _Baru Terbit_, lalu kolom komentar.

Halaman rubrik dan arsip kini menampilkan judul rubrik beserta deskripsinya, disusul
daftar tulisan dalam bentuk kartu mendatar dengan gambar kecil dan ringkasan. Halaman
pencarian dan halaman 404 juga mendapat kotak pencarian yang langsung terlihat. 
Halaman 404 bahkan menawarkan tulisan terbaru, supaya pembaca yang tersesat tidak
langsung pergi.

## Tipografi: Almendra Display

Perubahan yang paling terasa barangkali urusan huruf. Judul H1 di seluruh situs,
baik judul tulisan, halaman, maupun rubrik, kini memakai _Almendra Display_, fonta
bergaya kaligrafi abad pertengahan yang terasa pas untuk blog yang banyak bercerita
tentang dunia fantasi. Karena garis Almendra tipis, saya pertebal sedikit supaya
tetap terbaca di atas latar kertas.

Fonta yang sama dipakai untuk _lettrine_, huruf kapital besar setinggi tiga baris
di awal paragraf pertama setiap tulisan. Isi tulisan tetap memakai fonta mesin ketik
yang menjadi ciri tema Archivist.

## Perbaikan Kecil yang Ternyata Terasa

 * **Kontras tombol.** Tombol berlatar gelap kini berbalik menjadi terang dengan
   teks hitam saat disorot, sedangkan tombol bergaris berubah menjadi hitam dengan
   teks krem. Navigasi bab di seri webnovel jadi tetap terbaca.
 * **Navigasi dengan keyboard.** Tombol yang sedang aktif mendapat garis putus-putus,
   jadi pembaca yang bernavigasi dengan tombol Tab tahu posisinya.
 * **Halaman [Tentang](https://legawa.com/tentang/).** Isinya ditulis ulang menjadi
   dua bagian, tentang penulis dan tentang blog ini, lengkap dengan daftar rubrik
   dan jadwal rubrik rutin dari Senin sampai Minggu.
 * **Jejaring baru.** Mastodon dan Tumblr (keduanya @haridiva) kini muncul di beranda,
   footer, dan halaman Tentang.

### Ringkasan Sebelum dan Sesudah

| Bagian | Sebelum | Sesudah | 
| Beranda | Daftar judul tanpa gambar, rubrik ditumpuk satu kolom | Sapaan, kartu bergambar, kisi rubrik berisi tiga tulisan terbaru | 
| Header | Menu bertumpuk dalam tanda kurung | Menu mendatar, tombol cari, bilah rubrik di semua halaman | 
| Footer | Satu baris tautan | Empat kolom: blog, rubrik, halaman, kebijakan | 
| Tulisan tunggal | Meta di kolom samping, isi di kolom kanan | Judul besar, gambar lebar, kolom baca 44rem, kartu navigasi | 
| Rubrik dan pencarian | Daftar judul dan tanggal | Kartu mendatar bergambar dengan ringkasan | 
| Tipografi | Seluruhnya fonta mesin ketik | Almendra Display untuk H1 dan lettrine | 
| Tombol | Teks hilang saat disorot | Warna berbalik, tetap terbaca |

## Di Balik Layar

Seluruh perubahan ini saya kerjakan bersama Claude (Anthropic). Claude menyunting
templat blok dan CSS situs lewat konektor WordPress.com, lalu memeriksa hasilnya
langsung di peramban Chrome. Saya cukup menyampaikan apa yang terasa kurang, misalnya
navigasi yang berdempetan atau tombol yang tidak terbaca, lalu melihat perbaikannya
beberapa menit kemudian.

Tidak ada plugin tambahan yang dipasang. Semua tata letak memakai blok bawaan WordPress,
dan gaya tambahannya cukup beberapa baris CSS khusus. Versi lama dari setiap templat
masih tersimpan di riwayat revisi, jadi kalau ada yang ternyata kurang cocok, rumah
lama masih bisa dipulihkan.

## Penutup

Tampilan di ponsel dan di peramban Firefox mungkin masih menyisakan satu-dua hal
yang belum pas. Kalau Anda menemukannya, kabari saya lewat [halaman Kontak](https://legawa.com/kontak/)
atau tinggalkan komentar di bawah. Terima kasih sudah singgah, dan semoga rak-rak
di rumah ini kini lebih mudah dijelajahi.

_— Cahya_