docs: Update docs website style. (#1488)

docs/.vitepress/config.mts

@@ -57,6 +57,9 @@ const config: UserConfig = {
       message:
         "GPUI Component is an open source project under the Apache-2.0 License, developed by <a href='https://longbridge.com' target='_blank'>Longbridge</a>.",
       copyright: `
+      <div>
+      <a href="https://gpui.rs">GPUI</a>
+      |
       <a href="/gpui-component/contributors">Contributors</a>
       |
       <a href="/gpui-component/llms-full.txt" target="_blank">llms-full.txt</a>
@@ -64,6 +67,7 @@ const config: UserConfig = {
       <a href="https://github.com/longbridge/gpui-component/issues" target="_blank">Report Bug</a>
       |
       <a href="https://github.com/longbridge/gpui-component/discussions" target="_blank">Discussion</a>
+      </div>
       `,
     },
     // https://vitepress.dev/reference/default-theme-config

docs/.vitepress/theme/style.css

@@ -50,12 +50,14 @@
   --vp-c-default-1: var(--secondary);
   --vp-c-default-2: var(--muted);
 
+  --vp-nav-bg-color: var(--background);
   --vp-custom-block-tip-border: var(--vp-c-default-3);
   --vp-custom-block-tip-text: var(--vp-c-text-1);
   --vp-custom-block-tip-bg: transparent;
   --vp-custom-block-tip-code-bg: var(--vp-c-default-soft);
   --vp-input-switch-bg-color: var(--secondary);
   --vp-input-border-color: var(--input);
+  --vp-c-divider: var(--border);
 }
 
 .dark {
@@ -92,13 +94,9 @@
   --sidebar-ring: oklch(0.439 0 0);
 }
 
-.VPSidebar {
-  border-right: 1px solid var(--border);
-}
-
 #app {
   .VPMenu {
-    @apply p-1 rounded-md bg-[var(--popover)];
+    @apply p-1 rounded-md bg-(--popover);
 
     .link {
       @apply text-sm py-1;
@@ -108,9 +106,56 @@
   .DocSearch-Button {
     @apply rounded-md py-0 px-2 h-8 lg:w-56 xl:w-64;
   }
+
+  .VPNav {
+    @apply bg-(--background) border-b border-(--border) border-dashed;
+
+    .divider {
+      @apply hidden;
+    }
+  }
+
+  .VPFooter {
+    @apply border-dashed;
+  }
+
+  .VPSidebar {
+    @apply border-r border-dashed border-(--border) bg-(--background);
+
+    .VPSidebarItem .items {
+      @apply border-dashed;
+    }
+  }
+
+  .VPNavBarTitle {
+    a.title {
+      border-bottom: 0 !important;
+    }
+  }
+
+  .aside {
+    .content {
+      @apply border-dashed;
+    }
+  }
+
+  .prev-next {
+    @apply border-0 pt-0;
+
+    .pager-link {
+      @apply border-dashed;
+    }
+  }
 }
 
 .vp-doc {
+  h2 {
+    @apply border-t-0 mt-10 pt-0 pb-3 border-b border-dashed border-(--border);
+
+    .header-anchor {
+      @apply top-0;
+    }
+  }
   [class*="language-"] pre {
     @apply rounded-md py-5 text-base font-mono;
   }

docs/index.vue

@@ -11,7 +11,7 @@
             <a href="docs/components"><Blocks /> Components</a>
         </div>
     </div>
-    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 mb-12">
+    <div class="features">
         <div class="feature-card">
             <h3>
                 <div class="icon bg-green-500 dark:bg-green-700">
@@ -107,21 +107,22 @@ import {
 @reference "./.vitepress/theme/style.css";
 
 .banner {
-    @apply mb-8 py-12 xl:py-30 text-center;
+    @apply -mt-20 py-12 xl:py-30 text-center border border-b-0 border-dashed border-(--border);
+
     h1 {
-        @apply text-3xl xl:text-5xl font-bold mb-2 text-[var(--primary)];
+        @apply mt-20 text-3xl xl:text-5xl font-bold mb-2 text-(--primary);
     }
     .banner-description {
-        @apply text-lg xl:text-2xl text-[var(--muted-foreground)] mt-2 xl:mt-4;
+        @apply text-lg xl:text-2xl text-(--muted-foreground) mt-2 xl:mt-4;
     }
     .actions {
         @apply mt-4 flex gap-4 justify-center text-sm;
         a {
             @apply flex items-center h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5 no-underline
-            bg-[var(--secondary)] hover:bg-[var(--secondary)]/70 text-[var(--secondary-foreground)];
+            bg-(--secondary) hover:bg-(--secondary)/70 text-(--secondary-foreground);
 
             &.btn-primary {
-                @apply bg-[var(--primary)] hover:bg-[var(--primary)]/90 text-[var(--primary-foreground)];
+                @apply bg-(--primary) hover:bg-(--primary)/90 text-(--primary-foreground);
             }
 
             .lucide {
@@ -130,11 +131,17 @@ import {
         }
     }
 }
+
+.features {
+    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 mb-12 border-b border-r border-dashed border-(--border);
+}
+
 .feature-card {
-    @apply flex flex-col text-sm gap-2 py-3.5 px-5 border border-[var(--border)] rounded-lg;
+    @apply flex flex-col text-sm gap-2 py-3.5 px-5 border border-b-0 border-(--border) border-dashed;
+    @apply border-r-0 last:border-r-0 md:last:border-b-0 lg:last:border-b-0;
 
     h3 {
-        @apply m-0 p-0 text-lg text-[var(--primary)] flex gap-3 items-center;
+        @apply m-0 p-0 text-lg text-(--primary) flex gap-3 items-center;
 
         .icon {
             @apply flex h-9 w-9 items-center justify-center rounded-md text-white;