diff --git a/assets/imgs/stylistic/dot.png b/assets/imgs/stylistic/dot.png new file mode 100644 index 0000000..33ba4fc Binary files /dev/null and b/assets/imgs/stylistic/dot.png differ 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],