Dot matrix background

Sheraff · Feb 25, 2024 · c58626e · c58626e
1 parent ee1bfce
commit c58626e
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 6 deletions.
diff --git a/client/src/App.module.css b/client/src/App.module.css
@@ -0,0 +1,8 @@
+.main {
+	background:
+		fixed no-repeat center / 100dvw 100dvh
+			radial-gradient(transparent 30%, var(--background) 70%),
+		repeat center / 40px 40px
+			radial-gradient(hsl(from var(--foreground) h s l / 0.1) 1px, transparent 0),
+		var(--background);
+}
diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -7,12 +7,13 @@ import { WorkerDemo } from "client/components/WorkerDemo"
 import { DbDemo } from "client/components/DbDemo"
 import { ReadTheDocs } from "client/components/ReadTheDocs"
 import { Header } from "client/components/Header/Header"
+import styles from "client/App.module.css"
 
 fooBar()
 
 export default function App() {
 	return (
-		<div>
+		<main className={styles.main}>
 			<Header>
 				<h1>🌳 Root</h1>
 				<ReadTheDocs />
@@ -34,6 +35,6 @@ export default function App() {
 					<DbDemo />
 				</Cell>
 			</Grid>
-		</div>
+		</main>
 	)
 }
diff --git a/client/src/components/Bento/GridCell.module.css b/client/src/components/Bento/GridCell.module.css
@@ -15,8 +15,9 @@
 	grid-row: span var(--y);
 	border-radius: var(--s-0-5);
 	overflow: hidden;
-	border: 1px solid hsl(from var(--foreground) h s l / 0.1);
-	background-color: hsl(from var(--background) h s 3%);
+	border: 1px solid hsl(from var(--background) h 25% 10%);
+	background-color: hsl(from var(--background) h s 3% / 0.3);
+	backdrop-filter: blur(1px) brightness(120%);
 	padding: var(--s);
 
 	@media (width < 500px) {

diff --git a/client/src/components/Divider/Divider.module.css b/client/src/components/Divider/Divider.module.css
@@ -1,12 +1,12 @@
 .divider {
 	border: none;
 	height: 1px;
-	background-color: hsl(from var(--foreground) h s l / 0.1);
+	background-color: hsl(from var(--background) h 25% 10%);
 	margin: 1em 0;
 }
 
 .accent {
-	background-color: hsl(from var(--accent) h s l / 0.4);
+	background-color: hsl(from var(--accent) h s 15%);
 }
 
 .full {