142 lines
3.7 KiB
Plaintext
142 lines
3.7 KiB
Plaintext
---
|
|
import LanguagePicker from "../components/LanguagePicker.astro";
|
|
import { AstroFont } from "astro-font";
|
|
import Nav from "../components/Nav.astro";
|
|
interface Props {
|
|
title: string;
|
|
width?: "full" | "compact";
|
|
}
|
|
|
|
const { title, width = "compact" } = Astro.props;
|
|
---
|
|
|
|
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="description" content="Astro description" />
|
|
<meta name="viewport" content="width=device-width" />
|
|
<meta name="props" content={JSON.stringify(Astro.props)} />
|
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
|
<AstroFont
|
|
config={[
|
|
{
|
|
name: "Nunito Sans",
|
|
src: [
|
|
{
|
|
style: "light",
|
|
weight: "300",
|
|
path: "/fonts/nunito-v26-latin-300.woff2",
|
|
},
|
|
],
|
|
preload: true,
|
|
display: "swap",
|
|
selector: "body",
|
|
fallback: "sans-serif",
|
|
},
|
|
{
|
|
name: "Roboto",
|
|
src: [
|
|
{
|
|
weight: "300",
|
|
style: "normal",
|
|
path: "/fonts/roboto-v30-latin-300.woff2",
|
|
},
|
|
],
|
|
preload: true,
|
|
display: "swap",
|
|
selector: "body > span",
|
|
fallback: "serif",
|
|
},
|
|
]}
|
|
/>
|
|
<link rel="stylesheet" href="/app.css" />
|
|
<meta name="generator" content={Astro.generator} />
|
|
<!-- <meta http-equiv="refresh" content="0;url=/" /> -->
|
|
<title>{title}</title>
|
|
<style is:inline>
|
|
:root {
|
|
--neutral-1000: #000000;
|
|
--neutral-800: #16161e;
|
|
--neutral-500: #252530;
|
|
--neutral-400: #2c2c3a;
|
|
--neutral-300: #414152;
|
|
--neutral-100: #d5d5d7;
|
|
--neutral-000: #f1f1f4;
|
|
--fill: #cb5a5a;
|
|
|
|
--border-radius-md: 20px;
|
|
|
|
--spacing-sm: 10px;
|
|
--spacing-md: 20px;
|
|
}
|
|
|
|
body {
|
|
--background-dark: var(--neutral-800);
|
|
--background: var(--neutral-000);
|
|
--background-light: var(--neutral-400);
|
|
--outline: var(--neutral-300);
|
|
--text: var(--neutral-800);
|
|
--text-light: black;
|
|
|
|
background-color: var(--neutral-100);
|
|
transition: background-color 0.1s;
|
|
color: var(--text);
|
|
font-family: "Nunito Sans", sans-serif;
|
|
background-color: var(--background-dark);
|
|
}
|
|
|
|
.dark body {
|
|
--background-dark: var(--neutral-800);
|
|
--background: var(--neutral-500);
|
|
--background-light: var(--neutral-400);
|
|
--background-gradient: linear-gradient(
|
|
-30deg,
|
|
var(--neutral-500) 0%,
|
|
var(--neutral-400) 100%
|
|
);
|
|
--outline: var(--neutral-300);
|
|
--text: var(--neutral-100);
|
|
--text-light: white;
|
|
}
|
|
|
|
/* .dark .icon-tabler-sun, */
|
|
/* .light .icon-tabler-moon { */
|
|
/* display: none; */
|
|
/* } */
|
|
/* .dark .icon-tabler-moon, */
|
|
/* .light .icon-tabler-sun { */
|
|
/* display: block; */
|
|
/* } */
|
|
</style>
|
|
<script>
|
|
(function () {
|
|
try {
|
|
var mode = localStorage.getItem("theme");
|
|
var supportDarkMode =
|
|
window.matchMedia("(prefers-color-scheme: dark)").matches === true;
|
|
if (!mode && supportDarkMode)
|
|
document.documentElement.classList.add("dark");
|
|
if (!mode) return;
|
|
document.documentElement.classList.add(mode);
|
|
} catch (e) {}
|
|
})();
|
|
</script>
|
|
</head>
|
|
<body class=`layout-${width} bg-dark text-neutral p-2`>
|
|
<header>
|
|
<Nav />
|
|
</header>
|
|
<main id="main-content" class="flex flex-col mt-4xl gap-y-2xl">
|
|
<slot />
|
|
</main>
|
|
<LanguagePicker />
|
|
<style>
|
|
.layout-compact {
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
}
|
|
</style>
|
|
</body>
|
|
</html>
|