docs: improve the copywriting content of the document (#571)

* docs: export individual style types for each component * docs: improve the copywriting content of the document * docs: optimize the document site experience on mobile devices
geist-org · Jun 26, 2021 · dacd959 · dacd959
1 parent 277f7e3
commit dacd959
Show file tree

Hide file tree

Showing 48 changed files with 499 additions and 351 deletions.
diff --git a/components/use-toasts/index.ts b/components/use-toasts/index.ts
@@ -1,4 +1,4 @@
 import useToasts from './use-toast'
 
-export type { ToastAction, Toast, ToastType } from './use-toast'
+export type { ToastAction, Toast, ToastTypes } from './use-toast'
 export default useToasts
diff --git a/components/use-toasts/use-toast.tsx b/components/use-toasts/use-toast.tsx
@@ -10,10 +10,10 @@ export interface ToastAction {
   handler: (event: React.MouseEvent<HTMLButtonElement>, cancel: () => void) => void
   passive?: boolean
 }
-export type ToastType = NormalTypes
+export type ToastTypes = NormalTypes
 export interface Toast {
   text?: string | React.ReactNode
-  type?: ToastType
+  type?: ToastTypes
   delay?: number
   actions?: Array<ToastAction>
 }

diff --git a/lib/components/layout.tsx b/lib/components/layout.tsx
@@ -62,7 +62,6 @@ export const Layout: React.FC<React.PropsWithChildren<Props>> = React.memo(
             display: flex;
             box-sizing: border-box;
           }
-
           .sidebar {
             width: 200px;
             margin-right: 20px;
@@ -76,13 +75,11 @@ export const Layout: React.FC<React.PropsWithChildren<Props>> = React.memo(
             transition: transform 200ms ease-out;
             z-index: 100;
           }
-
           .side-shadow {
             width: 220px;
             flex-shrink: 0;
             height: 100vh;
           }
-
           .main {
             display: flex;
             max-width: calc(100% - 220px);
@@ -97,7 +94,7 @@ export const Layout: React.FC<React.PropsWithChildren<Props>> = React.memo(
             .layout {
               max-width: 100%;
               width: 100%;
-              padding: 5rem 1rem;
+              padding: 20px 1rem;
             }
 
             .sidebar {
@@ -107,11 +104,14 @@ export const Layout: React.FC<React.PropsWithChildren<Props>> = React.memo(
               right: 0;
               z-index: 10;
               width: 100vw;
-              height: ${expanded ? '100vh' : '0'};
-              background-color: ${theme.palette.background};
-              padding: 0;
+              box-sizing: border-box;
+              height: ${expanded ? '90vh' : '0'};
+              background-color: transparent;
+              backdrop-filter: invert(15%) blur(5px);
+              padding: var(--geist-page-nav-height) 0 0 0;
               overflow: hidden;
               transition: height 250ms ease;
+              box-shadow: ${expanded ? theme.expressiveness.shadowSmall : 'none'};
             }
 
             .main {

diff --git a/lib/components/menu/menu-links.tsx b/lib/components/menu/menu-links.tsx
@@ -33,7 +33,7 @@ const MenuLinks = () => {
           position: relative;
           margin: 0 auto;
           padding: 0 ${theme.layout.gap};
-          height: 60px;
+          height: var(--geist-page-nav-height);
         }
 
         .site-name {

diff --git a/lib/components/menu/menu-sticker.tsx b/lib/components/menu/menu-sticker.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo } from 'react'
-import { Tabs, useTheme } from 'components'
+import { useMediaQuery, Tabs, useTheme } from 'components'
 import useCurrentState from 'components/utils/use-current-state'
 import Router from 'next/router'
 import Metadatas from 'lib/data'
@@ -12,10 +12,13 @@ const MenuSticker = () => {
   const { tabbar: currentUrlTabValue, locale } = useLocale()
   const [tabValue, setTabValue, tabValueRef] = useCurrentState<string>('')
   const [fixed, setFixed, fixedRef] = useCurrentState<boolean>(false)
+  const isSM = useMediaQuery('sm', { match: 'down' })
+  const isXS = useMediaQuery('xs', { match: 'down' })
+  const isFixedTabs = fixed && !isXS
 
   const tabbarData = useMemo(() => Metadatas[locale], [locale])
 
-  useEffect(() => updateTabbarFixed(fixed), [fixed])
+  useEffect(() => updateTabbarFixed(isFixedTabs), [isFixedTabs])
   useEffect(() => setTabValue(currentUrlTabValue), [currentUrlTabValue])
   useEffect(() => {
     const scrollHandler = () => {
@@ -36,15 +39,18 @@ const MenuSticker = () => {
 
   return (
     <>
-      <div className={`nav-fill ${fixed ? 'active' : ''}`} />
-      <nav className={fixed ? 'fixed' : ''}>
+      <div className={`nav-fill ${isFixedTabs ? 'active' : ''}`} />
+      <nav className={isFixedTabs ? 'fixed' : ''}>
         <div className="sticker">
-          <div className="inner">
-            <Tabs height="46px" value={tabValue} onChange={val => setTabValue(val)}>
+          <div className={`inner ${isSM && 'sm'}`}>
+            <Tabs
+              height="calc(var(--geist-page-tab-height) - 2px)"
+              value={tabValue}
+              onChange={val => setTabValue(val)}>
               {tabbarData
                 ? tabbarData.map((tab, index) => (
                     <Tabs.Item
-                      height="46px"
+                      height="calc(var(--geist-page-tab-height) - 2px)"
                       font="14px"
                       py={0}
                       label={tab.localeName || tab.name}
@@ -68,14 +74,14 @@ const MenuSticker = () => {
         }
 
         .nav-fill.active {
-          height: 48px;
+          height: var(--geist-page-tab-height);
           visibility: visible;
         }
 
         nav {
           position: relative;
           width: 100%;
-          height: 48px;
+          height: var(--geist-page-tab-height);
           background-color: ${theme.palette.background};
         }
 
@@ -113,6 +119,20 @@ const MenuSticker = () => {
           margin: 0 auto;
         }
 
+        .inner.sm {
+          width: 100%;
+        }
+        .inner.sm :global(.tab) {
+          width: 33.333%;
+          display: inline-flex;
+          justify-content: center;
+          align-items: center;
+          margin: 0;
+        }
+        .inner.sm :global(.tab.active) {
+          background-color: ${theme.palette.accents_2};
+        }
+
         .inner :global(.content) {
           display: none;
         }

diff --git a/lib/components/sidebar/active-catalog.tsx b/lib/components/sidebar/active-catalog.tsx
@@ -27,6 +27,19 @@ const ActiveCatalog: React.FC<Props> = React.memo(({ name, localeName, ...props
         .active {
           color: ${theme.palette.foreground};
         }
+
+        @media only screen and (max-width: ${theme.layout.breakpointMobile}) {
+          span {
+            letter-spacing: 0.3px;
+            display: inline-block;
+            font-weight: 800;
+            font-size: 17px;
+            padding: 15px 10px 10px;
+            width: 100%;
+            text-align: center;
+            color: ${theme.palette.accents_6};
+          }
+        }
       `}</style>
     </span>
   )

diff --git a/lib/components/sidebar/active-link.tsx b/lib/components/sidebar/active-link.tsx
@@ -20,7 +20,7 @@ const ActiveLink: React.FC<Props> = React.memo(({ href, text }) => {
   const isActive = pathname === href
 
   return (
-    <div className="link">
+    <div className={`link ${isActive ? 'active' : ''}`}>
       <Link href={href}>
         <a className={isActive ? 'active' : ''}>
           {title}
@@ -61,6 +61,30 @@ const ActiveLink: React.FC<Props> = React.memo(({ href, text }) => {
           color: ${theme.palette.accents_4};
           font-weight: 400;
         }
+
+        @media only screen and (max-width: ${theme.layout.breakpointMobile}) {
+          .link {
+            background-color: ${theme.palette.accents_1};
+            margin-bottom: 22px;
+            padding: 0 25px;
+            border-radius: 30px;
+            height: 64px;
+            user-select: none;
+          }
+          .link.active {
+            border: 8px solid ${theme.palette.accents_5};
+            background-color: ${theme.palette.background};
+          }
+          a {
+            font-weight: bold;
+            font-size: 22px;
+            color: ${theme.palette.accents_6};
+          }
+          a.active {
+            font-size: 22px;
+            color: ${theme.palette.accents_5};
+          }
+        }
       `}</style>
     </div>
   )

diff --git a/lib/components/sidebar/index.tsx b/lib/components/sidebar/index.tsx
@@ -76,7 +76,7 @@ export const Sidebar: React.FC<Props> = React.memo(() => {
 
         @media only screen and (max-width: ${theme.layout.breakpointMobile}) {
           .box {
-            padding: calc(3.5 * ${theme.layout.gap}) 15vw;
+            padding: 20px 35px 10px;
             width: 100vw;
             height: 100%;
           }

diff --git a/lib/components/sidebar/tabbar-mobile.tsx b/lib/components/sidebar/tabbar-mobile.tsx
@@ -15,24 +15,25 @@ const TabbarMobile: React.FC<Props> = ({ onClick }) => {
   return (
     <div className="tabbar">
       <Button className="toggle" auto type="abort" onClick={handler}>
-        <SlidersIcon size={16} />
+        <SlidersIcon size={14} />
       </Button>
-      <span>Geist UI</span>
+      <span className="geist-ui">Geist UI</span>
       <style jsx>{`
         .tabbar {
           position: fixed;
           top: 0;
           left: 0;
           right: 0;
           z-index: 950;
-          height: 3.7rem;
-          background-color: ${theme.palette.background};
+          height: var(--geist-page-nav-height);
+          background-color: ${theme.palette.accents_1};
           display: flex;
           align-items: center;
-          padding: 0 calc(${theme.layout.gap} * 2);
+          padding: 0 20px;
           box-sizing: border-box;
           justify-content: space-between;
           border-bottom: 1px solid ${theme.palette.border};
+          box-shadow: ${theme.expressiveness.shadowSmall};
         }
 
         .tabbar :global(.toggle) {
@@ -45,11 +46,15 @@ const TabbarMobile: React.FC<Props> = ({ onClick }) => {
           color: ${theme.palette.accents_6};
         }
 
-        span {
-          color: ${theme.palette.accents_7};
-          font-size: 0.75rem;
+        .geist-ui {
+          color: ${theme.palette.foreground};
+          font-size: 17px;
+          font-weight: bold;
+          padding-right: 5px;
           display: inline-flex;
           text-transform: capitalize;
+          user-select: none;
+          letter-spacing: 0.4px;
         }
 
         @media only screen and (min-width: ${theme.layout.breakpointMobile}) {