Layouts
Create and customize page layouts in the Zer0-Mistakes Jekyll theme.
Table of Contents
Layouts
Layouts define the structure and appearance of your pages. The Zer0-Mistakes theme includes several built-in layouts.
Available Layouts
| Layout | Purpose | Use Case |
|---|---|---|
default |
Standard page with sidebar | Documentation, general pages |
journals |
Blog post layout | Blog posts with metadata |
home |
Homepage layout | Site homepage |
collection |
Collection index | Listing pages for collections |
landing |
Full-width page | Marketing/landing pages |
root |
Base HTML | Don’t use directly |
Using Layouts
Specify a layout in your page’s front matter:
---
title: "My Page"
layout: default
---
Layout Hierarchy
Layouts inherit from each other:
root.html
└── default.html
├── home.html
├── journals.html
├── collection.html
└── landing.html
Creating Custom Layouts
Step 1: Create the Layout File
Create a file in _layouts/:
---
layout: default
---
<!-- _layouts/tutorial.html -->
<article class="tutorial">
<header class="tutorial-header">
<h1>Layouts</h1>
<div class="meta">
<span class="difficulty">intermediate</span>
<span class="time"></span>
</div>
</header>
<div class="tutorial-content">
<!--
===================================================================
DEFAULT LAYOUT - Standard content layout with sidebars
===================================================================
File: default.html
Path: _layouts/default.html
Inherits: root.html
Purpose: Primary content layout with sidebar navigation and table of contents
Template Logic:
- Creates a responsive three-column layout using Bootstrap grid
- Left sidebar: Site navigation and content outline (collapsible on mobile)
- Local graph: Obsidian side panel (rendered at body level via footer.html)
- Center: Main content area with page title and body content
- Right sidebar: Table of contents and page shortcuts (hidden on mobile)
- Implements scroll spy for navigation highlighting
- Responsive design that stacks vertically on mobile devices
Layout Structure:
1. Container wrapper with Bootstrap responsive classes
2. Left sidebar (bd-sidebar) - Navigation and outline
3. Main content area (bd-main) with:
- Intro section (page title, metadata)
- Right sidebar (bd-toc) - Table of contents
- Content area (bd-content) - Main page content
Dependencies:
- sidebar-left.html: Site navigation and content outline
- intro.html: Page title, breadcrumbs, and metadata
- sidebar-right.html: Table of contents and page shortcuts
Bootstrap Classes Used:
- container-xxl: Extra large responsive container
- bd-gutter: Custom Bootstrap spacing
- bd-layout: Custom layout utility class
- bd-sidebar: Custom sidebar styling
- bd-main: Main content area
- bd-toc: Table of contents styling
- bd-content: Content area styling
===================================================================
--><!-- ================================================ -->
<!-- MAIN LAYOUT CONTAINER -->
<!-- Bootstrap responsive container with custom grid -->
<!-- ================================================ -->
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<!-- ================================ -->
<!-- LEFT SIDEBAR - Navigation -->
<!-- ================================ -->
<!-- Site navigation, content outline, and offcanvas menu for mobile -->
<aside class="bd-sidebar">
<!--
===================================================================
SIDEBAR LEFT - Dynamic Navigation Sidebar
===================================================================
File: sidebar-left.html
Path: _includes/navigation/sidebar-left.html
Purpose: Left sidebar navigation with three standardized content modes
Template Logic:
- Responsive offcanvas sidebar for mobile devices
- Three navigation modes based on page.sidebar.nav:
* "auto": Auto-generated folder structure from collection documents
* "tree": YAML-defined hierarchical navigation from _data/navigation/
* "categories": Category-based navigation from site categories
Dependencies:
- sidebar-folders.html: Dynamic folder structure generation (auto mode)
- sidebar-categories.html: Category-based navigation (categories mode)
- nav-tree.html: YAML-based hierarchical tree (tree mode)
- Bootstrap 5 offcanvas component
Navigation Modes:
1. auto: Scans collection documents to build folder structure
2. tree: Uses predefined YAML navigation from _data/navigation/*.yml
3. categories: Groups content by Jekyll categories
===================================================================
-->
<!-- ================================ -->
<!-- SIDEBAR NAVIGATION CONTAINER -->
<!-- ================================ -->
<!-- Responsive offcanvas sidebar - full-width on mobile, fixed on desktop -->
<script>
try {
if (localStorage.getItem('zer0-nav-sidebar-visible') === 'false') {
document.documentElement.classList.add('bd-sidebar-pref-hidden');
}
} catch (e) {}
</script>
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<!-- ========================== -->
<!-- SIDEBAR HEADER -->
<!-- ========================== -->
<!-- Mobile-only header with close button -->
<div class="offcanvas-header">
<h2 class="offcanvas-title h5 mb-0" id="bdSidebarOffcanvasLabel">Browse docs</h2>
<div class="d-flex align-items-center gap-1">
<button type="button"
class="btn btn-sm btn-link text-body-secondary bd-sidebar-visibility-toggle d-lg-none px-2"
aria-controls="bdSidebar"
aria-expanded="true"
aria-label="Hide documentation sidebar">
<i class="bi bi-eye-slash" aria-hidden="true"></i>
<span class="visually-hidden">Hide documentation sidebar</span>
</button>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close documentation sidebar" data-bs-target="#bdSidebar"></button>
</div>
</div>
<!-- ========================== -->
<!-- SIDEBAR CONTENT AREA -->
<!-- ========================== -->
<!-- Scrollable content area with dynamic navigation options -->
<div class="offcanvas-body overflow-auto">
<div class="bd-sidebar-desktop-header mb-3 d-none d-lg-flex align-items-center justify-content-between gap-2 w-100">
<strong class="d-flex align-items-center mb-0">
<i class="bi bi-journal-bookmark me-2" aria-hidden="true"></i>
Browse docs
</strong>
<button type="button"
class="btn btn-sm btn-link text-body-secondary bd-sidebar-visibility-toggle d-none d-lg-inline-flex flex-shrink-0 px-1"
aria-controls="bdSidebar"
aria-expanded="true"
aria-label="Hide documentation sidebar"
title="Hide documentation sidebar">
<i class="bi bi-layout-sidebar-inset" aria-hidden="true"></i>
<span class="visually-hidden">Hide documentation sidebar</span>
</button>
</div>
<!-- ========================== -->
<!-- AUTO MODE: Collection Docs -->
<!-- ========================== -->
<!-- Auto-generates folder structure from collection documents -->
<nav class="w-100 nav-tree" data-nav-tree>
<!--
===================================================================
NAV TREE - Flat YAML Navigation Renderer
===================================================================
File: nav-tree.html
Path: _includes/navigation/nav-tree.html
Purpose: Render hierarchical navigation from YAML data files
Parameters:
- nav: Name of navigation file in _data/navigation/ (e.g., "docs", "main")
Data Schema (expected in _data/navigation/*.yml):
- title: string (required) - Display text
- url: string (optional) - Link URL
- icon: string (optional) - Bootstrap Icons class (e.g., "bi-folder")
- expanded: boolean (optional) - Default expanded state (default: false)
- children: array (optional) - Nested navigation items (max 2 levels)
Note: This implementation supports 2 levels of nesting to avoid Jekyll's
include depth limit. For deeper nesting, consider a plugin approach.
Dependencies:
- site.data.navigation[nav]: Navigation YAML data
- Bootstrap 5 collapse component
- Bootstrap Icons for visual indicators
Usage:
include navigation/nav-tree.html nav="docs"
===================================================================
-->
<ul class="list-unstyled fw-normal pb-2 small nav-tree-root">
<li class="mb-1 nav-tree-item" data-depth="0">
<!-- Parent item with children - collapsible -->
<div class="d-flex align-items-center">
<a href="/docs/"
class="nav-tree-link flex-grow-1 d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<i class="bi-rocket-takeoff me-2"></i>
<span>Getting Started</span>
</a>
<button class="btn btn-sm btn-link nav-tree-toggle p-1"
type="button"
data-bs-toggle="collapse"
data-bs-target="#nav-getting-started"
aria-expanded="true"
aria-controls="nav-getting-started"
aria-label="Toggle Getting Started submenu">
<i class="bi bi-chevron-down"></i>
</button>
</div>
<!-- Children container (Level 1) -->
<div class="collapse show" id="nav-getting-started">
<ul class="list-unstyled fw-normal ps-3 nav-tree-children">
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Documentation Home</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/installation/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Installation</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/getting-started/quick-start/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Quick Start</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/getting-started/theme-guide/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Theme Guide</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/front-matter/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Front Matter</span>
</a>
</li>
</ul>
</div>
</li>
<li class="mb-1 nav-tree-item" data-depth="0">
<!-- Parent item with children - collapsible -->
<div class="d-flex align-items-center">
<a href="/docs/features/"
class="nav-tree-link flex-grow-1 d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<i class="bi-stars me-2"></i>
<span>Features</span>
</a>
<button class="btn btn-sm btn-link nav-tree-toggle p-1 collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#nav-features"
aria-expanded="false"
aria-controls="nav-features"
aria-label="Toggle Features submenu">
<i class="bi bi-chevron-down"></i>
</button>
</div>
<!-- Children container (Level 1) -->
<div class="collapse" id="nav-features">
<ul class="list-unstyled fw-normal ps-3 nav-tree-children">
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/features/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Features Overview</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/features/mermaid-diagrams/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Mermaid Diagrams</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/features/mathjax-math/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>MathJax Math</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/features/giscus-comments/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Giscus Comments</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/features/posthog-analytics/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>PostHog Analytics</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/features/keyboard-navigation/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Keyboard Navigation</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/features/preview-image-generator/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Preview Images</span>
</a>
</li>
</ul>
</div>
</li>
<li class="mb-1 nav-tree-item" data-depth="0">
<!-- Parent item with children - collapsible -->
<div class="d-flex align-items-center">
<a href="/docs/customization/"
class="nav-tree-link flex-grow-1 d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<i class="bi-palette me-2"></i>
<span>Customization</span>
</a>
<button class="btn btn-sm btn-link nav-tree-toggle p-1 collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#nav-customization"
aria-expanded="false"
aria-controls="nav-customization"
aria-label="Toggle Customization submenu">
<i class="bi bi-chevron-down"></i>
</button>
</div>
<!-- Children container (Level 1) -->
<div class="collapse" id="nav-customization">
<ul class="list-unstyled fw-normal ps-3 nav-tree-children">
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/customization/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Customization Overview</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/customization/layouts/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Layouts</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/customization/styles/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Styles</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/customization/navigation/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Navigation</span>
</a>
</li>
</ul>
</div>
</li>
<li class="mb-1 nav-tree-item" data-depth="0">
<!-- Parent item with children - collapsible -->
<div class="d-flex align-items-center">
<a href="/docs/deployment/"
class="nav-tree-link flex-grow-1 d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<i class="bi-cloud-upload me-2"></i>
<span>Deployment</span>
</a>
<button class="btn btn-sm btn-link nav-tree-toggle p-1 collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#nav-deployment"
aria-expanded="false"
aria-controls="nav-deployment"
aria-label="Toggle Deployment submenu">
<i class="bi bi-chevron-down"></i>
</button>
</div>
<!-- Children container (Level 1) -->
<div class="collapse" id="nav-deployment">
<ul class="list-unstyled fw-normal ps-3 nav-tree-children">
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/deployment/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Deployment Overview</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/deployment/github-pages/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>GitHub Pages</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/deployment/netlify/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Netlify</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/deployment/custom-domain/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Custom Domain</span>
</a>
</li>
</ul>
</div>
</li>
<li class="mb-1 nav-tree-item" data-depth="0">
<!-- Parent item with children - collapsible -->
<div class="d-flex align-items-center">
<a href="/docs/jekyll/"
class="nav-tree-link flex-grow-1 d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<i class="bi-journal-code me-2"></i>
<span>Jekyll</span>
</a>
<button class="btn btn-sm btn-link nav-tree-toggle p-1 collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#nav-jekyll"
aria-expanded="false"
aria-controls="nav-jekyll"
aria-label="Toggle Jekyll submenu">
<i class="bi bi-chevron-down"></i>
</button>
</div>
<!-- Children container (Level 1) -->
<div class="collapse" id="nav-jekyll">
<ul class="list-unstyled fw-normal ps-3 nav-tree-children">
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/jekyll/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Jekyll Overview</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/jekyll/jekyll-config/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Configuration</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/jekyll/jekyll-liquid/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Liquid Templating</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/jekyll/code-highlighting/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Code Highlighting</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/jekyll/pagination/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Pagination</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/jekyll/jekyll-performance-optimization/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Performance</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/jekyll/jekyll-security/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Security</span>
</a>
</li>
</ul>
</div>
</li>
<li class="mb-1 nav-tree-item" data-depth="0">
<!-- Parent item with children - collapsible -->
<div class="d-flex align-items-center">
<a href="/docs/ruby/"
class="nav-tree-link flex-grow-1 d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<i class="bi-gem me-2"></i>
<span>Ruby & Bundler</span>
</a>
<button class="btn btn-sm btn-link nav-tree-toggle p-1 collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#nav-ruby-bundler"
aria-expanded="false"
aria-controls="nav-ruby-bundler"
aria-label="Toggle Ruby & Bundler submenu">
<i class="bi bi-chevron-down"></i>
</button>
</div>
<!-- Children container (Level 1) -->
<div class="collapse" id="nav-ruby-bundler">
<ul class="list-unstyled fw-normal ps-3 nav-tree-children">
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/ruby/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Ruby Overview</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/ruby-101/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Ruby 101</span>
</a>
</li>
</ul>
</div>
</li>
<li class="mb-1 nav-tree-item" data-depth="0">
<!-- Parent item with children - collapsible -->
<div class="d-flex align-items-center">
<a href="/docs/liquid/"
class="nav-tree-link flex-grow-1 d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<i class="bi-droplet me-2"></i>
<span>Liquid</span>
</a>
<button class="btn btn-sm btn-link nav-tree-toggle p-1 collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#nav-liquid"
aria-expanded="false"
aria-controls="nav-liquid"
aria-label="Toggle Liquid submenu">
<i class="bi bi-chevron-down"></i>
</button>
</div>
<!-- Children container (Level 1) -->
<div class="collapse" id="nav-liquid">
<ul class="list-unstyled fw-normal ps-3 nav-tree-children">
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/liquid/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Liquid Overview</span>
</a>
</li>
</ul>
</div>
</li>
<li class="mb-1 nav-tree-item" data-depth="0">
<!-- Parent item with children - collapsible -->
<div class="d-flex align-items-center">
<a href="/docs/docker/"
class="nav-tree-link flex-grow-1 d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<i class="bi-box-seam me-2"></i>
<span>Docker</span>
</a>
<button class="btn btn-sm btn-link nav-tree-toggle p-1 collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#nav-docker"
aria-expanded="false"
aria-controls="nav-docker"
aria-label="Toggle Docker submenu">
<i class="bi bi-chevron-down"></i>
</button>
</div>
<!-- Children container (Level 1) -->
<div class="collapse" id="nav-docker">
<ul class="list-unstyled fw-normal ps-3 nav-tree-children">
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/docker/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Docker Overview</span>
</a>
</li>
</ul>
</div>
</li>
<li class="mb-1 nav-tree-item" data-depth="0">
<!-- Parent item with children - collapsible -->
<div class="d-flex align-items-center">
<a href="/docs/bootstrap/"
class="nav-tree-link flex-grow-1 d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<i class="bi-bootstrap me-2"></i>
<span>Bootstrap</span>
</a>
<button class="btn btn-sm btn-link nav-tree-toggle p-1 collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#nav-bootstrap"
aria-expanded="false"
aria-controls="nav-bootstrap"
aria-label="Toggle Bootstrap submenu">
<i class="bi bi-chevron-down"></i>
</button>
</div>
<!-- Children container (Level 1) -->
<div class="collapse" id="nav-bootstrap">
<ul class="list-unstyled fw-normal ps-3 nav-tree-children">
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/bootstrap/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Bootstrap Overview</span>
</a>
</li>
</ul>
</div>
</li>
<li class="mb-1 nav-tree-item" data-depth="0">
<!-- Parent item with children - collapsible -->
<div class="d-flex align-items-center">
<a href="/docs/development/testing/"
class="nav-tree-link flex-grow-1 d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<i class="bi-tools me-2"></i>
<span>Development</span>
</a>
<button class="btn btn-sm btn-link nav-tree-toggle p-1 collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#nav-development"
aria-expanded="false"
aria-controls="nav-development"
aria-label="Toggle Development submenu">
<i class="bi bi-chevron-down"></i>
</button>
</div>
<!-- Children container (Level 1) -->
<div class="collapse" id="nav-development">
<ul class="list-unstyled fw-normal ps-3 nav-tree-children">
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/development/testing/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Testing</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/development/vendor-assets/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Vendor assets</span>
</a>
</li>
</ul>
</div>
</li>
<li class="mb-1 nav-tree-item" data-depth="0">
<!-- Parent item with children - collapsible -->
<div class="d-flex align-items-center">
<a href="/docs/troubleshooting/"
class="nav-tree-link flex-grow-1 d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<i class="bi-question-circle me-2"></i>
<span>Help</span>
</a>
<button class="btn btn-sm btn-link nav-tree-toggle p-1 collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#nav-help"
aria-expanded="false"
aria-controls="nav-help"
aria-label="Toggle Help submenu">
<i class="bi bi-chevron-down"></i>
</button>
</div>
<!-- Children container (Level 1) -->
<div class="collapse" id="nav-help">
<ul class="list-unstyled fw-normal ps-3 nav-tree-children">
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/troubleshooting/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Troubleshooting</span>
</a>
</li>
</ul>
</div>
</li>
</ul>
</nav>
</div>
</div>
</aside>
<div class="position-fixed bd-sidebar-fab d-lg-none" id="sidebarFab">
<button class="btn btn-primary rounded-circle shadow-lg p-0 bd-sidebar-toggle"
type="button"
aria-controls="bdSidebar"
aria-expanded="true"
aria-label="Open documentation sidebar">
<i class="bi bi-journal-bookmark fs-5" aria-hidden="true"></i>
</button>
</div>
<!-- ================================ -->
<!-- MAIN CONTENT AREA -->
<!-- ================================ -->
<!-- Primary content section with scroll spy for table of contents navigation -->
<main class="bd-main order-1" data-bs-spy="scroll" data-bs-target="#TableOfContents" data-bs-offset="100" data-bs-smooth-scroll="true">
<!--
file: _includes/content/intro.html
description: Enhanced intro section with share, edit, and Copilot agent session buttons
path: _includes/content/intro.html
features:
- Responsive share dropdown with multiple social platforms
- Edit on GitHub quick link
- Copilot Agent dropdown: select a prompt template to pre-fill a GitHub issue
- Issue body includes prompt template + page context + environment details
- Prompts sourced from _data/prompts.yml
- Responsive flex layout: full-width content block, frosted metadata footer with reading time and action buttons
- Balanced padding and typography hierarchy via bd-intro-* classes
- Metadata row: author, dates, category, difficulty, tags, view source
-->
<!-- Intro Section -->
<div class="bd-intro" style="
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/assets/images/previews/customization.png') no-repeat center center / cover;">
<div class="bd-intro-inner">
<div class="bd-intro-content">
<h1 class="bd-intro-title">Customization</h1>
<p class="bd-intro-description">Customize the Zer0-Mistakes Jekyll theme - layouts, styles, navigation, and more.</p>
</div>
<div class="bd-intro-meta-footer">
<ul class="bd-intro-meta-row list-unstyled" aria-label="Page metadata">
<li class="bd-intro-meta-item">
<i class="bi bi-person-fill bd-intro-meta-icon" aria-hidden="true"></i>
<a class="bd-intro-meta-link" href="https://github.com/bamr87" rel="author" itemprop="author">Amr</a>
</li>
<li class="bd-intro-meta-item">
<i class="bi bi-calendar3 bd-intro-meta-icon" aria-hidden="true"></i>
<time datetime="2026-06-18T05:36:53+00:00" itemprop="datePublished">
Published Jun 18, 2026
</time>
</li>
<li class="bd-intro-meta-item">
<i class="bi bi-pencil bd-intro-meta-icon" aria-hidden="true"></i>
<time datetime="2026-06-16T00:00:00+00:00" itemprop="dateModified">
Updated Jun 16, 2026
</time>
</li>
<li class="bd-intro-meta-item">
<i class="bi bi-folder2 bd-intro-meta-icon" aria-hidden="true"></i>
<a class="bd-intro-meta-link bd-intro-badge" href="/docs/customization/">Customization</a>
</li>
<li class="bd-intro-meta-item">
<i class="bi bi-bar-chart-steps bd-intro-meta-icon" aria-hidden="true"></i>
<span class="bd-intro-badge bd-intro-badge--level bd-intro-badge--level-intermediate">Intermediate</span>
</li>
<li class="bd-intro-meta-item bd-intro-meta-item--tags">
<i class="bi bi-tags bd-intro-meta-icon" aria-hidden="true"></i>
<span class="bd-intro-tag-list">
<a class="bd-intro-badge bd-intro-badge--tag" href="/tags/#customization">customization</a>
<a class="bd-intro-badge bd-intro-badge--tag" href="/tags/#layouts">layouts</a>
<a class="bd-intro-badge bd-intro-badge--tag" href="/tags/#styles">styles</a>
<a class="bd-intro-badge bd-intro-badge--tag" href="/tags/#navigation">navigation</a>
</span>
</li>
<li class="bd-intro-meta-item bd-intro-meta-item--source d-none d-md-inline-flex">
<i class="bi bi-file-earmark-code bd-intro-meta-icon" aria-hidden="true"></i>
<a class="bd-intro-meta-link" href="https://github.com/bamr87/zer0-mistakes/blob/main/pages/_docs/customization/index.md" target="_blank" rel="noopener noreferrer">View source</a>
</li>
</ul>
<div class="bd-intro-meta-bottom">
<p class="bd-intro-meta">
<i class="bi bi-clock me-1" aria-hidden="true"></i>
Estimated reading time: 5 minutes
</p>
<!-- Action Buttons Group -->
<div class="bd-intro-actions">
<!-- Share Button -->
<div class="dropdown">
<button class="btn btn-sm btn-info dropdown-toggle" type="button" id="shareDropdownBottom" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-share" aria-hidden="true"></i>
<span class="d-none d-sm-inline ms-1">Share</span>
</button>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="shareDropdownBottom">
<li>
<a class="dropdown-item" href="https://reddit.com/submit?url=https://zer0-mistakes.com/docs/customization/&title=Customization" target="_blank" rel="noopener noreferrer">
<i class="bi bi-reddit me-2"></i>Share on Reddit
</a>
</li>
<li>
<a class="dropdown-item js-linkedin-share"
href="https://www.linkedin.com/sharing/share-offsite/?url=https://zer0-mistakes.com/docs/customization/"
target="_blank"
rel="noopener noreferrer"
title="Copies a cleaned article summary to your clipboard, then opens LinkedIn sharing"
data-share-url="https://zer0-mistakes.com/docs/customization/"
data-share-title="Customization"
data-share-description="Customize the Zer0-Mistakes Jekyll theme - layouts, styles, navigation, and more.">
<i class="bi bi-linkedin me-2"></i>Share on LinkedIn
</a>
</li>
<li>
<a class="dropdown-item" href="https://x.com/intent/tweet?url=https%3A%2F%2Fzer0-mistakes.com%2Fdocs%2Fcustomization%2F&text=Customization" target="_blank" aria-label="Share on X">
<i class="bi bi-twitter-x me-2"></i>Share on X
</a>
</li>
<li><hr class="dropdown-divider"></li>
<li><button class="dropdown-item" type="button" data-copy="https://zer0-mistakes.com/docs/customization/">
<i class="bi bi-clipboard me-2" aria-hidden="true"></i>Copy Link
</button>
</li>
</ul>
</div>
<!-- Copilot Agent Prompt Dropdown -->
<div class="dropdown">
<button class="btn btn-sm btn-success dropdown-toggle" type="button" id="copilotAgentDropdown" data-bs-toggle="dropdown" aria-expanded="false" title="Open a GitHub issue with a Copilot prompt for this page">
<i class="bi bi-robot" aria-hidden="true"></i>
<span class="d-none d-sm-inline ms-1">Copilot Agent</span>
</button>
<ul class="dropdown-menu dropdown-menu-end copilot-agent-menu" aria-labelledby="copilotAgentDropdown">
<li><h6 class="dropdown-header">Page Improvements</h6></li>
<li>
<a class="dropdown-item" href="https://github.com/bamr87/zer0-mistakes/issues/new?assignees=copilot&labels=ai-agent&title=%5BImprove+Page%5D+Customization&body=Act+as+a+Senior+Content+Editor+and+Frontend+Designer+for+the%0Azer0-mistakes+Jekyll+theme.%0A%0AImprove+the+page+referenced+in+the+%2A%2APage+Context%2A%2A+table+below.+Make+it%0Aclearer%2C+more+engaging%2C+and+visually+consistent+with+the+rest+of+the%0Asite+%E2%80%94+without+changing+its+core+message+or+breaking+existing+links.%0A%0A%2A%2AScope+%28this+page+only%29%3A%2A%2A%0A-+Tighten+copy%3A+remove+fluff%2C+fix+grammar%2C+improve+readability%0A-+Strengthen+the+opening+hook+and+the+closing+call-to-action%0A-+Verify+heading+hierarchy+%28single+H1%2C+logical+H2%2FH3+nesting%29%0A-+Confirm+front+matter+is+complete%3A+%60title%60%2C+%60description%60%2C+%60date%60%2C%0A++%60lastmod%60%2C+%60layout%60%2C+%60categories%60%2C+%60tags%60%2C+%60permalink%60%2C+%60preview%60%0A-+Improve+visual+rhythm%3A+paragraph+length%2C+lists%2C+callouts%2C+code+blocks%0A-+Validate+internal+links+and+image+paths+%28use+%60relative_url%60%29%0A-+Ensure+Bootstrap+5+utility+classes+are+used+over+custom+CSS%0A%0A%2A%2ADeliverables%3A%2A%2A%0A-+A+diff-style+proposal+of+the+edited+Markdown+%28front+matter+%2B+body%29%0A-+A+short+%22Why+these+changes%22+rationale+%283%E2%80%935+bullets%29%0A-+A+checklist+of+any+follow-up+items+that+are+out+of+scope%0A%0A---%0A%0A%23%23+%F0%9F%93%84+Page+Context%0A%0A%7C+Field+%7C+Value+%7C%0A%7C---%7C---%7C%0A%7C+%2A%2ATitle%2A%2A+%7C+Customization+%7C%0A%7C+%2A%2AURL%2A%2A+%7C+https%3A%2F%2Fzer0-mistakes.com%2Fdocs%2Fcustomization%2F+%7C%0A%7C+%2A%2AFile%2A%2A+%7C+%60pages%2F_docs%2Fcustomization%2Findex.md%60+%7C%0A%7C+%2A%2ABranch%2A%2A+%7C+%60main%60+%7C%0A%7C+%2A%2ALayout%2A%2A+%7C+%60default%60+%7C%0A%7C+%2A%2ACollection%2A%2A+%7C+%60docs%60+%7C%0A%7C+%2A%2AAuthor%2A%2A+%7C+Amr+%7C%0A%7C+%2A%2ADate%2A%2A+%7C+2026-06-18+05%3A36%3A53+%2B0000+%7C%0A%7C+%2A%2ALast+Modified%2A%2A+%7C+2026-06-16+00%3A00%3A00+%2B0000+%7C%0A%7C+%2A%2ATags%2A%2A+%7C+customization%2C+layouts%2C+styles%2C+navigation+%7C%0A%7C+%2A%2ACategories%2A%2A+%7C+docs%2C+customization+%7C%0A%0A%23%23+%F0%9F%94%A7+Environment%0A%0A%7C+Field+%7C+Value+%7C%0A%7C---%7C---%7C%0A%7C+%2A%2ARepository%2A%2A+%7C+%60bamr87%2Fzer0-mistakes%60+%7C%0A%7C+%2A%2ASite+URL%2A%2A+%7C+https%3A%2F%2Fzer0-mistakes.com+%7C%0A%7C+%2A%2AJekyll+Env%2A%2A+%7C+%60production%60+%7C%0A%7C+%2A%2ATheme%2A%2A+%7C+%60zer0-mistakes%60+%7C%0A%7C+%2A%2ABase+URL%2A%2A+%7C+%60%60+%7C%0A" target="_blank" rel="noopener noreferrer">
<span class="copilot-agent-item">
<i class="bi bi-stars copilot-agent-item__icon" aria-hidden="true"></i>
<span class="copilot-agent-item__text">
<span class="copilot-agent-item__label">Improve Page</span>
<small class="copilot-agent-item__desc">Polish content, structure, and presentation of this page</small>
</span>
</span>
</a>
</li>
<li>
<a class="dropdown-item" href="https://github.com/bamr87/zer0-mistakes/issues/new?assignees=copilot&labels=ai-agent&title=%5BExpand+Page%5D+Customization&body=Act+as+a+Subject+Matter+Expert+and+Technical+Writer.%0A%0AExpand+the+page+referenced+in+the+%2A%2APage+Context%2A%2A+table+below+by+adding%0Adepth%2C+real+examples%2C+and+any+sections+that+a+reader+would+reasonably%0Aexpect+but+are+currently+missing.%0A%0A%2A%2AExpansion+targets%3A%2A%2A%0A-+Add+concrete%2C+copy-pasteable+examples+%28code%2C+configs%2C+screenshots%29%0A-+Add+a+%22Prerequisites%22+and+%22Next+steps%22+%2F+%22Related%22+section%0A-+Add+a+short+FAQ+or+troubleshooting+block+when+relevant%0A-+Cross-link+to+related+posts%2C+docs%2C+or+theme+components+in+this+repo%0A-+Add+or+update+Mermaid+diagrams+where+they+clarify+flow%2Farchitecture%0A-+Keep+the+existing+tone%2C+structure%2C+and+front+matter+intact%0A%0A%2A%2ADeliverables%3A%2A%2A%0A-+The+new%2Fexpanded+Markdown+sections%2C+ready+to+merge+into+the+page%0A-+A+list+of+any+new+assets+needed+%28images%2C+diagrams%2C+data+files%29%0A-+Suggested+updates+to+%60tags%60%2C+%60categories%60%2C+and+%60description%60%0A%0A---%0A%0A%23%23+%F0%9F%93%84+Page+Context%0A%0A%7C+Field+%7C+Value+%7C%0A%7C---%7C---%7C%0A%7C+%2A%2ATitle%2A%2A+%7C+Customization+%7C%0A%7C+%2A%2AURL%2A%2A+%7C+https%3A%2F%2Fzer0-mistakes.com%2Fdocs%2Fcustomization%2F+%7C%0A%7C+%2A%2AFile%2A%2A+%7C+%60pages%2F_docs%2Fcustomization%2Findex.md%60+%7C%0A%7C+%2A%2ABranch%2A%2A+%7C+%60main%60+%7C%0A%7C+%2A%2ALayout%2A%2A+%7C+%60default%60+%7C%0A%7C+%2A%2ACollection%2A%2A+%7C+%60docs%60+%7C%0A%7C+%2A%2AAuthor%2A%2A+%7C+Amr+%7C%0A%7C+%2A%2ADate%2A%2A+%7C+2026-06-18+05%3A36%3A53+%2B0000+%7C%0A%7C+%2A%2ALast+Modified%2A%2A+%7C+2026-06-16+00%3A00%3A00+%2B0000+%7C%0A%7C+%2A%2ATags%2A%2A+%7C+customization%2C+layouts%2C+styles%2C+navigation+%7C%0A%7C+%2A%2ACategories%2A%2A+%7C+docs%2C+customization+%7C%0A%0A%23%23+%F0%9F%94%A7+Environment%0A%0A%7C+Field+%7C+Value+%7C%0A%7C---%7C---%7C%0A%7C+%2A%2ARepository%2A%2A+%7C+%60bamr87%2Fzer0-mistakes%60+%7C%0A%7C+%2A%2ASite+URL%2A%2A+%7C+https%3A%2F%2Fzer0-mistakes.com+%7C%0A%7C+%2A%2AJekyll+Env%2A%2A+%7C+%60production%60+%7C%0A%7C+%2A%2ATheme%2A%2A+%7C+%60zer0-mistakes%60+%7C%0A%7C+%2A%2ABase+URL%2A%2A+%7C+%60%60+%7C%0A" target="_blank" rel="noopener noreferrer">
<span class="copilot-agent-item">
<i class="bi bi-arrows-angle-expand copilot-agent-item__icon" aria-hidden="true"></i>
<span class="copilot-agent-item__text">
<span class="copilot-agent-item__label">Expand Page</span>
<small class="copilot-agent-item__desc">Add depth, examples, and missing sections to this page</small>
</span>
</span>
</a>
</li>
<li>
<a class="dropdown-item" href="https://github.com/bamr87/zer0-mistakes/issues/new?assignees=copilot&labels=ai-agent&title=%5BUpdate+Page%5D+Customization&body=Act+as+a+Documentation+Maintainer+responsible+for+keeping+the%0Azer0-mistakes+site+accurate+and+current.%0A%0AAudit+and+update+the+page+referenced+in+the+%2A%2APage+Context%2A%2A+table+below.%0ATreat+any+version+numbers%2C+dates%2C+screenshots%2C+or+external+references+as%0Asuspect+and+verify+them+against+the+current+state+of+the+repository+and%0Athe+wider+ecosystem.%0A%0A%2A%2AUpdate+checklist%3A%2A%2A%0A-+Bump+version+numbers%2C+release+names%2C+and+dependency+references%0A-+Replace+deprecated+Jekyll%2FBootstrap+patterns+with+current+equivalents%0A-+Refresh+screenshots%2C+GIFs%2C+and+embedded+examples%0A-+Re-validate+every+external+link%3B+replace+dead+or+moved+URLs%0A-+Update+%60lastmod%60+in+the+front+matter+and+add+a+brief+%22Updated%22+note%0A-+Reconcile+content+with+related+files+in+this+repo+%28configs%2C+layouts%2C%0A++includes%29+so+instructions+match+what+the+codebase+actually+does%0A%0A%2A%2ADeliverables%3A%2A%2A%0A-+Updated+Markdown+for+the+page+%28front+matter+%2B+body%29%0A-+A+short+changelog+summarising+what+was+refreshed+and+why%0A-+Any+follow-up+issues+to+file+for+changes+outside+this+page%0A%0A---%0A%0A%23%23+%F0%9F%93%84+Page+Context%0A%0A%7C+Field+%7C+Value+%7C%0A%7C---%7C---%7C%0A%7C+%2A%2ATitle%2A%2A+%7C+Customization+%7C%0A%7C+%2A%2AURL%2A%2A+%7C+https%3A%2F%2Fzer0-mistakes.com%2Fdocs%2Fcustomization%2F+%7C%0A%7C+%2A%2AFile%2A%2A+%7C+%60pages%2F_docs%2Fcustomization%2Findex.md%60+%7C%0A%7C+%2A%2ABranch%2A%2A+%7C+%60main%60+%7C%0A%7C+%2A%2ALayout%2A%2A+%7C+%60default%60+%7C%0A%7C+%2A%2ACollection%2A%2A+%7C+%60docs%60+%7C%0A%7C+%2A%2AAuthor%2A%2A+%7C+Amr+%7C%0A%7C+%2A%2ADate%2A%2A+%7C+2026-06-18+05%3A36%3A53+%2B0000+%7C%0A%7C+%2A%2ALast+Modified%2A%2A+%7C+2026-06-16+00%3A00%3A00+%2B0000+%7C%0A%7C+%2A%2ATags%2A%2A+%7C+customization%2C+layouts%2C+styles%2C+navigation+%7C%0A%7C+%2A%2ACategories%2A%2A+%7C+docs%2C+customization+%7C%0A%0A%23%23+%F0%9F%94%A7+Environment%0A%0A%7C+Field+%7C+Value+%7C%0A%7C---%7C---%7C%0A%7C+%2A%2ARepository%2A%2A+%7C+%60bamr87%2Fzer0-mistakes%60+%7C%0A%7C+%2A%2ASite+URL%2A%2A+%7C+https%3A%2F%2Fzer0-mistakes.com+%7C%0A%7C+%2A%2AJekyll+Env%2A%2A+%7C+%60production%60+%7C%0A%7C+%2A%2ATheme%2A%2A+%7C+%60zer0-mistakes%60+%7C%0A%7C+%2A%2ABase+URL%2A%2A+%7C+%60%60+%7C%0A" target="_blank" rel="noopener noreferrer">
<span class="copilot-agent-item">
<i class="bi bi-arrow-clockwise copilot-agent-item__icon" aria-hidden="true"></i>
<span class="copilot-agent-item__text">
<span class="copilot-agent-item__label">Update Page</span>
<small class="copilot-agent-item__desc">Refresh outdated content, versions, links, and screenshots</small>
</span>
</span>
</a>
</li>
<li>
<a class="dropdown-item" href="https://github.com/bamr87/zer0-mistakes/issues/new?assignees=copilot&labels=ai-agent&title=%5BFix+Page+Issue%5D+Customization&body=Act+as+a+Frontend+QA+Engineer+for+the+zer0-mistakes+Jekyll+theme.%0A%0AInvestigate+and+fix+the+issue+described+below+on+the+page+referenced+in%0Athe+%2A%2APage+Context%2A%2A+table.+Reproduce+it+locally+with+%60docker-compose+up%60%0Abefore+proposing+a+change.%0A%0A%2A%2APlease+describe+%28fill+in+before+submitting%29%3A%2A%2A%0A-+%2A%2AWhat+is+wrong%3F%2A%2A+%3C%21--+typo%2C+broken+link%2C+image%2C+layout%2C+behaviour+--%3E%0A-+%2A%2AWhere+on+the+page%3F%2A%2A+%3C%21--+section+heading%2C+line%2C+screenshot+region+--%3E%0A-+%2A%2AExpected%3A%2A%2A+%3C%21--+what+should+appear+%2F+happen+--%3E%0A-+%2A%2AActual%3A%2A%2A+%3C%21--+what+currently+appears+%2F+happens+--%3E%0A-+%2A%2ABrowser+%2F+device+%28if+visual%29%3A%2A%2A+%3C%21--+e.g.+Chrome+124+desktop%2C+iOS+Safari+--%3E%0A%0A%2A%2ADeliverables%3A%2A%2A%0A-+Root-cause+analysis+%28content+vs.+layout+vs.+include+vs.+config%29%0A-+Minimal%2C+surgical+fix+%28Markdown%2C+Liquid%2C+SCSS%2C+or+front+matter%29%0A-+Verification+steps+and+a+passing+%60bundle+exec+jekyll+build%60%0A%0A---%0A%0A%23%23+%F0%9F%93%84+Page+Context%0A%0A%7C+Field+%7C+Value+%7C%0A%7C---%7C---%7C%0A%7C+%2A%2ATitle%2A%2A+%7C+Customization+%7C%0A%7C+%2A%2AURL%2A%2A+%7C+https%3A%2F%2Fzer0-mistakes.com%2Fdocs%2Fcustomization%2F+%7C%0A%7C+%2A%2AFile%2A%2A+%7C+%60pages%2F_docs%2Fcustomization%2Findex.md%60+%7C%0A%7C+%2A%2ABranch%2A%2A+%7C+%60main%60+%7C%0A%7C+%2A%2ALayout%2A%2A+%7C+%60default%60+%7C%0A%7C+%2A%2ACollection%2A%2A+%7C+%60docs%60+%7C%0A%7C+%2A%2AAuthor%2A%2A+%7C+Amr+%7C%0A%7C+%2A%2ADate%2A%2A+%7C+2026-06-18+05%3A36%3A53+%2B0000+%7C%0A%7C+%2A%2ALast+Modified%2A%2A+%7C+2026-06-16+00%3A00%3A00+%2B0000+%7C%0A%7C+%2A%2ATags%2A%2A+%7C+customization%2C+layouts%2C+styles%2C+navigation+%7C%0A%7C+%2A%2ACategories%2A%2A+%7C+docs%2C+customization+%7C%0A%0A%23%23+%F0%9F%94%A7+Environment%0A%0A%7C+Field+%7C+Value+%7C%0A%7C---%7C---%7C%0A%7C+%2A%2ARepository%2A%2A+%7C+%60bamr87%2Fzer0-mistakes%60+%7C%0A%7C+%2A%2ASite+URL%2A%2A+%7C+https%3A%2F%2Fzer0-mistakes.com+%7C%0A%7C+%2A%2AJekyll+Env%2A%2A+%7C+%60production%60+%7C%0A%7C+%2A%2ATheme%2A%2A+%7C+%60zer0-mistakes%60+%7C%0A%7C+%2A%2ABase+URL%2A%2A+%7C+%60%60+%7C%0A" target="_blank" rel="noopener noreferrer">
<span class="copilot-agent-item">
<i class="bi bi-bug copilot-agent-item__icon" aria-hidden="true"></i>
<span class="copilot-agent-item__text">
<span class="copilot-agent-item__label">Fix Page Issue</span>
<small class="copilot-agent-item__desc">Report a typo, broken link, layout glitch, or content bug</small>
</span>
</span>
</a>
</li>
<li>
<a class="dropdown-item" href="https://github.com/bamr87/zer0-mistakes/issues/new?assignees=copilot&labels=ai-agent&title=%5BSEO+Optimize%5D+Customization&body=Act+as+a+Technical+SEO+Specialist.%0A%0AOptimise+the+page+referenced+in+the+%2A%2APage+Context%2A%2A+table+below+for%0Asearch+engines+and+social+sharing%2C+without+sacrificing+readability.%0A%0A%2A%2AAudit+and+improve%3A%2A%2A%0A-+Front+matter+%60title%60+%28%E2%89%A4+60+chars%29+and+%60description%60+%28150%E2%80%93160+chars%29%0A-+Primary+keyword+in+H1%2C+first+paragraph%2C+and+at+least+one+H2%0A-+%60permalink%60+is+short%2C+lowercase%2C+and+hyphen-separated%0A-+%60tags%60+and+%60categories%60+align+with+site+taxonomy%0A-+%60preview%60+image+exists%2C+has+descriptive+alt+text%2C+and+good+aspect+ratio%0A-+Open+Graph+%2B+Twitter+Card+metadata+via+existing+includes%0A-+JSON-LD+structured+data+%28Article+%2F+BlogPosting%29+where+applicable%0A-+Internal+links+to+high-value+related+pages%2C+with+descriptive+anchors%0A%0A%2A%2ADeliverables%3A%2A%2A%0A-+Updated+front+matter%0A-+Specific+in-body+edits+%28H1%2FH2%2Fintro%29%0A-+A+keyword%2Fintent+map+%28primary+%2B+3%E2%80%935+secondary%29%0A-+Any+sitemap%2C+robots%2C+or+%60_config.yml%60+changes+required%0A%0A---%0A%0A%23%23+%F0%9F%93%84+Page+Context%0A%0A%7C+Field+%7C+Value+%7C%0A%7C---%7C---%7C%0A%7C+%2A%2ATitle%2A%2A+%7C+Customization+%7C%0A%7C+%2A%2AURL%2A%2A+%7C+https%3A%2F%2Fzer0-mistakes.com%2Fdocs%2Fcustomization%2F+%7C%0A%7C+%2A%2AFile%2A%2A+%7C+%60pages%2F_docs%2Fcustomization%2Findex.md%60+%7C%0A%7C+%2A%2ABranch%2A%2A+%7C+%60main%60+%7C%0A%7C+%2A%2ALayout%2A%2A+%7C+%60default%60+%7C%0A%7C+%2A%2ACollection%2A%2A+%7C+%60docs%60+%7C%0A%7C+%2A%2AAuthor%2A%2A+%7C+Amr+%7C%0A%7C+%2A%2ADate%2A%2A+%7C+2026-06-18+05%3A36%3A53+%2B0000+%7C%0A%7C+%2A%2ALast+Modified%2A%2A+%7C+2026-06-16+00%3A00%3A00+%2B0000+%7C%0A%7C+%2A%2ATags%2A%2A+%7C+customization%2C+layouts%2C+styles%2C+navigation+%7C%0A%7C+%2A%2ACategories%2A%2A+%7C+docs%2C+customization+%7C%0A%0A%23%23+%F0%9F%94%A7+Environment%0A%0A%7C+Field+%7C+Value+%7C%0A%7C---%7C---%7C%0A%7C+%2A%2ARepository%2A%2A+%7C+%60bamr87%2Fzer0-mistakes%60+%7C%0A%7C+%2A%2ASite+URL%2A%2A+%7C+https%3A%2F%2Fzer0-mistakes.com+%7C%0A%7C+%2A%2AJekyll+Env%2A%2A+%7C+%60production%60+%7C%0A%7C+%2A%2ATheme%2A%2A+%7C+%60zer0-mistakes%60+%7C%0A%7C+%2A%2ABase+URL%2A%2A+%7C+%60%60+%7C%0A" target="_blank" rel="noopener noreferrer">
<span class="copilot-agent-item">
<i class="bi bi-graph-up-arrow copilot-agent-item__icon" aria-hidden="true"></i>
<span class="copilot-agent-item__text">
<span class="copilot-agent-item__label">SEO Optimize</span>
<small class="copilot-agent-item__desc">Improve discoverability, metadata, and structured data</small>
</span>
</span>
</a>
</li>
<li>
<a class="dropdown-item" href="https://github.com/bamr87/zer0-mistakes/issues/new?assignees=copilot&labels=ai-agent&title=%5BAccessibility+Audit%5D+Customization&body=Act+as+an+Accessibility+%28a11y%29+Engineer.%0A%0AAudit+the+page+referenced+in+the+%2A%2APage+Context%2A%2A+table+below+against%0AWCAG+2.1+AA+and+propose+concrete+fixes+in+Markdown%2C+Liquid%2C+or+SCSS.%0A%0A%2A%2AAudit+areas%3A%2A%2A%0A-+Semantic+HTML+and+heading+order%0A-+Alt+text+on+every+meaningful+image%3B+empty+alt+on+decorative+ones%0A-+Sufficient+colour+contrast+%28%E2%89%A5+4.5%3A1+body%2C+%E2%89%A5+3%3A1+large+text%2FUI%29%0A-+Keyboard+navigability+and+visible+focus+states%0A-+ARIA+attributes+on+Bootstrap+components+%28modals%2C+dropdowns%2C+tabs%29%0A-+Form+labels%2C+error+messages%2C+and+%60aria-describedby%60+associations%0A-+Skip+links+and+landmark+regions+%28%60%3Cmain%3E%60%2C+%60%3Cnav%3E%60%2C+%60%3Caside%3E%60%29%0A-+Reduced-motion+and+prefers-color-scheme+respect%0A%0A%2A%2ADeliverables%3A%2A%2A%0A-+Findings+table%3A+issue%2C+WCAG+criterion%2C+severity%2C+fix%0A-+Patches+for+the+page+and+any+shared+includes+that+need+updating%0A-+A+re-test+plan+%28axe-core%2C+Lighthouse%2C+manual+keyboard+pass%29%0A%0A---%0A%0A%23%23+%F0%9F%93%84+Page+Context%0A%0A%7C+Field+%7C+Value+%7C%0A%7C---%7C---%7C%0A%7C+%2A%2ATitle%2A%2A+%7C+Customization+%7C%0A%7C+%2A%2AURL%2A%2A+%7C+https%3A%2F%2Fzer0-mistakes.com%2Fdocs%2Fcustomization%2F+%7C%0A%7C+%2A%2AFile%2A%2A+%7C+%60pages%2F_docs%2Fcustomization%2Findex.md%60+%7C%0A%7C+%2A%2ABranch%2A%2A+%7C+%60main%60+%7C%0A%7C+%2A%2ALayout%2A%2A+%7C+%60default%60+%7C%0A%7C+%2A%2ACollection%2A%2A+%7C+%60docs%60+%7C%0A%7C+%2A%2AAuthor%2A%2A+%7C+Amr+%7C%0A%7C+%2A%2ADate%2A%2A+%7C+2026-06-18+05%3A36%3A53+%2B0000+%7C%0A%7C+%2A%2ALast+Modified%2A%2A+%7C+2026-06-16+00%3A00%3A00+%2B0000+%7C%0A%7C+%2A%2ATags%2A%2A+%7C+customization%2C+layouts%2C+styles%2C+navigation+%7C%0A%7C+%2A%2ACategories%2A%2A+%7C+docs%2C+customization+%7C%0A%0A%23%23+%F0%9F%94%A7+Environment%0A%0A%7C+Field+%7C+Value+%7C%0A%7C---%7C---%7C%0A%7C+%2A%2ARepository%2A%2A+%7C+%60bamr87%2Fzer0-mistakes%60+%7C%0A%7C+%2A%2ASite+URL%2A%2A+%7C+https%3A%2F%2Fzer0-mistakes.com+%7C%0A%7C+%2A%2AJekyll+Env%2A%2A+%7C+%60production%60+%7C%0A%7C+%2A%2ATheme%2A%2A+%7C+%60zer0-mistakes%60+%7C%0A%7C+%2A%2ABase+URL%2A%2A+%7C+%60%60+%7C%0A" target="_blank" rel="noopener noreferrer">
<span class="copilot-agent-item">
<i class="bi bi-universal-access copilot-agent-item__icon" aria-hidden="true"></i>
<span class="copilot-agent-item__text">
<span class="copilot-agent-item__label">Accessibility Audit</span>
<small class="copilot-agent-item__desc">Audit this page for WCAG 2.1 AA compliance</small>
</span>
</span>
</a>
</li>
<li><hr class="dropdown-divider"></li>
<li><h6 class="dropdown-header">Site Improvements</h6></li>
<li>
<a class="dropdown-item" href="https://github.com/bamr87/zer0-mistakes/issues/new?assignees=copilot&labels=ai-agent&title=%5BUI%2FUX+Improvement%5D+Customization&body=Act+as+a+Senior+UI%2FUX+Designer+working+in+Bootstrap+5+and+Jekyll.%0A%0APropose+a+UI%2FUX+improvement+for+the+zer0-mistakes+theme.+Use+the+page%0Areferenced+in+the+%2A%2APage+Context%2A%2A+table+below+as+the+starting+example%3B%0Awhere+the+change+applies+site-wide%2C+call+that+out+explicitly.%0A%0A%2A%2ACover+in+your+proposal%3A%2A%2A%0A-+%2A%2AProblem+%2F+opportunity%2A%2A+%E2%80%94+what+user+pain+or+quality+gap+exists%3F%0A-+%2A%2AAffected+surfaces%2A%2A+%E2%80%94+layouts%2C+includes%2C+components%2C+or+data+files%0A-+%2A%2ADesign+direction%2A%2A+%E2%80%94+spacing%2C+typography%2C+colour%2C+motion%2C+hierarchy%0A-+%2A%2ABootstrap-first+approach%2A%2A+%E2%80%94+utilities+and+components+over+custom+CSS%0A-+%2A%2AResponsive+behaviour%2A%2A+%E2%80%94+xs+%2F+sm+%2F+md+%2F+lg+%2F+xl+%2F+xxl+breakpoints%0A-+%2A%2AAccessibility%2A%2A+%E2%80%94+contrast%2C+focus%2C+ARIA%2C+reduced-motion%0A-+%2A%2ADark+mode+%2F+colour+scheme%2A%2A+considerations%0A-+%2A%2ABefore%2Fafter+sketch+or+description%2A%2A+of+the+change%0A%0A%2A%2ADeliverables%3A%2A%2A%0A-+A+concrete+change+list+mapped+to+files+in+%60_layouts%2F%60%2C+%60_includes%2F%60%2C%0A++%60_sass%2F%60%2C+and+%60assets%2F%60%0A-+SCSS+%2F+Liquid+%2F+HTML+snippets+ready+to+drop+in%0A-+A+short+test+plan+covering+desktop+%2B+mobile+%2B+keyboard%0A%0A---%0A%0A%23%23+%F0%9F%93%84+Page+Context%0A%0A%7C+Field+%7C+Value+%7C%0A%7C---%7C---%7C%0A%7C+%2A%2ATitle%2A%2A+%7C+Customization+%7C%0A%7C+%2A%2AURL%2A%2A+%7C+https%3A%2F%2Fzer0-mistakes.com%2Fdocs%2Fcustomization%2F+%7C%0A%7C+%2A%2AFile%2A%2A+%7C+%60pages%2F_docs%2Fcustomization%2Findex.md%60+%7C%0A%7C+%2A%2ABranch%2A%2A+%7C+%60main%60+%7C%0A%7C+%2A%2ALayout%2A%2A+%7C+%60default%60+%7C%0A%7C+%2A%2ACollection%2A%2A+%7C+%60docs%60+%7C%0A%7C+%2A%2AAuthor%2A%2A+%7C+Amr+%7C%0A%7C+%2A%2ADate%2A%2A+%7C+2026-06-18+05%3A36%3A53+%2B0000+%7C%0A%7C+%2A%2ALast+Modified%2A%2A+%7C+2026-06-16+00%3A00%3A00+%2B0000+%7C%0A%7C+%2A%2ATags%2A%2A+%7C+customization%2C+layouts%2C+styles%2C+navigation+%7C%0A%7C+%2A%2ACategories%2A%2A+%7C+docs%2C+customization+%7C%0A%0A%23%23+%F0%9F%94%A7+Environment%0A%0A%7C+Field+%7C+Value+%7C%0A%7C---%7C---%7C%0A%7C+%2A%2ARepository%2A%2A+%7C+%60bamr87%2Fzer0-mistakes%60+%7C%0A%7C+%2A%2ASite+URL%2A%2A+%7C+https%3A%2F%2Fzer0-mistakes.com+%7C%0A%7C+%2A%2AJekyll+Env%2A%2A+%7C+%60production%60+%7C%0A%7C+%2A%2ATheme%2A%2A+%7C+%60zer0-mistakes%60+%7C%0A%7C+%2A%2ABase+URL%2A%2A+%7C+%60%60+%7C%0A" target="_blank" rel="noopener noreferrer">
<span class="copilot-agent-item">
<i class="bi bi-palette copilot-agent-item__icon" aria-hidden="true"></i>
<span class="copilot-agent-item__text">
<span class="copilot-agent-item__label">UI/UX Improvement</span>
<small class="copilot-agent-item__desc">Propose a design or UX refinement for the theme</small>
</span>
</span>
</a>
</li>
<li>
<a class="dropdown-item" href="https://github.com/bamr87/zer0-mistakes/issues/new?assignees=copilot&labels=ai-agent&title=%5BNew+Feature%5D+Customization&body=Act+as+a+Product+Manager+%2B+Frontend+Engineer+for+the+zer0-mistakes%0AJekyll+theme.%0A%0APropose+a+new+feature+for+the+site+or+theme.+Use+the+page+referenced+in%0Athe+%2A%2APage+Context%2A%2A+table+below+as+the+inspiration+%2F+first+consumer+of%0Athe+feature+where+it+makes+sense.%0A%0A%2A%2APlease+describe%3A%2A%2A%0A-+%2A%2AUser+story%2A%2A+%E2%80%94+As+a+%5Breader+%2F+author+%2F+theme+adopter%5D%2C+I+want%E2%80%A6%0A-+%2A%2AProblem+solved%2A%2A+and+the+success+metric%0A-+%2A%2AScope%2A%2A+%E2%80%94+pages%2C+layouts%2C+includes%2C+data+files%2C+configs+touched%0A-+%2A%2AConfiguration%2A%2A+%E2%80%94+what+goes+into+%60_config.yml%60+%2F+%60_data%2F%2A.yml%60%3F%0A-+%2A%2ADependencies%2A%2A+%E2%80%94+any+new+gems%2C+JS+libs%2C+or+vendor+assets%3F%0A-+%2A%2APrivacy+%2F+analytics%2A%2A+%E2%80%94+does+it+need+consent+gating%3F%0A-+%2A%2ARollout+plan%2A%2A+%E2%80%94+feature+flag%2C+opt-in+via+front+matter%2C+default-on%3F%0A-+%2A%2AOut+of+scope%2A%2A+items%0A%0A%2A%2ADeliverables%3A%2A%2A%0A-+A+minimal%2C+working+implementation+plan+%28file-by-file%29%0A-+Sample+Liquid+%2F+HTML+%2F+SCSS+%2F+JS+scaffolding%0A-+Documentation+stub+for+%60docs%2F%60+or+%60pages%2F_docs%2F%60%0A-+CHANGELOG+entry+following+Keep+a+Changelog+format%0A%0A---%0A%0A%23%23+%F0%9F%93%84+Page+Context%0A%0A%7C+Field+%7C+Value+%7C%0A%7C---%7C---%7C%0A%7C+%2A%2ATitle%2A%2A+%7C+Customization+%7C%0A%7C+%2A%2AURL%2A%2A+%7C+https%3A%2F%2Fzer0-mistakes.com%2Fdocs%2Fcustomization%2F+%7C%0A%7C+%2A%2AFile%2A%2A+%7C+%60pages%2F_docs%2Fcustomization%2Findex.md%60+%7C%0A%7C+%2A%2ABranch%2A%2A+%7C+%60main%60+%7C%0A%7C+%2A%2ALayout%2A%2A+%7C+%60default%60+%7C%0A%7C+%2A%2ACollection%2A%2A+%7C+%60docs%60+%7C%0A%7C+%2A%2AAuthor%2A%2A+%7C+Amr+%7C%0A%7C+%2A%2ADate%2A%2A+%7C+2026-06-18+05%3A36%3A53+%2B0000+%7C%0A%7C+%2A%2ALast+Modified%2A%2A+%7C+2026-06-16+00%3A00%3A00+%2B0000+%7C%0A%7C+%2A%2ATags%2A%2A+%7C+customization%2C+layouts%2C+styles%2C+navigation+%7C%0A%7C+%2A%2ACategories%2A%2A+%7C+docs%2C+customization+%7C%0A%0A%23%23+%F0%9F%94%A7+Environment%0A%0A%7C+Field+%7C+Value+%7C%0A%7C---%7C---%7C%0A%7C+%2A%2ARepository%2A%2A+%7C+%60bamr87%2Fzer0-mistakes%60+%7C%0A%7C+%2A%2ASite+URL%2A%2A+%7C+https%3A%2F%2Fzer0-mistakes.com+%7C%0A%7C+%2A%2AJekyll+Env%2A%2A+%7C+%60production%60+%7C%0A%7C+%2A%2ATheme%2A%2A+%7C+%60zer0-mistakes%60+%7C%0A%7C+%2A%2ABase+URL%2A%2A+%7C+%60%60+%7C%0A" target="_blank" rel="noopener noreferrer">
<span class="copilot-agent-item">
<i class="bi bi-lightbulb copilot-agent-item__icon" aria-hidden="true"></i>
<span class="copilot-agent-item__text">
<span class="copilot-agent-item__label">New Feature</span>
<small class="copilot-agent-item__desc">Propose a new site-wide feature or capability</small>
</span>
</span>
</a>
</li>
<li>
<a class="dropdown-item" href="https://github.com/bamr87/zer0-mistakes/issues/new?assignees=copilot&labels=ai-agent&title=%5BComponent+Enhancement%5D+Customization&body=Act+as+a+Senior+Jekyll+Theme+Developer.%0A%0AEnhance+a+shared+component+used+by+the+page+referenced+in+the%0A%2A%2APage+Context%2A%2A+table+below+%E2%80%94+a+layout+in+%60_layouts%2F%60%2C+an+include+in%0A%60_includes%2F%60%2C+or+a+partial+in+%60_sass%2F%60.+Improvements+should+benefit+every%0Apage+that+uses+the+component%2C+not+just+this+one.%0A%0A%2A%2ATargets+to+consider%3A%2A%2A%0A-+Cleaner+Liquid%3A+safe+%60default%3A%60+filters%2C+fewer+nested+%60if%60s%0A-+Parameterise+hard-coded+values+via+%60include.%2A%60+arguments%0A-+Consistent+BEM-style+class+names+and+Bootstrap+utility+usage%0A-+Add+the+standard+component+header+comment+block%0A-+Improve+mobile+responsiveness+and+accessibility%0A-+Document+parameters+and+usage+in+the+file+header%0A%0A%2A%2ADeliverables%3A%2A%2A%0A-+The+enhanced+file%28s%29%2C+preserving+backward+compatibility%0A-+A+migration+note+if+any+include+parameters+changed%0A-+Before%2Fafter+rendering+notes+for+at+least+one+page+that+uses+it%0A-+A+test+plan%3A+%60docker-compose+exec+jekyll+bundle+exec+jekyll+build%60%0A%0A---%0A%0A%23%23+%F0%9F%93%84+Page+Context%0A%0A%7C+Field+%7C+Value+%7C%0A%7C---%7C---%7C%0A%7C+%2A%2ATitle%2A%2A+%7C+Customization+%7C%0A%7C+%2A%2AURL%2A%2A+%7C+https%3A%2F%2Fzer0-mistakes.com%2Fdocs%2Fcustomization%2F+%7C%0A%7C+%2A%2AFile%2A%2A+%7C+%60pages%2F_docs%2Fcustomization%2Findex.md%60+%7C%0A%7C+%2A%2ABranch%2A%2A+%7C+%60main%60+%7C%0A%7C+%2A%2ALayout%2A%2A+%7C+%60default%60+%7C%0A%7C+%2A%2ACollection%2A%2A+%7C+%60docs%60+%7C%0A%7C+%2A%2AAuthor%2A%2A+%7C+Amr+%7C%0A%7C+%2A%2ADate%2A%2A+%7C+2026-06-18+05%3A36%3A53+%2B0000+%7C%0A%7C+%2A%2ALast+Modified%2A%2A+%7C+2026-06-16+00%3A00%3A00+%2B0000+%7C%0A%7C+%2A%2ATags%2A%2A+%7C+customization%2C+layouts%2C+styles%2C+navigation+%7C%0A%7C+%2A%2ACategories%2A%2A+%7C+docs%2C+customization+%7C%0A%0A%23%23+%F0%9F%94%A7+Environment%0A%0A%7C+Field+%7C+Value+%7C%0A%7C---%7C---%7C%0A%7C+%2A%2ARepository%2A%2A+%7C+%60bamr87%2Fzer0-mistakes%60+%7C%0A%7C+%2A%2ASite+URL%2A%2A+%7C+https%3A%2F%2Fzer0-mistakes.com+%7C%0A%7C+%2A%2AJekyll+Env%2A%2A+%7C+%60production%60+%7C%0A%7C+%2A%2ATheme%2A%2A+%7C+%60zer0-mistakes%60+%7C%0A%7C+%2A%2ABase+URL%2A%2A+%7C+%60%60+%7C%0A" target="_blank" rel="noopener noreferrer">
<span class="copilot-agent-item">
<i class="bi bi-puzzle copilot-agent-item__icon" aria-hidden="true"></i>
<span class="copilot-agent-item__text">
<span class="copilot-agent-item__label">Component Enhancement</span>
<small class="copilot-agent-item__desc">Improve a Jekyll layout, include, or shared component</small>
</span>
</span>
</a>
</li>
<li>
<a class="dropdown-item" href="https://github.com/bamr87/zer0-mistakes/issues/new?assignees=copilot&labels=ai-agent&title=%5BPerformance+Optimization%5D+Customization&body=Act+as+a+Web+Performance+Engineer.%0A%0AProfile+and+optimise+the+site%2C+using+the+page+referenced+in+the%0A%2A%2APage+Context%2A%2A+table+below+as+a+representative+measurement+target.%0A%0A%2A%2AInvestigate%3A%2A%2A%0A-+Core+Web+Vitals%3A+LCP+%28Largest+Contentful+Paint%29%2C+CLS+%28Cumulative%0A++Layout+Shift%29%2C+and+INP+%28Interaction+to+Next+Paint%29+for+this+page%0A-+Render-blocking+CSS%2FJS+in+%60_includes%2Fcore%2Fhead.html%60+and+%60js-cdn.html%60%0A-+Vendored+Bootstrap+and+Bootstrap+Icons+under+%60assets%2Fvendor%2F%60%0A-+Image+strategy%3A+dimensions%2C+%60loading%3D%22lazy%22%60%2C+modern+formats%0A-+Liquid+hot+spots%3A+nested+loops%2C+repeated+%60where%60+filters%0A-+Build+output+size+in+%60_site%2F%60+and+unused+CSS%0A%0A%2A%2ADeliverables%3A%2A%2A%0A-+Lighthouse+%2F+WebPageTest+results+before+and+after%0A-+Specific+patches+to+layouts%2C+includes%2C+SCSS%2C+and+config%0A-+Any+new+build+steps+or+scripts+%28must+be+opt-in%2C+GitHub+Pages-safe%29%0A-+A+short+report+on+tradeoffs+and+follow-ups%0A%0A---%0A%0A%23%23+%F0%9F%93%84+Page+Context%0A%0A%7C+Field+%7C+Value+%7C%0A%7C---%7C---%7C%0A%7C+%2A%2ATitle%2A%2A+%7C+Customization+%7C%0A%7C+%2A%2AURL%2A%2A+%7C+https%3A%2F%2Fzer0-mistakes.com%2Fdocs%2Fcustomization%2F+%7C%0A%7C+%2A%2AFile%2A%2A+%7C+%60pages%2F_docs%2Fcustomization%2Findex.md%60+%7C%0A%7C+%2A%2ABranch%2A%2A+%7C+%60main%60+%7C%0A%7C+%2A%2ALayout%2A%2A+%7C+%60default%60+%7C%0A%7C+%2A%2ACollection%2A%2A+%7C+%60docs%60+%7C%0A%7C+%2A%2AAuthor%2A%2A+%7C+Amr+%7C%0A%7C+%2A%2ADate%2A%2A+%7C+2026-06-18+05%3A36%3A53+%2B0000+%7C%0A%7C+%2A%2ALast+Modified%2A%2A+%7C+2026-06-16+00%3A00%3A00+%2B0000+%7C%0A%7C+%2A%2ATags%2A%2A+%7C+customization%2C+layouts%2C+styles%2C+navigation+%7C%0A%7C+%2A%2ACategories%2A%2A+%7C+docs%2C+customization+%7C%0A%0A%23%23+%F0%9F%94%A7+Environment%0A%0A%7C+Field+%7C+Value+%7C%0A%7C---%7C---%7C%0A%7C+%2A%2ARepository%2A%2A+%7C+%60bamr87%2Fzer0-mistakes%60+%7C%0A%7C+%2A%2ASite+URL%2A%2A+%7C+https%3A%2F%2Fzer0-mistakes.com+%7C%0A%7C+%2A%2AJekyll+Env%2A%2A+%7C+%60production%60+%7C%0A%7C+%2A%2ATheme%2A%2A+%7C+%60zer0-mistakes%60+%7C%0A%7C+%2A%2ABase+URL%2A%2A+%7C+%60%60+%7C%0A" target="_blank" rel="noopener noreferrer">
<span class="copilot-agent-item">
<i class="bi bi-speedometer2 copilot-agent-item__icon" aria-hidden="true"></i>
<span class="copilot-agent-item__text">
<span class="copilot-agent-item__label">Performance Optimization</span>
<small class="copilot-agent-item__desc">Improve load time, Core Web Vitals, and asset delivery</small>
</span>
</span>
</a>
</li>
</ul>
</div>
<!-- Edit on GitHub Button -->
<a href="https://github.com/bamr87/zer0-mistakes/blob/main/pages/_docs/customization/index.md"
class="btn btn-sm btn-dark bd-intro-action-link"
target="_blank"
rel="noopener noreferrer">
<i class="bi bi-github" aria-hidden="true"></i>
<span class="d-none d-sm-inline ms-1">Edit on GitHub</span>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- =============================== -->
<!-- RIGHT SIDEBAR - Table of Contents -->
<!-- =============================== -->
<!-- Page outline, shortcuts, and related links (hidden on mobile) -->
<div class="bd-toc text-body-secondary">
<!--
file: sidebar-right.html
path: _includes/sidebar-right.html
includes: nav_list.html, content/toc.html
-->
<!-- FOUC guard: apply hidden TOC preference before paint -->
<script>
try {
if (localStorage.getItem('zer0-nav-toc-visible') === 'false') {
document.documentElement.classList.add('bd-toc-pref-hidden');
}
} catch (e) {}
</script>
<!-- Right sidebar container -->
<div class="offcanvas-lg offcanvas-end" tabindex="-1" id="tocContents" aria-labelledby="tocLabel">
<div class="offcanvas-header">
<h2 class="offcanvas-title h5 mb-0" id="tocLabel">Table of Contents</h2>
<div class="d-flex align-items-center gap-1">
<button type="button"
class="btn btn-sm btn-link text-body-secondary bd-toc-visibility-toggle d-lg-none px-2"
aria-controls="tocContents"
aria-expanded="true"
aria-label="Hide table of contents">
<i class="bi bi-eye-slash" aria-hidden="true"></i>
<span class="visually-hidden">Hide table of contents</span>
</button>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close table of contents" data-bs-target="#tocContents"></button>
</div>
</div>
<div class="offcanvas-body">
<!-- Table of contents -->
<nav id="TableOfContents" role="navigation" aria-label="Table of Contents">
<!-- TOC title -->
<div class="mb-3 d-flex align-items-center justify-content-between gap-2">
<strong class="d-flex align-items-center mb-0">
<i class="bi bi-file-text me-2" aria-hidden="true"></i>
On this page
</strong>
<button type="button"
class="btn btn-sm btn-link text-body-secondary bd-toc-visibility-toggle d-none d-lg-inline-flex flex-shrink-0 px-1"
aria-controls="tocContents"
aria-expanded="true"
aria-label="Hide table of contents"
title="Hide table of contents">
<i class="bi bi-layout-sidebar-inset-reverse" aria-hidden="true"></i>
<span class="visually-hidden">Hide table of contents</span>
</button>
</div>
<ul class="list-group-flush"><li class="list-group-item"><a href="#customization" class="">Customization</a><ul><li class="list-group-item"><a href="#customization-areas" class="">Customization Areas</a></li><li class="list-group-item"><a href="#quick-customizations" class="">Quick Customizations</a><ul><li class="list-group-item"><a href="#site-identity" class="">Site Identity</a></li><li class="list-group-item"><a href="#colors-and-branding" class="">Colors and Branding</a></li><li class="list-group-item"><a href="#navigation" class="">Navigation</a></li></ul></li><li class="list-group-item"><a href="#guides-in-this-section" class="">Guides in This Section</a></li><li class="list-group-item"><a href="#layout-hierarchy" class="">Layout Hierarchy</a></li><li class="list-group-item"><a href="#override-theme-files" class="">Override Theme Files</a></li><li class="list-group-item"><a href="#next-steps" class="">Next Steps</a></li><li class="list-group-item"><a href="#technical-reference" class="">Technical Reference</a></li><li class="list-group-item"><a href="#see-also" class="">See also</a></li></ul></li></ul>
</nav>
</div>
</div>
</div>
<!-- =============================== -->
<!-- MAIN CONTENT BODY -->
<!-- =============================== -->
<!-- Where the actual page content is rendered -->
<div class="bd-content ps-lg-2">
<h1 id="customization">Customization</h1>
<p>Customize the Zer0-Mistakes theme to match your brand and requirements.</p>
<h2 id="customization-areas">Customization Areas</h2>
<table>
<thead>
<tr>
<th>Area</th>
<th>Location</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Layouts</strong></td>
<td><code class="language-plaintext highlighter-rouge">_layouts/</code></td>
<td>Page templates and structure</td>
</tr>
<tr>
<td><strong>Styles</strong></td>
<td><code class="language-plaintext highlighter-rouge">_sass/</code></td>
<td>CSS/SCSS customization</td>
</tr>
<tr>
<td><strong>Navigation</strong></td>
<td><code class="language-plaintext highlighter-rouge">_data/navigation/</code></td>
<td>Menu and sidebar configuration</td>
</tr>
<tr>
<td><strong>Components</strong></td>
<td><code class="language-plaintext highlighter-rouge">_includes/</code></td>
<td>Reusable HTML components</td>
</tr>
</tbody>
</table>
<h2 id="quick-customizations">Quick Customizations</h2>
<h3 id="site-identity">Site Identity</h3>
<p>Update <code class="language-plaintext highlighter-rouge">_config.yml</code>:</p>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Your</span><span class="nv"> </span><span class="s">Site</span><span class="nv"> </span><span class="s">Title"</span>
<span class="na">subtitle</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Your</span><span class="nv"> </span><span class="s">tagline"</span>
<span class="na">description</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Site</span><span class="nv"> </span><span class="s">description</span><span class="nv"> </span><span class="s">for</span><span class="nv"> </span><span class="s">SEO"</span>
<span class="na">preview</span><span class="pi">:</span> <span class="s">/images/previews/customization.png</span>
<span class="na">author</span><span class="pi">:</span>
<span class="na">name</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Your</span><span class="nv"> </span><span class="s">Name"</span>
<span class="na">email</span><span class="pi">:</span> <span class="s2">"</span><span class="s">you@example.com"</span>
<span class="na">bio</span><span class="pi">:</span> <span class="s2">"</span><span class="s">About</span><span class="nv"> </span><span class="s">the</span><span class="nv"> </span><span class="s">author"</span>
<span class="na">logo</span><span class="pi">:</span> <span class="s">/assets/images/logo.png</span>
</code></pre></div></div>
<h3 id="colors-and-branding">Colors and Branding</h3>
<p>Create or edit <code class="language-plaintext highlighter-rouge">_sass/custom.scss</code>:</p>
<div class="language-scss highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// Override Bootstrap variables</span>
<span class="nv">$primary</span><span class="p">:</span> <span class="mh">#your</span><span class="o">-</span><span class="n">color</span><span class="p">;</span>
<span class="nv">$secondary</span><span class="p">:</span> <span class="mh">#your</span><span class="o">-</span><span class="n">color</span><span class="p">;</span>
<span class="c1">// Custom styles</span>
<span class="nt">body</span> <span class="p">{</span>
<span class="nl">font-family</span><span class="p">:</span> <span class="s1">'Your Font'</span><span class="o">,</span> <span class="nb">sans-serif</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div></div>
<h3 id="navigation">Navigation</h3>
<p>Edit files in <code class="language-plaintext highlighter-rouge">_data/navigation/</code>:</p>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1"># _data/navigation/main.yml</span>
<span class="pi">-</span> <span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Home"</span>
<span class="na">url</span><span class="pi">:</span> <span class="s">/</span>
<span class="pi">-</span> <span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Blog"</span>
<span class="na">url</span><span class="pi">:</span> <span class="s">/blog/</span>
<span class="pi">-</span> <span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Docs"</span>
<span class="na">url</span><span class="pi">:</span> <span class="s">/docs/</span>
</code></pre></div></div>
<h2 id="guides-in-this-section">Guides in This Section</h2>
<ul>
<li><strong><a href="layouts/">Layouts</a></strong> — Create and customize page templates</li>
<li><strong><a href="styles/">Styles</a></strong> — CSS customization and theming</li>
<li><strong><a href="navigation/">Navigation</a></strong> — Configure menus and sidebars</li>
</ul>
<h2 id="layout-hierarchy">Layout Hierarchy</h2>
<div class="language-text highlighter-rouge"><div class="highlight"><pre class="highlight"><code>root.html ← Base HTML structure
└── default.html ← Main wrapper with navigation
├── home.html ← Homepage layout
├── journals.html ← Blog posts
├── collection.html ← Collection pages
└── landing.html ← Full-width landing pages
</code></pre></div></div>
<h2 id="override-theme-files">Override Theme Files</h2>
<p>To override any theme file:</p>
<ol>
<li>Create the same file path in your site</li>
<li>Jekyll uses your version instead of the theme’s</li>
</ol>
<p>Example: Override the footer by creating <code class="language-plaintext highlighter-rouge">_includes/core/footer.html</code>.</p>
<h2 id="next-steps">Next Steps</h2>
<ul>
<li><a href="layouts/">Layouts Guide</a> — Page templates</li>
<li><a href="styles/">Styles Guide</a> — CSS customization</li>
<li><a href="navigation/">Navigation Guide</a> — Menu configuration</li>
</ul>
<h2 id="technical-reference">Technical Reference</h2>
<p>For contributor-level details (SCSS architecture, design token catalog, fork-safe extension patterns):</p>
<ul>
<li><a href="https://github.com/bamr87/zer0-mistakes/blob/main/docs/ui/extending.md">Extending the Theme → docs/ui/extending.md</a></li>
<li><a href="https://github.com/bamr87/zer0-mistakes/blob/main/docs/ui/customization.md">UI Customization → docs/ui/customization.md</a></li>
</ul>
<h2 id="see-also">See also</h2>
<ul>
<li>[[Bootstrap Integration]]</li>
<li>[[Features]]</li>
<li>[[Liquid]]</li>
<li>[[Jekyll]]</li>
</ul>
</div>
</main>
</div>
</div>
</article>
Step 2: Use the Layout
---
title: "Getting Started Tutorial"
layout: tutorial
difficulty: beginner
estimated_reading_time: "15 minutes"
next_tutorial: /tutorials/part-2/
---
Layout Variables
Access these variables in your layouts:
| Variable | Description | |———-|————-| | `<!– =================================================================== DEFAULT LAYOUT - Standard content layout with sidebars ===================================================================
File: default.html Path: _layouts/default.html Inherits: root.html Purpose: Primary content layout with sidebar navigation and table of contents
Template Logic:
- Creates a responsive three-column layout using Bootstrap grid
- Left sidebar: Site navigation and content outline (collapsible on mobile)
- Local graph: Obsidian side panel (rendered at body level via footer.html)
- Center: Main content area with page title and body content
- Right sidebar: Table of contents and page shortcuts (hidden on mobile)
- Implements scroll spy for navigation highlighting
- Responsive design that stacks vertically on mobile devices
Layout Structure:
- Container wrapper with Bootstrap responsive classes
- Left sidebar (bd-sidebar) - Navigation and outline
- Main content area (bd-main) with:
- Intro section (page title, metadata)
- Right sidebar (bd-toc) - Table of contents
- Content area (bd-content) - Main page content
Dependencies:
- sidebar-left.html: Site navigation and content outline
- intro.html: Page title, breadcrumbs, and metadata
- sidebar-right.html: Table of contents and page shortcuts
Bootstrap Classes Used:
- container-xxl: Extra large responsive container
- bd-gutter: Custom Bootstrap spacing
- bd-layout: Custom layout utility class
- bd-sidebar: Custom sidebar styling
- bd-main: Main content area
- bd-toc: Table of contents styling
- bd-content: Content area styling =================================================================== –>
Customization
Customize the Zer0-Mistakes Jekyll theme - layouts, styles, navigation, and more.
Table of Contents
Customization
Customize the Zer0-Mistakes theme to match your brand and requirements.
Customization Areas
| Area | Location | Description |
|---|---|---|
| Layouts | _layouts/ |
Page templates and structure |
| Styles | _sass/ |
CSS/SCSS customization |
| Navigation | _data/navigation/ |
Menu and sidebar configuration |
| Components | _includes/ |
Reusable HTML components |
Quick Customizations
Site Identity
Update _config.yml:
title: "Your Site Title"
subtitle: "Your tagline"
description: "Site description for SEO"
preview: /images/previews/customization.png
author:
name: "Your Name"
email: "you@example.com"
bio: "About the author"
logo: /assets/images/logo.png
Colors and Branding
Create or edit _sass/custom.scss:
// Override Bootstrap variables
$primary: #your-color;
$secondary: #your-color;
// Custom styles
body {
font-family: 'Your Font', sans-serif;
}
Navigation
Edit files in _data/navigation/:
# _data/navigation/main.yml
- title: "Home"
url: /
- title: "Blog"
url: /blog/
- title: "Docs"
url: /docs/
Guides in This Section
- Layouts — Create and customize page templates
- Styles — CSS customization and theming
- Navigation — Configure menus and sidebars
Layout Hierarchy
root.html ← Base HTML structure
└── default.html ← Main wrapper with navigation
├── home.html ← Homepage layout
├── journals.html ← Blog posts
├── collection.html ← Collection pages
└── landing.html ← Full-width landing pages
Override Theme Files
To override any theme file:
- Create the same file path in your site
- Jekyll uses your version instead of the theme’s
Example: Override the footer by creating _includes/core/footer.html.
Next Steps
- Layouts Guide — Page templates
- Styles Guide — CSS customization
- Navigation Guide — Menu configuration
Technical Reference
For contributor-level details (SCSS architecture, design token catalog, fork-safe extension patterns):
See also
- [[Bootstrap Integration]]
- [[Features]]
- [[Liquid]]
- [[Jekyll]]
` | Page content (required) |
| Layouts | Page title |
| Create and customize page layouts in the Zer0-Mistakes Jekyll theme. | Page description |
| default | Current layout name |
| /docs/customization/layouts/ | Page URL |
| zer0-mistakes | Site title |
Overriding Theme Layouts
To customize a theme layout:
- Copy the layout from the theme to your
_layouts/directory - Modify as needed
- Jekyll uses your version instead
Conditional Content
Show content based on layout or page variables:
{% if page.layout == 'journals' %}
<div class="post-meta">
<time>{{ page.date | date: "%B %d, %Y" }}</time>
<span class="author">{{ page.author }}</span>
</div>
{% endif %}
{% if page.sidebar %}
{% include navigation/sidebar.html %}
{% endif %}
Including Components
Use includes for reusable parts:
{% include core/head.html %}
{% include navigation/header.html %}
{% include content/toc.html %}
{% include core/footer.html %}
Best Practices
- Start with
default— Inherit from default for consistency - Keep layouts focused — Each layout should have one purpose
- Use includes — Extract reusable components
- Document custom layouts — Note purpose and required variables
- Test responsiveness — Verify layouts work on all screen sizes
Reference
Technical Reference
For contributor-level details (layout hierarchy, Liquid template inheritance, sidebar wiring):
See also
- [[Customization]]
- [[Include Components]]
- [[Liquid]]