---
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>
