update responsiveness

app/postcss.config.mjs

@@ -0,0 +1,14 @@
+// PostCSS config enabling Custom Media Queries
+// Allows usage of: @media (--bp-content-collapse) { ... }
+
+import postcssCustomMedia from 'postcss-custom-media';
+import postcssPresetEnv from 'postcss-preset-env';
+
+export default {
+  plugins: [
+    postcssCustomMedia(),
+    postcssPresetEnv({
+      stage: 0
+    })
+  ]
+};

app/src/components/Footer.astro

@@ -151,17 +151,6 @@ const { citationText, bibtex, licence, doi } = Astro.props as Props;
     grid-column: 2;
   }
 
-  @media (max-width: var(--bp-content-collapse)) {
-    .footer-inner {
-      grid-template-columns: 1fr;
-      gap: 16px;
-    }
-
-    .footer-inner > h3 {
-      grid-column: auto;
-      margin-top: 16px;
-    }
-  }
 
   .citation-block h3 {
     margin: 0 0 8px;
@@ -239,13 +228,6 @@ const { citationText, bibtex, licence, doi } = Astro.props as Props;
 [data-theme="dark"] .citation a { color: rgba(255,255,255,0.75); }
 
 
-  @media (max-width: var(--bp-content-collapse)) {
-    .footer-inner {
-      display: block;
-      padding: 40px 16px;
-    }
-  }
-
   /* Footer links: use primary color consistently */
   .footer a {
     color: var(--primary-color);

app/src/components/Hero.astro

@@ -93,7 +93,7 @@ const pdfFilename = `${slugify(pdfBase)}.pdf`;
       </div>
     )}
     {published && (
-      <div class="meta-container-cell">
+      <div class="meta-container-cell meta-container-cell--published">
         <h3>Published</h3>
         <p>{published}</p>
       </div>
@@ -201,6 +201,12 @@ const pdfFilename = `${slugify(pdfBase)}.pdf`;
   .affiliations li {
     margin: 0;
   }
+
+  header.meta .meta-container {
+    flex-wrap: wrap;
+    row-gap: 12px;
+  }
+  
   @media print {
     .meta-container-cell--pdf {
       display: none !important;

app/src/components/Sidenote.astro

@@ -27,7 +27,7 @@
     color: var(--muted-color);
   }
 
-  @media (max-width: var(--bp-content-collapse)) {
+  @media (--bp-content-collapse) {
     .aside__aside {
       position: static;
       width: auto;

app/src/components/TableOfContents.astro

@@ -2,10 +2,10 @@
 export interface Props { tableOfContentAutoCollapse?: boolean }
 const { tableOfContentAutoCollapse = false } = Astro.props as Props;
 ---
-<aside class="table-of-contents" data-auto-collapse={tableOfContentAutoCollapse ? '1' : '0'}>
+<nav class="table-of-contents" aria-label="Table of Contents" data-auto-collapse={tableOfContentAutoCollapse ? '1' : '0'}>
   <div class="title">Table of Contents</div>
   <div id="article-toc-placeholder"></div>
-</aside>
+</nav>
 <details class="table-of-contents-mobile">
   <summary>Table of Contents</summary>
   <div id="article-toc-mobile-placeholder"></div>
@@ -97,7 +97,15 @@ const { tableOfContentAutoCollapse = false } = Astro.props as Props;
       ...(holder ? holder.querySelectorAll('a') : []),
       ...(holderMobile ? holderMobile.querySelectorAll('a') : [])
     ];
-    const autoCollapse = (document.querySelector('aside.table-of-contents')?.getAttribute('data-auto-collapse') === '1');
+    // Read breakpoint from CSS var and set autoCollapse only on desktop (disabled on mobile)
+    const getCollapsePx = () => {
+      const root = document.documentElement;
+      const raw = getComputedStyle(root).getPropertyValue('--bp-content-collapse').trim();
+      return raw || '1100px';
+    };
+    const mq = window.matchMedia(`(max-width: ${getCollapsePx()})`);
+    const attrEnabled = (document.querySelector('.table-of-contents')?.getAttribute('data-auto-collapse') === '1');
+    let autoCollapse = attrEnabled && !mq.matches;
 
     // Inject styles for collapsible & animation
     const ensureStyles = () => {
@@ -105,9 +113,9 @@ const { tableOfContentAutoCollapse = false } = Astro.props as Props;
       const style = document.createElement('style');
       style.id = 'toc-collapse-style';
       style.textContent = `
-        aside.table-of-contents nav.table-of-contents-collapsible > ul > li > ul,
+        .table-of-contents nav.table-of-contents-collapsible > ul > li > ul,
         details.table-of-contents-mobile nav.table-of-contents-collapsible > ul > li > ul { overflow: hidden; transition: height 200ms ease; }
-        aside.table-of-contents nav.table-of-contents-collapsible > ul > li.collapsed > ul,
+        .table-of-contents nav.table-of-contents-collapsible > ul > li.collapsed > ul,
         details.table-of-contents-mobile nav.table-of-contents-collapsible > ul > li.collapsed > ul { display: block; }
       `;
       document.head.appendChild(style);
@@ -181,6 +189,29 @@ const { tableOfContentAutoCollapse = false } = Astro.props as Props;
       prevActiveIdx = activeIdx;
     };
 
+    // When switching between desktop/mobile, refresh autoCollapse and expand all on mobile
+    const expandAll = () => {
+      const { sideTop, mobileTop } = getTopLevelItems();
+      const expand = (items) => items.forEach((li) => {
+        li.classList.remove('collapsed');
+        const sub = li.querySelector(':scope > ul');
+        if (sub) sub.style.height = 'auto';
+      });
+      expand(sideTop);
+      expand(mobileTop);
+    };
+
+    const onMqChange = () => {
+      autoCollapse = attrEnabled && !mq.matches;
+      if (!autoCollapse) {
+        expandAll();
+      } else {
+        setCollapsedState(prevActiveIdx);
+      }
+    };
+    if (mq.addEventListener) mq.addEventListener('change', onMqChange);
+    else if (mq.addListener) mq.addListener(onMqChange);
+
     const onScroll = () => {
       // active link highlight
       let activeIdx = -1;
@@ -288,11 +319,12 @@ const { tableOfContentAutoCollapse = false } = Astro.props as Props;
   .table-of-contents-mobile > summary {
     cursor: pointer;
     list-style: none;
-    padding: 8px 12px;
+    padding: var(--spacing-3) var(--spacing-4);
     border: 1px solid var(--border-color);
     border-radius: 8px;
     color: var(--text-color);
     font-weight: 600;
+    position: relative;
   }
 
   .table-of-contents-mobile[open] > summary {
@@ -300,6 +332,25 @@ const { tableOfContentAutoCollapse = false } = Astro.props as Props;
     border-bottom-right-radius: 0;
   }
 
+  /* Disclosure arrow for mobile summary */
+  .table-of-contents-mobile > summary::after {
+    content: '';
+    position: absolute;
+    right: var(--spacing-4);
+    top: 50%;
+    width: 8px;
+    height: 8px;
+    border-right: 2px solid currentColor;
+    border-bottom: 2px solid currentColor;
+    transform: translateY(-70%) rotate(45deg);
+    transition: transform 150ms ease;
+    opacity: .7;
+  }
+
+  .table-of-contents-mobile[open] > summary::after {
+    transform: translateY(-30%) rotate(-135deg);
+  }
+
   .table-of-contents-mobile nav {
     border-left: none;
     padding: 10px 12px;
@@ -340,17 +391,6 @@ const { tableOfContentAutoCollapse = false } = Astro.props as Props;
     text-decoration: underline;
   }
 
-  [data-theme="dark"] .table-of-contents nav { border-left-color: rgba(255,255,255,.15); }
 
-  /* Responsive: hide sticky TOC, show mobile */
-  @media (max-width: var(--bp-content-collapse)) {
-    .table-of-contents {
-      position: static;
-      display: none;
-    }
 
-    .table-of-contents-mobile {
-      display: block;
-    }
-  }
 </style>

app/src/pages/index.astro

@@ -157,10 +157,6 @@ const licence = (articleFM as any)?.licence ?? (articleFM as any)?.license ?? (a
       <TableOfContents tableOfContentAutoCollapse={tableOfContentAutoCollapse} />
       <main>
         <Article />
-        <style is:inline>
-          /* Inline tweak for details blocks used in MDX */
-          details { background: var(--code-bg) !important; border: 1px solid var(--border-color) !important; border-radius: 6px; margin: 1em 0; padding: .5em .75em; }
-        </style>
       </main>
     </section>
 

app/src/styles/_base.css

@@ -1,8 +1,6 @@
 @import "https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,200..900;1,200..900&display=swap";
 
-html { font-size: 14px; line-height: 1.6; }
-@media (min-width: 768px) { html { font-size: 16px; } }
-@media (min-width: 1024px) { html { font-size: 17px; } }
+html { font-size: 16px; line-height: 1.6; }
 
 .content-grid main { color: var(--text-color); }
 .content-grid main p { margin: 0 0 var(--spacing-3); }

app/src/styles/_layout.css

@@ -19,25 +19,44 @@
   padding: 0;
 }
 
-@media (max-width: var(--bp-content-collapse)) {
+@media (--bp-content-collapse) {
   .content-grid {
     overflow: hidden;
+    display: block;
+    margin-top: var(--spacing-2);
   }
-}
-
 
-/* Responsive – collapse to single column */
-@media (max-width: var(--bp-content-collapse)) {
   .content-grid {
     grid-template-columns: 1fr;
   }
 
-  main > nav:first-of-type {
+  .table-of-contents {
+    position: static;
+    display: none;
+  }
+
+  .table-of-contents-mobile {
+    display: block;
+  }
+
+  .footer-inner {
+    grid-template-columns: 1fr;
+    gap: 16px;
+  }
+
+  .footer-inner > h3 {
+    grid-column: auto;
+    margin-top: 16px;
+  }
+
+  .footer-inner {
     display: block;
+    padding: 40px 16px;
   }
 }
 
 
+
 /* ============================================================================ */
 /* Width helpers – slightly wider than main column, and full-width to viewport */
 /* ---------------------------------------------------------------------------- */
@@ -63,7 +82,7 @@
   margin-right: calc(50% - 50vw);
 }
 
-@media (max-width: var(--bp-content-collapse)) {
+@media (--bp-content-collapse) {
   .wide,
   .full-width {
     width: 100%;
@@ -73,5 +92,40 @@
   }
 }
 
+/* ------------------------------------------------------------------------- */
+/* Hero meta bar responsiveness                                               */
+/* Two columns at collapse breakpoint, then one column below small screens    */
+/* ------------------------------------------------------------------------- */
+@media (--bp-sm) {
+  header.meta .meta-container {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 12px;
+    column-gap: 8px;
+    max-width: 100%;
+    padding: 0 var(--spacing-4);
+  }
+  header.meta .meta-container .meta-container-cell {
+    flex: 1 1 calc(50% - 8px);
+    min-width: 0;
+  }
+}
+
+@media (--bp-xxs) {
+  header.meta .meta-container .meta-container-cell {
+    flex-basis: 100%;
+    text-align: center;
+  }
+  /* Center ordered list numbers within meta (e.g., affiliations) */
+  header.meta .affiliations {
+    list-style-position: inside;
+    padding-left: 0;
+    margin-left: 0;
+  }
+  header.meta .affiliations li {
+    text-align: center;
+  }
+}
+
 
 

app/src/styles/_print.css

@@ -57,10 +57,12 @@
     /* Prefer keeping header+lead together */
     .hero { page-break-after: avoid; }
   }
-  
-  .muted {
-    color: var(--muted-color);
+
+    
+  @media print {
+    .meta-container-cell--pdf {
+      display: none !important;
+    }
   }
   
-  
   

app/src/styles/_variables.css

@@ -40,13 +40,14 @@
   --spacing-9: 64px;
   --spacing-10: 72px;
 
-  /* Breakpoints */
-  --bp-xs: 480px;
-  --bp-sm: 640px;
-  --bp-md: 768px;
-  --bp-lg: 1024px;
-  --bp-content-collapse: 1100px; /* layout single-column */
-  --bp-xl: 1280px;
+  /* Custom Media aliases compiled by PostCSS */
+  @custom-media --bp-xxs (max-width: 320px);
+  @custom-media --bp-xs (max-width: 480px);
+  @custom-media --bp-sm (max-width: 640px);
+  @custom-media --bp-md (max-width: 768px);
+  @custom-media --bp-lg (max-width: 1024px);
+  @custom-media --bp-xl (max-width: 1280px);
+  @custom-media --bp-content-collapse (max-width: 1100px);
 
   /* Layout */
   --content-padding-x: 16px; /* default page gutter */

app/src/styles/components/_code.css

@@ -49,7 +49,7 @@ section.content-grid pre code {
 }
 
 /* Wrap long lines only on small screens to prevent layout overflow */
-@media (max-width: var(--bp-content-collapse)) {
+@media (--bp-content-collapse) {
   .astro-code,
   section.content-grid pre {
     white-space: pre-wrap;