Merge pull request #97 from syfxlin/develop

fix(style): Fix some styles
syfxlin · Jan 30, 2024 · 63427f3 · 63427f3
2 parents 4df055a + 44cc489
commit 63427f3
Show file tree

Hide file tree

Showing 27 changed files with 262 additions and 162 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
diff --git a/src/components/layouts/header/blog.tsx 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
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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");