tried some styling for projects page

src/lib/banner2.svelte

@@ -56,11 +56,13 @@
 
 <div class="container">
     {#if banner && banner !== ""}
+        <div class="banner-container">
             {#if pixelated}
                 <img class="banner pixelated-img" src="{banner}" alt="{bannerAlt}">
             {:else}
                 <img class="banner" src="{banner}" alt="{bannerAlt}">
             {/if}
+        </div>
     {/if}
     {@render titles({title, subtitle, date})}
     <hr>
@@ -71,10 +73,22 @@
         width: 100%;
     }
 
-	.banner {
+    .banner-container {
 		max-height: 300px;
+        height: 300px;
         width: 100%;
+        overflow: hidden;
+    }
+
+	.banner {
+        width: 100%;
+        height: 100%;
         object-fit: cover;
+        transition: scale var(--duration-animation) var(--anim-curve);
+	}
+
+    .banner-container:hover .banner {
+        scale: 1.04;
     }
 
     .title-container {
@@ -149,7 +163,7 @@
             line-height: 1.2rem;
         }
 
-        .banner {
+        .banner-container {
             height: 180px;
             max-height: 180px;
         }

src/lib/components/table-of-contents.svelte

@@ -88,6 +88,7 @@
             background-color: var(--color-background-highlight);
             padding: 16px 0;
             border: var(--border-style) var(--border-dash-size) var(--color-highlight);
+        border-radius: var(--border-radius);
         }
 
         .toc-list {

src/lib/lists/gallery-row.svelte

@@ -40,6 +40,7 @@
         margin: 0;
         padding: 8px;
         text-decoration: none;
+        border-radius: var(--border-radius);
         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);
@@ -55,12 +56,18 @@
         scale: 1.2;
     }
 
+    .row-entry:hover .row-img-container {
+        border-top-left-radius: calc(var(--border-radius) - 8px);
+        border-top-right-radius: calc(var(--border-radius) - 8px);
+    }
+
     .row-img-container {
         width: 100%;
         height: 160px;
         overflow: hidden;
         display: flex;
         justify-content: center;
+        transition: border-radius var(--duration-animation) var(--anim-curve);
     }
 
     .row-img {

src/routes/+page.svelte

@@ -216,6 +216,7 @@
         border-width: var(--border-dash-size);
         border-style: var(--border-style);
         border-color: var(--color-highlight-alt);
+        border-radius: var(--border-radius);
         /* transition: border-radius var(--duration-animation) var(--anim-curve); */
         /* border-radius: var(--border-radius); */
     }

src/routes/projects/+page.svelte

@@ -64,9 +64,14 @@
 {/snippet}
 
 {#snippet projectContent(p: Project)}
-        <p>{p.title}</p>
-        <p>{p.subtitle}</p>
-        <p>{p.date}</p>
+    <div class="project-content-container">
+        <img class="project-banner" src={p.banner} alt={p.bannerAlt}>
+        <div class="project-text-container">
+            <p class="project-title">{p.title}</p>
+            <p class="project-subtitle">{p.subtitle}</p>
+            <p class="project-date">{p.date}</p>
+        </div>
+    </div>
 {/snippet}
 
 <!-- {#snippet projectSummary({
@@ -105,18 +110,65 @@
         display: grid;
         /* grid-template-columns: 1fr 1fr; */
         grid-template-columns: 1fr;
+        gap: 4px;
     }
 
     .project-wrapper {
         display: flex;
         flex-direction: column;
+        margin: 0;
+        /* border-radius: var(--border-radius); */
         /* gap: 4px; */
+        overflow: hidden;
+        text-decoration: none;
     }
 
-    .project-wrapper p {
+    .project-content-container {
+        position: relative;
+    }
+
+    .project-banner {
+        width: 100%;
+        object-fit: cover;
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        z-index: -1;
+        filter: brightness(60%) saturate(40%) blur(4px);
+        transition: filter var(--duration-animation) var(--anim-curve);
+    }
+
+    .project-wrapper:hover .project-banner {
+        filter: brightness(60%) saturate(100%) blur(0);
+    }
+
+    .project-text-container {
+        padding: 8px 16px;
+    }
+
+    .project-text-container p {
+        text-shadow: 0 0 6px black;
         margin: 0;
     }
 
+    .project-title {
+        font-family: var(--font-mono);
+        font-size: 1.4rem;
+        font-weight: 700;
+    }
+
+    .project-subtitle {
+        
+    }
+
+    .project-date {
+        font-style: italic;
+        font-weight: 600;
+    }
+
+
     /* .project-subtitle {
         font-family: var(--font-mono);
         font-size: 1.0rem;