107 lines
2.2 KiB
Svelte
107 lines
2.2 KiB
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";
|
||
|
||
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="/projects/banner.webp"
|
||
subtitle="A look into my music taste"
|
||
/>
|
||
|
||
<Content>
|
||
<div class="album-showcase">
|
||
|
||
</div>
|
||
|
||
<div class="album-button-container">
|
||
{#each albums.entries() as [key, album]}
|
||
{@render albumButton({ key, album })}
|
||
{/each}
|
||
</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,
|
||
}: {
|
||
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 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;
|
||
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> |