blog post list

src/components/PostPreview.astro

@@ -1,8 +1,8 @@
 ---
+import { Picture } from 'astro:assets'
 import type { CollectionEntry } from 'astro:content'
-import Tags from './Tags.astro'
 import PostAttributes from './PostAttributes.astro'
-import { Image } from 'astro:assets'
+import Tags from './Tags.astro'
 
 export type Props = {
   post: CollectionEntry<'blog'>
@@ -12,7 +12,7 @@ const { post } = Astro.props
 ---
 
 <section class:list={{ without: !post.data.coverImage }}>
-  {post.data.coverImage && <Image src={post.data.coverImage} alt={'foo'} />}
+  {post.data.coverImage && <Picture src={post.data.coverImage} alt={'foo'} />}
   <PostAttributes {post} />
   <h2>
     {post.data.title}
@@ -20,57 +20,53 @@ const { post } = Astro.props
   <Tags tags={post.data.tags.map((tag) => ({ count: 1, name: tag, href: `/tag/${tag}` }))} />
 </section>
 
-<style>
+<style lang="scss">
   section {
     display: block;
-  }
-  section > :global(img) {
-    height: 12em;
+    transition: var(--animation);
+
+    // &.without {
+    //   border: 2px solid var(--clr-primary);
+    //   padding: 5%;
+    //   width: calc(100% + 10%);
+    //   transform: translateX(-5%);
+    // }
+
+    &:hover {
+      transform: scale(1.05);
+      & :global(img) {
+      }
+      // & > :global(div) {
+      //   opacity: 0;
+      // }
+    }
   }
 
   h2 {
-    margin-top: 0.25em;
+    margin-top: 0.25rem;
     position: relative;
     top: 0;
     transition: var(--animation);
-    background-color: var(--clr-light);
-  }
-  section :global(img) {
-    transition: var(--animation);
-    position: relative;
-    top: 0;
-  }
-  section:hover :global(img) {
-    top: 2.5rem;
+    font-size: 2rem;
   }
 
   section > :global(div) {
     opacity: 1;
     transition: var(--animation);
   }
-  section:hover > :global(div) {
-    opacity: 0;
-  }
-
-  section.without {
-    border: 2px solid var(--clr-primary);
-    padding: 5%;
-    width: calc(100% + 10%);
-    transform: translateX(-5%);
-  }
 
   img {
     width: calc(100% - 0.25em);
+    height: 12rem;
     object-fit: cover;
     object-position: center;
-    border: 0.125em solid var(--clr-primary);
+    border: 0.125rem solid var(--clr-primary);
     transition: var(--animation);
     transform: scale(1);
     margin: 0;
-  }
+    margin-bottom: 0.5rem;
 
-  img {
-    transform: scale(1.1);
-    margin: 1em 0;
+    top: 0;
+    position: relative;
   }
 </style>