feat: compress even moooooarr!

src/lib/components/curtains.svelte

@@ -3,31 +3,26 @@
 </script>
 
 <div class="background" class:visible>
-	<div class="drapery" />
-	<img
-		alt="curtain left"
-		class="curtain-right"
-		src="/curtain.png"
-		srcset="
-      /curtain.png,    <!-- Fallback for browsers that don't support the format -->
-      /curtain.webp 1x,    <!-- 1x resolution for browsers that support WebP -->
-      /curtain.webp 2x,    <!-- 2x resolution for browsers that support WebP -->
-      /curtain.avif 1x,    <!-- 1x resolution for browsers that support AVIF -->
-      /curtain.avif 2x     <!-- 2x resolution for browsers that support AVIF -->
-    "
-	/>
-	<img
-		alt="curtain right"
-		class="curtain-left"
-		src="/curtain.png"
-		srcset="
-      /curtain.png,    <!-- Fallback for browsers that don't support the format -->
-      /curtain.webp 1x,    <!-- 1x resolution for browsers that support WebP -->
-      /curtain.webp 2x,    <!-- 2x resolution for browsers that support WebP -->
-      /curtain.avif 1x,    <!-- 1x resolution for browsers that support AVIF -->
-      /curtain.avif 2x     <!-- 2x resolution for browsers that support AVIF -->
-    "
-	/>
+	<div class="drapery">
+		{#each Array.from({ length: 5 }) as _}
+			<picture>
+				<source srcset="/drapery.avif" type="image/avif" />
+				<source srcset="/drapery.webp" type="image/webp" />
+				<img alt="drapery" src="/drapery.png" />
+			</picture>
+		{/each}
+	</div>
+	<picture>
+		<source srcset="/curtain.avif" type="image/avif" />
+		<source srcset="/curtain.webp" type="image/webp" />
+		<img alt="curtain left" class="curtain-right" src="/curtain.png" />
+	</picture>
+
+	<picture>
+		<source srcset="/curtain.avif" type="image/avif" />
+		<source srcset="/curtain.webp" type="image/webp" />
+		<img alt="curtain right" class="curtain-left" src="/curtain.png" />
+	</picture>
 </div>
 
 <style>
@@ -45,24 +40,28 @@
 	}
 
 	.drapery {
-		background-image: url('/drapery.avif'), url('/drapery.webp'), url('/drapery.png');
-		background-position: center top;
 		position: absolute;
 		top: -50px;
-		left: 0px;
-		width: 100vw;
-		height: 300px;
-		background-repeat: repeat-x;
-		background-size: 600px 200px;
+		left: 50vw;
+		width: fit-content;
+		height: 250px;
 		z-index: 3;
 		filter: brightness(1.2) contrast(1.2) saturate(1.3) hue-rotate(-15deg)
 			drop-shadow(0px 0px 50px black);
-		transform: translateY(-500px) scaleY(0);
+		transform: translateY(-500px) translateX(-50%) scaleY(0);
 		transition: transform 2s ease;
+		white-space: nowrap;
+	}
+	.drapery img {
+		height: 100%;
+		width: auto;
+		margin-left: -5px;
+		object-fit: cover;
+		display: inline;
 	}
 
 	.visible .drapery {
-		transform: translateY(0px) scaleY(1);
+		transform: translateY(0px) scaleY(1) translateX(-50%);
 	}
 
 	img.curtain-right {

src/routes/gallery/+page.svelte

@@ -25,7 +25,7 @@
 </script>
 
 <div class="wrapper">
-	<h1>Gallerie</h1>
+	<h1>Gallerie der Gäste</h1>
 	<div class="grid">
 		{#each items as item}
 			<div
@@ -59,7 +59,6 @@
 		font-size: 5rem;
 		font-family: Parisienne, cursive;
 		color: white;
-		margin-left: 50px;
 		text-align: center;
 	}