jekyll-theme-zer0 0.22.19 → 0.22.20

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ba91ba02a96ff1b026fe82adedbebd79b476a48bc3534ff7b1799ebbf9e593d7
-  data.tar.gz: 4d1470d33ae3e6d41def0fbd22e05c07bf9597efa9f5c5e655f3dd61088896a4
+  metadata.gz: 980b31bacaacb76414bff954016a5a98c83e175ec3ef2361e15e1ec175718073
+  data.tar.gz: a2b223a9ff562ce39b12a3106ca343c62c0d76060d50550576ee853504ece84f
 SHA512:
-  metadata.gz: f643278addd297e92c075dc79f9802daf61bc9ca2bb4c5cde4dec6842da25895e0c9ea75f597cdc718fbc5dcc4b078f752f3e32ae310b3ca884d9fd82fc1c1d9
-  data.tar.gz: e2318d7d03c184b9a053d59c2130b818486d1cb20ce6938ec38e88e0b2459bee62108abfa223941857e4707f32313b5fefa5bef01682c4800f3a9c25f112159f
+  metadata.gz: 16db6007e716e176b0188981a391b8aafab303f646c900a110e5386ea68eb6aeea8fcbb542d5529df1309bcf9518a8adbbcc47eaf85b2625b42eadce9544a121
+  data.tar.gz: a2ea2ab6d1caf59e13a9d14e80e4ecc0870ff13c80f5eefa703de8416f289e9f382c23f9f34cfdddba08ee8186f3b3fcb73fd995bfaa559b01b032add3e56b90

data/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## [0.22.20] - 2026-04-19
+
+### Changed
+- Version bump: patch release
+
+### Commits in this release
+- f5d5e97 fix(ui): UI/UX fixes — navbar dropdown, landing hero, cookie banner, nanobar, footer (#72)
+
+
 ## [0.22.19] - 2026-04-18
 
 ### Changed

data/README.md

@@ -2,7 +2,7 @@
 title: zer0-mistakes
 sub-title: Jekyll Theme
 description: GitHub Pages compatible Jekyll theme with Bootstrap 5.3, featuring automated installation and comprehensive documentation.
-version: 0.22.19
+version: 0.22.20
 layout: landing
 tags:
   - jekyll
@@ -14,7 +14,7 @@ categories:
   - docker
   - bootstrap
 created: 2024-02-10T23:51:11.480Z
-lastmod: 2026-04-18T21:22:34.000Z
+lastmod: 2026-04-19T16:29:09.000Z
 draft: false
 permalink: /
 slug: zer0
@@ -789,7 +789,7 @@ git push origin feature/awesome-feature
 
 | Metric | Value |
 |--------|-------|
-| **Current Version** | 0.22.19 ([RubyGems](https://rubygems.org/gems/jekyll-theme-zer0), [CHANGELOG](/CHANGELOG)) |
+| **Current Version** | 0.22.20 ([RubyGems](https://rubygems.org/gems/jekyll-theme-zer0), [CHANGELOG](/CHANGELOG)) |
 | **Documented Features** | 43 ([Feature Registry](https://github.com/bamr87/zer0-mistakes/blob/main/_data/features.yml)) |
 | **Setup Time** | 2-5 minutes ([install.sh benchmarks](https://github.com/bamr87/zer0-mistakes/blob/main/install.sh)) |
 | **Documentation Pages** | 70+ ([browse docs](/pages/)) |
@@ -832,6 +832,6 @@ Built with these amazing technologies:
 
 **Built with ❤️ for the Jekyll community**
 
-**v0.22.19** • [Changelog](CHANGELOG.md) • [License](LICENSE) • [Contributing](CONTRIBUTING.md)
+**v0.22.20** • [Changelog](CHANGELOG.md) • [License](LICENSE) • [Contributing](CONTRIBUTING.md)
 
 

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 py-3 px-3 shadow-lg">
+<div id="cookieConsent" class="cookie-consent-banner position-fixed bottom-0 start-0 end-0 bg-dark text-light py-3 px-3 shadow-lg" hidden>
   <div class="container-xl px-3 px-md-4">
     <div class="row align-items-center g-2">
       <div class="col-12 col-lg-8">
@@ -249,42 +249,41 @@ Configuration: Uses site.posthog settings from _config.yml
     function showConsentBanner() {
       const banner = document.getElementById('cookieConsent');
       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
+
+      // Reveal the element (CSS keeps it translated off-screen + opacity:0).
+      banner.hidden = false;
+      banner.classList.remove('cookie-banner-visible');
+
       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
+        // Force reflow so the next class change actually animates.
         void banner.offsetHeight;
-        
-        // On the next frame, animate it in smoothly
-        requestAnimationFrame(() => {
-          requestAnimationFrame(() => {
-            banner.classList.add('cookie-banner-visible');
-          });
-        });
-      }, 1000); // Show after 1 second
+        banner.classList.add('cookie-banner-visible');
+      }, 1000);
     }
 
     // Hide consent banner
     function hideConsentBanner() {
       const banner = document.getElementById('cookieConsent');
-      if (banner) {
-        // 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 });
-      }
+      if (!banner) return;
+
+      banner.classList.remove('cookie-banner-visible');
+
+      let done = false;
+      const finish = () => {
+        if (done) return;
+        done = true;
+        banner.hidden = true;
+        banner.removeEventListener('transitionend', onEnd);
+      };
+      const onEnd = (e) => {
+        if (e.target !== banner) return;
+        if (e.propertyName !== 'transform' && e.propertyName !== 'opacity') return;
+        finish();
+      };
+      banner.addEventListener('transitionend', onEnd);
+      // Fallback in case transitionend never fires (reduced-motion, interrupted transition,
+      // background tab, etc.). Slightly longer than the longest CSS transition (0.4s).
+      setTimeout(finish, 500);
     }
 
     // Update modal UI with current preferences
@@ -306,26 +305,13 @@ 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 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 (with delay)
+        // Banner already starts hidden via the `hidden` attribute — nothing to do.
+      } else if (banner) {
         showConsentBanner();
       }
 
@@ -385,70 +371,19 @@ 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;
-  }
-  
+  /* Modal-only helpers; banner styling lives in _sass/custom.scss */
   .cursor-pointer {
     cursor: pointer;
   }
-  
+
   .cookie-category {
     border: 1px solid #dee2e6;
     border-radius: 8px;
     padding: 1rem;
   }
-  
+
   .form-check-input:checked {
     background-color: var(--bs-success);
     border-color: var(--bs-success);
   }
-  
-  @media (max-width: 768px) {
-    .cookie-consent-banner .btn {
-      width: 100%;
-      margin-bottom: 0.5rem;
-    }
-    
-    .cookie-consent-banner .btn:last-child {
-      margin-bottom: 0;
-    }
-  }
-  
-  /* Respect reduced motion preferences */
-  @media (prefers-reduced-motion: reduce) {
-    .cookie-consent-banner {
-      transition: none !important;
-    }
-  }
 </style>

data/_includes/components/nanobar.html

@@ -0,0 +1,117 @@
+<!--
+  ===================================================================
+  NANOBAR - Config-Driven Page Loading Progress Bar
+  ===================================================================
+
+  File: nanobar.html
+  Path: _includes/components/nanobar.html
+  Purpose: Visual loading indicator shown on every page load,
+           fully configurable via site.nanobar in _config.yml
+
+  Template Logic:
+  - Conditionally renders only when site.nanobar.enabled != false
+  - Injects CSS custom properties from _config.yml values
+  - Loads nanobar.min.js (library) and nanobar-init.js (initializer)
+  - Passes config to JS via window.zer0Nanobar object
+
+  Dependencies:
+  - assets/js/nanobar.min.js  — third-party Nanobar library
+  - assets/js/nanobar-init.js — theme initializer script
+  - _includes/core/header.html — #top-progress-target mount point
+    (rendered only when position == "navbar")
+
+  Configuration (_config.yml → nanobar):
+    enabled       : true | false          # master switch
+    color         : CSS color value       # bar fill colour
+    background    : CSS color value       # track background
+    height        : CSS length            # bar thickness
+    position      : top | bottom | navbar # placement mode
+    z_index       : integer               # stacking order
+    steps         : [int, …]              # progress percentages
+    step_delay_ms : integer               # ms between steps
+    classname     : string                # CSS class on wrapper
+    id            : string                # DOM id
+    target        : CSS selector | ""     # explicit mount target
+
+  Performance Notes:
+  - Both scripts loaded with `defer` to avoid blocking rendering
+  - CSS custom properties keep the inline <style> minimal
+  - Library injects its own baseline CSS; theme overrides via
+    specificity and !important where needed
+
+  Library: https://github.com/jacoborus/nanobar
+  ===================================================================
+-->
+
+{%- assign nb = site.nanobar | default: empty -%}
+{%- if nb == empty or nb.enabled != false -%}
+
+{%- comment -%} ── Resolve config with safe defaults ── {%- endcomment -%}
+{%- assign nb_color      = nb.color         | default: "var(--bs-primary)" -%}
+{%- assign nb_bg         = nb.background    | default: "transparent" -%}
+{%- assign nb_height     = nb.height        | default: "3px" -%}
+{%- assign nb_position   = nb.position      | default: "top" -%}
+{%- assign nb_zindex     = nb.z_index       | default: 9999 -%}
+{%- assign nb_classname  = nb.classname     | default: "nanobar" -%}
+{%- assign nb_id         = nb.id            | default: "top-progress-bar" -%}
+{%- assign nb_target     = nb.target        | default: "" -%}
+{%- assign nb_step_delay = nb.step_delay_ms | default: 0 -%}
+{%- assign nb_steps      = nb.steps -%}
+{%- if nb_steps == nil or nb_steps == empty -%}
+  {%- assign nb_steps = "30,76,100" | split: "," -%}
+{%- endif -%}
+
+<!-- ── Nanobar theme CSS (config-driven custom properties) ── -->
+<style id="nanobar-theme">
+  :root {
+    --nanobar-color:  {{ nb_color }};
+    --nanobar-bg:     {{ nb_bg }};
+    --nanobar-height: {{ nb_height }};
+    --nanobar-z:      {{ nb_zindex }};
+  }
+
+  /* Override library defaults with theme values */
+  .{{ nb_classname }} {
+    height: var(--nanobar-height) !important;
+    background: var(--nanobar-bg);
+    z-index: var(--nanobar-z);
+  }
+  .{{ nb_classname }} .bar {
+    background: var(--nanobar-color) !important;
+    transition: width .2s ease, height .3s ease;
+  }
+
+  /* Position modifiers */
+  .{{ nb_classname }}--bottom { top: auto !important; bottom: 0; }
+
+  /* Navbar mount: inline strip under the header */
+  .nanobar-mount {
+    position: relative;
+    width: 100%;
+    height: var(--nanobar-height);
+    overflow: hidden;
+  }
+  .nanobar-mount > .{{ nb_classname }}--navbar {
+    position: absolute !important;
+    top: 0; left: 0; right: 0;
+    width: 100%;
+  }
+</style>
+
+<!-- ── Nanobar scripts ── -->
+<script defer src="{{ '/assets/js/nanobar.min.js' | relative_url }}"></script>
+<script defer src="{{ '/assets/js/nanobar-init.js' | relative_url }}"></script>
+
+<!-- ── Bridge _config.yml values to JS ── -->
+<script>
+  window.zer0Nanobar = {
+    classname: {{ nb_classname | jsonify }},
+    id:        {{ nb_id        | jsonify }},
+    position:  {{ nb_position  | jsonify }},
+    target:    {{ nb_target    | jsonify }},
+    steps:     [{% for s in nb_steps %}{{ s | strip | plus: 0 }}{% unless forloop.last %},{% endunless %}{% endfor %}],
+    stepDelay: {{ nb_step_delay | plus: 0 }}
+  };
+</script>
+
+{%- endif -%}

data/_includes/core/footer.html

@@ -30,10 +30,10 @@
   ===================================================================
 -->
 
-<footer class="bd-footer container-xl border-top" role="contentinfo">
+<footer class="bd-footer border-top" role="contentinfo">
   <!-- Powered by Row -->
-  <div class="container row my-3">
-    <ul class="nav col-sm justify-content-end list-unstyled d-flex align-items-center" aria-label="Powered by technologies">
+  <div class="container-xl my-3">
+    <ul class="nav justify-content-end list-unstyled d-flex align-items-center flex-wrap" aria-label="Powered by technologies">
       <span class="align-start">
         &copy; {{ site.time | date: "%Y" }} {{ site.name | default: site.title }} — Powered by:
       </span>
@@ -67,10 +67,9 @@
     </ul>
   </div>
 
-  <!-- Branding and Navigation Block -->
-  <div class="container row">
-    <div class="container bg-dark text-light py-5 rounded-3">
-      <div class="container">
+  <!-- Branding and Navigation Block — full-width dark background -->
+  <div class="bg-dark text-light py-5">
+    <div class="container-xl">
         <!-- Top: Site info + Quick Links + Social -->
         <div class="row mb-4">
           <!-- Site Info -->
@@ -163,10 +162,9 @@
           </div>
         </div>
 
-        <!-- Bottom: Copyright -->
-        <div class="text-center">
-          <p class="mb-0">&copy; {{ site.time | date: "%Y" }} {{ site.title | default: site.name }}. All Rights Reserved.</p>
-        </div>
+      <!-- Bottom: Copyright -->
+      <div class="text-center">
+        <p class="mb-0">&copy; {{ site.time | date: "%Y" }} {{ site.title | default: site.name }}. All Rights Reserved.</p>
       </div>
     </div>
   </div>

data/_includes/core/head.html

@@ -12,7 +12,7 @@
   - Loads critical JavaScript libraries before page render
   - Includes SEO optimization and social media meta tags
   - Configures third-party integrations (Analytics, MathJax)
-  - Sets up progress bar and UI enhancement scripts
+  - Sets up progress bar via components/nanobar.html include
   
   Dependencies:
   - seo.html: SEO meta tags and Open Graph data
@@ -22,7 +22,7 @@
   Performance Notes:
   - Scripts loaded in head for immediate availability
   - MathJax loaded asynchronously to prevent render blocking
-  - Nanobar provides visual loading feedback
+  - Nanobar provides visual loading feedback (see components/nanobar.html)
   ===================================================================
 -->
 
@@ -52,29 +52,8 @@
   {% include components/mermaid.html %}
 {% endif %}
 
-<!-- Nano Progress Bar - Visual loading indicator -->
-<script defer src="{{'/assets/js/nanobar.min.js' | relative_url }}"></script>
-
-<!-- Progress Bar Initialization - Creates visual loading feedback -->
-<script>
-    // Wait for DOM to be ready before initializing Nanobar
-    document.addEventListener('DOMContentLoaded', function() {
-        // Check if the progress bar element exists before initializing
-        var progressElement = document.getElementById('top-progress-bar');
-        if (progressElement) {
-            var options = {
-              classname: 'nanobar',
-              id: 'top-progress-bar'
-            };
-            var nanobar = new Nanobar(options);
-            nanobar.go( 30 );  // Initial loading state
-            nanobar.go( 76 );  // Partial completion
-            nanobar.go(100);   // Complete loading
-        } else {
-            console.warn('Progress bar element #top-progress-bar not found. Skipping Nanobar initialization.');
-        }
-    });
-</script>
+<!-- Nano Progress Bar - Visual loading indicator (config-driven) -->
+{% include components/nanobar.html %}
 
 <!-- MathJax - Mathematical notation rendering (async; bundled under assets/vendor) -->
 <script id="MathJax-script" async src="{{ '/assets/vendor/mathjax/es5/tex-mml-chtml.js' | relative_url }}"></script>

data/_includes/core/header.html

@@ -30,7 +30,10 @@
   - ARIA labels for screen readers
   - Focus management for offcanvas
   
-  TODO: Fix Nanobar progress bar positioning and animation
+  Nanobar:
+  - Configured via `site.nanobar.*` in _config.yml
+  - When `position: navbar`, the bar mounts inside `#top-progress-target` below
+  - Otherwise it floats fixed to the viewport (top or bottom)
   ===================================================================
 -->
 
@@ -48,15 +51,7 @@
     <!-- TOP NAVIGATION BAR              -->
     <!-- ================================ -->
     <div class="navbar navbar-expand-lg bg-body-tertiary flex-nowrap justify-content-center bottom-shadow">
-       
-        <!-- ========================== -->
-        <!-- PROGRESS BAR INDICATOR    -->
-        <!-- ========================== -->
-        <!-- Fixed position progress bar for page loading feedback -->
-        <div class="nanobar" id="top-progress-bar" style="position: fixed;" role="progressbar" aria-label="Page loading progress" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
-            <div class="bar"></div>
-        </div>
-        
+
         <!-- ========================== -->
         <!-- MAIN NAVIGATION CONTAINER -->
         <!-- ========================== -->
@@ -186,4 +181,15 @@
             </div>
         </nav>
     </div>
+
+    <!-- ========================== -->
+    <!-- PROGRESS BAR MOUNT POINT  -->
+    <!-- ========================== -->
+    <!-- Nanobar mounts here when site.nanobar.position == "navbar" so the bar
+         renders as a thin strip directly under the header. For "top" / "bottom"
+         the bar floats fixed to the viewport and no mount is needed. -->
+    {%- assign _nb_pos = site.nanobar.position | default: "top" -%}
+    {%- if site.nanobar.enabled != false and _nb_pos == "navbar" -%}
+    <div id="top-progress-target" class="nanobar-mount" aria-hidden="true"></div>
+    {%- endif -%}
 </header>

data/_includes/navigation/navbar.html

@@ -38,6 +38,7 @@
 
               {%- for link in nav_main -%}
                 {%- assign has_children = link.children and link.children.size > 0 -%}
+                {%- assign items_remaining = nav_main.size | minus: forloop.index -%}
 
                 {%- if has_children -%}
                     <li class="nav-item dropdown d-flex align-items-center nav-hover-dropdown" role="none">
@@ -69,7 +70,7 @@
                             <span class="visually-hidden">Toggle {{ link.title }} submenu</span>
                         </button>
 
-                        <ul class="dropdown-menu dropdown-menu-start" aria-labelledby="dropdown-{{ link.title | slugify }}" role="menu">
+                        <ul class="dropdown-menu {% if items_remaining < 2 %}dropdown-menu-end{% else %}dropdown-menu-start{% endif %}" aria-labelledby="dropdown-{{ link.title | slugify }}" role="menu">
                             {%- for child in link.children -%}
                                 <li role="none">
                                     <a

data/_layouts/landing.html

@@ -66,26 +66,32 @@ layout: root
                 </div>
             </div>
             <div class="col-lg-6 text-center order-2">
+                {%- comment -%}
+                  Inline `aspect-ratio` + `max-width` reserve the final box size BEFORE
+                  external CSS parses, eliminating the post-load "jerk" caused by the
+                  vendored Bootstrap `.ratio` class loading after first paint.
+                {%- endcomment -%}
                 {% if page.hero_image %}
-                <div class="landing-hero-media ratio ratio-4x3 mx-auto shadow-lg rounded overflow-hidden">
+                <div class="landing-hero-media mx-auto shadow-lg rounded overflow-hidden"
+                     style="aspect-ratio: 4 / 3; max-width: min(100%, 28rem); width: 100%;">
                     <img
                         src="{{ page.hero_image | relative_url }}"
                         alt="{{ page.title }}"
-                        class="w-100 h-100"
+                        class="landing-hero-img w-100 h-100"
                         width="800"
                         height="600"
                         loading="eager"
                         decoding="async"
                         fetchpriority="high"
-                        style="object-fit: contain;"
+                        onload="this.classList.add('is-loaded')"
+                        style="object-fit: contain; display: block;"
                     >
                 </div>
                 {% else %}
-                <div class="landing-hero-media ratio ratio-4x3 mx-auto shadow-lg rounded overflow-hidden">
-                    <div class="position-absolute top-0 start-0 w-100 h-100 d-flex flex-column align-items-center justify-content-center bg-secondary bg-opacity-25 text-body rounded">
-                        <i class="bi bi-code-square display-1"></i>
-                        <p class="mt-3 mb-0 px-3">Jekyll Theme</p>
-                    </div>
+                <div class="landing-hero-media mx-auto shadow-lg rounded overflow-hidden d-flex flex-column align-items-center justify-content-center bg-secondary bg-opacity-25 text-body"
+                     style="aspect-ratio: 4 / 3; max-width: min(100%, 28rem); width: 100%;">
+                    <i class="bi bi-code-square display-1"></i>
+                    <p class="mt-3 mb-0 px-3">Jekyll Theme</p>
                 </div>
                 {% endif %}
             </div>

data/_sass/core/_navbar.scss

@@ -367,6 +367,12 @@
     box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.175);
     border: 1px solid var(--bs-border-color-translucent);
   }
+
+  // Right-align dropdowns near the end of the nav to prevent overflow clipping
+  .nav-hover-dropdown > .dropdown-menu.dropdown-menu-end {
+    left: auto;
+    right: 0;
+  }
   
   // Smooth hover reveal animation
   .nav-hover-dropdown .dropdown-menu {

data/_sass/custom.scss

@@ -40,20 +40,33 @@ html, body {
     min-height: 50vh;
 }
 
-// Landing layout: stable hero media slot (ratio) + no reliance on scroll script for first paint
+// Landing layout: stable hero media slot (CSS aspect-ratio) + smooth image fade-in.
+// The inline `aspect-ratio` + `max-width` on .landing-hero-media in landing.html
+// reserve the box size before this stylesheet loads — these rules are progressive
+// enhancement on top of that.
 .landing-hero {
     .landing-hero-media {
         max-width: min(100%, 28rem);
+        // Subtle background while the image streams in so the box isn't a flash of
+        // empty colored space against the hero gradient.
+        background-color: rgba(255, 255, 255, 0.06);
     }
 
-    .landing-hero-media.ratio > img {
+    .landing-hero-img {
         object-position: center;
+        opacity: 0;
+        transition: opacity 0.45s ease-out;
+
+        &.is-loaded {
+            opacity: 1;
+        }
     }
 }
 
 @media (prefers-reduced-motion: reduce) {
-    .landing-hero .landing-hero-media {
+    .landing-hero .landing-hero-img {
         transition: none;
+        opacity: 1;
     }
 }
 
@@ -170,9 +183,51 @@ html, body {
     height: 56px;
 }
 
-// Cookie banner: above fixed navbar (1030), below offcanvas (1045) so drawers cover it
+// Cookie banner: above fixed navbar (1030), below offcanvas (1045) so drawers cover it.
+// Show/hide is driven by:
+//   - `[hidden]` attribute on initial render and after dismissal (no layout cost)
+//   - `.cookie-banner-visible` class to slide / fade into view
 .cookie-consent-banner {
     z-index: 1036;
+    background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
+    backdrop-filter: blur(10px);
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+
+    // Off-screen + transparent until JS adds .cookie-banner-visible.
+    // Using `transform` + `opacity` (and NOT `display: none`) keeps the transition smooth.
+    opacity: 0;
+    transform: translateY(100%);
+    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
+                opacity   0.35s cubic-bezier(0.4, 0, 0.2, 1);
+    will-change: transform, opacity;
+
+    // The `hidden` attribute (set in markup + after dismissal) removes the banner
+    // from the layout entirely so it can't intercept clicks while invisible.
+    &[hidden] {
+        display: none !important;
+    }
+
+    &.cookie-banner-visible {
+        opacity: 1;
+        transform: translateY(0);
+    }
+
+    @media (max-width: 768px) {
+        .btn {
+            width: 100%;
+            margin-bottom: 0.5rem;
+
+            &:last-child {
+                margin-bottom: 0;
+            }
+        }
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .cookie-consent-banner {
+        transition: none;
+    }
 }
 
 // Active TOC link highlighting

data/assets/js/nanobar-init.js

@@ -0,0 +1,63 @@
+/**
+ * Nanobar Initialization — config-driven page-load progress bar.
+ *
+ * Reads settings from `window.zer0Nanobar` (injected by the
+ * _includes/components/nanobar.html Liquid template) and instantiates the
+ * Nanobar library that was loaded via <script defer>.
+ *
+ * Placement modes (site.nanobar.position):
+ *   "top"    – fixed bar at the top of the viewport (default)
+ *   "bottom" – fixed bar at the bottom of the viewport
+ *   "navbar" – inline strip mounted inside #top-progress-target under header
+ *
+ * @see _config.yml  → nanobar section
+ * @see _includes/components/nanobar.html
+ * @see _includes/core/header.html → #top-progress-target mount point
+ */
+(function () {
+  'use strict';
+
+  document.addEventListener('DOMContentLoaded', function () {
+    if (typeof Nanobar !== 'function') { return; }
+
+    var cfg = window.zer0Nanobar || {};
+    var classname = cfg.classname || 'nanobar';
+
+    // ----- Resolve mount target -----
+    // Priority: explicit selector → position "navbar" → none (fixed to viewport)
+    var targetEl = null;
+    if (cfg.target) {
+      targetEl = document.querySelector(cfg.target);
+    } else if (cfg.position === 'navbar') {
+      targetEl = document.getElementById('top-progress-target');
+    }
+
+    // ----- Position modifier class -----
+    var positionMod = '';
+    if (cfg.position === 'bottom') { positionMod = classname + '--bottom'; }
+    if (cfg.position === 'navbar') { positionMod = classname + '--navbar'; }
+
+    // ----- Create the Nanobar instance -----
+    var nanobar = new Nanobar({
+      classname: classname,
+      id: cfg.id,
+      target: targetEl || undefined
+    });
+
+    if (positionMod && nanobar.el && nanobar.el.classList) {
+      nanobar.el.classList.add(positionMod);
+    }
+
+    // ----- Animate progress steps -----
+    var steps = (cfg.steps && cfg.steps.length) ? cfg.steps : [30, 76, 100];
+    var delay = cfg.stepDelay || 0;
+
+    if (delay > 0) {
+      steps.forEach(function (pct, i) {
+        setTimeout(function () { nanobar.go(pct); }, i * delay);
+      });
+    } else {
+      steps.forEach(function (pct) { nanobar.go(pct); });
+    }
+  });
+})();

data/scripts/lint-pages

@@ -383,24 +383,27 @@ scan_collection() {
 
     info "Scanning collection: $collection ($pattern)"
 
-    # Use find to match the glob pattern
-    local search_dir="$REPO_ROOT"
     local files_found=0
 
-    while IFS= read -r -d '' filepath; do
-        validate_file "$filepath" "$collection"
-        files_found=$((files_found + 1))
-    done < <(find "$REPO_ROOT" -path "$REPO_ROOT/$pattern" -name "*.md" -print0 2>/dev/null || true)
-
-    # Fallback: use a simpler find if the glob didn't work
-    if [[ $files_found -eq 0 ]]; then
-        local dir_part="${pattern%%/**}"
-        if [[ -d "$REPO_ROOT/$dir_part" ]]; then
-            while IFS= read -r -d '' filepath; do
-                validate_file "$filepath" "$collection"
-                files_found=$((files_found + 1))
-            done < <(find "$REPO_ROOT/$dir_part" -name "*.md" -print0 2>/dev/null)
-        fi
+    # Derive the base directory by stripping everything from the first glob
+    # character onward. e.g. "pages/_notes/**/*.md" → "pages/_notes"
+    # (${pattern%%\**} strips the longest suffix starting with *)
+    local prefix="${pattern%%\**}"
+    local dir_part="${prefix%/}"   # strip trailing slash
+
+    # For flat patterns like "pages/*.md" limit to the single directory level
+    # so we don't accidentally recurse into sub-collections.
+    local find_depth_flag=""
+    if [[ "$pattern" != *"**"* ]]; then
+        find_depth_flag="-maxdepth 1"
+    fi
+
+    if [[ -d "$REPO_ROOT/$dir_part" ]]; then
+        while IFS= read -r -d '' filepath; do
+            validate_file "$filepath" "$collection"
+            files_found=$((files_found + 1))
+        # shellcheck disable=SC2086
+        done < <(find "$REPO_ROOT/$dir_part" $find_depth_flag -name "*.md" -print0 2>/dev/null)
     fi
 
     debug "  Found $files_found files in $collection"

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-theme-zer0
 version: !ruby/object:Gem::Version
-  version: 0.22.19
+  version: 0.22.20
 platform: ruby
 authors:
 - Amr Abdel
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-04-18 00:00:00.000000000 Z
+date: 2026-04-19 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -125,6 +125,7 @@ files:
 - _includes/components/info-section.html
 - _includes/components/js-cdn.html
 - _includes/components/mermaid.html
+- _includes/components/nanobar.html
 - _includes/components/nav-editor.html
 - _includes/components/post-card.html
 - _includes/components/post-type-badge.html
@@ -291,6 +292,7 @@ files:
 - assets/js/modules/navigation/sidebar-state.js
 - assets/js/modules/navigation/smooth-scroll.js
 - assets/js/myScript.js
+- assets/js/nanobar-init.js
 - assets/js/nanobar.min.js
 - assets/js/nav-editor.js
 - assets/js/navigation.js