57 lines
1.3 KiB
Svelte
57 lines
1.3 KiB
Svelte
|
<script lang="ts">
|
||
|
|
import Content from "$lib/viewport/content.svelte";
|
||
|
|
import Banner2 from "$lib/banner2.svelte";
|
||
|
|
import { type Record, records } from "./records";
|
||
|
|
|
||
|
|
function openLink(link: string) {
|
||
|
|
window.open(link);
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<svelte:head>
|
||
|
|
<title>Record Wall | denizk0461</title>
|
||
|
|
</svelte:head>
|
||
|
|
|
||
|
|
{#snippet recordCover({ record }: { record: Record })}
|
||
|
|
<button class="record-gallery-container" on:click={(event) => openLink(record.link)}>
|
||
|
|
<img class="record-gallery-cover" src="{record.cover}" alt="Cover for {record.title} by {record.artist}">
|
||
|
|
</button>
|
||
|
|
{/snippet}
|
||
|
|
|
||
|
|
<Content>
|
||
|
|
<Banner2
|
||
|
|
title="Record Wall" />
|
||
|
|
|
||
|
|
<div class="record-gallery">
|
||
|
|
{#each records as record}
|
||
|
|
{@render recordCover({ record })}
|
||
|
|
{/each}
|
||
|
|
</div>
|
||
|
|
</Content>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.record-gallery {
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
}
|
||
|
|
|
||
|
|
.record-gallery-container {
|
||
|
|
display: flex;
|
||
|
|
width: 20%;
|
||
|
|
box-sizing: border-box;
|
||
|
|
border: none;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
.record-gallery-container:hover {
|
||
|
|
background-color: transparent;
|
||
|
|
}
|
||
|
|
.record-gallery-container:hover .record-gallery-cover {
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.record-gallery-cover {
|
||
|
|
width: 100%;
|
||
|
|
margin: 8px;
|
||
|
|
transition: margin 0.1s ease-out;
|
||
|
|
}
|
||
|
|
</style>
|