fix(glossaire): description précise du correctif
This commit is contained in:
@@ -79,6 +79,7 @@ const portalLinks = [
|
||||
{ href: "/glossaire/tensions-irreductibles/", label: "Tensions irréductibles" },
|
||||
{ href: "/glossaire/archicrations/", label: "Méta-régimes archicratiques" },
|
||||
{ href: "/glossaire/paradigmes/", label: "Paradigmes et doctrines" },
|
||||
{ href: "/glossaire/verbes-de-la-scene/", label: "Verbes de la scène" },
|
||||
{ href: "/glossaire/index-complet/", label: "Index complet" },
|
||||
];
|
||||
---
|
||||
|
||||
@@ -194,6 +194,7 @@ const totalCount = sections.reduce((sum, section) => sum + section.items.length,
|
||||
<GlossaryLayout
|
||||
title="Verbes de la scène"
|
||||
version="1.0"
|
||||
stickyMode="glossary-portal"
|
||||
>
|
||||
<Fragment slot="aside">
|
||||
<nav class="verbs-aside" aria-label="Navigation des verbes de la scène">
|
||||
@@ -218,7 +219,7 @@ const totalCount = sections.reduce((sum, section) => sum + section.items.length,
|
||||
<li><a href="/glossaire/scene-depreuve/">Scène d’épreuve</a></li>
|
||||
<li><a href="/glossaire/archicration/">Archicration</a></li>
|
||||
<li><a href="/glossaire/obliteration-archicratique/">Oblitération archicratique</a></li>
|
||||
<li><a href="/glossaire/archicration-obliterée/">Archicration oblitérée</a></li>
|
||||
<li><a href="/glossaire/archicration-obliteree/">Archicration oblitérée</a></li>
|
||||
<li><a href="/glossaire/synchrotopie/">Synchrotopie</a></li>
|
||||
<li><a href="/glossaire/hypotopie/">Hypotopie</a></li>
|
||||
<li><a href="/glossaire/hypertopie/">Hypertopie</a></li>
|
||||
@@ -228,8 +229,8 @@ const totalCount = sections.reduce((sum, section) => sum + section.items.length,
|
||||
</nav>
|
||||
</Fragment>
|
||||
|
||||
<section class="verbs-page">
|
||||
<div class="verbs-hero">
|
||||
<section class="verbs-page" data-verbs-page>
|
||||
<div class="verbs-hero" data-verbs-hero>
|
||||
<p class="verbs-kicker">Mini-glossaire systémique</p>
|
||||
<h1>Verbes de la scène archicratique</h1>
|
||||
<p class="verbs-intro">
|
||||
@@ -245,9 +246,9 @@ const totalCount = sections.reduce((sum, section) => sum + section.items.length,
|
||||
</div>
|
||||
|
||||
{sections.map((section) => (
|
||||
<section class="verbs-section" id={section.id}>
|
||||
<section class="verbs-section">
|
||||
<div class="verbs-section__head">
|
||||
<h2>{section.title}</h2>
|
||||
<h2 id={section.id}>{section.title}</h2>
|
||||
<span class="verbs-section__count">
|
||||
{section.items.length} verbe{section.items.length > 1 ? "s" : ""}
|
||||
</span>
|
||||
@@ -282,6 +283,112 @@ const totalCount = sections.reduce((sum, section) => sum + section.items.length,
|
||||
</p>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<script is:inline>
|
||||
(() => {
|
||||
const boot = () => {
|
||||
const body = document.body;
|
||||
const root = document.documentElement;
|
||||
const hero = document.querySelector("[data-verbs-hero]");
|
||||
|
||||
if (!body || !root || !hero) return;
|
||||
|
||||
const BODY_CLASS = "is-verbes-de-la-scene-page";
|
||||
const FOLLOW_ON_CLASS = "verbs-follow-on";
|
||||
const mqMobile = window.matchMedia("(max-width: 860px)");
|
||||
|
||||
body.classList.add(BODY_CLASS);
|
||||
|
||||
const heroHeight = () =>
|
||||
Math.max(0, Math.round(hero.getBoundingClientRect().height || 0));
|
||||
|
||||
const stripLocalSticky = () => {
|
||||
document.querySelectorAll(".verbs-section__head").forEach((el) => {
|
||||
el.classList.remove("is-sticky");
|
||||
el.removeAttribute("data-sticky-active");
|
||||
});
|
||||
};
|
||||
|
||||
const applyLocalStickyHeight = () => {
|
||||
const h = mqMobile.matches ? 0 : heroHeight();
|
||||
|
||||
if (typeof window.__archiSetLocalStickyHeight === "function") {
|
||||
window.__archiSetLocalStickyHeight(h);
|
||||
} else {
|
||||
root.style.setProperty("--glossary-local-sticky-h", `${h}px`);
|
||||
}
|
||||
};
|
||||
|
||||
const syncFollowState = () => {
|
||||
const follow = document.getElementById("reading-follow");
|
||||
|
||||
const followOn =
|
||||
!mqMobile.matches &&
|
||||
!!follow &&
|
||||
follow.classList.contains("is-on") &&
|
||||
follow.style.display !== "none" &&
|
||||
follow.getAttribute("aria-hidden") !== "true";
|
||||
|
||||
body.classList.toggle(FOLLOW_ON_CLASS, followOn);
|
||||
};
|
||||
|
||||
const syncAll = () => {
|
||||
stripLocalSticky();
|
||||
applyLocalStickyHeight();
|
||||
syncFollowState();
|
||||
};
|
||||
|
||||
let raf = 0;
|
||||
const schedule = () => {
|
||||
if (raf) return;
|
||||
raf = requestAnimationFrame(() => {
|
||||
raf = 0;
|
||||
requestAnimationFrame(syncAll);
|
||||
});
|
||||
};
|
||||
|
||||
const follow = document.getElementById("reading-follow");
|
||||
const followObserver =
|
||||
follow
|
||||
? new MutationObserver(schedule)
|
||||
: null;
|
||||
|
||||
followObserver?.observe(follow, {
|
||||
attributes: true,
|
||||
attributeFilter: ["class", "style", "aria-hidden"],
|
||||
subtree: false,
|
||||
});
|
||||
|
||||
const heroResizeObserver =
|
||||
typeof ResizeObserver !== "undefined"
|
||||
? new ResizeObserver(schedule)
|
||||
: null;
|
||||
|
||||
heroResizeObserver?.observe(hero);
|
||||
|
||||
window.addEventListener("resize", schedule);
|
||||
window.addEventListener("pageshow", schedule);
|
||||
|
||||
if (document.fonts?.ready) {
|
||||
document.fonts.ready.then(schedule).catch(() => {});
|
||||
}
|
||||
|
||||
if (mqMobile.addEventListener) {
|
||||
mqMobile.addEventListener("change", schedule);
|
||||
} else if (mqMobile.addListener) {
|
||||
mqMobile.addListener(schedule);
|
||||
}
|
||||
|
||||
schedule();
|
||||
};
|
||||
|
||||
if (document.readyState === "loading") {
|
||||
document.addEventListener("DOMContentLoaded", boot, { once: true });
|
||||
} else {
|
||||
boot();
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
</GlossaryLayout>
|
||||
|
||||
<style>
|
||||
@@ -290,29 +397,58 @@ const totalCount = sections.reduce((sum, section) => sum + section.items.length,
|
||||
}
|
||||
|
||||
.verbs-hero{
|
||||
margin-bottom: 24px;
|
||||
position: sticky;
|
||||
top: calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px));
|
||||
z-index: 11;
|
||||
margin: 0 0 24px;
|
||||
padding: 18px 18px 20px;
|
||||
border: 1px solid rgba(127,127,127,0.18);
|
||||
border-radius: 28px;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(0,0,0,0.60), rgba(0,0,0,0.92)),
|
||||
radial-gradient(900px 240px at 20% 0%, rgba(0,217,255,0.08), transparent 60%);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
transition:
|
||||
margin-bottom 180ms ease,
|
||||
border-radius 180ms ease;
|
||||
}
|
||||
|
||||
.verbs-kicker{
|
||||
margin: 0 0 10px;
|
||||
font-size: 12px;
|
||||
letter-spacing: .08em;
|
||||
text-transform: uppercase;
|
||||
opacity: .72;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.verbs-hero h1{
|
||||
margin: 0 0 14px;
|
||||
font-size: clamp(2.2rem, 4vw, 3.15rem);
|
||||
line-height: 1.02;
|
||||
letter-spacing: -.04em;
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
.verbs-intro{
|
||||
max-width: 76ch;
|
||||
opacity: .92;
|
||||
margin: 0;
|
||||
font-size: 1.04rem;
|
||||
line-height: 1.55;
|
||||
opacity: .94;
|
||||
}
|
||||
|
||||
.verbs-intro + .verbs-intro{
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.verbs-section{
|
||||
margin-top: 34px;
|
||||
scroll-margin-top: calc(var(--sticky-offset) + 75px);
|
||||
scroll-margin-top: calc(var(--sticky-offset-px, 96px) + 28px);
|
||||
}
|
||||
|
||||
.verbs-section h2{
|
||||
scroll-margin-top: calc(var(--sticky-offset) + 75px);
|
||||
scroll-margin-top: calc(var(--sticky-offset-px, 96px) + 28px);
|
||||
}
|
||||
|
||||
.verbs-section__head{
|
||||
@@ -321,6 +457,8 @@ const totalCount = sections.reduce((sum, section) => sum + section.items.length,
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 10px;
|
||||
position: static;
|
||||
}
|
||||
|
||||
.verbs-section__count{
|
||||
@@ -331,6 +469,7 @@ const totalCount = sections.reduce((sum, section) => sum + section.items.length,
|
||||
|
||||
.verbs-section__intro{
|
||||
max-width: 78ch;
|
||||
margin: 0;
|
||||
opacity: .92;
|
||||
}
|
||||
|
||||
@@ -435,6 +574,47 @@ const totalCount = sections.reduce((sum, section) => sum + section.items.length,
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
:global(body.is-verbes-de-la-scene-page #reading-follow){
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
:global(body.is-verbes-de-la-scene-page.verbs-follow-on .verbs-hero){
|
||||
margin-bottom: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
:global(body.is-verbes-de-la-scene-page.verbs-follow-on #reading-follow .reading-follow__inner){
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
:global(body.is-verbes-de-la-scene-page .verbs-section__head.is-sticky),
|
||||
:global(body.is-verbes-de-la-scene-page .verbs-section__head[data-sticky-active="true"]){
|
||||
position: static !important;
|
||||
top: auto !important;
|
||||
z-index: auto !important;
|
||||
padding: 0 !important;
|
||||
border: 0 !important;
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
backdrop-filter: none !important;
|
||||
-webkit-backdrop-filter: none !important;
|
||||
}
|
||||
|
||||
@media (max-width: 860px){
|
||||
.verbs-hero{
|
||||
position: static;
|
||||
border-radius: 22px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
:global(body.is-verbes-de-la-scene-page.verbs-follow-on .verbs-hero){
|
||||
border-radius: 22px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark){
|
||||
.verbs-card,
|
||||
.verbs-aside__block{
|
||||
|
||||
Reference in New Issue
Block a user