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; - } - }