From 922440cd551c1999c145c9a9b253e1745e467db3 Mon Sep 17 00:00:00 2001
From: iBug <git@ibugone.com>
Date: Tue, 25 Jun 2024 23:36:16 +0800
Subject: [PATCH] Update all CSS to use logical properties

- Vendor CSS's are excluded for now
- Removed <IE7 asterisk prefix items
---
 _sass/minimal-mistakes/_archive.scss    | 104 ++++++++++--------------
 _sass/minimal-mistakes/_base.scss       |   4 +-
 _sass/minimal-mistakes/_buttons.scss    |   6 +-
 _sass/minimal-mistakes/_footer.scss     |  14 ++--
 _sass/minimal-mistakes/_forms.scss      |  43 ++++------
 _sass/minimal-mistakes/_masthead.scss   |  14 ++--
 _sass/minimal-mistakes/_navigation.scss |  48 ++++++-----
 _sass/minimal-mistakes/_page.scss       |  49 ++++-------
 _sass/minimal-mistakes/_reset.scss      |   5 +-
 _sass/minimal-mistakes/_search.scss     |   9 +-
 _sass/minimal-mistakes/_sidebar.scss    |  30 ++++---
 _sass/minimal-mistakes/_syntax.scss     |   8 +-
 _sass/minimal-mistakes/_tables.scss     |   4 +-
 _sass/minimal-mistakes/_utilities.scss  |  42 +++-------
 a.scss                                  |   8 ++
 15 files changed, 159 insertions(+), 229 deletions(-)
 create mode 100644 a.scss

diff --git a/_sass/minimal-mistakes/_archive.scss b/_sass/minimal-mistakes/_archive.scss
index 26350274..1c5bbd2a 100644
--- a/_sass/minimal-mistakes/_archive.scss
+++ b/_sass/minimal-mistakes/_archive.scss
@@ -7,7 +7,7 @@
   margin-bottom: 2em;
 
   @include breakpoint($large) {
-    float: right;
+    float: inline-end;
     width: calc(100% - #{$right-sidebar-width-narrow});
     padding-inline-end: $right-sidebar-width-narrow;
   }
@@ -53,10 +53,7 @@
   a[rel="permalink"]::before {
     content: '';
     position: absolute;
-    left: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
+    inset: 0;
   }
 
   a + a {
@@ -98,14 +95,14 @@
 .archive__item-caption {
   position: absolute;
   bottom: 0;
-  right: 0;
+  inset-inline-end: 0;
   margin: 0 auto;
   padding: 2px 5px;
   color: #fff;
   font-family: $caption-font-family;
   font-size: $type-size-8;
   background: #000;
-  text-align: right;
+  text-align: end;
   z-index: 5;
   opacity: 0.5;
   border-radius: $border-radius 0 0 0;
@@ -140,11 +137,11 @@
     /* extend grid elements to the right */
 
     @include breakpoint($large) {
-      margin-right: -1 * $right-sidebar-width-narrow;
+      margin-inline-end: -1 * $right-sidebar-width-narrow;
     }
 
     @include breakpoint($x-large) {
-      margin-right: -1 * $right-sidebar-width;
+      margin-inline-end: -1 * $right-sidebar-width;
     }
   }
 }
@@ -153,23 +150,22 @@
   margin-bottom: 2em;
 
   @include breakpoint($small) {
-    float: left;
+    float: inline-start;
     width: span(5 of 10);
 
     &:nth-child(2n + 1) {
       clear: both;
-      margin-left: 0;
+      margin-inline-start: 0;
     }
 
     &:nth-child(2n + 2) {
       clear: none;
-      margin-left: gutter(of 10);
+      margin-inline-start: gutter(of 10);
     }
   }
 
   @include breakpoint($medium) {
-    margin-left: 0; /* override margin*/
-    margin-right: 0; /* override margin*/
+    margin-inline: 0; /* override margin*/
     width: span(3 of 12);
 
     &:nth-child(2n + 1) {
@@ -182,17 +178,17 @@
 
     &:nth-child(4n + 2) {
       clear: none;
-      margin-left: gutter(1 of 12);
+      margin-inline-start: gutter(1 of 12);
     }
 
     &:nth-child(4n + 3) {
       clear: none;
-      margin-left: gutter(1 of 12);
+      margin-inline-start: gutter(1 of 12);
     }
 
     &:nth-child(4n + 4) {
       clear: none;
-      margin-left: gutter(1 of 12);
+      margin-inline-start: gutter(1 of 12);
     }
   }
 
@@ -254,23 +250,23 @@
   font-size: 1.125em;
 
   @include breakpoint($small) {
-    float: left;
+    float: inline-start;
     margin-bottom: 0;
     width: span(4 of 12);
 
     &:nth-child(3n + 1) {
       clear: both;
-      margin-left: 0;
+      margin-inline-start: 0;
     }
 
     &:nth-child(3n + 2) {
       clear: none;
-      margin-left: gutter(of 12);
+      margin-inline-start: gutter(of 12);
     }
 
     &:nth-child(3n + 3) {
       clear: none;
-      margin-left: gutter(of 12);
+      margin-inline-start: gutter(of 12);
     }
 
     .feature__item-teaser {
@@ -280,30 +276,25 @@
   }
 
   .archive__item-body {
-    padding-left: gutter(1 of 12);
-    padding-right: gutter(1 of 12);
+    padding-inline: gutter(1 of 12);
   }
 
   a.btn::before {
     content: '';
     position: absolute;
-    left: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
+    inset: 0;
   }
 
   &--left {
     position: relative;
-    float: left;
-    margin-left: 0;
-    margin-right: 0;
+    float: inline-start;
+    margin-inline: 0;
     width: 100%;
     clear: both;
     font-size: 1.125em;
 
     .archive__item {
-      float: left;
+      float: inline-start;
     }
 
     .archive__item-teaser {
@@ -313,22 +304,19 @@
     a.btn::before {
       content: '';
       position: absolute;
-      left: 0;
-      top: 0;
-      right: 0;
-      bottom: 0;
+      inset: 0;
     }
 
     @include breakpoint($small) {
       .archive__item-teaser {
-        float: left;
+        float: inline-start;
         width: span(5 of 12);
       }
 
       .archive__item-body {
-        float: right;
-        padding-left: gutter(0.5 of 12);
-        padding-right: gutter(1 of 12);
+        float: inline-end;
+        padding-inline-start: gutter(0.5 of 12);
+        padding-inline-end: gutter(1 of 12);
         width: span(7 of 12);
       }
     }
@@ -336,15 +324,14 @@
 
   &--right {
     position: relative;
-    float: left;
-    margin-left: 0;
-    margin-right: 0;
+    float: inline-start;
+    margin-inline: 0;
     width: 100%;
     clear: both;
     font-size: 1.125em;
 
     .archive__item {
-      float: left;
+      float: inline-start;
     }
 
     .archive__item-teaser {
@@ -354,34 +341,30 @@
     a.btn::before {
       content: '';
       position: absolute;
-      left: 0;
-      top: 0;
-      right: 0;
-      bottom: 0;
+      inset: 0;
     }
 
     @include breakpoint($small) {
-      text-align: right;
+      text-align: end;
 
       .archive__item-teaser {
-        float: right;
+        float: inline-end;
         width: span(5 of 12);
       }
 
       .archive__item-body {
-        float: left;
+        float: inline-start;
         width: span(7 of 12);
-        padding-left: gutter(0.5 of 12);
-        padding-right: gutter(1 of 12);
+        padding-inline-start: gutter(0.5 of 12);
+        padding-inline-end: gutter(1 of 12);
       }
     }
   }
 
   &--center {
     position: relative;
-    float: left;
-    margin-left: 0;
-    margin-right: 0;
+    float: inline-start;
+    margin-inline: 0;
     width: 100%;
     clear: both;
     font-size: 1.125em;
@@ -398,10 +381,7 @@
     a.btn::before {
       content: '';
       position: absolute;
-      left: 0;
-      top: 0;
-      right: 0;
-      bottom: 0;
+      inset: 0;
     }
 
     @include breakpoint($small) {
@@ -442,14 +422,14 @@
    Wide Pages
    ========================================================================== */
 
-  .wide {
+.wide {
   .archive {
     @include breakpoint($large) {
-      padding-right: 0;
+      padding-inline-end: 0;
     }
 
     @include breakpoint($x-large) {
-      padding-right: 0;
+      padding-inline-end: 0;
     }
   }
 }
diff --git a/_sass/minimal-mistakes/_base.scss b/_sass/minimal-mistakes/_base.scss
index 8a674bbc..d52a42f2 100644
--- a/_sass/minimal-mistakes/_base.scss
+++ b/_sass/minimal-mistakes/_base.scss
@@ -116,9 +116,9 @@ blockquote {
   cite {
     font-style: italic;
 
-    &:before {
+    &::before {
       content: "\2014";
-      padding-right: 5px;
+      padding-inline-end: 5px;
     }
   }
 }
diff --git a/_sass/minimal-mistakes/_buttons.scss b/_sass/minimal-mistakes/_buttons.scss
index 9ef60a84..87e705cd 100644
--- a/_sass/minimal-mistakes/_buttons.scss
+++ b/_sass/minimal-mistakes/_buttons.scss
@@ -21,11 +21,11 @@
   cursor: pointer;
 
   .icon {
-    margin-right: 0.5em;
+    margin-inline-end: 0.5em;
   }
 
   .icon + .hidden {
-    margin-left: -0.5em; /* override for hidden text*/
+    margin-inline-start: -0.5em; /* override for hidden text*/
   }
 
   /* button colors */
@@ -94,4 +94,4 @@
   &--small {
     font-size: $type-size-7;
   }
-}
\ No newline at end of file
+}
diff --git a/_sass/minimal-mistakes/_footer.scss b/_sass/minimal-mistakes/_footer.scss
index c0b0625b..96d0842c 100644
--- a/_sass/minimal-mistakes/_footer.scss
+++ b/_sass/minimal-mistakes/_footer.scss
@@ -4,9 +4,8 @@
 
 .page__footer {
   @include clearfix;
-  float: left;
-  margin-left: 0;
-  margin-right: 0;
+  float: inline-start;
+  margin-inline: 0;
   width: 100%;
   margin-top: 3em;
   color: $muted-text-color;
@@ -18,8 +17,7 @@
 
   footer {
     @include clearfix;
-    margin-left: auto;
-    margin-right: auto;
+    margin-inline: auto;
     margin-top: 2em;
     max-width: 100%;
     padding: 0 1em 2em;
@@ -67,13 +65,13 @@
     text-transform: uppercase;
   }
 
-  li + li:before {
+  li + li::before {
     content: "";
-    padding-right: 5px;
+    padding-inline-end: 5px;
   }
 
   a {
-    padding-right: 10px;
+    padding-inline-end: 10px;
     font-weight: bold;
   }
 
diff --git a/_sass/minimal-mistakes/_forms.scss b/_sass/minimal-mistakes/_forms.scss
index 0dd9b480..c026cc9f 100644
--- a/_sass/minimal-mistakes/_forms.scss
+++ b/_sass/minimal-mistakes/_forms.scss
@@ -3,7 +3,7 @@
    ========================================================================== */
 
 form {
-  margin: 0 0 5px 0;
+  margin-bottom: 5px;
   padding: 1em;
   background-color: $form-background-color;
 
@@ -17,7 +17,7 @@ form {
     display: block;
     width: 100%;
     margin-bottom: 5px * 2;
-    *margin-left: -7px;
+    margin-inline-start: -7px;
     padding: 0;
     color: $text-color;
     border: 0;
@@ -45,7 +45,6 @@ button,
 select,
 textarea {
   vertical-align: baseline;
-  *vertical-align: middle;
 }
 
 input,
@@ -102,7 +101,6 @@ input[type="radio"] {
   height: auto;
   padding: 0;
   margin: 3px 0;
-  *margin-top: 0;
   line-height: normal;
   cursor: pointer;
   border-radius: 0;
@@ -114,8 +112,6 @@ input[type="checkbox"],
 input[type="radio"] {
   box-sizing: border-box;
   padding: 0;
-  *width: 13px;
-  *height: 13px;
 }
 
 input[type="image"] {
@@ -138,12 +134,6 @@ input[type="submit"] {
   width: auto;
   height: auto;
   cursor: pointer;
-  *overflow: visible;
-}
-
-select,
-input[type="file"] {
-  *margin-top: 4px;
 }
 
 select {
@@ -173,14 +163,14 @@ input[type="hidden"] {
 
 .radio,
 .checkbox {
-  padding-left: 18px;
+  padding-inline-start: 18px;
   font-weight: normal;
 }
 
 .radio input[type="radio"],
 .checkbox input[type="checkbox"] {
-  float: left;
-  margin-left: -18px;
+  float: inline-start;
+  margin-inline-start: -18px;
 }
 
 .radio.inline,
@@ -193,7 +183,7 @@ input[type="hidden"] {
 
 .radio.inline + .radio.inline,
 .checkbox.inline + .checkbox.inline {
-  margin-left: 10px;
+  margin-inline-start: 10px;
 }
 
 /*
@@ -248,7 +238,7 @@ select:focus {
 .help-inline {
   display: inline-block;
   vertical-align: middle;
-  padding-left: 5px;
+  padding-inline-start: 5px;
 }
 
 /*
@@ -279,16 +269,16 @@ select:focus {
 .form-inline .radio,
 .form-inline .checkbox,
 .form-inline .radio {
-  padding-left: 0;
+  padding-inline-start: 0;
   margin-bottom: 0;
   vertical-align: middle;
 }
 
 .form-inline .radio input[type="radio"],
 .form-inline .checkbox input[type="checkbox"] {
-  float: left;
-  margin-left: 0;
-  margin-right: 3px;
+  float: inline-start;
+  margin-inline-start: 0;
+  margin-inline-end: 3px;
 }
 
 /*
@@ -303,8 +293,7 @@ select:focus {
 }
 
 .form-search .search-query {
-  padding-left: 14px;
-  padding-right: 14px;
+  padding-inline: 14px;
   margin-bottom: 0;
   border-radius: 14px;
 }
@@ -324,15 +313,15 @@ select:focus {
 .form-search .radio input[type="radio"],
 .form-search .checkbox input[type="checkbox"] {
   float: left;
-  margin-left: 0;
-  margin-right: 3px;
+  margin-inline-start: 0;
+  margin-inline-end: 3px;
 }
 
 /*
      .form--loading
      ========================================================================== */
 
-.form--loading:before {
+.form--loading::before {
   content: "";
 }
 
@@ -340,7 +329,7 @@ select:focus {
   display: block;
 }
 
-.form:before {
+.form::before {
   position: absolute;
   top: 0;
   left: 0;
diff --git a/_sass/minimal-mistakes/_masthead.scss b/_sass/minimal-mistakes/_masthead.scss
index 2dfefcce..80b0ed57 100644
--- a/_sass/minimal-mistakes/_masthead.scss
+++ b/_sass/minimal-mistakes/_masthead.scss
@@ -13,8 +13,7 @@
 
   &__inner-wrap {
     @include clearfix;
-    margin-left: auto;
-    margin-right: auto;
+    margin-inline: auto;
     padding: 1em;
     max-width: 100%;
     display: -webkit-box;
@@ -59,17 +58,16 @@
 }
 
 .masthead__menu {
-  float: left;
-  margin-left: 0;
-  margin-right: 0;
+  float: inline-start;
+  margin-inline: 0;
   width: 100%;
   clear: both;
 
   .site-nav {
-    margin-left: 0;
+    margin-inline-start: 0;
 
     @include breakpoint($small) {
-      float: right;
+      float: inline-end;
     }
   }
 
@@ -87,7 +85,7 @@
   white-space: nowrap;
 
   &--lg {
-    padding-right: 2em;
+    padding-inline-end: 2em;
     font-weight: 700;
   }
 }
diff --git a/_sass/minimal-mistakes/_navigation.scss b/_sass/minimal-mistakes/_navigation.scss
index 14cf069f..ddfdc70b 100644
--- a/_sass/minimal-mistakes/_navigation.scss
+++ b/_sass/minimal-mistakes/_navigation.scss
@@ -10,8 +10,7 @@
   @include clearfix;
   margin: 0 auto;
   max-width: 100%;
-  padding-left: 1em;
-  padding-right: 1em;
+  padding-inline: 1em;
   font-family: $sans-serif;
   -webkit-animation: $intro-transition;
   animation: $intro-transition;
@@ -28,7 +27,7 @@
     font-size: $type-size-6;
 
     @include breakpoint($large) {
-      float: right;
+      float: inline-end;
       width: calc(100% - #{$right-sidebar-width-narrow});
     }
 
@@ -104,15 +103,15 @@
       margin-left: 0;
 
       a {
-        border-top-left-radius: $border-radius;
-        border-bottom-left-radius: $border-radius;
+        border-start-start-radius: $border-radius;
+        border-end-start-radius: $border-radius;
       }
     }
 
     &:last-child {
       a {
-        border-top-right-radius: $border-radius;
-        border-bottom-right-radius: $border-radius;
+        border-start-end-radius: $border-radius;
+        border-end-end-radius: $border-radius;
       }
     }
   }
@@ -137,14 +136,14 @@
     }
 
     &:first-child {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
+      border-start-end-radius: 0;
+      border-end-end-radius: 0;
     }
 
     &:last-child {
-      margin-left: -1px;
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
+      margin-inline-start: -1px;
+      border-start-start-radius: 0;
+      border-end-start-radius: 0;
     }
 
     &.disabled {
@@ -262,7 +261,7 @@
   .hidden-links {
     position: absolute;
     top: 100%;
-    right: 0;
+    inset-inline-end: 0;
     margin-top: 15px;
     padding: 5px;
     border: 1px solid $border-color;
@@ -287,11 +286,11 @@
       }
     }
 
-    &:before {
+    &::before {
       content: "";
       position: absolute;
       top: -11px;
-      right: 10px;
+      inset-inline-end: 10px;
       width: 0;
       border-style: solid;
       border-width: 0 10px 10px;
@@ -300,11 +299,11 @@
       z-index: 0;
     }
 
-    &:after {
+    &::after {
       content: "";
       position: absolute;
       top: -10px;
-      right: 10px;
+      inset-inline-end: 10px;
       width: 0;
       border-style: solid;
       border-width: 0 10px 10px;
@@ -361,11 +360,11 @@
       transition: 0.2s ease-out;
       cursor: pointer;
 
-      &:before,
-      &:after {
+      &::before,
+      &::after {
         content: "";
         position: absolute;
-        right: 1em;
+        inset-inline-end: 1em;
         top: 1.25em;
         width: 0.75em;
         height: 0.125em;
@@ -446,9 +445,8 @@
   }
 
   .active {
-    margin-left: -0.5em;
-    padding-left: 0.5em;
-    padding-right: 0.5em;
+    margin-inline-start: -0.5em;
+    padding-inline: 0.5em;
     font-weight: bold;
   }
 
@@ -516,8 +514,8 @@
     color: #fff;
     font-size: $type-size-6;
     background: $primary-color;
-    border-top-left-radius: $border-radius;
-    border-top-right-radius: $border-radius;
+    border-start-start-radius: $border-radius;
+    border-start-end-radius: $border-radius;
   }
 
   // Scrollspy marks toc items as .active when they are in focus
diff --git a/_sass/minimal-mistakes/_page.scss b/_sass/minimal-mistakes/_page.scss
index 472c4446..62c52a30 100644
--- a/_sass/minimal-mistakes/_page.scss
+++ b/_sass/minimal-mistakes/_page.scss
@@ -4,10 +4,8 @@
 
 #main {
   @include clearfix;
-  margin-left: auto;
-  margin-right: auto;
-  padding-left: 1em;
-  padding-right: 1em;
+  margin-inline: auto;
+  padding-inline: 1em;
   -webkit-animation: $intro-transition;
   animation: $intro-transition;
   max-width: 100%;
@@ -37,7 +35,7 @@ body {
 
 .page {
   @include breakpoint($large) {
-    float: right;
+    float: inline-end;
     width: calc(100% - #{$right-sidebar-width-narrow});
     padding-inline-end: $right-sidebar-width-narrow;
   }
@@ -50,8 +48,7 @@ body {
   .page__inner-wrap {
     float: left;
     margin-top: 1em;
-    margin-left: 0;
-    margin-right: 0;
+    margin-inline: 0;
     width: 100%;
     clear: both;
 
@@ -59,9 +56,8 @@ body {
     .page__meta,
     .page__share {
       position: relative;
-      float: left;
-      margin-left: 0;
-      margin-right: 0;
+      float: inline-start;
+      margin-inline: 0;
       width: 100%;
       clear: both;
     }
@@ -203,8 +199,7 @@ body {
     }
 
     .wrapper {
-      padding-left: 1em;
-      padding-right: 1em;
+      padding-inline: 1em;
 
       @include breakpoint($x-large) {
         max-width: $x-large;
@@ -242,14 +237,14 @@ body {
 .page__hero-caption {
   position: absolute;
   bottom: 0;
-  right: 0;
+  inset-inline-end: 0;
   margin: 0 auto;
   padding: 2px 5px;
   color: #fff;
   font-family: $caption-font-family;
   font-size: $type-size-7;
   background: #000;
-  text-align: right;
+  text-align: end;
   z-index: 5;
   opacity: 0.5;
   border-radius: $border-radius 0 0 0;
@@ -320,8 +315,7 @@ body {
 
 .page__meta-sep::before {
   content: "\2022";
-  padding-left: 0.5em;
-  padding-right: 0.5em;
+  padding-inline: 0.5em;
 }
 
 /*
@@ -417,7 +411,7 @@ body {
   color: $muted-text-color;
   font-size: 0.6em;
   text-transform: uppercase;
-  text-align: right;
+  text-align: end;
   text-decoration: none;
 }
 
@@ -427,8 +421,7 @@ body {
 
 .page__comments {
   float: left;
-  margin-left: 0;
-  margin-right: 0;
+  margin-inline: 0;
   width: 100%;
   clear: both;
 }
@@ -494,7 +487,7 @@ body {
 }
 
 .comment__content-wrapper {
-  float: right;
+  float: inline-end;
   width: calc(100% - 60px);
 
   @include breakpoint($large) {
@@ -556,23 +549,13 @@ body {
    ========================================================================== */
 
 .wide {
-  .page {
+  .page, .page__related {
     @include breakpoint($large) {
-      padding-right: 0;
+      padding-inline-end: 0;
     }
 
     @include breakpoint($x-large) {
-      padding-right: 0;
-    }
-  }
-
-  .page__related {
-    @include breakpoint($large) {
-      padding-right: 0;
-    }
-
-    @include breakpoint($x-large) {
-      padding-right: 0;
+      padding-inline-end: 0;
     }
   }
 }
diff --git a/_sass/minimal-mistakes/_reset.scss b/_sass/minimal-mistakes/_reset.scss
index 2259fd0c..63805903 100644
--- a/_sass/minimal-mistakes/_reset.scss
+++ b/_sass/minimal-mistakes/_reset.scss
@@ -64,8 +64,6 @@ audio,
 canvas,
 video {
   display: inline-block;
-  *display: inline;
-  *zoom: 1;
 }
 
 /* Prevents modern browsers from displaying 'audio' without controls */
@@ -142,7 +140,6 @@ textarea {
 
 button,
 input {
-  *overflow: visible; /* inner spacing ie IE6/7*/
   line-height: normal; /* FF3/4 have !important on line-height in UA stylesheet*/
 }
 
@@ -184,4 +181,4 @@ input[type="search"]::-webkit-search-cancel-button {
 textarea {
   overflow: auto; /* remove vertical scrollbar in IE6-9*/
   vertical-align: top; /* readability and alignment cross-browser*/
-}
\ No newline at end of file
+}
diff --git a/_sass/minimal-mistakes/_search.scss b/_sass/minimal-mistakes/_search.scss
index fa7ee832..4a3a2b37 100644
--- a/_sass/minimal-mistakes/_search.scss
+++ b/_sass/minimal-mistakes/_search.scss
@@ -9,8 +9,7 @@
 }
 
 .search__toggle {
-  margin-left: 1rem;
-  margin-right: 1rem;
+  margin-inline: 1rem;
   height: $nav-toggle-height;
   border: 0;
   outline: none;
@@ -38,10 +37,8 @@
 
   &__inner-wrap {
     width: 100%;
-    margin-left: auto;
-    margin-right: auto;
-    padding-left: 1em;
-    padding-right: 1em;
+    margin-inline: auto;
+    padding-inline: 1em;
     -webkit-animation: $intro-transition;
     animation: $intro-transition;
     -webkit-animation-delay: 0.15s;
diff --git a/_sass/minimal-mistakes/_sidebar.scss b/_sass/minimal-mistakes/_sidebar.scss
index 9a728e3d..e5144352 100644
--- a/_sass/minimal-mistakes/_sidebar.scss
+++ b/_sass/minimal-mistakes/_sidebar.scss
@@ -108,12 +108,12 @@
 .splash .sidebar__right {
   @include breakpoint($large) {
     position: relative;
-    float: right;
-    margin-right: 0;
+    float: inline-end;
+    margin-inline-end: 0;
   }
 
   @include breakpoint($x-large) {
-    margin-right: 0;
+    margin-inline-end: 0;
   }
 }
 
@@ -147,15 +147,13 @@
 .author__content {
   display: table-cell;
   vertical-align: top;
-  padding-left: 15px;
-  padding-right: 25px;
+  padding-inline: 15px 25px;
   line-height: 1;
 
   @include breakpoint($large) {
     display: block;
     width: 100%;
-    padding-left: 0;
-    padding-right: 0;
+    padding-inline: 0;
   }
 
   a {
@@ -219,7 +217,7 @@
         content: '';
         position: fixed;
         top: 0;
-        left: 0;
+        inset-inline-start: 0;
         width: 100%;
         height: 100%;
         pointer-events: none;
@@ -241,7 +239,7 @@
 .author__urls {
   display: none;
   position: absolute;
-  right: 0;
+  inset-inline-end: 0;
   margin-top: 15px;
   padding: 10px;
   list-style-type: none;
@@ -265,12 +263,12 @@
     box-shadow: none;
   }
 
-  &:before {
+  &::before {
     display: block;
     content: "";
     position: absolute;
     top: -11px;
-    left: calc(50% - 10px);
+    inset-inline-start: calc(50% - 10px);
     width: 0;
     border-style: solid;
     border-width: 0 10px 10px;
@@ -287,7 +285,7 @@
     content: "";
     position: absolute;
     top: -10px;
-    left: calc(50% - 10px);
+    inset-inline-start: calc(50% - 10px);
     width: 0;
     border-style: solid;
     border-width: 0 10px 10px;
@@ -333,10 +331,10 @@
   @include breakpoint($large) {
     position: initial;
     top: initial;
-    right: initial;
+    inset-inline-end: initial;
     width: initial;
-    margin-right: initial;
-    padding-left: initial;
+    margin-inline-end: initial;
+    padding-inline-start: initial;
     z-index: initial;
 
     &.sticky {
@@ -346,6 +344,6 @@
 
   @include breakpoint($x-large) {
     width: initial;
-    margin-right: initial;
+    margin-inline-end: initial;
   }
 }
diff --git a/_sass/minimal-mistakes/_syntax.scss b/_sass/minimal-mistakes/_syntax.scss
index 45ffa7e2..a3e04e4d 100644
--- a/_sass/minimal-mistakes/_syntax.scss
+++ b/_sass/minimal-mistakes/_syntax.scss
@@ -37,11 +37,11 @@ figure.highlight {
     /* line numbers*/
     &.gutter,
     &.rouge-gutter {
-      padding-right: 1em;
+      padding-inline-end: 1em;
       width: 1em;
       color: $base04;
-      border-right: 1px solid $base04;
-      text-align: right;
+      border-inline-end: 1px solid $base04;
+      text-align: end;
     }
 
     /* code */
@@ -325,4 +325,4 @@ figure.highlight {
   th, td {
     border-bottom: 0;
   }
-}
\ No newline at end of file
+}
diff --git a/_sass/minimal-mistakes/_tables.scss b/_sass/minimal-mistakes/_tables.scss
index c270a775..e2704ee8 100644
--- a/_sass/minimal-mistakes/_tables.scss
+++ b/_sass/minimal-mistakes/_tables.scss
@@ -24,7 +24,7 @@ thead {
 th {
   padding: 0.5em;
   font-weight: bold;
-  text-align: left;
+  text-align: start;
 }
 
 td {
@@ -36,4 +36,4 @@ tr,
 td,
 th {
   vertical-align: middle;
-}
\ No newline at end of file
+}
diff --git a/_sass/minimal-mistakes/_utilities.scss b/_sass/minimal-mistakes/_utilities.scss
index 6831dfd3..4de6c241 100644
--- a/_sass/minimal-mistakes/_utilities.scss
+++ b/_sass/minimal-mistakes/_utilities.scss
@@ -83,20 +83,11 @@ body:hover .visually-hidden button {
    Type
    ========================================================================== */
 
-.text-left {
-  text-align: left;
-}
-
-.text-center {
-  text-align: center;
-}
-
-.text-right {
-  text-align: right;
-}
-
-.text-justify {
-  text-align: justify;
+$text-alignments: left, right, start, end, center, justify;
+@each $alignment in $text-alignments {
+  .text-#{$alignment} {
+    text-align: $alignment;
+  }
 }
 
 .text-nowrap {
@@ -108,7 +99,7 @@ body:hover .visually-hidden button {
    ========================================================================== */
 
 .task-list {
-  padding:0;
+  padding: 0;
 
   li {
     list-style-type: none;
@@ -135,8 +126,7 @@ body:hover .visually-hidden button {
 }
 
 .wrapper {
-  margin-left: auto;
-  margin-right: auto;
+  margin-inline: auto;
   width: 100%;
 }
 
@@ -148,8 +138,7 @@ body:hover .visually-hidden button {
 
 .align-left {
   display: block;
-  margin-left: auto;
-  margin-right: auto;
+  margin-inline: auto;
 
   @include breakpoint($small) {
     float: left;
@@ -161,8 +150,7 @@ body:hover .visually-hidden button {
 
 .align-right {
   display: block;
-  margin-left: auto;
-  margin-right: auto;
+  margin-inline: auto;
 
   @include breakpoint($small) {
     float: right;
@@ -174,8 +162,7 @@ body:hover .visually-hidden button {
 
 .align-center {
   display: block;
-  margin-left: auto;
-  margin-right: auto;
+  margin-inline: auto;
 }
 
 /* file page content container */
@@ -533,7 +520,7 @@ pre {
     display: block;
     position: absolute;
     top: 0.6em;
-    right: 0.5em;
+    inset-inline-end: 0.5em;
     width: 1.8em;
     height: 1.5em;
     z-index: 1;
@@ -548,17 +535,14 @@ pre {
     &::before {
       content: '';
       position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
+      inset: 0;
       z-index: 2;
     }
 
     i {
       position: absolute;
       top: 0.25em;
-      right: 0.25em;
+      inset-inline-end: 0.25em;
       &.copied {
         opacity: 0;
       }
diff --git a/a.scss b/a.scss
new file mode 100644
index 00000000..830f4965
--- /dev/null
+++ b/a.scss
@@ -0,0 +1,8 @@
+label,
+input,
+button,
+select,
+textarea {
+  vertical-align: baseline;
+  *vertical-align: middle;
+}