moved music to garden section; added highlight effect to albums

src/routes/garden/music/+page.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+    import BannerTitleAlt from "$lib/banner-title-alt.svelte";
+    import Content from "$lib/content.svelte";
+    import { albums, type AlbumEntry } from "$lib/likedalbums";
+
+    let prnt = function(key: string) {
+        console.log(key)
+    }
+</script>
+
+<svelte:head>
+    <title>My Liked Music | denizk0461</title>
+</svelte:head>
+
+<BannerTitleAlt
+    title="My Liked Music"
+    banner="/common/me/.webp"
+    subtitle="A look into my music taste"
+/>
+
+<Content>
+    <div class="album-button-container">
+        {#each albums.entries() as [key, album]}
+        {@render albumButton({ key, album })}
+        {/each}
+    </div>
+</Content>
+
+{#snippet albumButton({
+    key,
+    album,
+}: {
+    key: string;
+    album: AlbumEntry;
+})}
+    <div class="album-button">
+        <input
+            class="album-button-img"
+            type="image"
+            src="{album.img}"
+            alt="Album art for {album.artist} – {album.title}"
+            on:click={() => prnt(key)}
+        />
+    </div>
+{/snippet}
+
+<style>
+    .album-button-container {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+    }
+
+    .album-button {
+        width: calc(100%/12);
+        line-height: 0;
+        transition: 0.06s ease-in-out scale, 0.1s ease-in-out filter;
+        scale: 1.0;
+        z-index: 1;
+        filter: saturate(0.2) brightness(0.7);
+    }
+    .album-button:hover {
+        scale: 1.25;
+        z-index: 20;
+        filter: saturate(1.0) brightness(1.0);
+    }
+
+    .album-button-img {
+        width: 100%;
+        padding: 2px;
+        box-sizing: border-box;
+    }
+</style>