From c087bdc4a192b572e2031ffde7d72ef60d3ee050 Mon Sep 17 00:00:00 2001
From: Johnson Mao <tutelary.maomao@gmail.com>
Date: Tue, 31 Oct 2023 22:20:45 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20update=20web=20style?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/[lang]/page.tsx                | 18 +++++++++++-------
 src/app/[lang]/posts/[postId]/page.tsx |  8 +++++---
 src/app/[lang]/posts/page.tsx          | 18 +++++++++++-------
 src/components/Container/Container.tsx |  3 ++-
 4 files changed, 29 insertions(+), 18 deletions(-)

diff --git a/src/app/[lang]/page.tsx b/src/app/[lang]/page.tsx
index f0456e1..983e7eb 100644
--- a/src/app/[lang]/page.tsx
+++ b/src/app/[lang]/page.tsx
@@ -23,13 +23,17 @@ async function RootPage({ params: { lang } }: RootParams) {
   const { metadata } = await getDictionary(lang);
 
   return (
-    <Container as="main">
-      <H1 className="py-4 text-3xl font-bold dark:text-white">
-        {metadata.title}
-      </H1>
-      <p className="pb-12 text-xl dark:text-white">{metadata.description}</p>
-      <List Item={Card} items={posts} />
-    </Container>
+    <>
+      <Container className="py-8">
+        <H1 className="mb-4 text-3xl font-bold dark:text-white">
+          {metadata.title}
+        </H1>
+        <p className="text-xl dark:text-white">{metadata.description}</p>
+      </Container>
+      <Container as="main" className="py-8">
+        <List Item={Card} items={posts} />
+      </Container>
+    </>
   );
 }
 
diff --git a/src/app/[lang]/posts/[postId]/page.tsx b/src/app/[lang]/posts/[postId]/page.tsx
index 6b6935a..0995456 100644
--- a/src/app/[lang]/posts/[postId]/page.tsx
+++ b/src/app/[lang]/posts/[postId]/page.tsx
@@ -39,11 +39,13 @@ async function PostPage({ params: { postId } }: PostParams) {
 
   return (
     <>
-      <Container as="main">
-        <H1 className="py-4 text-3xl font-bold dark:text-white">
+      <Container className="py-8">
+        <H1 className="mb-4 text-3xl font-bold dark:text-white">
           {frontmatter.title}
         </H1>
-        <time className="mt-0">{formattedDate}</time>
+        <time>{formattedDate}</time>
+      </Container>
+      <Container as="main" className="py-8">
         <article className="prose prose-xl prose-slate mx-auto dark:prose-invert">
           {content}
         </article>
diff --git a/src/app/[lang]/posts/page.tsx b/src/app/[lang]/posts/page.tsx
index cf5a6be..71c3cbd 100644
--- a/src/app/[lang]/posts/page.tsx
+++ b/src/app/[lang]/posts/page.tsx
@@ -23,13 +23,17 @@ async function RootPage({ params: { lang } }: RootParams) {
   const { metadata } = await getDictionary(lang);
 
   return (
-    <Container as="main">
-      <H1 className="py-4 text-3xl font-bold dark:text-white">
-        {metadata.title}
-      </H1>
-      <p className="pb-12 text-xl dark:text-white">{metadata.description}</p>
-      <List Item={Card} items={posts} />
-    </Container>
+    <>
+      <Container className="py-8">
+        <H1 className="mb-4 text-3xl font-bold dark:text-white">
+          {metadata.title}
+        </H1>
+        <p className="text-xl dark:text-white">{metadata.description}</p>
+      </Container>
+      <Container as="main" className="py-8">
+        <List Item={Card} items={posts} />
+      </Container>
+    </>
   );
 }
 
diff --git a/src/components/Container/Container.tsx b/src/components/Container/Container.tsx
index e45be00..5a30749 100644
--- a/src/components/Container/Container.tsx
+++ b/src/components/Container/Container.tsx
@@ -13,7 +13,8 @@ const Container = forwardRef<HTMLDivElement, ContainerProps>(
       <Component
         className={cn(
           'px-7 md:mx-8 lg:mx-16 lg:px-14',
-          as === 'main' && 'border-2 rounded-lg mt-4 border-gray-500 backdrop-blur',
+          as === 'main' &&
+            'mt-4 rounded-lg border-2 border-zinc-500 bg-zinc-100/70 dark:bg-zinc-900/70',
           className
         )}
         ref={ref}