merged main page and devlog galleries to common lib

src/lib/lists/gallery-entry.svelte

@@ -1,91 +0,0 @@
-<script lang="ts">
-    export interface GalleryEntry {
-        title: string;
-        subtitle: string;
-        fullWidth: boolean;
-        img: string;
-        imgAlt: string;
-        link: string;
-    }
-
-    let {
-        entries,
-    }: {
-        entries: GalleryEntry[];
-    } = $props();
-</script>
-
-<div class="container">
-    {#each entries as entry}
-    {#if entry.fullWidth}
-    <div class="entry-parent full-width notched">
-        {@render galleryEntry({entry})}
-    </div>
-    {:else}
-    <div class="entry-parent half-width notched">
-        {@render galleryEntry({entry})}
-    </div>
-    {/if}
-    {/each}
-</div>
-
-{#snippet galleryEntry({entry}: {entry: GalleryEntry})}
-<a class="entry" href="{entry.link}">
-    <img src="{entry.img}" alt="{entry.imgAlt}">
-    <p class="wide-font">{entry.title}</p>
-    <p>{@html entry.subtitle}</p>
-</a>
-{/snippet}
-
-<style>
-    .container {
-        margin-left: auto;
-        margin-right: auto;
-        display: flex;
-        flex-wrap: wrap;
-        /* flex-flow: row wrap; */
-        justify-content: left;
-        padding: 4px;
-    }
-
-    .entry-parent {
-        display: flex;
-    }
-
-    .entry {
-        width: 100%;
-        margin: 4px;
-        padding-bottom: 20px;
-        background-color: var(--color-background-highlight);
-        text-decoration: none; /* removes link underline */
-        transition: background-color 0.16s ease-in-out;
-    }
-    .entry:hover {
-        background-color: var(--color-background-highlight-hover);
-    }
-
-    .entry img {
-        width: 100%;
-        object-fit: cover;
-        max-height: 300px;
-    }
-    .entry p {
-        margin: 0 32px;
-    }
-    /* gallery entry header */
-    .entry p:nth-child(2) {
-        font-size: 20px;
-        margin-top: 12px;
-        font-family: var(--font-title);
-        font-size: 1.2rem;
-        font-weight: 800;
-        font-style: italic;
-    }
-
-    .half-width {
-        width: 50%;
-    }
-    .full-width {
-        width: 100%;
-    }
-</style>

src/lib/lists/gallery.svelte

@@ -0,0 +1,109 @@
+<script lang="ts">
+    export interface GalleryEntry {
+        title: string;
+        subtitle: string;
+        img: string;
+        imgAlt: string;
+        link: string;
+    }
+
+    let {
+        entries,
+        reverseTextOrder,
+    }: {
+        entries: GalleryEntry[];
+        reverseTextOrder?: boolean;
+    } = $props();
+</script>
+
+<div class="post-list">
+    {#each entries as entry}
+        {@render galleryEntry({entry, reverseTextOrder})}
+    {/each}
+</div>
+
+{#snippet galleryEntry({entry, reverseTextOrder}: {entry: GalleryEntry, reverseTextOrder?: boolean})}
+<!-- {#snippet galleryEntry({key, post, index}: {key: string, post: DevlogPost, index: number})} -->
+    <a class="gallery-container" href="{entry.link}">
+        <img class="gallery-img" src="{entry.img}" alt="{entry.imgAlt}">
+        <div class="gallery-text-container">
+            {#if reverseTextOrder}
+                <p class="gallery-date">{@html entry.subtitle}</p>
+                <p class="gallery-title">{entry.title}</p>
+            {:else}
+                <p class="gallery-title">{entry.title}</p>
+                <p class="gallery-date">{@html entry.subtitle}</p>
+            {/if}
+        </div>
+    </a>
+{/snippet}
+
+<style>
+    :root {
+        --color-laura: #C76668CC;
+        --color-laura-darker: #A55051CC;
+    }
+
+    .post-list {
+        max-width: 1600px;
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+    .gallery-container {
+        box-sizing: content-box;
+        height: 80px;
+        display: flex;
+        flex-direction: row;
+        text-decoration: none;
+        align-items: center;
+        margin: 6px 0;
+    }
+
+    .gallery-img {
+        width: 145px;
+        height: 100%;
+        margin: 0;
+        object-fit: cover;
+        filter: grayscale(60%);
+        transition: filter 0.1s ease-out;
+    }
+
+    .gallery-text-container {
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+        height: 100%;
+        padding-left: 16px;
+        border-style: dashed;
+        justify-content: center;
+        border-color: transparent;
+        border-width: 2px;
+        border-left: none;
+        transition: border-color 0.1s ease-out;
+    }
+
+    .gallery-date, .gallery-title {
+        margin: 0;
+        transition: color 0.1s ease-out;
+    }
+
+    .gallery-date {
+        font-size: 1.0rem;
+    }
+
+    .gallery-title {
+        font-family: var(--font-mono);
+        font-weight: 700;
+    }
+
+    .gallery-container:hover .gallery-text-container {
+        border-color: var(--color-highlight);
+    }
+    .gallery-container:hover .gallery-img {
+        filter: grayscale(0%);
+    }
+    .gallery-container:hover p {
+        color: var(--color-highlight);
+    }
+</style>