main page mostly finished

src/lib/lists/gallery-entry.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+    export interface GalleryEntry {
+        title: string;
+        subtitle: string;
+        fullWidth: boolean;
+        img: 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">
+        {@render galleryEntry({entry})}
+    </div>
+    {:else}
+    <div class="entry-parent half-width">
+        {@render galleryEntry({entry})}
+    </div>
+    {/if}
+    {/each}
+</div>
+
+{#snippet galleryEntry({entry}: {entry: GalleryEntry})}
+<a class="entry" href="{entry.link}">
+    <img src="{entry.img}">
+    <p>{entry.title}</p>
+    <p>{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;
+        margin: 4px;
+    }
+
+    .entry-parent {
+        display: flex;
+    }
+
+    .entry {
+        margin: 4px;
+        padding-bottom: 12px;
+        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-weight: 800;
+        font-style: italic;
+    }
+
+    .half-width {
+        width: 50%;
+    }
+    .full-width {
+        width: 100%;
+    }
+</style>