💄 update web style

i18n/locales/en/common.ts

@@ -3,7 +3,7 @@ const common = {
   posts: 'Posts',
   about: 'About',
   tags: 'Tags',
-  slogan: 'Making life better, one step at a time',
+  categories: 'Categories',
 };
 
 export default common;

i18n/locales/en/metadata.ts

@@ -1,6 +1,6 @@
 const metadata = {
   title: "Mao's Corner",
-  description: "Mao's Learning Corner",
+  description: "Welcome to Mao's Learning Corner, where I document my study notes. Looking forward to exploring the vast realms of knowledge together with you.",
 };
 
 export default metadata;

i18n/locales/zh-TW/common.ts

@@ -3,7 +3,7 @@ const common = {
   posts: '文章',
   about: '關於',
   tags: '標籤',
-  slogan: '一步一步，讓生活更美好'
+  categories: '分類',
 };
 
 export default common;

i18n/locales/zh-TW/metadata.ts

@@ -1,6 +1,6 @@
 const metadata = {
   title: "Mao's Corner",
-  description: '阿毛的學習角落',
+  description: '歡迎來到阿毛的學習角落，這裡記錄著我的學習筆記，期待與你一同探索廣闊的知識領域。',
 };
 
 export default metadata;

src/app/[lang]/page.tsx

@@ -14,19 +14,20 @@ export async function generateMetadata({
   const { common } = await getDictionary(lang);
 
   return {
-    title: common.posts,
+    title: common.home,
   };
 }
 
 async function RootPage({ params: { lang } }: RootParams) {
   const posts = await getAllDataFrontmatter('posts');
-  const { common } = await getDictionary(lang);
+  const { metadata } = await getDictionary(lang);
 
   return (
     <Container as="main">
-      <H1 className="py-12 text-center text-3xl dark:text-white">
-        {common.slogan}
+      <H1 className="pb-6 pl-16 pt-12 text-3xl font-bold dark:text-white">
+        {metadata.title}
       </H1>
+      <p className="pb-16 text-xl dark:text-white">{metadata.description}</p>
       <List Item={Card} items={posts} />
     </Container>
   );

src/app/[lang]/posts/[postId]/page.tsx

@@ -2,6 +2,7 @@ import type { Metadata } from 'next';
 import { notFound } from 'next/navigation';
 
 import Container from '@/components/Container';
+import { H1 } from '@/components/Heading';
 import Link from '@/components/Link';
 import TableOfContents from '@/components/TableOfContents';
 import Comment from '@/components/Comment';
@@ -38,13 +39,14 @@ async function PostPage({ params: { postId } }: PostParams) {
 
   return (
     <>
-      <Container
-        as="main"
-        className="prose prose-xl prose-slate dark:prose-invert"
-      >
-        <h1 className="mb-0 mt-4 text-3xl">{frontmatter.title}</h1>
-        <p className="mt-0">{formattedDate}</p>
-        <article>{content}</article>
+      <Container as="main">
+        <H1 className="pb-6 pl-16 pt-12 text-3xl font-bold dark:text-white">
+          {frontmatter.title}
+        </H1>
+        <time className="mt-0">{formattedDate}</time>
+        <article className="prose prose-xl prose-slate mx-auto dark:prose-invert">
+          {content}
+        </article>
         <Link href="/">回首頁</Link>
         <Comment />
       </Container>

src/app/[lang]/posts/page.tsx

@@ -1,9 +1,9 @@
 import type { Metadata } from 'next';
 
 import { getDictionary } from '~/i18n';
-import { H1 } from '@/components/Heading';
 import Card from '@/components/Card';
 import Container from '@/components/Container';
+import { H1 } from '@/components/Heading';
 import List from '@/components/List';
 import { getAllDataFrontmatter } from '@/utils/mdx';
 import type { RootParams } from '../layout';
@@ -20,13 +20,14 @@ export async function generateMetadata({
 
 async function RootPage({ params: { lang } }: RootParams) {
   const posts = await getAllDataFrontmatter('posts');
-  const { common } = await getDictionary(lang);
+  const { metadata } = await getDictionary(lang);
 
   return (
     <Container as="main">
-      <H1 className="my-12 text-center text-3xl dark:text-white">
-        {common.slogan}
+      <H1 className="pb-6 pl-16 pt-12 text-3xl font-bold dark:text-white">
+        {metadata.title}
       </H1>
+      <p className="pb-16 text-xl dark:text-white">{metadata.description}</p>
       <List Item={Card} items={posts} />
     </Container>
   );

src/components/Header/Logo.tsx

@@ -12,8 +12,15 @@ export type LogoProps = {
 };
 
 function Logo({ src, alt, scrollY, scrollThreshold }: LogoProps) {
-  const translateY = clamp(scrollY * -1, scrollThreshold * -1) + scrollThreshold;
-  const scale = 1.5 - clamp(scrollY, scrollThreshold) / (scrollThreshold * 2);
+  const translateY = (
+    clamp(scrollY * -1, scrollThreshold * -1) + scrollThreshold
+  ).toFixed(2);
+
+  const scale = (
+    1.5 -
+    clamp(scrollY, scrollThreshold) / (scrollThreshold * 2)
+  ).toFixed(2);
+
   const style = {
     '--tw-translate-y': `${translateY}px`,
     '--tw-scale-x': scale,
@@ -23,7 +30,7 @@ function Logo({ src, alt, scrollY, scrollThreshold }: LogoProps) {
   return (
     <Link
       href="/"
-      className="origin-top-left translate-y-0 scale-100"
+      className="origin-bottom-left translate-y-0 scale-100"
       style={style}
     >
       <Image