From 4bb4c9dec171df6c76bbaf324255614fd14dd2ec Mon Sep 17 00:00:00 2001
From: Fredrik Jonsson <frjo@xdeb.org>
Date: Fri, 10 Nov 2023 14:52:09 +0100
Subject: [PATCH] Remove content div wrappers. Use grid template columns for
 main to support stretch and breakout classes.

---
 assets/sass/_root.scss                       |  12 +-
 assets/sass/_variables.scss                  |   4 +
 assets/sass/_zen.scss                        |   8 +-
 assets/sass/base/forms/_forms.scss           |  13 +-
 assets/sass/base/grouping/_grouping.scss     |   2 +-
 assets/sass/base/headings/_headings.scss     |   2 +-
 assets/sass/components/box/_box.scss         |   6 +-
 assets/sass/components/cards/_cards.scss     |   4 +
 assets/sass/components/stretch/_stretch.scss |  12 -
 assets/sass/layouts/_layouts.scss            | 249 ++++++++++---------
 assets/sass/styles.scss                      |   1 -
 layouts/_default/card.html                   |   2 -
 layouts/_default/full.html                   |   3 +-
 layouts/_default/list.html                   |   6 +-
 layouts/_default/single.html                 |   7 +-
 layouts/_default/summary.html                |   4 +-
 layouts/index.html                           |   6 +-
 layouts/micro/list.html                      |   6 +-
 layouts/micro/single.html                    |   7 +-
 layouts/micro/summary.html                   |   7 +-
 layouts/podcast/full.html                    |   4 +-
 layouts/podcast/single.html                  |   4 +-
 layouts/taxonomy/summary.html                |   2 -
 23 files changed, 184 insertions(+), 187 deletions(-)
 delete mode 100644 assets/sass/components/stretch/_stretch.scss

diff --git a/assets/sass/_root.scss b/assets/sass/_root.scss
index 2aa6faa..0a31fd3 100644
--- a/assets/sass/_root.scss
+++ b/assets/sass/_root.scss
@@ -1,3 +1,4 @@
+$breakout: $gutters !default;
 $max-page-width: $max-content-width !default;
 
 :root {
@@ -23,11 +24,12 @@ $max-page-width: $max-content-width !default;
     --radius-#{$name}: #{$radius};
   }
 
-  --heading-line-height: #{$heading-line-height};
-  --max-content-width: #{$max-content-width};
-  --max-page-width: #{$max-page-width};
-  --max-line-width: #{$max-line-width};
-  --gutters: #{$gutters};
+  --breakout: #{$breakout};
   --gutters-reverse: #{$gutters-reverse};
+  --gutters: #{$gutters};
+  --heading-line-height: #{$heading-line-height};
   --indent-amount: #{$indent-amount};
+  --max-content-width: #{$max-content-width};
+  --max-line-width: #{$max-line-width};
+  --max-page-width: #{$max-page-width};
 }
diff --git a/assets/sass/_variables.scss b/assets/sass/_variables.scss
index 7865104..0933e0a 100644
--- a/assets/sass/_variables.scss
+++ b/assets/sass/_variables.scss
@@ -147,6 +147,10 @@ $max-line-width:      70ch;
 $gutters:             calc(5px + 1.5625vw);
 $gutters-reverse:     calc(0px - (5px + 1.5625vw));
 
+// Breakout amount.
+// How much should the "breakout" be. Defaults to gutters value.
+// $breakout:             calc(5px + 1.5625vw);
+
 // The amount lists, blockquotes and comments are indented.
 // Use like this: var(--indent-amount)
 $indent-amount:       2rem;
diff --git a/assets/sass/_zen.scss b/assets/sass/_zen.scss
index 19c112f..bfd2daa 100644
--- a/assets/sass/_zen.scss
+++ b/assets/sass/_zen.scss
@@ -47,13 +47,13 @@ label {
 
 // Article and content.
 
-article > .content,
+article,
 aside {
-  ul {
+  & > ul {
     @extend %ul-straight-left;
   }
 
-  ol {
+  & > ol {
     @extend %ol-straight-left;
   }
 }
@@ -212,7 +212,7 @@ figure {
 
 // Form
 
-.content {
+main {
   input,
   textarea {
     &:not(:placeholder-shown):valid {
diff --git a/assets/sass/base/forms/_forms.scss b/assets/sass/base/forms/_forms.scss
index 48111a3..3fee1bd 100644
--- a/assets/sass/base/forms/_forms.scss
+++ b/assets/sass/base/forms/_forms.scss
@@ -5,11 +5,6 @@
 form {
   // Add vertical rhythm margins.
   @include margin-block(1);
-
-  // Set max text line width in main for readability.
-  .main & {
-    max-width: var(--max-line-width);
-  }
 }
 
 input,
@@ -28,6 +23,14 @@ label {
   }
 }
 
+// Set max text line width in main for readability.
+input,
+label,
+textarea,
+select {
+  max-width: var(--max-line-width);
+}
+
 fieldset {
   border: 1px solid var(--color-border);
 }
diff --git a/assets/sass/base/grouping/_grouping.scss b/assets/sass/base/grouping/_grouping.scss
index f1a401b..f43cbb2 100644
--- a/assets/sass/base/grouping/_grouping.scss
+++ b/assets/sass/base/grouping/_grouping.scss
@@ -74,7 +74,7 @@ hr {
 
 p {
   // Add vertical rhythm margins.
-  @include margin-block(.75);
+  @include margin-block(.375 .75);
 
   // Set max text line width in main for readability.
   .main & {
diff --git a/assets/sass/base/headings/_headings.scss b/assets/sass/base/headings/_headings.scss
index c5f185a..300d065 100644
--- a/assets/sass/base/headings/_headings.scss
+++ b/assets/sass/base/headings/_headings.scss
@@ -15,7 +15,7 @@ h5,
 %h5,
 h6,
 %h6 {
-  @include margin-block(1 .5, 'em');
+  @include margin-block(1 0, 'em');
   color: var(--color-headings);
   font-family: var(--ff-headings);
   font-weight: var(--fw-headings);
diff --git a/assets/sass/components/box/_box.scss b/assets/sass/components/box/_box.scss
index a805fed..1ea1221 100644
--- a/assets/sass/components/box/_box.scss
+++ b/assets/sass/components/box/_box.scss
@@ -44,6 +44,10 @@
     width: fit-content;
   }
 
+  &--gutter {
+    padding-inline: var(--gutters);
+  }
+
   &--inverted {
     @extend %link-inverted;
     background: var(--color-border);
@@ -51,7 +55,7 @@
 
     // Make sure headings etc. also gets inverted.
     * {
-      color: inherit;
+      color: var(--color-text-bg);
     }
   }
 
diff --git a/assets/sass/components/cards/_cards.scss b/assets/sass/components/cards/_cards.scss
index d56566c..2a622f0 100644
--- a/assets/sass/components/cards/_cards.scss
+++ b/assets/sass/components/cards/_cards.scss
@@ -23,6 +23,10 @@
     grid-column: span 2;
   }
 
+  &--gutter {
+    padding-inline: var(--gutters);
+  }
+
   &--inverted {
     @extend %link-inverted;
     background: var(--color-border);
diff --git a/assets/sass/components/stretch/_stretch.scss b/assets/sass/components/stretch/_stretch.scss
deleted file mode 100644
index 8a22de9..0000000
--- a/assets/sass/components/stretch/_stretch.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-// Stretch content to the page edge.
-//
-// Requeried: Set max-page-width to a larger value than max-content-width.
-
-.stretch,
-%stretch {
-  width: 100%;
-
-  .main & {
-    max-width: none;
-  }
-}
diff --git a/assets/sass/layouts/_layouts.scss b/assets/sass/layouts/_layouts.scss
index 2733b2e..3b6690c 100644
--- a/assets/sass/layouts/_layouts.scss
+++ b/assets/sass/layouts/_layouts.scss
@@ -1,5 +1,6 @@
 // stylelint-disable indentation, declaration-colon-newline-after
 
+// Initial layout setup.
 .layout {
   &__page {
     max-width: var(--max-page-width);
@@ -23,135 +24,155 @@
     padding-inline: var(--gutters);
     min-width: 0;  // With display grid defaults to auto, making <pre> overflow.
   }
+}
 
-  @if $max-page-width > $max-content-width {
-    &__main {
-      padding-inline: 0;
-    }
-
-    &__navigation > *,
-    &__main > * {
+// If page width is bigger then content with,
+// setup grid with breakout and stretch for main section.
+@if $max-page-width > $max-content-width {
+  .layout {
+    &__navigation > * {
       max-width: var(--max-content-width);
 
-      &:not(.stretch) {
-        padding-inline: var(--gutters);
-      }
-
       @include respond-to(s) {
         margin-inline: auto;
       }
     }
-  }
-}
 
-@supports (display: grid) {
-  .layout {
-    &__page {
+    &__main,
+    &__grid {
       display: grid;
-      grid-template-areas: 'head'
-                           'nav'
-                           'top'
-                           'main'
-                           'side1'
-                           'side2'
-                           'bottom'
-                           'foot'
-                           'notice';
-      grid-template-rows: auto
-                          auto
-                          auto
-                          1fr
-                          auto
-                          auto
-                          auto
-                          auto
-                          auto;
-      grid-template-columns: 1fr;
-    }
+      // Writing "Min" instead of "min" to force use of css "min()" instead of sass "min()".
+      grid-template-columns:
+        [stretch-start] minmax(var(--gutters), 1fr)
+        [breakout-start] minmax(0, var(--breakout))
+        [content-start] Min(calc(100% - var(--gutters) * 2), var(--max-content-width)) [content-end]
+        minmax(0, var(--breakout)) [breakout-end]
+        minmax(var(--gutters), 1fr) [stretch-end];
+      padding-inline: 0;
 
-    @include respond-to(xl) {
-      &__page {
-          grid-template-rows: auto
-                              auto
-                              auto
-                              1fr
-                              auto
-                              auto
-                              auto;
+      & > :not(.breakout, .stretch) {
+        grid-column: content;
       }
 
-      &__sidebar-first {
-          grid-template-areas: 'head head'
-                               'nav nav'
-                               'side1 top'
-                               'side1 main'
-                               'side1 bottom'
-                               'foot foot'
-                               'notice notice';
-          grid-template-columns: 1fr
-                                 2fr;
+      & > .breakout {
+        grid-column: breakout;
       }
 
-      &__sidebar-second {
-          grid-template-areas: 'head head'
-                               'nav nav'
-                               'top side2'
-                               'main side2'
-                               'bottom side2'
-                               'foot foot'
-                               'notice notice';
-          grid-template-columns: 2fr
-                                 1fr;
+      & > .stretch {
+        grid-column: stretch;
+        padding-inline: var(--gutters);
       }
-
-      &__sidebar-two {
-          grid-template-areas: 'head head head'
-                               'nav nav nav'
-                               'side1 top side2'
-                               'side1 main side2'
-                               'side1 bottom side2'
-                               'foot foot foot'
-                               'notice notice notice';
-          grid-template-columns: 1fr
-                                 2fr
-                                 1fr;
-      }
-    }
-
-    &__header {
-      grid-area: head;
-    }
-
-    &__navigation {
-      grid-area: nav;
-    }
-
-    &__page-top {
-      grid-area: top;
-    }
-
-    &__main {
-      grid-area: main;
-    }
-
-    &__first-sidebar {
-      grid-area: side1;
-    }
-
-    &__second-sidebar {
-      grid-area: side2;
-    }
-
-    &__page-bottom {
-      grid-area: bottom;
-    }
-
-    &__footer {
-      grid-area: foot;
-    }
-
-    &__cookieconsent {
-      grid-area: notice;
     }
   }
 }
+
+// Setup template areas/rown/columns for page.
+.layout {
+  &__page {
+    display: grid;
+    grid-template-areas: 'head'
+                         'nav'
+                         'top'
+                         'main'
+                         'side1'
+                         'side2'
+                         'bottom'
+                         'foot'
+                         'notice';
+    grid-template-rows: auto
+                        auto
+                        auto
+                        1fr
+                        auto
+                        auto
+                        auto
+                        auto
+                        auto;
+    grid-template-columns: 1fr;
+  }
+
+  @include respond-to(xl) {
+    &__page {
+        grid-template-rows: auto
+                            auto
+                            auto
+                            1fr
+                            auto
+                            auto
+                            auto;
+    }
+
+    &__sidebar-first {
+        grid-template-areas: 'head head'
+                             'nav nav'
+                             'side1 top'
+                             'side1 main'
+                             'side1 bottom'
+                             'foot foot'
+                             'notice notice';
+        grid-template-columns: 1fr
+                               2fr;
+    }
+
+    &__sidebar-second {
+        grid-template-areas: 'head head'
+                             'nav nav'
+                             'top side2'
+                             'main side2'
+                             'bottom side2'
+                             'foot foot'
+                             'notice notice';
+        grid-template-columns: 2fr
+                               1fr;
+    }
+
+    &__sidebar-two {
+        grid-template-areas: 'head head head'
+                             'nav nav nav'
+                             'side1 top side2'
+                             'side1 main side2'
+                             'side1 bottom side2'
+                             'foot foot foot'
+                             'notice notice notice';
+        grid-template-columns: 1fr
+                               2fr
+                               1fr;
+    }
+  }
+
+  &__header {
+    grid-area: head;
+  }
+
+  &__navigation {
+    grid-area: nav;
+  }
+
+  &__page-top {
+    grid-area: top;
+  }
+
+  &__main {
+    grid-area: main;
+  }
+
+  &__first-sidebar {
+    grid-area: side1;
+  }
+
+  &__second-sidebar {
+    grid-area: side2;
+  }
+
+  &__page-bottom {
+    grid-area: bottom;
+  }
+
+  &__footer {
+    grid-area: foot;
+  }
+
+  &__cookieconsent {
+    grid-area: notice;
+  }
+}
diff --git a/assets/sass/styles.scss b/assets/sass/styles.scss
index fba8c6f..2bbce84 100644
--- a/assets/sass/styles.scss
+++ b/assets/sass/styles.scss
@@ -54,7 +54,6 @@
 @import 'components/meta/meta';
 @import 'components/responsive-video/responsive-video';
 @import 'components/spacing/spacing';
-@import 'components/stretch/stretch';
 @import 'components/tables/tables';
 @import 'components/tags/tags';
 @import 'components/visually-hidden/visually-hidden';
diff --git a/layouts/_default/card.html b/layouts/_default/card.html
index d3ff31d..8305581 100644
--- a/layouts/_default/card.html
+++ b/layouts/_default/card.html
@@ -2,7 +2,5 @@
 <header>
 <h2 class="title"><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
 </header>
-<div class="content">
 <p>{{ .Summary }}</p>
-</div>
 </article>
diff --git a/layouts/_default/full.html b/layouts/_default/full.html
index 7c79080..afd2089 100644
--- a/layouts/_default/full.html
+++ b/layouts/_default/full.html
@@ -3,7 +3,6 @@
 <h1 class="title{{ if $.Param "submitted" | default false }} mb--xxs{{ end }}"><a href="{{ .RelPermalink }}">{{ .Title }}</a></h1>
 {{ if $.Param "submitted" | default false }}{{ partial "submitted.html" . }}{{ end -}}
 </header>
-<div class="content">
+
 {{ .Content }}
-</div>
 </article>
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index 43ed71b..549c3fc 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -4,11 +4,7 @@
 <h1 class="title">{{ .Title }}</h1>
 </header>
 
-{{ with .Content -}}
-<div class="content">
-{{ . }}
-</div>
-{{ end -}}
+{{ .Content }}
 
 {{ $paginator := .Paginate (.Pages) -}}
 {{ range $paginator.Pages -}}
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 559b4a0..fe2142d 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -6,15 +6,12 @@
 {{ if $.Param "submitted" | default false }}{{ partial "submitted.html" . }}{{ end -}}
 {{ if .Params.tags }}{{ partial "tags.html" . }}{{ end -}}
 </header>
-<div class="content">
-{{ .Content }}
-</div>
 
-<div class="content content--bottom">
+{{ .Content }}
+
 {{ if $.Param "relatedposts" | default false }}{{ partial "related.html" . }}{{ end -}}
 
 {{ if ne .Lastmod .Date }}{{ partial "dates.html" . }}{{ end -}}
-</div>
 </article>
 </main>
 {{ end -}}
diff --git a/layouts/_default/summary.html b/layouts/_default/summary.html
index 9b9ad48..a7da392 100644
--- a/layouts/_default/summary.html
+++ b/layouts/_default/summary.html
@@ -1,9 +1,7 @@
 <article class="list-view{{ with .Section }} list-view--{{ . | urlize }}{{ end }}">
 <header>
-<h2 class="title{{ if $.Param "submitted" | default false }} mb--xxs{{ end }}"><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
+<h2 class="title mt--s{{ if $.Param "submitted" | default false }} mb--xxs{{ end }}"><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
 {{ if $.Param "submitted" | default false }}{{ partial "submitted.html" . -}}{{ end }}
 </header>
-<div class="content">
 <p>{{ .Summary }}</p>
-</div>
 </article>
diff --git a/layouts/index.html b/layouts/index.html
index 846a1f4..2833818 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -2,11 +2,7 @@
 
 {{ define "main" -}}
 <main class="main layout__main">
-{{ with .Content -}}
-<div class="content">
-{{ . }}
-</div>
-{{ end -}}
+{{ .Content }}
 
 {{ $pages := where site.RegularPages "Type" "in" site.Params.mainSections -}}
 {{ $paginator := .Paginate $pages -}}
diff --git a/layouts/micro/list.html b/layouts/micro/list.html
index a4a5814..10e3498 100644
--- a/layouts/micro/list.html
+++ b/layouts/micro/list.html
@@ -3,11 +3,7 @@
 <h1 class="title">Micro posts</h1>
 <p class="micro__follow"><a href="https://micro.blog/{{ with $.Param "microusername" }}{{ . }}{{ end }}">{{ i18n "string_follow" }} @{{ with $.Param "microusername" }}{{ . }}{{ end }}</a></p>
 
-{{ with .Content -}}
-<div class="content">
-{{ . }}
-</div>
-{{ end -}}
+{{ .Content }}
 
 {{ $paginator := .Paginate (.Pages) -}}
 {{ range $paginator.Pages -}}
diff --git a/layouts/micro/single.html b/layouts/micro/single.html
index b4835dd..0b9d6d3 100644
--- a/layouts/micro/single.html
+++ b/layouts/micro/single.html
@@ -3,13 +3,10 @@
 <article class="single-view{{ with .Section }} single-view--{{ . | urlize }}{{ end }}">
 <header>
 <h1 class="hidden">{{ .Title }}</h1>
-<p>
-{{ partial "author-date" . }}
-</p>
+<p>{{ partial "author-date" . }}</p>
 </header>
-<div class="content">
+
 {{ .Content }}
-</div>
 </article>
 </main>
 {{ end -}}
diff --git a/layouts/micro/summary.html b/layouts/micro/summary.html
index 6020b8e..2e00991 100644
--- a/layouts/micro/summary.html
+++ b/layouts/micro/summary.html
@@ -1,11 +1,8 @@
 <article class="list-view{{ with .Section }} list-view--{{ . | urlize }}{{ end }}">
 <header>
 <h2 class="hidden">{{ .Title }}</h2>
-<p><a href="{{ .RelPermalink }}">
-{{ partial "author-date" . }}
-</a></p>
+<p><a href="{{ .RelPermalink }}">{{ partial "author-date" . }}</a></p>
 </header>
-<div class="content">
+
 {{ .Content }}
-</div>
 </article>
diff --git a/layouts/podcast/full.html b/layouts/podcast/full.html
index e817f2e..a31cf45 100644
--- a/layouts/podcast/full.html
+++ b/layouts/podcast/full.html
@@ -3,8 +3,8 @@
 <h1 class="title{{ if $.Param "submitted" | default false }} mb--xxs{{ end }}"><a href="{{ .RelPermalink }}">{{ .Title }}</a></h1>
 {{ if $.Param "submitted" | default false }}{{ partial "submitted.html" . }}{{ end -}}
 </header>
+
 {{ partial "podcast.html" . -}}
-<div class="content">
+
 {{ .Content }}
-</div>
 </article>
diff --git a/layouts/podcast/single.html b/layouts/podcast/single.html
index 7924da7..55ba41d 100644
--- a/layouts/podcast/single.html
+++ b/layouts/podcast/single.html
@@ -6,10 +6,10 @@
 {{ if $.Param "submitted" | default false }}{{ partial "submitted.html" . }}{{ end -}}
 {{ if .Params.tags }}{{ partial "tags.html" . }}{{ end -}}
 </header>
+
 {{ partial "podcast.html" . -}}
-<div class="content">
+
 {{ .Content }}
-</div>
 </article>
 </main>
 {{ end -}}
diff --git a/layouts/taxonomy/summary.html b/layouts/taxonomy/summary.html
index 18593fb..aa3d555 100644
--- a/layouts/taxonomy/summary.html
+++ b/layouts/taxonomy/summary.html
@@ -1,6 +1,4 @@
 <article class="list-view{{ with .Section }} list-view--{{ . | urlize }}{{ end }}">
 <h2 class="title"><a href="{{ .RelPermalink }}">{{ .Title }}</a> <span class="meta">({{ .Data.Pages.Len }})</span></h2>
-<div class="content">
 <p>{{ .Description }}</p>
-</div>
 </article>