Archicratia/archicratie-edition
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(glossaire): compress paradigme hero when reading follow is active

Browse Source
This commit is contained in:
Archicratia
2026-03-23 10:27:28 +01:00
parent c89ddf7237
commit e39a0c547d
2 changed files with 66 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/layouts/GlossaryLayout.astro
View File

@@ -26,10 +26,46 @@ const {
</EditionLayout>
<style is:global>
body[data-edition-key="glossaire"][data-sticky-mode="glossary-portal"]{
--portal-hero-pad-top: 18px;
--portal-hero-pad-x: 18px;
--portal-hero-pad-bottom: 20px;
--portal-hero-gap: 14px;
--portal-hero-h1-size: clamp(2.2rem, 4vw, 3.15rem);
--portal-hero-intro-size: 1.04rem;
--portal-hero-intro-lh: 1.55;
--portal-hero-intro-maxw: 76ch;
--portal-hero-secondary-max-h: 20em;
--portal-hero-secondary-opacity: .94;
}
body[data-edition-key="glossaire"][data-sticky-mode="glossary-portal"].glossary-follow-on{
--portal-hero-pad-top: 12px;
--portal-hero-pad-x: 16px;
--portal-hero-pad-bottom: 14px;
--portal-hero-gap: 8px;
--portal-hero-h1-size: clamp(1.95rem, 3.3vw, 2.6rem);
--portal-hero-intro-size: .98rem;
--portal-hero-intro-lh: 1.46;
--portal-hero-intro-maxw: 68ch;
--portal-hero-secondary-max-h: 4.6em;
--portal-hero-secondary-opacity: .82;
}
body[data-edition-key="glossaire"][data-sticky-mode="glossary-portal"] .scene-hero,
body[data-edition-key="glossaire"][data-sticky-mode="glossary-portal"] .glossary-portal-hero,
body[data-edition-key="glossaire"][data-sticky-mode="glossary-portal"] .glossary-page-hero{
transition: border-radius 180ms ease;
transition:
border-radius 180ms ease,
padding 180ms ease,
row-gap 180ms ease,
margin-bottom 180ms ease;
}
body[data-edition-key="glossaire"][data-sticky-mode="glossary-portal"].glossary-follow-on .scene-hero,

41
src/pages/glossaire/paradigme-archicratique.astro
View File

@@ -780,21 +780,28 @@ const translationCount = casIaEntries.length;
top: calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px));
z-index: 11;
margin: 0 0 24px;
padding: 18px 18px 20px;
padding:
var(--portal-hero-pad-top)
var(--portal-hero-pad-x)
var(--portal-hero-pad-bottom);
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%);
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);
display: grid;
row-gap: var(--portal-hero-gap);
transition:
margin-bottom 180ms ease,
border-radius 180ms ease;
margin-bottom 180ms ease,
border-radius 180ms ease,
padding 180ms ease,
row-gap 180ms ease;
}
.pa-kicker{
margin: 0 0 10px;
margin: 0;
font-size: 12px;
letter-spacing: .08em;
text-transform: uppercase;
@@ -802,23 +809,33 @@ const translationCount = casIaEntries.length;
}
.pa-hero h1{
margin: 0 0 14px;
font-size: clamp(2.2rem, 4vw, 3.15rem);
margin: 0;
font-size: var(--portal-hero-h1-size);
line-height: 1.02;
letter-spacing: -.04em;
font-weight: 850;
transition: font-size 180ms ease;
}
.pa-intro{
max-width: 76ch;
margin: 0;
font-size: 1.04rem;
line-height: 1.55;
max-width: var(--portal-hero-intro-maxw);
font-size: var(--portal-hero-intro-size);
line-height: var(--portal-hero-intro-lh);
opacity: .94;
transition:
font-size 180ms ease,
line-height 180ms ease,
max-width 180ms ease,
max-height 220ms ease,
opacity 180ms ease,
margin-top 180ms ease;
}
.pa-intro + .pa-intro{
margin-top: 14px;
overflow: hidden;
max-height: var(--portal-hero-secondary-max-h);
opacity: var(--portal-hero-secondary-opacity);
}
.pa-section{