pages/src/routes/about/music/+page.svelte

<script lang="ts">
    import BannerTitleAlt from "$lib/banner-title-alt.svelte";
    import Content from "$lib/content.svelte";
    import { albums, type AlbumEntry } from "$lib/likedalbums";
</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({ album })}
        {/each}
    </div>
</Content>

{#snippet albumButton({
    album
}: {
    album: AlbumEntry;
})}
    <div class="album-button">
        <input
            class="album-button-img"
            type="image"
            src="{album.img}"
            alt="Album art for {album.artist} – {album.title}" />
    </div>
{/snippet}

<style>
    .album-button-container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .album-button {
        width: calc(100%/12);
        line-height: 0;
    }

    .album-button-img {
        width: 100%;
        padding: 2px;
        box-sizing: border-box;
    }
</style>