jekyll-theme-zer0 0.20.3 → 0.21.2

data/_sass/core/_navbar.scss

@@ -0,0 +1,390 @@
+// ==============================================================================
+// NAVBAR STYLES - Zer0-Mistakes Theme Navigation
+// ==============================================================================
+// 
+// Extracted from navbar.html inline styles for better maintainability
+// Breakpoints: 
+//   - Desktop XL >= 1200px (full labels)
+//   - Desktop LG 992px-1199px (icons only, labels hidden)
+//   - Mobile < 992px (offcanvas)
+// ==============================================================================
+
+// -----------------------------------------------------------------------------
+// Compact Desktop Navigation (992px - 1199px)
+// Hide labels, show icons only to prevent overflow
+// -----------------------------------------------------------------------------
+
+@media (min-width: 992px) and (max-width: 1199.98px) {
+  // Hide nav link text labels, keep icons visible
+  #bdNavbar .nav-link .nav-link-text {
+    display: none;
+  }
+  
+  // Adjust icon margin when text is hidden
+  #bdNavbar .nav-link i {
+    margin-right: 0 !important;
+  }
+  
+  // Compact nav item spacing
+  #bdNavbar .navbar-nav {
+    gap: 0;
+  }
+  
+  #bdNavbar .nav-link {
+    padding: 0.5rem 0.5rem;
+  }
+  
+  // Dropdown toggle needs less space
+  .nav-hover-dropdown .dropdown-toggle-split {
+    padding-left: 0;
+    padding-right: 0.25rem;
+    
+    &::after {
+      font-size: 0.65em;
+      margin-left: 0;
+    }
+  }
+  
+  // Keep Search button label hidden
+  .nav-search-button .d-lg-inline {
+    display: none !important;
+  }
+  
+  .nav-search-button {
+    padding: 0.5rem 0.5rem !important;
+  }
+  
+  // Hide site subtitle at compact breakpoint
+  .site-subtitle {
+    display: none !important;
+  }
+  
+  // Reduce brand group spacing
+  .navbar-brand-group {
+    gap: 0.5rem !important;
+  }
+  
+  // Compact home links
+  .navbar-home-links .btn {
+    padding: 0.375rem 0.5rem;
+  }
+}
+
+// -----------------------------------------------------------------------------
+// Full Desktop Navigation (>= 1200px)
+// Show full labels with icons
+// -----------------------------------------------------------------------------
+
+@media (min-width: 1200px) {
+  #bdNavbar .nav-link .nav-link-text {
+    display: inline;
+    margin-left: 0.5rem;
+  }
+  
+  #bdNavbar .nav-link i {
+    margin-right: 0;
+  }
+}
+
+// -----------------------------------------------------------------------------
+// Utility Controls (Search, Settings)
+// -----------------------------------------------------------------------------
+
+.navbar-utility-controls {
+  gap: 0.25rem;
+  margin-left: auto;
+  
+  .nav-search-button,
+  .nav-settings-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.5rem 0.75rem;
+    border: none;
+    background: transparent;
+    color: var(--bs-body-color);
+    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
+    
+    &:hover {
+      color: var(--bs-primary);
+      background-color: var(--bs-tertiary-bg);
+    }
+    
+    i {
+      font-size: 1.1rem;
+    }
+  }
+}
+
+@media (min-width: 992px) and (max-width: 1199.98px) {
+  .navbar-utility-controls {
+    gap: 0;
+    
+    .nav-search-button,
+    .nav-settings-button {
+      padding: 0.5rem;
+    }
+    
+    .nav-link-text {
+      display: none !important;
+    }
+  }
+}
+
+@media (max-width: 991.98px) {
+  .navbar-utility-controls {
+    gap: 0;
+    
+    .nav-search-button {
+      padding: 0.5rem;
+      width: 2.5rem;
+      height: 2.5rem;
+    }
+    
+    .nav-link-text {
+      display: none !important;
+    }
+  }
+}
+
+// -----------------------------------------------------------------------------
+// Desktop Navigation (>= 992px) - Common styles
+// -----------------------------------------------------------------------------
+
+@media (min-width: 992px) {
+  // Convert offcanvas to inline navigation on desktop
+  #bdNavbar {
+    position: static !important;
+    transform: none !important;
+    visibility: visible !important;
+    background: transparent !important;
+    border: none !important;
+    width: auto !important;
+    flex-grow: 0 !important;
+  }
+  
+  #bdNavbar .offcanvas-header {
+    display: none !important;
+  }
+  
+  #bdNavbar .offcanvas-body {
+    padding: 0 !important;
+    overflow: visible !important;
+  }
+  
+  #bdNavbar .navbar-nav {
+    flex-direction: row !important;
+    gap: 0.25rem;
+  }
+  
+  // Dropdown positioning
+  .nav-hover-dropdown {
+    position: relative;
+  }
+  
+  .nav-hover-dropdown > .dropdown-menu {
+    position: absolute;
+    top: 100% !important;
+    left: 0;
+    margin-top: 0.125rem !important;
+    min-width: 12rem;
+    z-index: 1050;
+  }
+  
+  // Hover behavior
+  .nav-hover-dropdown:hover > .dropdown-menu {
+    display: block;
+  }
+  
+  .nav-hover-dropdown .dropdown-menu {
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out;
+    display: block !important;
+  }
+  
+  .nav-hover-dropdown:hover .dropdown-menu,
+  .nav-hover-dropdown .dropdown-menu.show {
+    opacity: 1;
+    visibility: visible;
+  }
+  
+  .nav-hover-dropdown .dropdown-toggle-split {
+    padding-left: 0.25rem;
+    padding-right: 0.5rem;
+  }
+  
+  .nav-hover-dropdown .dropdown-toggle-split::after {
+    vertical-align: 0.15em;
+    font-size: 0.75em;
+  }
+}
+
+// -----------------------------------------------------------------------------
+// Mobile Navigation (< 992px)
+// -----------------------------------------------------------------------------
+
+@media (max-width: 991.98px) {
+  #bdNavbar .navbar-nav {
+    flex-direction: column !important;
+  }
+  
+  .nav-hover-dropdown {
+    flex-wrap: wrap !important;
+    justify-content: flex-start !important;
+  }
+  
+  .nav-hover-dropdown > .nav-link:first-child {
+    flex: 0 0 auto !important;
+  }
+  
+  .nav-hover-dropdown > .dropdown-toggle-split {
+    flex: 0 0 auto;
+    // Minimum touch target (44px WCAG recommendation)
+    min-width: 44px;
+    min-height: 44px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .nav-hover-dropdown > .dropdown-toggle-split::after {
+    transition: transform 0.25s ease;
+  }
+  
+  .nav-hover-dropdown > .dropdown-toggle-split.show::after {
+    transform: rotate(180deg);
+  }
+  
+  .nav-hover-dropdown .dropdown-menu {
+    position: static !important;
+    float: none;
+    flex-basis: 100% !important;
+    width: 100%;
+    margin-top: 0;
+    border: none;
+    box-shadow: none;
+    background-color: var(--bs-tertiary-bg);
+    padding-left: 1rem;
+    max-height: 0;
+    overflow: hidden;
+    opacity: 0;
+    transition: max-height 0.3s ease, opacity 0.25s ease, padding 0.3s ease;
+    padding-top: 0;
+    padding-bottom: 0;
+    display: block !important;
+  }
+  
+  .nav-hover-dropdown .dropdown-menu.show {
+    max-height: 500px;
+    opacity: 1;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+  }
+
+  // Larger touch targets for nav items
+  #bdNavbar .nav-link {
+    padding: 0.75rem 1rem;
+    min-height: 48px;
+    display: flex;
+    align-items: center;
+  }
+
+  // Better close button
+  #bdNavbar .offcanvas-header .btn-close {
+    width: 44px;
+    height: 44px;
+    padding: 0;
+  }
+}
+
+// -----------------------------------------------------------------------------
+// Active States
+// -----------------------------------------------------------------------------
+
+.dropdown-item[aria-current="page"] {
+  background-color: var(--bs-primary);
+  color: var(--bs-white);
+}
+
+.dropdown-item[aria-current="page"]:hover {
+  background-color: var(--bs-primary);
+  filter: brightness(0.9);
+}
+
+// -----------------------------------------------------------------------------
+// Dropdown Styling
+// -----------------------------------------------------------------------------
+
+.nav-hover-dropdown .dropdown-menu {
+  border-radius: 0.375rem;
+  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+}
+
+.nav-hover-dropdown .dropdown-item {
+  padding: 0.5rem 1rem;
+  min-height: 44px;
+  display: flex;
+  align-items: center;
+}
+
+.nav-hover-dropdown .dropdown-item:hover {
+  background-color: var(--bs-tertiary-bg);
+}
+
+// -----------------------------------------------------------------------------
+// Site Title Responsiveness
+// -----------------------------------------------------------------------------
+
+.site-title-text {
+  display: inline-block;
+}
+
+@media (max-width: 767.98px) {
+  .site-title-text {
+    max-width: 55vw;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+@media (max-width: 575.98px) {
+  .site-title-text {
+    max-width: 45vw;
+  }
+}
+
+// -----------------------------------------------------------------------------
+// Info Section Modal Tabs
+// -----------------------------------------------------------------------------
+
+#info-section {
+  .nav-tabs {
+    border-bottom: 2px solid var(--bs-border-color);
+    
+    .nav-link {
+      border: none;
+      border-bottom: 3px solid transparent;
+      color: var(--bs-secondary-color);
+      padding: 0.75rem 1rem;
+      font-weight: 500;
+      transition: color 0.2s ease, border-color 0.2s ease;
+      
+      &:hover {
+        color: var(--bs-primary);
+        border-bottom-color: var(--bs-primary-bg-subtle);
+      }
+      
+      &.active {
+        color: var(--bs-primary);
+        border-bottom-color: var(--bs-primary);
+        background: transparent;
+      }
+    }
+  }
+  
+  .tab-content {
+    padding-top: 1rem;
+  }
+}

data/_sass/custom.scss

@@ -8,6 +8,9 @@
 // Import navigation tree styles
 @import "core/nav-tree";
 
+// Import navbar styles (extracted from navbar.html)
+@import "core/navbar";
+
 html, body {
     max-width: 100%;
     // overflow-x: hidden;

data/assets/js/navigation.js

@@ -0,0 +1,206 @@
+/**
+ * ==============================================================================
+ * NAVIGATION SCRIPTS - Zer0-Mistakes Theme
+ * ==============================================================================
+ * 
+ * Handles offcanvas navigation, dropdowns, and mobile interactions
+ * Extracted from navbar.html inline scripts
+ * ==============================================================================
+ */
+
+(function() {
+  'use strict';
+
+  const MOBILE_BREAKPOINT = 992;
+  
+  function isMobile() {
+    return window.innerWidth < MOBILE_BREAKPOINT;
+  }
+
+  /**
+   * Initialize navigation when DOM is ready
+   */
+  function initNavigation() {
+    setupOffcanvasLinkClose();
+    setupKeyboardAccessibility();
+    setupMobileDropdowns();
+    setupOutsideClickClose();
+    setupOffcanvasReset();
+  }
+
+  /**
+   * Close offcanvas when navigation link is clicked
+   */
+  function setupOffcanvasLinkClose() {
+    const offcanvasEl = document.getElementById('bdNavbar');
+    if (!offcanvasEl) return;
+
+    const navLinks = offcanvasEl.querySelectorAll(
+      '.nav-link[href]:not(.dropdown-toggle), .dropdown-item[href]'
+    );
+
+    navLinks.forEach(link => {
+      link.addEventListener('click', () => {
+        setTimeout(() => {
+          const offcanvas = bootstrap.Offcanvas.getInstance(offcanvasEl);
+          if (offcanvas) {
+            offcanvas.hide();
+          }
+        }, 100);
+      });
+    });
+  }
+
+  /**
+   * Desktop keyboard accessibility for hover dropdowns
+   */
+  function setupKeyboardAccessibility() {
+    const dropdowns = document.querySelectorAll('.nav-hover-dropdown');
+    
+    dropdowns.forEach(dropdown => {
+      const toggle = dropdown.querySelector('.dropdown-toggle');
+      const menu = dropdown.querySelector('.dropdown-menu');
+      
+      if (!toggle || !menu) return;
+
+      // Show on focus
+      toggle.addEventListener('focus', () => {
+        if (!isMobile()) {
+          menu.classList.add('show');
+        }
+      });
+
+      // Hide when focus leaves dropdown
+      dropdown.addEventListener('focusout', (e) => {
+        if (!dropdown.contains(e.relatedTarget)) {
+          menu.classList.remove('show');
+        }
+      });
+
+      // Arrow key navigation
+      dropdown.addEventListener('keydown', (e) => {
+        if (!menu.classList.contains('show')) 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();
+        } else if (e.key === 'ArrowUp') {
+          e.preventDefault();
+          items[(currentIndex - 1 + items.length) % items.length]?.focus();
+        } else if (e.key === 'Escape') {
+          e.preventDefault();
+          menu.classList.remove('show');
+          toggle.focus();
+        }
+      });
+    });
+  }
+
+  /**
+   * Mobile dropdown toggle handling
+   */
+  function setupMobileDropdowns() {
+    const dropdowns = document.querySelectorAll('.nav-hover-dropdown');
+    
+    dropdowns.forEach(dropdown => {
+      const toggle = dropdown.querySelector('.dropdown-toggle-split');
+      const menu = dropdown.querySelector('.dropdown-menu');
+      
+      if (!toggle || !menu) return;
+
+      toggle.addEventListener('click', function(e) {
+        if (!isMobile()) return;
+        
+        e.preventDefault();
+        e.stopPropagation();
+
+        const isOpen = menu.classList.contains('show');
+
+        if (isOpen) {
+          menu.classList.remove('show');
+          toggle.classList.remove('show');
+          toggle.setAttribute('aria-expanded', 'false');
+        } else {
+          menu.classList.add('show');
+          toggle.classList.add('show');
+          toggle.setAttribute('aria-expanded', 'true');
+        }
+      });
+    });
+  }
+
+  /**
+   * Close dropdowns when clicking outside on mobile
+   */
+  function setupOutsideClickClose() {
+    document.addEventListener('click', (e) => {
+      if (!isMobile()) return;
+      
+      const clickedDropdown = e.target.closest('.nav-hover-dropdown');
+      if (clickedDropdown) return;
+
+      document.querySelectorAll('.nav-hover-dropdown').forEach(dropdown => {
+        const toggle = dropdown.querySelector('.dropdown-toggle-split');
+        const menu = dropdown.querySelector('.dropdown-menu');
+        if (menu && toggle) {
+          menu.classList.remove('show');
+          toggle.classList.remove('show');
+          toggle.setAttribute('aria-expanded', 'false');
+        }
+      });
+    });
+  }
+
+  /**
+   * Reset dropdowns when offcanvas closes
+   */
+  function setupOffcanvasReset() {
+    const offcanvasEl = document.getElementById('bdNavbar');
+    if (!offcanvasEl) return;
+
+    offcanvasEl.addEventListener('hide.bs.offcanvas', () => {
+      document.querySelectorAll('.nav-hover-dropdown').forEach(dropdown => {
+        const toggle = dropdown.querySelector('.dropdown-toggle-split');
+        const menu = dropdown.querySelector('.dropdown-menu');
+        if (menu && toggle) {
+          menu.classList.remove('show');
+          toggle.classList.remove('show');
+          toggle.setAttribute('aria-expanded', 'false');
+        }
+      });
+    });
+  }
+
+  /**
+   * Initialize Bootstrap tooltips for nav links
+   * Shows link title on hover when labels are hidden (992px-1199px)
+   */
+  function setupNavTooltips() {
+    const navLinks = document.querySelectorAll('#bdNavbar .nav-link[title]');
+    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 }
+        });
+      }
+    });
+  }
+
+  // Initialize
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', () => {
+      initNavigation();
+      setupNavTooltips();
+    });
+  } else {
+    initNavigation();
+    setupNavTooltips();
+  }
+
+})();