fix(glossaire): harmonize portal sticky hero and follow behavior
This commit is contained in:
@@ -1,5 +1,6 @@
|
||||
---
|
||||
import SiteLayout from "../../layouts/SiteLayout.astro";
|
||||
import GlossaryLayout from "../../layouts/GlossaryLayout.astro";
|
||||
import GlossaryHomeAside from "../../components/GlossaryHomeAside.astro";
|
||||
import { getCollection } from "astro:content";
|
||||
|
||||
const entries = await getCollection("glossaire");
|
||||
@@ -77,240 +78,271 @@ const cratialite = bySlug.get("cratialite");
|
||||
const tension = bySlug.get("tension");
|
||||
const sceneDepreuve = bySlug.get("scene-depreuve");
|
||||
const archicration = bySlug.get("archicration");
|
||||
|
||||
const metaRegimesPageHref = "/glossaire/archicrations/";
|
||||
const tensionsPageHref = "/glossaire/tensions-irreductibles/";
|
||||
const verbesPageHref = "/glossaire/verbes-de-la-scene/";
|
||||
const paradigmesPageHref = "/glossaire/paradigmes/";
|
||||
const indexCompletPageHref = "/glossaire/index-complet/";
|
||||
---
|
||||
|
||||
<SiteLayout title="Glossaire archicratique">
|
||||
<GlossaryLayout title="Glossaire archicratique" version="1.0">
|
||||
<Fragment slot="aside">
|
||||
<GlossaryHomeAside allEntries={entries} />
|
||||
</Fragment>
|
||||
|
||||
<section class="glossary-home">
|
||||
<header class="glossary-hero" id="glossary-hero">
|
||||
<p class="glossary-kicker">Référentiel terminologique</p>
|
||||
<h1>Glossaire archicratique</h1>
|
||||
<p class="glossary-intro">
|
||||
Ce glossaire n’est pas seulement un index de définitions. Il constitue
|
||||
une porte d’entrée dans la pensée archicratique : une cartographie
|
||||
raisonnée des concepts fondamentaux, des scènes, des dynamiques et des
|
||||
méta-régimes à partir desquels une société peut être décrite comme
|
||||
organisation de tensions et recherche de co-viabilité.
|
||||
</p>
|
||||
<h2
|
||||
class="glossary-hero-follow"
|
||||
id="glossary-hero-follow"
|
||||
aria-hidden="true"
|
||||
></h2>
|
||||
</header>
|
||||
|
||||
<section class="glossary-map-block glossary-section" aria-labelledby="glossary-map-title">
|
||||
<div class="glossary-map-block__head">
|
||||
<h2 id="glossary-map-title" data-follow-section="Cartographie du système archicratique">
|
||||
Cartographie du système archicratique
|
||||
</h2>
|
||||
<p>
|
||||
La lecture la plus simple du système part de deux vecteurs premiers,
|
||||
l’arcalité et la cratialité, dont la rencontre produit des tensions.
|
||||
Ces tensions doivent être mises en scène, traitées par l’archicration,
|
||||
puis stabilisées dans des méta-régimes de co-viabilité.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="glossary-map" aria-label="Carte conceptuelle du glossaire">
|
||||
<div class="glossary-map__stage">
|
||||
<div class="glossary-map__title">Forces en composition</div>
|
||||
<div class="glossary-map__roots">
|
||||
{arcalite ? (
|
||||
<a class="glossary-map__node" href={hrefOf(arcalite)}>ARCALITÉ</a>
|
||||
) : (
|
||||
<span class="glossary-map__node">ARCALITÉ</span>
|
||||
)}
|
||||
|
||||
{cratialite ? (
|
||||
<a class="glossary-map__node" href={hrefOf(cratialite)}>CRATIALITÉ</a>
|
||||
) : (
|
||||
<span class="glossary-map__node">CRATIALITÉ</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="glossary-map__arrow" aria-hidden="true">↓</div>
|
||||
|
||||
<div class="glossary-map__stage">
|
||||
<div class="glossary-map__title">Phénomène transversal</div>
|
||||
{tension ? (
|
||||
<a class="glossary-map__node glossary-map__node--wide" href={hrefOf(tension)}>
|
||||
TENSION
|
||||
</a>
|
||||
) : (
|
||||
<span class="glossary-map__node glossary-map__node--wide">TENSION</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div class="glossary-map__arrow" aria-hidden="true">↓</div>
|
||||
|
||||
<div class="glossary-map__stage">
|
||||
<div class="glossary-map__title">Comparution</div>
|
||||
{sceneDepreuve ? (
|
||||
<a class="glossary-map__node glossary-map__node--wide" href={hrefOf(sceneDepreuve)}>
|
||||
MISE EN SCÈNE
|
||||
</a>
|
||||
) : (
|
||||
<span class="glossary-map__node glossary-map__node--wide">MISE EN SCÈNE</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div class="glossary-map__arrow" aria-hidden="true">↓</div>
|
||||
|
||||
<div class="glossary-map__stage">
|
||||
<div class="glossary-map__title">Opérateur régulateur</div>
|
||||
{archicration ? (
|
||||
<a class="glossary-map__node glossary-map__node--wide" href={hrefOf(archicration)}>
|
||||
ARCHICRATION
|
||||
</a>
|
||||
) : (
|
||||
<span class="glossary-map__node glossary-map__node--wide">ARCHICRATION</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div class="glossary-map__arrow" aria-hidden="true">↓</div>
|
||||
|
||||
<div class="glossary-map__stage">
|
||||
<div class="glossary-map__title">Formes de stabilisation</div>
|
||||
<a class="glossary-map__node glossary-map__node--wide" href="/glossaire/archicrations/">
|
||||
MÉTA-RÉGIMES
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{fondamentaux.length > 0 && (
|
||||
<section id="concepts-fondamentaux" class="glossary-section">
|
||||
<div class="glossary-section__head">
|
||||
<div>
|
||||
<h2 data-follow-section="Concepts fondamentaux">Concepts fondamentaux</h2>
|
||||
<p class="glossary-intro">
|
||||
Ces notions forment la grammaire minimale de l’archicratie.
|
||||
Elles donnent accès à la structure générale du système.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="glossary-cards">
|
||||
{fondamentaux.map((entry) => (
|
||||
<a class="glossary-card" href={hrefOf(entry)}>
|
||||
<strong>{entry.data.term}</strong>
|
||||
<span>{entry.data.definitionShort}</span>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{scenes.length > 0 && (
|
||||
<section id="scenes-archicratiques" class="glossary-section">
|
||||
<div class="glossary-section__head">
|
||||
<div>
|
||||
<h2 data-follow-section="Scènes archicratiques">Scènes archicratiques</h2>
|
||||
<p class="glossary-intro">
|
||||
Les scènes archicratiques rendent possible la comparution des
|
||||
architectures de régulation. Elles sont le lieu où l’ordre peut
|
||||
être exposé, discuté et révisé.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="glossary-cards">
|
||||
{scenes.map((entry) => (
|
||||
<a class="glossary-card glossary-card--wide" href={hrefOf(entry)}>
|
||||
<strong>{entry.data.term}</strong>
|
||||
<span>{entry.data.definitionShort}</span>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{dynamiques.length > 0 && (
|
||||
<section id="dynamiques-archicratiques" class="glossary-section">
|
||||
<div class="glossary-section__head">
|
||||
<div>
|
||||
<h2 data-follow-section="Dynamiques archicratiques">Dynamiques archicratiques</h2>
|
||||
<p class="glossary-intro">
|
||||
Cette famille rassemble les processus de déplacement, les dérives
|
||||
et les formes de pathologisation de la régulation archicratique.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="glossary-cards">
|
||||
{dynamiques.map((entry) => (
|
||||
<a class="glossary-card" href={hrefOf(entry)}>
|
||||
<strong>{entry.data.term}</strong>
|
||||
<span>{entry.data.definitionShort}</span>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
<section id="meta-regimes-archicratiques" class="glossary-section">
|
||||
<div class="glossary-section__head">
|
||||
<div>
|
||||
<h2 data-follow-section="Méta-régimes archicratiques">Méta-régimes archicratiques</h2>
|
||||
<header class="glossary-hero" id="glossary-hero">
|
||||
<p class="glossary-kicker">Référentiel terminologique</p>
|
||||
<h1>Glossaire archicratique</h1>
|
||||
<p class="glossary-intro">
|
||||
Les méta-régimes décrivent les grandes formes historiques et
|
||||
topologiques par lesquelles une société organise durablement ses
|
||||
tensions et sa co-viabilité.
|
||||
Ce glossaire n’est pas seulement un index de définitions. Il constitue
|
||||
une porte d’entrée dans la pensée archicratique : une cartographie
|
||||
raisonnée des concepts fondamentaux, des scènes, des dynamiques et des
|
||||
méta-régimes à partir desquels une société peut être décrite comme
|
||||
organisation de tensions et recherche de co-viabilité.
|
||||
</p>
|
||||
</div>
|
||||
<h2
|
||||
class="glossary-hero-follow"
|
||||
id="glossary-hero-follow"
|
||||
aria-hidden="true"
|
||||
></h2>
|
||||
</header>
|
||||
|
||||
<a class="glossary-cta" href="/glossaire/archicrations/">
|
||||
Explorer la cartographie complète
|
||||
</a>
|
||||
</div>
|
||||
<section class="glossary-map-block glossary-section" aria-labelledby="glossary-map-title">
|
||||
<div class="glossary-map-block__head">
|
||||
<h2 id="glossary-map-title" data-follow-section="Cartographie du système archicratique">
|
||||
Cartographie du système archicratique
|
||||
</h2>
|
||||
<p>
|
||||
La lecture la plus simple du système part de deux vecteurs premiers,
|
||||
l’arcalité et la cratialité, dont la rencontre produit des tensions.
|
||||
Ces tensions doivent être mises en scène, traitées par l’archicration,
|
||||
puis stabilisées dans des méta-régimes de co-viabilité.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{metaRegimesPreview.length > 0 && (
|
||||
<div class="glossary-cards">
|
||||
{metaRegimesPreview.map((entry) => (
|
||||
<a class="glossary-card" href={hrefOf(entry)}>
|
||||
<strong>{entry.data.term}</strong>
|
||||
<span>{entry.data.definitionShort}</span>
|
||||
<div class="glossary-map" aria-label="Carte conceptuelle du glossaire">
|
||||
<div class="glossary-map__stage">
|
||||
<div class="glossary-map__title">Forces en composition</div>
|
||||
<div class="glossary-map__roots">
|
||||
{arcalite ? (
|
||||
<a class="glossary-map__node" href={hrefOf(arcalite)}>ARCALITÉ</a>
|
||||
) : (
|
||||
<span class="glossary-map__node">ARCALITÉ</span>
|
||||
)}
|
||||
|
||||
{cratialite ? (
|
||||
<a class="glossary-map__node" href={hrefOf(cratialite)}>CRATIALITÉ</a>
|
||||
) : (
|
||||
<span class="glossary-map__node">CRATIALITÉ</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="glossary-map__arrow" aria-hidden="true">↓</div>
|
||||
|
||||
<div class="glossary-map__stage">
|
||||
<div class="glossary-map__title">Phénomène transversal</div>
|
||||
{tension ? (
|
||||
<a class="glossary-map__node glossary-map__node--wide" href={hrefOf(tension)}>
|
||||
TENSION
|
||||
</a>
|
||||
) : (
|
||||
<span class="glossary-map__node glossary-map__node--wide">TENSION</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div class="glossary-map__arrow" aria-hidden="true">↓</div>
|
||||
|
||||
<div class="glossary-map__stage">
|
||||
<div class="glossary-map__title">Comparution</div>
|
||||
{sceneDepreuve ? (
|
||||
<a class="glossary-map__node glossary-map__node--wide" href={hrefOf(sceneDepreuve)}>
|
||||
MISE EN SCÈNE
|
||||
</a>
|
||||
) : (
|
||||
<span class="glossary-map__node glossary-map__node--wide">MISE EN SCÈNE</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div class="glossary-map__arrow" aria-hidden="true">↓</div>
|
||||
|
||||
<div class="glossary-map__stage">
|
||||
<div class="glossary-map__title">Opérateur régulateur</div>
|
||||
{archicration ? (
|
||||
<a class="glossary-map__node glossary-map__node--wide" href={hrefOf(archicration)}>
|
||||
ARCHICRATION
|
||||
</a>
|
||||
) : (
|
||||
<span class="glossary-map__node glossary-map__node--wide">ARCHICRATION</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div class="glossary-map__arrow" aria-hidden="true">↓</div>
|
||||
|
||||
<div class="glossary-map__stage">
|
||||
<div class="glossary-map__title">Formes de stabilisation</div>
|
||||
<a class="glossary-map__node glossary-map__node--wide" href={metaRegimesPageHref}>
|
||||
MÉTA-RÉGIMES
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{fondamentaux.length > 0 && (
|
||||
<section id="concepts-fondamentaux" class="glossary-section">
|
||||
<div class="glossary-section__head">
|
||||
<div>
|
||||
<h2 data-follow-section="Concepts fondamentaux">Concepts fondamentaux</h2>
|
||||
<p class="glossary-intro">
|
||||
Ces notions forment la grammaire minimale de l’archicratie.
|
||||
Elles donnent accès à la structure générale du système.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="glossary-cards">
|
||||
{fondamentaux.map((entry) => (
|
||||
<a class="glossary-card" href={hrefOf(entry)}>
|
||||
<strong>{entry.data.term}</strong>
|
||||
<span>{entry.data.definitionShort}</span>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{scenes.length > 0 && (
|
||||
<section id="scenes-archicratiques" class="glossary-section">
|
||||
<div class="glossary-section__head">
|
||||
<div>
|
||||
<h2 data-follow-section="Scènes archicratiques">Scènes archicratiques</h2>
|
||||
<p class="glossary-intro">
|
||||
Les scènes archicratiques rendent possible la comparution des
|
||||
architectures de régulation. Elles sont le lieu où l’ordre peut
|
||||
être exposé, discuté et révisé.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="glossary-cards">
|
||||
{scenes.map((entry) => (
|
||||
<a class="glossary-card glossary-card--wide" href={hrefOf(entry)}>
|
||||
<strong>{entry.data.term}</strong>
|
||||
<span>{entry.data.definitionShort}</span>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{dynamiques.length > 0 && (
|
||||
<section id="dynamiques-archicratiques" class="glossary-section">
|
||||
<div class="glossary-section__head">
|
||||
<div>
|
||||
<h2 data-follow-section="Dynamiques archicratiques">Dynamiques archicratiques</h2>
|
||||
<p class="glossary-intro">
|
||||
Cette famille rassemble les processus de déplacement, les dérives
|
||||
et les formes de pathologisation de la régulation archicratique.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="glossary-cards">
|
||||
{dynamiques.map((entry) => (
|
||||
<a class="glossary-card" href={hrefOf(entry)}>
|
||||
<strong>{entry.data.term}</strong>
|
||||
<span>{entry.data.definitionShort}</span>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
<section id="meta-regimes-archicratiques" class="glossary-section">
|
||||
<div class="glossary-section__head">
|
||||
<div>
|
||||
<h2 data-follow-section="Méta-régimes archicratiques">Méta-régimes archicratiques</h2>
|
||||
<p class="glossary-intro">
|
||||
Les méta-régimes décrivent les grandes formes historiques et
|
||||
topologiques par lesquelles une société organise durablement ses
|
||||
tensions et sa co-viabilité.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<a class="glossary-cta" href={metaRegimesPageHref}>
|
||||
Explorer la cartographie complète
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<section id="approfondir" class="glossary-section">
|
||||
<div class="glossary-section__head">
|
||||
<div>
|
||||
<h2 data-follow-section="Prolonger la lecture">Prolonger la lecture</h2>
|
||||
<p class="glossary-intro">
|
||||
Deux parcours complémentaires permettent d’élargir la lecture :
|
||||
l’un vers le paysage théorique dans lequel l’archicratie se situe et
|
||||
se distingue, l’autre vers l’ensemble alphabétique complet des
|
||||
entrées du glossaire.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{metaRegimesPreview.length > 0 && (
|
||||
<div class="glossary-cards">
|
||||
{metaRegimesPreview.map((entry) => (
|
||||
<a class="glossary-card" href={hrefOf(entry)}>
|
||||
<strong>{entry.data.term}</strong>
|
||||
<span>{entry.data.definitionShort}</span>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
<div class="glossary-portals glossary-portals--secondary">
|
||||
<a class="glossary-portal-card" href="/glossaire/paradigmes/">
|
||||
<strong>Cartographie théorique</strong>
|
||||
<span>
|
||||
Situer l’archicratie dans son paysage de doctrines fondatrices et de
|
||||
paradigmes régulateurs.
|
||||
</span>
|
||||
<small>{doctrinesCount} doctrine{doctrinesCount > 1 ? "s" : ""} · {paradigmesCount} paradigme{paradigmesCount > 1 ? "s" : ""}</small>
|
||||
</a>
|
||||
<section id="approfondir" class="glossary-section">
|
||||
<div class="glossary-section__head">
|
||||
<div>
|
||||
<h2 data-follow-section="Prolonger la lecture">Prolonger la lecture</h2>
|
||||
<p class="glossary-intro">
|
||||
Quatre parcours complémentaires permettent désormais d’élargir la
|
||||
lecture : l’un vers les tensions irréductibles, l’un vers les verbes
|
||||
de la scène archicratique, l’un vers le paysage théorique dans
|
||||
lequel l’archicratie se situe et se distingue, l’autre vers
|
||||
l’ensemble alphabétique complet des entrées du glossaire.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a class="glossary-portal-card" href="/glossaire/index-complet/">
|
||||
<strong>Index complet</strong>
|
||||
<span>
|
||||
Retrouver l’ensemble des entrées du glossaire dans une navigation
|
||||
alphabétique intégrale.
|
||||
</span>
|
||||
<small>{entries.length} entrée{entries.length > 1 ? "s" : ""}</small>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
<div class="glossary-portals glossary-portals--secondary">
|
||||
<a class="glossary-portal-card" href={tensionsPageHref}>
|
||||
<strong>Tensions irréductibles</strong>
|
||||
<span>
|
||||
Parcourir les dix tensions ontologiquement irréductibles et
|
||||
politiquement fondatrices à partir desquelles la co-viabilité doit
|
||||
être pensée.
|
||||
</span>
|
||||
<small>10 tensions structurantes</small>
|
||||
</a>
|
||||
|
||||
<a class="glossary-portal-card" href={verbesPageHref}>
|
||||
<strong>Verbes de la scène</strong>
|
||||
<span>
|
||||
Disposer d’un mini-glossaire opératoire pour décrire l’ouverture,
|
||||
l’entrave, la capture, la fermeture ou la remise en scène des
|
||||
architectures régulatrices.
|
||||
</span>
|
||||
<small>19 verbes d’analyse</small>
|
||||
</a>
|
||||
|
||||
<a class="glossary-portal-card" href={paradigmesPageHref}>
|
||||
<strong>Cartographie théorique</strong>
|
||||
<span>
|
||||
Situer l’archicratie dans son paysage de doctrines fondatrices et de
|
||||
paradigmes régulateurs.
|
||||
</span>
|
||||
<small>{doctrinesCount} doctrine{doctrinesCount > 1 ? "s" : ""} · {paradigmesCount} paradigme{paradigmesCount > 1 ? "s" : ""}</small>
|
||||
</a>
|
||||
|
||||
<a class="glossary-portal-card" href={indexCompletPageHref}>
|
||||
<strong>Index complet</strong>
|
||||
<span>
|
||||
Retrouver l’ensemble des entrées du glossaire dans une navigation
|
||||
alphabétique intégrale.
|
||||
</span>
|
||||
<small>{entries.length} entrée{entries.length > 1 ? "s" : ""}</small>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<script is:inline>
|
||||
(() => {
|
||||
@@ -468,27 +500,34 @@ const archicration = bySlug.get("archicration");
|
||||
--glossary-follow-height: 2.5rem;
|
||||
}
|
||||
|
||||
.glossary-home{
|
||||
padding: 8px 0 36px;
|
||||
.glossary-home-shell__main,
|
||||
.glossary-home-shell__aside{
|
||||
grid-column: auto;
|
||||
}
|
||||
|
||||
.glossary-hero-follow{
|
||||
margin: 2px 0 0;
|
||||
min-height: var(--glossary-follow-height);
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
opacity: 0;
|
||||
transform: translateY(10px) scale(.985);
|
||||
filter: blur(6px);
|
||||
.glossary-home-shell__aside-inner{
|
||||
position: static;
|
||||
}
|
||||
|
||||
.glossary-hero{
|
||||
position: sticky;
|
||||
top: var(--glossary-sticky-top);
|
||||
z-index: 12;
|
||||
margin-bottom: 28px;
|
||||
padding: 14px 16px 18px;
|
||||
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.90)),
|
||||
radial-gradient(900px 240px at 20% 0%, rgba(0,217,255,0.08), transparent 60%);
|
||||
transition:
|
||||
opacity 220ms cubic-bezier(.22,1,.36,1),
|
||||
transform 320ms cubic-bezier(.22,1,.36,1),
|
||||
filter 320ms cubic-bezier(.22,1,.36,1);
|
||||
pointer-events: none;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
will-change: opacity, transform, filter;
|
||||
background 300ms cubic-bezier(.22,.8,.22,1),
|
||||
border-color 300ms cubic-bezier(.22,.8,.22,1),
|
||||
box-shadow 300ms cubic-bezier(.22,.8,.22,1);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
display: grid;
|
||||
row-gap: 12px;
|
||||
}
|
||||
|
||||
.glossary-kicker{
|
||||
@@ -516,18 +555,22 @@ const archicration = bySlug.get("archicration");
|
||||
}
|
||||
|
||||
.glossary-hero-follow{
|
||||
margin: 0;
|
||||
min-height: 0;
|
||||
margin: 2px 0 0;
|
||||
min-height: var(--glossary-follow-height);
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
opacity: 0;
|
||||
transform: translateY(6px);
|
||||
transform: translateY(10px) scale(.985);
|
||||
filter: blur(6px);
|
||||
transition:
|
||||
opacity 500ms cubic-bezier(.22,.7,.22,1),
|
||||
transform 500ms cubic-bezier(.22,.7,.22,1);
|
||||
opacity 220ms cubic-bezier(.22,1,.36,1),
|
||||
transform 320ms cubic-bezier(.22,1,.36,1),
|
||||
filter 320ms cubic-bezier(.22,1,.36,1);
|
||||
pointer-events: none;
|
||||
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
will-change: opacity, transform, filter;
|
||||
}
|
||||
|
||||
.glossary-hero-follow.is-visible{
|
||||
@@ -750,6 +793,16 @@ const archicration = bySlug.get("archicration");
|
||||
opacity: .9;
|
||||
}
|
||||
|
||||
@media (max-width: 980px){
|
||||
.glossary-home-shell{
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.glossary-home-shell__aside-inner{
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 760px){
|
||||
.glossary-hero{
|
||||
top: calc(var(--glossary-sticky-top) - 2px);
|
||||
|
||||
Reference in New Issue
Block a user