up

Author: soujanyaporia

_includes/nav.html

@@ -4,7 +4,7 @@
       <img class="site-logo site-logo--light" src="{{ '/assets/images/logos/rec-light.png' | relative_url }}" alt="{{ site.title }}">
       <img class="site-logo site-logo--dark" src="{{ '/assets/images/logos/rec-dark.png' | relative_url }}" alt="{{ site.title }}">
     </a>
-    <button class="menu-toggle" aria-label="Toggle menu" onclick="document.querySelector('.nav-links').classList.toggle('open')">
+    <button class="menu-toggle" aria-label="Toggle menu" aria-expanded="false" type="button">
       <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
         <line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/>
       </svg>

_sass/declare-lab.scss

@@ -10,6 +10,33 @@
   --declare-gold: #8a5a00;
 }
 
+/* Additional small-screen adjustments for very small devices */
+@media (max-width: 420px) {
+  .content-text .declare-hero {
+    padding: 1rem 0 0.8rem;
+  }
+  .content-text .declare-hero__visual,
+  .content-text .research-map {
+    min-height: 180px;
+  }
+  .content-text .declare-hero h1 {
+    font-size: clamp(1.6rem, 10vw, 2.2rem);
+  }
+  .content-text .declare-hero__subhead {
+    font-size: 0.98rem;
+  }
+  .content-text .home-index {
+    position: static;
+    top: auto;
+    margin-top: 0.6rem;
+  }
+  .content-text .person-card img,
+  .content-text .person-avatar {
+    width: 72px;
+    height: 72px;
+  }
+}
+
 .content-text .declare-hero,
 .content-text .home-index,
 .content-text .declare-intro,

assets/css/style.scss

@@ -1674,6 +1674,15 @@ strong { font-weight: 600; }
   h1 { font-size: 1.6em; }
 }
 
+@media (max-width: 420px) {
+  .header-inner { height: 60px; padding: 0 0.8em; }
+  .site-logo { width: 120px; max-height: 36px; }
+  .site-main { padding: 1.6em 0.8em; }
+  .site-header { backdrop-filter: blur(12px); }
+  .nav-links a { padding: 0.5em 0.6em; font-size: 0.9em; }
+  .menu-toggle { padding: 0.3em; }
+}
+
 /* ===== Print ===== */
 @media print {
   .site-header, .site-footer, .theme-toggle, .toc-nav, .pub-search { display: none; }

assets/js/_main.js

@@ -133,4 +133,39 @@ $(document).ready(function() {
       $(this).append(anchor);
     }
   });
+
+  // Mobile nav accessibility and UX improvements
+  (function() {
+    var $menuToggle = $('.menu-toggle');
+    var $navLinks = $('.nav-links');
+
+    // set initial state
+    $menuToggle.attr('aria-expanded', 'false');
+
+    $menuToggle.on('click', function(e) {
+      // toggle open class and aria state
+      var isOpen = $navLinks.hasClass('open');
+      $navLinks.toggleClass('open', !isOpen);
+      $menuToggle.attr('aria-expanded', String(!isOpen));
+    });
+
+    // Close mobile nav when a link is clicked
+    $navLinks.find('a').on('click', function() {
+      if ($navLinks.hasClass('open')) {
+        $navLinks.removeClass('open');
+        $menuToggle.attr('aria-expanded', 'false');
+      }
+    });
+
+    // Close nav on outside click (mobile)
+    $(document).on('click touchstart', function(e) {
+      if ($navLinks.hasClass('open')) {
+        var $target = $(e.target);
+        if (!$target.closest('.nav-links').length && !$target.closest('.menu-toggle').length) {
+          $navLinks.removeClass('open');
+          $menuToggle.attr('aria-expanded', 'false');
+        }
+      }
+    });
+  })();
 });