Add Arabic table support and ordered list is now arabic numbers

_sass/yat/_layout.scss

@@ -13,10 +13,12 @@ html {
       height: 0;
       margin-top: 12px;
       background-color: transparent;
-      transition: 0.1s height,background-color,box-shadow;
+      transition: 0.1s height, background-color, box-shadow;
 
       &.site-header {
-        .site-brand-inner, .page-link {
+
+        .site-brand-inner,
+        .page-link {
           color: #fff;
           transition: 0.1s color;
         }
@@ -27,7 +29,7 @@ html {
           }
 
           .menu-icon {
-            > svg {
+            >svg {
               fill: $white-color;
             }
           }
@@ -70,7 +72,7 @@ html {
   @include flex-sticky(0);
   z-index: 1000;
 
-  & > .wrapper {
+  &>.wrapper {
     margin: 0 60px;
     padding: 0;
     max-width: 100%;
@@ -101,7 +103,8 @@ html {
     letter-spacing: -1px;
     transition: 0.1s filter color;
 
-    &, &:visited {
+    &,
+    &:visited {
       color: $header-text-color;
     }
 
@@ -136,6 +139,7 @@ html {
     // Gaps between nav items, but not on the last one
     &:not(:last-child) {
       margin-right: 15px;
+
       &:hover {
         text-decoration: underline;
       }
@@ -158,20 +162,20 @@ html {
       float: right;
       text-align: center;
 
-      > svg {
+      >svg {
         fill: rgba($header-text-color, 80%);
         transition: 0.1s fill;
       }
     }
 
-    input ~ .trigger {
+    input~.trigger {
       clear: both;
       display: none;
       border-radius: 3px;
       box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, .06);
     }
 
-    input:checked ~ .trigger {
+    input:checked~.trigger {
       display: block;
       background: $header-background-color;
     }
@@ -247,8 +251,10 @@ html {
  * Page content
  */
 .page-content {
-  @extend %flex-1; /* <-- Keep footer on the bottom */
-  -ms-flex: none; /* <-- Fix IE footer issue */
+  @extend %flex-1;
+  /* <-- Keep footer on the bottom */
+  -ms-flex: none;
+  /* <-- Fix IE footer issue */
   padding: $spacing-unit * 2 0;
   padding-top: 72px;
 }
@@ -269,7 +275,7 @@ html {
     margin-left: 0;
     list-style: none;
 
-    > li {
+    >li {
       margin-bottom: $spacing-unit * 1.5;
       padding-bottom: 30px;
 
@@ -345,7 +351,7 @@ html {
   .paginator {
     text-align: center;
 
-    & > .previous:before {
+    &>.previous:before {
       content: ' ';
       border: solid #787878;
       border-width: 0 2px 2px 0;
@@ -356,7 +362,7 @@ html {
       -webkit-transform: rotate(135deg);
     }
 
-    & > .next:after {
+    &>.next:after {
       content: ' ';
       border: solid #787878;
       border-width: 0 2px 2px 0;
@@ -367,7 +373,8 @@ html {
       -webkit-transform: rotate(-45deg);
     }
 
-    .previous span, .next span {
+    .previous span,
+    .next span {
       color: #b3b3b3;
     }
 
@@ -432,17 +439,39 @@ html {
       }
     }
 
-    img, svg, iframe {
+    th {
+      text-align: center;
+      direction: rtl;
+    }
+
+    td {
+      text-align: right;
+      direction: rtl;
+    }
+
+    ol {
+      list-style: arabic-indic;
+    }
+
+
+    img,
+    svg,
+    iframe {
       margin-left: auto;
       margin-right: auto;
       display: block;
     }
 
-    h2, h3, h4, h5, h6 {
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
       margin: 60px 0 19px;
     }
 
-    p, hr {
+    p,
+    hr {
       margin-bottom: 24px;
     }
 
@@ -462,6 +491,7 @@ html {
 
     ul {
       margin-left: 15px;
+
       .post-link {
         @include relative-font-size(1.075);
       }
@@ -555,6 +585,7 @@ html {
     &:not(:first-child) {
       margin-top: 18px;
     }
+
     margin-bottom: 8px;
   }
 
@@ -581,17 +612,17 @@ html {
     height: 100%;
     overflow: hidden;
 
-    & > *:first-child {
+    &>*:first-child {
       @include center-image;
       transition: 0.1s all ease-in-out;
     }
 
-    & > video {
+    &>video {
       width: 100vw;
       object-fit: cover;
     }
 
-    & > img.img-placeholder {
+    &>img.img-placeholder {
       display: none;
     }
   }
@@ -607,7 +638,7 @@ html {
     padding: 10px 5px;
     text-shadow: 1px 1px 2px #33333355;
 
-    & > *:first-child {
+    &>*:first-child {
       margin: 0;
 
       > :nth-child(1) {
@@ -687,7 +718,7 @@ html {
  * Layout and sidebar
  */
 .framework {
-    @extend %flex;
+  @extend %flex;
 
   .main {
     @extend %flex-1;
@@ -778,4 +809,4 @@ html {
   margin: 0 10px;
   background-color: #656565;
   vertical-align: baseline;
-}
+}