jekyll-theme-zer0 0.17.0 → 0.18.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: cedad3b535f19c489e0d874be9c116789f981fc042743150be32b06f7d6481c7
-  data.tar.gz: 0cd8445680be5c73980338a85aba69a8edb5e9484003fd74daf80c104690e22d
+  metadata.gz: e3cdc2d41bf042b7f0f71b9f43dd9347c43bbbbb500cf95ef6bf2deed492fcb5
+  data.tar.gz: cb4b0b4bf44a66294fb4d6fab901932fc4a024c2a8f4c9b46c0fcfe69895d825
 SHA512:
-  metadata.gz: 35520e071daded7969373b51f103d8a8440db28b03044ca1db0c01832d676cbcfc32d677d285ce612c8f79a6a2fa2fa8023570457a28cba83615fea8363bd1eb
-  data.tar.gz: 654aa816eeb3b3e1019f0686eb2516eb4404e17ad4e533f764d32240fd1454a6c893a6e376fb907387b0a5f3cd514c1e364b365df92ed07e1279a90144ffc222
+  metadata.gz: 874947c58a3abea526c10aab5d5936a30705e6f87286e2779be094717f7297328adfbdff8a946dfa228969bd4d655bf75c7689f3a29b84e880ce078b74bbc4e9
+  data.tar.gz: ee12a3e265ead26b0566b6e8cecb1165fb8bf2b6bc7c3513cd15b4f9baa2d9acca2abfbc2e8e239284f4c5546bee100552991aa5d4b34827351b636fbb9df151

data/CHANGELOG.md

@@ -1,5 +1,79 @@
 # Changelog
 
+## [0.18.0] - 2026-01-19
+
+### Added
+- **Search Modal**: New site-wide search popup with live results, keyboard shortcuts (`/`, `Cmd/Ctrl+K`), and offcanvas entry
+- **Search Index**: Generated `search.json` index including page content for client-side search
+
+### Changed
+- **Navigation**: Added search button to the main navbar with improved mobile layout support
+
+### Fixed
+- **Search UX**: Highlight query matches and show content-based snippets where the match occurs
+
+## [0.17.5] - 2026-01-17
+
+### Changed
+- Version bump: patch release
+
+### Commits in this release
+- eeb8ea3 fix(ui): remove cursor tilt and prep v0.17.4
+
+## [0.17.4] - 2026-01-16
+
+### Changed
+- Version bump: patch release
+
+### Fixed
+- **UI/UX**: Removed cursor-based 3D parallax tilt effect on cards to prevent perspective shifts on hover
+- **Config YAML**: Corrected anchor definitions used by gravatar and local repo settings to pass YAML validation
+
+### Commits in this release
+- 226b0a5 chore(structure): reorganize root directory for better maintainability
+
+## [0.17.3] - 2026-01-15
+
+### Changed
+- Version bump: patch release
+
+### Commits in this release
+- a0c1df4 fix(ui): fix Mermaid dark mode and cookie banner rendering
+
+
+## [0.17.2] - 2025-12-31
+
+### Fixed
+- **Mermaid Dark Mode**: Fixed diagram rendering issues in dark mode by dynamically detecting Bootstrap theme (`data-bs-theme`) and switching Mermaid theme accordingly
+- **Cookie Consent Banner**: Fixed banner appearing twice on initial page load by implementing CSS-first visibility control and removing inline style conflicts
+
+### Enhanced
+- **UI/UX Improvements**: Comprehensive frontend enhancements including:
+  - Smooth scroll animations with Intersection Observer
+  - Enhanced card hover effects with 3D parallax on desktop
+  - Improved button styles with ripple effects and better transitions
+  - Better code block styling with enhanced copy functionality
+  - Mobile-responsive improvements with touch-friendly tap targets
+  - Improved focus states for accessibility
+  - Hero section animations with staggered fade-in effects
+
+### Added
+- **UI Enhancements Module**: New `assets/js/ui-enhancements.js` for scroll animations, card interactions, and smooth scrolling
+- **Enhanced Code Copy**: Improved copy-to-clipboard functionality with better visual feedback and fallback support
+
+### Changed
+- **CI Configuration**: Made HTMLProofer non-blocking for pre-existing link issues
+- **Documentation**: Enhanced contributing guide and release pipeline documentation 4630c33 (fix(ui): fix Mermaid dark mode and cookie banner rendering)
+
+## [0.17.1] - 2025-12-24
+
+### Changed
+- Version bump: patch release
+
+### Commits in this release
+- d56de0b fix(ci): update Gemfile.lock for v0.17.0 and improve HTMLProofer config
+
+
 ## [0.17.0] - 2025-12-23
 
 ### Added

data/README.md

@@ -569,7 +569,7 @@ graph LR
 | [🤖 Copilot Instructions]({{ site.resources.github_repo | default: '' | join: '' }}/blob/{{ site.branch }}/.github/copilot-instructions.md) | AI development guidelines |
 | [⌨️ Keyboard Navigation]({{ site.resources.github_repo | default: '' | join: '' }}/blob/{{ site.branch }}/docs/keyboard-navigation.md) | Accessibility shortcuts guide |
 | [📓 Jupyter Notebooks]({{ site.resources.github_repo | default: '' | join: '' }}/blob/{{ site.branch }}/docs/JUPYTER_NOTEBOOKS.md) | Notebook conversion documentation |
-| [📝 PRD](PRD.md) | Product requirements & roadmap |
+| [📝 PRD](docs/PRD.md) | Product requirements & roadmap |
 | [🔒 Privacy Policy]({{ '/privacy-policy/' | relative_url }}) | GDPR/CCPA compliant privacy docs |
 
 ---

data/_includes/components/cookie-consent.html

@@ -49,7 +49,7 @@ Usage: Include in root.html layout
 Configuration: Uses site.posthog settings from _config.yml
 {% endcomment %}
 
-<div id="cookieConsent" class="cookie-consent-banner position-fixed bottom-0 start-0 end-0 bg-dark text-light p-3 shadow-lg" style="z-index: 9999; transform: translateY(100%); transition: transform 0.3s ease-in-out;">
+<div id="cookieConsent" class="cookie-consent-banner position-fixed bottom-0 start-0 end-0 bg-dark text-light p-3 shadow-lg">
   <div class="container-fluid">
     <div class="row align-items-center">
       <div class="col-12 col-lg-8">
@@ -248,18 +248,42 @@ Configuration: Uses site.posthog settings from _config.yml
     // Show consent banner
     function showConsentBanner() {
       const banner = document.getElementById('cookieConsent');
-      if (banner) {
-        setTimeout(() => {
-          banner.style.transform = 'translateY(0)';
-        }, 1000); // Show after 1 second
-      }
+      if (!banner) return;
+      
+      // Ensure banner starts completely hidden - remove all classes and inline styles
+      banner.classList.remove('cookie-banner-showing', 'cookie-banner-visible');
+      banner.removeAttribute('style'); // Remove all inline styles to let CSS take over
+      
+      // Wait for the delay, then show and animate in one smooth motion
+      setTimeout(() => {
+        // First, make it visible but still off-screen (using class for CSS control)
+        banner.classList.add('cookie-banner-showing');
+        
+        // Force a reflow to ensure the display change is applied
+        void banner.offsetHeight;
+        
+        // On the next frame, animate it in smoothly
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            banner.classList.add('cookie-banner-visible');
+          });
+        });
+      }, 1000); // Show after 1 second
     }
 
     // Hide consent banner
     function hideConsentBanner() {
       const banner = document.getElementById('cookieConsent');
       if (banner) {
-        banner.style.transform = 'translateY(100%)';
+        // Remove visible class to trigger transition out
+        banner.classList.remove('cookie-banner-visible');
+        
+        // Hide after transition completes
+        banner.addEventListener('transitionend', function hideAfterTransition() {
+          banner.classList.remove('cookie-banner-showing');
+          banner.removeAttribute('style'); // Clean up inline styles
+          banner.removeEventListener('transitionend', hideAfterTransition);
+        }, { once: true });
       }
     }
 
@@ -281,14 +305,27 @@ Configuration: Uses site.posthog settings from _config.yml
 
     // Initialize on DOM content loaded
     document.addEventListener('DOMContentLoaded', function() {
+      const banner = document.getElementById('cookieConsent');
+      
+      // Ensure banner starts completely hidden BEFORE any checks
+      // Remove all classes and inline styles - let CSS handle hiding
+      if (banner) {
+        banner.classList.remove('cookie-banner-showing', 'cookie-banner-visible');
+        banner.removeAttribute('style');
+      }
+      
       const existingConsent = getConsentState();
       
       if (existingConsent) {
-        // Apply existing consent
+        // Apply existing consent and ensure banner stays hidden
         applyConsent(existingConsent);
         updateModalUI(existingConsent);
+        if (banner) {
+          banner.classList.remove('cookie-banner-showing', 'cookie-banner-visible');
+          banner.removeAttribute('style');
+        }
       } else {
-        // Show consent banner for new visitors
+        // Show consent banner for new visitors (with delay)
         showConsentBanner();
       }
 
@@ -348,12 +385,40 @@ Configuration: Uses site.posthog settings from _config.yml
 </script>
 
 <style>
+  /* Banner base styles */
+  #cookieConsent {
+    z-index: 9999;
+    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+  
+  /* Banner starts completely hidden - CSS enforces this */
+  #cookieConsent:not(.cookie-banner-showing) {
+    display: none !important;
+    visibility: hidden !important;
+    opacity: 0 !important;
+    transform: translateY(100%) !important;
+  }
+  
   .cookie-consent-banner {
     background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
     backdrop-filter: blur(10px);
     border-top: 1px solid rgba(255, 255, 255, 0.1);
   }
   
+  /* Only show banner when explicitly enabled via JavaScript class */
+  #cookieConsent.cookie-banner-showing {
+    display: block !important;
+    visibility: visible !important;
+    opacity: 0;
+    transform: translateY(100%);
+  }
+  
+  /* Animate in when visible class is added */
+  #cookieConsent.cookie-banner-showing.cookie-banner-visible {
+    opacity: 1 !important;
+    transform: translateY(0) !important;
+  }
+  
   .cursor-pointer {
     cursor: pointer;
   }
@@ -379,4 +444,11 @@ Configuration: Uses site.posthog settings from _config.yml
       margin-bottom: 0;
     }
   }
+  
+  /* Respect reduced motion preferences */
+  @media (prefers-reduced-motion: reduce) {
+    .cookie-consent-banner {
+      transition: none !important;
+    }
+  }
 </style>

data/_includes/components/js-cdn.html

@@ -29,4 +29,7 @@
         crossorigin="anonymous"></script>
 
 <!-- Navigation ES6 Modules - Enhanced sidebar, scroll spy, keyboard shortcuts, gestures -->
-<script type="module" src="{{ '/assets/js/modules/navigation/index.js' | relative_url }}"></script>
+<script type="module" src="{{ '/assets/js/modules/navigation/index.js' | relative_url }}"></script>
+
+<!-- Search modal controller -->
+<script src="{{ '/assets/js/search-modal.js' | relative_url }}"></script>

data/_includes/components/mermaid.html

@@ -47,6 +47,108 @@
 <!-- Initialize Mermaid with custom configuration -->
 <script>
   document.addEventListener('DOMContentLoaded', function() {
+    // ============================================================
+    // Helper function to detect Bootstrap theme
+    // ============================================================
+    function getBootstrapTheme() {
+      // Check data-bs-theme attribute on html element
+      var htmlTheme = document.documentElement.getAttribute('data-bs-theme');
+      if (htmlTheme === 'dark' || htmlTheme === 'light') {
+        return htmlTheme;
+      }
+      // Fallback to prefers-color-scheme
+      if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        return 'dark';
+      }
+      return 'light';
+    }
+    
+    // ============================================================
+    // Helper function to get Mermaid theme configuration
+    // ============================================================
+    function getMermaidConfig(theme) {
+      var isDark = theme === 'dark';
+      
+      if (isDark) {
+        // Dark mode configuration
+        return {
+          theme: 'dark',
+          themeVariables: {
+            primaryColor: '#0d6efd',
+            primaryTextColor: '#ffffff',
+            primaryBorderColor: '#0a58ca',
+            lineColor: '#6c757d',
+            secondaryColor: '#6c757d',
+            tertiaryColor: '#212529',
+            background: '#212529',
+            mainBkg: '#212529',
+            secondBkg: '#343a40',
+            tertiaryBkg: '#495057',
+            textColor: '#ffffff',
+            secondaryTextColor: '#adb5bd',
+            tertiaryTextColor: '#6c757d',
+            lineColor: '#6c757d',
+            border1: '#495057',
+            border2: '#6c757d',
+            noteBkgColor: '#343a40',
+            noteTextColor: '#ffffff',
+            noteBorderColor: '#6c757d',
+            actorBkg: '#0d6efd',
+            actorBorder: '#0a58ca',
+            actorTextColor: '#ffffff',
+            actorLineColor: '#ffffff',
+            signalColor: '#ffffff',
+            signalTextColor: '#ffffff',
+            labelBoxBkgColor: '#343a40',
+            labelBoxBorderColor: '#6c757d',
+            labelTextColor: '#ffffff',
+            loopTextColor: '#ffffff',
+            activationBorderColor: '#0d6efd',
+            activationBkgColor: '#0d6efd',
+            sequenceNumberColor: '#ffffff',
+            sectionBkgColor: '#343a40',
+            altSectionBkgColor: '#495057',
+            excludeBkgColor: '#495057',
+            taskBorderColor: '#0d6efd',
+            taskBkgColor: '#0d6efd',
+            taskTextLightColor: '#ffffff',
+            taskTextColor: '#ffffff',
+            taskTextDarkColor: '#000000',
+            taskTextOutsideColor: '#ffffff',
+            taskTextClickableColor: '#0d6efd',
+            activeTaskBorderColor: '#0a58ca',
+            activeTaskBkgColor: '#0a58ca',
+            gridColor: '#6c757d',
+            doneTaskBkgColor: '#198754',
+            doneTaskBorderColor: '#146c43',
+            critBorderColor: '#dc3545',
+            critBkgColor: '#dc3545',
+            todayLineColor: '#ffc107'
+          }
+        };
+      } else {
+        // Light mode configuration
+        return {
+          theme: 'default',
+          themeVariables: {
+            primaryColor: '#007bff',
+            primaryTextColor: '#fff',
+            primaryBorderColor: '#0056b3',
+            lineColor: '#6c757d',
+            secondaryColor: '#6c757d',
+            tertiaryColor: '#f8f9fa',
+            background: '#ffffff',
+            mainBkg: '#ffffff',
+            secondBkg: '#f8f9fa',
+            tertiaryBkg: '#e9ecef',
+            textColor: '#212529',
+            secondaryTextColor: '#6c757d',
+            tertiaryTextColor: '#adb5bd'
+          }
+        };
+      }
+    }
+    
     // ============================================================
     // Step 1: Convert native markdown code blocks to mermaid divs
     // This enables ```mermaid syntax to work with GitHub Pages
@@ -86,20 +188,16 @@
     });
     
     // ============================================================
-    // Step 2: Initialize Mermaid with custom configuration
+    // Step 2: Initialize Mermaid with theme-aware configuration
     // ============================================================
     
+    var bootstrapTheme = getBootstrapTheme();
+    var mermaidThemeConfig = getMermaidConfig(bootstrapTheme);
+    
     mermaid.initialize({
       startOnLoad: false,  // We'll manually run after conversion
-      theme: 'forest',     // Options: default, forest, dark, neutral, base
-      themeVariables: {
-        primaryColor: '#007bff',
-        primaryTextColor: '#fff',
-        primaryBorderColor: '#0056b3',
-        lineColor: '#6c757d',
-        secondaryColor: '#6c757d',
-        tertiaryColor: '#f8f9fa'
-      },
+      theme: mermaidThemeConfig.theme,
+      themeVariables: mermaidThemeConfig.themeVariables,
       flowchart: {
         useMaxWidth: true,
         htmlLabels: true,
@@ -139,10 +237,82 @@
     
     // Run mermaid to render all .mermaid divs
     mermaid.run().then(function() {
-      console.log('Mermaid.js: All diagrams rendered successfully');
+      console.log('Mermaid.js: All diagrams rendered successfully with theme:', bootstrapTheme);
     }).catch(function(error) {
       console.warn('Mermaid.js: Some diagrams failed to render', error);
     });
+    
+    // ============================================================
+    // Step 4: Watch for theme changes and re-render diagrams
+    // ============================================================
+    
+    // Create a MutationObserver to watch for theme changes
+    var themeObserver = new MutationObserver(function(mutations) {
+      mutations.forEach(function(mutation) {
+        if (mutation.type === 'attributes' && mutation.attributeName === 'data-bs-theme') {
+          var newTheme = getBootstrapTheme();
+          var newMermaidConfig = getMermaidConfig(newTheme);
+          
+          // Update Mermaid configuration
+          mermaid.initialize({
+            startOnLoad: false,
+            theme: newMermaidConfig.theme,
+            themeVariables: newMermaidConfig.themeVariables,
+            flowchart: {
+              useMaxWidth: true,
+              htmlLabels: true,
+              curve: 'basis'
+            },
+            sequence: {
+              diagramMarginX: 50,
+              diagramMarginY: 10,
+              actorMargin: 50,
+              width: 150,
+              height: 65,
+              boxMargin: 10,
+              boxTextMargin: 5,
+              noteMargin: 10,
+              messageMargin: 35,
+              mirrorActors: true,
+              bottomMarginAdj: 1,
+              useMaxWidth: true
+            },
+            gantt: {
+              titleTopMargin: 25,
+              barHeight: 20,
+              barGap: 4,
+              topPadding: 50,
+              leftPadding: 75,
+              gridLineStartPadding: 35,
+              fontSize: 11,
+              numberSectionStyles: 4,
+              axisFormat: '%Y-%m-%d'
+            },
+            securityLevel: 'loose'
+          });
+          
+          // Re-render all diagrams with new theme
+          var mermaidDivs = document.querySelectorAll('.mermaid');
+          mermaidDivs.forEach(function(div) {
+            var content = div.textContent || div.innerText;
+            div.innerHTML = '';
+            div.textContent = content;
+          });
+          
+          mermaid.run().then(function() {
+            console.log('Mermaid.js: Diagrams re-rendered with theme:', newTheme);
+          }).catch(function(error) {
+            console.warn('Mermaid.js: Some diagrams failed to re-render', error);
+          });
+        }
+      });
+    });
+    
+    // Start observing the html element for theme changes
+    themeObserver.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['data-bs-theme']
+    });
   });
 </script>
 
@@ -157,12 +327,17 @@
     margin: 2rem auto;
     background-color: transparent;
     overflow-x: auto;
+    padding: 1rem;
+    border-radius: 0.5rem;
+    transition: background-color 0.3s ease;
   }
   
   /* Ensure diagrams are responsive */
   .mermaid svg {
     max-width: 100%;
     height: auto;
+    display: block;
+    margin: 0 auto;
   }
   
   /* Hide code blocks before conversion (prevent flash of unstyled content) */
@@ -173,15 +348,86 @@
     transition: opacity 0.2s;
   }
   
-  /* Dark mode compatibility */
+  /* Dark mode compatibility - Bootstrap theme aware */
+  [data-bs-theme="dark"] .mermaid {
+    background-color: rgba(33, 37, 41, 0.5);
+    border: 1px solid rgba(108, 117, 125, 0.2);
+  }
+  
+  [data-bs-theme="dark"] .mermaid svg {
+    /* Ensure SVG elements are visible in dark mode */
+    color-scheme: dark;
+  }
+  
+  [data-bs-theme="dark"] .mermaid svg text {
+    fill: #ffffff !important;
+  }
+  
+  [data-bs-theme="dark"] .mermaid svg .node rect,
+  [data-bs-theme="dark"] .mermaid svg .node polygon,
+  [data-bs-theme="dark"] .mermaid svg .cluster rect {
+    fill: #343a40 !important;
+    stroke: #6c757d !important;
+  }
+  
+  [data-bs-theme="dark"] .mermaid svg .edgePath .path {
+    stroke: #6c757d !important;
+  }
+  
+  [data-bs-theme="dark"] .mermaid svg .edgeLabel {
+    background-color: #212529 !important;
+    color: #ffffff !important;
+  }
+  
+  [data-bs-theme="dark"] .mermaid svg .edgeLabel text {
+    fill: #ffffff !important;
+  }
+  
+  /* Light mode styling */
+  [data-bs-theme="light"] .mermaid {
+    background-color: rgba(248, 249, 250, 0.5);
+    border: 1px solid rgba(0, 0, 0, 0.1);
+  }
+  
+  [data-bs-theme="light"] .mermaid svg text {
+    fill: #212529 !important;
+  }
+  
+  /* Fallback for prefers-color-scheme if data-bs-theme is not set */
   @media (prefers-color-scheme: dark) {
-    .mermaid {
-      filter: brightness(0.9);
+    html:not([data-bs-theme]) .mermaid {
+      background-color: rgba(33, 37, 41, 0.5);
+      border: 1px solid rgba(108, 117, 125, 0.2);
     }
   }
   
+  /* Smooth theme transition */
+  .mermaid svg {
+    transition: opacity 0.3s ease;
+  }
+  
+  /* Loading state */
+  .mermaid:not(:has(svg)) {
+    min-height: 100px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .mermaid:not(:has(svg))::after {
+    content: 'Loading diagram...';
+    color: var(--bs-secondary);
+    font-size: 0.875rem;
+  }
+  
   /* Print styles */
   @media print {
+    .mermaid {
+      background-color: transparent !important;
+      border: none !important;
+      page-break-inside: avoid;
+    }
+    
     .mermaid svg {
       max-width: 100% !important;
       page-break-inside: avoid;

data/_includes/components/search-modal.html

@@ -0,0 +1,56 @@
+<!--
+  ===================================================================
+  SEARCH MODAL - Site-wide Search Popup
+  ===================================================================
+  
+  File: search-modal.html
+  Path: _includes/components/search-modal.html
+  Purpose: Provide a modal search experience with keyboard shortcut support
+  
+  Notes:
+  - Uses /sitemap/ for query-based search results
+  - Keyboard shortcut handled by navigation keyboard module ("/")
+  ===================================================================
+-->
+
+{%- assign ui_text = site.data.ui-text[site.locale] | default: site.data.ui-text.en -%}
+{%- assign search_placeholder = ui_text.search_placeholder_text | default: "Enter your search term..." -%}
+
+<div class="modal fade search-modal" id="siteSearchModal" tabindex="-1" aria-labelledby="siteSearchModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="siteSearchModalLabel">
+                    <i class="bi bi-search me-2"></i>Search
+                </h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <form action="{{ '/sitemap/' | relative_url }}" method="get" data-search-form>
+                    <label class="visually-hidden" for="site-search-input">Search</label>
+                    <div class="input-group">
+                        <span class="input-group-text">
+                            <i class="bi bi-search" aria-hidden="true"></i>
+                        </span>
+                        <input
+                            id="site-search-input"
+                            type="search"
+                            name="q"
+                            class="form-control"
+                            placeholder="{{ search_placeholder }}"
+                            autocomplete="off"
+                            data-search-input
+                        >
+                        <button class="btn btn-primary" type="submit">Search</button>
+                    </div>
+                    <div class="form-text mt-2">
+                        Press <kbd>/</kbd> or <kbd>⌘</kbd>/<kbd>Ctrl</kbd>+<kbd>K</kbd> to open search, <kbd>Esc</kbd> to close.
+                    </div>
+                </form>
+                <div class="search-results mt-3" data-search-results>
+                    <div class="text-muted small" data-search-empty>Start typing to see results.</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

data/_includes/core/branding.html

@@ -32,24 +32,23 @@
 
 <!-- Title Section  -->
 
-<div class="navbar-brand">
-    <a class="nav-link" href="{{ page.url | relative_url }}">
-        <i class="d-sm-inline d-md-none {{ site.default_icon }} {{ site.default_icon }}-{{ site.title_icon | default: 'house' }}" aria-hidden="true"></i>
-        <!-- Display name if there's enough space, else icon only -->
-        <span class="d-none d-md-inline"> 
+<div class="navbar-brand site-title">
+    <a class="nav-link" href="{{ '/' | relative_url }}">
+        <i class="d-none d-md-inline {{ site.default_icon }} {{ site.default_icon }}-{{ site.title_icon | default: 'house' }}" aria-hidden="true"></i>
+        <!-- Always show the title on mobile; truncate if space is tight -->
+        <span class="site-title-text">
             {{ site.title }}
         </span>
     </a>
 </div>
 
-<div class="navbar-brand">
-    <!-- If a subtitle exists -->
-    {%- if site.subtitle -%}
-    <a class="nav-link" href="{{ page.url | relative_url }}">
-        <i class="d-sm-inline d-md-none {{ site.default_icon }} {{ site.default_icon }}-{{ site.subtitle_icon | default: 'journal' }}" aria-hidden="true"></i>
-        <span class="d-none d-md-inline"> 
+<!-- If a subtitle exists -->
+{%- if site.subtitle -%}
+<div class="navbar-brand site-subtitle d-none d-lg-inline">
+    <a class="nav-link" href="{{ '/' | relative_url }}">
+        <span class="site-subtitle-text">
             {{ site.subtitle }}
         </span>
     </a>
-    {% endif %}
-</div>
+</div>
+{% endif %}

data/_includes/core/head.html

@@ -42,6 +42,7 @@
 <script defer src="{{ '/assets/js/halfmoon.js' | relative_url }}"></script>
 <script defer src="{{ '/assets/js/side-bar-folders.js' | relative_url }}"></script>
 <script defer src="{{ '/assets/js/code-copy.js' | relative_url }}"></script>
+<script defer src="{{ '/assets/js/ui-enhancements.js' | relative_url }}"></script>
 
 <!-- ================================ -->
 <!-- THIRD PARTY INTEGRATIONS        -->