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

57
assets/style.css
View file

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