feat: update docs site branding with custom logo, favicon, and elegant navbar styling

2026-06-24 16:35:14 +07:00
parent 30c95e338b
commit 3d56eed2b8
4 changed files with 70 additions and 2 deletions
@@ -26,3 +26,55 @@
  --vp-c-brand-3: #652ed9;
  --vp-c-brand-soft: rgba(101, 46, 217, 0.25);
 }
+
+/* Sesuaikan ukuran logo di navbar */
+/* .VPNavBar .logo {
+  height: 32px;
+}
+
+.VPNavBar .VPNavBarTitle{
+  
+} */
+
+/* ==========================================================================
+   OPTIMASI NAVBAR TITLE & LOGO (ELEGANT ALIGNMENT)
+   ========================================================================== */
+.VPNavBar .VPNavBarTitle {
+  display: flex;
+  align-items: center; /* Memastikan logo & teks sejajar sempurna secara vertikal */
+  gap: 12px;           /* Spasi yang lebih longgar dan elegan antara logo & teks */
+  padding: 0 16px;     /* Memberikan ruang napas di dalam kontainer title */
+}
+
+/* ==========================================================================
+   ELEGANT HARMONIOUS GRADIENT (Subtle Mode-Aware)
+   ========================================================================== */
+.VPNavBar .VPNavBarTitle .title {
+  /* LIGHT MODE: Gradien dari warna Brand gelap ke warna Brand terang */
+  /* Kita hindari hitam pekat, gunakan ungu yang lebih dalam */
+  background: linear-gradient(135deg, #4b23a6 0%, var(--vp-c-brand-1) 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  transition: all 0.3s ease;
+}
+
+/* DARK MODE: Gradien dari ungu sangat muda ke warna Brand */
+.dark .VPNavBar .VPNavBarTitle .title {
+  /* Kita kurangi dominasi putih dengan menggunakan ungu yang sangat terang */
+  background: linear-gradient(135deg, #c5a8ff 30%, var(--vp-c-brand-1) 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  /* Glow diperhalus agar tidak terlalu menyilaukan */
+  filter: drop-shadow(0 0 8px rgba(101, 46, 217, 0.2));
+}
+
+/* Hover effect yang lebih kalem */
+.VPNavBar .VPNavBarTitle .title:hover {
+  filter: drop-shadow(0 0 12px rgba(101, 46, 217, 0.4));
+}
+
+.VPNavBar .logo {
+  height: 28px;            /* Menyeimbangkan ukuran logo dengan tinggi teks */
+  width: 28px;
+  margin-right: 0;         /* Margin sudah digantikan oleh 'gap' pada parent */
+}