started work on the new garden

src/routes/garden/record-wall/+page.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+    import Content from "$lib/viewport/content.svelte";
+    import Banner2 from "$lib/banner2.svelte";
+    import { type Record, records } from "./records";
+
+    function openLink(link: string) {
+        window.open(link);
+    }
+</script>
+
+<svelte:head>
+    <title>Record Wall | denizk0461</title> 
+</svelte:head>
+
+{#snippet recordCover({ record }: { record: Record })}
+    <button class="record-gallery-container" on:click={(event) => openLink(record.link)}>
+        <img class="record-gallery-cover" src="{record.cover}" alt="Cover for {record.title} by {record.artist}">
+    </button>
+{/snippet}
+
+<Content>
+    <Banner2
+        title="Record Wall" />
+
+    <div class="record-gallery">
+        {#each records as record}
+            {@render recordCover({ record })}
+        {/each}
+    </div>
+</Content>
+
+<style>
+    .record-gallery {
+        display: flex;
+        flex-wrap: wrap;
+    }
+
+    .record-gallery-container {
+        display: flex;
+        width: 20%;
+        box-sizing: border-box;
+        border: none;
+        padding: 0;
+    }
+    .record-gallery-container:hover {
+        background-color: transparent;
+    }
+    .record-gallery-container:hover .record-gallery-cover {
+        margin: 0;
+    }
+
+    .record-gallery-cover {
+        width: 100%;
+        margin: 8px;
+        transition: margin 0.1s ease-out;
+    }
+</style>