Move some styles fron zen to base. Add margin-top and margin bottom classes for all spacing levels. Add footer component.

assets/sass/_root.scss

@@ -23,10 +23,6 @@ $max-page-width: $max-content-width !default;
     --radius-#{$name}: #{$radius};
   }
 
-  @each $name, $space in $spacing {
-    --space-#{$name}: #{$space};
-  }
-
   --heading-line-height: #{$heading-line-height};
   --max-content-width: #{$max-content-width};
   --max-page-width: #{$max-page-width};

assets/sass/_variables.scss

@@ -115,23 +115,24 @@ $breakpoints: (
 // Border radius.
 // Use like this: var(--radius-m)
 $border-radius: (
-  l:          1rem,
+  xl:         1rem,
-  m:          0.3rem,
+  l:          0.75rem,
-  s:          3px,
+  m:          0.5rem,
+  s:          0.3rem,
+  xs:         0.125rem,
 );
 
 // Spacing.
-// Use like this: var(--space-m)
+// Generates mt-m (mt = margin-top) and mb-m (mb = margin-bottom) classes.
 $spacing: (
-  xxxl:       5rem,
+  xxl:        3,
-  xxl:        3rem,
+  xl:         2,
-  xl:         2rem,
+  l:          1.5,
-  l:          1.5rem,
+  m:          1,
-  m:          1rem,
+  s:          0.75,
-  s:          0.75rem,
+  xs:         0.5,
-  xs:         0.5rem,
+  xxs:        0.3,
-  xxs:        0.4rem,
+  0:          0,
-  xxxs:       0.3rem,
 );
 
 // The max content width. (Consider using one of the breakpoints.)
@@ -154,3 +155,7 @@ $indent-amount:       2rem;
 
 // Control whether RTL styles are added.
 $include-rtl: false;
+
+// Show horizontal grid to help with debugging typography
+$debug: true;
+$debug-color: $grey-extra-light;

assets/sass/_zen.scss

@@ -10,19 +10,8 @@ body {
   background-color: var(--color-body-bg);
 }
 
-.header {
-  padding-top: var(--gutters);
-}
-
 .footer {
-  @include margin-top(1.5);
-  @include padding(.3);
-  text-align: center;
   border-top: 2px solid var(--color-brand);
-
-  p {
-    margin: 0;
-  }
 }
 
 // Apply smaller text to blocks, footer etc.
@@ -78,19 +67,13 @@ article {
     }
   }
 
-  .tags {
-    ul {
-      margin: 0;
-    }
-  }
-
   code {
     font-size: var(--fs-xs);
     overflow-wrap: break-word;
   }
 
   pre {
-    border-radius: var(--radius-s);
+    border-radius: var(--radius-xs);
     padding: 5px;
     border: 1px solid var(--color-border-light);
     background-color: var(--color-text-bg);
@@ -110,10 +93,6 @@ article {
   }
 }
 
-.title-submitted {
-  margin-bottom: .2rem;
-}
-
 .content-dates {
   text-align: right;
 }
@@ -129,14 +108,14 @@ img {
       }
 
       &.left {
-        @include padding(0 .5 .5 0);
+        padding: 0 .75rem .75rem 0;
         margin: 0;
         float: left;
         clear: both;
       }
 
       &.right {
-        @include padding(0 0 .5 .5);
+        padding: 0 0 .75rem .75rem;
         margin: 0;
         float: right;
         clear: both;
@@ -167,13 +146,13 @@ figure {
 
       &.left {
         figcaption {
-          @include padding(0 .5 .5 0);
+          padding: 0 .75rem .75rem 0;
         }
       }
 
       &.right {
         figcaption {
-          @include padding(0 0 .5 .5);
+          padding: 0 0 .75rem .75rem;
         }
       }
     }
@@ -189,11 +168,11 @@ figure {
 // Navigation
 
 .main-menu {
-  @include margin-top(.5);
+  margin-top: .75rem;
   outline: 0;
 
   li {
-    @include margin-bottom(.5);
+    margin-bottom: .75rem;
     padding: 0;
   }
 
@@ -224,6 +203,7 @@ figure {
 // Search
 
 .search-input {
+  // Add vertical rhythm margins.
   @include margin-block(1);
 }
 
@@ -235,18 +215,8 @@ figure {
 // Form
 
 .content {
-  label:has(+ :required) {
-    &::after {
-      content: '*';
-      color: var(--color-mark-highlight);
-    }
-  }
-
   input,
   textarea {
-    @include margin-bottom(.75);
-    width: 92%;
-
     &:not(:placeholder-shown):valid {
       background-color: var(--color-status-bg);
     }

assets/sass/components/button/_button.scss

@@ -15,20 +15,20 @@ button,
 [type='reset'],
 [type='submit'] {
   @extend %button--disabled;
-  @include margin-right(.75);
-  @include margin-bottom(.75);
-  @include padding(.2 1);
   // Some styles don't apply to <a> links since they are inline elements by default.
   display: inline-block;
   font-family: var(--ff-headings);
   text-decoration: none;
   text-align: center;
+  margin-right: 1rem;
+  margin-bottom: 1rem;
+  padding: .2rem 1rem;
   // Improve usability and consistency of cursor style between image-type `input` and others.
   cursor: pointer;
   color: var(--color-button-text);
   background-color: var(--color-button);
   border: 0;
-  border-radius: var(--radius-m);
+  border-radius: var(--radius-s);
 
   &:hover,
   &:focus,
@@ -44,10 +44,10 @@ button,
 .button,
 %button {
   &--small {
-    @include margin-right(.3);
-    @include margin-bottom(.3);
-    @include padding(.1 .5);
     font-size: var(--fs-xs);
+    margin-right: .5rem;
+    margin-bottom: .5rem;
+    padding: .2rem .75rem;
   }
 
   &--alt {

assets/sass/components/footer/_footer.scss

@@ -0,0 +1,12 @@
+// Branding footer
+
+.footer,
+%footer {
+  padding-block: var(--gutters);
+  background-color: var(--color-footer-bg);
+  text-align: center;
+
+  p {
+    margin: 0;
+  }
+}

assets/sass/components/header/_header.scss

@@ -2,6 +2,7 @@
 
 .header,
 %header {
+  padding-block: var(--gutters);
   display: flex;
   flex-direction: column;
   gap: var(--gutters);
@@ -24,6 +25,7 @@
   // The name of the website.
   &__site-name {
     margin: 0;
+    line-height: 1;
   }
 
   // The link around the name of the website.

assets/sass/components/spacing/_spacing.scss

@@ -0,0 +1,9 @@
+@each $name, $space in $spacing {
+  .mt--#{$name} {
+    @include margin-top($space);
+  }
+
+  .mb--#{$name} {
+    @include margin-bottom($space);
+  }
+}

assets/sass/mixins/spacing/_spacing.scss

@@ -1,8 +1,12 @@
-@mixin spacing($property, $spacing) {
+@mixin spacing($property, $spacing, $unit: 'rem') {
   $converted-list: ();
 
   @each $x in $spacing {
-    $spacing: #{$x * $base-line-height + 'rem'};
+    @if $x == 0 {
+      $unit: '';
+    }
+
+    $spacing: #{$x * $base-line-height + $unit};
     $converted-list: join($converted-list, $spacing, $separator: space);
   }
 

assets/sass/mobile.scss

@@ -48,13 +48,13 @@
   }
 
   &__toggle {
-    @include padding(0 .2);
     display: flex;
     align-items: center;
     position: absolute;
     top: var(--gutters);
     right: var(--gutters);
     margin: 0;
+    padding: 0 .3rem;
     font-weight: var(--fw-bold);
     background-color: var(--color-text-bg);
     color: var(--color-text);
@@ -107,11 +107,11 @@
   }
 
   &__sheet {
-    @include padding(1.5);
     visibility: hidden;
     background-color: var(--color-mobile-menu);
     width: 90vw;
     height: 100vh;
+    padding: 2.25rem;
     transform: translateX(100vw);
     z-index: 21;
 

assets/sass/styles.scss

@@ -16,7 +16,11 @@
 
 // Reset browsers to some sane defaults.
 
-@import 'reset/reset';
+@import 'reset';
+
+// Base styles.
+
+@import 'base/base';
 
 // Layouts
 
@@ -37,6 +41,7 @@
 @import 'components/disabled/disabled';
 @import 'components/flex-group/flex-group';
 @import 'components/flex-inline/flex-inline';
+@import 'components/footer/footer';
 @import 'components/grid-group/grid-group';
 @import 'components/grid-stack/grid-stack';
 @import 'components/header/header';
@@ -48,7 +53,9 @@
 @import 'components/messages/messages';
 @import 'components/meta/meta';
 @import 'components/responsive-video/responsive-video';
+@import 'components/spacing/spacing';
 @import 'components/stretch/stretch';
+@import 'components/tags/tags';
 @import 'components/visually-hidden/visually-hidden';
 
 // Navigation

layouts/_default/baseof.html

@@ -14,7 +14,7 @@
 
 <body class="{{ if .IsPage }}single-page{{ else }}list-page{{ end }}{{ if .IsHome }} front{{ end }}{{ with $.Param "bodyclass" }} {{ . }}{{ end }}">
 <div class="page layout__page{{ if $.Param "sidebar" }} layout__sidebar-second{{ end }}">
-<header class="header layout__header">
+<header class="header layout__header mb--m">
 {{ if $.Param "logo" | default true -}}
 <a href="{{ "" | relLangURL }}" title="Home" rel="home" class="header__logo">
 <img src="{{ with $.Param "logopath" }}{{ . | relURL }}{{ else }}{{ "images/logo.png" | relURL }}{{ end }}"{{ with $.Param "logowidth" }} width="{{ . }}"{{ end }}{{ with $.Param "logoheight" }} height="{{ . }}"{{ end }} alt="Home" class="header__logo-image">
@@ -36,7 +36,7 @@
 
 {{ if $.Param "sidebar" }}{{ partial "sidebar.html" . }}{{ end -}}
 
-<footer class="footer layout__footer">
+<footer class="footer layout__footer mt--l">
 {{ if $.Param "feedlinks" }}{{ partial "feedlinks.html" . }}{{ end -}}
 <p>{{ with $.Param "copyright" }}{{ . | markdownify }}{{ else }}<span>© {{ site.Title }}</span>{{ end }}</p>
 {{ with $.Param "footer" }}<p>{{ . | markdownify }}</p>{{ end }}

layouts/_default/full.html

@@ -1,6 +1,6 @@
 <article class="full-view{{ with .Section }} full-view--{{ . | urlize }}{{ end }}">
 <header>
-<h1 class="title {{ if $.Param "submitted" | default false }}title-submitted{{ end }}"><a href="{{ .RelPermalink }}">{{ .Title }}</a></h1>
+<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">

layouts/_default/single.html

@@ -2,7 +2,7 @@
 <main class="main layout__main">
 <article class="single-view{{ with .Section }} single-view--{{ . | urlize }}{{ end }}">
 <header>
-<h1 class="title {{ if $.Param "submitted" | default false }}title-submitted{{ end }}">{{ .Title }}</h1>
+<h1 class="title {{ if $.Param "submitted" | default false }}mb--xxs{{ end }}">{{ .Title }}</h1>
 {{ if $.Param "submitted" | default false }}{{ partial "submitted.html" . }}{{ end -}}
 {{ if .Params.tags }}{{ partial "tags.html" . }}{{ end -}}
 </header>

layouts/_default/summary.html

@@ -1,6 +1,6 @@
 <article class="list-view{{ with .Section }} list-view--{{ . | urlize }}{{ end }}">
 <header>
-<h2 class="title {{ if $.Param "submitted" | default false }}title-submitted{{ end }}"><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
+<h2 class="title {{ 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">

layouts/partials/tags.html

@@ -1,6 +1,6 @@
 <div class="tags meta">
 {{ i18n "taxo_tags" }}:
-<ul class="flex-inline flex-inline--inline">
+<ul>
 {{ range (.GetTerms "tags") -}}
 <li><a href="{{ .Permalink }}">{{ .LinkTitle }}</a></li>
 {{ end -}}

layouts/podcast/full.html

@@ -1,6 +1,6 @@
 <article class="full-view{{ with .Section }} full-view--{{ . | urlize }}{{ end }}">
 <header>
-<h1 class="title {{ if $.Param "submitted" | default false }}title-submitted{{ end }}"><a href="{{ .RelPermalink }}">{{ .Title }}</a></h1>
+<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" . -}}

layouts/podcast/single.html

@@ -2,7 +2,7 @@
 <main class="main layout__main">
 <article class="single-view{{ with .Section }} single-view--{{ . | urlize }}{{ end }}">
 <header>
-<h1 class="title {{ if $.Param "submitted" | default false }}title-submitted{{ end }}">{{ .Title }}</h1>
+<h1 class="title {{ if $.Param "submitted" | default false }}mb--xxs{{ end }}">{{ .Title }}</h1>
 {{ if $.Param "submitted" | default false }}{{ partial "submitted.html" . }}{{ end -}}
 {{ if .Params.tags }}{{ partial "tags.html" . }}{{ end -}}
 </header>

layouts/shortcodes/search.html

@@ -14,7 +14,7 @@
 <template>
   <article class="search-result list-view">
     <header>
-      <h2 class="title title-submitted"><a href="#">Title here</a></h2>
+      <h2 class="title mb--xxs"><a href="#">Title here</a></h2>
       <div class="submitted"><time class="created-date">Date here</time></div>
     </header>
     <div class="content">Summary here</div>