fix(direction): fix style of rtl direction

Author: davidazad1

_includes/topbar.html

@@ -1,6 +1,6 @@
 <!-- The Top Bar -->
 
-<header dir={{ site.direction | default: ltr }} id="topbar-wrapper" aria-label="Top Bar">
+<header id="topbar-wrapper" aria-label="Top Bar">
   <div
     id="topbar"
     class="d-flex align-items-center justify-content-between px-lg-3 h-100"

_layouts/archives.html

@@ -23,10 +23,15 @@
 
     <li>
       {% assign ts = post.date | date: '%s' %}
-      <span class="date day" data-ts="{{ ts }}" data-df="DD">{{ post.date | date: '%d' }}</span>
+      {% if site.direction != "rtl" %}
+        <span class="date day" data-ts="{{ ts }}" data-df="DD">{{ post.date | date: '%d' }}</span>
+      {% endif %}
       <span class="date month small text-muted ms-1" data-ts="{{ ts }}" data-df="{{ df_dayjs_m }}">
         {{ post.date | date: df_strftime_m }}
       </span>
+      {% if site.direction == "rtl" %}
+        <span class="date day" data-ts="{{ ts }}" data-df="DD">{{ post.date | date: '%d' }}</span>
+      {% endif %}
       <a href="{{ post.url | relative_url }}">{{ post.title }}</a>
     </li>
 

_layouts/home.html

@@ -85,12 +85,20 @@ <h1 class="card-title my-2 mt-md-0">{{ post.title }}</h1>
             <div class="post-meta flex-grow-1 d-flex align-items-end">
               <div class="me-auto">
                 <!-- posted date -->
-                <i class="far fa-calendar fa-fw me-1"></i>
+                {% if site.direction == "rtl" %}
+                  <i class="far fa-folder-open fa-fw me-1"></i>
+                {% else %}
+                  <i class="far fa-calendar fa-fw me-1"></i>
+                {% endif %}
                 {% include datetime.html date=post.date lang=lang %}
 
                 <!-- categories -->
                 {% if post.categories.size > 0 %}
-                  <i class="far fa-folder-open fa-fw me-1"></i>
+                  {% if site.direction == "rtl" %}
+                    <i class="far fa-calendar fa-fw me-1"></i>
+                  {% else %}
+                    <i class="far fa-folder-open fa-fw me-1"></i>
+                  {% endif %}
                   <span class="categories">
                     {% for category in post.categories %}
                       {{ category }}

_sass/base/_syntax.scss

@@ -111,6 +111,7 @@ div[class^='language-'] {
   @extend %code-snippet-bg;
 
   box-shadow: var(--language-border-color) 0 0 0 1px;
+  direction: ltr;
 
   .content > & {
     @include mx.ml-mr(-1rem);

assets/css/jekyll-theme-chirpy.scss

@@ -7,4 +7,78 @@
 {%- endif -%}
 ';
 
+{% if site.direction == "rtl" %}
+  .nav {
+    padding: 0px;
+  }
+
+  #sidebar .sidebar-bottom a:not(:last-child) {
+    margin-left: .8rem;
+    margin-right: 0px;
+  }
+
+  .me-auto {
+    margin-left: auto !important;
+    margin-right: 0px !important;
+  }
+
+  .fa, .fa-brands, .fa-regular, .fa-solid, .fab, .far, .fas {
+    display: inline;
+  }
+
+  .me-1 {
+    margin-left: .25rem !important;
+  }
+
+  @media (min-width: 768px) {
+    #post-list .card .card-body .post-meta i:not(:first-child) {
+        margin-right: 1.75rem;
+    }
+  }
+
+  #archives ul li::before, #archives .year:first-child::before, #archives .year::before {
+    float: right;
+  }
+
+  #archives .year::before {
+    left: 0px;
+    right: 79px;
+  }
+
+  #archives .year::after {
+    left: 0px;
+    right: 21.5px;
+  }
+
+  #archives ul li::before {
+    left: 0px;
+    right: 77px;
+  }
+
+  .list-unstyled {
+    padding-right: 0;
+  }
+
+  #archives a::before {
+    float: right;
+    right: 71px;
+    left: 0;
+  }
+
+  #archives a {
+    margin-left: 0;
+    margin-right: 2.5rem;
+  }
+
+  #archives .date.month {
+    direction: ltr;
+  }
+
+{% else %}
+  body {
+    direction: ltr;
+    text-align: left;
+  }
+{% endif %}
+
 /* append your custom style below */