MeowcaTheoRange/abtmtr-comms
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

random noise, prefers-reduced-motion

Browse source
This commit is contained in:
MeowcaTheoRange 2024-10-12 09:13:24 -05:00
parent 0967f2ceb1
commit 33eed81c0d
1 changed files with 32 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
assets/style.css
View file

@ -18,6 +18,15 @@ body {
font-family: "Red Hat Text"; font-family: "Red Hat Text";
} }
@keyframes move-mask {
0% {
mask-position: 0vw 100vw, 100vw 0vw;
}
100% {
mask-position: 100vw 0vw, 0vw 100vw;
}
}
html::after { html::after {
display: inline-block; display: inline-block;
content: ""; content: "";
@ -29,13 +38,15 @@ html::after {
image-rendering: pixelated; image-rendering: pixelated;
background: background:
url("/assets/imgs/stylistic/dot.png"); url("/assets/imgs/stylistic/dot.png");
/* background-color: black; */
background-position: 50% 0; background-position: 50% 0;
/* background-size: 3840px 1080px; */ /* 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-repeat: repeat;
mask-composite: exclude; mask-composite: exclude;
mask-size: 960px 270px; mask-size: 1920px 540px;
mask-position: 50% 0; mask-position: 50% 0;
animation: move-mask 250s infinite linear;
opacity: 0.125; opacity: 0.125;
z-index: -1; z-index: -1;
pointer-events: none; pointer-events: none;
@ -108,8 +119,7 @@ main .cakeView h2 {
color: white; color: white;
} }
img:not(.screen), img:not(.screen) {
body::after {
filter: invert(100%) hue-rotate(180deg); filter: invert(100%) hue-rotate(180deg);
} }
@ -211,3 +221,21 @@ button {
.cta:hover::after { .cta:hover::after {
width: 1ch; 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;
}
}