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