; --warna-teks: ; --warna-latar: ; --warna-latar-widget: ; --warna-border: ; /* --- Variabel Font --- */ --font-utama: ; --font-judul: ; /* --- Variabel Layout --- */ --lebar-maksimal: ; --border-radius: ; } /* ===== (B) CSS DASAR (RESET MINIMAL) ===== */ body { background-color: var(--warna-latar); color: var(--warna-teks); font-family: var(--font-utama); margin: 0; padding: 0; line-height: 1.7; /* Kenyamanan membaca dasar */ } *, *::before, *::after { box-sizing: border-box; } a { color: var(--warna-primer); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-judul); font-weight: 700; } img { max-width: 100%; height: auto; } p { margin: 0 0 1.25em; /* Jarak antar paragraf */ } /* ======================================== (C) CSS VANILA MODERN (GAYA UTAMA) Ditulis tangan untuk performa maksimal ======================================== */ /* --- 1. Layout Wrapper Utama --- */ .container-wrapper { max-width: var(--lebar-maksimal); margin: 0 auto; /* Tengah */ padding: 0 16px; /* Jarak pinggir 16px */ } /* --- 2. Header (b:widget id='Header1') --- */ .header-section .Header { display: flex; flex-direction: column; align-items: center; padding: 24px 0; border-bottom: 1px solid var(--warna-border); } .header-section .Header h1 { font-size: 36px; font-weight: 700; color: var(--warna-primer); margin: 0; } .header-section .Header h1 a { color: inherit; text-decoration: none; } .header-section .Header .description { font-size: 18px; color: var(--warna-teks); opacity: 0.7; margin-top: 4px; } .header-section .Header .header-image-wrapper { } .header-section .Header .titlewrapper, .header-section .Header .descriptionwrapper { display: block; } /* --- 3. Navigasi (b:section id='navigation') --- */ /* Men-styling widget 'LinkList' (Daftar Link) sebagai menu */ .navigation-section { background-color: var(--warna-latar-widget); border-bottom: 1px solid var(--warna-border); box-shadow: 0 2px 4px rgba(0,0,0,0.05); } .navigation-section .widget.LinkList { max-width: var(--lebar-maksimal); margin: 0 auto; padding: 0 16px; } .navigation-section .widget.LinkList ul { display: flex; flex-direction: row; /* Berjajar horizontal */ flex-wrap: wrap; /* Bisa 'turun' di mobile */ list-style: none; padding: 0; margin: 0; } .navigation-section .widget.LinkList li a { display: block; padding: 16px 12px; font-weight: 700; color: var(--warna-teks); text-decoration: none; border-bottom: 2px solid transparent; } .navigation-section .widget.LinkList li a:hover, .navigation-section .widget.LinkList li.selected a { color: var(--warna-primer); border-bottom-color: var(--warna-primer); } /* Sembunyikan Judul Widget Menu */ .navigation-section .widget h2.title { display: none; } /* --- 4. Main & Sidebar Layout (CSS GRID) --- */ .main-sidebar-wrapper { display: grid; grid-template-columns: 1fr; /* Mobile-first: 1 kolom */ gap: 24px; /* Jarak antar kolom */ padding: 24px 0; /* Jarak atas/bawah */ } /* Desktop Breakpoint (Tablet ke atas) */ @media (min-width: 768px) { .main-sidebar-wrapper { /* Layout 3 kolom: 2 untuk main, 1 untuk sidebar */ grid-template-columns: repeat(3, 1fr); } .main-content { grid-column: span 2 / span 2; /* Main ambil 2 kolom */ } .sidebar-content { grid-column: span 1 / span 1; /* Sidebar ambil 1 kolom */ } } /* --- 5. Styling Widget Sidebar (Sangat Penting) --- */ .sidebar-content .widget { background-color: var(--warna-latar-widget); border: 1px solid var(--warna-border); border-radius: var(--border-radius); padding: 20px; margin-bottom: 24px; } .sidebar-content .widget h2.title { font-size: 18px; font-weight: 700; margin-top: 0; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--warna-border); } .sidebar-content .widget ul, .sidebar-content .widget ol { list-style: none; padding: 0; margin: 0; } .sidebar-content .widget li { padding: 6px 0; border-bottom: 1px solid var(--warna-border); } .sidebar-content .widget li:last-child { border-bottom: none; } /* --- 6. Styling Postingan (b:widget id='Blog1') --- */ /* (A) Wrapper Tiap Postingan (Homepage) */ .Blog .post-outer { background-color: var(--warna-latar-widget); border: 1px solid var(--warna-border); border-radius: var(--border-radius); margin-bottom: 24px; padding: 24px; } /* (B) Judul Postingan */ .Blog .post-title { font-size: 28px; margin: 0 0 12px 0; } .Blog .post-title a { color: var(--warna-teks); text-decoration: none; } .Blog .post-title a:hover { color: var(--warna-primer); } /* (C) Konten Postingan (Item Page) */ .Blog .post-body { font-size: 16px; line-height: 1.8; } .Blog .post-body h2, .Blog .post-body h3, .Blog .post-body h4 { margin-top: 2em; margin-bottom: 1em; } .Blog .post-body blockquote { margin: 1.5em 0; padding: 1em 1.5em; border-left: 4px solid var(--warna-primer); background-color: var(--warna-latar); font-style: italic; } /* (D) Tombol "Read More" (Jump Link) */ .Blog .jump-link a { display: inline-block; background-color: var(--warna-primer); color: #ffffff; padding: 10px 20px; font-weight: 700; border-radius: var(--border-radius); text-decoration: none; margin-top: 16px; } .Blog .jump-link a:hover { opacity: 0.8; color: #ffffff; text-decoration: none; } /* --- 7. Pagination (Navigasi Halaman) --- */ .blog-pager { display: flex; justify-content: space-between; align-items: center; padding: 24px 0; border-top: 1px solid var(--warna-border); margin-top: 24px; } .blog-pager a { padding: 10px 20px; border: 1px solid var(--warna-border); border-radius: var(--border-radius); font-weight: 700; } .blog-pager a:hover { background-color: var(--warna-primer); color: #ffffff; text-decoration: none; border-color: var(--warna-primer); } /* --- 8. Footer Section --- */ .footer-section { border-top: 1px solid var(--warna-border); margin-top: 24px; padding: 32px 0; text-align: center; color: var(--warna-teks); opacity: 0.8; } /* Footer widget-nya kita buat polos tanpa background */ .footer-section .widget { padding: 0; margin: 0 0 16px 0; } .footer-section .widget h2.title { display: none; /* Sembunyikan judul widget di footer */ } ]]>