bg done

2023-10-07 22:48:10 +02:00
parent 03923b10aa
commit fb7e621466
4 changed files with 109 additions and 201 deletions
--- a/src/layouts/new.astro
+++ b/src/layouts/new.astro
@ -0,0 +1,79 @@
+---
+import "@/styles/globals.css";
+
+import Navbar from "../components/Navbar.astro";
+import Footer from "../components/Footer.astro";
+
+import backgroundImage1 from "../assets/gallery/coreboot2.jpg";
+---
+
+<!doctype html>
+<html lang="en">
+  <!-- Ah shit, here we go again. -->
+
+  <head>
+    <meta charset="utf-8" />
+    <title>FOSC</title>
+    <meta name="generator" content={Astro.generator} />
+
+    <!-- Theme manager -->
+    <script is:inline>
+      // ☝️ This script prevent the FART effect.
+      if (localStorage.getItem("theme") === null) {
+        document.documentElement.setAttribute("data-theme", "light");
+      } else
+        document.documentElement.setAttribute(
+          "data-theme",
+          localStorage.getItem("theme")
+        );
+      // "theme" LocalStorage value is set by the package to remember user preference.
+      // The value is checked and applyed before rendering anything.
+    </script>
+    <script>
+      import { themeChange } from "theme-change";
+      themeChange();
+      // 👆 you could import the CDN directly instead of these two lines
+    </script>
+  </head>
+
+  <body>
+    
+    <!-- Apply filters to background -->
+    <div class="background bg-fixed bg-cover bg-center bg-repeat-y">
+      <div class="background-filter"></div>
+    </div>
+
+    <!-- Vertical screen space is initially shared by navbar and splash content, further content can be obtained by scrolling -->
+    <!-- This is our true body for all intents and purposes -->
+    <!-- Placing content outside this div causes blurry useless things -->
+    <div class="flex flex-col h-screen">
+      <Navbar />
+
+      <div class="container mx-auto">
+        <slot />
+      </div>
+
+      <Footer />
+    </div>
+  </body>
+</html>
+
+<style>
+  .background {
+    background-image: url(../assets/gallery/coreboot2.jpg);
+    background-position: bottom;
+    height: 100vh;
+    width: 100%;
+    position: fixed; /* Ensure the background div stays in place */
+    top: 0;
+    left: 0;
+    z-index: -1;
+  }
+  .background-filter {
+    background: hsl(var(--b1));
+    opacity: 50%;
+    backdrop-filter: blur(8px); 
+    height: 100vh;
+
+  }
+</style>