From 4979bf2a3942ae125a5e429eb14ab68690ee1531 Mon Sep 17 00:00:00 2001
From: Christofer <imchris@tuta.io>
Date: Thu, 21 Sep 2023 17:33:15 +0400
Subject: [PATCH] HeroBackground: Remove images+animations

---
 src/routes/+page.server.js       | 13 +------
 src/routes/HeroBackground.svelte | 64 ++------------------------------
 2 files changed, 5 insertions(+), 72 deletions(-)

diff --git a/src/routes/+page.server.js b/src/routes/+page.server.js
index 818e353..2349d53 100755
--- a/src/routes/+page.server.js
+++ b/src/routes/+page.server.js
@@ -12,12 +12,6 @@ function getHeroBackgroundTiles() {
 	const workspaceHeight = 240
 	const gapLength = 32
 	const colors = [baseColors.blue[500], baseColors.cyan[400], baseColors.sky[500]]
-	const images = [
-		'/imgs/chan/joy.svg',
-		'/imgs/chan/surprise.svg',
-		'/imgs/chan/tongueout.svg',
-		'/imgs/waylnad.webp'
-	]
 
 	const leftColumns = Array.from({ length: 3 }, () => generateRow(workspacesPerRow))
 
@@ -56,16 +50,11 @@ function getHeroBackgroundTiles() {
 	}
 
 	function generateTile() {
-		return { color: getRandomColor(), image: Math.random() > 0.7 ? getRandomImage() : undefined }
+		return { color: getRandomColor() }
 	}
 
 	/** @returns {string} */
 	function getRandomColor() {
 		return colors.at(Math.floor(Math.random() * colors.length))
 	}
-
-	/** @returns {string} */
-	function getRandomImage() {
-		return images.at(Math.floor(Math.random() * images.length))
-	}
 }
diff --git a/src/routes/HeroBackground.svelte b/src/routes/HeroBackground.svelte
index ebcb522..9c4c40b 100755
--- a/src/routes/HeroBackground.svelte
+++ b/src/routes/HeroBackground.svelte
@@ -20,13 +20,8 @@
 						<div class="workspace">
 							{#each workspace as tiles}
 								<div class="tiles">
-									{#each tiles as { color, image }}
-										<div
-											class="tile"
-											style:--color={color}
-											class:with-image={image}
-											style:--image={`url(${image})`}
-										></div>
+									{#each tiles as { color }}
+										<div class="tile" style:--color={color}></div>
 									{/each}
 								</div>
 							{/each}
@@ -43,13 +38,8 @@
 						<div class="workspace">
 							{#each workspace as tiles}
 								<div class="tiles">
-									{#each tiles as { color, image }}
-										<div
-											class="tile"
-											style:--color={color}
-											class:with-image={image}
-											style:--image={`url(${image})`}
-										></div>
+									{#each tiles as { color }}
+										<div class="tile" style:--color={color}></div>
 									{/each}
 								</div>
 							{/each}
@@ -179,23 +169,6 @@
 			animation: reveal-artwork_tile calc(var(--reveal-length) + 280ms)
 				cubic-bezier(1, -0.4, 0.165, 1) forwards;
 		}
-
-		&.with-image::after {
-			content: ' ';
-			position: absolute;
-			inset: 0;
-			background-image: var(--image);
-			background-position: center;
-			background-size: contain;
-			background-repeat: no-repeat;
-			opacity: 0;
-			transition: opacity 1520ms ease-in-out;
-		}
-		&:hover::after {
-			animation: reveal-artwork var(--reveal-length) ease-in-out 400ms both;
-			opacity: 1;
-			transition: opacity 1520ms ease-in-out;
-		}
 	}
 
 	.top-light {
@@ -214,33 +187,4 @@
 		pointer-events: none;
 		contain: strict;
 	}
-
-	@keyframes reveal-artwork {
-		0% {
-			opacity: 0%;
-			filter: brightness(1);
-		}
-		50% {
-			filter: brightness(1.45);
-			opacity: 40%;
-		}
-		100% {
-			filter: brightness(1);
-			opacity: 100%;
-		}
-	}
-	@keyframes reveal-artwork_tile {
-		0% {
-			opacity: inherit;
-			scale: 1;
-		}
-		50% {
-			filter: brightness(1.5);
-			scale: 1.1;
-		}
-		100% {
-			opacity: 100%;
-			scale: 1;
-		}
-	}
 </style>