Content: Replace with data attribute grid system

Add .content class to handle overall content reflow
Use scaling fonts
Refactor call outs to use grid utilities
TODO: Standard mobile sizes horz scroll on some pages
TODO: Homepage update to use grid utility
TODO: List card layout update to use grid utility

Author: nginx-jack

assets/css/v2/style.css

@@ -206,17 +206,26 @@ textarea:not([rows]) {
 
   --flow-gap: 1rem;
 
-  /* @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 */
+  /* @link https://utopia.fyi/type/calculator?c=320,14,1.2,1240,16,1.25,5,3,&s=0.75,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);
+  /* Step -3: 8.1019px → 8.192px */
+  --font-step--3: clamp(0.5064rem, 0.5044rem + 0.0098vw, 0.512rem);
+  /* Step -2: 9.7222px → 10.24px */
+  --font-step--2: clamp(0.6076rem, 0.5964rem + 0.0563vw, 0.64rem);
+  /* Step -1: 11.6667px → 12.8px */
+  --font-step--1: clamp(0.7292rem, 0.7045rem + 0.1232vw, 0.8rem);
+  /* Step 0: 14px → 16px */
+  --font-step-0: clamp(0.875rem, 0.8315rem + 0.2174vw, 1rem);
+  /* Step 1: 16.8px → 20px */
+  --font-step-1: clamp(1.05rem, 0.9804rem + 0.3478vw, 1.25rem);
+  /* Step 2: 20.16px → 25px */
+  --font-step-2: clamp(1.26rem, 1.1548rem + 0.5261vw, 1.5625rem);
+  /* Step 3: 24.192px → 31.25px */
+  --font-step-3: clamp(1.512rem, 1.3586rem + 0.7672vw, 1.9531rem);
+  /* Step 4: 29.0304px → 39.0625px */
+  --font-step-4: clamp(1.8144rem, 1.5963rem + 1.0904vw, 2.4414rem);
+  /* Step 5: 34.8365px → 48.8281px */
+  --font-step-5: clamp(2.1773rem, 1.8731rem + 1.5208vw, 3.0518rem);
 
   /* @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 */
@@ -515,19 +524,6 @@ ol li:last-child {
   }
 }
 
-.content {
-  grid-area: content;
-  justify-self: center;
-  padding: 0 var(--space-l) 2rem var(--space-l);
-  max-width: var(--content-max-width);
-
-  /* Allow redocly to fill the entire container */
-  &.content__redocly {
-    justify-self: unset;
-    max-width: unset;
-  }
-}
-
 .footer {
   grid-area: footer;
   padding: var(--space-l);
@@ -848,11 +844,75 @@ nav {
 /* MARK: Main content
 */
 
-.content-layout {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  grid-template-rows: 1fr;
-  z-index: 1;
+.content {
+  grid-area: content;
+  justify-self: center;
+  padding: 0 var(--space-l) 2rem var(--space-l);
+  max-width: var(--content-max-width);
+
+  & > *,
+  & > ul,
+  & > ol {
+    display: grid;
+    grid-template-columns: 1fr;
+    /* These gaps determine the spacing between all content. Be careful!! */
+    gap: var(--space-m) var(--space-m);
+
+    /* Handles some strangeness where single-line codeblocks caused
+   horizon */
+    ol:has(.highlight-v2),
+    ul:has(.highlight-v2) {
+      min-width: 0;
+      max-width: 100%;
+    }
+
+    > *:not([data-grid]),
+    > li:not([data-grid]) {
+      grid-column: 1;
+    }
+
+    [data-grid="wide"] {
+      grid-column: 1;
+    }
+    [data-grid="first-third"] {
+      grid-column: 1;
+    }
+    [data-grid="last-third"] {
+      grid-column: 1;
+    }
+
+    @media (min-width: 55rem) {
+      max-width: var(--content-max-width);
+      grid-template-columns: repeat(var(--grid-columns), 1fr);
+
+      > *:not([data-grid]),
+      > li:not([data-grid]) {
+        grid-column: 1 / 8;
+      }
+
+      [data-grid="wide"] {
+        grid-column: 1 / -1;
+      }
+
+      [data-grid="first-third"] {
+        grid-column: 1 / 4;
+      }
+
+      [data-grid="first-two-thirds"] {
+        grid-column: 1 / 8;
+      }
+
+      [data-grid="last-third"] {
+        grid-column: 8 / -1;
+      }
+    }
+  }
+
+  /* Allow redocly to fill the entire container */
+  &.content__redocly {
+    justify-self: unset;
+    max-width: unset;
+  }
 }
 
 #searchbox {
@@ -862,30 +922,7 @@ nav {
 }
 
 .breadcrumb-layout {
-  grid-column: 1 / -1;
-}
-
-.text-content {
-  grid-column: 1 / -1;
-  display: grid;
-  grid-template-columns: var(--grid-content-mobile);
-  column-gap: var(--grid-column-gutter);
-  margin-top: 2rem;
-  grid-auto-rows: max-content;
-  row-gap: var(--flow-gap);
-  justify-content: center;
-}
-
-.text-content > :not(.wide) {
-  grid-column: 1 / -1;
-}
-
-.text-content .wide {
-  grid-column: 1 / -1;
-}
-
-.text-content table {
-  width: 100%;
+  padding-top: 1rem;
 }
 
 main {
@@ -897,29 +934,6 @@ main {
     display: unset;
   }
 
-  .text-content {
-    grid-template-columns: var(--grid-content) var(--grid-side-callout);
-    grid-template-rows: 3rem max-content;
-    column-gap: var(--grid-column-gutter);
-  }
-
-  .text-content > :not(.wide) {
-    grid-column: 1;
-  }
-
-  .content-layout {
-    display: grid;
-    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);
-  }
-
   .navbar atomic-search-interface {
     margin: 0;
     display: block;
@@ -1353,14 +1367,18 @@ a:hover {
   text-decoration-color: oklch(var(--color-brand) / 0.8);
 }
 
+/* MARK: Typography */
+
 h1 {
-  font-size: 2rem;
-  margin: 0 0 1rem 0;
+  font-size: var(--font-step-3);
 }
 
 h2 {
-  font-size: 1.5rem;
-  margin: 1rem 0 0.75rem 0;
+  font-size: var(--font-step-2);
+}
+
+p {
+  font-size: var(--font-step-0);
 }
 
 h2:target,
@@ -1637,7 +1655,6 @@ blockquote p:last-child {
 /* Maintain the split column for as long as possible */
 @media (min-width: 67rem) {
   blockquote.side-callout {
-    grid-column: 2 !important;
     align-self: start;
   }
 }

exampleSite/content/test-product/call-out/all-callouts.md

@@ -25,15 +25,15 @@ This is a plain callout with a default title for its type. It has a [link](#plai
 
 Naturally, callouts should contain less text within them than the text it lives next to. We do this for several reasons. Firstly, it looks weird to have a big empty space in the primary content area. Secondly, if you have more text in the callout, then it stops being a callout. I have asked an LLM to lengthen this passage.
 
-{{<call-out "side-callout">}}
+{{<call-out sideline="true">}}
 This is a plain side callout with no title. It has a [link](#plain-callouts) to a heading on this page. Its shortcode is `<call-out>` with the `.side-callout` class.
 {{</call-out>}}
 
 When designing effective web layouts, it's important to maintain proper balance between primary content and supplementary elements. Callouts serve as attention-grabbing devices that highlight key information, but they should remain subordinate to the main content flow. This hierarchy helps users navigate your page intuitively, guiding their attention appropriately. A well-designed callout complements the surrounding text rather than competing with it.
 
 Additionally, concise callouts tend to be more effective at capturing user attention. When a callout becomes too verbose, users are less likely to read it entirely, defeating its purpose. The visual weight of callouts should align with their informational importance - brief, impactful statements create better engagement than lengthy explanations. Remember that white space itself is a powerful design element, creating visual breathing room that enhances readability and focus. Ultimately, the most successful callouts follow the principle of "less is more," delivering maximum impact through minimal interruption to the user's reading experience.
 
-{{<call-out "side-callout" "Custom title">}}
+{{<call-out sideline="true" title="Custom title">}}
 This is a plain side callout with a custom title. It has a [link](#plain-callouts) to a heading on this page. Its shortcode is `<call-out>` with the `.side-callout` class, and a custom title.
 {{</call-out>}}
 
@@ -84,4 +84,4 @@ This is `<before-you-begin>`.
 
 {{<see-also>}}
 This is `<see-also>`.
-{{</see-also>}}
+{{</see-also>}}

layouts/_default/list.html

@@ -1,16 +1,14 @@
 {{ define "main" }}
 
 <main class="content " 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">
+        <div class="breadcrumb-layout wide">
         {{ if not .IsHome }}
             {{ if not (in .Params.display_breadcrumb "false" ) }}
             {{ partial "breadcrumb" .}}
             {{ end }}
         {{ end }}
-        </section>
+        </div>
         <div class="list-header-container">
           <img src="/images/icons/{{ .Params.logo | default "NGINX-product-icon.svg" }}">
           <div class="list-header-title">
@@ -42,8 +40,7 @@ <h2>
         {{ end }}
 
     </div>
-    </section>
-</section>
+
 </main>
 
 

layouts/_default/single.html

@@ -1,28 +1,25 @@
 {{ define "main" }}
-
 <main class="content">
     <!-- Replace icons -->
     {{ $content := partial "icon-replacement.html" (dict "content" .Content) }}
 
-
-    <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>
+    <div class="breadcrumb-layout wide">
+        {{ if not .IsHome }}
+        {{ if not (in .Params.display_breadcrumb "false" ) }}
+        {{ partial "breadcrumb" .}}
+        {{ end }}
+        {{ end }}
+    </div>
+    <article data-cms-edit="content" >
         {{ 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" . }}
@@ -46,6 +43,4 @@ <h1>{{ .Title }}</h1>
 
 
 
-
-
 {{ end }}

layouts/partials/callout.html

@@ -13,10 +13,10 @@
 {{ $sideOption := "side-callout" }}
 {{ $inlineOption := "inline-callout" }}
 
+{{/*  Default to inline callout  */}}
+{{ $dataGrid := "first-two-thirds" }}
 {{ if $sideline }}
-  {{ $class = printf "%s %s" $class $sideOption }}
-{{ else }}
-  {{ $class = printf "%s %s" $class $inlineOption }}
+  {{ $dataGrid = "last-third" }}
 {{ end }}
 
 {{/*  Render a different block, if "loud" callouts are used  */}}
@@ -33,7 +33,7 @@
 {{ $isSpecialTitle := in $specialTitles $type }}
 {{ if $isSpecialTitle }}
 {{/*  Loud callouts  */}}
-<blockquote class="{{ $class }}">
+<blockquote class="{{ $class }}" data-grid="{{ $dataGrid }}">
   <div>
     <div class="call-out-type">
       {{ partial "feather" (dict "context" . "icon" $icon) .}}
@@ -51,7 +51,7 @@
 
 {{ $cleanTitle := strings.TrimSuffix ":" $title}}
 
-<blockquote class="{{ $class }} note" data-title="{{ $cleanTitle }}">
+<blockquote class="{{ $class }} note" data-title="{{ $cleanTitle }}" data-grid="{{ $dataGrid }}">
   <div class="callout-content">
     {{- with $icon -}}
       <i class="{{ . }}"></i>