gallery component now fancier

src/lib/lists/gallery.svelte

@@ -5,6 +5,7 @@
         img: string;
         imgAlt: string;
         link: string;
+        description: string;
     }
 
     let {
@@ -34,9 +35,11 @@
             {#if reverseTextOrder}
                 <p class="gallery-subtitle">{@html entry.subtitle}</p>
                 <p class="gallery-title">{entry.title}</p>
+                <p class="gallery-description">{entry.description}</p>
             {:else}
                 <p class="gallery-title">{entry.title}</p>
                 <p class="gallery-subtitle">{@html entry.subtitle}</p>
+                <p class="gallery-description">{entry.description}</p>
             {/if}
         </div>
     </a>
@@ -56,22 +59,24 @@
 
     .gallery-container {
         box-sizing: content-box;
-        height: 80px;
+        height: 120px;
         display: flex;
         flex-direction: row;
         text-decoration: none;
         align-items: center;
-        margin: 6px 0;
+        margin: 0;
+        justify-content: center;
+        border: var(--border-style) transparent var(--border-dash-size);
+        transition: border-color var(--duration-animation) var(--anim-curve);
     }
 
     .gallery-img, .gallery-img-placeholder {
-        width: 145px;
+        width: 180px;
-        min-width: 145px;
+        min-width: 180px;
         height: 100%;
         margin: 0;
         object-fit: cover;
-        /* filter: grayscale(60%); */
+        transition: width var(--duration-animation) var(--anim-curve);
-        transition: margin var(--duration-animation) ease-out;
     }
 
     .gallery-img-placeholder {
@@ -79,53 +84,66 @@
     }
 
     .gallery-text-container {
-        display: flex;
+        display: grid;
-        flex-direction: column;
+        grid-auto-columns: 1fr;
+        grid-template-rows: 1fr 1fr 0fr;
+        align-items: center;
+        overflow: hidden;
         flex-grow: 1;
-        height: 100%;
+        padding: 0 16px;
-        padding-left: 16px;
+        transition: background-color var(--duration-animation) var(--anim-curve),
-        padding-right: 16px;
+                    backdrop-filter var(--duration-blur) var(--anim-curve),
-        border-style: var(--border-style);
+                    grid-template-rows var(--duration-blur) var(--anim-curve);
-        justify-content: center;
-        border-color: transparent;
-        border-width: var(--border-dash-size);
-        border-left: none;
-        transition: border-color var(--duration-animation) ease-out,
-                    padding-right var(--duration-animation) ease-out,
-                    background-color var(--duration-animation) ease-out,
-                    backdrop-filter var(--duration-blur) ease-out;
     }
 
-    .gallery-title, .gallery-subtitle {
+    .gallery-title, .gallery-subtitle, .gallery-description {
         margin: 0;
-        transition: color var(--duration-animation) ease-out;
+        transition: color var(--duration-animation) var(--anim-curve),
+                    opacity var(--duration-animation) var(--anim-curve);
     }
 
     .gallery-title {
         font-family: var(--font-mono);
         font-weight: 700;
+        font-size: 1.4rem;
+        line-height: 2.0rem;
     }
 
-    .gallery-subtitle {
+    .gallery-subtitle, .gallery-description {
         font-size: 1.0rem;
         line-height: 1.2rem;
+        overflow: hidden;
     }
 
-    .gallery-container:hover .gallery-text-container {
+    .gallery-description {
+        font-weight: 500;
+        opacity: 0;
+    }
+
+    .gallery-container:hover {
         border-color: var(--color-highlight);
         background-color: var(--color-background-highlight);
         backdrop-filter: blur(var(--blur-radius-background));
     }
     .gallery-container:hover .gallery-img, .gallery-container:hover .gallery-img-placeholder {
         /* filter: grayscale(0%); */
-        margin-left: 8px;
+        /* margin-left: 8px; */
+        width: 260px;
     }
     .gallery-container:hover .gallery-text-container {
-        padding-right: 8px;
+        /* padding-right: 8px; */
+        grid-template-rows: 0fr 1fr 1fr;
     }
     .gallery-container:hover p {
         color: var(--color-highlight);
     }
+    .gallery-container:hover .gallery-subtitle {
+        opacity: 0;
+        
+    }
+    .gallery-container:hover .gallery-description {
+        opacity: 1;
+    }
 
     @media screen and (max-width: 700px) {
         /* .gallery-title {

src/routes/+layout.svelte

@@ -139,9 +139,12 @@
             --underline-dash-size: 1px;
             
             /* durations */
-            --duration-animation: 0.1s;
             --duration-blur: 0.2s;
 
+            /* animation */
+            --duration-animation: 0.3s;
+            --anim-curve: cubic-bezier(0.22, 1, 0.36, 1);
+
             /* fonts */
             --font-line-height: 1.6rem;
 

src/routes/blog/+page.svelte

@@ -18,6 +18,7 @@
             img: banner,
             link: `/blog/${entry.key}/`,
             imgAlt: `Preview image for ${entry.post.title}`,
+            description: entry.post.description,
         };
     }
 </script>

src/routes/projects/projectn5/+page.svelte

@@ -13,6 +13,7 @@
             img: `/projects/projectn5/devlog/${entry.key}/preview.webp`,
             link: `/projects/projectn5/devlog/${entry.key}/`,
             imgAlt: `Preview image for ${entry.post.title}`,
+            description: entry.post.description,
         };
     }