|
|
---
|
|
|
import { ViewTransitions } from "astro:transitions";
|
|
|
import Header from "@components/Header.astro";
|
|
|
import MobileNavigation from "@components/MobileNavigation.astro";
|
|
|
import SettingsLoader from "@components/settings/Loader.astro";
|
|
|
interface Props {
|
|
|
title: string;
|
|
|
noHeader?: string;
|
|
|
description?: string;
|
|
|
}
|
|
|
|
|
|
const { title, noHeader, description } = Astro.props;
|
|
|
---
|
|
|
|
|
|
<!doctype html>
|
|
|
<html lang="en">
|
|
|
<head>
|
|
|
<SettingsLoader transition:persist />
|
|
|
<meta charset="UTF-8" />
|
|
|
<meta
|
|
|
name="description"
|
|
|
content={description ? description : "Astro description"}
|
|
|
/>
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" id="favicon" />
|
|
|
<link
|
|
|
rel="stylesheet"
|
|
|
href="/nebula.css"
|
|
|
id="stylesheet"
|
|
|
transition:persist
|
|
|
/>
|
|
|
<link
|
|
|
rel="preload"
|
|
|
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
|
|
|
as="style"
|
|
|
crossorigin="anonymous"
|
|
|
/>
|
|
|
<link
|
|
|
rel="preload"
|
|
|
href="https://fonts.gstatic.com/s/roboto/v32/KFOmCnqEu92Fr1Mu4mxK.woff2"
|
|
|
as="font"
|
|
|
type="font/woff2"
|
|
|
crossorigin="anonymous"
|
|
|
/>
|
|
|
<meta name="generator" content={Astro.generator} />
|
|
|
<title>{title}</title>
|
|
|
<ViewTransitions />
|
|
|
</head>
|
|
|
<body class="h-full bg-primary">
|
|
|
{!noHeader && <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");
|
|
|
|
|
|
isMobileNavOpen.subscribe((open) => {
|
|
|
if (open) {
|
|
|
if (mobileNavMenu) {
|
|
|
mobileNavMenu.style.display = "block";
|
|
|
mobileNavMenu.style.transform = "translateX(0%)";
|
|
|
}
|
|
|
} else {
|
|
|
if (mobileNavMenu) {
|
|
|
mobileNavMenu.style.transform = "translateX(100%)";
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
</script>
|
|
|
<style>
|
|
|
#mobileNavMenu {
|
|
|
-webkit-transition-duration: 600ms;
|
|
|
transition-duration: 600ms;
|
|
|
transform: translateX(100%);
|
|
|
}
|
|
|
</style>
|
|
|
|
|
|
<style is:global>
|
|
|
.roboto {
|
|
|
font-family: var(--font-family), Roboto, sans-serif;
|
|
|
font-weight: 200;
|
|
|
font-style: normal;
|
|
|
}
|
|
|
|
|
|
::-webkit-scrollbar {
|
|
|
width: 0.5rem;
|
|
|
height: 0.5rem;
|
|
|
}
|
|
|
::-webkit-scrollbar-track {
|
|
|
background: var(--navbar-color);
|
|
|
}
|
|
|
::-webkit-scrollbar-thumb {
|
|
|
background: var(--navbar-text-color);
|
|
|
}
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
|
background: var(--navbar-link-color);
|
|
|
}
|
|
|
::-moz-scrollbar {
|
|
|
width: 0.5rem;
|
|
|
height: 0.5rem;
|
|
|
}
|
|
|
::-moz-scrollbar-track {
|
|
|
background: var(--navbar-color);
|
|
|
}
|
|
|
::-moz-scrollbar-thumb {
|
|
|
background: var(--navbar-text-color);
|
|
|
}
|
|
|
::-moz-scrollbar-thumb:hover {
|
|
|
background: var(--navbar-link-color);
|
|
|
}
|
|
|
::-ms-scrollbar {
|
|
|
width: 0.5rem;
|
|
|
height: 0.5rem;
|
|
|
}
|
|
|
::-ms-scrollbar-track {
|
|
|
background: var(--navbar-color);
|
|
|
}
|
|
|
::-ms-scrollbar-thumb {
|
|
|
background: var(--navbar-text-color);
|
|
|
}
|
|
|
::-ms-scrollbar-thumb:hover {
|
|
|
background: var(--navbar-link-color);
|
|
|
}
|
|
|
::-o-scrollbar {
|
|
|
width: 0.5rem;
|
|
|
height: 0.5rem;
|
|
|
}
|
|
|
::-o-scrollbar-track {
|
|
|
background: var(--navbar-color);
|
|
|
}
|
|
|
::-o-scrollbar-thumb {
|
|
|
background: var(--navbar-text-color);
|
|
|
}
|
|
|
::-o-scrollbar-thumb:hover {
|
|
|
background: var(--navbar-link-color);
|
|
|
}
|
|
|
</style>
|
|
|
</body>
|
|
|
</html>
|
|
|
|
