From 9c32d18ef351ad92c370a6fce797ad59830aad26 Mon Sep 17 00:00:00 2001
From: MeowcaTheoRange <me@abtmtr.link>
Date: Fri, 11 Oct 2024 13:15:34 -0500
Subject: [PATCH] pixel bg

---
 assets/imgs/stylistic/dot.png | Bin 0 -> 124 bytes
 assets/style.css              |  59 ++++++++++++++++++++++++++--------
 2 files changed, 46 insertions(+), 13 deletions(-)
 create mode 100644 assets/imgs/stylistic/dot.png

diff --git a/assets/imgs/stylistic/dot.png b/assets/imgs/stylistic/dot.png
new file mode 100644
index 0000000000000000000000000000000000000000..33ba4fc77c4943fa78192c844ef55b7488f74af1
GIT binary patch
literal 124
zcmeAS@N?(olHy`uVBq!ia0vp^Od!kwBL7~QRScvUi-X*q7}lMWc?smOq&xaLGB9lH
z=l+w(3gmMZctipf@f`+X#^d=bQh<Vjo-U3d65+`|_}O?IKK%b*&){;B<HyNwLe4-*
N22WQ%mvv4FO#r_$AkhE-

literal 0
HcmV?d00001

diff --git a/assets/style.css b/assets/style.css
index 92fa731..2c7fe32 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -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");
+  background:
+    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],