diff --git a/assets/style.css b/assets/style.css index 8af4b67..0331ea6 100644 --- a/assets/style.css +++ b/assets/style.css @@ -18,6 +18,15 @@ body { font-family: "Red Hat Text"; } +@keyframes move-mask { + 0% { + mask-position: 0vw 100vw, 100vw 0vw; + } + 100% { + mask-position: 100vw 0vw, 0vw 100vw; + } +} + html::after { display: inline-block; content: ""; @@ -29,13 +38,15 @@ html::after { image-rendering: pixelated; background: url("/assets/imgs/stylistic/dot.png"); + /* background-color: black; */ background-position: 50% 0; /* background-size: 3840px 1080px; */ - mask-image: url("/assets/imgs/stylistic/bg_dust.png"); + mask-image: url("/assets/imgs/stylistic/bg_dust.png"), url("/assets/imgs/stylistic/bg_dust.png"); mask-repeat: repeat; mask-composite: exclude; - mask-size: 960px 270px; + mask-size: 1920px 540px; mask-position: 50% 0; + animation: move-mask 250s infinite linear; opacity: 0.125; z-index: -1; pointer-events: none; @@ -108,8 +119,7 @@ main .cakeView h2 { color: white; } - img:not(.screen), - body::after { + img:not(.screen) { filter: invert(100%) hue-rotate(180deg); } @@ -210,4 +220,22 @@ button { .cta:hover::after { width: 1ch; +} + +@media (prefers-reduced-motion) { + html::after { + animation: none; + mask-image: url("/assets/imgs/stylistic/bg_dust.png"); + } + + *, + *::after, + *::before { + transition: none !important; + animation: none !important; + } + + body::before { + display: none; + } } \ No newline at end of file