revert stupid img

src/components/ComicCard.astro

@@ -9,47 +9,28 @@ interface Props {
 
 const { comic } = Astro.props;
 
-const coverUrl = comic.md_comics.md_covers[0]
-  ? `https://meo.comick.pictures/${comic.md_comics.md_covers[0].b2key}`
-  : '/placeholder.png';
-
 // Determine if the file is AVIF based on the URL
 const isAvif = comic.md_comics.md_covers[0]?.b2key.endsWith('.avif');
 
-// Define standard image dimensions
-const IMG_WIDTH = 250;
-const IMG_HEIGHT = 350;
-
-// Generate optimized image URL with dimensions
-const optimizedCoverUrl = coverUrl.includes('meo.comick.pictures') 
-  ? `${coverUrl}?width=${IMG_WIDTH}&quality=80` 
-  : coverUrl;
+const coverUrl = comic.md_comics.md_covers[0]
+  ? `https://meo.comick.pictures/${comic.md_comics.md_covers[0].b2key}`
+  : '/placeholder.png';
 ---
-
 <div class="comic-card">
   <a href={`https://comick.io/comic/${comic.md_comics.slug}`} target="_blank" rel="noopener noreferrer">
-    <div class="image-container">
-      {!isAvif ? (
-        <Image 
-          src={optimizedCoverUrl} 
-          alt={comic.md_comics.title}
-          width={IMG_WIDTH}
-          height={IMG_HEIGHT}
-          loading="lazy"
-        />
-      ) : (
-        <img
-          src={optimizedCoverUrl}
-          alt={comic.md_comics.title}
-          width={IMG_WIDTH}
-          height={IMG_HEIGHT}
-          loading="lazy"
-          onError={(e) => {
-            e.currentTarget.src = '/placeholder.png';
-          }}
-        />
-      )}
-    </div>
+    {!isAvif ? (
+      // Infer size only for non-AVIF files
+      <Image src={coverUrl} alt={comic.md_comics.title} inferSize={true} />
+    ) : (
+      // Provide fallback handling for AVIF files
+      <img
+        src={coverUrl}
+        alt={comic.md_comics.title}
+        width="300" // Default width
+        height="300" // Default height
+        style={{ objectFit: 'cover' }}
+      />
+    )}
     <div class="comic-info">
       <h3>{comic.md_comics.title}</h3>
       <p>Chapter {comic.chap}</p>
@@ -58,13 +39,12 @@ const optimizedCoverUrl = coverUrl.includes('meo.comick.pictures')
   </a>
 </div>
 
-<style define:vars={{ imgWidth: `${IMG_WIDTH}px`, imgHeight: `${IMG_HEIGHT}px` }}>
+<style>
   .comic-card {
     background: var(--bg-secondary);
     border-radius: 8px;
     overflow: hidden;
-    transition: transform 0.2s, background-color 0.3s;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    transition: transform 0.2s;
   }
 
   .comic-card:hover {
@@ -76,23 +56,10 @@ const optimizedCoverUrl = coverUrl.includes('meo.comick.pictures')
     color: var(--text-color);
   }
 
-  .image-container {
-    width: var(--imgWidth);
-    height: var(--imgHeight);
-    position: relative;
-    overflow: hidden;
-    background: var(--bg-hover);
-  }
-
-  .image-container img {
+  .comic-card img {
     width: 100%;
-    height: 100%;
+    height: 300px;
     object-fit: cover;
-    transition: transform 0.3s ease;
-  }
-
-  .comic-card:hover .image-container img {
-    transform: scale(1.05);
   }
 
   .comic-info {
@@ -103,19 +70,12 @@ const optimizedCoverUrl = coverUrl.includes('meo.comick.pictures')
     margin: 0;
     font-size: 1.1rem;
     margin-bottom: 0.5rem;
-    color: var(--text-color);
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-    text-overflow: ellipsis;
   }
 
   .comic-info p {
     margin: 0;
     font-size: 0.9rem;
-    color: var(--text-color);
-    opacity: 0.7;
+    color: #888;
   }
 
   .date {