From 52fd600814b1a250164fa36cfda1cb8fa4b60e66 Mon Sep 17 00:00:00 2001
From: Fredrik Jonsson <frjo@xdeb.org>
Date: Sun, 23 Apr 2023 18:24:51 +0200
Subject: [PATCH] More use of start/end for paddings and margins.

---
 assets/sass/_zen.scss                         | 23 ++++++++++++-------
 assets/sass/base/grouping/_grouping.scss      | 14 ++++-------
 assets/sass/components/header/_header.scss    |  7 +-----
 .../language-selector/_language-selector.scss |  7 +-----
 assets/sass/mixins/rtl/_rtl.scss              | 12 ++++------
 5 files changed, 26 insertions(+), 37 deletions(-)

diff --git a/assets/sass/_zen.scss b/assets/sass/_zen.scss
index b517be2..a4966b4 100644
--- a/assets/sass/_zen.scss
+++ b/assets/sass/_zen.scss
@@ -102,20 +102,24 @@ article {
 figure,
 img {
   &.image {
+    --padding: .75rem;
+
     @include respond-to(s) {
       &.center {
         margin-inline: auto;
       }
 
       &.left {
-        padding: 0 .75rem .75rem 0;
+        padding-inline-end: var(--padding);
+        padding-block-end: var(--padding);
         margin: 0;
         float: left;
         clear: both;
       }
 
       &.right {
-        padding: 0 0 .75rem .75rem;
+        padding-inline-start: var(--padding);
+        padding-block-end: var(--padding);
         margin: 0;
         float: right;
         clear: both;
@@ -126,10 +130,15 @@ img {
 
 figure {
   &.image {
+    --padding: .75rem;
+
     figcaption {
+      padding-block-start: var(--padding);
+
       @include respond-to(s) {
         display: table-caption;
         caption-side: bottom;
+        padding-block-start: 0;
       }
 
       p {
@@ -140,19 +149,17 @@ figure {
     @include respond-to(s) {
       display: table;
 
-      img {
-        display: block;
-      }
-
       &.left {
         figcaption {
-          padding: 0 .75rem .75rem 0;
+          padding-inline-end: var(--padding);
+          padding-block-end: var(--padding);
         }
       }
 
       &.right {
         figcaption {
-          padding: 0 0 .75rem .75rem;
+          padding-inline-start: var(--padding);
+          padding-block-end: var(--padding);
         }
       }
     }
diff --git a/assets/sass/base/grouping/_grouping.scss b/assets/sass/base/grouping/_grouping.scss
index e2f4dd6..0da63d0 100644
--- a/assets/sass/base/grouping/_grouping.scss
+++ b/assets/sass/base/grouping/_grouping.scss
@@ -28,21 +28,15 @@ menu {
 }
 
 dd {
-  margin: 0 0 0 var(--indent-amount);
-
-  @include rtl {
-    margin: 0 var(--indent-amount) 0 0;
-  }
+  margin: 0;
+  margin-inline-start: var(--indent-amount);
 }
 
 ol,
 ul,
 menu {
-  padding: 0 0 0 var(--indent-amount);
-
-  @include rtl {
-    padding: 0 var(--indent-amount) 0 0;
-  }
+  padding: 0;
+  padding-inline-start: var(--indent-amount);
 
   // Turn off margins on nested lists.
   ol,
diff --git a/assets/sass/components/header/_header.scss b/assets/sass/components/header/_header.scss
index fb18a5a..18f95bd 100644
--- a/assets/sass/components/header/_header.scss
+++ b/assets/sass/components/header/_header.scss
@@ -45,12 +45,7 @@
   // Wrapper for any blocks placed in the header region.
   &__region {
     @include respond-to(s) {
-      margin-left: auto;
-
-      @include rtl() {
-        margin-right: auto;
-        margin-left: 0;
-      }
+      margin-inline-start: auto;
     }
   }
 }
diff --git a/assets/sass/components/language-selector/_language-selector.scss b/assets/sass/components/language-selector/_language-selector.scss
index b70ff03..9231832 100644
--- a/assets/sass/components/language-selector/_language-selector.scss
+++ b/assets/sass/components/language-selector/_language-selector.scss
@@ -5,11 +5,6 @@
 }
 
 .language-icon {
-  @include margin-right(.5);
+  @include margin-inline-end(.5);
   fill: var(--color-text);
-
-  @include rtl() {
-    @include margin-left(.5);
-    margin-right: 0;
-  }
 }
diff --git a/assets/sass/mixins/rtl/_rtl.scss b/assets/sass/mixins/rtl/_rtl.scss
index c301164..2030d11 100644
--- a/assets/sass/mixins/rtl/_rtl.scss
+++ b/assets/sass/mixins/rtl/_rtl.scss
@@ -4,18 +4,16 @@ $include-rtl: true !default;
 
 // rtl()
 //
-// Includes Right-To-Left language support by adding a parent selector of
-// `[dir="rtl"]`. Since the dir attribute is usually defined on the html element
-// of a page, using this mixin on a ruleset that matches the html element won't
-// work.
+// Includes Right-To-Left language support by adding a selector of
+// `[dir="rtl"]`.
 //
 // Can be turned off globally by setting `$include-rtl: false;`.
 //
-// $selector = '[dir="rtl"]' - The RTL parent selector.
-@mixin rtl($selector: '[dir="rtl"]') {
+// $selector = ':dir(rtl)' - The RTL selector.
+@mixin rtl($selector: ':dir(rtl)') {
   @if $include-rtl {
     @if & {
-      #{$selector} & {
+       &#{$selector} {
         @content;
       }
     }