Grid: Center justify text content

Move breadcrumb into same element as text content to allow it to follow
the content on larger screens.
Slightly increase gutter gap on larger screens.

Author: nginx-jack

assets/css/v2/style.css

@@ -75,6 +75,7 @@
 
   /* vars for the primary grid setup */
   --grid-sidebar: 24rem;
+  --grid-sidebar-gutter: 3rem;
   --grid-content: minmax(34rem, 50rem);
   --grid-content-mobile: minmax(20rem, 50rem);
   --grid-side-callout: minmax(18rem, 26rem);
@@ -353,9 +354,8 @@ nav {
 .content-layout {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  grid-template-rows: var(--breadcrumb-max-height) 1fr;
+  grid-template-rows: 1fr;
   z-index: 1;
-  margin-top: 2rem;
 }
 
 .docs-container {
@@ -427,6 +427,7 @@ 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);
@@ -435,6 +436,7 @@ nav {
 
   .text-content {
     grid-template-columns: var(--grid-content) var(--grid-side-callout);
+    grid-template-rows: 70px auto;
     column-gap: var(--grid-column-gutter);
   }
 
@@ -445,12 +447,19 @@ nav {
   .main-layout {
     display: grid;
     grid-template-columns: var(--sidebar-width) 1fr;
-    column-gap: var(--grid-column-gutter);
+    column-gap: var(--grid-sidebar-gutter);
   }
 
   .content-layout {
     display: grid;
-    grid-template-columns: var(--grid-content) var(--grid-side-callout);
+    grid-template-columns: 1fr minmax(
+        auto,
+        calc(
+          var(--grid-content) +
+          var(--grid-side-callout) +
+          var(--grid-column-gutter)
+        )
+      ) 1fr;
     column-gap: var(--grid-column-gutter);
   }
 
@@ -472,6 +481,11 @@ nav {
   }
 }
 
+/* Handles different flow-gap of list page  */
+.list-page.text-content {
+  grid-template-rows: calc(70px + var(--flow-gap)) auto;
+}
+
 .api {
   margin: 2rem 0 2rem 2rem;
   width: 100%;

layouts/_default/docs.html

@@ -22,14 +22,14 @@
     </div>
 
     <section class="content-layout">
-      <section class="breadcrumb-layout" data-mf="true" style="display: none;">
-        {{ if not .IsHome }}
-          {{ if not (in .Params.display_breadcrumb "false" ) }}
-          {{ partial "breadcrumb" .}}  
-          {{ end }}
-        {{ end }}
-      </section>
       <div class="text-content">
+        <section class="breadcrumb-layout" data-mf="true" style="display: none;">
+          {{ if not .IsHome }}
+            {{ if not (in .Params.display_breadcrumb "false" ) }}
+            {{ partial "breadcrumb" .}}  
+            {{ end }}
+          {{ end }}
+        </section>
         <h1>{{ .Title }}</h1>
         {{ .Content }}
         {{ if eq .Page.Draft true }}{{ partial "draft-badge.html" . }}{{ end }}

layouts/_default/list.html

@@ -19,14 +19,14 @@
   </div>
 
   <section class="content-layout" data-mf="true" style="display: none">
-    <section class="breadcrumb-layout">
-      {{ if not .IsHome }}
-        {{ if not (in .Params.display_breadcrumb "false" ) }}
-        {{ partial "breadcrumb" .}}
-        {{ end }}
-      {{ end }}
-    </section>
     <div class="text-content list-page">
+      <section class="breadcrumb-layout">
+        {{ if not .IsHome }}
+          {{ if not (in .Params.display_breadcrumb "false" ) }}
+          {{ partial "breadcrumb" .}}
+          {{ end }}
+        {{ end }}
+      </section>
       <h1>{{ .Title }}</h1>
       {{ .Content }}