feat: add RTL Support and update demo site to Show Arabic/RTL content (#519)

* add LanguageDirection variable

* add .direction-rtl and .direction-ltr clases

* margin -right > margin-inline-end

* keep Codeblocks LTR

* switch to logical properties

* left -> inset-inline-start

* Add Arabic/RTL placeholder text

* Add arabic language

* remove space

* use Html Dir instead of class

* Move codeblock code to layout/article.css and fix 4 spaces codeblocks

* remove unused clases

assets/scss/partials/base.scss

@@ -35,4 +35,4 @@ body {
 ::-webkit-scrollbar-track {
     background-color: transparent;
 }
-/**/
+/**/

assets/scss/partials/layout/article.scss

@@ -252,9 +252,9 @@
     h4,
     h5,
     h6 {
-        margin-left: calc((var(--card-padding)) * -1);
-        padding-left: calc(var(--card-padding) - var(--heading-border-size));
-        border-left: var(--heading-border-size) solid var(--accent-color);
+        margin-inline-start: calc((var(--card-padding)) * -1);
+        padding-inline-start: calc(var(--card-padding) - var(--heading-border-size));
+        border-inline-start: var(--heading-border-size) solid var(--accent-color);
     }
 
     figure {
@@ -269,7 +269,7 @@
     blockquote {
         position: relative;
         margin: 1.5em 0;
-        border-left: var(--blockquote-border-size) solid var(--card-separator-color);
+        border-inline-start: var(--blockquote-border-size) solid var(--card-separator-color);
         padding: 15px calc(var(--card-padding) - var(--blockquote-border-size));
         background-color: var(--blockquote-background-color);
     }
@@ -313,7 +313,10 @@
         line-height: 1.428571429;
         word-break: break-all;
         padding: var(--card-padding);
-
+        //  keep Codeblocks LTR
+        [dir="rtl"] & {
+            direction: ltr;
+        }
         code {
             color: unset;
             border: none;
@@ -332,7 +335,10 @@
                 opacity: 1;
             }
         }
-
+        // keep Codeblocks LTR
+        [dir="rtl"] & {
+            direction: ltr;
+        }
         pre {
             margin: initial;
             padding: 0;

assets/scss/partials/layout/search.scss

@@ -24,7 +24,7 @@
     label {
         position: absolute;
         top: 15px;
-        left: 20px;
+        inset-inline-start: 20px;
         font-size: 1.4rem;
         color: var(--card-text-color-tertiary);
     }
@@ -51,7 +51,7 @@
 
     button {
         position: absolute;
-        right: 0;
+        inset-inline-end: 0;
         top: 0;
         height: 100%;
         width: var(--button-size);
@@ -78,4 +78,5 @@
             height: 20px;
         }
     }
+
 }