Refactor CSS for max-width parts

.eleventy.js

@@ -51,9 +51,9 @@ module.exports = function(eleventyConfig) {
   //
 
   eleventyConfig.addPairedShortcode("section", (content, inverted) => `
-<section class="page-section${inverted ? ' inverse' : ''}"><div class="page-content">
+<section class="page-section${inverted ? ' inverse' : ''}">
 ${content}
-</div></section>
+</section>
   `);
 
   eleventyConfig.addPairedShortcode("tabs", (content) => `

_includes/layouts/page.njk

@@ -1,6 +1,4 @@
 ---
 layout: layouts/base.njk
 ---
-<div class="page-content">
 {{ content | safe }}
-</div>

styles/_base.scss

@@ -2,17 +2,15 @@
 @use 'layout';
 @use 'typography';
 
-* {
-  box-sizing: border-box;
-}
-
 body {
   margin: 0;
   color: colors.$main-text;
 }
 
 %title {
-  margin: layout.$huge-gap 0 layout.$large-gap 0;
+  @extend %content;
+  margin-top: layout.$huge-gap;
+  margin-bottom: layout.$large-gap;
   font-size: typography.$title-size;
   line-height: typography.$heading-line-height;
   text-align: center;
@@ -23,7 +21,9 @@ h1 {
 }
 
 %heading {
-  margin: layout.$large-gap 0 layout.$normal-gap 0;
+  @extend %content;
+  margin-top: layout.$large-gap;
+  margin-bottom: layout.$large-gap;
   font-size: typography.$heading-size;
   line-height: typography.$heading-line-height;
 
@@ -43,7 +43,7 @@ h2 {
 }
 
 %subheading {
-  margin: layout.$normal-gap 0;
+  @extend %content-gutter;
   font-size: typography.$subheading-size;
   line-height: typography.$heading-line-height;
 }
@@ -53,11 +53,11 @@ h3 {
 }
 
 p {
-  margin: layout.$normal-gap 0;
+  @extend %content-gutter;
 }
 
-ul, ol {
+ul, ol, dl {
-  margin: layout.$normal-gap 0;
+  @extend %content-gutter;
 }
 
 li {

styles/_layout.scss

@@ -4,3 +4,40 @@ $large-gap: 2.5rem;
 $huge-gap: 6rem;
 
 $breakpoint: 80rem;
+
+$narrow-content-width: 50rem;
+$content-width: 60rem;
+$wide-content-width: 80rem;
+
+%narrow-content {
+  margin-left: auto;
+  margin-right: auto;
+  max-width: $narrow-content-width;
+}
+
+%narrow-content-gutter {
+  margin: $normal-gap auto;
+  max-width: $narrow-content-width;
+}
+
+%content {
+  margin-left: auto;
+  margin-right: auto;
+  max-width: $content-width;
+}
+
+%content-gutter {
+  margin: $normal-gap auto;
+  max-width: $content-width;
+}
+
+%wide-content {
+  margin-left: auto;
+  margin-right: auto;
+  max-width: $wide-content-width;
+}
+
+%wide-content-gutter {
+  margin: $normal-gap auto;
+  max-width: $wide-content-width;
+}

styles/components/_forms.scss

@@ -3,8 +3,9 @@
 @use '../typography';
 
 .form-choices {
-  margin: layout.$huge-gap auto;
+  @extend %narrow-content;
-  max-width: 50rem;
+  margin-top: layout.$huge-gap;
+  margin-bottom: layout.$huge-gap;
   list-style: none;
   text-align: center;
 
@@ -57,10 +58,9 @@
 }
 
 %form-item {
+  @extend %narrow-content-gutter;
   display: flex;
   align-items: center;
-  margin: layout.$normal-gap auto;
-  max-width: 50rem;
 }
 
 %form-label {

styles/components/_page.scss

@@ -2,9 +2,6 @@
 @use '../layout';
 @use '../typography';
 
-// This is the wrapper element around individual .page-content blocks. The home
-// page contains a few of these sections, while normal pages only contain one.
-// Spanning the entire width, sections may have different themes.
 .page-section {
   padding: layout.$large-gap;
 
@@ -22,11 +19,6 @@
   }
 }
 
-.page-content {
-  margin: 0 auto layout.$huge-gap auto;
-  max-width: 60rem;
-}
-
 // Banners can be put at the top of a page to draw attention. A banner has
 // two children:
 // - A .background element which contains an image to render behind the text

styles/components/_tabs.scss

@@ -21,6 +21,7 @@
 // tabs is targeted by the URL's hash, it is shown instead and the default tab
 // is hidden.
 .tabs-widget {
+  @extend %content;
   display: flex;
   flex-direction: row-reverse;
   flex-wrap: wrap;