From 5ea8ebff46b2090f16d2de92ba7d21476413b3ff Mon Sep 17 00:00:00 2001
From: Fredrik Jonsson <frjo@xdeb.org>
Date: Sat, 18 Nov 2023 16:22:08 +0100
Subject: [PATCH] Only add margin att block end, not start on group elements.

---
 assets/sass/base/forms/_forms.scss           |  2 +-
 assets/sass/base/grouping/_grouping.scss     | 10 ++++-----
 assets/sass/base/headings/_headings.scss     | 22 +-------------------
 assets/sass/base/images/_images.scss         | 22 +++++++++-----------
 assets/sass/base/tables/_tables.scss         |  2 +-
 assets/sass/components/spacing/_spacing.scss |  4 ++--
 assets/sass/components/tables/_tables.scss   |  6 +++---
 7 files changed, 23 insertions(+), 45 deletions(-)

diff --git a/assets/sass/base/forms/_forms.scss b/assets/sass/base/forms/_forms.scss
index 3fee1bd..72a60fd 100644
--- a/assets/sass/base/forms/_forms.scss
+++ b/assets/sass/base/forms/_forms.scss
@@ -4,7 +4,7 @@
 
 form {
   // Add vertical rhythm margins.
-  @include margin-block(1);
+  @include margin-block(0 1);
 }
 
 input,
diff --git a/assets/sass/base/grouping/_grouping.scss b/assets/sass/base/grouping/_grouping.scss
index f1a401b..4c2f0af 100644
--- a/assets/sass/base/grouping/_grouping.scss
+++ b/assets/sass/base/grouping/_grouping.scss
@@ -12,7 +12,7 @@
 
 blockquote {
   // Add vertical rhythm margins.
-  @include margin-block(1);
+  @include margin-block(0 1);
   // Also indent the quote on both sides.
   margin-inline: var(--indent-amount);
 }
@@ -24,7 +24,7 @@ ol,
 ul,
 menu {
   // Add vertical rhythm margins.
-  @include margin-block(1);
+  @include margin-block(0 1);
 }
 
 dd {
@@ -57,7 +57,7 @@ li {
 
 figure {
   // Add vertical rhythm margins.
-  @include margin-block(1);
+  @include margin-block(0 1);
 
   // Remove defult inline margins.
   @include margin-inline(0);
@@ -74,7 +74,7 @@ hr {
 
 p {
   // Add vertical rhythm margins.
-  @include margin-block(.75);
+  @include margin-block(0 .75);
 
   // Set max text line width in main for readability.
   .main & {
@@ -86,7 +86,7 @@ p {
 
 pre {
   // Add vertical rhythm margins.
-  @include margin-block(.75);
+  @include margin-block(0 .75);
   font-family: var(--ff-monospace);
 }
 
diff --git a/assets/sass/base/headings/_headings.scss b/assets/sass/base/headings/_headings.scss
index c60ba1e..54a7f4a 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 0, 'em');
+  @include margin-block(1 0.375, 'em');
   color: var(--color-headings);
   font-family: var(--ff-headings);
   font-weight: var(--fw-headings);
@@ -28,26 +28,6 @@ h6,
   }
 }
 
-// Move content closer up to related header.
-h2,
-%h2,
-h3,
-%h3,
-h4,
-%h4,
-h5,
-%h5,
-h6,
-%h6 {
-  & + :is(p, ul, ol) {
-    @include margin-block-start(0.375);
-  }
-
-  & + & {
-    @include margin-block-start(0.5);
-  }
-}
-
 h1,
 %h1 {
   // h1 only on top of page so different margins.
diff --git a/assets/sass/base/images/_images.scss b/assets/sass/base/images/_images.scss
index d06a3fd..d9cba47 100644
--- a/assets/sass/base/images/_images.scss
+++ b/assets/sass/base/images/_images.scss
@@ -3,7 +3,7 @@
 figure,
 img {
   &.image {
-    --padding: .75rem;
+    --image-padding: .75rem;
 
     @include respond-to(s) {
       &.center {
@@ -11,16 +11,16 @@ img {
       }
 
       &.left {
-        padding-inline-end: var(--padding);
-        padding-block-end: var(--padding);
+        padding-inline-end: var(--image-padding);
+        padding-block-end: var(--image-padding);
         margin: 0;
         float: left;
         clear: both;
       }
 
       &.right {
-        padding-inline-start: var(--padding);
-        padding-block-end: var(--padding);
+        padding-inline-start: var(--image-padding);
+        padding-block-end: var(--image-padding);
         margin: 0;
         float: right;
         clear: both;
@@ -31,10 +31,8 @@ img {
 
 figure {
   &.image {
-    --padding: .75rem;
-
     figcaption {
-      padding-block-start: var(--padding);
+      padding-block-start: var(--image-padding);
 
       @include respond-to(s) {
         display: table-caption;
@@ -52,15 +50,15 @@ figure {
 
       &.left {
         figcaption {
-          padding-inline-end: var(--padding);
-          padding-block-end: var(--padding);
+          padding-inline-end: var(--image-padding);
+          padding-block-end: var(--image-padding);
         }
       }
 
       &.right {
         figcaption {
-          padding-inline-start: var(--padding);
-          padding-block-end: var(--padding);
+          padding-inline-start: var(--image-padding);
+          padding-block-end: var(--image-padding);
         }
       }
     }
diff --git a/assets/sass/base/tables/_tables.scss b/assets/sass/base/tables/_tables.scss
index ca81642..deeaa12 100644
--- a/assets/sass/base/tables/_tables.scss
+++ b/assets/sass/base/tables/_tables.scss
@@ -4,7 +4,7 @@
 
 table {
   // Add vertical rhythm margins.
-  @include margin-block(1);
+  @include margin-block(0 1);
   // Remove default spacing between table cells.
   border-collapse: collapse;
   // Prevent cramped-looking tables
diff --git a/assets/sass/components/spacing/_spacing.scss b/assets/sass/components/spacing/_spacing.scss
index fe8a1a5..dd69749 100644
--- a/assets/sass/components/spacing/_spacing.scss
+++ b/assets/sass/components/spacing/_spacing.scss
@@ -1,10 +1,10 @@
 @each $name, $space in $spacing {
   .mt--#{$name} {
-    @include margin-top($space);
+    @include margin-block-start($space);
   }
 
   .mb--#{$name} {
-    @include margin-bottom($space);
+    @include margin-block-end($space);
   }
 
   .mtb--#{$name} {
diff --git a/assets/sass/components/tables/_tables.scss b/assets/sass/components/tables/_tables.scss
index 03725ac..4b315f1 100644
--- a/assets/sass/components/tables/_tables.scss
+++ b/assets/sass/components/tables/_tables.scss
@@ -1,14 +1,14 @@
 .zebra-table,
 %zebra-table {
-  --padding: .5rem;
+  --cell-padding: .5rem;
 
   @include respond-to-max(s) {
-    --padding: .3rem;
+    --cell-padding: .3rem;
   }
 
   th,
   td {
-    padding: var(--padding);
+    padding: var(--cell-padding);
   }
 
   thead {