From 493dff4ddb60adea9db4deff09271d3a1d4e7ab5 Mon Sep 17 00:00:00 2001
From: DIYgod <i@diygod.me>
Date: Tue, 19 Sep 2023 14:11:22 +0800
Subject: [PATCH] feat: short image adaptive size

---
 src/app/site/[site]/[slug]/page.tsx |  8 ++++----
 src/components/common/PostCard.tsx  |  2 +-
 src/components/home/PostCover.tsx   | 16 +++++++++-------
 src/css/tailwind.css                |  8 ++++++++
 4 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/src/app/site/[site]/[slug]/page.tsx b/src/app/site/[site]/[slug]/page.tsx
index e79ce6aa..1c3baea3 100644
--- a/src/app/site/[site]/[slug]/page.tsx
+++ b/src/app/site/[site]/[slug]/page.tsx
@@ -156,22 +156,22 @@ export default async function SitePagePage({
       />
       <article>
         {type === "short" ? (
-          <div className="space-y-3">
+          <>
             <PostCover
               uniqueKey={`short-${page.characterId}-${page.noteId}`}
               images={images}
               title={page.metadata?.content?.title}
-              className="rounded-lg w-full"
+              className="rounded-lg w-full aspect-auto mb-4 border-b-0"
             />
             {page?.metadata?.content?.title && (
-              <h2 className="xlog-post-title text-xl font-bold page-title text-center">
+              <h2 className="xlog-post-title text-xl font-bold page-title text-center mb-2">
                 {page?.metadata?.content?.title}
               </h2>
             )}
             <div className="xlog-post-content prose">
               {page?.metadata?.content?.content}
             </div>
-          </div>
+          </>
         ) : (
           <>
             {!onlyContent && (
diff --git a/src/components/common/PostCard.tsx b/src/components/common/PostCard.tsx
index 1644107b..70190380 100644
--- a/src/components/common/PostCard.tsx
+++ b/src/components/common/PostCard.tsx
@@ -76,7 +76,7 @@ const Card = ({
         uniqueKey={`${post.characterId}-${post.noteId}`}
         images={post.metadata?.content.images}
         title={post.metadata?.content?.title}
-        className={isShort ? "rounded-b-2xl aspect-square" : ""}
+        className={isShort ? "rounded-b-2xl aspect-square border-b-0" : ""}
       />
       <div
         className={cn(
diff --git a/src/components/home/PostCover.tsx b/src/components/home/PostCover.tsx
index b93707b8..553b9bb1 100644
--- a/src/components/home/PostCover.tsx
+++ b/src/components/home/PostCover.tsx
@@ -44,13 +44,15 @@ export default function PostCover({
             >
               {images?.map((image) => (
                 <SwiperSlide key={image}>
-                  <Image
-                    className="object-cover w-full sm:group-hover:scale-105 sm:transition-transform sm:duration-400 sm:ease-in-out bg-white"
-                    alt="cover"
-                    src={image}
-                    width={624}
-                    height={351}
-                  ></Image>
+                  <div className="text-[0px] w-full h-full">
+                    <Image
+                      className="object-cover w-full sm:group-hover:scale-105 sm:transition-transform sm:duration-400 sm:ease-in-out bg-white"
+                      alt="cover"
+                      src={image}
+                      width={624}
+                      height={351}
+                    ></Image>
+                  </div>
                 </SwiperSlide>
               ))}
             </Swiper>
diff --git a/src/css/tailwind.css b/src/css/tailwind.css
index d147abe5..9f6fcfd5 100644
--- a/src/css/tailwind.css
+++ b/src/css/tailwind.css
@@ -442,6 +442,14 @@ textarea.input {
   @apply flex justify-end;
 }
 
+.swiper {
+  @apply bg-zinc-50;
+}
+
 .swiper-button {
   @apply absolute top-1/2 -translate-y-1/2 bg-white rounded-full z-[1] w-6 h-6 flex items-center justify-center opacity-80;
 }
+
+.swiper-wrapper {
+  @apply flex items-center;
+}
\ No newline at end of file