jalil.arfaoui.net/src/layouts/main.astro

91 lines
2.8 KiB
Text

---
import Footer from "../components/footer.astro";
import Header from "../components/header.astro";
import SquareLines from "../components/square-lines.astro";
const { title, facet } = Astro.props;
---
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{title}</title>
<!-- Used to add dark mode right away, adding here prevents any flicker -->
<script is:inline>
if (typeof Storage !== 'undefined') {
var theme = localStorage.getItem('theme');
if (theme === 'dark' || (!theme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark')
}
}
</script>
<style>
.prose img {
border-radius: 20px;
}
</style>
<style is:global>
[data-facet="code"] {
--facet-code-color: #4b1762;
background-color: var(--facet-code-color) !important;
color: rgba(255, 255, 255, 0.7) !important;
}
[data-facet="code"] h2,
[data-facet="code"] strong {
color: white !important;
}
[data-facet="code"] a {
color: white !important;
font-weight: bold;
}
[data-facet="code"] p,
[data-facet="code"] li {
color: rgba(255, 255, 255, 0.7) !important;
}
[data-facet="code"] #header .bg-white\/80 {
background-color: rgba(255, 255, 255, 0.9) !important;
}
[data-facet="code"] #header .bg-white\/80 a {
color: var(--facet-code-color) !important;
}
[data-facet="code"] footer {
background-color: rgba(255, 255, 255, 0.9) !important;
border-color: var(--facet-code-color) !important;
}
[data-facet="code"] footer,
[data-facet="code"] footer a,
[data-facet="code"] footer p,
[data-facet="code"] footer svg,
[data-facet="code"] footer button {
color: var(--facet-code-color) !important;
}
</style>
<link rel="icon" type="image/x-icon" href="/assets/images/favicon.png" />
<script src="../assets/css/main.css"></script>
<!-- Privacy-friendly analytics by Plausible -->
<script is:inline async src="https://plausible.io/js/pa-fP2pF1VtXKDIjQczHCynl.js"></script>
<script is:inline>
window.plausible=window.plausible||function(){(plausible.q=plausible.q||[]).push(arguments)},plausible.init=plausible.init||function(i){plausible.o=i||{}};
plausible.init()
</script>
<Fragment set:html={import.meta.env.HEADER_INJECT} />
</head>
<body class="antialiased bg-white dark:bg-neutral-950" data-facet={facet}>
{!facet && <SquareLines />}
<Header />
<slot />
<Footer />
<script src="../assets/js/main.js"></script>
<Fragment set:html={import.meta.env.FOOTER_INJECT} />
</body>
</html>