136 lines
3.8 KiB
Plaintext
136 lines
3.8 KiB
Plaintext
---
|
|
import SiteNav from "../components/SiteNav.astro";
|
|
import BuildStamp from "../components/BuildStamp.astro";
|
|
import "../styles/global.css";
|
|
|
|
const { title } = Astro.props;
|
|
const canonical = Astro.site
|
|
? new URL(Astro.url.pathname, Astro.site).href
|
|
: Astro.url.href;
|
|
---
|
|
<!doctype html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>{title ? `${title} — Archicratie` : "Archicratie"}</title>
|
|
|
|
<link rel="canonical" href={canonical} />
|
|
<link rel="sitemap" href="/sitemap-index.xml" />
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<SiteNav />
|
|
</header>
|
|
|
|
<main>
|
|
<article class="reading">
|
|
<slot />
|
|
<BuildStamp />
|
|
</article>
|
|
</main>
|
|
|
|
<script is:inline>
|
|
(() => {
|
|
const reveals = document.querySelectorAll("[data-editorial-reveal]");
|
|
|
|
const closeReveal = (reveal, instant = false) => {
|
|
const button = reveal.querySelector(".editorial-reveal__button");
|
|
const body = reveal.querySelector(".editorial-reveal__body");
|
|
|
|
if (!button || !body) return;
|
|
|
|
button.setAttribute("aria-expanded", "false");
|
|
body.setAttribute("aria-hidden", "true");
|
|
|
|
if (instant) {
|
|
reveal.classList.remove("is-open", "is-opening");
|
|
body.style.height = "0px";
|
|
return;
|
|
}
|
|
|
|
if (reveal.classList.contains("is-open")) {
|
|
body.style.height = `${body.scrollHeight}px`;
|
|
|
|
requestAnimationFrame(() => {
|
|
reveal.classList.remove("is-open", "is-opening");
|
|
body.style.height = "0px";
|
|
});
|
|
}
|
|
};
|
|
|
|
const openReveal = (reveal) => {
|
|
const button = reveal.querySelector(".editorial-reveal__button");
|
|
const body = reveal.querySelector(".editorial-reveal__body");
|
|
|
|
if (!button || !body) return;
|
|
if (reveal.classList.contains("is-open")) return;
|
|
|
|
reveal.classList.add("is-opening");
|
|
body.setAttribute("aria-hidden", "false");
|
|
body.style.height = "0px";
|
|
|
|
requestAnimationFrame(() => {
|
|
reveal.classList.add("is-open");
|
|
button.setAttribute("aria-expanded", "true");
|
|
body.style.height = `${body.scrollHeight}px`;
|
|
});
|
|
|
|
const onTransitionEnd = (event) => {
|
|
if (event.propertyName !== "height") return;
|
|
|
|
if (reveal.classList.contains("is-open")) {
|
|
body.style.height = "auto";
|
|
}
|
|
|
|
reveal.classList.remove("is-opening");
|
|
body.removeEventListener("transitionend", onTransitionEnd);
|
|
};
|
|
|
|
body.addEventListener("transitionend", onTransitionEnd);
|
|
};
|
|
|
|
reveals.forEach((reveal) => {
|
|
const button = reveal.querySelector(".editorial-reveal__button");
|
|
const body = reveal.querySelector(".editorial-reveal__body");
|
|
|
|
if (!button || !body) return;
|
|
|
|
closeReveal(reveal, true);
|
|
|
|
button.addEventListener("click", () => {
|
|
openReveal(reveal);
|
|
});
|
|
});
|
|
|
|
window.addEventListener(
|
|
"scroll",
|
|
() => {
|
|
if (window.scrollY <= 8) {
|
|
reveals.forEach((reveal) => closeReveal(reveal));
|
|
}
|
|
},
|
|
{ passive: true }
|
|
);
|
|
|
|
window.addEventListener("pageshow", () => {
|
|
reveals.forEach((reveal) => closeReveal(reveal, true));
|
|
});
|
|
|
|
window.addEventListener("resize", () => {
|
|
reveals.forEach((reveal) => {
|
|
const body = reveal.querySelector(".editorial-reveal__body");
|
|
|
|
if (!body) return;
|
|
|
|
if (reveal.classList.contains("is-open")) {
|
|
body.style.height = "auto";
|
|
}
|
|
});
|
|
});
|
|
})();
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|