Remove content div wrappers. Use grid template columns for main to support stretch and breakout classes.

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};
+  --breakout: #{$breakout};
-  --max-content-width: #{$max-content-width};
-  --max-page-width: #{$max-page-width};
-  --max-line-width: #{$max-line-width};
-  --gutters: #{$gutters};
   --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};
 }

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;

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 {

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);
 }

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 & {

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);

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);
     }
   }
 

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);

assets/sass/components/stretch/_stretch.scss

@@ -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;
-  }
-}

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 {
+// If page width is bigger then content with,
-    &__main {
+// setup grid with breakout and stretch for main section.
-      padding-inline: 0;
+@if $max-page-width > $max-content-width {
-    }
+  .layout {
-
+    &__navigation > * {
-    &__navigation > *,
-    &__main > * {
       max-width: var(--max-content-width);
 
-      &:not(.stretch) {
-        padding-inline: var(--gutters);
-      }
-
       @include respond-to(s) {
         margin-inline: auto;
       }
     }
-  }
-}
 
-@supports (display: grid) {
+    &__main,
-  .layout {
+    &__grid {
-    &__page {
       display: grid;
-      grid-template-areas: 'head'
+      // Writing "Min" instead of "min" to force use of css "min()" instead of sass "min()".
-                           'nav'
+      grid-template-columns:
-                           'top'
+        [stretch-start] minmax(var(--gutters), 1fr)
-                           'main'
+        [breakout-start] minmax(0, var(--breakout))
-                           'side1'
+        [content-start] Min(calc(100% - var(--gutters) * 2), var(--max-content-width)) [content-end]
-                           'side2'
+        minmax(0, var(--breakout)) [breakout-end]
-                           'bottom'
+        minmax(var(--gutters), 1fr) [stretch-end];
-                           'foot'
+      padding-inline: 0;
-                           'notice';
-      grid-template-rows: auto
-                          auto
-                          auto
-                          1fr
-                          auto
-                          auto
-                          auto
-                          auto
-                          auto;
-      grid-template-columns: 1fr;
-    }
 
-    @include respond-to(xl) {
+      & > :not(.breakout, .stretch) {
-      &__page {
+        grid-column: content;
-          grid-template-rows: auto
-                              auto
-                              auto
-                              1fr
-                              auto
-                              auto
-                              auto;
       }
 
-      &__sidebar-first {
+      & > .breakout {
-          grid-template-areas: 'head head'
+        grid-column: breakout;
-                               'nav nav'
-                               'side1 top'
-                               'side1 main'
-                               'side1 bottom'
-                               'foot foot'
-                               'notice notice';
-          grid-template-columns: 1fr
-                                 2fr;
       }
 
-      &__sidebar-second {
+      & > .stretch {
-          grid-template-areas: 'head head'
+        grid-column: stretch;
-                               'nav nav'
+        padding-inline: var(--gutters);
-                               '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;
     }
   }
 }
+
+// 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;
+  }
+}

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';

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>

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>

layouts/_default/list.html

@@ -4,11 +4,7 @@
 <h1 class="title">{{ .Title }}</h1>
 </header>
 
-{{ with .Content -}}
+{{ .Content }}
-<div class="content">
-{{ . }}
-</div>
-{{ end -}}
 
 {{ $paginator := .Paginate (.Pages) -}}
 {{ range $paginator.Pages -}}

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 -}}

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>

layouts/index.html

@@ -2,11 +2,7 @@
 
 {{ define "main" -}}
 <main class="main layout__main">
-{{ with .Content -}}
+{{ .Content }}
-<div class="content">
-{{ . }}
-</div>
-{{ end -}}
 
 {{ $pages := where site.RegularPages "Type" "in" site.Params.mainSections -}}
 {{ $paginator := .Paginate $pages -}}

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 -}}
+{{ .Content }}
-<div class="content">
-{{ . }}
-</div>
-{{ end -}}
 
 {{ $paginator := .Paginate (.Pages) -}}
 {{ range $paginator.Pages -}}

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>
+<p>{{ partial "author-date" . }}</p>
-{{ partial "author-date" . }}
-</p>
 </header>
-<div class="content">
+
 {{ .Content }}
-</div>
 </article>
 </main>
 {{ end -}}

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 }}">
+<p><a href="{{ .RelPermalink }}">{{ partial "author-date" . }}</a></p>
-{{ partial "author-date" . }}
-</a></p>
 </header>
-<div class="content">
+
 {{ .Content }}
-</div>
 </article>