new.fosc.space/src/layouts/new.astro

80 lines
2.1 KiB
Plaintext

---
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", "black");
} 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>