moved music to garden section; added highlight effect to albums

This commit is contained in:
2025-08-18 14:22:13 +02:00
parent 608d17a752
commit a5d077c6c7
29 changed files with 20 additions and 3 deletions

View File

@@ -2,6 +2,10 @@
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>
@@ -17,14 +21,16 @@
<Content>
<div class="album-button-container">
{#each albums.entries() as [key, album]}
{@render albumButton({ album })}
{@render albumButton({ key, album })}
{/each}
</div>
</Content>
{#snippet albumButton({
album
key,
album,
}: {
key: string;
album: AlbumEntry;
})}
<div class="album-button">
@@ -32,7 +38,9 @@
class="album-button-img"
type="image"
src="{album.img}"
alt="Album art for {album.artist} {album.title}" />
alt="Album art for {album.artist} {album.title}"
on:click={() => prnt(key)}
/>
</div>
{/snippet}
@@ -46,6 +54,15 @@
.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 {