Fancy background

client-solid/src/Root.tsx

@@ -40,6 +40,7 @@ function Root(): JSXElement {
         <LoginContext.Provider
           value={{ token, setToken, username, setUsername }}
         >
+          <FancyBackground />
           <div class="flex flex-col items-center">
             <Navbar />
             <LoginModal />
@@ -53,4 +54,12 @@ function Root(): JSXElement {
   );
 }
 
+function FancyBackground(): JSXElement {
+  return (
+    <div class="bg-container">
+      <div class="bg-fancy min-h-screen bg-cover bg-center" />
+    </div>
+  );
+}
+
 export default Root;

client-solid/src/index.css

@@ -1,3 +1,28 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+.bg-container {
+    z-index: -1;
+    position: absolute;
+    overflow: hidden;
+    height: 100%;
+    width: 100%;
+}
+
+.bg-fancy {
+    position: absolute;
+    top: -50vw;
+    left: -50vh;
+    height: 200vh;
+    width: 200vw;
+    opacity: 0.02;
+    background-image:
+        linear-gradient(#ffffff 2px, transparent 2px),
+        linear-gradient(90deg, #ffffff 2px, transparent 2px),
+        linear-gradient(#ffffff 1px, transparent 1px),
+        linear-gradient(90deg, #ffffff 1px, transparent 1px);
+    background-size: 200px 200px, 200px 200px, 40px 40px, 40px 40px;
+    background-position: -8px -8px, -8px -8px, -4px -4px, -4px -4px;
+    transform: matrix(1.5, 0.2, -1, 1.2, 0, 0);
+}