Background and Transparency

1n0r4 · Dec 12, 2024 · ed422b0 · ed422b0
1 parent 4198807
commit ed422b0
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 12 deletions.
diff --git a/images/starfinder.webp b/images/starfinder.webp
diff --git a/script.js b/script.js
@@ -19,4 +19,4 @@ document.addEventListener('DOMContentLoaded', () => {
             }
         });
     });
-});
+});
diff --git a/style.css b/style.css
@@ -19,21 +19,29 @@
 }
 
 body {
-  background-color: var(--bg-primary);
+  background: linear-gradient(180deg, rgba(10, 11, 22, 0.8), rgba(5, 6, 12, 0.8), black), url("images/starfinder.webp");
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-attachment: fixed; /* Needed for parallax */
+  background-position: center top;
   color: var(--text-primary);
   font-family: var(--font-primary);
   line-height: 1.6;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
+  overflow-x: hidden;
 }
 
 .container {
   max-width: 1000px;
-  margin: 0 auto;
+  margin: 2rem auto;
   padding: 2rem;
-  background-color: var(--bg-secondary);
+  background: rgba(17, 22, 39, 0.7); /* Adjust transparency */
+  -webkit-backdrop-filter: blur(var(--glass-blur));
+          backdrop-filter: blur(var(--glass-blur));
   border-radius: 16px;
-  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 5px 15px rgba(0, 0, 0, 0.05);
+  box-shadow: var(--box-shadow-primary);
+  border: 1px solid rgba(255, 255, 255, 0.1);
 }
 
 h1, h2 {

diff --git a/style.css.map b/style.css.map
diff --git a/style.scss b/style.scss
@@ -23,26 +23,35 @@
 }
 
 body {
-  background-color: var(--bg-primary);
+  background: linear-gradient(180deg, rgba(10, 11, 22, 0.8), rgba(5, 6, 12, 0.8), black), 
+              url('images/starfinder.webp');
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-attachment: fixed; /* Needed for parallax */
+  background-position: center top;
   color: var(--text-primary);
   font-family: var(--font-primary);
   line-height: 1.6;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
+  overflow-x: hidden;
 }
 
+
+
 // Container Styles
 .container {
   max-width: 1000px;
-  margin: 0 auto;
+  margin: 2rem auto;
   padding: 2rem;
-  background-color: var(--bg-secondary);
+  background: rgba(17, 22, 39, 0.7); /* Adjust transparency */
+  backdrop-filter: blur(var(--glass-blur));
   border-radius: 16px;
-  box-shadow: 
-    0 15px 35px rgba(0, 0, 0, 0.1),
-    0 5px 15px rgba(0, 0, 0, 0.05);
+  box-shadow: var(--box-shadow-primary);
+  border: 1px solid rgba(255, 255, 255, 0.1);
 }
 
+
 // Typography
 h1, h2 {
   font-family: var(--font-display);
-Original file line number
+Diff line change
@@ Expand Up / @@ -19,4 +19,4 @@ document.addEventListener('DOMContentLoaded', () => { @@
                 }
             });
         });
-    });
+    });