css

Lima subpage terasa seperti website lain setelah homepage didesain ulang. Solusinya bukan mempercantik satu per satu, tapi memindahkan bahasa desain ke komponen shared.

TL;DR: Awalnya homepage cakep tapi halaman lain kayak website beda jadi berantakan. Ternyata solusinya simpel cukup pakai dua komponen shared page-hero dan page-cta biar semua halaman konsisten. Ganti token sekali semua ikut keubah, kartu jadi lebih clean tanpa border tebal dan tombol pill-nya seragam.

Tantangan teknis menempatkan badge ISO pada maskot: positioning, border-radius, dan animasi CSS yang tidak saling menimpa.

TL;DR: Nempel badge di maskot ternyata nggak semudah itu, butuh 12 commit gara-gara anchor absolute positioning-nya ngaco. Solusinya bungkus artwork pakai wrapper relative w-fit biar badge nggak ikut geser pas ukuran layar berubah. Badge juga sempat lonjong gara-gara rounded-full di kotak non-persegi, untung centering pakai translate Tailwind v4 aman dari keyframe animasi.

Pil background ternyata cuma tambal: brand mark butuh dua aset ketika situs punya dark mode plus toggle manual yang dipersist.

TL;DR: Wordmark putih buat dark mode ternyata aneh pas light mode, jadi slot brand butuh dua file gambar. Triknya dua Image Next.js di slot yang sama, satu dark:hidden, satu hidden dark:block, nol JavaScript. Hati-hati: dark variant Tailwind v4 defaultnya ngikutin OS, bukan toggle class, plus alt text dan dimensi jangan dilupain.

Refactor kaki halaman website korporat: kolom brand menempel ke dasar cuma pakai stretch plus mt-auto, tanpa JavaScript sama sekali.

TL;DR: Bikin kolom footer sejajar di dasar ternyata nggak butuh JavaScript, cukup align-items: stretch bawaan grid plus mt-auto. Lebar kolom bisa diatur pakai grid-cols-[1.4fr_1fr_1fr_1fr] biar blok brand lebih lega. Pelajarannya: cek dulu perilaku default sebelum nambah alat baru.

Revert font heading cuma satu baris karena semua heading membaca satu token. Eksperimen selera jadi murah.

TL;DR: Coba ganti font heading pakai Source Serif 4, kok 22 menit udah di-revert karena kelebayan bookish. Untung semua heading baca dari satu CSS variable, jadi undo-nya cuma satu baris, nggak perlu edit belasan file. Yang gagal dibuang, yang menang kayak nav Inter tetep kepake, eksperimen murah emang enak.

Border kartu lenyap di atas latar muted karena dua warna abu-abu kembar. Pelajaran soal token, kontras, dan asumsi latar.

TL;DR: Border kartunya nggak hilang, cuma warnanya kembaran sama latar muted jadi kayak ngumpet. Perbaikannya satu baris doang: ganti ke border-primary/15 plus bg-card/40, sekalian benerin kontras biar lolos WCAG. Pelajarannya, token warna itu asumsi, komponen multi-surface mending dites di semua surface dulu.

Tiga commit restyling malam itu arahnya satu: buang ring, buang wrapper ikon, hapus strip sertifikasi yang dobel. Difnya negatif.

TL;DR: Pas restyle grid layanan, penulis sadar wrapper ikon cuma kebiasaan lama, jadi dihapus dan ikon Lucide dirender langsung dengan ukuran lebih besar plus stroke tipis biar lebih ringan. Strip sertifikasi ISO yang diduplikasi dari hero ikut dihapus, 34 baris kode lenyap. Moralnya, restyling yang sukses itu soal penghapusan; hiasan nggak perlu cuma jadi gangguan.

Nyamain gaya kartu layanan ternyata bukan soal nambah class, tapi hapus dekorasi dan pinjam satu kelas pembatas yang udah ada.

TL;DR: Awalnya gue pengen nyamain gaya kartu layanan dengan cara nambahin kelas utilitas kayak border sama shadow. Tapi ternyata kartu yang rapi cuma pake satu kelas bersama, reference-divider, jadi solusinya justru hapus semua dekorasinya. Pelajarannya: konsistensi paling gampang dicapai lewat penghapusan kode, bukan nambah-nambah kelas.

Copy class dari kartu jaringan perusahaan ternyata nggak cukup: identitas elemen li dan handler keyboard-nya harus ikut pindah.

TL;DR: Gara-gara niru kartu pakai copy-paste class Tailwind doang, garis pembatasnya nggak muncul karena struktur DOM-nya beda. Solusinya, kartu kantor diekstrak jadi komponen OfficeCard dengan role button dan handler keyboard, terus tinggal dipakai di dua ul berbeda. Ada juga bug daftar nampil dobel gara-gara ul lama kelupaan dihapus.