replace physical directions with logical properties

assets/sass/_base.scss

@@ -3,13 +3,13 @@
 // ====
 h1 {
   font-size: 185%;
-  margin-bottom: 1rem;
+  margin-block-end: 1rem;
   line-height: 1.2;
 }
 
 h2 {
   font-size: 150%;
-  margin-bottom: 0.5rem;
+  margin-block-end: 0.5rem;
   line-height: 1.2;
 
   small {
@@ -21,27 +21,27 @@ h2 {
 
 h3 {
   font-size: 125%;
-  margin-bottom: 0.5rem;
+  margin-block-end: 0.5rem;
 }
 
 h4 {
   font-size: 105%;
-  margin-bottom: 0.25rem;
+  margin-block-end: 0.25rem;
 }
 
 p {
-  margin-bottom: 1rem;
+  margin-block-end: 1rem;
 }
 
 a {
   text-decoration: none;
   color: color("japanese-laurel");
   transition: all 0.15s linear;
-  border-bottom: 1px dashed color("japanese-laurel");
+  border-block-end: 1px dashed color("japanese-laurel");
 
   &:hover {
     color: darken(color("japanese-laurel"), 5%);
-    border-bottom: 1px solid darken(color("japanese-laurel"), 5%);
+    border-block-end: 1px solid darken(color("japanese-laurel"), 5%);
   }
 }
 
@@ -51,24 +51,24 @@ small {
 
 ul {
   list-style: disc;
-  margin-left: 1em;
+  margin-inline-start: 1em;
 
   ul {
     list-style: square;
   }
 }
 
 li {
-  margin-bottom: 1em;
+  margin-block-end: 1em;
 }
 
 ol {
   counter-reset: list;
-  margin-left: 2em;
+  margin-inline-start: 2em;
 
   li {
     list-style: none;
-    margin-bottom: 1em;
+    margin-block-end: 1em;
     position: relative;
 
     &::before {
@@ -118,15 +118,15 @@ pre code {
 
 blockquote {
   background: url("/assets/images/bg-quotes.jpg");
-  border-left: 0.5em solid color("royal-blue");
+  border-inline-start: 0.5em solid color("royal-blue");
   padding: 1em;
-  margin-bottom: 1em;
+  margin-block-end: 1em;
   font-style: italic;
 
   &::before {
     font-size: 2.5em;
     line-height: 0.1em;
-    margin-right: 0.1em;
+    margin-inline-end: 0.1em;
     vertical-align: -0.25em;
     color: color("royal-blue");
     content: "\201C";
@@ -152,7 +152,7 @@ blockquote {
   }
 
   p:nth-child(2) {
-    margin-top: 1em;
+    margin-block-start: 1em;
   }
 
   p ~ p {
@@ -161,14 +161,14 @@ blockquote {
 
   a {
     color: inherit;
-    border-bottom: 1px dashed color(mine-shaft);
+    border-block-end: 1px dashed color(mine-shaft);
   }
 }
 
 figcaption {
   text-align: center;
   font-style: italic;
-  margin-bottom: 0.25em;
+  margin-block-end: 0.25em;
 }
 
 figcaption:lang(zh) {
@@ -191,5 +191,5 @@ kbd {
 iframe,
 picture img,
 video {
-  margin-bottom: 1em;
+  margin-block-end: 1em;
 }

assets/sass/_component-footer.scss

@@ -1,27 +1,27 @@
 // Footer styles
 .site-footer {
   font-family: $display-font;
-  color: color('white');
+  color: color("white");
 
   a {
-    color: color('apple');
+    color: color("apple");
   }
 
   a:hover {
-    color: lighten(color('apple'), 20%);
+    color: lighten(color("apple"), 20%);
   }
 
   svg path {
-    fill: color('apple');
+    fill: color("apple");
   }
 }
 
 .site-footer__wrapper--main {
-  background: url('/assets/images/bg-footer-2.jpg');
+  background: url("/assets/images/bg-footer-2.jpg");
 }
 
 .site-footer__wrapper--secondary {
-  background: url('/assets/images/bg-footer.jpg');
+  background: url("/assets/images/bg-footer.jpg");
 }
 
 .footer-main {
@@ -70,7 +70,7 @@
     top: -6.5em;
     left: 50%;
     transform: translateX(-50%);
-    background-color: color('tuna');
+    background-color: color("tuna");
     padding: 0.25em 0.5em;
     border-radius: 4px;
   }
@@ -85,7 +85,7 @@
   margin: 0 1em 1em;
 
   @include mappy-bp(large) {
-    margin-top: 1em;
+    margin-block-start: 1em;
   }
 }
 
@@ -95,7 +95,7 @@
   min-width: 200px;
   width: 200px;
   margin: 1em auto;
-  background-color: color('sugarcane');
+  background-color: color("sugarcane");
 
   @include mappy-bp(large) {
     flex: 1 0 0;
@@ -118,12 +118,12 @@
   padding: 0.25em;
 
   span:first-child {
-    margin-right: 0.5em;
+    margin-inline-end: 0.5em;
   }
 
   &:hover {
     svg path {
-      fill: lighten(color('apple'), 20%);
+      fill: lighten(color("apple"), 20%);
     }
   }
 }
@@ -152,12 +152,11 @@
     line-height: 2;
 
     @include mappy-bp(max large) {
-      margin-bottom: 1em;
+      margin-block-end: 1em;
     }
 
     @include mappy-bp(large) {
       flex: 5 0 71.4285%;
-
     }
   }
 }

assets/sass/_component-header.scss

@@ -1,6 +1,6 @@
 // Header styles
 .site-header {
-  background: url('/assets/images/bg-header.jpg');
+  background: url("/assets/images/bg-header.jpg");
   flex: 1 0 auto; // IE11 fix
 }
 
@@ -27,7 +27,7 @@
 
 .site-branding__image {
   @include image-replacement;
-  background: url('/assets/images/retropc-static.png');
+  background: url("/assets/images/retropc-static.png");
   background-size: cover;
   display: block;
   height: 90px;
@@ -40,14 +40,14 @@
   }
 
   &::before {
-    content: url('/assets/images/retropc-dynamic.gif');
+    content: url("/assets/images/retropc-dynamic.gif");
     height: 0;
     visibility: hidden;
     width: 0;
   }
 
   &:hover {
-    background: url('/assets/images/retropc-dynamic.gif');
+    background: url("/assets/images/retropc-dynamic.gif");
     background-size: cover;
   }
 }
@@ -58,19 +58,19 @@
 }
 
 .site-branding__wrapper {
-  margin-left: 1em;
+  margin-inline-start: 1em;
 }
 
 .site-branding__title {
-  margin-bottom: 0.25rem;
+  margin-block-end: 0.25rem;
 
-   a {
+  a {
     font-size: 85%;
     font-family: $display-font;
-    color: color('english-walnut');
+    color: color("english-walnut");
 
     &:hover {
-      color: color('english-walnut');
+      color: color("english-walnut");
     }
   }
 }
@@ -83,22 +83,22 @@
 
 .site-nav {
   display: flex;
-  margin-top: 1em;
+  margin-block-start: 1em;
   width: 100%;
   font-family: $display-font;
   font-size: 90%;
 
   @include mappy-bp(x-large) {
-    margin-top: 0;
+    margin-block-start: 0;
   }
 
   a {
     flex: auto;
     text-align: center;
-    color: color('english-walnut');
+    color: color("english-walnut");
   }
 }
 
 .site-nav__link:hover {
-  color: color('english-walnut');
+  color: color("english-walnut");
 }