Add RTL Support (#4886)

Signed-off-by: Hamed Faramarzi <hamed.faramarzi@gmail.com>
Co-authored-by: Hamed Faramarzi <hamed.faramarzi@gmail.com>
Co-authored-by: iBug <git@ibugone.com>

_sass/minimal-mistakes/_archive.scss

@@ -10,11 +10,21 @@
     float: right;
     width: calc(100% - #{$right-sidebar-width-narrow});
     padding-right: $right-sidebar-width-narrow;
+
+    [dir=rtl] & {
+      padding-right: 0;
+      padding-left: $right-sidebar-width-narrow;
+    }
   }
 
   @include breakpoint($x-large) {
     width: calc(100% - #{$right-sidebar-width});
     padding-right: $right-sidebar-width;
+
+    [dir=rtl] & {
+      padding-right: 0;
+      padding-left: $right-sidebar-width;
+    }
   }
 }
 

_sass/minimal-mistakes/_base.scss

@@ -113,6 +113,12 @@ blockquote {
   font-style: italic;
   border-left: 0.25em solid $primary-color;
 
+  [dir=rtl] & {
+    border-left: none;
+    border-right: .25em solid $primary-color;
+    margin: 2em 0 2em 1em;
+  }
+
   cite {
     font-style: italic;
 

_sass/minimal-mistakes/_navigation.scss

@@ -194,10 +194,20 @@
     &.site-logo {
       margin-left: 0;
       margin-right: 0.5rem;
+
+      [dir=rtl] & {
+        margin-right: 0;
+        margin-left: 0.5rem;
+      }
     }
 
     &.site-title {
       margin-left: 0;
+
+      [dir=rtl] & {
+        margin-left: 1rem;
+        margin-right: 0;
+      }
     }
   }
 
@@ -553,21 +563,46 @@
   li ul > li a {
     padding-left: 1.25rem;
     font-weight: normal;
+
+    [dir=rtl] & {
+      padding-left: 0;
+      padding-right: 1.25rem;
+    }
   }
 
   li ul li ul > li a {
     padding-left: 1.75rem;
+
+    [dir=rtl] & {
+      padding-left: 0;
+      padding-right: 1.75rem;
+    }
   }
 
   li ul li ul li ul > li a {
     padding-left: 2.25rem;
+
+    [dir=rtl] & {
+      padding-left: 0;
+      padding-right: 2.25rem;
+    }
   }
 
   li ul li ul li ul li ul > li a {
     padding-left: 2.75rem;
+
+    [dir=rtl] & {
+      padding-left: 0;
+      padding-right: 2.75rem;
+    }
   }
 
   li ul li ul li ul li ul li ul > li a {
-    padding-left: 3.25rem
+    padding-left: 3.25rem;
+
+    [dir=rtl] & {
+      padding-left: 0;
+      padding-right: 3.25rem;
+    }
   }
 }

_sass/minimal-mistakes/_page.scss

@@ -40,11 +40,21 @@ body {
     float: right;
     width: calc(100% - #{$right-sidebar-width-narrow});
     padding-right: $right-sidebar-width-narrow;
+
+    [dir=rtl] & {
+      padding-right: 0;
+      padding-left: $right-sidebar-width-narrow;
+    }
   }
 
   @include breakpoint($x-large) {
     width: calc(100% - #{$right-sidebar-width});
     padding-right: $right-sidebar-width;
+
+    [dir=rtl] & {
+      padding-right: 0;
+      padding-left: $right-sidebar-width;
+    }
   }
 
   .page__inner-wrap {
@@ -103,6 +113,11 @@ body {
 			-moz-transition: opacity 0.2s ease-in-out 0.1s;
 			-o-transition: opacity 0.2s ease-in-out 0.1s;
 			transition: opacity 0.2s ease-in-out 0.1s;
+
+			[dir=rtl] & {
+			  left: 0;
+			  right: .5em;
+			}
 		}
 
 		&:hover .header-link {
@@ -335,6 +350,11 @@ body {
 
   strong {
     margin-right: 10px;
+
+    [dir=rtl] & {
+      margin-right: 0;
+      margin-left: 10px;
+    }
   }
 }
 
@@ -347,6 +367,11 @@ body {
   border: 1px solid mix(#000, $border-color, 25%);
   border-radius: $border-radius;
 
+  [dir=rtl] & {
+    margin-right: 0;
+    margin-left: 5px;
+  }
+
   &:hover {
     text-decoration: none;
     color: $link-color-hover;
@@ -530,9 +555,17 @@ body {
   padding-top: 1em;
   border-top: 1px solid $border-color;
 
+  [dir=rtl] & {
+    float: right;
+  }
+
   @include breakpoint($large) {
     float: right;
     width: calc(100% - #{$right-sidebar-width-narrow});
+
+    [dir=rtl] & {
+      float: left;
+    }
   }
 
   @include breakpoint($x-large) {

_sass/minimal-mistakes/_sidebar.scss

@@ -23,6 +23,10 @@
     -webkit-transition: opacity 0.2s ease-in-out;
     transition: opacity 0.2s ease-in-out;
 
+    [dir=rtl] & {
+      float: right;
+    }
+
     &:hover {
       opacity: 1;
     }
@@ -83,6 +87,15 @@
     padding-left: 1em;
     z-index: 10;
 
+    [dir=rtl] & {
+      right: auto;
+      left: 0;
+      margin-right: 0;
+      margin-left: -1 * $right-sidebar-width-narrow;
+      padding-left: 0;
+      padding-right: 1em;
+    }
+
     &.sticky {
       @include clearfix();
       position: -webkit-sticky;
@@ -90,6 +103,10 @@
       top: 2em;
       float: right;
 
+      [dir=rtl] & {
+        float: left;
+      }
+
       .toc {
         .toc__menu {
           overflow-y: auto;
@@ -102,6 +119,11 @@
   @include breakpoint($x-large) {
     width: $right-sidebar-width;
     margin-right: -1 * $right-sidebar-width;
+
+    [dir=rtl] & {
+      margin-right: 0;
+      margin-left: -1 * $right-sidebar-width;
+    }
   }
 }
 
@@ -203,6 +225,11 @@
   .author__urls {
     span.label {
       padding-left: 5px;
+
+      [dir=rtl] & {
+        padding-left: 0;
+        padding-right: 5px;
+      }
     }
   }
 
@@ -318,6 +345,11 @@
     font-size: $type-size-5;
     text-decoration: none;
 
+    [dir=rtl] & {
+      padding-right: 0;
+      padding-left: 5px;
+    }
+
     &:hover {
       text-decoration: underline;
     }

_sass/minimal-mistakes/_syntax.scss

@@ -13,6 +13,10 @@ figure.highlight {
   line-height: 1.8;
   border-radius: $border-radius;
 
+  [dir=rtl] & {
+    direction: ltr;
+  }
+
   > pre,
   pre.highlight {
     margin: 0;

_sass/minimal-mistakes/_utilities.scss

@@ -117,6 +117,11 @@ body:hover .visually-hidden button {
   .task-list-item-checkbox {
     margin-right: 0.5em;
     opacity: 1;
+
+    [dir=rtl] & {
+      margin-left: .5em;
+      margin-right: 0;
+    }
   }
 }
 
@@ -183,6 +188,11 @@ body:hover .visually-hidden button {
 .full {
   @include breakpoint($large) {
     margin-right: -1 * span(2.5 of 12) !important;
+
+    [dir=rtl] & {
+      margin-right: 0 !important;
+      margin-left: -1 * span(2.5 of 12) !important;
+    }
   }
 }