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 @@
{#each workspace as tiles}
- {#each tiles as { color, image }}
-
+ {#each tiles as { color }}
+
{/each}
{/each}
@@ -43,13 +38,8 @@
{#each workspace as tiles}
- {#each tiles as { color, image }}
-
+ {#each tiles as { color }}
+
{/each}
{/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;
- }
- }