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> <Content>
<div class="album-showcase">
</div>
<div class="album-button-container"> <div class="album-button-container">
{#each albums.entries() as [key, album]} {#each albums.entries() as [key, album]}
{@render albumButton({ key, album })} {@render albumButton({ key, album })}
@@ -26,6 +30,18 @@
</div> </div>
</Content> </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({ {#snippet albumButton({
key, key,
album, album,
@@ -45,12 +61,30 @@
{/snippet} {/snippet}
<style> <style>
/* album showcase */
.album-showcase {
/* display: none; */
}
.album-showcase-img {
}
.album-showcase-title {
}
.album-showcase-paragraph {
}
.album-button-container { .album-button-container {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
} }
/* album buttons */
.album-button { .album-button {
width: calc(100%/12); width: calc(100%/12);
line-height: 0; line-height: 0;