145 lines
3.9 KiB
Text
145 lines
3.9 KiB
Text
---
|
|
import Header from "@components/Header.astro";
|
|
import { ViewTransitions } from "astro:transitions";
|
|
import MobileNavigation from "@components/MobileNavigation.astro";
|
|
import SettingsLoader from '@components/settings/Loader.astro';
|
|
interface Props {
|
|
title: string;
|
|
}
|
|
|
|
const { title } = Astro.props;
|
|
---
|
|
|
|
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<SettingsLoader transition:persist />
|
|
<meta charset="UTF-8" />
|
|
<meta name="description" content="Astro description" />
|
|
<meta name="viewport" content="width=device-width" />
|
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" id="favicon" />
|
|
<link
|
|
rel="stylesheet"
|
|
href="/nebula.css"
|
|
id="stylesheet"
|
|
transition:persist
|
|
/>
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap"
|
|
/>
|
|
<meta name="generator" content={Astro.generator} />
|
|
<title>{title}</title>
|
|
<ViewTransitions />
|
|
</head>
|
|
<body class="h-full bg-primary">
|
|
<Header />
|
|
<div class="h-full z-10 w-full fixed">
|
|
<slot />
|
|
</div>
|
|
<div
|
|
id="mobileNavMenu"
|
|
class="w-full fixed inset-0 h-[calc(100%-4rem)] z-20"
|
|
transition:persist
|
|
>
|
|
<MobileNavigation />
|
|
</div>
|
|
<video
|
|
autoplay
|
|
muted
|
|
loop
|
|
id="nebulaVideo"
|
|
class="absolute z-0 h-[calc(100%-4rem)] w-full object-cover"
|
|
transition:persist
|
|
>
|
|
<source type="video/mp4" id="videosource" transition:persist />
|
|
</video>
|
|
<img
|
|
src=""
|
|
class="absolute z-0 h-[calc(100%-4rem)] w-full object-cover hidden"
|
|
id="nebulaImage"
|
|
transition:persist
|
|
/>
|
|
<script>
|
|
import { isMobileNavOpen } from "../store.js";
|
|
const mobileNavMenu = document.getElementById("mobileNavMenu");
|
|
// Listen to changes in the store, and show/hide the mobile navigation accordingly
|
|
isMobileNavOpen.subscribe((open) => {
|
|
if (open) {
|
|
if (mobileNavMenu) {
|
|
mobileNavMenu.style.display = "block";
|
|
mobileNavMenu.style.transform = "translateX(0%)";
|
|
}
|
|
} else {
|
|
if (mobileNavMenu) {
|
|
mobileNavMenu.style.transform = "translateX(100%)";
|
|
}
|
|
}
|
|
});
|
|
|
|
const stylesheet_link = localStorage.getItem("stylesheet");
|
|
const stylesheet = document.getElementById(
|
|
"stylesheet"
|
|
)! as HTMLAnchorElement;
|
|
|
|
if (stylesheet_link) {
|
|
stylesheet.href = stylesheet_link;
|
|
}
|
|
|
|
const video_link = localStorage.getItem("background_video");
|
|
|
|
const image_link = localStorage.getItem("background_image");
|
|
|
|
const image_source = document.getElementById("nebulaImage")! as any;
|
|
const source = document.getElementById("nebulaVideo")! as any;
|
|
|
|
if (video_link) {
|
|
source.src = "/videos/" + video_link;
|
|
}
|
|
if (image_link) {
|
|
image_source.style.display = "block";
|
|
image_source.src = "/images/" + image_link;
|
|
}
|
|
</script>
|
|
<style>
|
|
#mobileNavMenu {
|
|
-webkit-transition-duration: 600ms;
|
|
transition-duration: 600ms;
|
|
transform: translateX(100%);
|
|
}
|
|
</style>
|
|
|
|
<style is:global>
|
|
:root {
|
|
--accent: 136, 58, 234;
|
|
--accent-light: 224, 204, 250;
|
|
--accent-dark: 49, 10, 101;
|
|
--accent-gradient: linear-gradient(
|
|
45deg,
|
|
rgb(var(--accent)),
|
|
rgb(var(--accent-light)) 30%,
|
|
white 60%
|
|
);
|
|
}
|
|
html {
|
|
font-family: system-ui, sans-serif;
|
|
background: #13151a;
|
|
background-size: 224px;
|
|
}
|
|
code {
|
|
font-family:
|
|
Menlo,
|
|
Monaco,
|
|
Lucida Console,
|
|
Liberation Mono,
|
|
DejaVu Sans Mono,
|
|
Bitstream Vera Sans Mono,
|
|
Courier New,
|
|
monospace;
|
|
}
|
|
.roboto {
|
|
font-family: Roboto;
|
|
}
|
|
</style>
|
|
</body>
|
|
</html>
|