Polish glossary home responsive aside and map density

src/components/GlossaryHomeAside.astro

@@ -192,120 +192,47 @@ const {
     word-break: break-word;
   }
 
-  @media (max-width: 860px){
-    .glossary-home-aside{
-      gap: 10px;
-    }
-
-    .glossary-home-aside__block{
-      border-radius: 14px;
-    }
-
-    .glossary-home-aside__block--intro{
-      padding: 12px;
-    }
-
-    .glossary-home-aside__title{
-      font-size: 19px;
-      line-height: 1.18;
-    }
-
-    .glossary-home-aside__meta{
-      margin-top: 6px;
-      font-size: 12px;
-      line-height: 1.32;
-    }
-
-    .glossary-home-aside__pills{
-      gap: 6px;
-      margin-top: 9px;
-    }
-
-    .glossary-home-aside__pill{
-      padding: 4px 9px;
-      font-size: 12px;
-      line-height: 1.28;
-    }
-
-    .glossary-home-aside__summary{
-      padding: 12px;
-    }
-
-    .glossary-home-aside__heading{
-      font-size: 17px;
-      line-height: 1.2;
-    }
-
-    .glossary-home-aside__panel{
-      padding: 0 12px 12px;
-    }
-
-    .glossary-home-aside__list li{
-      margin: 5px 0;
-    }
-
-    .glossary-home-aside__list a{
-      font-size: 14px;
-      line-height: 1.34;
-    }
-
-    .glossary-home-aside__disclosure:not([open]) .glossary-home-aside__panel{
-      display: none;
-    }
-  }
-
-  @media (max-width: 860px){
-    .glossary-home-aside__disclosure{
-      background: rgba(127,127,127,0.045);
-    }
-
-    .glossary-home-aside__disclosure[open] .glossary-home-aside__summary{
-      border-bottom: 1px solid rgba(127,127,127,0.12);
-    }
-  }
-
-  @media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
+  @media (max-width: 980px){
     .glossary-home-aside{
       gap: 8px;
+      margin-bottom: 12px;
     }
 
     .glossary-home-aside__block{
-      border-radius: 12px;
+      border-radius: 13px;
     }
 
     .glossary-home-aside__block--intro{
-      padding: 10px 11px;
+      padding: 10px 12px;
     }
 
     .glossary-home-aside__title{
-      font-size: 16px;
-      line-height: 1.14;
+      font-size: 15px;
+      line-height: 1.15;
     }
 
     .glossary-home-aside__meta{
-      font-size: 11px;
-      line-height: 1.26;
-      margin-top: 5px;
+      display: none;
     }
 
     .glossary-home-aside__pills{
       gap: 5px;
-      margin-top: 8px;
+      margin-top: 7px;
     }
 
     .glossary-home-aside__pill{
       padding: 3px 8px;
       font-size: 11px;
-      line-height: 1.2;
+      line-height: 1.18;
     }
 
     .glossary-home-aside__summary{
-      padding: 10px 11px;
+      padding: 9px 11px;
     }
 
     .glossary-home-aside__heading{
-      font-size: 15px;
-      line-height: 1.16;
+      font-size: 14px;
+      line-height: 1.15;
     }
 
     .glossary-home-aside__panel{
@@ -320,9 +247,80 @@ const {
       font-size: 13px;
       line-height: 1.28;
     }
+
+    .glossary-home-aside__disclosure:not([open]) .glossary-home-aside__panel{
+      display: none;
+    }
   }
 
-  @media (min-width: 861px){
+  @media (max-width: 980px){
+    .glossary-home-aside__disclosure{
+      background: rgba(127,127,127,0.045);
+    }
+
+    .glossary-home-aside__disclosure[open] .glossary-home-aside__summary{
+      border-bottom: 1px solid rgba(127,127,127,0.12);
+    }
+  }
+
+  @media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
+    .glossary-home-aside{
+      gap: 7px;
+      margin-bottom: 10px;
+    }
+
+    .glossary-home-aside__block{
+      border-radius: 12px;
+    }
+
+    .glossary-home-aside__block--intro{
+      padding: 9px 10px;
+    }
+
+    .glossary-home-aside__title{
+      font-size: 14px;
+      line-height: 1.12;
+    }
+
+    .glossary-home-aside__meta{
+      display: none;
+    }
+
+    .glossary-home-aside__pills{
+      gap: 4px;
+      margin-top: 6px;
+    }
+
+    .glossary-home-aside__pill{
+      padding: 2px 7px;
+      font-size: 10.5px;
+      line-height: 1.16;
+    }
+
+    .glossary-home-aside__summary{
+      padding: 8px 10px;
+    }
+
+    .glossary-home-aside__heading{
+      font-size: 13px;
+      line-height: 1.12;
+    }
+
+    .glossary-home-aside__panel{
+      padding: 0 10px 9px;
+    }
+
+    .glossary-home-aside__list li{
+      margin: 3px 0;
+    }
+
+    .glossary-home-aside__list a{
+      font-size: 12px;
+      line-height: 1.22;
+    }
+  }
+
+  @media (min-width: 981px){
     .glossary-home-aside__summary{
       cursor: default;
     }
@@ -346,28 +344,32 @@ const {
 
 <script is:inline>
   (() => {
+    let wasCompact = null;
+
     const syncMobileDisclosure = () => {
-      const mobile = window.matchMedia("(max-width: 860px)").matches;
+      const stackedLayout = window.matchMedia("(max-width: 980px)").matches;
       const smallLandscape = window.matchMedia(
         "(orientation: landscape) and (max-width: 920px) and (max-height: 520px)"
       ).matches;
 
-      const compact = mobile || smallLandscape;
+      const compact = stackedLayout || smallLandscape;
+      const enteringCompact = compact && wasCompact !== true;
 
       document
         .querySelectorAll(".glossary-home-aside__disclosure")
-        .forEach((el, index) => {
+        .forEach((el) => {
           if (!(el instanceof HTMLDetailsElement)) return;
 
           if (compact) {
-            if (!el.dataset.mobileInit) {
-              el.open = index === 0;
-              el.dataset.mobileInit = "true";
+            if (enteringCompact) {
+              el.open = false;
             }
           } else {
             el.open = true;
           }
         });
+
+      wasCompact = compact;
     };
 
     if (document.readyState === "loading") {