jekyll-theme-zer0 0.21.2 → 0.22.5

data/_includes/core/head.html

@@ -36,7 +36,6 @@
 <!-- JAVASCRIPT LIBRARIES            -->
 <!-- ================================ -->
 <!-- Custom theme JavaScript - Deferred for performance -->
-<script defer src="{{ '/assets/js/myScript.js' | relative_url }}"></script>
 <script defer src="{{ '/assets/js/auto-hide-nav.js' | relative_url }}"></script>
 <script defer src="{{ '/assets/js/back-to-top.js' | relative_url }}"></script>
 <script defer src="{{ '/assets/js/halfmoon.js' | relative_url }}"></script>
@@ -77,8 +76,8 @@
     });
 </script>
 
-<!-- MathJax - Mathematical notation rendering (async for performance) -->
-<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
+<!-- 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>
 
 <!-- ================================ -->
 <!-- HTML DOCUMENT META DATA         -->
@@ -110,9 +109,17 @@
     <meta itemprop="datePublished" content="{{ page.date | date_to_xmlschema }}">
 {% endif %}
 {% if page.last_modified_at %}
+    <meta itemprop="dateModified" content="{{ page.last_modified_at | date_to_xmlschema }}">
+{% elsif page.lastmod %}
     <meta itemprop="dateModified" content="{{ page.lastmod | date_to_xmlschema }}">
 {% endif %}
 
+<!-- JSON-LD SoftwareApplication schema (homepage only) -->
+{% include content/jsonld-software.html %}
+
+<!-- JSON-LD FAQ schema (pages with faq_items front matter) -->
+{% include content/jsonld-faq.html %}
+
 <!-- ========================== -->
 <!-- ANALYTICS INTEGRATION     -->
 <!-- ========================== -->
@@ -127,26 +134,22 @@
 <!-- ========================== -->
 <!-- BOOTSTRAP 5 FRAMEWORK     -->
 <!-- ========================== -->
-<!-- Bootstrap 5.3.3 - Primary CSS framework via CDN for performance -->
-<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
-
-<!-- Local Bootstrap Installation - Alternative for offline development -->
-<!-- <script src="/assets/js/bootstrap.js"></script> -->
+<!-- Bootstrap 5.3.3 - bundled locally (GitHub Pages–safe; refresh via scripts/vendor-install.sh) -->
+<link href="{{ '/assets/vendor/bootstrap/css/bootstrap.min.css' | relative_url }}" rel="stylesheet">
 
 <!-- ========================== -->
 <!-- ICON LIBRARIES             -->
 <!-- ========================== -->
-<!-- Bootstrap Icons 1.10.3 - Complete icon set for UI elements -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
+<!-- Bootstrap Icons (bundled with theme; fonts use relative paths in CSS) -->
+<link rel="stylesheet" href="{{ '/assets/vendor/bootstrap-icons/font/bootstrap-icons.css' | relative_url }}">
 
 <!-- ========================== -->
 <!-- CUSTOM THEME STYLES       -->
 <!-- ========================== -->
-<!-- Primary theme stylesheet - Core styling and layout -->
+<!-- Primary theme stylesheet - Core styling and layout (SCSS pipeline) -->
 <link rel="stylesheet" href="{{ '/assets/css/main.css' | relative_url }}">
 
-<!-- Custom CSS overrides - Theme customizations and tweaks -->
-<link rel="stylesheet" href="{{'/assets/css/custom.css' | relative_url }}">
+<!-- Optional fork overrides: add assets/css/user-overrides.css locally if needed (not shipped by default). -->
 
 <!-- Statistics page specific styles -->
 {% if page.layout == 'stats' %}
@@ -161,4 +164,4 @@
 
 <!-- Docs CSS - Alternative stylesheet, currently disabled due to scroll spy issues -->
 <!-- TODO: Replace with compiled Sass when scroll spy functionality is fixed -->
-<!-- <link rel="stylesheet" href="/assets/css/docs.css"> -->
+<!-- Optional docs.css link removed; use _sass/core/_docs-layout.scss → main.css -->

data/_includes/core/header.html

@@ -42,7 +42,7 @@
   Skip to main content
 </a>
 
-<header id="navbar" class="container-fluid text-center fixed-top" role="navigation">
+<header id="navbar" class="container-fluid text-center fixed-top" role="banner">
 
     <!-- ================================ -->
     <!-- TOP NAVIGATION BAR              -->
@@ -53,21 +53,29 @@
         <!-- PROGRESS BAR INDICATOR    -->
         <!-- ========================== -->
         <!-- Fixed position progress bar for page loading feedback -->
-        <div class="nanobar" id="top-progress-bar" style="position: fixed;">
+        <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 -->
         <!-- ========================== -->
-        <nav class="container-xl order-2 order-lg-1 grid gap-1 navbar-main">
+        <nav class="container-xl order-2 order-lg-1 d-flex align-items-center gap-1 flex-wrap flex-lg-nowrap navbar-main" aria-label="Primary navigation">
+
+            <!-- Leading cluster: sidebar toggle + brand + titles (grid column 1 on lg+) -->
+            <div class="navbar-main-start d-flex align-items-center gap-1 gap-lg-2 min-w-0 flex-shrink-1">
 
             <!-- ========================== -->
             <!-- MOBILE MENU CONTROLS      -->
             <!-- ========================== -->
             
-            <!-- Left Sidebar Toggle - Mobile view only -->
-            {% assign sidebar_nav = page.sidebar.nav | default: nil %}
+            <!-- Left Sidebar Toggle - Mobile view only (omit when page.sidebar: false — matches default layout aside) -->
+            {% assign sidebar_nav = nil %}
+            {% if page.sidebar != false %}
+              {% if page.sidebar and page.sidebar.nav %}
+                {% assign sidebar_nav = page.sidebar.nav %}
+              {% endif %}
+            {% endif %}
             {% assign sidebar_has_content = false %}
             {% if sidebar_nav %}
                 {% if sidebar_nav == "auto" or sidebar_nav == "categories" %}
@@ -84,8 +92,9 @@
                         data-bs-toggle="offcanvas" 
                         data-bs-target="#bdSidebar" 
                         aria-controls="bdSidebar" 
-                        aria-label="Toggle sidebar navigation">
-                    <span class="bi bi-list"></span>
+                        aria-label="Toggle sidebar navigation"
+                        aria-expanded="false">
+                    <span class="bi bi-list" aria-hidden="true"></span>
                 </button>
             </div>
             {% endif %}
@@ -95,9 +104,9 @@
             <!-- ========================== -->
             <div class="navbar-brand-group d-inline-flex align-items-center gap-2">
                 <!-- Home Navigation Button (Desktop only) -->
-                <div class="navbar-home-links d-none d-lg-inline-flex">
+                <div class="navbar-home-links d-none d-lg-inline-flex" role="navigation" aria-label="Quick navigation">
                     {%- for home in site.data.navigation.home -%}
-                    <a class="btn" href="{{ home.url | relative_url }}" aria-label="{{ home.title }}" title="{{ home.title }}">
+                    <a class="btn" href="{{ home.url | relative_url }}" aria-label="{{ home.title }}" title="{{ home.title }}" {% if home.url == page.url %}aria-current="page"{% endif %}>
                         <i class="{{ site.default_icon}} {{ home.icon }}"></i>
                     </a>
                     {% endfor %}
@@ -106,8 +115,8 @@
                 <!-- Brand Logo Link to Root -->
                 <!-- Logo path configured in _config.yml -->
                 {% capture logo_path %}{{ site.logo }}{% endcapture %}
-                <a class="navbar-brand" href="{{ site.baseurl }}/" aria-label="Home">
-                    <img src="{{ logo_path | relative_url }}" alt="Logo" width="30" height="30">
+                <a class="navbar-brand" href="{{ site.baseurl }}/" aria-label="Home - {{ site.title }}" {% if page.url == '/' %}aria-current="page"{% endif %}>
+                    <img src="{{ logo_path | relative_url }}" alt="{{ site.title }} logo" width="30" height="30">
                 </a>
             </div>
             
@@ -116,6 +125,8 @@
             <!-- ========================== -->
             <!-- Site title and subtitle display -->
             {% include core/branding.html %}
+
+            </div>
     
             <!-- ========================== -->
             <!-- MAIN NAVIGATION MENU      -->
@@ -126,18 +137,17 @@
             <!-- ========================== -->
             <!-- UTILITY CONTROLS          -->
             <!-- ========================== -->
-            <div class="navbar-utility-controls d-flex align-items-center">
+            <div class="navbar-utility-controls d-flex align-items-center" role="group" aria-label="Utility controls">
                 <!-- Search Modal Toggle -->
                 <button
                     class="btn nav-search-button"
                     type="button"
-                    data-bs-toggle="modal"
-                    data-bs-target="#siteSearchModal"
                     data-search-toggle
                     aria-label="Open search"
-                    title="Search"
+                    aria-haspopup="dialog"
+                    title="Search site content"
                 >
-                    <i class="{{site.default_icon}} bi-search"></i>
+                    <i class="{{site.default_icon}} bi-search" aria-hidden="true"></i>
                     <span class="nav-link-text d-none d-xl-inline ms-1">Search</span>
                 </button>
 
@@ -147,10 +157,11 @@
                     type="button"
                     data-bs-toggle="modal" 
                     data-bs-target="#info-section" 
-                    aria-label="Settings"
-                    title="Settings"
+                    aria-label="Open settings"
+                    aria-haspopup="dialog"
+                    title="Site settings and information"
                 >
-                    <i class="{{site.default_icon}} bi-gear"></i>
+                    <i class="{{site.default_icon}} bi-gear" aria-hidden="true"></i>
                 </button>
 
                 <!-- Navigation Menu Toggle - Mobile view -->
@@ -160,8 +171,9 @@
                             data-bs-toggle="offcanvas" 
                             data-bs-target="#bdNavbar" 
                             aria-controls="bdNavbar" 
-                            aria-label="Toggle navigation">
-                        <span class="bi bi-three-dots"></span>
+                            aria-label="Toggle main navigation"
+                            aria-expanded="false">
+                        <span class="bi bi-three-dots" aria-hidden="true"></span>
                     </button>
                 </div>
             </div>

data/_includes/navigation/navbar.html

@@ -1,125 +1,131 @@
-<!-- 
-    file: navbar.html
-    path: /includes/navbar.html
-    includes:
-    purpose: Offcanvas main navigation following Bootstrap 5 best practices
-             with hover-activated dropdowns for desktop
- -->
-
-<!-- Navigation Links - Offcanvas -->
-<div class="offcanvas offcanvas-end col-lg-2" tabindex="-1" id="bdNavbar" aria-labelledby="mainNavOffcanvasLabel">
-
-    <!-- Main Navigation Header - Offcanvas -->
-    <div class="offcanvas-header border-bottom">
-        <h5 class="offcanvas-title" id="mainNavOffcanvasLabel">Main Navigation</h5>
-        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdNavbar"></button>
-    </div>
-
-    <!-- Main Navigation Body - Offcanvas -->
-    <div class="offcanvas-body">
-        <ul class="navbar-nav justify-content-lg-center text-start flex-grow-1">
-            <li class="nav-item d-lg-none">
-                <a class="nav-link" href="{{ '/' | relative_url }}">
-                    <i class="{{site.default_icon}} bi-house me-2"></i>
-                    Home
-                </a>
-            </li>
-            {%- for link in site.data.navigation.main -%}
-                {%- assign has_children = link.children and link.children.size > 0 -%}
-
-                {%- if has_children -%}
-                    <li class="nav-item dropdown d-flex align-items-center nav-hover-dropdown">
-                        <!-- Parent link navigates directly -->
-                        <a
-                            class="nav-link"
-                            href="{{ link.url | relative_url }}"
-                            {%- if link.url == page.url -%} aria-current="page"{%- endif -%}
-                            title="{{ link.title }}"
-                        >
-                            {%- if link.icon -%}
-                                <i class="{{site.default_icon}} {{ link.icon }}"></i>
-                            {%- endif -%}
-                            <span class="nav-link-text">{{ link.title }}</span>
-                        </a>
-
-                        <!-- Split toggle opens the dropdown (click on mobile, hover on desktop) -->
-                        <a
-                            class="nav-link dropdown-toggle dropdown-toggle-split ms-1 px-1"
-                            href="#"
-                            id="dropdown-{{ link.title | slugify }}"
-                            role="button"
-                            data-bs-toggle="dropdown"
-                            data-bs-auto-close="outside"
-                            aria-expanded="false"
-                            aria-label="Toggle {{ link.title }} menu"
-                        >
-                            <span class="visually-hidden">Toggle dropdown</span>
-                        </a>
-
-                        <ul class="dropdown-menu dropdown-menu-start" aria-labelledby="dropdown-{{ link.title | slugify }}">
-                            {%- for child in link.children -%}
-                                <li>
-                                    <a
-                                        class="dropdown-item"
-                                        href="{{ child.url | relative_url }}"
-                                        {%- if child.url == page.url -%} aria-current="page"{%- endif -%}
-                                    >
-                                        {%- if child.icon -%}
-                                            <i class="{{site.default_icon}} {{ child.icon }} me-2"></i>
-                                        {%- endif -%}
-                                        {{ child.title }}
-                                    </a>
-                                </li>
-                            {%- endfor -%}
-                        </ul>
-                    </li>
-                {%- else -%}
-                    <li class="nav-item">
-                        <a
-                            class="nav-link"
-                            href="{{ link.url | relative_url }}"
-                            {%- if link.url == page.url -%} aria-current="page"{%- endif -%}
-                            title="{{ link.title }}"
-                        >
-                            {%- if link.icon -%}
-                                <i class="{{site.default_icon}} {{ link.icon }}"></i>
-                            {%- endif -%}
-                            <span class="nav-link-text">{{ link.title }}</span>
-                        </a>
-                    </li>
-                {%- endif -%}
-            {%- endfor -%}
-            <li class="nav-item d-lg-none">
-                <button
-                    class="nav-link btn btn-link text-start w-100"
-                    type="button"
-                    data-bs-toggle="modal"
-                    data-bs-target="#siteSearchModal"
-                    data-search-toggle
-                    aria-label="Open search"
-                >
-                    <i class="{{site.default_icon}} bi-search me-2"></i>
-                    Search
-                </button>
-            </li>
-            <li class="nav-item d-lg-none">
-                <button
-                    class="nav-link btn btn-link text-start w-100"
-                    type="button"
-                    data-bs-toggle="modal"
-                    data-bs-target="#info-section"
-                    aria-controls="info-section"
-                >
-                    <i class="{{site.default_icon}} bi-gear me-2"></i>
-                    Settings
-                </button>
-            </li>
-        </ul>
-    </div>
-</div>
-
-<!-- 
-  Navigation styles are now in _sass/core/_navbar.scss
-  Navigation scripts are now in assets/js/navigation.js
-  These are loaded automatically via the theme's asset pipeline
+<!-- 
+    file: navbar.html
+    path: /includes/navbar.html
+    includes:
+    purpose: Offcanvas main navigation following Bootstrap 5 best practices
+             with hover-activated dropdowns for desktop and accessible interactions
+ -->
+
+<!-- Navigation Links - Offcanvas -->
+<div class="offcanvas offcanvas-end col-lg-2" tabindex="-1" id="bdNavbar" aria-labelledby="mainNavOffcanvasLabel" aria-modal="true" role="dialog">
+
+    <!-- Main Navigation Header - Offcanvas -->
+    <div class="offcanvas-header border-bottom">
+        <h2 class="offcanvas-title h5 mb-0" id="mainNavOffcanvasLabel">Main Navigation</h2>
+        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close navigation menu" data-bs-target="#bdNavbar"></button>
+    </div>
+
+    <!-- Main Navigation Body - Offcanvas -->
+    <div class="offcanvas-body">
+        <!-- Desktop: width is the grid middle track; labels ellipsis or icon-only via container query -->
+        <div class="bd-navbar-nav-viewport">
+        <ul class="navbar-nav justify-content-lg-center text-start flex-grow-1" role="menubar">
+            <li class="nav-item d-lg-none" role="none">
+                <a class="nav-link" href="{{ '/' | relative_url }}" role="menuitem" {% if page.url == '/' %}aria-current="page"{% endif %}>
+                    <i class="{{site.default_icon}} bi-house me-2" aria-hidden="true"></i>
+                    Home
+                </a>
+            </li>
+            {%- for link in site.data.navigation.main -%}
+                {%- assign has_children = link.children and link.children.size > 0 -%}
+
+                {%- if has_children -%}
+                    <li class="nav-item dropdown d-flex align-items-center nav-hover-dropdown" role="none">
+                        <!-- Parent link navigates directly -->
+                        <a
+                            class="nav-link"
+                            href="{{ link.url | relative_url }}"
+                            role="menuitem"
+                            {%- if link.url == page.url -%} aria-current="page"{%- endif -%}
+                            title="{{ link.title }}"
+                        >
+                            {%- if link.icon -%}
+                                <i class="{{site.default_icon}} {{ link.icon }}" aria-hidden="true"></i>
+                            {%- endif -%}
+                            <span class="nav-link-text">{{ link.title }}</span>
+                        </a>
+
+                        <!-- Split toggle opens the dropdown (click on mobile, hover on desktop) -->
+                        <!-- Note: No data-bs-toggle="dropdown" — custom JS handles all interactions
+                             to avoid Bootstrap's native handler conflicting with our toggle logic -->
+                        <button
+                            class="nav-link dropdown-toggle dropdown-toggle-split ms-1 px-1 btn"
+                            type="button"
+                            id="dropdown-{{ link.title | slugify }}"
+                            aria-expanded="false"
+                            aria-label="Toggle {{ link.title }} submenu"
+                            aria-haspopup="true"
+                        >
+                            <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">
+                            {%- for child in link.children -%}
+                                <li role="none">
+                                    <a
+                                        class="dropdown-item"
+                                        href="{{ child.url | relative_url }}"
+                                        role="menuitem"
+                                        {%- if child.url == page.url -%} aria-current="page"{%- endif -%}
+                                    >
+                                        {%- if child.icon -%}
+                                            <i class="{{site.default_icon}} {{ child.icon }} me-2" aria-hidden="true"></i>
+                                        {%- endif -%}
+                                        {{ child.title }}
+                                    </a>
+                                </li>
+                            {%- endfor -%}
+                        </ul>
+                    </li>
+                {%- else -%}
+                    <li class="nav-item" role="none">
+                        <a
+                            class="nav-link"
+                            href="{{ link.url | relative_url }}"
+                            role="menuitem"
+                            {%- if link.url == page.url -%} aria-current="page"{%- endif -%}
+                            title="{{ link.title }}"
+                        >
+                            {%- if link.icon -%}
+                                <i class="{{site.default_icon}} {{ link.icon }}" aria-hidden="true"></i>
+                            {%- endif -%}
+                            <span class="nav-link-text">{{ link.title }}</span>
+                        </a>
+                    </li>
+                {%- endif -%}
+            {%- endfor -%}
+            <li class="nav-item d-lg-none" role="none">
+                <button
+                    class="nav-link btn btn-link text-start w-100"
+                    type="button"
+                    data-search-toggle
+                    aria-label="Open search"
+                    aria-haspopup="dialog"
+                >
+                    <i class="{{site.default_icon}} bi-search me-2" aria-hidden="true"></i>
+                    Search
+                </button>
+            </li>
+            <li class="nav-item d-lg-none" role="none">
+                <button
+                    class="nav-link btn btn-link text-start w-100"
+                    type="button"
+                    data-bs-toggle="modal"
+                    data-bs-target="#info-section"
+                    aria-controls="info-section"
+                    aria-haspopup="dialog"
+                >
+                    <i class="{{site.default_icon}} bi-gear me-2" aria-hidden="true"></i>
+                    Settings
+                </button>
+            </li>
+        </ul>
+        </div>
+    </div>
+</div>
+
+<!-- 
+  Navigation styles are now in _sass/core/_navbar.scss
+  Navigation scripts are now in assets/js/navigation.js
+  These are loaded automatically via the theme's asset pipeline
 -->

data/_includes/navigation/sidebar-left.html

@@ -37,9 +37,9 @@
   <!-- SIDEBAR HEADER            -->
   <!-- ========================== -->
   <!-- Mobile-only header with close button -->
-  <div class="offcanvas-header border-bottom">
-    <h5 class="offcanvas-title" id="bdSidebarOffcanvasLabel">Browse docs</h5>
-    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdSidebar"></button>
+  <div class="offcanvas-header">
+    <h2 class="offcanvas-title h5 mb-0" id="bdSidebarOffcanvasLabel">Browse docs</h2>
+    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close documentation sidebar" data-bs-target="#bdSidebar"></button>
   </div>
 
   <!-- ========================== -->

data/_includes/navigation/sidebar-right.html

@@ -6,14 +6,13 @@
 
 <!-- TOC button in mobile view - Floating Action Button pattern -->
 <!-- Positioned above back-to-top button to prevent overlap -->
-<div class="d-lg-none position-fixed bd-toc-fab" style="bottom: 90px; right: 20px; z-index: 1030;">
+<div class="d-lg-none position-fixed bd-toc-fab">
   <button class="btn btn-primary rounded-circle shadow-lg bd-toc-toggle" 
           type="button" 
           data-bs-toggle="offcanvas" 
           data-bs-target="#tocContents" 
           aria-controls="tocContents"
-          aria-label="Toggle Table of Contents"
-          style="width: 56px; height: 56px;">
+          aria-label="Toggle Table of Contents">
     <i class="bi bi-list-ul fs-5"></i>
   </button>
 </div>
@@ -21,8 +20,8 @@
 <!-- Right sidebar container -->
 <div class="offcanvas-lg offcanvas-end" tabindex="-1" id="tocContents" aria-labelledby="tocLabel">
   <div class="offcanvas-header">
-    <h5 class="offcanvas-title" id="tocLabel">Table of Contents</h5>
-    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#tocContents"></button>
+    <h2 class="offcanvas-title h5 mb-0" id="tocLabel">Table of Contents</h2>
+    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close table of contents" data-bs-target="#tocContents"></button>
   </div>
   <div class="offcanvas-body">
     <!-- Table of contents -->
@@ -35,9 +34,6 @@
         </strong>
       </div>
 
-    <!-- TOC list -->
-
-    <!-- TOC list -->
       {% include content/toc.html sanitize=true html=content h_min=1 h_max=3 class="list-group-flush" item_class="list-group-item" anchor_class="" skip_no_ids=true %}
     </nav>
   </div>

data/_includes/search-data.json

@@ -1,8 +1,7 @@
 [
 {%- assign search_pages = site.pages | where_exp: "item", "item.title" -%}
-{%- assign search_posts = site.posts -%}
 {%- assign search_docs = site.documents -%}
-{%- assign search_items = search_pages | concat: search_posts | concat: search_docs -%}
+{%- assign search_items = search_pages | concat: search_docs -%}
 {%- assign content_limit = site.search.content_length | default: 1000 -%}
 {%- assign first = true -%}
 {%- for item in search_items -%}

data/_layouts/landing.html

@@ -47,13 +47,13 @@ layout: root
 <!-- ================================ -->
 <!-- HERO SECTION                     -->
 <!-- ================================ -->
-<div class="bg-primary text-white position-relative overflow-hidden">
+<div class="bg-primary text-white position-relative overflow-hidden landing-hero">
     <div class="container-xl py-5 px-4 px-md-5">
         <div class="row align-items-center min-vh-50 g-4 g-lg-5">
-            <div class="col-lg-6 order-2 order-lg-1">
-                <h1 class="display-4 fw-bold mb-3 animate-on-scroll">{{ page.title }}</h1>
-                <p class="lead mb-4 animate-on-scroll" style="animation-delay: 0.1s;">{{ page.description }}</p>
-                <div class="d-flex flex-column flex-md-row gap-3 animate-on-scroll" style="animation-delay: 0.2s;">
+            <div class="col-lg-6 order-1 landing-hero-copy">
+                <h1 class="display-4 fw-bold mb-3">{{ page.title }}</h1>
+                <p class="lead mb-4">{{ page.description }}</p>
+                <div class="d-flex flex-column flex-md-row gap-3 flex-wrap">
                     <a href="#get-started" class="btn btn-light btn-lg">
                         <i class="bi bi-rocket-takeoff me-2"></i>Get Started
                     </a>
@@ -65,13 +65,27 @@ layout: root
                     </a>
                 </div>
             </div>
-            <div class="col-lg-6 text-center order-1 order-lg-2">
+            <div class="col-lg-6 text-center order-2">
                 {% if page.hero_image %}
-                <img src="{{ page.hero_image }}" alt="{{ page.title }}" class="img-fluid rounded shadow-lg animate-on-scroll" loading="eager" style="animation-delay: 0.3s;">
+                <div class="landing-hero-media ratio ratio-4x3 mx-auto shadow-lg rounded overflow-hidden">
+                    <img
+                        src="{{ page.hero_image | relative_url }}"
+                        alt="{{ page.title }}"
+                        class="w-100 h-100"
+                        width="800"
+                        height="600"
+                        loading="eager"
+                        decoding="async"
+                        fetchpriority="high"
+                        style="object-fit: contain;"
+                    >
+                </div>
                 {% else %}
-                <div class="bg-secondary rounded p-5 text-body animate-on-scroll">
-                    <i class="bi bi-code-square display-1"></i>
-                    <p class="mt-3 mb-0">Jekyll Theme</p>
+                <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>
                 {% endif %}
             </div>
@@ -151,4 +165,9 @@ layout: root
             {% include landing/landing-install-cards.html %}
         </div>
     </div>
-</div>
+</div>
+
+<!-- ================================ -->
+<!-- AUTHOR / E-E-A-T SECTION        -->
+<!-- ================================ -->
+{% include components/author-eeat.html %}