added flashbang mode

src/components/ComicCard.astro

@@ -9,28 +9,47 @@ interface Props {
 
 const { comic } = Astro.props;
 
-// Determine if the file is AVIF based on the URL
-const isAvif = comic.md_comics.md_covers[0]?.b2key.endsWith('.avif');
-
 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;
 ---
+
 <div class="comic-card">
   <a href={`https://comick.io/comic/${comic.md_comics.slug}`} target="_blank" rel="noopener noreferrer">
-    {!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="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>
     <div class="comic-info">
       <h3>{comic.md_comics.title}</h3>
       <p>Chapter {comic.chap}</p>
@@ -39,12 +58,13 @@ const coverUrl = comic.md_comics.md_covers[0]
   </a>
 </div>
 
-<style>
+<style define:vars={{ imgWidth: `${IMG_WIDTH}px`, imgHeight: `${IMG_HEIGHT}px` }}>
   .comic-card {
-    background: #23262d;
+    background: var(--bg-secondary);
     border-radius: 8px;
     overflow: hidden;
-    transition: transform 0.2s;
+    transition: transform 0.2s, background-color 0.3s;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   }
 
   .comic-card:hover {
@@ -53,13 +73,26 @@ const coverUrl = comic.md_comics.md_covers[0]
 
   .comic-card a {
     text-decoration: none;
-    color: white;
+    color: var(--text-color);
   }
 
-  .comic-card img {
+  .image-container {
+    width: var(--imgWidth);
+    height: var(--imgHeight);
+    position: relative;
+    overflow: hidden;
+    background: var(--bg-hover);
+  }
+
+  .image-container img {
     width: 100%;
-    height: 300px;
+    height: 100%;
     object-fit: cover;
+    transition: transform 0.3s ease;
+  }
+
+  .comic-card:hover .image-container img {
+    transform: scale(1.05);
   }
 
   .comic-info {
@@ -70,16 +103,23 @@ const coverUrl = comic.md_comics.md_covers[0]
     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: #888;
+    color: var(--text-color);
+    opacity: 0.7;
   }
 
   .date {
     margin-top: 0.5rem;
     font-size: 0.8rem !important;
   }
-</style>
+</style>