From 3861b17bb1002ad58645ac7c5ea99631c36c17f6 Mon Sep 17 00:00:00 2001
From: witt <unix.bio@gmail.com>
Date: Wed, 2 Feb 2022 01:23:48 +0800
Subject: [PATCH] docs: customize separate styles for instalation page (#700)

---
 lib/components/layout/layout.tsx   | 16 ++++++++++++++++
 pages/en-us/guide/installation.mdx |  5 +++--
 pages/zh-cn/guide/installation.mdx |  7 ++++++-
 3 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/lib/components/layout/layout.tsx b/lib/components/layout/layout.tsx
index 48724d60d..5203edf4f 100644
--- a/lib/components/layout/layout.tsx
+++ b/lib/components/layout/layout.tsx
@@ -63,6 +63,22 @@ export const Layout: React.FC<React.PropsWithChildren<LayoutProps>> = React.memo
             margin: 25px auto;
             transform: scale(0.95);
           }
+          .installation-tabs .tab.active:after {
+            display: none;
+          }
+          .installation-tabs .tab {
+            color: ${theme.palette.accents_3};
+          }
+          .installation-tabs .tab:hover {
+            color: ${theme.palette.accents_6};
+          }
+          .installation-tabs .tab.active {
+            font-weight: 500;
+            color: ${theme.palette.foreground};
+          }
+          .installation-tabs .content {
+            margin-top: 0;
+          }
         `}</style>
         <style jsx>{`
           .layout {
diff --git a/pages/en-us/guide/installation.mdx b/pages/en-us/guide/installation.mdx
index d3830d61e..b617a58ca 100644
--- a/pages/en-us/guide/installation.mdx
+++ b/pages/en-us/guide/installation.mdx
@@ -23,8 +23,9 @@ Also, Geist is based on the component library of framework React, which means yo
 <Tabs
   initialValue="yarn"
   hideDivider
-  leftSpace={0}
-  activeClassName="installation-example">
+  align="right"
+  mt="-46px"
+  className="installation-tabs">
   <Tabs.Item label="Yarn" value="yarn">
     <Snippet>yarn add @geist-ui/core</Snippet>
   </Tabs.Item>
diff --git a/pages/zh-cn/guide/installation.mdx b/pages/zh-cn/guide/installation.mdx
index 78263c04d..c28adf350 100644
--- a/pages/zh-cn/guide/installation.mdx
+++ b/pages/zh-cn/guide/installation.mdx
@@ -20,7 +20,12 @@ export const meta = {
   <Dot type="success">安装依赖</Dot>
 </h4>
 
-<Tabs initialValue="yarn" hideDivider leftSpace={0}>
+<Tabs
+  initialValue="yarn"
+  hideDivider
+  align="right"
+  mt="-46px"
+  className="installation-tabs">
   <Tabs.Item label="Yarn" value="yarn">
     <Snippet>yarn add @geist-ui/core</Snippet>
   </Tabs.Item>