From 8ca27a65c34ea380521ebb32f0f3c7acb44b7df4 Mon Sep 17 00:00:00 2001
From: Fredrik Jonsson <frjo@xdeb.org>
Date: Sun, 23 Apr 2023 16:47:14 +0200
Subject: [PATCH] Use start/end for text-align and padding to handle rtl etc.
 better.

---
 assets/sass/_zen.scss                            |  4 ++--
 .../components/flex-inline/_flex-inline.scss     |  3 +--
 .../list-straight-left/_list-straight-left.scss  |  6 +++---
 assets/sass/mixins/spacing/_spacing.scss         | 16 ++++++++++++++++
 assets/sass/mobile.scss                          |  2 +-
 5 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/assets/sass/_zen.scss b/assets/sass/_zen.scss
index 342ba63..b517be2 100644
--- a/assets/sass/_zen.scss
+++ b/assets/sass/_zen.scss
@@ -63,7 +63,7 @@ article {
   .tags {
     @include respond-to(s) {
       display: inline-block;
-      padding-right: 1rem;
+      padding-inline-end: 1rem;
     }
   }
 
@@ -94,7 +94,7 @@ article {
 }
 
 .content-dates {
-  text-align: right;
+  text-align: end;
 }
 
 // Figure and image.
diff --git a/assets/sass/components/flex-inline/_flex-inline.scss b/assets/sass/components/flex-inline/_flex-inline.scss
index ca72a56..e6969ba 100644
--- a/assets/sass/components/flex-inline/_flex-inline.scss
+++ b/assets/sass/components/flex-inline/_flex-inline.scss
@@ -6,11 +6,10 @@
   flex-wrap: wrap;
   gap: var(--gap);
   padding: 0;
-  text-align: left;
+  text-align: start;
 
   @include rtl() {
     flex-direction: row-reverse;
-    text-align: right;
   }
 
   &__item,
diff --git a/assets/sass/components/list-straight-left/_list-straight-left.scss b/assets/sass/components/list-straight-left/_list-straight-left.scss
index ab9270c..53d046b 100644
--- a/assets/sass/components/list-straight-left/_list-straight-left.scss
+++ b/assets/sass/components/list-straight-left/_list-straight-left.scss
@@ -9,7 +9,7 @@
     display: table-row;
 
     &::before {
-      @include padding-right(.5);
+      @include padding-inline-end(.5);
       display: table-cell;
       content: '\2022';
       font-size: var(--fs-s);
@@ -27,11 +27,11 @@
     counter-increment: table-ol;
 
     &::before {
-      @include padding-right(.5);
+      @include padding-inline-end(.5);
       display: table-cell;
       content: counter(table-ol) '.';
       font-size: var(--fs-s);
-      text-align: right;
+      text-align: end;
     }
   }
 }
diff --git a/assets/sass/mixins/spacing/_spacing.scss b/assets/sass/mixins/spacing/_spacing.scss
index a0a80bd..de19df2 100644
--- a/assets/sass/mixins/spacing/_spacing.scss
+++ b/assets/sass/mixins/spacing/_spacing.scss
@@ -47,6 +47,14 @@
   @include spacing(margin-right, $x);
 }
 
+@mixin margin-inline-start($x) {
+  @include spacing(margin-inline-start, $x);
+}
+
+@mixin margin-inline-end($x) {
+  @include spacing(margin-inline-end, $x);
+}
+
 @mixin padding($x) {
   @include spacing(padding, $x);
 }
@@ -74,3 +82,11 @@
 @mixin padding-right($x) {
   @include spacing(padding-right, $x);
 }
+
+@mixin padding-inline-start($x) {
+  @include spacing(padding-inline-start, $x);
+}
+
+@mixin padding-inline-end($x) {
+  @include spacing(padding-inline-end, $x);
+}
diff --git a/assets/sass/mobile.scss b/assets/sass/mobile.scss
index c3ff229..cc44f0e 100644
--- a/assets/sass/mobile.scss
+++ b/assets/sass/mobile.scss
@@ -142,7 +142,7 @@
   &__navbar {
     display: flex;
     flex-direction: column;
-    padding-left: 0;
+    padding-inline-start: 0;
     margin-block: 0;
 
     li {