feat: style some shit better

src/lib/components/ImageFrame.svelte

@@ -7,10 +7,20 @@
 </script>
 
 <div class="frame" style="--frame: url(/frames/frame_0{int}.png)">
+	<img src="/hang.png" class="hang" />
 	<img {src} {alt} />
 </div>
 
 <style>
+	.hang {
+		position: absolute;
+		top: 0px;
+		margin: 0px;
+		top: -16%;
+		width: 50%;
+		left: 25%;
+		z-index: -1;
+	}
 	.frame {
 		position: relative;
 		width: fit-content;

src/lib/components/Questions.svelte

@@ -296,6 +296,16 @@
 		font-size: 2em;
 		margin-bottom: 200px;
 	}
+	button {
+		border: none;
+		border-radius: 9px;
+		padding: 5px 9px;
+		margin-right: 10px;
+		background: #d0a75c;
+		border: solid thin gold;
+		box-shadow: 3px 3px 8px white inset;
+		cursor: pointer;
+	}
 	.wrapper {
 		display: flex;
 		flex-direction: column;

src/lib/components/TextSplit.svelte

@@ -2,6 +2,7 @@
 	export let content: string;
 	const words = content.split(' ');
 	export let delay = 0;
+	export let center = false;
 	const delays: number[] = [];
 	let total = delay;
 	for (let i = 0; i < words.length; i++) {
@@ -11,7 +12,7 @@
 	}
 </script>
 
-<div class="wrapper">
+<div class="wrapper" style="justify-content: {center ? 'center' : 'left'}">
 	{#each words as word, i}
 		<span class="word" style="--delay:{delays[i]}ms">{word}</span>
 	{/each}

src/lib/components/button.svelte

@@ -16,6 +16,7 @@
 		font-size: var(--font-size, 1em);
 		color: #ceba51;
 		background: transparent;
+		padding: 16px 22px;
 		border-width: 30px;
 		border-image: url(/border_b.svg);
 		border-image-repeat: stretch;

src/routes/+page.svelte

@@ -55,11 +55,13 @@
 {#if contentVisible}
 	<div class="einladung" out:fade>
 		<TextSplit
+			center
 			content="Wir laden dich herzlich ein, an unserer exklusiven Silvesterparty teilzunehmen, die dieses Jahr im magischen Ambiente eines Maskenballs stattfindet. Tauche ein in eine Nacht voller Geheimnisse, Eleganz und festlichem Glanz."
 		/>
 
 		<span in:fade={{ delay: 8000, duration: 1000 }}>
 			<Button
+				--font-size="0.8em"
 				on:click={() => {
 					contentVisible = false;
 					questionVisible = true;

src/routes/gallery/+page.svelte

@@ -13,9 +13,9 @@
 				...item,
 				y: -5 + Math.random() * 10,
 				x: -5 + Math.random() * 10,
-				scale: 0.9 + Math.random() * 0.2,
-				rot: -5 + Math.random() * 10,
-				marginTop: -10 + Math.random() * 20
+				scale: 0.9 + Math.random() * 0.15,
+				rot: `${-0.5 + Math.random() * 1}deg`,
+				marginTop: 50 + Math.random() * 30
 			};
 		})
 		.reverse();
@@ -29,7 +29,7 @@
 	<div class="grid">
 		{#each items as item}
 			<div
-				style="--x: {item.x}%, --y: {item.y}%; --scale: {item.scale}; --rot:{item.rot}; margin-top: {item.marginTop}px"
+				style="--x: {item.x}%; --y: {item.y}%; --scale: {item.scale}; --rot:{item.rot}; margin-top: {item.marginTop}px"
 				class="item"
 				class:active={item.noble_name === last_name}
 			>
@@ -49,25 +49,42 @@
 		padding-bottom: 100px;
 	}
 	h1 {
-		font-size: 4rem;
+		font-size: 5rem;
 		font-family: Parisienne, cursive;
 		color: white;
 		margin-left: 50px;
+		text-align: center;
 	}
 	p {
 		color: white;
 		font-family: Parisienne, cursive;
-		font-size: 1.2em;
+		font-size: 1.5em;
 		margin-left: 40px;
 		width: 80%;
 		margin-top: 10px;
 	}
+
 	.item {
-		transform: translate(var(--x), var(--y)) scale(var(--scale)) rotate(var(--rot) deg);
+		transform: scale(var(--scale)) rotate(var(--rot)) translate(var(--x), var(--y));
 	}
+
 	.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);
+		filter: drop-shadow(0px 0px 40px #be8630aa);
+		animation: glow 5s infinite alternate;
+	}
+
+	@keyframes glow {
+		from {
+			filter: drop-shadow(0px 0px 10px #be8630ff);
+		}
+		to {
+			filter: drop-shadow(0px 0px 40px #be86305c);
+		}
+	}
+
+	:global(html) {
+		background-image: url(/pattern.jpg) !important;
+		backdrop-filter: brightness(0.5) !important;
 	}
 	div {
 		max-width: 1300px;

static/hang.png:Zone.Identifier

@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+HostUrl=about:internet