Merge pull request 'fix(glossaire): compact sticky entry hero on glossary pages' (#301) from fix/glossaire-entry-sticky-hero-collapse into main

Reviewed-on: #301

src/components/GlossaryEntryHero.astro

@@ -91,31 +91,44 @@ const hasScholarlyMeta =
   }
 
   .glossary-entry-head__title{
-    padding: 18px 18px 16px;
+    padding:
+      var(--entry-hero-pad-top, 18px)
+      var(--entry-hero-pad-x, 18px)
+      calc(var(--entry-hero-pad-top, 18px) - 2px);
+    transition: padding 180ms ease;
   }
-
+  
   .glossary-entry-head h1{
     margin: 0;
-    font-size: clamp(2.2rem, 4vw, 3.15rem);
+    font-size: var(--entry-hero-h1-size, clamp(2.2rem, 4vw, 3.15rem));
     line-height: 1.02;
     letter-spacing: -.04em;
     font-weight: 850;
+    transition: font-size 180ms ease;
   }
 
   .glossary-entry-summary{
     display: grid;
-    gap: 14px;
-    padding: 16px 18px 18px;
+    gap: var(--entry-hero-gap, 14px);
+    padding:
+      calc(var(--entry-hero-pad-bottom, 18px) - 2px)
+      var(--entry-hero-pad-x, 18px)
+      var(--entry-hero-pad-bottom, 18px);
     border-top: 1px solid rgba(127,127,127,0.14);
     background: rgba(255,255,255,0.02);
+    transition: gap 180ms ease, padding 180ms ease;
   }
 
   .glossary-entry-dek{
     margin: 0;
-    max-width: 76ch;
-    font-size: 1.04rem;
-    line-height: 1.55;
+    max-width: var(--entry-hero-dek-maxw, 76ch);
+    font-size: var(--entry-hero-dek-size, 1.04rem);
+    line-height: var(--entry-hero-dek-lh, 1.55);
     opacity: .94;
+    transition:
+      max-width 180ms ease,
+      font-size 180ms ease,
+      line-height 180ms ease;
   }
 
   .glossary-entry-signals{
@@ -123,6 +136,7 @@ const hasScholarlyMeta =
     flex-wrap: wrap;
     gap: 8px;
     margin: 0;
+    transition: gap 180ms ease;
   }
 
   .glossary-pill{
@@ -135,6 +149,11 @@ const hasScholarlyMeta =
     background: rgba(127,127,127,0.05);
     font-size: 13px;
     line-height: 1.35;
+    transition:
+      padding 180ms ease,
+      font-size 180ms ease,
+      background 120ms ease,
+      border-color 120ms ease;
   }
 
   .glossary-pill--family{
@@ -148,6 +167,14 @@ const hasScholarlyMeta =
     border: 1px solid rgba(127,127,127,0.18);
     border-radius: 12px;
     background: rgba(127,127,127,0.04);
+    max-height: var(--entry-hero-meta-max-h, 12rem);
+    opacity: var(--entry-hero-meta-opacity, 1);
+    overflow: hidden;
+    transition:
+      max-height 180ms ease,
+      opacity 140ms ease,
+      padding 180ms ease,
+      border-color 180ms ease;
   }
 
   .glossary-entry-meta p{

src/components/GlossaryEntryStickySync.astro

@@ -114,6 +114,10 @@
     z-index: 10;
   }
 
+  :global(body.is-glossary-entry-page.glossary-entry-follow-on .glossary-entry-signals){
+    gap: 6px;
+  }
+
   :global(body.is-glossary-entry-page.glossary-entry-follow-on .glossary-entry-head){
     margin-bottom: 0;
     border-bottom-left-radius: 0;
@@ -126,12 +130,21 @@
     padding-bottom: 10px;
   }
 
-  :global(body.is-glossary-entry-page.glossary-entry-follow-on .glossary-entry-signals){
-    gap: 6px;
+  :global(body.is-glossary-entry-page.glossary-entry-follow-on .glossary-entry-dek){
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+  }
+
+  :global(body.is-glossary-entry-page.glossary-entry-follow-on .glossary-pill){
+    padding: 4px 8px;
+    font-size: 12px;
   }
 
   :global(body.is-glossary-entry-page.glossary-entry-follow-on .glossary-entry-meta){
-    padding: 8px 10px;
+    padding: 0;
+    border-color: transparent;
   }
 
   :global(body.is-glossary-entry-page.glossary-entry-follow-on #reading-follow){

src/layouts/GlossaryLayout.astro

@@ -26,6 +26,38 @@ const {
 </EditionLayout>
 
 <style is:global>
+  body[data-edition-key="glossaire"][data-sticky-mode="glossary-entry"]{
+    --entry-hero-pad-top: 18px;
+    --entry-hero-pad-x: 18px;
+    --entry-hero-pad-bottom: 18px;
+    --entry-hero-gap: 14px;
+
+    --entry-hero-h1-size: clamp(2.2rem, 4vw, 3.15rem);
+
+    --entry-hero-dek-size: 1.04rem;
+    --entry-hero-dek-lh: 1.55;
+    --entry-hero-dek-maxw: 76ch;
+
+    --entry-hero-meta-max-h: 12rem;
+    --entry-hero-meta-opacity: 1;
+  }
+
+  body[data-edition-key="glossaire"][data-sticky-mode="glossary-entry"].glossary-entry-follow-on{
+    --entry-hero-pad-top: 8px;
+    --entry-hero-pad-x: 14px;
+    --entry-hero-pad-bottom: 6px;
+    --entry-hero-gap: 6px;
+
+    --entry-hero-h1-size: clamp(1.45rem, 2.4vw, 1.9rem);
+
+    --entry-hero-dek-size: .90rem;
+    --entry-hero-dek-lh: 1.32;
+    --entry-hero-dek-maxw: 56ch;
+
+    --entry-hero-meta-max-h: 0px;
+    --entry-hero-meta-opacity: 0;
+  }
+
   body[data-edition-key="glossaire"][data-sticky-mode="glossary-portal"]{
     --portal-hero-pad-top: 18px;
     --portal-hero-pad-x: 18px;