Update Background

ealush · Jan 27, 2024 · 9cc1ccb · 9cc1ccb
1 parent 42c619a
commit 9cc1ccb
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 11 deletions.
diff --git a/src/styles/Home.module.css b/src/styles/Home.module.css
@@ -33,12 +33,17 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  width: 100%;
   margin: 0 auto;
   font-size: 0.85rem;
   width: 100%;
   z-index: 2;
   font-family: var(--font-mono);
+  max-width: fit-content;
+  padding: 0.5rem 1rem 0;
+  border-radius: var(--border-radius);
+  backdrop-filter: blur(3px);
+  background: rgb(var(--foreground-rgb), 0.05);
+  border: 1px solid rgb(var(--foreground-rgb), 0.3);
 }
 
 .footerRow a {
@@ -61,6 +66,7 @@
   border-radius: var(--border-radius);
   background: rgb(var(--foreground-rgb), 0.05);
   transition: background 0.2s ease;
+  backdrop-filter: blur(5px);
 }
 
 .headerRow a:hover {

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -6,15 +6,15 @@
     "Fira Mono", "Droid Sans Mono", "Courier New", monospace;
 
   --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
+  --background-color: #ff3b3070;
+  --background-backdrop: rgba(255, 255, 255, 0.5);
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
     --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
+    --background-color: #4f2032;
+    --background-backdrop: rgba(1, 1, 1, 0.5);
 
     --callout-rgb: 20, 20, 20;
     --callout-border-rgb: 108, 108, 108;
@@ -35,12 +35,15 @@ body {
 
 body {
   color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
+  background-color: var(--background-color);
+  background-image: repeating-linear-gradient(
+    -45deg,
+    var(--background-backdrop),
+    var(--background-backdrop) 25px,
+    transparent 1px,
+    transparent 50%
+  );
+  background-size: 70.71px 70.71px; /* 50px * sqrt(2) to account for the 45 degree rotation */
 }
 
 a {