From 306840c41adae7522d8eec508dbb394cec10d4d7 Mon Sep 17 00:00:00 2001
From: Viki <hi@viki.moe>
Date: Tue, 18 Jun 2024 16:15:14 +0800
Subject: [PATCH] docs: refine docs ui

---
 website/src/pages/components/search/index.tsx | 10 +++++-----
 website/src/pages/index.tsx                   |  8 ++++----
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/website/src/pages/components/search/index.tsx b/website/src/pages/components/search/index.tsx
index ef60880a..7024ac50 100644
--- a/website/src/pages/components/search/index.tsx
+++ b/website/src/pages/components/search/index.tsx
@@ -6,7 +6,7 @@ import { camelCase } from 'change-case'
 import hooks from './hooks.json'
 
 const filterLabelCls =
-  'inline-flex gap-1 items-center rounded border border-solid text-xs border-gray/20 px-2 py-1 rounded-full cursor-pointer'
+  'transition will-change-auto inline-flex gap-1 items-center rounded border border-solid text-xs border-gray/20 px-2 py-1 rounded-full cursor-pointer'
 
 export function SearchHooks() {
   const categories = useCreation(() => Array.from(new Set(hooks.map((e) => e.category))).sort())
@@ -42,7 +42,7 @@ export function SearchHooks() {
   }
 
   return (
-    <div className="flex flex-col gap-4 mt-12 p-4 w-100% lg:w-640px">
+    <div className="flex flex-col gap-4 mt-12 p-4 w-full md:w-640px">
       <div>
         <input
           {...input.props}
@@ -100,15 +100,15 @@ export function SearchHooks() {
         </div>
       </div>
       <div className="flex flex-wrap items-center gap-1">
-        <span
+        <div
           onClick={clearParams}
           onKeyDown={clearParams}
           className={`${filterLabelCls} bg-amber/20 flex items-center gap-1 hover:bg-amber/32`}
         >
           <div className="i-mdi:filter-remove-outline w-1rem h-1rem" />
           Clear Filters
-        </span>
-        <span className="ml-2 text-gray/80">{filteredHooks.length} hooks found, sorted by name from A-Z</span>
+        </div>
+        <span className="ml-2 text-gray">{filteredHooks.length} hooks found.</span>
       </div>
 
       <div className="overflow-y-scroll md:pt-2 md:h-46vh">
diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx
index 3385d0e8..344fed60 100644
--- a/website/src/pages/index.tsx
+++ b/website/src/pages/index.tsx
@@ -9,12 +9,12 @@ export default function Home() {
   return (
     <Layout>
       <div className="grid place-content-center">
-        <div className="flex gap-2 w-full flex-col md:gap-16 md:flex-row md:max-w-80vw">
-          <div className="flex flex-col items-center gap-4 pt-20vh md:pt-24vh text-center">
+        <div className="flex gap-2 w-full flex-col md:gap-12 md:flex-row md:max-w-78vw">
+          <div className="flex flex-col items-center md:items-start gap-4 pt-20vh md:pt-16vh">
             <span className="text-3.6rem">🪝</span>
-            <h1 className="font-mono">{siteConfig.title}</h1>
+            <h2 className="font-mono">{siteConfig.title}</h2>
             <p>{siteConfig.tagline}</p>
-            <div className="flex gap-4">
+            <div className="flex md:flex-col gap-4">
               <Link to="/docs/introduction">&rarr; Introduction</Link>
               <Link to="/docs/get-started">&rarr; Get Started</Link>
               <Link to="/reference">&rarr; Reference</Link>