67 lines
1.3 KiB
Svelte
67 lines
1.3 KiB
Svelte
<script lang="ts">
|
|
import ImageFrame from '$lib/components/ImageFrame.svelte';
|
|
import Confetti from '$lib/components/confetti.svelte';
|
|
import { onMount } from 'svelte';
|
|
|
|
export let data;
|
|
|
|
let last_name: string | null = '';
|
|
|
|
const items = data.data
|
|
.map((item) => {
|
|
return {
|
|
...item,
|
|
marginTop: 20 + Math.random() * 50
|
|
};
|
|
})
|
|
.reverse();
|
|
onMount(() => {
|
|
last_name = localStorage.getItem('last-name');
|
|
});
|
|
</script>
|
|
|
|
<div>
|
|
<h1>Gallerie</h1>
|
|
<div class="grid">
|
|
{#each items as item}
|
|
<div style="margin-top: {item.marginTop}px" class:active={item.noble_name === last_name}>
|
|
<ImageFrame src={item.portrait} />
|
|
<p>{item.noble_name}</p>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
|
|
<Confetti />
|
|
|
|
<style>
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
|
|
padding-bottom: 100px;
|
|
}
|
|
h1 {
|
|
font-size: 4rem;
|
|
font-family: Parisienne, cursive;
|
|
color: white;
|
|
margin-left: 50px;
|
|
}
|
|
p {
|
|
color: white;
|
|
font-family: Parisienne, cursive;
|
|
font-size: 1.2em;
|
|
margin-left: 40px;
|
|
width: 80%;
|
|
margin-top: 10px;
|
|
}
|
|
.active {
|
|
filter: drop-shadow(0px 0px 40px #be8630aa) drop-shadow(0px 0px 5px black)
|
|
drop-shadow(0px 0px 5px black) drop-shadow(0px 0px 5px black);
|
|
}
|
|
div {
|
|
max-width: 1300px;
|
|
width: 80%;
|
|
margin: 0 auto;
|
|
}
|
|
</style>
|