updated blog post entry style

src/lib/lists/blog-gallery.svelte

@@ -10,11 +10,104 @@
 
 <div class="entry-container">
     {#each posts as post}
-        <div class="entry">
-            <p>{post.post.title}</p>
-            {#each post.post.tags as tag}
-                <p>{tag}</p>
-            {/each}
-        </div>
+        <a class="entry" href="{post.key}">
+            <div class="entry-banner-container">
+                <img class="entry-banner" src="{post.key}/{post.post.banner}" alt="{post.post.bannerAlt}">
+            </div>
+            <div class="entry-text-container">
+                <p class="entry-title">{post.post.title}</p>
+                <p class="entry-description">{post.post.description}</p>
+                <div class="entry-tag-container">
+                    {#each post.post.tags as tag}
+                        <span>{tag}</span>
+                    {/each}
+                </div>
+            </div>
+        </a>
     {/each}
 </div>
+
+<style>
+    .entry-container {
+        display: grid;
+        /* gap: 8px; */
+        grid-template-columns: 1fr 1fr;
+    }
+
+    .entry {
+        margin: 0;
+        padding: 8px;
+        transition: background-color var(--duration-animation) var(--anim-curve),
+                    border-color var(--duration-animation) var(--anim-curve),
+                    backdrop-filter var(--duration-blur) var(--anim-curve);
+        border: var(--border-dash-size) var(--border-style) transparent;
+        text-decoration: none;
+    }
+
+    .entry:hover {
+        background-color: var(--color-background-highlight-alt);
+        border-color: var(--color-highlight-alt);
+        backdrop-filter: blur(var(--blur-radius-background));
+    }
+
+    .entry:hover .entry-banner {
+        scale: 1.2;
+    }
+
+    .entry-banner-container {
+        width: 100%;
+        height: 160px;
+        overflow: hidden;
+        display: flex;
+        justify-content: center;
+    }
+
+    .entry-banner {
+        width: 100%;
+        object-fit: cover;
+        transition: scale var(--duration-animation) var(--anim-curve);
+    }
+
+    .entry-text-container {
+        /* padding: 0 4px 4px ; */
+        display: flex;
+        flex-direction: column;
+        margin-top: 16px;
+        gap: 8px;
+    }
+    
+    .entry-text-container * {
+        margin: 0;
+    }
+
+    .entry-title {
+        font-family: var(--font-mono);
+        font-weight: 700;
+        font-size: 1.2rem;
+        line-height: 1.4rem;
+    }
+
+    .entry-description {
+        font-size: 1.0rem;
+        line-height: 1.2rem;
+    }
+
+    .entry-tag-container {
+        display: flex;
+        gap: 4px;
+        margin-top: 4px;
+        flex-direction: row;
+        flex-wrap: nowrap;
+    }
+
+    .entry-tag-container span {
+        font-family: var(--font-mono);
+        font-size: 0.8rem;
+        background-color: var(--color-background-highlight-alt);
+        margin: 0;
+        padding: 4px;
+        border-radius: 8px;
+        line-height: 1.0rem;
+        font-weight: 600;
+    }
+</style>