From e4bb5a3b09a96ae224f92e3f6cb80e0f97786800 Mon Sep 17 00:00:00 2001
From: syfxlin <i@ixk.me>
Date: Wed, 31 Jan 2024 01:23:53 +0800
Subject: [PATCH 1/2] fix(style): Fix some styles

---
 public/content/config/header.yaml             | 14 +---
 src/app/(special)/links/page.tsx              |  1 +
 src/app/(special)/projects/page.tsx           |  1 +
 src/components/layouts/footer/styles.css.ts   |  2 +-
 src/components/layouts/grid/styles.css.ts     |  7 +-
 src/components/layouts/header/back.tsx        | 25 -------
 src/components/layouts/header/blog.tsx        | 19 +++++
 src/components/layouts/header/home.tsx        | 31 --------
 src/components/layouts/header/index.tsx       | 69 +++++++++--------
 src/components/layouts/header/menu.tsx        | 30 ++++++++
 src/components/layouts/header/search.tsx      |  2 +-
 src/components/layouts/header/styles.css.ts   | 74 +++++++++++++++----
 src/components/layouts/header/theme.tsx       |  2 +-
 src/components/layouts/main/index.tsx         | 10 ++-
 src/components/layouts/main/styles.css.ts     | 27 ++++++-
 src/components/root/spotlight/styles.css.ts   |  5 +-
 src/components/templates/articles/index.tsx   | 20 ++---
 .../templates/articles/styles.css.ts          |  3 +-
 src/components/templates/template/index.tsx   |  5 +-
 src/components/ui/image/index.tsx             |  4 +-
 src/locales/en.ts                             |  1 +
 src/locales/zh-hans.ts                        |  1 +
 src/locales/zh-hant.ts                        |  1 +
 src/theme/global.css.ts                       |  2 +-
 src/theme/theme.css.ts                        | 30 +++++---
 src/theme/tokens.ts                           | 10 +--
 26 files changed, 236 insertions(+), 160 deletions(-)
 delete mode 100644 src/components/layouts/header/back.tsx
 create mode 100644 src/components/layouts/header/blog.tsx
 delete mode 100644 src/components/layouts/header/home.tsx
 create mode 100644 src/components/layouts/header/menu.tsx

diff --git a/public/content/config/header.yaml b/public/content/config/header.yaml
index 9217f7143..83f734200 100644
--- a/public/content/config/header.yaml
+++ b/public/content/config/header.yaml
@@ -14,20 +14,8 @@ main:
   - title: 归档
     link: /archives
     icon: ri:archive-line
-    view: elastic-text
+    view: elastic-icon
   - title: 留言
     link: /message-board
     icon: ri:message-3-line
-    view: elastic-text
-  - title: GitHub
-    link: https://github.com/syfxlin
-    icon: uil:github-alt
-    view: elastic-icon
-  - title: Twitter
-    link: https://twitter.com/syfxlin
-    icon: uil:twitter-alt
-    view: elastic-icon
-  - title: Telegram
-    link: https://t.me/otstar
-    icon: uil:telegram-alt
     view: elastic-icon
diff --git a/src/app/(special)/links/page.tsx b/src/app/(special)/links/page.tsx
index 5da66a63e..c0e19c448 100644
--- a/src/app/(special)/links/page.tsx
+++ b/src/app/(special)/links/page.tsx
@@ -22,6 +22,7 @@ export default async function LinksPage() {
   return (
     <Template
       artalk
+      size="lg"
       link="/links"
       name={t("links.name")}
       desc={t("links.desc", data.links?.length ?? 0, data.lost_links?.length ?? 0)}
diff --git a/src/app/(special)/projects/page.tsx b/src/app/(special)/projects/page.tsx
index 6ef88bd71..a953fa350 100644
--- a/src/app/(special)/projects/page.tsx
+++ b/src/app/(special)/projects/page.tsx
@@ -22,6 +22,7 @@ export default async function ProjectsPage() {
   return (
     <Template
       artalk
+      size="lg"
       link="/projects"
       name={t("projects.name")}
       desc={t("projects.desc", data.categories?.length ?? 0, data.categories?.reduce((a, i) => a + i.projects.length, 0) ?? 0)}
diff --git a/src/components/layouts/footer/styles.css.ts b/src/components/layouts/footer/styles.css.ts
index c6f9152ff..6be9fe91b 100644
--- a/src/components/layouts/footer/styles.css.ts
+++ b/src/components/layouts/footer/styles.css.ts
@@ -4,7 +4,7 @@ import { theme } from "../../../theme/theme.css";
 export const container = styled.css`
   position: relative;
   width: 100%;
-  max-width: ${theme.fontSize.calc(50)};
+  max-width: ${theme.breakpoint.sm};
   margin: 0 auto;
   padding: ${theme.spacing.calc(5)} ${theme.spacing.calc(8)};
   display: flex;
diff --git a/src/components/layouts/grid/styles.css.ts b/src/components/layouts/grid/styles.css.ts
index 49097d0f1..5e211e578 100644
--- a/src/components/layouts/grid/styles.css.ts
+++ b/src/components/layouts/grid/styles.css.ts
@@ -6,20 +6,19 @@ export const container = styled.css`
   flex-wrap: wrap;
   justify-content: center;
   gap: ${theme.spacing.calc(2)};
-  margin: 0 ${theme.fontSize.calc(-15)};
 
-  @media screen and (max-width: ${theme.fontSize.calc(75)}) {
+  ${theme.media.lg} {
     margin: 0;
   }
 
   > * {
     width: calc((100% - ${theme.spacing.calc(4)}) / 3);
 
-    @media screen and (max-width: ${theme.fontSize.calc(80)}) {
+    ${theme.media.lg} {
       width: calc((100% - ${theme.spacing.calc(2)}) / 2);
     }
 
-    @media screen and (max-width: ${theme.fontSize.calc(50)}) {
+    ${theme.media.sm} {
       width: 100%;
     }
   }
diff --git a/src/components/layouts/header/back.tsx b/src/components/layouts/header/back.tsx
deleted file mode 100644
index f2eb5e085..000000000
--- a/src/components/layouts/header/back.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-"use client";
-import React, { ReactNode } from "react";
-import { usePathname } from "next/navigation";
-import { cx } from "@syfxlin/reve";
-import { LinkButton } from "../../ui/button";
-import { t } from "../../../locales";
-import * as styles from "./styles.css";
-
-export interface BackProps {
-  icon: ReactNode;
-}
-
-export const Back: React.FC<BackProps> = ({ icon }) => {
-  const path = usePathname();
-  if (path !== "/") {
-    return (
-      <LinkButton tooltip aria-label={t("header.home")} href="/" className={cx(styles.view_elastic_icon, styles.back)}>
-        <span>{t("header.home")}</span>
-        {icon}
-      </LinkButton>
-    );
-  } else {
-    return null;
-  }
-};
diff --git a/src/components/layouts/header/blog.tsx b/src/components/layouts/header/blog.tsx
new file mode 100644
index 000000000..64cf0d8e1
--- /dev/null
+++ b/src/components/layouts/header/blog.tsx
@@ -0,0 +1,19 @@
+"use client";
+import React, { ReactNode } from "react";
+import { LinkButton } from "../../ui/button";
+import { resolve } from "../../../utils/vender";
+import { t } from "../../../locales";
+import * as styles from "./styles.css";
+
+export interface BlogProps {
+  icon: ReactNode;
+}
+
+export const Blog: React.FC<BlogProps> = ({ icon }) => {
+  return (
+    <LinkButton tooltip={{ placement: "left" }} aria-label={t("header.blog")} href={resolve("page", 1)} className={styles.view_elastic}>
+      <span><span>「</span>{t("header.blog")}<span>」</span></span>
+      {icon}
+    </LinkButton>
+  );
+};
diff --git a/src/components/layouts/header/home.tsx b/src/components/layouts/header/home.tsx
deleted file mode 100644
index bd3059683..000000000
--- a/src/components/layouts/header/home.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-"use client";
-import React, { ReactNode } from "react";
-import { usePathname } from "next/navigation";
-import { LinkButton } from "../../ui/button";
-import { resolve } from "../../../utils/vender";
-import { t } from "../../../locales";
-import * as styles from "./styles.css";
-
-export interface HomeProps {
-  home: ReactNode;
-  blog: ReactNode;
-}
-
-export const Home: React.FC<HomeProps> = ({ home, blog }) => {
-  const path = usePathname();
-  if (path !== "/") {
-    return (
-      <LinkButton tooltip aria-label={t("header.home")} href="/" className={styles.view_elastic}>
-        <span>{t("header.home")}</span>
-        {home}
-      </LinkButton>
-    );
-  } else {
-    return (
-      <LinkButton tooltip aria-label={t("header.blog")} href={resolve("page", 1)} className={styles.view_elastic}>
-        <span>{t("header.blog")}</span>
-        {blog}
-      </LinkButton>
-    );
-  }
-};
diff --git a/src/components/layouts/header/index.tsx b/src/components/layouts/header/index.tsx
index c316b572f..8fea9e83f 100644
--- a/src/components/layouts/header/index.tsx
+++ b/src/components/layouts/header/index.tsx
@@ -3,44 +3,49 @@ import { cx } from "@syfxlin/reve";
 import { fetcher } from "../../../contents";
 import { LinkButton } from "../../ui/button";
 import { Iconify } from "../../ui/iconify";
-import { Rss } from "./rss";
-import { Back } from "./back";
-import { Home } from "./home";
+import { Image } from "../../ui/image";
+import { t } from "../../../locales";
 import { Theme } from "./theme";
 import { Search } from "./search";
 import * as styles from "./styles.css";
+import { Blog } from "./blog";
+import { Menu } from "./menu";
 
 export const Header: React.FC = async () => {
-  const header = await fetcher.header();
+  const [seo, header] = await Promise.all([fetcher.seo(), fetcher.header()]);
   return (
-    <header className={styles.container}>
-      <div className={styles.left}>
-        <Back icon={<Iconify icon="ri:arrow-left-s-line" />} />
-      </div>
-      <div className={styles.right}>
-        <Home home={<Iconify icon="ri:home-5-line" />} blog={<Iconify icon="ri:article-line" />} />
-        {header.main.map(item => (
-          <LinkButton
-            tooltip
-            key={`nav-${item.link}`}
-            href={item.link}
-            aria-label={item.title}
-            className={cx(
-              item.view === "text" && styles.view_text,
-              item.view === "icon" && styles.view_icon,
-              item.view === "elastic" && styles.view_elastic,
-              item.view === "elastic-text" && styles.view_elastic_text,
-              item.view === "elastic-icon" && styles.view_elastic_icon,
-            )}
-          >
-            <span>{item.title}</span>
-            <Iconify icon={item.icon} />
+    <>
+      <Menu icon={<Iconify icon="ri:menu-line" />} />
+      <header className={styles.container}>
+        <div className={styles.left}>
+          <LinkButton aria-label={t("header.home")} href="/">
+            <Image className={styles.icon} src={seo.logo} alt={t("header.icon")} />
           </LinkButton>
-        ))}
-        <Rss icon={<Iconify icon="ri:rss-line" />} />
-        <Theme icon={<Iconify icon="ri:sun-line" />} />
-        <Search icon={<Iconify icon="ri:search-line" />} />
-      </div>
-    </header>
+        </div>
+        <div className={styles.right}>
+          <Blog icon={<Iconify icon="ri:article-line" />} />
+          {header.main.map(item => (
+            <LinkButton
+              tooltip={{ placement: "left" }}
+              key={`nav-${item.link}`}
+              href={item.link}
+              aria-label={item.title}
+              className={cx(
+                item.view === "text" && styles.view_text,
+                item.view === "icon" && styles.view_icon,
+                item.view === "elastic" && styles.view_elastic,
+                item.view === "elastic-text" && styles.view_elastic_text,
+                item.view === "elastic-icon" && styles.view_elastic_icon,
+              )}
+            >
+              <span><span>「</span>{item.title}<span>」</span></span>
+              <Iconify icon={item.icon} />
+            </LinkButton>
+          ))}
+          <Theme icon={<Iconify icon="ri:sun-line" />} />
+          <Search icon={<Iconify icon="ri:search-line" />} />
+        </div>
+      </header>
+    </>
   );
 };
diff --git a/src/components/layouts/header/menu.tsx b/src/components/layouts/header/menu.tsx
new file mode 100644
index 000000000..38da91b5f
--- /dev/null
+++ b/src/components/layouts/header/menu.tsx
@@ -0,0 +1,30 @@
+"use client";
+import React, { ReactNode, useRef } from "react";
+import { Button } from "../../ui/button";
+import { t } from "../../../locales";
+import * as styles from "./styles.css";
+
+export interface MenuProps {
+  icon: ReactNode;
+}
+
+export const Menu: React.FC<MenuProps> = ({ icon }) => {
+  const ref = useRef<HTMLButtonElement>(null);
+  return (
+    <nav className={styles.menu}>
+      <Button
+        ref={ref}
+        aria-label={t("header.menu")}
+        onClick={() => {
+          if (document.body.style.transform) {
+            document.body.style.transform = "";
+          } else {
+            document.body.style.transform = "translateX(100px)";
+          }
+        }}
+      >
+        {icon}
+      </Button>
+    </nav>
+  );
+};
diff --git a/src/components/layouts/header/search.tsx b/src/components/layouts/header/search.tsx
index 4dae6c9a3..95c04b277 100644
--- a/src/components/layouts/header/search.tsx
+++ b/src/components/layouts/header/search.tsx
@@ -13,7 +13,7 @@ export const Search: React.FC<SearchProps> = ({ icon }) => {
   const [active, setActive] = useState(false);
   return (
     <>
-      <Button tooltip aria-label={t("header.search")} onClick={() => setActive(p => !p)} className={styles.view_icon}>
+      <Button tooltip={{ placement: "left" }} aria-label={t("header.search")} onClick={() => setActive(p => !p)} className={styles.view_icon}>
         <span>{t("header.search")}</span>
         {icon}
       </Button>
diff --git a/src/components/layouts/header/styles.css.ts b/src/components/layouts/header/styles.css.ts
index e8e9ff9c5..3570adc0c 100644
--- a/src/components/layouts/header/styles.css.ts
+++ b/src/components/layouts/header/styles.css.ts
@@ -2,30 +2,76 @@ import { styled } from "@syfxlin/reve";
 import { theme } from "../../../theme/theme.css";
 
 export const container = styled.css`
-  height: 80px;
+  z-index: 5;
+  width: 100px;
+  height: 100%;
+  max-height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
   display: flex;
-  justify-content: space-between;
+  flex-direction: column;
+  justify-content: center;
   align-items: center;
-`;
+  overflow-y: auto;
+  transition: transform 0.3s, color 0.3s, background-color 0.3s;
 
-export const back = styled.css`
-  svg {
-    display: flex !important;
-    width: ${theme.fontSize.calc(1.3)} !important;
-    height: ${theme.fontSize.calc(1.3)} !important;
+  ${theme.media.md} {
+    transform: translateX(-100px);
   }
 `;
 
+export const icon = styled.css`
+  display: flex !important;
+  overflow: hidden !important;
+  writing-mode: horizontal-tb;
+  width: ${theme.fontSize.calc(2)} !important;
+  height: ${theme.fontSize.calc(2)} !important;
+  border-radius: ${theme.borderRadius.half} !important;
+`;
+
 export const left = styled.css`
   display: flex !important;
   gap: ${theme.spacing.calc(1)} !important;
-  margin: 0 ${theme.spacing.calc(5)} !important;
+  margin: ${theme.spacing.calc(1)} 0 ${theme.spacing.calc(2)} !important;
 `;
 
 export const right = styled.css`
+  display: flex !important;
+  gap: ${theme.spacing.calc(1)} !important;
+  margin: ${theme.spacing.calc(1)} 0 !important;
+  writing-mode: vertical-lr;
+
+  a {
+    padding: ${theme.spacing.calc(2.5)} ${theme.spacing.calc(2)};
+
+    span span {
+      display: inline-block;
+      letter-spacing: -0.3em;
+    }
+
+    span span:first-child {
+      transform: translateY(-0.3em);
+    }
+  }
+`;
+
+export const menu = styled.css`
+  transition: transform 0.3s, color 0.3s, background-color 0.3s;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100px;
+  height: 100px;
   display: flex;
-  gap: ${theme.spacing.calc(1)};
-  margin: 0 ${theme.spacing.calc(4)};
+  justify-content: center;
+  align-items: center;
+  transform: translateX(-100px);
+
+  ${theme.media.md} {
+    transform: translateX(0);
+  }
 `;
 
 export const view_text = styled.css`
@@ -63,7 +109,7 @@ export const view_elastic = styled.css`
     display: none !important;
   }
 
-  ${theme.media.md} {
+  ${theme.media.hmd} {
     > :nth-child(1) {
       display: none !important;
     }
@@ -85,7 +131,7 @@ export const view_elastic_text = styled.css`
     display: none !important;
   }
 
-  ${theme.media.md} {
+  ${theme.media.hmd} {
     display: none !important;
   }
 `;
@@ -101,7 +147,7 @@ export const view_elastic_icon = styled.css`
     display: inline !important;
   }
 
-  ${theme.media.md} {
+  ${theme.media.hmd} {
     display: none !important;
   }
 `;
diff --git a/src/components/layouts/header/theme.tsx b/src/components/layouts/header/theme.tsx
index 2ce1cf8e1..3d3f5f029 100644
--- a/src/components/layouts/header/theme.tsx
+++ b/src/components/layouts/header/theme.tsx
@@ -15,7 +15,7 @@ export const Theme: React.FC<ThemeProps> = ({ icon }) => {
     <Button
       className={styles.view_icon}
       aria-label={t("theme.switch")}
-      tooltip={{ content: t("theme.mode", theme === "system" ? `${theme} (${resolvedTheme})` : theme) }}
+      tooltip={{ placement: "left", content: t("theme.mode", theme === "system" ? `${theme} (${resolvedTheme})` : theme) }}
       onClick={() => {
         if (theme === "system") {
           setTheme("light");
diff --git a/src/components/layouts/main/index.tsx b/src/components/layouts/main/index.tsx
index c25adadfe..4ed4556a1 100644
--- a/src/components/layouts/main/index.tsx
+++ b/src/components/layouts/main/index.tsx
@@ -3,9 +3,13 @@ import { cx } from "@syfxlin/reve";
 import * as styles from "./styles.css";
 
 export type MainProps = PropsWithChildren<{
-  className?: string;
+  size?: "sm" | "md" | "lg";
 }>;
 
-export const Main: React.FC<MainProps> = ({ children, className }) => {
-  return <main className={cx(styles.container, className)}>{children}</main>;
+export const Main: React.FC<MainProps> = ({ size, children }) => {
+  return (
+    <main className={cx(styles.container, styles[size ?? "sm"])}>
+      {children}
+    </main>
+  );
 };
diff --git a/src/components/layouts/main/styles.css.ts b/src/components/layouts/main/styles.css.ts
index f6051b79a..afcbd08a3 100644
--- a/src/components/layouts/main/styles.css.ts
+++ b/src/components/layouts/main/styles.css.ts
@@ -4,9 +4,32 @@ import { theme } from "../../../theme/theme.css";
 export const container = styled.css`
   flex: 1;
   position: relative;
-  margin: 0 auto;
+  margin: 100px auto 0;
   width: 100%;
-  max-width: ${theme.fontSize.calc(50)};
   padding: 0 ${theme.spacing.calc(8)};
   animation: fade-in 0.5s ease;
+
+  ${theme.media.xl} {
+    max-width: ${theme.breakpoint.md};
+  }
+
+  ${theme.media.lg} {
+    max-width: ${theme.breakpoint.sm};
+  }
+  
+  ${theme.media.md} {
+    max-width: ${theme.breakpoint.xs};
+  }
+`;
+
+export const sm = styled.css`
+  max-width: ${theme.breakpoint.sm};
+`;
+
+export const md = styled.css`
+  max-width: ${theme.breakpoint.md};
+`;
+
+export const lg = styled.css`
+  max-width: ${theme.breakpoint.lg};
 `;
diff --git a/src/components/root/spotlight/styles.css.ts b/src/components/root/spotlight/styles.css.ts
index 4f61dba7c..476567fa7 100644
--- a/src/components/root/spotlight/styles.css.ts
+++ b/src/components/root/spotlight/styles.css.ts
@@ -44,13 +44,14 @@ export const container = styled.css`
   padding-top: ${theme.spacing.calc(20)};
   padding-bottom: ${theme.spacing.calc(10)};
   pointer-events: none;
+  writing-mode: horizontal-tb;
 
   transition: opacity 0.3s ease, color 0.3s, background-color 0.3s;
   transform-origin: center center;
 `;
 
 export const header = styled.css`
-  max-width: ${theme.fontSize.calc(40)};
+  max-width: ${theme.breakpoint.xs};
   border-top-left-radius: ${theme.borderRadius.calc(1)};
   border-top-right-radius: ${theme.borderRadius.calc(1)};
   background-color: ${theme.color.background.full};
@@ -89,7 +90,7 @@ export const section = styled.css`
   border-bottom-right-radius: ${theme.borderRadius.calc(0.8)};
   background-color: ${theme.color.background.full};
   padding: ${theme.spacing.calc(1)} ${theme.spacing.calc(7)};
-  max-width: ${theme.fontSize.calc(40)};
+  max-width: ${theme.breakpoint.xs};
   width: 100%;
   overflow-y: auto;
   pointer-events: auto;
diff --git a/src/components/templates/articles/index.tsx b/src/components/templates/articles/index.tsx
index 4c22e8fdb..5dd4e3995 100644
--- a/src/components/templates/articles/index.tsx
+++ b/src/components/templates/articles/index.tsx
@@ -60,15 +60,17 @@ export const TemplateArticles: React.FC<TemplateArticlesProps> = (props) => {
     <>
       <Header />
       {props.display === "document" && (
-        <Main className={styles.document}>
-          <section>
-            <Hero />
-            <Renderer document={props.document?.document} position="top" />
-          </section>
-          <section>
-            <Heading>{t("articles.heading")}</Heading>
-            {props.articles.map(item => <ArticleInfo key={`article-${item.link}`} data={item} />)}
-          </section>
+        <Main size="lg">
+          <div className={styles.document}>
+            <section>
+              <Hero />
+              <Renderer document={props.document?.document} position="top" />
+            </section>
+            <section>
+              <Heading>{t("articles.heading")}</Heading>
+              {props.articles.map(item => <ArticleInfo key={`article-${item.link}`} data={item} />)}
+            </section>
+          </div>
         </Main>
       )}
       {props.display === "articles" && (
diff --git a/src/components/templates/articles/styles.css.ts b/src/components/templates/articles/styles.css.ts
index d8150cffc..98ca2090c 100644
--- a/src/components/templates/articles/styles.css.ts
+++ b/src/components/templates/articles/styles.css.ts
@@ -30,7 +30,6 @@ export const heading = styled.css`
 export const document = styled.css`
   display: flex;
   gap: ${theme.spacing.calc(8)};
-  max-width: ${theme.fontSize.calc(80)} !important;
 
   > section {
     flex: 1;
@@ -44,7 +43,7 @@ export const document = styled.css`
     }
   }
 
-  @media screen and (max-width: ${theme.fontSize.calc(80)}) {
+  ${theme.media.lg} {
     display: block;
   }
 `;
diff --git a/src/components/templates/template/index.tsx b/src/components/templates/template/index.tsx
index 8412d157f..71785c6ec 100644
--- a/src/components/templates/template/index.tsx
+++ b/src/components/templates/template/index.tsx
@@ -1,7 +1,7 @@
 import React, { PropsWithChildren, ReactNode } from "react";
 import { TocData } from "@syfxlin/reks";
 import { Header } from "../../layouts/header";
-import { Main } from "../../layouts/main";
+import { Main, MainProps } from "../../layouts/main";
 import { Title } from "../../layouts/title";
 import { Toc } from "../../widgets/toc";
 import { TwoPagination } from "../../ui/pagination";
@@ -9,6 +9,7 @@ import { Artalk } from "../../widgets/artalk";
 import { Footer } from "../../layouts/footer";
 
 export type TemplateProps = PropsWithChildren<{
+  size?: MainProps["size"];
   name: string;
   link: string;
   desc?: ReactNode;
@@ -32,7 +33,7 @@ export const Template: React.FC<TemplateProps> = async (props) => {
   return (
     <>
       <Header />
-      <Main>
+      <Main size={props.size}>
         {props.before}
         <Title title={props.name}>{props.desc}</Title>
         <section style={{ position: "relative" }}>
diff --git a/src/components/ui/image/index.tsx b/src/components/ui/image/index.tsx
index 70b704bd0..ae4b484c3 100644
--- a/src/components/ui/image/index.tsx
+++ b/src/components/ui/image/index.tsx
@@ -18,7 +18,7 @@ function parse(src: string, alt?: string) {
       width,
       height,
       sizes: Object.values(breakpoints)
-        .map(p => `(max-width: ${p}) 100vw`)
+        .map(p => `(max-width: ${p}px) 100vw`)
         .join(","),
     };
   } else {
@@ -29,7 +29,7 @@ function parse(src: string, alt?: string) {
       width: undefined,
       height: undefined,
       sizes: Object.values(breakpoints)
-        .map(p => `(max-width: ${p}) 100vw`)
+        .map(p => `(max-width: ${p}px) 100vw`)
         .join(","),
     };
   }
diff --git a/src/locales/en.ts b/src/locales/en.ts
index b6945ec51..f778c7564 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -40,6 +40,7 @@ export default {
   "article.copyright.published.name": "Published",
   "article.copyright.published.desc": "Published：",
 
+  "header.menu": "Menu",
   "header.home": "Home",
   "header.icon": "Icon",
   "header.blog": "Blog",
diff --git a/src/locales/zh-hans.ts b/src/locales/zh-hans.ts
index 76f2396d7..2289effc2 100644
--- a/src/locales/zh-hans.ts
+++ b/src/locales/zh-hans.ts
@@ -39,6 +39,7 @@ export default {
   "article.copyright.published.name": "发布于",
   "article.copyright.published.desc": "发布于：",
 
+  "header.menu": "菜单",
   "header.home": "首页",
   "header.icon": "图标",
   "header.blog": "创作",
diff --git a/src/locales/zh-hant.ts b/src/locales/zh-hant.ts
index b9fa9ced0..3c6b2faa1 100644
--- a/src/locales/zh-hant.ts
+++ b/src/locales/zh-hant.ts
@@ -39,6 +39,7 @@ export default {
   "article.copyright.published.name": "發布於",
   "article.copyright.published.desc": "發布於：",
 
+  "header.menu": "選單",
   "header.home": "首頁",
   "header.icon": "圖示",
   "header.blog": "創作",
diff --git a/src/theme/global.css.ts b/src/theme/global.css.ts
index 920012a16..bc59b63b7 100644
--- a/src/theme/global.css.ts
+++ b/src/theme/global.css.ts
@@ -21,7 +21,7 @@ styled.global`
     letter-spacing: ${theme.letterSpacing.wide};
     scroll-behavior: smooth !important;
     word-break: break-word;
-    transition: color 0.3s, background-color 0.3s;
+    transition: color 0.3s, background-color 0.3s, transform 0.3s;
     -moz-text-size-adjust: 100%;
     -ms-text-size-adjust: 100%;
     -webkit-text-size-adjust: 100%;
diff --git a/src/theme/theme.css.ts b/src/theme/theme.css.ts
index 129081dd2..9ccbbd3cd 100644
--- a/src/theme/theme.css.ts
+++ b/src/theme/theme.css.ts
@@ -48,19 +48,29 @@ export const theme = createReveTheme({
   static: {
     // breakpoint
     breakpoint: {
-      xs: `${breakpoints.xs}`,
-      sm: `${breakpoints.sm}`,
-      md: `${breakpoints.md}`,
-      lg: `${breakpoints.lg}`,
-      xl: `${breakpoints.xl}`,
+      xs: `${breakpoints.xs}px`,
+      sm: `${breakpoints.sm}px`,
+      md: `${breakpoints.md}px`,
+      lg: `${breakpoints.lg}px`,
+      xl: `${breakpoints.xl}px`,
+      hxs: `${breakpoints.xs / 16 * 9}px`,
+      hsm: `${breakpoints.sm / 16 * 9}px`,
+      hmd: `${breakpoints.md / 16 * 9}px`,
+      hlg: `${breakpoints.lg / 16 * 9}px`,
+      hxl: `${breakpoints.xl / 16 * 9}px`,
     },
     // media query
     media: {
-      xs: `@media screen and (max-width: ${breakpoints.xs})`,
-      sm: `@media screen and (max-width: ${breakpoints.sm})`,
-      md: `@media screen and (max-width: ${breakpoints.md})`,
-      lg: `@media screen and (max-width: ${breakpoints.lg})`,
-      xl: `@media screen and (max-width: ${breakpoints.xl})`,
+      xs: `@media screen and (max-width: ${breakpoints.xs}px)`,
+      sm: `@media screen and (max-width: ${breakpoints.sm}px)`,
+      md: `@media screen and (max-width: ${breakpoints.md}px)`,
+      lg: `@media screen and (max-width: ${breakpoints.lg}px)`,
+      xl: `@media screen and (max-width: ${breakpoints.xl}px)`,
+      hxs: `@media screen and (max-height: ${breakpoints.xs / 16 * 9}px)`,
+      hsm: `@media screen and (max-height: ${breakpoints.sm / 16 * 9}px)`,
+      hmd: `@media screen and (max-height: ${breakpoints.md / 16 * 9}px)`,
+      hlg: `@media screen and (max-height: ${breakpoints.lg / 16 * 9}px)`,
+      hxl: `@media screen and (max-height: ${breakpoints.xl / 16 * 9}px)`,
     },
     // font family
     fontFamily: {
diff --git a/src/theme/tokens.ts b/src/theme/tokens.ts
index 6a43d47dd..2f7b92066 100644
--- a/src/theme/tokens.ts
+++ b/src/theme/tokens.ts
@@ -1,7 +1,7 @@
 export const breakpoints = {
-  xs: "640px",
-  sm: "768px",
-  md: "1024px",
-  lg: "1280px",
-  xl: "1536px",
+  xs: 640,
+  sm: 768,
+  md: 1024,
+  lg: 1280,
+  xl: 1536,
 };

From 44cc489192ce7060c6c1cc4f9e7573418d383343 Mon Sep 17 00:00:00 2001
From: syfxlin <i@ixk.me>
Date: Wed, 31 Jan 2024 02:07:15 +0800
Subject: [PATCH 2/2] fix(style): Fix some styles

---
 src/components/layouts/main/styles.css.ts | 38 ++++++++++++++++++-----
 src/components/widgets/toc/styles.css.ts  |  4 +--
 2 files changed, 33 insertions(+), 9 deletions(-)

diff --git a/src/components/layouts/main/styles.css.ts b/src/components/layouts/main/styles.css.ts
index afcbd08a3..ed480ab59 100644
--- a/src/components/layouts/main/styles.css.ts
+++ b/src/components/layouts/main/styles.css.ts
@@ -8,28 +8,52 @@ export const container = styled.css`
   width: 100%;
   padding: 0 ${theme.spacing.calc(8)};
   animation: fade-in 0.5s ease;
+`;
+
+export const sm = styled.css`
+  max-width: ${theme.breakpoint.sm};
 
   ${theme.media.xl} {
-    max-width: ${theme.breakpoint.md};
+    max-width: ${theme.breakpoint.sm};
   }
 
   ${theme.media.lg} {
     max-width: ${theme.breakpoint.sm};
   }
-  
+
   ${theme.media.md} {
-    max-width: ${theme.breakpoint.xs};
+    max-width: ${theme.breakpoint.sm};
   }
 `;
 
-export const sm = styled.css`
-  max-width: ${theme.breakpoint.sm};
-`;
-
 export const md = styled.css`
   max-width: ${theme.breakpoint.md};
+
+  ${theme.media.xl} {
+    max-width: ${theme.breakpoint.md};
+  }
+
+  ${theme.media.lg} {
+    max-width: ${theme.breakpoint.sm};
+  }
+
+  ${theme.media.md} {
+    max-width: ${theme.breakpoint.sm};
+  }
 `;
 
 export const lg = styled.css`
   max-width: ${theme.breakpoint.lg};
+
+  ${theme.media.xl} {
+    max-width: ${theme.breakpoint.md};
+  }
+
+  ${theme.media.lg} {
+    max-width: ${theme.breakpoint.sm};
+  }
+
+  ${theme.media.md} {
+    max-width: ${theme.breakpoint.sm};
+  }
 `;
diff --git a/src/components/widgets/toc/styles.css.ts b/src/components/widgets/toc/styles.css.ts
index a81169530..33d5b1157 100644
--- a/src/components/widgets/toc/styles.css.ts
+++ b/src/components/widgets/toc/styles.css.ts
@@ -7,11 +7,11 @@ export const container = styled.css`
   top: 0;
   right: ${theme.fontSize.calc(-1)};
   padding: ${theme.spacing.calc(1)};
-  width: ${theme.fontSize.calc(18)};
+  width: 250px;
   height: 100%;
   transform: translateX(100%);
 
-  @media screen and (max-width: ${theme.fontSize.calc(36 + 50)}) {
+  ${theme.media.lg} {
     display: none;
   }