created a snippet to use for detailed album view

This commit is contained in:
2025-08-18 15:00:55 +02:00
parent 5ebbfb959e
commit a03d71fe77

View File

@@ -19,6 +19,10 @@
/>
<Content>
<div class="album-showcase">
</div>
<div class="album-button-container">
{#each albums.entries() as [key, album]}
{@render albumButton({ key, album })}
@@ -26,6 +30,18 @@
</div>
</Content>
{#snippet albumShowcase({
album,
}: {
album: AlbumEntry;
})}
<img class="album-showcase-img" alt="Album art for {album.artist} {album.title}">
<h2 class="album-showcase-title">{album.artist} {album.title}</h2>
{#each album.description as paragraph}
<p class="album-showcase-paragraph">{paragraph}</p>
{/each}
{/snippet}
{#snippet albumButton({
key,
album,
@@ -45,12 +61,30 @@
{/snippet}
<style>
/* album showcase */
.album-showcase {
/* display: none; */
}
.album-showcase-img {
}
.album-showcase-title {
}
.album-showcase-paragraph {
}
.album-button-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
/* album buttons */
.album-button {
width: calc(100%/12);
line-height: 0;