max/silvester-23
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: make portraits more random

Browse Source
This commit is contained in:
max_richter 2023-11-13 00:01:48 +01:00
parent 9b0b4e110b
commit b3091fee92
1 changed files with 12 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/routes/gallery/+page.svelte
View File

@ -11,7 +11,10 @@
.map((item) => { .map((item) => {
return { return {
...item, ...item,
marginTop: 20 + Math.random() * 50 y: -5 + Math.random() * 10,
x: -5 + Math.random() * 10,
scale: 0.9 + Math.random() * 0.2,
rot: -5 + Math.random() * 10
}; };
}) })
.reverse(); .reverse();
@ -24,7 +27,11 @@
<h1>Gallerie</h1> <h1>Gallerie</h1>
<div class="grid"> <div class="grid">
{#each items as item} {#each items as item}
<div style="margin-top: {item.marginTop}px" class:active={item.noble_name === last_name}> <div
style="--x: {item.x}%, --y: {item.y}%; --scale: {item.scale}; --rot:{item.rot}"
class="item"
class:active={item.noble_name === last_name}
>
<ImageFrame src={item.portrait} /> <ImageFrame src={item.portrait} />
<p>{item.noble_name}</p> <p>{item.noble_name}</p>
</div> </div>
@ -54,6 +61,9 @@
width: 80%; width: 80%;
margin-top: 10px; margin-top: 10px;
} }
.item {
transform: translate(var(--x), var(--y)) scale(var(--scale)) rotate(var(--rot) deg);
}
.active { .active {
filter: drop-shadow(0px 0px 40px #be8630aa) drop-shadow(0px 0px 5px black) 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); drop-shadow(0px 0px 5px black) drop-shadow(0px 0px 5px black);