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

pixel bg

Browse source
This commit is contained in:
MeowcaTheoRange 2024-10-11 13:15:34 -05:00
parent 54723ba334
commit 9c32d18ef3
2 changed files with 46 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
assets/imgs/stylistic/dot.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 124 B

59
assets/style.css
View file

@ -18,20 +18,17 @@ body {
font-family: "Red Hat Text"; font-family: "Red Hat Text";
} }
body::after { html::after {
display: inline-block; display: inline-block;
content: ""; content: "";
position: absolute; position: fixed;
left: 0; left: 0;
top: 0; top: 0;
width: 100%; width: 100vw;
height: 100%; height: 100vh;
image-rendering: pixelated; image-rendering: pixelated;
background: background:
linear-gradient(to left, white, transparent calc(50% - 384px)), url("/assets/imgs/stylistic/dot.png");
linear-gradient(to right, white, transparent calc(50% - 384px)),
linear-gradient(to top, white 1rem, transparent 5rem),
url("/assets/imgs/stylistic/bg_pattern.png");
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");
@ -39,12 +36,39 @@ body::after {
mask-composite: exclude; mask-composite: exclude;
mask-size: 960px 270px; mask-size: 960px 270px;
mask-position: 50% 0; mask-position: 50% 0;
opacity: 0.25; opacity: 0.125;
z-index: -1; z-index: -1;
pointer-events: none; pointer-events: none;
user-select: none; user-select: none;
} }
/* body::after {
display: inline-block;
content: "";
position: absolute;
left: 0;
top: 0;
width: 100vw;
height: 100%;
image-rendering: pixelated;
background:
linear-gradient(to left, white, transparent calc(50% - 384px)),
linear-gradient(to right, white, transparent calc(50% - 384px)),
linear-gradient(to top, white 1rem, transparent 5rem),
url("/assets/imgs/stylistic/dot.png");
background-position: 50% 0;
/* background-size: 3840px 1080px; *
mask-image: url("/assets/imgs/stylistic/bg_dust.png");
mask-repeat: repeat;
mask-composite: exclude;
mask-size: 960px 270px;
mask-position: 50% 0;
opacity: 0.25;
z-index: -2;
pointer-events: none;
user-select: none;
} */
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
font-family: "Red Hat Display"; font-family: "Red Hat Display";
} }
@ -57,9 +81,8 @@ main .cakeView {
/* margin-bottom: calc((100vh - 100svh) + 4rem); */ /* margin-bottom: calc((100vh - 100svh) + 4rem); */
} }
main .cakeView section { img:not(.screen) {
background-color: rgba(var(--bg), 1); box-shadow: 0 0 8px 8px white;
box-shadow: 0 0 2rem 4rem rgba(var(--bg), 1);
} }
/* @media (prefers-color-scheme: dark) { /* @media (prefers-color-scheme: dark) {
@ -89,9 +112,15 @@ main .cakeView h2 {
body::after { body::after {
filter: invert(100%) hue-rotate(180deg); filter: invert(100%) hue-rotate(180deg);
} }
html::after {
opacity: 0.2;
filter: invert(100%) hue-rotate(180deg);
}
} }
.yesNoListView { .yesNoListView {
background-color: rgb(var(--bg));
border: 1px solid currentColor; border: 1px solid currentColor;
padding-top: 0; padding-top: 0;
padding-left: 1rem; padding-left: 1rem;
@ -103,6 +132,10 @@ main .cakeView h2 {
margin-top: 1rem; margin-top: 1rem;
} }
input, textarea, button {
background-color: rgb(var(--bg));
}
input[type=submit], input[type=submit],
input[type=reset], input[type=reset],
input[type=button], input[type=button],