From 3f08fa5b440b8c4c0ec6d436ad2877a5dbb04dc2 Mon Sep 17 00:00:00 2001
From: Jack Hickey <133868041+nginx-jack@users.noreply.github.com>
Date: Fri, 20 Jun 2025 11:55:02 +0100
Subject: [PATCH 01/14] Grid: Restructure high-level DOM and Grid

Simplifies overall high level DOM structure and uses new grid system.
This is still work-in-progress. Sidebar, header and redocly page still
require refactoring to look as expected.
---
 assets/css/v2/style.css          | 343 +++++++++++++++++++++----------
 layouts/_default/baseof.html     |  19 +-
 layouts/_default/docs.html       |  62 ------
 layouts/_default/list.html       | 108 +++++-----
 layouts/_default/single.html     |  67 +++++-
 layouts/partials/header.html     |  51 +----
 layouts/partials/sidebar-v2.html |   1 +
 7 files changed, 368 insertions(+), 283 deletions(-)
 delete mode 100644 layouts/_default/docs.html

diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css
index f90ceea4..b9ff9d94 100644
--- a/assets/css/v2/style.css
+++ b/assets/css/v2/style.css
@@ -1,3 +1,95 @@
+/* MARK: Reset
+*/
+/* Modern reset: https://piccalil.li/blog/a-more-modern-css-reset/ */
+
+/* Box sizing rules */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* Prevent font size inflation */
+html {
+  -moz-text-size-adjust: none;
+  -webkit-text-size-adjust: none;
+  text-size-adjust: none;
+  overflow-y: scroll;
+}
+
+/* Remove default margin in favour of better control in authored CSS */
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+figure,
+blockquote,
+dl,
+dd {
+  margin-block-end: 0;
+}
+
+/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
+ul[role="list"],
+ol[role="list"] {
+  list-style: none;
+}
+
+/* Set core body defaults */
+body {
+  min-height: 100vh;
+  line-height: 1.5;
+  margin: 0;
+}
+
+/* Set shorter line heights on headings and interactive elements */
+h1,
+h2,
+h3,
+h4,
+button,
+input,
+label {
+  line-height: 1.1;
+}
+
+/* Balance text wrapping on headings */
+h1,
+h2,
+h3,
+h4 {
+  text-wrap: balance;
+}
+
+/* Make images easier to work with */
+img,
+picture {
+  max-width: 100%;
+  display: block;
+}
+
+/* Inherit fonts for inputs and buttons */
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+
+/* Make sure textareas without a rows attribute are not tiny */
+textarea:not([rows]) {
+  min-height: 10em;
+}
+
+/* Anything that has been anchored to should have extra scroll margin */
+:target {
+  scroll-margin-block: 5ex;
+}
+
+/* END RESET */
+
 /* Regular */
 @font-face {
   font-family: "JetBrainsMono";
@@ -92,7 +184,6 @@
   --sidebar-line-box-side-length: 8px;
   --sidebar-line-box-top: 6px;
   --sidebar-line-box-left: 12px;
-  --sidebar-width: 22rem;
   --sidebar-line-width: 11.5px;
   --sidebar-mobile-top-displacement: 5rem;
   --side-gutter-width: 20rem;
@@ -112,35 +203,54 @@
   --overflow-gutter-extension: 1rem;
 
   --flow-gap: 1rem;
-}
 
-/* MARK: Reset
-*/
-html,
-body,
-p,
-ol,
-ul,
-li,
-dl,
-dt,
-dd,
-blockquote,
-figure,
-fieldset,
-legend,
-textarea,
-pre,
-iframe,
-hr,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  margin: 0;
-  padding: 0;
+  /* @link https://utopia.fyi/type/calculator?c=320,16,1.2,1240,18,1.25,5,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
+  /* ALWAYS use for fonts */
+  --font-step--3: clamp(0.576rem, 0.5796rem + -0.0047vw, 0.5787rem);
+  --font-step--2: clamp(0.6944rem, 0.6856rem + 0.0444vw, 0.72rem);
+  --font-step--1: clamp(0.8333rem, 0.8101rem + 0.1159vw, 0.9rem);
+  --font-step-0: clamp(1rem, 0.9565rem + 0.2174vw, 1.125rem);
+  --font-step-1: clamp(1.2rem, 1.1283rem + 0.3587vw, 1.4063rem);
+  --font-step-2: clamp(1.44rem, 1.3295rem + 0.5527vw, 1.7578rem);
+  --font-step-3: clamp(1.728rem, 1.5648rem + 0.8161vw, 2.1973rem);
+  --font-step-4: clamp(2.0736rem, 1.8395rem + 1.1704vw, 2.7466rem);
+  --font-step-5: clamp(2.4883rem, 2.1597rem + 1.6433vw, 3.4332rem);
+
+  /* @link https://utopia.fyi/space/calculator?c=320,16,1.2,1240,18,1.25,5,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
+  /* ALWAYS use for horizontal spacing */
+  --space-3xs: clamp(0.25rem, 0.2283rem + 0.1087vw, 0.3125rem);
+  --space-2xs: clamp(0.5rem, 0.4783rem + 0.1087vw, 0.5625rem);
+  --space-xs: clamp(0.75rem, 0.7065rem + 0.2174vw, 0.875rem);
+  --space-s: clamp(1rem, 0.9565rem + 0.2174vw, 1.125rem);
+  --space-m: clamp(1.5rem, 1.4348rem + 0.3261vw, 1.6875rem);
+  --space-l: clamp(2rem, 1.913rem + 0.4348vw, 2.25rem);
+  --space-xl: clamp(3rem, 2.8696rem + 0.6522vw, 3.375rem);
+  --space-2xl: clamp(4rem, 3.8261rem + 0.8696vw, 4.5rem);
+  --space-3xl: clamp(6rem, 5.7391rem + 1.3043vw, 6.75rem);
+
+  /* One-up pairs */
+  --space-3xs-2xs: clamp(0.25rem, 0.1413rem + 0.5435vw, 0.5625rem);
+  --space-2xs-xs: clamp(0.5rem, 0.3696rem + 0.6522vw, 0.875rem);
+  --space-xs-s: clamp(0.75rem, 0.6196rem + 0.6522vw, 1.125rem);
+  --space-s-m: clamp(1rem, 0.7609rem + 1.1957vw, 1.6875rem);
+  --space-m-l: clamp(1.5rem, 1.2391rem + 1.3043vw, 2.25rem);
+  --space-l-xl: clamp(2rem, 1.5217rem + 2.3913vw, 3.375rem);
+  --space-xl-2xl: clamp(3rem, 2.4783rem + 2.6087vw, 4.5rem);
+  --space-2xl-3xl: clamp(4rem, 3.0435rem + 4.7826vw, 6.75rem);
+
+  /* Custom pairs */
+  --space-s-l: clamp(1rem, 0.5652rem + 2.1739vw, 2.25rem);
+
+  /* @link https://utopia.fyi/grid/calculator?c=320,16,1.2,1240,18,1.25,5,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
+  --grid-max-width: 69.75rem;
+  --grid-gutter: var(--space-s-l, clamp(1rem, 0.4975rem + 2.5126vw, 2.25rem));
+  --grid-columns: 12;
+
+  --sidebar-width: 22rem;
+  --content-max-width: 88rem;
+
+  --main-col: minmax(34rem, 50rem);
+  --side-col: minmax(18rem, 26rem);
 }
 
 @supports (font-variation-settings: normal) {
@@ -173,6 +283,9 @@ h6,
 
 html {
   scroll-behavior: smooth;
+  font-optical-sizing: auto;
+  font-weight: 300;
+  font-style: normal;
 }
 
 h1,
@@ -215,8 +328,29 @@ ol li:last-child {
 
 /* MARK: Layout
 */
-header {
-  margin: 2rem 2rem 0 2rem;
+
+.grid-container {
+  display: grid;
+  grid-template-columns: var(--sidebar-width) 1fr;
+  grid-template-rows: var(--space-xl) 1fr auto;
+  grid-template-areas:
+    "sidebar header"
+    "sidebar content"
+    "sidebar footer";
+  min-height: 100vh;
+
+  @media (max-width: 68rem) {
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      "header"
+      "content"
+      "footer";
+  }
+}
+
+.header {
+  grid-area: header;
+  display: flex;
 
   .header-container {
     display: flex;
@@ -254,56 +388,89 @@ header {
   ul {
     list-style: none;
   }
+}
 
-  .dropdown-content {
-    position: absolute;
-    background-color: oklch(var(--color-background));
-    border: oklch(var(--color-foreground)) 1px solid;
-    box-shadow: 3px 3px 0px oklch(var(--color-shadow));
-    z-index: 1;
-    right: 0;
-    display: none;
-    width: 400px;
-    max-width: 80vw;
-    margin-right: 2rem;
-  }
+.content {
+  grid-area: content;
+  justify-self: center;
+  padding: var(--space-s);
+  max-width: var(--content-max-width);
+}
 
-  .dropdown-content ul {
-    padding: 20px 10px;
-  }
+.footer {
+  grid-area: footer;
+  padding: var(--space-l);
+  background-color: oklch(var(--color-footer));
+  margin-top: auto;
+}
 
-  .nav-item-explore {
-    margin: 0;
+/* sidebar layout */
+.sidebar {
+  grid-area: sidebar;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: var(--sidebar-width);
+  height: 100vh;
+  /* TODO replace with correct color var */
+  border-right: 1px solid oklch(var(--color-divider));
+  overflow: hidden;
+  background: oklch(var(--color-background));
+  box-sizing: border-box;
+  transform: translateX(0);
+
+  .sidebar__container {
+    display: grid;
+    grid-template-rows: auto 1fr;
+    height: 100%;
+
+    .sidebar__header {
+      position: sticky;
+      top: 0;
+      background: oklch(var(--color-background));
+      z-index: 1;
+
+      .sidebar__img {
+        height: 1.75rem;
+      }
+    }
+
+    .sidebar__content {
+      overflow-y: auto;
+      min-height: 0;
+      width: 100%;
+      scrollbar-gutter: stable;
+    }
   }
+}
 
-  .navbar-button {
-    padding: 0.5rem 0.5rem;
-    border: none;
-    border-radius: 0.25rem;
-    text-align: center;
-    text-decoration: none;
-    cursor: pointer;
+@media (max-width: 68rem) {
+  .sidebar {
+    grid-area: sidebar;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: var(--sidebar-width, 16rem);
+    transform: translateX(-100%);
   }
 
-  .remove-bottom-radius {
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
+  #sidebar-toggle:checked ~ .sidebar {
+    transform: translateX(0);
   }
-}
 
-main {
-  flex: 1;
-  min-width: 20rem;
-  margin: 0 2rem 2rem 1rem;
+  .sidebar-button {
+    display: block;
+    margin-bottom: 1rem;
+    padding: 0.5rem 1rem;
+    background: #000;
+    color: #fff;
+    cursor: pointer;
+  }
 }
 
 /* MARK: Footer
 */
-footer {
-  background-color: oklch(var(--color-footer));
-  padding: 2.5rem;
-  margin-top: auto;
-}
 
 .footer-layout {
   display: grid;
@@ -498,12 +665,6 @@ nav {
   grid-column: 1 / -1;
 }
 
-/* The default main-layout */
-.main-layout {
-  display: grid;
-  grid-template-columns: 1fr;
-}
-
 .sidebar-container {
   display: flex;
   flex-direction: column;
@@ -643,12 +804,6 @@ nav {
     grid-column: 1;
   }
 
-  .main-layout {
-    display: grid;
-    grid-template-columns: var(--sidebar-width) 1fr;
-    column-gap: var(--grid-sidebar-gutter);
-  }
-
   .content-layout {
     display: grid;
     grid-template-columns: 1fr minmax(
@@ -673,7 +828,7 @@ nav {
 }
 
 .list-page {
-  --flow-gap: .5rem;
+  --flow-gap: 0.5rem;
 
   h2 {
     font-size: 1.5rem;
@@ -695,11 +850,6 @@ nav {
     display: grid !important;
   }
 
-  .breadcrumb-layout {
-    width: auto;
-    margin-top: 2rem;
-  }
-
   .nginx-docs-api-container {
     grid-column: 1 / -1;
     max-width: 100% !important;
@@ -877,7 +1027,7 @@ button:has(~ .product-selector[style*="none"]) > .product-selector-button-icon {
   font-size: 1rem;
 }
 
-/* MARK: Sidebar
+/* MARK: Sidebar - Content
 */
 
 nav.sidebar.sidebar__mobile-open {
@@ -885,21 +1035,9 @@ nav.sidebar.sidebar__mobile-open {
 }
 
 .sidebar {
+  grid-area: sidebar;
   --color-foreground: oklch(0 0 0 / 0.75);
 
-  display: flex;
-  flex-direction: column;
-  width: 22rem;
-  max-height: 100vh;
-  position: sticky;
-  top: 0;
-  margin-top: 0rem;
-  padding-top: 1.5rem;
-  align-items: start;
-  overflow-y: auto;
-  overflow-x: hidden;
-  color: var(--color-foreground);
-
   .sidebar__container,
   .sidebar__container button,
   .sidebar__container ul,
@@ -1074,9 +1212,6 @@ p {
 .breadcrumb-layout {
   position: relative;
   background-color: white;
-  /* width: calc(100% + 4rem); */
-  margin-left: -2rem;
-  padding: 1rem 2rem;
 
   .sidebar__mobile__toggle {
     display: none;
@@ -1127,7 +1262,7 @@ h1 {
 
 h2 {
   font-size: 1.5rem;
-  margin: 1rem 0 .75rem 0;
+  margin: 1rem 0 0.75rem 0;
 }
 
 h2:target,
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index ba92f241..88d4dbbd 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -39,24 +39,11 @@
 
   <body id="body">
     {{ if or ( not hugo.IsServer ) ( not ( in .Site.Params.buildtype "package" ) ) }}
-  {{ partial "universal-tag.html" . }}
+    {{ partial "universal-tag.html" . }}
     {{ end }}
 
-    <header>
-      {{ block "header" . }}{{end}}
-    </header>
-
-    <section class="base-layout" data-testid="base-layout">
-      <div class="main container-fluid min-page-height" data-menu-id="{{.RelPermalink}}">
-        {{ block "main" . }}{{ end }}
-      </div>
-  </section>
-
-    <footer id="footer-v2">
-      {{ block "footer-v2" . }}
-      {{ partial "footer-v2.html" . }}
-      {{ end }}
-    </footer>
+    {{ block "main" . }}{{ end }}
+
   {{ partial "scripts.html" . }}
   <div id="consent_blackbar"></div>
 </body>
diff --git a/layouts/_default/docs.html b/layouts/_default/docs.html
deleted file mode 100644
index 3302ca55..00000000
--- a/layouts/_default/docs.html
+++ /dev/null
@@ -1,62 +0,0 @@
-{{ define "main" }}
-<div class="docs-container row override-sidebar-collapse">
-<div class="docs-container row override-sidebar-collapse">
-  <!-- Replace icons -->
-  {{ $content := partial "icon-replacement.html" (dict "content" .Content) }}
-
-  {{if (.Params.catalog) }}
-  <main class="content content-has-toc" role="main">
-  {{ else if and (gt .WordCount 200 ) (.Params.toc) }}
-  <main class="content col d-block align-top content-has-toc" role="main">
-  {{ else }}
-  <main class="content col d-block align-top content-no-toc" role="main">
-  {{ end }}
-
-  <section class="main-layout">
-    <div class="sidebar-layout" id="sidebar-layout">
-      <button class="sidebar__mobile__toggle" aria-label="sidebar__mobile__toggle" aria-expanded="false">{{ partial "lucide" (dict "context" . "icon" "x")}}Close</button>
-      <nav id="sidebar-v2" class="sidebar">
-        {{ partial "sidebar-v2.html" . }}
-      </nav>
-    </div>
-
-    <section id="maincontent" class="content-layout">
-      <div data-cms-edit="content" class="text-content">
-        <section class="breadcrumb-layout wide">
-          {{ if not .IsHome }}
-            {{ if not (in .Params.display_breadcrumb "false" ) }}
-            {{ partial "breadcrumb" .}}
-            {{ end }}
-          {{ end }}
-        </section>
-        {{ partial "banner" .}}
-        <h1>{{ .Title }}</h1>
-        {{ $content | safeHTML }}
-        {{ if eq .Page.Draft true }}{{ partial "draft-badge.html" . }}{{ end }}
-        {{ if in .Params.doctypes "beta" }}{{ partial "beta-badge" . }}{{ end }}
-
-        <hr>
-
-        {{ if .Page.Lastmod }}
-        <div class="last-modified">
-          {{ partial "page-meta-links" . }}
-        </div>
-        {{ end }}
-
-        {{ partial "version-list" . }}
-        {{ partial "qualtrics-feedback.html" }}
-
-        {{ partial "previous-next-links-in-section-with-title.html" . }}
-        </main>
-
-      </div>
-    </section>
-  </section>
-</div>
-<!-- If there is a script defined in the page metadata, load it  -->
-{{if .Params.script}}
-  {{ $script := (delimit (slice "scripts" .Params.script) "/")}}
-  {{ partial (string $script) .}}
-{{end }}
-
-{{ end }}
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index 17edeefb..65ac9cee 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -1,54 +1,62 @@
 {{ define "main" }}
-{{/*  mf list page  */}}
-<main class="content col d-block align-top content-has-toc" role="main">
-<section class="main-layout">
-  <div class="sidebar-layout" id="sidebar-layout">
-    <button class="sidebar__mobile__toggle" aria-label="sidebar__mobile__toggle" aria-expanded="false">{{ partial "lucide" (dict "context" . "icon" "x")}}Close</button>
-    <nav id="sidebar-v2" class="sidebar">
-      {{ partial "sidebar-v2.html" . }}
-    </nav>
-  </div>
-
-  <section id="maincontent" class="content-layout">
-    <div data-cms-edit="content" class="text-content list-page">
-      <section class="breadcrumb-layout wide">
-        {{ if not .IsHome }}
-          {{ if not (in .Params.display_breadcrumb "false" ) }}
-          {{ partial "breadcrumb" .}}
+<div class="grid-container">
+    <aside class="sidebar">
+        {{ partial "sidebar-v2.html" . }}
+    </aside>
+
+    <header class="header">
+        {{ block "header" . }}{{end}}
+    </header>
+
+
+    <main class="content content-has-toc" role="main">
+    <section class="main-layout">
+
+      <section id="maincontent" class="content-layout">
+        <div data-cms-edit="content" class="text-content list-page">
+          <section class="breadcrumb-layout wide">
+            {{ if not .IsHome }}
+              {{ if not (in .Params.display_breadcrumb "false" ) }}
+              {{ partial "breadcrumb" .}}
+              {{ end }}
+            {{ end }}
+          </section>
+          <h1>{{ .Title }}</h1>
+
+          {{ partial "banner" . }}
+
+          {{ $hasCustomContent := .Params.hasCustomContent | default false }}
+          {{ if $hasCustomContent }}
+            {{ .Page.Scratch.Set "custom-landing-page-file-name" "custom-landing-page.html" }}
+            {{ .Page.Scratch.Set "custom-landing-page-context" . }}
+            {{ .Content }}
+          {{ else }}
+            {{ .Content }}
+            {{ range .Pages.ByWeight }}
+            <h2>
+                <a href="{{ if .Params.url}}{{ .Params.url}}{{else}}{{ .Permalink }}{{end}}">{{ .Title }}</a>
+            </h2>
+            {{ end }}
           {{ end }}
-        {{ end }}
+
+          <hr>
+          {{ if .Page.Lastmod }}
+          <div class="last-modified">
+            {{ partial "page-meta-links" . }}
+          </div>
+          {{ end }}
+
+        </div>
       </section>
-      <h1>{{ .Title }}</h1>
-
-      {{ partial "banner" . }}
-
-      {{ $hasCustomContent := .Params.hasCustomContent | default false }}
-      {{ if $hasCustomContent }} 
-        {{ .Page.Scratch.Set "custom-landing-page-file-name" "custom-landing-page.html" }}
-        {{ .Page.Scratch.Set "custom-landing-page-context" . }}
-        {{ .Content }}
-      {{ else }}
-        {{ .Content }}
-        {{ range .Pages.ByWeight }}
-        <h2>
-            <a href="{{ if .Params.url}}{{ .Params.url}}{{else}}{{ .Permalink }}{{end}}">{{ .Title }}</a>
-        </h2>
-        {{ end }}
-      {{ end }}
-
-      <hr>
-      {{ if .Page.Lastmod }}
-      <div class="last-modified">
-        {{ partial "page-meta-links" . }}
-      </div>
-      {{ end }}
-
-      </main>
-
-    </div>
-  </section>
-</section>
-</section>
-</main>
-{{ end }}
+    </section>
+    </main>
 
+    <footer class="footer">
+    {{ block "footer-v2" . }}
+    {{ partial "footer-v2.html" . }}
+    {{ end }}
+    </footer>
+
+</div>
+
+{{ end }}
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 1fd0ee4d..0dd278ca 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -1,2 +1,67 @@
-{{ .Render "docs" }}
+{{ define "main" }}
+<div class="grid-container">
+    <aside class="sidebar">
+        {{ partial "sidebar-v2.html" . }}
+    </aside>
 
+    <header class="header">
+        {{ block "header" . }}{{end}}
+    </header>
+
+
+    <main class="content">
+      <!-- Replace icons -->
+      {{ $content := partial "icon-replacement.html" (dict "content" .Content) }}
+      <main role="main">
+
+      <section class="main-layout">
+        <section id="maincontent" class="content-layout">
+          <div data-cms-edit="content" class="text-content">
+            <section class="breadcrumb-layout wide">
+              {{ if not .IsHome }}
+                {{ if not (in .Params.display_breadcrumb "false" ) }}
+                {{ partial "breadcrumb" .}}
+                {{ end }}
+              {{ end }}
+            </section>
+            {{ partial "banner" .}}
+            <h1>{{ .Title }}</h1>
+            {{ $content | safeHTML }}
+            {{ if eq .Page.Draft true }}{{ partial "draft-badge.html" . }}{{ end }}
+            {{ if in .Params.doctypes "beta" }}{{ partial "beta-badge" . }}{{ end }}
+
+            <hr>
+
+            {{ if .Page.Lastmod }}
+            <div class="last-modified">
+              {{ partial "page-meta-links" . }}
+            </div>
+            {{ end }}
+
+            {{ partial "version-list" . }}
+            {{ partial "qualtrics-feedback.html" }}
+
+            {{ partial "previous-next-links-in-section-with-title.html" . }}
+           
+          </main>
+        </section>
+      </section>
+    </main>
+
+    <footer class="footer">
+        {{ block "footer-v2" . }}
+        {{ partial "footer-v2.html" . }}
+        {{ end }}
+    </footer>
+
+    <!-- If there is a script defined in the page metadata, load it  -->
+    {{if .Params.script}}
+      {{ $script := (delimit (slice "scripts" .Params.script) "/")}}
+      {{ partial (string $script) .}}
+    {{end }}
+
+</div>
+
+
+
+{{ end }}
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index fe79885f..cfb1663d 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,52 +1,3 @@
 {{ define "header" }}
-<div class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar navbar-fixed-top">
-  <div class="container-fluid flex-md-row flex-column header-container">
-    <a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="NGINX Docs">
-      <img class="navbar-img" src="{{ "/images/icons/NGINX-Docs-horiz-white-type.svg" | absURL }}" alt="NGINX Docs">
-    </a>
-    {{ if ( not ( in .Site.Params.buildtype "package" ) ) }}
-      <div class="navbar navbar-nav">
-        <!-- Standalone search box. -->
-        {{ partial "coveo-atomic-search.html" }}
-      </div>
-    {{ end }}
-    {{ if ( in .Site.Params.buildtype "package" ) }}
-    <div class="navbar-nav-scroll" id="navbarNavScroll">
-      <ul class="navbar-nav flex-row">
-        <li class="nav-item dropdown active">
-          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-            Sections
-          </a>
-          {{ partial "products-menu.html" . }}
-        </li>
-      </ul>
-    </div>
-    {{ end }}
-    
-    {{ $f5Sites := slice 
-      (dict "title" "DevCentral" "url" "https://community.f5.com/" "description" "Connect & learn in our hosted community")
-      (dict "title" "MyF5" "url" "https://my.f5.com/" "description" "Your key to everything F5, including support, registration keys, and subscriptions")
-      (dict "title" "NGINX" "url" "https://nginx.org/" "description" "Learn more about NGINX Open Source and read the community blog")
-    }}
-    <ul class="navbar navbar-nav">
-        <li class="nav-item-explore active">
-          <button id="navbar-sites-button" class="button navbar-button">
-              F5 Sites
-              <i id="navbar-sites-button-icon" class="link-chevron-icon fa-solid fa-chevron-down"></i>
-          </button>
-          <div class="dropdown-content" id="dropdown-content">
-            <ul>
-              {{ range $f5Sites }}
-                <li>
-                  <a href="{{ .url }}" target="_blank" >{{ .title }}</a>
-                  <p>{{ .description }}</p>
-                </li>
-              {{ end }}
-            </ul>
-          </div>
-        </li>
-    </ul>
-  </div>
-</div>
-
+I am the header
 {{ end }}
diff --git a/layouts/partials/sidebar-v2.html b/layouts/partials/sidebar-v2.html
index cf628c63..a626d4c7 100644
--- a/layouts/partials/sidebar-v2.html
+++ b/layouts/partials/sidebar-v2.html
@@ -22,6 +22,7 @@
 {{ $productName := index $productMap $productIdentifier }}
 
 <div class="sidebar__container">
+    <div class="sidebar__header">NGINX LOGO</div>
     <div class="sidebar__content">
         <a class="skip-link" href="#maincontent">Skip Navigation</a>
         {{ partial "sidebar-list.html" (dict

From 4200a46b3d264a3d75eb34463d6b578be0ed0f39 Mon Sep 17 00:00:00 2001
From: Jack Hickey <133868041+nginx-jack@users.noreply.github.com>
Date: Fri, 20 Jun 2025 13:07:14 +0100
Subject: [PATCH 02/14] Redocly: Fix regrid layout

---
 assets/css/v2/style.css   |  23 +++-----
 layouts/redoc/single.html | 110 +++++++++-----------------------------
 2 files changed, 31 insertions(+), 102 deletions(-)

diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css
index b9ff9d94..a7c3be25 100644
--- a/assets/css/v2/style.css
+++ b/assets/css/v2/style.css
@@ -395,6 +395,12 @@ ol li:last-child {
   justify-self: center;
   padding: var(--space-s);
   max-width: var(--content-max-width);
+
+  /* Allow redocly to fill the entire container */
+  &.content__redocly {
+    justify-self: unset;
+    max-width: unset;
+  }
 }
 
 .footer {
@@ -844,23 +850,6 @@ nav {
   grid-template-rows: calc(70px + var(--flow-gap)) max-content;
 }
 
-.api {
-  margin: 0 0 1rem 1rem;
-  .row {
-    display: grid !important;
-  }
-
-  .nginx-docs-api-container {
-    grid-column: 1 / -1;
-    max-width: 100% !important;
-    margin-top: 2rem;
-  }
-
-  .content-layout {
-    grid-template-columns: 1fr var(--side-gutter-width);
-  }
-}
-
 /* MARK: Coveo
 */
 #search-v2 {
diff --git a/layouts/redoc/single.html b/layouts/redoc/single.html
index 43966f77..664f3df3 100644
--- a/layouts/redoc/single.html
+++ b/layouts/redoc/single.html
@@ -1,92 +1,32 @@
 {{ define "main" }}
 
-<!-- Remove upon cleaning up old frame code -->
-<style>
-  .nginx-docs-api-container {
-    z-index: 0 !important;
-    max-width: calc(100% + 2.4rem);
-    margin-top: 2rem;
-  }
 
-  @media (min-width: 768px) {
-    .nginx-docs-api-container {
-      z-index: 0 !important;
-      max-width: calc(75% + 2.4rem);
-    }
-  }
+<div class="grid-container">
+    <aside class="sidebar">
+        {{ partial "sidebar-v2.html" . }}
+    </aside>
 
-  html {
-    scroll-behavior: auto !important;
-  }
+    <header class="header">
+        {{ block "header" . }}{{end}}
+    </header>
 
-  .menu-content {
-    top: 0 !important;
-    height: 100vh !important;
-  }
-  .bCOLCR {
-    background: #e6e6e6;
-  }
-  .fTsuzH {
-    background-color: #e6e6e6;
-  }
-  .fgRoXk {
-    background-color: #fafafa;
-  }
-  #api-component > api-container > redoc {
-    background-color: #e6e6e6;
-  }
-  div.sc-jSFjdj.sc-gKAaRy.dYGhuI.fTsuzH > div > h3 {
-    color: #000000;
-  }
-  div.sc-dvUynV.fgRoXk.redoc-wrap {
-    margin-left: -15px;
-    margin-right: -15px;
-  }
-  .gKPxXE .collapser {
-    background-color: transparent !important;
-  }
-  div
-    > div.sc-jSFjdj.sc-gKAaRy.dYGhuI.fTsuzH
-    > div.sc-EZqKI.iONckA
-    > button:hover {
-    background-color: #003963;
-  }
-  div > div.sc-giAqHp.hIuvjA > button:hover {
-    color: #003963;
-  }
-  .nginx-docs-api-container button:hover {
-    background-color: rgb(237, 237, 237);
-  }
-  pre {
-    white-space: pre-wrap;
-  }
-</style>
-<!--Use wide page layout for the API reference pages-->
-<section class="main-layout api">
-  <div class="sidebar-layout">
-    <nav id="sidebar-v2" class="sidebar">
-      {{ partial "sidebar-v2.html" . }}
-    </nav>
-  </div>
-  <div
-    class="row flex-md-nowrap content-layout"
-    style="
-      position: relative;
-      flex-wrap: nowrap;
-      margin-right: 9px;
-      max-width: calc(100% + 9px);
-    "
-  >
-    <section class="breadcrumb-layout">
-      {{ if not .IsHome }}
-        {{ if not (in .Params.display_breadcrumb "false" ) }}
-        {{ partial "breadcrumb" .}}  
+
+    <main class="content content__redocly">
+   
+        <div id="api-component">{{ .Content}}</div>
+    </main>
+
+    <footer class="footer">
+        {{ block "footer-v2" . }}
+        {{ partial "footer-v2.html" . }}
         {{ end }}
-      {{ end }}
-    </section>
-    <div class="nginx-docs-api-container">
-      <div id="api-component">{{ .Content}}</div>
-    </div>
-  </section>
-  </div>
+    </footer>
+
+    <!-- If there is a script defined in the page metadata, load it  -->
+    {{if .Params.script}}
+      {{ $script := (delimit (slice "scripts" .Params.script) "/")}}
+      {{ partial (string $script) .}}
+    {{end }}
+
+</div>
 {{ end }}

From 941527ef291ada40d55db09f95736d5973755449 Mon Sep 17 00:00:00 2001
From: Jack Hickey <133868041+nginx-jack@users.noreply.github.com>
Date: Fri, 20 Jun 2025 13:24:32 +0100
Subject: [PATCH 03/14] Sidebar: Add image and fix scroll behaviour

---
 assets/css/v2/style.css          | 13 ++++++++-----
 layouts/partials/sidebar-v2.html |  4 +++-
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css
index a7c3be25..99c0eeb5 100644
--- a/assets/css/v2/style.css
+++ b/assets/css/v2/style.css
@@ -247,6 +247,7 @@ textarea:not([rows]) {
   --grid-columns: 12;
 
   --sidebar-width: 22rem;
+  --sidebar-item-padding: 0.25rem 0.75rem;
   --content-max-width: 88rem;
 
   --main-col: minmax(34rem, 50rem);
@@ -418,12 +419,12 @@ ol li:last-child {
   left: 0;
   width: var(--sidebar-width);
   height: 100vh;
-  /* TODO replace with correct color var */
   border-right: 1px solid oklch(var(--color-divider));
   overflow: hidden;
   background: oklch(var(--color-background));
   box-sizing: border-box;
   transform: translateX(0);
+  padding: var(--space-s) 0 var(--space-s) var(--space-s);
 
   .sidebar__container {
     display: grid;
@@ -435,16 +436,18 @@ ol li:last-child {
       top: 0;
       background: oklch(var(--color-background));
       z-index: 1;
+      padding: var(--sidebar-item-padding);
 
       .sidebar__img {
-        height: 1.75rem;
+        height: 2rem;
       }
     }
 
     .sidebar__content {
       overflow-y: auto;
       min-height: 0;
-      width: 100%;
+      /* allows space for scrollbar */
+      width: calc(var(--sidebar-width) - 1rem);
       scrollbar-gutter: stable;
     }
   }
@@ -1043,7 +1046,7 @@ nav.sidebar.sidebar__mobile-open {
   }
 
   .sidebar__container button {
-    padding: 0.25rem 0.75rem;
+    padding: var(--sidebar-item-padding);
     justify-content: space-between;
   }
 
@@ -1105,7 +1108,7 @@ nav.sidebar.sidebar__mobile-open {
 
   .sidebar__link {
     display: block;
-    padding: 0.25rem 0.75rem;
+    padding: var(--sidebar-item-padding);
     margin: 2px 0 2px 0;
     border-radius: 5px 0 0 5px;
     color: oklch(0 0 0 / 0.75);
diff --git a/layouts/partials/sidebar-v2.html b/layouts/partials/sidebar-v2.html
index a626d4c7..7dc690f7 100644
--- a/layouts/partials/sidebar-v2.html
+++ b/layouts/partials/sidebar-v2.html
@@ -22,7 +22,9 @@
 {{ $productName := index $productMap $productIdentifier }}
 
 <div class="sidebar__container">
-    <div class="sidebar__header">NGINX LOGO</div>
+    <div class="sidebar__header">
+         <img class="sidebar__img" src="{{ "/images/icons/NGINX-Docs-horiz-black-type.svg" | absURL }}" alt="NGINX Docs">
+    </div>
     <div class="sidebar__content">
         <a class="skip-link" href="#maincontent">Skip Navigation</a>
         {{ partial "sidebar-list.html" (dict

From fb60399356440c9edc99ccc757067246d2ea0b0b Mon Sep 17 00:00:00 2001
From: Jack Hickey <133868041+nginx-jack@users.noreply.github.com>
Date: Fri, 20 Jun 2025 17:17:01 +0100
Subject: [PATCH 04/14] Grid: Add spcing to header and content container

---
 assets/css/v2/style.css      | 3 ++-
 layouts/partials/header.html | 6 +++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css
index 99c0eeb5..44e2421c 100644
--- a/assets/css/v2/style.css
+++ b/assets/css/v2/style.css
@@ -352,6 +352,7 @@ ol li:last-child {
 .header {
   grid-area: header;
   display: flex;
+  padding: 0 var(--space-s);
 
   .header-container {
     display: flex;
@@ -394,7 +395,7 @@ ol li:last-child {
 .content {
   grid-area: content;
   justify-self: center;
-  padding: var(--space-s);
+  padding: 0 var(--space-l);
   max-width: var(--content-max-width);
 
   /* Allow redocly to fill the entire container */
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index cfb1663d..afa145bd 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,3 +1,7 @@
 {{ define "header" }}
-I am the header
+<div class="header-container">
+    <div>Product Selector</div>
+    <div>Search</div>
+    <div>F5 Sites</div>
+</div>
 {{ end }}

From 696e9c08ea16bd163974274e78b32642bc172b95 Mon Sep 17 00:00:00 2001
From: Jack Hickey <133868041+nginx-jack@users.noreply.github.com>
Date: Mon, 23 Jun 2025 11:16:48 +0100
Subject: [PATCH 05/14] Homepage: Fix spacing, footer, and header

---
 assets/css/v2/style.css          | 33 ++++++++++++++++++++------------
 layouts/partials/sidebar-v2.html |  6 ++++--
 2 files changed, 25 insertions(+), 14 deletions(-)

diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css
index 44e2421c..576a5fb8 100644
--- a/assets/css/v2/style.css
+++ b/assets/css/v2/style.css
@@ -542,8 +542,16 @@ nav {
 /* MARK: Homepage
 */
 
+.grid-container.homepage {
+  grid-template-columns: 1fr;
+  grid-template-areas:
+    "header"
+    "content"
+    "footer";
+}
+
 .homepage {
-  margin: 0 2rem;
+  --content-max-width: 120rem;
 
   .homepage-heading {
     grid-column: 1 / -1;
@@ -556,10 +564,20 @@ nav {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(120px, 500px));
     gap: 1.5rem;
-    padding: 1rem;
+
     justify-content: center;
     max-width: 98rem;
     margin: 0 auto;
+    padding-bottom: 2rem;
+
+    a {
+      color: oklch(var(--color-foreground));
+      text-decoration-color: oklch(var(--color-background));
+
+      &:hover {
+        text-decoration-color: oklch(var(--color-background));
+      }
+    }
 
     .homepage-heading {
       grid-column: 1 / -1;
@@ -567,21 +585,12 @@ nav {
     }
   }
 
-  a {
-    color: oklch(var(--color-foreground));
-    text-decoration-color: oklch(var(--color-background));
-
-    &:hover {
-      text-decoration-color: oklch(var(--color-background));
-    }
-  }
-
   /* Styling for items */
   .homepage-item {
     background: oklch(var(--color-background));
     border: 1px solid oklch(var(--color-codeblock-border));
     box-shadow: 3px 3px 0px oklch(var(--color-shadow));
-    height: 7rem;
+    min-height: 11rem;
     padding: 1rem 2rem 2rem 2rem;
     display: flex;
     flex-direction: column;
diff --git a/layouts/partials/sidebar-v2.html b/layouts/partials/sidebar-v2.html
index 7dc690f7..0c75ba16 100644
--- a/layouts/partials/sidebar-v2.html
+++ b/layouts/partials/sidebar-v2.html
@@ -23,7 +23,9 @@
 
 <div class="sidebar__container">
     <div class="sidebar__header">
-         <img class="sidebar__img" src="{{ "/images/icons/NGINX-Docs-horiz-black-type.svg" | absURL }}" alt="NGINX Docs">
+        <a href="{{ .Site.BaseURL | relLangURL }}" alt="NGINX Docs Home">
+            <img class="sidebar__img" src="{{ "/images/icons/NGINX-Docs-horiz-black-type.svg" | absURL }}" alt="NGINX Docs">
+        </a>
     </div>
     <div class="sidebar__content">
         <a class="skip-link" href="#maincontent">Skip Navigation</a>
@@ -34,4 +36,4 @@
         "idPrefix" ""
       ) }}
     </div>
-</div>
\ No newline at end of file
+</div>

From 79a71ed09dbb2a02f40f63f7d399417165ecb636 Mon Sep 17 00:00:00 2001
From: Jack Hickey <133868041+nginx-jack@users.noreply.github.com>
Date: Mon, 23 Jun 2025 15:09:00 +0100
Subject: [PATCH 06/14] Layouts: Move shared layout components to base of

---
 assets/css/v2/style.css      | 49 +++----------------
 layouts/_default/baseof.html | 18 ++++++-
 layouts/_default/list.html   | 90 ++++++++++++++--------------------
 layouts/_default/single.html | 93 ++++++++++++++++--------------------
 layouts/redoc/single.html    | 36 ++++----------
 5 files changed, 109 insertions(+), 177 deletions(-)

diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css
index 576a5fb8..1c33960a 100644
--- a/assets/css/v2/style.css
+++ b/assets/css/v2/style.css
@@ -395,7 +395,7 @@ ol li:last-child {
 .content {
   grid-area: content;
   justify-self: center;
-  padding: 0 var(--space-l);
+  padding: 0 var(--space-l) 2rem var(--space-l);
   max-width: var(--content-max-width);
 
   /* Allow redocly to fill the entire container */
@@ -542,12 +542,16 @@ nav {
 /* MARK: Homepage
 */
 
-.grid-container.homepage {
+.grid-container:has(.homepage) {
   grid-template-columns: 1fr;
   grid-template-areas:
     "header"
     "content"
     "footer";
+
+  .sidebar {
+    display: none;
+  }
 }
 
 .homepage {
@@ -652,28 +656,6 @@ nav {
   min-width: 100%;
 }
 
-.sidebar-layout {
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  z-index: 2;
-  min-height: 74vh;
-
-  .sidebar__mobile__toggle {
-    display: none;
-  }
-}
-
-.sidebar-layout::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  width: 1px;
-  background-color: oklch(var(--color-divider));
-}
-
 #searchbox {
   width: 24rem;
   display: none;
@@ -684,11 +666,6 @@ nav {
   grid-column: 1 / -1;
 }
 
-.sidebar-container {
-  display: flex;
-  flex-direction: column;
-}
-
 .text-content {
   grid-column: 1 / -1;
   display: grid;
@@ -713,12 +690,6 @@ nav {
 }
 
 @media (max-width: 88rem) {
-  .base-layout {
-    display: grid;
-    grid-template-rows: repeat(2, auto);
-    column-gap: var(--grid-column-gutter);
-  }
-
   .content-layout .breadcrumb-layout {
     position: sticky;
     top: 0;
@@ -805,14 +776,6 @@ nav {
 }
 
 @media (min-width: 88em) {
-  .base-layout {
-    --grid-column-gutter: 4.5rem;
-    display: grid;
-    grid-template-rows: repeat(2, auto);
-    column-gap: var(--grid-column-gutter);
-    max-width: 100%;
-  }
-
   .text-content {
     grid-template-columns: var(--grid-content) var(--grid-side-callout);
     grid-template-rows: 70px max-content;
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 88d4dbbd..e00ee014 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -41,8 +41,24 @@
     {{ if or ( not hugo.IsServer ) ( not ( in .Site.Params.buildtype "package" ) ) }}
     {{ partial "universal-tag.html" . }}
     {{ end }}
+    <div class="grid-container">
+        <aside class="sidebar">
+            {{ partial "sidebar-v2.html" . }}
+        </aside>
+
+        <header class="header">
+            {{ block "header" . }}{{end}}
+        </header>
+
+        {{ block "main" . }}{{ end }}
+
+        <footer class="footer">
+            {{ block "footer-v2" . }}
+            {{ partial "footer-v2.html" . }}
+            {{ end }}
+        </footer>
+    </div>
 
-    {{ block "main" . }}{{ end }}
 
   {{ partial "scripts.html" . }}
   <div id="consent_blackbar"></div>
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index 65ac9cee..1c5b0b8e 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -1,62 +1,46 @@
 {{ define "main" }}
-<div class="grid-container">
-    <aside class="sidebar">
-        {{ partial "sidebar-v2.html" . }}
-    </aside>
 
-    <header class="header">
-        {{ block "header" . }}{{end}}
-    </header>
+<main class="content content-has-toc" role="main">
+<section class="main-layout">
 
-
-    <main class="content content-has-toc" role="main">
-    <section class="main-layout">
-
-      <section id="maincontent" class="content-layout">
-        <div data-cms-edit="content" class="text-content list-page">
-          <section class="breadcrumb-layout wide">
-            {{ if not .IsHome }}
-              {{ if not (in .Params.display_breadcrumb "false" ) }}
-              {{ partial "breadcrumb" .}}
-              {{ end }}
-            {{ end }}
-          </section>
-          <h1>{{ .Title }}</h1>
-
-          {{ partial "banner" . }}
-
-          {{ $hasCustomContent := .Params.hasCustomContent | default false }}
-          {{ if $hasCustomContent }}
-            {{ .Page.Scratch.Set "custom-landing-page-file-name" "custom-landing-page.html" }}
-            {{ .Page.Scratch.Set "custom-landing-page-context" . }}
-            {{ .Content }}
-          {{ else }}
-            {{ .Content }}
-            {{ range .Pages.ByWeight }}
-            <h2>
-                <a href="{{ if .Params.url}}{{ .Params.url}}{{else}}{{ .Permalink }}{{end}}">{{ .Title }}</a>
-            </h2>
+    <section id="maincontent" class="content-layout">
+    <div data-cms-edit="content" class="text-content list-page">
+        <section class="breadcrumb-layout wide">
+        {{ if not .IsHome }}
+            {{ if not (in .Params.display_breadcrumb "false" ) }}
+            {{ partial "breadcrumb" .}}
             {{ end }}
-          {{ end }}
-
-          <hr>
-          {{ if .Page.Lastmod }}
-          <div class="last-modified">
-            {{ partial "page-meta-links" . }}
-          </div>
-          {{ end }}
-
+        {{ end }}
+        </section>
+        <h1>{{ .Title }}</h1>
+
+        {{ partial "banner" . }}
+
+        {{ $hasCustomContent := .Params.hasCustomContent | default false }}
+        {{ if $hasCustomContent }}
+        {{ .Page.Scratch.Set "custom-landing-page-file-name" "custom-landing-page.html" }}
+        {{ .Page.Scratch.Set "custom-landing-page-context" . }}
+        {{ .Content }}
+        {{ else }}
+        {{ .Content }}
+        {{ range .Pages.ByWeight }}
+        <h2>
+            <a href="{{ if .Params.url}}{{ .Params.url}}{{else}}{{ .Permalink }}{{end}}">{{ .Title }}</a>
+        </h2>
+        {{ end }}
+        {{ end }}
+
+        <hr>
+        {{ if .Page.Lastmod }}
+        <div class="last-modified">
+        {{ partial "page-meta-links" . }}
         </div>
-      </section>
-    </section>
-    </main>
-
-    <footer class="footer">
-    {{ block "footer-v2" . }}
-    {{ partial "footer-v2.html" . }}
-    {{ end }}
-    </footer>
+        {{ end }}
 
+    </div>
+    </section>
+</section>
+</main>
 </div>
 
 {{ end }}
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 0dd278ca..c52749c6 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -1,66 +1,53 @@
 {{ define "main" }}
-<div class="grid-container">
-    <aside class="sidebar">
-        {{ partial "sidebar-v2.html" . }}
-    </aside>
 
-    <header class="header">
-        {{ block "header" . }}{{end}}
-    </header>
-
-
-    <main class="content">
-      <!-- Replace icons -->
-      {{ $content := partial "icon-replacement.html" (dict "content" .Content) }}
-      <main role="main">
+<main class="content">
+    <!-- Replace icons -->
+    {{ $content := partial "icon-replacement.html" (dict "content" .Content) }}
+    <main role="main">
+
+    <section class="main-layout">
+    <section id="maincontent" class="content-layout">
+        <div data-cms-edit="content" class="text-content">
+        <section class="breadcrumb-layout wide">
+            {{ if not .IsHome }}
+            {{ if not (in .Params.display_breadcrumb "false" ) }}
+            {{ partial "breadcrumb" .}}
+            {{ end }}
+            {{ end }}
+        </section>
+        {{ partial "banner" .}}
+        <h1>{{ .Title }}</h1>
+        {{ $content | safeHTML }}
+        {{ if eq .Page.Draft true }}{{ partial "draft-badge.html" . }}{{ end }}
+        {{ if in .Params.doctypes "beta" }}{{ partial "beta-badge" . }}{{ end }}
+
+        <hr>
+
+        {{ if .Page.Lastmod }}
+        <div class="last-modified">
+            {{ partial "page-meta-links" . }}
+        </div>
+        {{ end }}
 
-      <section class="main-layout">
-        <section id="maincontent" class="content-layout">
-          <div data-cms-edit="content" class="text-content">
-            <section class="breadcrumb-layout wide">
-              {{ if not .IsHome }}
-                {{ if not (in .Params.display_breadcrumb "false" ) }}
-                {{ partial "breadcrumb" .}}
-                {{ end }}
-              {{ end }}
-            </section>
-            {{ partial "banner" .}}
-            <h1>{{ .Title }}</h1>
-            {{ $content | safeHTML }}
-            {{ if eq .Page.Draft true }}{{ partial "draft-badge.html" . }}{{ end }}
-            {{ if in .Params.doctypes "beta" }}{{ partial "beta-badge" . }}{{ end }}
+        {{ partial "version-list" . }}
+        {{ partial "qualtrics-feedback.html" }}
 
-            <hr>
+        {{ partial "previous-next-links-in-section-with-title.html" . }}
 
-            {{ if .Page.Lastmod }}
-            <div class="last-modified">
-              {{ partial "page-meta-links" . }}
-            </div>
-            {{ end }}
+        </main>
+    </section>
+    </section>
+</main>
 
-            {{ partial "version-list" . }}
-            {{ partial "qualtrics-feedback.html" }}
 
-            {{ partial "previous-next-links-in-section-with-title.html" . }}
-           
-          </main>
-        </section>
-      </section>
-    </main>
 
-    <footer class="footer">
-        {{ block "footer-v2" . }}
-        {{ partial "footer-v2.html" . }}
-        {{ end }}
-    </footer>
+<!-- If there is a script defined in the page metadata, load it  -->
+{{if .Params.script}}
+    {{ $script := (delimit (slice "scripts" .Params.script) "/")}}
+    {{ partial (string $script) .}}
+{{end }}
 
-    <!-- If there is a script defined in the page metadata, load it  -->
-    {{if .Params.script}}
-      {{ $script := (delimit (slice "scripts" .Params.script) "/")}}
-      {{ partial (string $script) .}}
-    {{end }}
 
-</div>
 
 
 
diff --git a/layouts/redoc/single.html b/layouts/redoc/single.html
index 664f3df3..2451793d 100644
--- a/layouts/redoc/single.html
+++ b/layouts/redoc/single.html
@@ -1,32 +1,14 @@
 {{ define "main" }}
 
-
-<div class="grid-container">
-    <aside class="sidebar">
-        {{ partial "sidebar-v2.html" . }}
-    </aside>
-
-    <header class="header">
-        {{ block "header" . }}{{end}}
-    </header>
-
-
-    <main class="content content__redocly">
-   
-        <div id="api-component">{{ .Content}}</div>
-    </main>
-
-    <footer class="footer">
-        {{ block "footer-v2" . }}
-        {{ partial "footer-v2.html" . }}
-        {{ end }}
-    </footer>
-
-    <!-- If there is a script defined in the page metadata, load it  -->
-    {{if .Params.script}}
-      {{ $script := (delimit (slice "scripts" .Params.script) "/")}}
-      {{ partial (string $script) .}}
-    {{end }}
+<main class="content content__redocly">
+    <div id="api-component">{{ .Content}}</div>
+</main>
+
+<!-- If there is a script defined in the page metadata, load it  -->
+{{if .Params.script}}
+    {{ $script := (delimit (slice "scripts" .Params.script) "/")}}
+    {{ partial (string $script) .}}
+{{end }}
 
 </div>
 {{ end }}

From d53d624487fe230887a5a7704b31cc0b29b89d4a Mon Sep 17 00:00:00 2001
From: Jack Hickey <133868041+nginx-jack@users.noreply.github.com>
Date: Mon, 23 Jun 2025 16:06:46 +0100
Subject: [PATCH 07/14] Header: Fix search and f5 sites

---
 assets/css/v2/style.css          | 41 ++++++++++++++++++++++++++++----
 layouts/_default/list.html       |  3 +--
 layouts/partials/header.html     | 36 ++++++++++++++++++++++++++--
 layouts/partials/sidebar-v2.html |  2 +-
 4 files changed, 73 insertions(+), 9 deletions(-)

diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css
index 1c33960a..033b8ca7 100644
--- a/assets/css/v2/style.css
+++ b/assets/css/v2/style.css
@@ -333,7 +333,7 @@ ol li:last-child {
 .grid-container {
   display: grid;
   grid-template-columns: var(--sidebar-width) 1fr;
-  grid-template-rows: var(--space-xl) 1fr auto;
+  grid-template-rows: var(--space-3xl) 1fr auto;
   grid-template-areas:
     "sidebar header"
     "sidebar content"
@@ -387,6 +387,41 @@ ol li:last-child {
     }
   }
 
+  .dropdown-content {
+    position: absolute;
+    background-color: oklch(var(--color-background));
+    border: oklch(var(--color-foreground)) 1px solid;
+    box-shadow: 3px 3px 0px oklch(var(--color-shadow));
+    z-index: 1;
+    right: 0;
+    display: none;
+    width: 400px;
+    max-width: 80vw;
+    margin-right: 2rem;
+  }
+
+  .dropdown-content ul {
+    padding: 20px 10px;
+  }
+
+  .nav-item-explore {
+    margin: 0;
+  }
+
+  .navbar-button {
+    padding: 0.5rem 0.5rem;
+    border: none;
+    border-radius: 0.25rem;
+    text-align: center;
+    text-decoration: none;
+    cursor: pointer;
+  }
+
+  .remove-bottom-radius {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
   ul {
     list-style: none;
   }
@@ -778,7 +813,7 @@ nav {
 @media (min-width: 88em) {
   .text-content {
     grid-template-columns: var(--grid-content) var(--grid-side-callout);
-    grid-template-rows: 70px max-content;
+    grid-template-rows: 3rem max-content;
     column-gap: var(--grid-column-gutter);
   }
 
@@ -843,8 +878,6 @@ nav {
 
 atomic-search-interface {
   height: fit-content;
-  margin-bottom: 2rem;
-  margin-top: 2rem;
 }
 
 .header-search-box {
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index 1c5b0b8e..494edfc9 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -2,7 +2,6 @@
 
 <main class="content content-has-toc" role="main">
 <section class="main-layout">
-
     <section id="maincontent" class="content-layout">
     <div data-cms-edit="content" class="text-content list-page">
         <section class="breadcrumb-layout wide">
@@ -41,6 +40,6 @@ <h2>
     </section>
 </section>
 </main>
-</div>
+
 
 {{ end }}
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index afa145bd..08824333 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,7 +1,39 @@
 {{ define "header" }}
 <div class="header-container">
     <div>Product Selector</div>
-    <div>Search</div>
-    <div>F5 Sites</div>
+    {{ if ( not ( in .Site.Params.buildtype "package" ) ) }}
+      <div>
+        <!-- Standalone search box. -->
+        {{ partial "coveo-atomic-search.html" }}
+      </div>
+    {{ end }}
+
+    <div>
+    {{ $f5Sites := slice
+      (dict "title" "DevCentral" "url" "https://community.f5.com/" "description" "Connect & learn in our hosted community")
+      (dict "title" "MyF5" "url" "https://my.f5.com/" "description" "Your key to everything F5, including support, registration keys, and subscriptions")
+      (dict "title" "NGINX" "url" "https://nginx.org/" "description" "Learn more about NGINX Open Source and read the community blog")
+    }}
+
+    <ul class="navbar navbar-nav">
+        <li class="nav-item-explore active">
+          <button id="navbar-sites-button" class="button navbar-button">
+              F5 Sites
+              <i id="navbar-sites-button-icon" class="link-chevron-icon fa-solid fa-chevron-down"></i>
+          </button>
+          <div class="dropdown-content" id="dropdown-content">
+            <ul>
+              {{ range $f5Sites }}
+                <li>
+                  <a href="{{ .url }}" target="_blank" >{{ .title }}</a>
+                  <p>{{ .description }}</p>
+                </li>
+              {{ end }}
+            </ul>
+          </div>
+        </li>
+    </ul>
+
+    </div>
 </div>
 {{ end }}
diff --git a/layouts/partials/sidebar-v2.html b/layouts/partials/sidebar-v2.html
index 0c75ba16..fe77a479 100644
--- a/layouts/partials/sidebar-v2.html
+++ b/layouts/partials/sidebar-v2.html
@@ -1,4 +1,4 @@
-{{ $nginxProducts := slice 
+{{ $nginxProducts := slice
     (dict "title" "NGINX One Console" "url" "/nginx-one" "type" "nginx-one")
     (dict "title" "NGINX Plus" "url" "/nginx" "type" "nginx-one")
     (dict "title" "NGINX Instance Manager" "url" "/nginx-instance-manager" "type" "nginx-one")

From e9b2699f401905dcceb518d1c9f695d9de56bc04 Mon Sep 17 00:00:00 2001
From: Jack Hickey <133868041+nginx-jack@users.noreply.github.com>
Date: Tue, 24 Jun 2025 10:04:18 +0100
Subject: [PATCH 08/14] Search: Fix search page render on new grid

---
 assets/css/v2/style.css    | 38 ++++++++++++++++++++++++++------------
 layouts/search/single.html |  2 +-
 2 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css
index 033b8ca7..951572af 100644
--- a/assets/css/v2/style.css
+++ b/assets/css/v2/style.css
@@ -349,6 +349,32 @@ ol li:last-child {
   }
 }
 
+/* Homepage specific layout */
+.grid-container:has(.homepage) {
+  grid-template-columns: 1fr;
+  grid-template-areas:
+    "header"
+    "content"
+    "footer";
+
+  .sidebar {
+    display: none;
+  }
+}
+
+/* Search specific layout */
+.grid-container:has(.search) {
+  grid-template-columns: 1fr;
+  grid-template-areas:
+    "header"
+    "content"
+    "footer";
+
+  .sidebar {
+    display: none;
+  }
+}
+
 .header {
   grid-area: header;
   display: flex;
@@ -577,18 +603,6 @@ nav {
 /* MARK: Homepage
 */
 
-.grid-container:has(.homepage) {
-  grid-template-columns: 1fr;
-  grid-template-areas:
-    "header"
-    "content"
-    "footer";
-
-  .sidebar {
-    display: none;
-  }
-}
-
 .homepage {
   --content-max-width: 120rem;
 
diff --git a/layouts/search/single.html b/layouts/search/single.html
index 9d2e1cd1..cbab6a2f 100644
--- a/layouts/search/single.html
+++ b/layouts/search/single.html
@@ -1,5 +1,5 @@
 {{ define "main" }}
-<section class="main-layout" style="margin-left: 2rem;" >
+<section class="search" style="margin-left: 2rem;" >
   {{ partial "coveo-atomic.html" .}}
 </section>
 {{ end }}

From 23ec93bb540c51ac8e4c35664fa340fdff205b2e Mon Sep 17 00:00:00 2001
From: Jack Hickey <133868041+nginx-jack@users.noreply.github.com>
Date: Tue, 24 Jun 2025 10:33:14 +0100
Subject: [PATCH 09/14] Headers: Handle show hide logo depending on page

---
 assets/css/v2/style.css      | 35 ++++++++++++++++++++++++++++++++++-
 layouts/partials/header.html | 14 +++++++++++---
 2 files changed, 45 insertions(+), 4 deletions(-)

diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css
index 951572af..8282c4d3 100644
--- a/assets/css/v2/style.css
+++ b/assets/css/v2/style.css
@@ -246,6 +246,10 @@ textarea:not([rows]) {
   --grid-gutter: var(--space-s-l, clamp(1rem, 0.4975rem + 2.5126vw, 2.25rem));
   --grid-columns: 12;
 
+  /* TODO: This aligns the logo in the header perfectly with the one in the sidebar, but
+ this is not a safe way to do it, and likely to get out of sync */
+  --header-height: 93px;
+
   --sidebar-width: 22rem;
   --sidebar-item-padding: 0.25rem 0.75rem;
   --content-max-width: 88rem;
@@ -333,7 +337,7 @@ ol li:last-child {
 .grid-container {
   display: grid;
   grid-template-columns: var(--sidebar-width) 1fr;
-  grid-template-rows: var(--space-3xl) 1fr auto;
+  grid-template-rows: var(--header-height) 1fr auto;
   grid-template-areas:
     "sidebar header"
     "sidebar content"
@@ -347,6 +351,10 @@ ol li:last-child {
       "content"
       "footer";
   }
+
+  .header__logo {
+    display: none;
+  }
 }
 
 /* Homepage specific layout */
@@ -360,6 +368,14 @@ ol li:last-child {
   .sidebar {
     display: none;
   }
+
+  .header__logo {
+    display: unset;
+  }
+
+  .header__product-selector {
+    display: none;
+  }
 }
 
 /* Search specific layout */
@@ -373,6 +389,10 @@ ol li:last-child {
   .sidebar {
     display: none;
   }
+
+  .header__logo {
+    display: unset;
+  }
 }
 
 .header {
@@ -388,6 +408,19 @@ ol li:last-child {
     align-items: center;
     width: 100%;
 
+    .header__img {
+      height: 2rem;
+      padding-left: 12px;
+    }
+
+    .header__search {
+      width: 14rem;
+    }
+
+    .header__product-selector {
+      width: 10rem;
+    }
+
     > ul {
       padding: 0;
     }
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 08824333..88245805 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,14 +1,22 @@
 {{ define "header" }}
 <div class="header-container">
-    <div>Product Selector</div>
+
+    <div class="header__logo">
+        <a href="{{ .Site.BaseURL | relLangURL }}" alt="NGINX Docs Home">
+            <img class="header__img" src="{{ "/images/icons/NGINX-Docs-horiz-black-type.svg" | absURL }}" alt="NGINX Docs">
+        </a>
+    </div>
+
+    <div class="header__product-selector">Product Selector</div>
+
     {{ if ( not ( in .Site.Params.buildtype "package" ) ) }}
-      <div>
+      <div class="header__search">
         <!-- Standalone search box. -->
         {{ partial "coveo-atomic-search.html" }}
       </div>
     {{ end }}
 
-    <div>
+    <div class="header__f5sites">
     {{ $f5Sites := slice
       (dict "title" "DevCentral" "url" "https://community.f5.com/" "description" "Connect & learn in our hosted community")
       (dict "title" "MyF5" "url" "https://my.f5.com/" "description" "Your key to everything F5, including support, registration keys, and subscriptions")

From 03b9f0782c6ab6483b6a8691fbb849cc2db93c01 Mon Sep 17 00:00:00 2001
From: Jack Hickey <133868041+nginx-jack@users.noreply.github.com>
Date: Tue, 24 Jun 2025 14:16:37 +0100
Subject: [PATCH 10/14] Headers: Add back product selector

---
 assets/css/v2/style.css       | 36 +++++++++++++++++++--
 assets/js/product-selector.js | 21 +++++--------
 layouts/partials/header.html  | 59 ++++++++++++++++++++++++++++++++++-
 3 files changed, 99 insertions(+), 17 deletions(-)

diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css
index 8282c4d3..ec1196de 100644
--- a/assets/css/v2/style.css
+++ b/assets/css/v2/style.css
@@ -419,6 +419,23 @@ ol li:last-child {
 
     .header__product-selector {
       width: 10rem;
+
+      .product-selector__button {
+        display: flex;
+        align-items: center;
+        background: oklch(var(--color-background));
+        border: none;
+        width: 16rem;
+        font-weight: 500;
+        cursor: pointer;
+        color: oklch(var(--color-foreground));
+        text-decoration-color: oklch(var(--color-brand) / 0.3);
+        transition: color 0.15s ease-in-out;
+
+        & :hover {
+          color: oklch(var(--color-brand));
+        }
+      }
     }
 
     > ul {
@@ -1032,18 +1049,31 @@ body:not(:has(.main-layout)) header atomic-search-interface {
 */
 
 .product-selector {
+  /* should appear above search box on smaller displays */
+  z-index: 11;
   display: none;
   position: absolute;
   top: 0;
-  min-width: 80%;
-  margin-top: 8.375rem;
-  margin-left: 44rem;
+  margin-top: 4em;
   padding: 1rem 1.5rem;
   background-color: oklch(var(--color-background));
   border: oklch(var(--color-foreground)) 1px solid;
   box-shadow: 3px 3px 0px oklch(var(--color-shadow));
 }
 
+.product-name {
+  padding-right: var(--space-s);
+}
+
+.product-selector-button-icon {
+  color: black;
+
+  svg {
+    color: black;
+    stroke: currentColor;
+  }
+}
+
 button:has(~ .product-selector[style*="block"])
   > .product-selector-button-icon {
   transition: transform 0.1s ease-in-out;
diff --git a/assets/js/product-selector.js b/assets/js/product-selector.js
index 909b9f51..8ce2f0e3 100644
--- a/assets/js/product-selector.js
+++ b/assets/js/product-selector.js
@@ -4,24 +4,19 @@ document.addEventListener('DOMContentLoaded', () => {
     'product-selector-button'
   );
 
-  if (productSelectorButton === null || productSelectorContent == null) {
-    return;
-  }
+  if (!productSelectorButton || !productSelectorContent) return;
 
   productSelectorButton.addEventListener('click', () => {
-    /* Logic for hiding/showing ONLY when the button is clicked */
-    if (productSelectorContent.style.display === 'block') {
-      productSelectorContent.style.display = 'none';
-      productSelectorButton.classList.remove('remove-bottom-radius');
-    } else {
-      productSelectorContent.style.display = 'block';
-      productSelectorButton.classList.add('remove-bottom-radius');
-    }
+    const isVisible = productSelectorContent.style.display === 'block';
+    productSelectorContent.style.display = isVisible ? 'none' : 'block';
+    productSelectorButton.classList.toggle('remove-bottom-radius', !isVisible);
   });
 
   window.addEventListener('click', (event) => {
-    /* Greedy Logic to hide the product selector when something other than the button is clicked. Assumes everything has an id containing "product-selector" */
-    if (!event.target.id.includes('product-selector')) {
+    const isClickInside =
+      productSelectorButton.contains(event.target) ||
+      productSelectorContent.contains(event.target);
+    if (!isClickInside) {
       productSelectorContent.style.display = 'none';
       productSelectorButton.classList.remove('remove-bottom-radius');
     }
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 88245805..9a1849a3 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -7,7 +7,64 @@
         </a>
     </div>
 
-    <div class="header__product-selector">Product Selector</div>
+    <div class="header__product-selector">
+        {{ $nginxProducts := slice
+            (dict "title" "NGINX One Console" "url" "/nginx-one" "type" "nginx-one")
+            (dict "title" "NGINX Plus" "url" "/nginx" "type" "nginx-one")
+            (dict "title" "NGINX Instance Manager" "url" "/nginx-instance-manager" "type" "nginx-one")
+            (dict "title" "NGINX Ingress Controller" "url" "/nginx-ingress-controller" "type" "nginx-one")
+            (dict "title" "NGINX Gateway Fabric" "url" "/nginx-gateway-fabric" "type" "nginx-one")
+            (dict "title" "NGINX Open Source" "url" "https://nginx.org/en/docs/" "type" "nginx-one")
+            (dict "title" "NGINX Agent" "url" "/nginx-agent" "type" "nginx-one")
+            (dict "title" "NGINX App Protect WAF" "url" "/nginx-app-protect-waf" "type" "nginx-app-protect")
+            (dict "title" "NGINX App Protect DoS" "url" "/nginx-app-protect-dos" "type" "nginx-app-protect")
+            (dict "title" "NGINX as a Service for Azure" "url" "/nginxaas/azure/" "type" "nginx-as-a-service")
+            (dict "title" "NGINX Unit" "url" "https://unit.nginx.org/" "type" "nginx-other")
+        }}
+        {{ $productMap := dict }}
+        {{ range $nginxProducts }}
+            {{ $productId := index (split .url "/") 1 }}
+            {{ $productMap = merge $productMap (dict $productId .title) }}
+        {{ end }}
+        {{ $relPermalink := .RelPermalink }}
+        {{ $productIdentifier := index ((split $relPermalink "/")) 1 }}
+        {{ $productName := index $productMap $productIdentifier }}
+
+        <button class="product-selector__button" id="product-selector-button">
+            {{/* product name and selector */}}
+            <span class="product-name">{{ $productName }}</span>
+            <span class="product-selector-button-icon">
+                <svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M1 13L7 7L0.999999 1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+            </span>
+        </button>
+        <div class="product-selector" id="product-selector">
+            {{ $groupedProducts := dict
+                "nginx-one" (where $nginxProducts "type" "nginx-one")
+                "nginx-app-protect" (where $nginxProducts "type" "nginx-app-protect")
+                "nginx-as-a-service" (where $nginxProducts "type" "nginx-as-a-service")
+                "nginx-other" (where $nginxProducts "type" "nginx-other")
+            }}
+            {{ $orderedKeys := slice "nginx-one" "nginx-app-protect" "nginx-as-a-service" "nginx-other" }}
+            {{ range $orderedKeys }}
+            {{ $type := . }}
+            {{ $products := index $groupedProducts $type }}
+                <div class="product-selector-content" id="product-selector-content">
+                    <p>{{ $type | humanize | title | upper }}</p>
+                    <ul>
+                    {{ range $products }}
+                        <li>
+                            <a href="{{ .url }}">{{ .title }}</a>
+                        </li>
+                    {{ end }}
+                    </ul>
+                </div>
+            {{ end }}
+        </div>
+
+
+    </div>
 
     {{ if ( not ( in .Site.Params.buildtype "package" ) ) }}
       <div class="header__search">

From e3f927013a4f86dab651f2472343399e87c1088f Mon Sep 17 00:00:00 2001
From: Jack Hickey <133868041+nginx-jack@users.noreply.github.com>
Date: Tue, 24 Jun 2025 14:31:01 +0100
Subject: [PATCH 11/14] Headers: Fix header responsivness

---
 assets/css/v2/style.css | 23 ++---------------------
 1 file changed, 2 insertions(+), 21 deletions(-)

diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css
index ec1196de..97bff28e 100644
--- a/assets/css/v2/style.css
+++ b/assets/css/v2/style.css
@@ -243,6 +243,7 @@ textarea:not([rows]) {
 
   /* @link https://utopia.fyi/grid/calculator?c=320,16,1.2,1240,18,1.25,5,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
   --grid-max-width: 69.75rem;
+  --grid-min-width: 34rem;
   --grid-gutter: var(--space-s-l, clamp(1rem, 0.4975rem + 2.5126vw, 2.25rem));
   --grid-columns: 12;
 
@@ -343,6 +344,7 @@ ol li:last-child {
     "sidebar content"
     "sidebar footer";
   min-height: 100vh;
+  min-width: var(--grid-min-width);
 
   @media (max-width: 68rem) {
     grid-template-columns: 1fr;
@@ -403,7 +405,6 @@ ol li:last-child {
   .header-container {
     display: flex;
     flex-direction: row;
-    flex-wrap: wrap;
     justify-content: space-between;
     align-items: center;
     width: 100%;
@@ -441,26 +442,6 @@ ol li:last-child {
     > ul {
       padding: 0;
     }
-
-    @media (max-width: 700px) {
-      a,
-      ul {
-        width: calc(50% - 1rem);
-      }
-
-      li {
-        float: right;
-      }
-
-      div {
-        order: 3;
-        width: 100%;
-
-        #search-standalone-header {
-          margin-top: 1rem;
-        }
-      }
-    }
   }
 
   .dropdown-content {

From 3ffd1d230926a7741278f3ad415a5fe4ff540be1 Mon Sep 17 00:00:00 2001
From: Lam Nguyen <la.nguyen@f5.com>
Date: Tue, 24 Jun 2025 10:38:06 -0700
Subject: [PATCH 12/14] Card: Fixed build error on card-layout due to Scratch

---
 exampleSite/content/test-product/_index.md | 23 +---------------------
 layouts/_default/list.html                 |  3 ---
 layouts/partials/custom-landing-page.html  | 22 ---------------------
 layouts/shortcodes/card-layout.html        |  3 ---
 4 files changed, 1 insertion(+), 50 deletions(-)
 delete mode 100644 layouts/partials/custom-landing-page.html

diff --git a/exampleSite/content/test-product/_index.md b/exampleSite/content/test-product/_index.md
index c3f5d6e8..b52a2811 100644
--- a/exampleSite/content/test-product/_index.md
+++ b/exampleSite/content/test-product/_index.md
@@ -2,25 +2,4 @@
 description: Test pages for nginx-hugo-theme
 title: Test pages
 weight: 100
-hasCustomContent: true
----
-<!-- <card-layout> - Available params: title (required: string)-->
-{{< card-layout >}}
-  <!-- <card-section> - Available params: title (required: string), showAsCards (optional: boolean, default false) -->
-  <!-- If there is no "title" for <card-section>, it is implied it is the main content section and not a new content section -->
-  {{< card-section >}}
-    {{< card title="Call Out usages" >}}
-      <!-- <card> - Available params: title (required: string), titleUrl (optional: string, relative path or absolute URL (e.g. https://google.com)) -->
-      Examples for call-out shortcode
-    {{</ card >}}
-    {{< card title="Code Block usages" >}}
-      Examples for codeblock shortcode
-    {{</ card >}}
-  {{</ card-section >}}
-  # Other Products on ExampleSite
-  {{< card-section title="NGINX" showAsCards="true" >}}
-    {{< card title="NGINX Plus" titleUrl="/nginx/" >}}
-      Installing NGINX
-    {{</ card >}}
-  {{</ card-section >}}
-{{</ card-layout >}}
\ No newline at end of file
+---
\ No newline at end of file
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index 494edfc9..e2821435 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -17,11 +17,8 @@ <h1>{{ .Title }}</h1>
 
         {{ $hasCustomContent := .Params.hasCustomContent | default false }}
         {{ if $hasCustomContent }}
-        {{ .Page.Scratch.Set "custom-landing-page-file-name" "custom-landing-page.html" }}
-        {{ .Page.Scratch.Set "custom-landing-page-context" . }}
         {{ .Content }}
         {{ else }}
-        {{ .Content }}
         {{ range .Pages.ByWeight }}
         <h2>
             <a href="{{ if .Params.url}}{{ .Params.url}}{{else}}{{ .Permalink }}{{end}}">{{ .Title }}</a>
diff --git a/layouts/partials/custom-landing-page.html b/layouts/partials/custom-landing-page.html
deleted file mode 100644
index 256b7661..00000000
--- a/layouts/partials/custom-landing-page.html
+++ /dev/null
@@ -1,22 +0,0 @@
-{{ $cards := .Page.Scratch.Get "cards" }}
-{{ $showAsCards := index ( .Page.Scratch.Get "showAsCards") "main" }}
-{{ $class := "card-grid wide"}}
-
-<div class="{{ if eq $showAsCards "true" }}{{ $class }}{{ end }}">
-  <!-- Mainframe -->
-  <div>
-    {{ range .Pages.ByWeight }}
-      {{ $title := .Title }}
-      <div class="card-container">
-        <h2>
-          <a href="{{ if .Params.url}}{{ .Params.url}}{{else}}{{ .Permalink }}{{end}}">{{ $title }}</a>
-        </h2>
-        {{ range $cards }}
-          {{ if eq .title $title }}
-            <p>{{- .content -}}</p>
-          {{ end }}
-        {{ end }}
-      </div>
-    {{ end }}
-  </div>
-</div>
\ No newline at end of file
diff --git a/layouts/shortcodes/card-layout.html b/layouts/shortcodes/card-layout.html
index 564b3346..8791ca49 100644
--- a/layouts/shortcodes/card-layout.html
+++ b/layouts/shortcodes/card-layout.html
@@ -1,5 +1,2 @@
 <!-- Render the main content first with modifications, then render the custom content -->
-{{ $customLandingPageFileName := .Page.Scratch.Get "custom-landing-page-file-name" }}
-{{ $customLandingPageContext := .Page.Scratch.Get "custom-landing-page-context" }}
-{{ partial $customLandingPageFileName $customLandingPageContext }}
 <div class="card-layout">{{- .Inner | markdownify -}}</div>
\ No newline at end of file

From 417422ede6435c0d9ffa2d72b956958d80d483bd Mon Sep 17 00:00:00 2001
From: Lam Nguyen <la.nguyen@f5.com>
Date: Tue, 24 Jun 2025 11:35:50 -0700
Subject: [PATCH 13/14] Landing: Updated list page with custom landing params

---
 layouts/_default/list.html | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index e2821435..8980538c 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -11,11 +11,19 @@
             {{ end }}
         {{ end }}
         </section>
-        <h1>{{ .Title }}</h1>
+        <div class="list-header-container">
+          <img src="/images/icons/{{ .Params.logo | default "NGINX-product-icon.svg" }}">
+          <div class="list-header-title">
+            <h1>{{ .Title }}</h1>
+            {{ if index .Params "nd-subtitle" }}
+              <p>{{ index .Params "nd-subtitle" | markdownify }}</p>
+            {{ end }}
+          </div>
+        </div>
 
         {{ partial "banner" . }}
 
-        {{ $hasCustomContent := .Params.hasCustomContent | default false }}
+        {{ $hasCustomContent := index .Params "nd-landing-page" | default false }}
         {{ if $hasCustomContent }}
         {{ .Content }}
         {{ else }}

From 44a5a3d22ecb824539cdfe0e78840b22305d9132 Mon Sep 17 00:00:00 2001
From: Lam Nguyen <la.nguyen@f5.com>
Date: Tue, 24 Jun 2025 12:39:24 -0700
Subject: [PATCH 14/14] Header: Added default product selector text

---
 assets/css/v2/style.css      | 2 +-
 layouts/partials/header.html | 8 +++++---
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css
index 9658db3b..afc11bfd 100644
--- a/assets/css/v2/style.css
+++ b/assets/css/v2/style.css
@@ -454,7 +454,7 @@ ol li:last-child {
     display: none;
     width: 400px;
     max-width: 80vw;
-    margin-right: 2rem;
+    margin-right: 1rem;
   }
 
   .dropdown-content ul {
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 9a1849a3..efb40115 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -23,12 +23,14 @@
         }}
         {{ $productMap := dict }}
         {{ range $nginxProducts }}
-            {{ $productId := index (split .url "/") 1 }}
-            {{ $productMap = merge $productMap (dict $productId .title) }}
+            {{ if not (or (eq .title "NGINX Open Source" ) (eq .title "NGINX Unit")) }}
+              {{ $productId := index (split .url "/") 1 }}
+              {{ $productMap = merge $productMap (dict $productId .title) }}
+            {{ end }}
         {{ end }}
         {{ $relPermalink := .RelPermalink }}
         {{ $productIdentifier := index ((split $relPermalink "/")) 1 }}
-        {{ $productName := index $productMap $productIdentifier }}
+        {{ $productName := index $productMap $productIdentifier | default "Product Documentation" }}
 
         <button class="product-selector__button" id="product-selector-button">
             {{/* product name and selector */}}