feat: short image adaptive size

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 && (

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(

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>

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;
+}