jekyll-theme-zer0 0.21.2 → 0.22.0

data/assets/js/auto-hide-nav.js

@@ -1,19 +1,22 @@
 /**
- * Auto-hide navbar on scroll
+ * Auto-hide navbar on scroll with enhanced UX
  * 
  * Behavior:
  * - Navbar is fixed at top and visible by default
- * - Hides when scrolling DOWN past a threshold (100px)
+ * - Hides when scrolling DOWN past a threshold (80px)
  * - Reappears when scrolling UP
+ * - Shows immediately when near top of page
  * - Respects prefers-reduced-motion accessibility setting
  * - Adds body padding to prevent content jump
+ * - Smooth transitions for better visual experience
  */
 (function() {
     'use strict';
 
     // Configuration
-    const SCROLL_THRESHOLD = 100; // Pixels before hide/show triggers
-    const SCROLL_DELTA = 5; // Minimum scroll distance to trigger change
+    const SCROLL_THRESHOLD = 80; // Reduced from 100px for quicker response
+    const SCROLL_DELTA = 3; // Reduced from 5px for smoother detection
+    const SHOW_ON_TOP_OFFSET = 50; // Show navbar when within 50px of top
 
     document.addEventListener('DOMContentLoaded', function() {
         const navbar = document.getElementById('navbar');
@@ -21,6 +24,7 @@
 
         let lastScrollTop = 0;
         let ticking = false;
+        let isNavbarHidden = false;
 
         // Check for reduced motion preference
         const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
@@ -34,10 +38,14 @@
         // Initial padding setup
         updateBodyPadding();
 
-        // Update padding on window resize
-        window.addEventListener('resize', updateBodyPadding, { passive: true });
+        // Update padding on window resize with debounce
+        let resizeTimeout;
+        window.addEventListener('resize', function() {
+            clearTimeout(resizeTimeout);
+            resizeTimeout = setTimeout(updateBodyPadding, 150);
+        }, { passive: true });
 
-        // Scroll handler
+        // Enhanced scroll handler with better logic
         function handleScroll() {
             const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
             const scrollDelta = scrollTop - lastScrollTop;
@@ -48,17 +56,30 @@
                 return;
             }
 
-            if (scrollDelta > 0 && scrollTop > SCROLL_THRESHOLD) {
-                // Scrolling DOWN past threshold - hide navbar
-                navbar.classList.add('navbar-hidden');
-            } else if (scrollDelta < 0) {
-                // Scrolling UP - show navbar
-                navbar.classList.remove('navbar-hidden');
+            // Always show navbar when near top of page
+            if (scrollTop <= SHOW_ON_TOP_OFFSET) {
+                if (isNavbarHidden) {
+                    navbar.classList.remove('navbar-hidden');
+                    isNavbarHidden = false;
+                }
+                lastScrollTop = scrollTop;
+                ticking = false;
+                return;
             }
 
-            // Always show navbar when at top of page
-            if (scrollTop <= 0) {
-                navbar.classList.remove('navbar-hidden');
+            // Hide navbar when scrolling down past threshold
+            if (scrollDelta > 0 && scrollTop > SCROLL_THRESHOLD) {
+                if (!isNavbarHidden) {
+                    navbar.classList.add('navbar-hidden');
+                    isNavbarHidden = true;
+                }
+            } 
+            // Show navbar when scrolling up
+            else if (scrollDelta < 0) {
+                if (isNavbarHidden) {
+                    navbar.classList.remove('navbar-hidden');
+                    isNavbarHidden = false;
+                }
             }
 
             lastScrollTop = Math.max(0, scrollTop);
@@ -66,16 +87,46 @@
         }
 
         // Optimized scroll listener using requestAnimationFrame
-        window.addEventListener('scroll', function() {
+        function onScroll() {
             if (!ticking) {
                 window.requestAnimationFrame(handleScroll);
                 ticking = true;
             }
-        }, { passive: true });
+        }
+        window.addEventListener('scroll', onScroll, { passive: true });
 
-        // Disable animations if user prefers reduced motion
-        if (prefersReducedMotion) {
+        // Apply smooth transition (unless user prefers reduced motion)
+        if (!prefersReducedMotion) {
+            navbar.style.transition = 'transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease';
+        } else {
             navbar.style.transition = 'none';
         }
+
+        // Add CSS for the hidden state if not already present
+        if (!document.getElementById('navbar-autohide-styles')) {
+            const style = document.createElement('style');
+            style.id = 'navbar-autohide-styles';
+            style.textContent = `
+                #navbar.navbar-hidden {
+                    transform: translateY(-100%);
+                    box-shadow: none;
+                }
+            `;
+            document.head.appendChild(style);
+        }
+
+        // Pause auto-hide when offcanvas is open so fixed positioning works
+        const offcanvasEl = document.getElementById('bdNavbar');
+        if (offcanvasEl) {
+            offcanvasEl.addEventListener('show.bs.offcanvas', function() {
+                navbar.classList.remove('navbar-hidden');
+                isNavbarHidden = false;
+                window.removeEventListener('scroll', onScroll);
+            });
+            offcanvasEl.addEventListener('hidden.bs.offcanvas', function() {
+                lastScrollTop = window.pageYOffset || document.documentElement.scrollTop;
+                window.addEventListener('scroll', onScroll, { passive: true });
+            });
+        }
     });
 })();

data/assets/js/color-modes.js

@@ -39,7 +39,12 @@
     const themeSwitcherText = document.querySelector('#bd-theme-text')
     const activeThemeIcon = document.querySelector('.theme-icon-active use')
     const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`)
-    const svgOfActiveBtn = btnToActive.querySelector('svg use').getAttribute('href')
+    const themeIconUse = btnToActive?.querySelector('svg use')
+    if (!btnToActive || !themeIconUse || !activeThemeIcon) {
+      return
+    }
+
+    const svgOfActiveBtn = themeIconUse.getAttribute('href')
 
     document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
       element.classList.remove('active')
@@ -49,7 +54,8 @@
     btnToActive.classList.add('active')
     btnToActive.setAttribute('aria-pressed', 'true')
     activeThemeIcon.setAttribute('href', svgOfActiveBtn)
-    const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`
+    const baseLabel = themeSwitcherText?.textContent?.trim() || 'Toggle theme'
+    const themeSwitcherLabel = `${baseLabel} (${btnToActive.dataset.bsThemeValue})`
     themeSwitcher.setAttribute('aria-label', themeSwitcherLabel)
 
     if (focus) {

data/assets/js/halfmoon.js

@@ -39,7 +39,12 @@
     const themeSwitcherText = document.querySelector('#bd-theme-text')
     const activeThemeIcon = document.querySelector('.theme-icon-active use')
     const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`)
-    const svgOfActiveBtn = btnToActive.querySelector('svg use').getAttribute('href')
+    const themeIconUse = btnToActive?.querySelector('svg use')
+    if (!btnToActive || !themeIconUse || !activeThemeIcon) {
+      return
+    }
+
+    const svgOfActiveBtn = themeIconUse.getAttribute('href')
 
     document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
       element.classList.remove('active')
@@ -49,7 +54,8 @@
     btnToActive.classList.add('active')
     btnToActive.setAttribute('aria-pressed', 'true')
     activeThemeIcon.setAttribute('href', svgOfActiveBtn)
-    const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`
+    const baseLabel = themeSwitcherText?.textContent?.trim() || 'Toggle theme'
+    const themeSwitcherLabel = `${baseLabel} (${btnToActive.dataset.bsThemeValue})`
     themeSwitcher.setAttribute('aria-label', themeSwitcherLabel)
 
     if (focus) {

data/assets/js/myScript.js

@@ -1,12 +1,4 @@
-function myFunction() {
-    myVar = 1;
-    myVar = myVar + 1;
-    document.getElementById("demo").innerHTML = myVar;
-  }
-
-// Updates each img tag with the class img-fluid
-
-  var imgs = document.getElementsByTagName('img');
-  for (var i = 0; i < imgs.length; i++) {
-    imgs[i].classList.add('img-fluid');
-  }
+/**
+ * Legacy asset path — not used by the current theme (see _includes/core/head.html).
+ * Kept so older builds, cached HTML, or bookmarks that still reference this URL do not 404.
+ */

data/assets/js/navigation.js

@@ -3,8 +3,8 @@
  * NAVIGATION SCRIPTS - Zer0-Mistakes Theme
  * ==============================================================================
  * 
- * Handles offcanvas navigation, dropdowns, and mobile interactions
- * Extracted from navbar.html inline scripts
+ * Handles offcanvas navigation, dropdowns, mobile interactions, and accessibility
+ * Enhanced for better UX across all device sizes
  * ==============================================================================
  */
 
@@ -12,11 +12,16 @@
   'use strict';
 
   const MOBILE_BREAKPOINT = 992;
+  const TOOLTIP_DELAY = { show: 400, hide: 100 }; // Increased show delay for better UX
   
   function isMobile() {
     return window.innerWidth < MOBILE_BREAKPOINT;
   }
 
+  function isCompactDesktop() {
+    return window.innerWidth >= 992 && window.innerWidth < 1200;
+  }
+
   /**
    * Initialize navigation when DOM is ready
    */
@@ -26,6 +31,9 @@
     setupMobileDropdowns();
     setupOutsideClickClose();
     setupOffcanvasReset();
+    setupNavTooltips();
+    setupDropdownHoverDelay();
+    setupFocusTrap();
   }
 
   /**
@@ -52,7 +60,7 @@
   }
 
   /**
-   * Desktop keyboard accessibility for hover dropdowns
+   * Enhanced keyboard accessibility for hover dropdowns
    */
   function setupKeyboardAccessibility() {
     const dropdowns = document.querySelectorAll('.nav-hover-dropdown');
@@ -67,6 +75,7 @@
       toggle.addEventListener('focus', () => {
         if (!isMobile()) {
           menu.classList.add('show');
+          toggle.setAttribute('aria-expanded', 'true');
         }
       });
 
@@ -74,33 +83,58 @@
       dropdown.addEventListener('focusout', (e) => {
         if (!dropdown.contains(e.relatedTarget)) {
           menu.classList.remove('show');
+          toggle.setAttribute('aria-expanded', 'false');
         }
       });
 
-      // Arrow key navigation
+      // Enhanced arrow key navigation
       dropdown.addEventListener('keydown', (e) => {
-        if (!menu.classList.contains('show')) return;
+        if (!menu.classList.contains('show')) {
+          // Open dropdown with Enter or Space
+          if ((e.key === 'Enter' || e.key === ' ') && e.target === toggle) {
+            e.preventDefault();
+            menu.classList.add('show');
+            toggle.setAttribute('aria-expanded', 'true');
+            // Focus first item
+            const firstItem = menu.querySelector('.dropdown-item:not(:disabled)');
+            if (firstItem) firstItem.focus();
+          }
+          return;
+        }
         
         const items = menu.querySelectorAll('.dropdown-item:not(:disabled)');
         const currentIndex = Array.from(items).indexOf(document.activeElement);
 
         if (e.key === 'ArrowDown') {
           e.preventDefault();
-          items[(currentIndex + 1) % items.length]?.focus();
+          const nextIndex = (currentIndex + 1) % items.length;
+          items[nextIndex]?.focus();
         } else if (e.key === 'ArrowUp') {
           e.preventDefault();
-          items[(currentIndex - 1 + items.length) % items.length]?.focus();
+          const prevIndex = (currentIndex - 1 + items.length) % items.length;
+          items[prevIndex]?.focus();
+        } else if (e.key === 'Home') {
+          e.preventDefault();
+          items[0]?.focus();
+        } else if (e.key === 'End') {
+          e.preventDefault();
+          items[items.length - 1]?.focus();
         } else if (e.key === 'Escape') {
           e.preventDefault();
           menu.classList.remove('show');
+          toggle.setAttribute('aria-expanded', 'false');
           toggle.focus();
+        } else if (e.key === 'Tab') {
+          // Close dropdown on Tab
+          menu.classList.remove('show');
+          toggle.setAttribute('aria-expanded', 'false');
         }
       });
     });
   }
 
   /**
-   * Mobile dropdown toggle handling
+   * Mobile dropdown toggle handling with smooth animations
    */
   function setupMobileDropdowns() {
     const dropdowns = document.querySelectorAll('.nav-hover-dropdown');
@@ -119,6 +153,18 @@
 
         const isOpen = menu.classList.contains('show');
 
+        // Close all other dropdowns first
+        document.querySelectorAll('.nav-hover-dropdown .dropdown-menu.show').forEach(otherMenu => {
+          if (otherMenu !== menu) {
+            otherMenu.classList.remove('show');
+            const otherToggle = otherMenu.closest('.nav-hover-dropdown')?.querySelector('.dropdown-toggle-split');
+            if (otherToggle) {
+              otherToggle.classList.remove('show');
+              otherToggle.setAttribute('aria-expanded', 'false');
+            }
+          }
+        });
+
         if (isOpen) {
           menu.classList.remove('show');
           toggle.classList.remove('show');
@@ -127,6 +173,11 @@
           menu.classList.add('show');
           toggle.classList.add('show');
           toggle.setAttribute('aria-expanded', 'true');
+          
+          // Smooth scroll to show the opened menu
+          setTimeout(() => {
+            toggle.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+          }, 100);
         }
       });
     });
@@ -179,28 +230,132 @@
    * Shows link title on hover when labels are hidden (992px-1199px)
    */
   function setupNavTooltips() {
+    if (typeof bootstrap === 'undefined' || !bootstrap.Tooltip) return;
+    
     const navLinks = document.querySelectorAll('#bdNavbar .nav-link[title]');
+    const tooltips = [];
+    
     navLinks.forEach(link => {
-      // Only initialize tooltip if Bootstrap is available
-      if (typeof bootstrap !== 'undefined' && bootstrap.Tooltip) {
-        new bootstrap.Tooltip(link, {
-          trigger: 'hover',
-          placement: 'bottom',
-          delay: { show: 300, hide: 0 }
+      const tooltip = new bootstrap.Tooltip(link, {
+        // Only trigger tooltip in compact desktop (992-1199px) where text labels are hidden
+        trigger: 'manual',
+        placement: 'bottom',
+        delay: TOOLTIP_DELAY,
+        boundary: 'window',
+        fallbackPlacements: ['top', 'bottom'],
+        customClass: 'nav-tooltip'
+      });
+      tooltips.push(tooltip);
+
+      // Manually show/hide based on viewport
+      link.addEventListener('mouseenter', () => {
+        if (isCompactDesktop()) tooltip.show();
+      });
+      link.addEventListener('mouseleave', () => tooltip.hide());
+      link.addEventListener('focus', () => {
+        if (isCompactDesktop()) tooltip.show();
+      });
+      link.addEventListener('blur', () => tooltip.hide());
+    });
+    
+    // Update tooltip state on window resize
+    let resizeTimeout;
+    window.addEventListener('resize', () => {
+      clearTimeout(resizeTimeout);
+      resizeTimeout = setTimeout(() => {
+        tooltips.forEach(tooltip => {
+          // Hide tooltips if not in compact desktop view
+          if (!isCompactDesktop()) {
+            tooltip.hide();
+          }
         });
+      }, 150);
+    });
+  }
+
+  /**
+   * Add slight delay to dropdown hover on desktop
+   * Prevents accidental opening when moving cursor across menu
+   */
+  function setupDropdownHoverDelay() {
+    if (isMobile()) return;
+    
+    const dropdowns = document.querySelectorAll('.nav-hover-dropdown');
+    const hoverDelay = 150; // ms
+    
+    dropdowns.forEach(dropdown => {
+      let hoverTimeout;
+      
+      dropdown.addEventListener('mouseenter', () => {
+        hoverTimeout = setTimeout(() => {
+          const menu = dropdown.querySelector('.dropdown-menu');
+          if (menu && !isMobile()) {
+            menu.classList.add('show');
+          }
+        }, hoverDelay);
+      });
+      
+      dropdown.addEventListener('mouseleave', () => {
+        clearTimeout(hoverTimeout);
+        const menu = dropdown.querySelector('.dropdown-menu');
+        if (menu && !isMobile()) {
+          menu.classList.remove('show');
+        }
+      });
+    });
+  }
+
+  /**
+   * Focus trap for offcanvas on mobile
+   * Keeps focus within the menu for better accessibility
+   */
+  function setupFocusTrap() {
+    const offcanvasEl = document.getElementById('bdNavbar');
+    if (!offcanvasEl) return;
+
+    offcanvasEl.addEventListener('shown.bs.offcanvas', () => {
+      // Focus first focusable element
+      const firstFocusable = offcanvasEl.querySelector(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+      );
+      if (firstFocusable) {
+        firstFocusable.focus();
       }
     });
   }
 
   // Initialize
   if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', () => {
-      initNavigation();
-      setupNavTooltips();
-    });
+    document.addEventListener('DOMContentLoaded', initNavigation);
   } else {
     initNavigation();
-    setupNavTooltips();
   }
 
+  // Re-initialize on window resize for responsive behavior
+  let resizeTimer;
+  window.addEventListener('resize', () => {
+    clearTimeout(resizeTimer);
+    resizeTimer = setTimeout(() => {
+      // Update mobile dropdown behavior
+      const dropdowns = document.querySelectorAll('.nav-hover-dropdown .dropdown-menu');
+      dropdowns.forEach(menu => {
+        if (!isMobile()) {
+          // Close the dropdown menu
+          menu.classList.remove('show');
+
+          // Also reset the corresponding toggle state for accessibility
+          const dropdown = menu.closest('.dropdown');
+          const toggle = dropdown
+            ? dropdown.querySelector('[data-bs-toggle="dropdown"], .dropdown-toggle')
+            : null;
+
+          if (toggle) {
+            toggle.classList.remove('show');
+            toggle.setAttribute('aria-expanded', 'false');
+          }
+        }
+      });
+    }, 250);
+  });
+
 })();

data/assets/js/search-modal.js

@@ -2,10 +2,33 @@
  * Search Modal Controller
  * - Opens modal on navigation:searchRequest event ("/" shortcut)
  * - Focuses search input on open
+ * - Mutually exclusive with Settings (#info-section) and cookie settings modal so Bootstrap
+ *   does not stack multiple .modal-backdrop layers (search vs About/Settings conflict).
  */
 (function() {
     'use strict';
 
+    /**
+     * If modal is visible, hide it and run next() on hidden.bs.modal; else run next() now.
+     */
+    function afterModalClosed(modalEl, next) {
+        if (!modalEl || typeof bootstrap === 'undefined') {
+            next();
+            return;
+        }
+        if (!modalEl.classList.contains('show')) {
+            next();
+            return;
+        }
+        const inst = bootstrap.Modal.getInstance(modalEl);
+        if (!inst) {
+            next();
+            return;
+        }
+        modalEl.addEventListener('hidden.bs.modal', next, { once: true });
+        inst.hide();
+    }
+
     function initSearchModal() {
         const modalEl = document.getElementById('siteSearchModal');
         if (!modalEl) return;
@@ -19,16 +42,36 @@
         let searchIndexPromise = null;
         let searchTimeout = null;
 
-        const openModal = () => {
-            const modalInstance = typeof bootstrap !== 'undefined'
-                ? bootstrap.Modal.getOrCreateInstance(modalEl)
-                : null;
+        const showSearchModal = () => {
+            if (typeof bootstrap === 'undefined') return;
+            bootstrap.Modal.getOrCreateInstance(modalEl).show();
+        };
 
-            if (modalInstance) {
-                modalInstance.show();
-            }
+        const openModal = () => {
+            if (typeof bootstrap === 'undefined') return;
+            const cookieEl = document.getElementById('cookieSettingsModal');
+            const infoEl = document.getElementById('info-section');
+            afterModalClosed(cookieEl, () => {
+                afterModalClosed(infoEl, showSearchModal);
+            });
         };
 
+        const infoSectionEl = document.getElementById('info-section');
+        if (infoSectionEl) {
+            infoSectionEl.addEventListener(
+                'show.bs.modal',
+                (e) => {
+                    if (!modalEl.classList.contains('show')) return;
+                    e.preventDefault();
+                    e.stopImmediatePropagation();
+                    afterModalClosed(modalEl, () => {
+                        bootstrap.Modal.getOrCreateInstance(infoSectionEl).show();
+                    });
+                },
+                true,
+            );
+        }
+
         // Open modal when keyboard shortcut requests search
         document.addEventListener('navigation:searchRequest', openModal);