Remove content div wrappers. Use grid template columns for main to su…

…pport stretch and breakout classes.
frjo · Nov 10, 2023 · e237e8f · e237e8f
1 parent 59574eb
commit e237e8f
Show file tree

Hide file tree

Showing 23 changed files with 70 additions and 79 deletions.
diff --git 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};
   }
 
+  --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-page-width: #{$max-page-width};
   --max-line-width: #{$max-line-width};
-  --gutters: #{$gutters};
-  --gutters-reverse: #{$gutters-reverse};
-  --indent-amount: #{$indent-amount};
+  --max-page-width: #{$max-page-width};
 }
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -44,14 +44,18 @@
     width: fit-content;
   }
 
+  &--gutter {
+    padding-inline: var(--gutters);
+  }
+
   &--inverted {
     @extend %link-inverted;
     background: var(--color-border);
     color: var(--color-text-bg);
 
     // 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
@@ -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
diff --git a/assets/sass/layouts/_layouts.scss b/assets/sass/layouts/_layouts.scss
@@ -25,20 +25,35 @@
   }
 
   @if $max-page-width > $max-content-width {
+    &__navigation > * {
+      max-width: var(--max-content-width);
+
+      @include respond-to(s) {
+        margin-inline: auto;
+      }
+    }
+
     &__main {
+      display: grid;
+      grid-template-columns:
+        [stretch-start] minmax(var(--gutters), 1fr)
+        [breakout-start] minmax(0, var(--breakout))
+        [content-start] min(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;
-    }
 
-    &__navigation > *,
-    &__main > * {
-      max-width: var(--max-content-width);
+      & > :not(.breakout, .stretch) {
+        grid-column: content;
+      }
 
-      &:not(.stretch) {
-        padding-inline: var(--gutters);
+      & > .breakout {
+        grid-column: breakout;
       }
 
-      @include respond-to(s) {
-        margin-inline: auto;
+      & > .stretch {
+        grid-column: stretch;
+        padding-inline: var(--gutters);
       }
     }
   }

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -6,15 +6,12 @@ <h1 class="title{{ if $.Param "submitted" | default false }} mb--xxs{{ end }}">{
 {{ 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">
 {{ 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -6,10 +6,10 @@ <h1 class="title{{ if $.Param "submitted" | default false }} mb--xxs{{ end }}">{
 {{ 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
@@ -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>