92 lines
4.3 KiB
Text
92 lines
4.3 KiB
Text
---
|
|
import DarkModeScriptInline from "@components/DarkModeScriptInline.astro";
|
|
import NavHeader from "@components/NavHeader.astro";
|
|
import { IconSun, IconMoon } from "@components/icons";
|
|
import AgeRestrictedModal from "@components/AgeRestrictedModal.astro";
|
|
import "../styles/base.css";
|
|
import "../styles/fonts.css";
|
|
|
|
type Props = {
|
|
pageTitle?: string;
|
|
};
|
|
|
|
const { pageTitle } = Astro.props;
|
|
const title = pageTitle ? `${pageTitle} | Bad Manners` : "Bad Manners";
|
|
---
|
|
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
|
|
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
|
|
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
|
|
<link rel="manifest" href="/site.webmanifest" />
|
|
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#37b340" />
|
|
<meta name="msapplication-TileColor" content="#37b340" />
|
|
<meta name="theme-color" content="#7DD05A" data-react-helmet="true" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta name="generator" content={Astro.generator} />
|
|
<title>{title}</title>
|
|
<link rel="me" href="https://meow.social/@BadManners" />
|
|
<meta property="og:title" content={title} />
|
|
<meta property="og:url" content={Astro.url} />
|
|
<meta content="/logo.webp" property="og:image" />
|
|
<slot name="head" />
|
|
</head>
|
|
<body
|
|
:class="ageVerified ? 'overflow-auto' : 'overflow-hidden'"
|
|
x-effect="darkMode ? $el.classList.add('dark') : $el.classList.remove('dark')"
|
|
x-data="{ darkMode: localStorage.colorScheme != 'light' && (localStorage.colorScheme == 'dark' || matchMedia('(prefers-color-scheme:dark)').matches), ageVerified: new URL(location).searchParams.get('ageVerified') == 'true' || localStorage.ageVerified == 'true' }"
|
|
>
|
|
<div class="flex min-h-screen flex-col" x-bind:inert="!ageVerified">
|
|
<div
|
|
id="bg"
|
|
class="fixed h-screen w-screen bg-radial from-bm-300 to-bm-500 dark:from-green-800 dark:to-green-950 print:hidden"
|
|
aria-hidden="true"
|
|
>
|
|
</div>
|
|
<div
|
|
class="relative my-auto flex flex-col items-center justify-center px-2 py-8 sm:py-12 md:px-3 lg:px-6 print:p-0"
|
|
>
|
|
<main
|
|
class="w-full max-w-5xl flex-shrink-0 flex-grow-0 justify-center rounded-xl bg-stone-50 px-4 pb-6 pt-4 text-center text-base font-normal tracking-tight text-stone-700 sm:px-8 sm:pb-8 sm:pt-6 sm:text-lg dark:bg-zinc-800 dark:text-zinc-50 print:bg-transparent print:p-0"
|
|
>
|
|
<NavHeader />
|
|
<slot />
|
|
</main>
|
|
<footer
|
|
class="sm:text-md flex flex-col items-center pt-9 text-sm font-medium tracking-wide text-black dark:text-white"
|
|
>
|
|
<div class="flex items-center">
|
|
<span id="copyright" class="mr-2"
|
|
>© <time datetime="2023">2023</time>–<time
|
|
x-data="{ currentYear: new Date().getFullYear() }"
|
|
x-text="currentYear"
|
|
x-bind:datetime="currentYear"
|
|
datetime={new Date().getFullYear().toString()}>{new Date().getFullYear()}</time
|
|
> Bad Manners</span
|
|
>
|
|
<a
|
|
href="/licenses.toml"
|
|
rel="license"
|
|
class="border-l border-l-black pl-2 transition-colors hover:text-white hover:underline focus:text-white focus:underline motion-reduce:transition-none dark:border-l-white dark:hover:text-bm-300 dark:focus:text-bm-300 print:hidden"
|
|
>
|
|
Licenses
|
|
</a>
|
|
</div>
|
|
<button
|
|
class="mt-2 p-2 transition-colors hover:text-green-700 focus:text-green-700 motion-reduce:transition-none dark:hover:text-bm-300 dark:focus:text-bm-300 print:hidden"
|
|
aria-labelledby="label-toggle-dark-mode"
|
|
@click="darkMode = !darkMode; localStorage.colorScheme = darkMode ? 'dark' : 'light'"
|
|
>
|
|
<IconSun width="1.5rem" height="1.5rem" class="hidden dark:block" />
|
|
<IconMoon width="1.5rem" height="1.5rem" class="block dark:hidden" />
|
|
<span id="label-toggle-dark-mode" class="sr-only select-none">Toggle dark mode</span>
|
|
</button>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
<DarkModeScriptInline />
|
|
<AgeRestrictedModal />
|
|
</body>
|
|
</html>
|