68 lines
1.7 KiB
Plaintext
68 lines
1.7 KiB
Plaintext
---
|
|
interface Props {
|
|
title: string;
|
|
}
|
|
|
|
const { title } = 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" />
|
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
|
<meta name="generator" content={Astro.generator} />
|
|
<title>{title}</title>
|
|
|
|
|
|
<!-- Theme manager -->
|
|
<script is:inline>
|
|
// ☝️ This script prevent the FART effect.
|
|
if (localStorage.getItem("theme") === null) {
|
|
document.documentElement.setAttribute("data-theme", "light");
|
|
} 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>
|
|
<slot />
|
|
</body>
|
|
</html>
|
|
|
|
<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: #913117;
|
|
background-size: 224px;
|
|
}
|
|
code {
|
|
font-family: Menlo, Monaco, Lucida Console, Liberation Mono,
|
|
DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
|
|
}
|
|
</style>
|