From be68250151114b33dd33339ce3c12858a6a3d1a0 Mon Sep 17 00:00:00 2001
From: Fredrik Jonsson <frjo@xdeb.org>
Date: Thu, 1 Jun 2023 19:30:24 +0200
Subject: [PATCH] Use em to set header margins for better text rythm.

---
 assets/sass/base/headings/_headings.scss |   2 +-
 assets/sass/mixins/spacing/_spacing.scss | 100 +++++++++++++----------
 layouts/_default/full.html               |   2 +-
 layouts/_default/single.html             |   2 +-
 layouts/_default/summary.html            |   2 +-
 layouts/podcast/full.html                |   2 +-
 layouts/podcast/single.html              |   2 +-
 7 files changed, 64 insertions(+), 48 deletions(-)

diff --git a/assets/sass/base/headings/_headings.scss b/assets/sass/base/headings/_headings.scss
index 67f4bcf..139169b 100644
--- 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);
+  @include margin-block(1 .5, 'em');
   color: var(--color-headings);
   font-family: var(--ff-headings);
   font-weight: var(--fw-headings);
diff --git a/assets/sass/mixins/spacing/_spacing.scss b/assets/sass/mixins/spacing/_spacing.scss
index de19df2..730c224 100644
--- a/assets/sass/mixins/spacing/_spacing.scss
+++ b/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) {
-  @include spacing(gap, $x);
+@mixin gap($x, $unit: 'rem') {
+  @include spacing(gap, $x, $unit);
 }
 
-@mixin margin($x) {
-  @include spacing(margin, $x);
+@mixin margin($x, $unit: 'rem') {
+  @include spacing(margin, $x, $unit);
 }
 
-@mixin margin-inline($x) {
-  @include spacing(margin-inline, $x);
+@mixin margin-inline($x, $unit: 'rem') {
+  @include spacing(margin-inline, $x, $unit);
 }
 
-@mixin margin-block($x) {
-  @include spacing(margin-block, $x);
+@mixin margin-inline-start($x, $unit: 'rem') {
+  @include spacing(margin-inline-start, $x, $unit);
 }
 
-@mixin margin-top($x) {
-  @include spacing(margin-top, $x);
+@mixin margin-inline-end($x, $unit: 'rem') {
+  @include spacing(margin-block-end, $x, $unit);
 }
 
-@mixin margin-bottom($x) {
-  @include spacing(margin-bottom, $x);
+@mixin margin-block($x, $unit: 'rem') {
+  @include spacing(margin-block, $x, $unit);
 }
 
-@mixin margin-left($x) {
-  @include spacing(margin-left, $x);
+@mixin margin-block-start($x, $unit: 'rem') {
+  @include spacing(margin-block-start, $x, $unit);
 }
 
-@mixin margin-right($x) {
-  @include spacing(margin-right, $x);
+@mixin margin-block-end($x, $unit: 'rem') {
+  @include spacing(margin-inline-end, $x, $unit);
 }
 
-@mixin margin-inline-start($x) {
-  @include spacing(margin-inline-start, $x);
+@mixin margin-top($x, $unit: 'rem') {
+  @include spacing(margin-top, $x, $unit);
 }
 
-@mixin margin-inline-end($x) {
-  @include spacing(margin-inline-end, $x);
+@mixin margin-bottom($x, $unit: 'rem') {
+  @include spacing(margin-bottom, $x, $unit);
 }
 
-@mixin padding($x) {
-  @include spacing(padding, $x);
+@mixin margin-left($x, $unit: 'rem') {
+  @include spacing(margin-left, $x, $unit);
 }
 
-@mixin padding-inline($x) {
-  @include spacing(padding-inline, $x);
+@mixin margin-right($x, $unit: 'rem') {
+  @include spacing(margin-right, $x, $unit);
 }
 
-@mixin padding-block($x) {
-  @include spacing(padding-block, $x);
+@mixin padding($x, $unit: 'rem') {
+  @include spacing(padding, $x, $unit);
 }
 
-@mixin padding-top($x) {
-  @include spacing(padding-top, $x);
+@mixin padding-inline($x, $unit: 'rem') {
+  @include spacing(padding-inline, $x, $unit);
 }
 
-@mixin padding-bottom($x) {
-  @include spacing(padding-bottom, $x);
+@mixin padding-inline-start($x, $unit: 'rem') {
+  @include spacing(padding-inline-start, $x, $unit);
 }
 
-@mixin padding-left($x) {
-  @include spacing(padding-left, $x);
+@mixin padding-inline-end($x, $unit: 'rem') {
+  @include spacing(padding-inline-end, $x, $unit);
 }
 
-@mixin padding-right($x) {
-  @include spacing(padding-right, $x);
+@mixin padding-block($x, $unit: 'rem') {
+  @include spacing(padding-block, $x, $unit);
 }
 
-@mixin padding-inline-start($x) {
-  @include spacing(padding-inline-start, $x);
+@mixin padding-block-start($x, $unit: 'rem') {
+  @include spacing(padding-block-start, $x, $unit);
 }
 
-@mixin padding-inline-end($x) {
-  @include spacing(padding-inline-end, $x);
+@mixin padding-block-end($x, $unit: 'rem') {
+  @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);
 }
diff --git a/layouts/_default/full.html b/layouts/_default/full.html
index d785272..27b433c 100644
--- a/layouts/_default/full.html
+++ b/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">
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 29deb34..37ede79 100644
--- a/layouts/_default/single.html
+++ b/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>
diff --git a/layouts/_default/summary.html b/layouts/_default/summary.html
index dfaae11..4b28348 100644
--- a/layouts/_default/summary.html
+++ b/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">
diff --git a/layouts/podcast/full.html b/layouts/podcast/full.html
index 546e47f..0de35de 100644
--- a/layouts/podcast/full.html
+++ b/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" . -}}
diff --git a/layouts/podcast/single.html b/layouts/podcast/single.html
index be4f03a..09a75c6 100644
--- a/layouts/podcast/single.html
+++ b/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>