diff --git a/frontend/src/components/Homepage2.tsx b/frontend/src/components/Homepage2.tsx index 8f90fc2..aefb23c 100644 --- a/frontend/src/components/Homepage2.tsx +++ b/frontend/src/components/Homepage2.tsx @@ -62,7 +62,7 @@ function Homepage2() { setTimeout(() => { setActve(false) setCount(e => e + 1) - }, Math.max(...warst) * 1000 + 300) + }, Math.max(...warst) * 1000 + 1000) } return ( diff --git a/frontend/src/styles/home2.scss b/frontend/src/styles/home2.scss index f38ed0d..3c5499c 100644 --- a/frontend/src/styles/home2.scss +++ b/frontend/src/styles/home2.scss @@ -1,4 +1,6 @@ @use './mixins/effects' as *; +$g1: rgb(98, 0, 234); +$g2: rgb(236, 64, 122); #tiles { height: 100vh; @@ -6,31 +8,56 @@ display: grid; grid-template-columns: repeat(var(--columns), 1fr); grid-template-rows: repeat(var(--rows), 1fr); + background: linear-gradient(to right, $g1, $g2, $g1); + background-size: 200%; + animation: background-pan 10s linear infinite; .tile { + position: relative; background-color: var(--bg-color1); + &::before { + position: absolute; + content: ''; + background-color: rgb(20, 20, 20); + inset: 1px; + } + &.active { - animation: bright .3s forwards; + animation: bright 1s forwards; animation-delay: var(--delay); } } } +@keyframes background-pan { + from { + background-position: 0% center; + } + + to { + background-position: -200% center; + } +} + @keyframes bright { 0% { background-color: var(--bg-color1); + opacity: 0; } - 50% { - + 40% { background-color: var(--bg-color2); - filter: brightness(130%); - outline: 1px solid white; + opacity: 1; + } + + 60% { + background-color: var(--bg-color2); + opacity: 1; } 100% { - background-color: var(--bg-color2); + opacity: 1; } } \ No newline at end of file