Use em to set header margins for better text rythm.

assets/sass/base/headings/_headings.scss

@@ -15,7 +15,7 @@ h5,
 %h5,
 h6,
 %h6 {
-  @include margin-block(1 .5);
+  @include margin-block(1 .5, 'em');
   color: var(--color-headings);
   font-family: var(--ff-headings);
   font-weight: var(--fw-headings);

assets/sass/mixins/spacing/_spacing.scss

@@ -1,92 +1,108 @@
-@mixin spacing($property, $spacing) {
+@mixin spacing($property, $spacing, $unit) {
   $converted-list: ();
 
   @each $x in $spacing {
-    $unit: 'rem';
+    $xunit: $unit;
 
     @if $x == 0 {
-      $unit: '';
+      $xunit: '';
     }
 
-    $spacing: #{$x * $base-line-height + $unit};
+    $spacing: #{$x * $base-line-height + $xunit};
     $converted-list: join($converted-list, $spacing, $separator: space);
   }
 
   #{$property}: $converted-list;
 }
 
-@mixin gap($x) {
+@mixin gap($x, $unit: 'rem') {
-  @include spacing(gap, $x);
+  @include spacing(gap, $x, $unit);
 }
 
-@mixin margin($x) {
+@mixin margin($x, $unit: 'rem') {
-  @include spacing(margin, $x);
+  @include spacing(margin, $x, $unit);
 }
 
-@mixin margin-inline($x) {
+@mixin margin-inline($x, $unit: 'rem') {
-  @include spacing(margin-inline, $x);
+  @include spacing(margin-inline, $x, $unit);
 }
 
-@mixin margin-block($x) {
+@mixin margin-inline-start($x, $unit: 'rem') {
-  @include spacing(margin-block, $x);
+  @include spacing(margin-inline-start, $x, $unit);
 }
 
-@mixin margin-top($x) {
+@mixin margin-inline-end($x, $unit: 'rem') {
-  @include spacing(margin-top, $x);
+  @include spacing(margin-block-end, $x, $unit);
 }
 
-@mixin margin-bottom($x) {
+@mixin margin-block($x, $unit: 'rem') {
-  @include spacing(margin-bottom, $x);
+  @include spacing(margin-block, $x, $unit);
 }
 
-@mixin margin-left($x) {
+@mixin margin-block-start($x, $unit: 'rem') {
-  @include spacing(margin-left, $x);
+  @include spacing(margin-block-start, $x, $unit);
 }
 
-@mixin margin-right($x) {
+@mixin margin-block-end($x, $unit: 'rem') {
-  @include spacing(margin-right, $x);
+  @include spacing(margin-inline-end, $x, $unit);
 }
 
-@mixin margin-inline-start($x) {
+@mixin margin-top($x, $unit: 'rem') {
-  @include spacing(margin-inline-start, $x);
+  @include spacing(margin-top, $x, $unit);
 }
 
-@mixin margin-inline-end($x) {
+@mixin margin-bottom($x, $unit: 'rem') {
-  @include spacing(margin-inline-end, $x);
+  @include spacing(margin-bottom, $x, $unit);
 }
 
-@mixin padding($x) {
+@mixin margin-left($x, $unit: 'rem') {
-  @include spacing(padding, $x);
+  @include spacing(margin-left, $x, $unit);
 }
 
-@mixin padding-inline($x) {
+@mixin margin-right($x, $unit: 'rem') {
-  @include spacing(padding-inline, $x);
+  @include spacing(margin-right, $x, $unit);
 }
 
-@mixin padding-block($x) {
+@mixin padding($x, $unit: 'rem') {
-  @include spacing(padding-block, $x);
+  @include spacing(padding, $x, $unit);
 }
 
-@mixin padding-top($x) {
+@mixin padding-inline($x, $unit: 'rem') {
-  @include spacing(padding-top, $x);
+  @include spacing(padding-inline, $x, $unit);
 }
 
-@mixin padding-bottom($x) {
+@mixin padding-inline-start($x, $unit: 'rem') {
-  @include spacing(padding-bottom, $x);
+  @include spacing(padding-inline-start, $x, $unit);
 }
 
-@mixin padding-left($x) {
+@mixin padding-inline-end($x, $unit: 'rem') {
-  @include spacing(padding-left, $x);
+  @include spacing(padding-inline-end, $x, $unit);
 }
 
-@mixin padding-right($x) {
+@mixin padding-block($x, $unit: 'rem') {
-  @include spacing(padding-right, $x);
+  @include spacing(padding-block, $x, $unit);
 }
 
-@mixin padding-inline-start($x) {
+@mixin padding-block-start($x, $unit: 'rem') {
-  @include spacing(padding-inline-start, $x);
+  @include spacing(padding-block-start, $x, $unit);
 }
 
-@mixin padding-inline-end($x) {
+@mixin padding-block-end($x, $unit: 'rem') {
-  @include spacing(padding-inline-end, $x);
+  @include spacing(padding-block-end, $x, $unit);
+}
+
+@mixin padding-top($x, $unit: 'rem') {
+  @include spacing(padding-top, $x, $unit);
+}
+
+@mixin padding-bottom($x, $unit: 'rem') {
+  @include spacing(padding-bottom, $x, $unit);
+}
+
+@mixin padding-left($x, $unit: 'rem') {
+  @include spacing(padding-left, $x, $unit);
+}
+
+@mixin padding-right($x, $unit: 'rem') {
+  @include spacing(padding-right, $x, $unit);
 }

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 }}mb--xxs{{ end }}"><a href="{{ .RelPermalink }}">{{ .Title }}</a></h1>
+<h1 class="title mt--m{{ 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 }}mb--xxs{{ end }}">{{ .Title }}</h1>
+<h1 class="title mt--m{{ 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 }}mb--xxs{{ end }}"><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
+<h2 class="title mt--m{{ 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/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 }}mb--xxs{{ end }}"><a href="{{ .RelPermalink }}">{{ .Title }}</a></h1>
+<h1 class="title mt--m{{ 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 }}mb--xxs{{ end }}">{{ .Title }}</h1>
+<h1 class="title mt--m{{ 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>