Merge pull request #2393 from ZhenShuo2021/fix/rtl-layout-issues

🐛 Fix(rtl): multiple layout issues

assets/css/compiled/main.css

@@ -494,6 +494,9 @@ body.zen-mode-enable {
   .-start-6 {
     inset-inline-start: calc(var(--spacing) * -6);
   }
+  .start-\[calc\(max\(-50vw\,-800px\)\+50\%\)\] {
+    inset-inline-start: calc(max(-50vw, -800px) + 50%);
+  }
   .top-0 {
     top: calc(var(--spacing) * 0);
   }
@@ -521,9 +524,6 @@ body.zen-mode-enable {
   .left-1\/2 {
     left: calc(1/2 * 100%);
   }
-  .left-\[calc\(max\(-50vw\,-800px\)\+50\%\)\] {
-    left: calc(max(-50vw, -800px) + 50%);
-  }
   .-z-10 {
     z-index: calc(10 * -1);
   }
@@ -635,6 +635,12 @@ body.zen-mode-enable {
   .ms-2 {
     margin-inline-start: calc(var(--spacing) * 2);
   }
+  .ms-6 {
+    margin-inline-start: calc(var(--spacing) * 6);
+  }
+  .-me-48 {
+    margin-inline-end: calc(var(--spacing) * -48);
+  }
   .me-1 {
     margin-inline-end: calc(var(--spacing) * 1);
   }
@@ -1141,9 +1147,6 @@ body.zen-mode-enable {
   .mt-\[0\.5rem\] {
     margin-top: 0.5rem;
   }
-  .-mr-48 {
-    margin-right: calc(var(--spacing) * -48);
-  }
   .-mr-\[100\%\] {
     margin-right: calc(100% * -1);
   }
@@ -1210,9 +1213,6 @@ body.zen-mode-enable {
   .mb-\[2px\] {
     margin-bottom: 2px;
   }
-  .-ml-12 {
-    margin-left: calc(var(--spacing) * -12);
-  }
   .ml-0 {
     margin-left: calc(var(--spacing) * 0);
   }
@@ -1222,9 +1222,6 @@ body.zen-mode-enable {
   .ml-3 {
     margin-left: calc(var(--spacing) * 3);
   }
-  .ml-6 {
-    margin-left: calc(var(--spacing) * 6);
-  }
   .ml-auto {
     margin-left: auto;
   }
@@ -1779,6 +1776,10 @@ body.zen-mode-enable {
     border-inline-start-style: var(--tw-border-style);
     border-inline-start-width: 1px;
   }
+  .border-s-2 {
+    border-inline-start-style: var(--tw-border-style);
+    border-inline-start-width: 2px;
+  }
   .border-s-\[0\.125rem\] {
     border-inline-start-style: var(--tw-border-style);
     border-inline-start-width: 0.125rem;
@@ -1795,10 +1796,6 @@ body.zen-mode-enable {
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 2px;
   }
-  .border-l-2 {
-    border-left-style: var(--tw-border-style);
-    border-left-width: 2px;
-  }
   .border-dotted {
     --tw-border-style: dotted;
     border-style: dotted;
@@ -2053,6 +2050,9 @@ body.zen-mode-enable {
   .py-\[1px\] {
     padding-block: 1px;
   }
+  .ps-2 {
+    padding-inline-start: calc(var(--spacing) * 2);
+  }
   .ps-5 {
     padding-inline-start: calc(var(--spacing) * 5);
   }
@@ -2119,9 +2119,6 @@ body.zen-mode-enable {
   .pl-0 {
     padding-left: calc(var(--spacing) * 0);
   }
-  .pl-2 {
-    padding-left: calc(var(--spacing) * 2);
-  }
   .pl-4 {
     padding-left: calc(var(--spacing) * 4);
   }
@@ -2140,6 +2137,9 @@ body.zen-mode-enable {
   .text-right {
     text-align: right;
   }
+  .text-start {
+    text-align: start;
+  }
   .-indent-\[999px\] {
     text-indent: calc(999px * -1);
   }
@@ -2971,16 +2971,16 @@ body.zen-mode-enable {
       }
     }
   }
+  .md\:-me-16 {
+    @media (width >= 853px) {
+      margin-inline-end: calc(var(--spacing) * -16);
+    }
+  }
   .md\:mt-0 {
     @media (width >= 853px) {
       margin-top: calc(var(--spacing) * 0);
     }
   }
-  .md\:-mr-16 {
-    @media (width >= 853px) {
-      margin-right: calc(var(--spacing) * -16);
-    }
-  }
   .md\:mr-7 {
     @media (width >= 853px) {
       margin-right: calc(var(--spacing) * 7);
@@ -3071,11 +3071,6 @@ body.zen-mode-enable {
       top: 140px;
     }
   }
-  .lg\:left-0 {
-    @media (width >= 1024px) {
-      left: calc(var(--spacing) * 0);
-    }
-  }
   .lg\:order-last {
     @media (width >= 1024px) {
       order: 9999;
@@ -3236,6 +3231,11 @@ body.zen-mode-enable {
       margin-right: calc(var(--spacing) * 4);
     }
   }
+  .ltr\:-ml-12 {
+    &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) {
+      margin-left: calc(var(--spacing) * -12);
+    }
+  }
   .ltr\:block {
     &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) {
       display: block;
@@ -3261,6 +3261,11 @@ body.zen-mode-enable {
       left: calc(var(--spacing) * 0);
     }
   }
+  .rtl\:-mr-\[79px\] {
+    &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+      margin-right: calc(79px * -1);
+    }
+  }
   .rtl\:ml-4 {
     &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
       margin-left: calc(var(--spacing) * 4);

layouts/_default/list.html

@@ -88,7 +88,7 @@
       {{ if $groupByYear }}
         {{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
           {{ if $cardViewScreenWidth }}
-            <div class="relative w-screen max-w-[1600px] px-[30px] left-[calc(max(-50vw,-800px)+50%)]">
+            <div class="relative w-screen max-w-[1600px] px-[30px] start-[calc(max(-50vw,-800px)+50%)]">
               <h2 class="mt-12 mb-3 text-2xl font-bold text-neutral-700 first:mt-8 dark:text-neutral-300">
                 {{ .Key }}
               </h2>
@@ -113,7 +113,7 @@
       {{/* else: not groupByYear */}}
       {{ else }}
         {{ if $cardViewScreenWidth }}
-          <div class="relative w-screen max-w-[1600px] px-[30px] left-[calc(max(-50vw,-800px)+50%)]">
+          <div class="relative w-screen max-w-[1600px] px-[30px] start-[calc(max(-50vw,-800px)+50%)]">
             <section class="w-full grid gap-4 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
               {{ if not $orderByWeight }}
                 {{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}

layouts/_default/term.html

@@ -86,7 +86,7 @@
       {{ if $groupByYear }}
 
         {{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
-          <div class="relative w-screen max-w-[1600px] px-[30px] left-[calc(max(-50vw,-800px)+50%)]">
+          <div class="relative w-screen max-w-[1600px] px-[30px] start-[calc(max(-50vw,-800px)+50%)]">
             <h2 class="mt-12 mb-3 text-2xl font-bold text-neutral-700 first:mt-8 dark:text-neutral-300">
               {{ .Key }}
             </h2>
@@ -100,7 +100,7 @@
 
       {{ else }}
 
-        <div class="relative w-screen max-w-[1600px] px-[30px] left-[calc(max(-50vw,-800px)+50%)]">
+        <div class="relative w-screen max-w-[1600px] px-[30px] start-[calc(max(-50vw,-800px)+50%)]">
           <section class="w-full grid gap-4 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
             {{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
               {{ range .Pages }}

layouts/partials/article-link/_shortcode.html

@@ -71,7 +71,7 @@
 
 
   <div class="{{ $articleInnerClasses }}">
-    <div class="items-center text-left text-xl font-semibold">
+    <div class="items-center text-start text-xl font-semibold">
       {{ with $target.Params.externalUrl }}
         <div>
           <div

layouts/partials/article-link/simple.html

@@ -68,7 +68,7 @@
 
 
   <div class="{{ $articleInnerClasses }}">
-    <div class="items-center text-left text-xl font-semibold">
+    <div class="items-center text-start text-xl font-semibold">
       {{ with .Params.externalUrl }}
         <div
           class="group-hover-card-title decoration-primary-500 dark:text-neutral text-xl font-bold text-neutral-800 group-hover:underline group-hover:underline-offset-2">

layouts/partials/article-meta/basic.html

@@ -71,7 +71,7 @@
 
     {{/* Output draft label */}}
     {{ if and (eq $scope "single") (and .Draft .Site.Params.article.showDraftLabel) }}
-      <span class="pl-2">{{ partial "badge.html" (i18n "article.draft" | emojify) }}</span>
+      <span class="ps-2">{{ partial "badge.html" (i18n "article.draft" | emojify) }}</span>
     {{ end }}
   </div>
 
@@ -81,7 +81,9 @@
         {{ if (eq $taxonomy "authors") }}
           {{ if (gt (len ($context.GetTerms $taxonomy)) 0) }}
             {{ range $i, $a := $context.GetTerms $taxonomy }}
-              {{ if not (eq $i 0) }},&nbsp;{{ end }}
+              {{ if not (eq $i 0) }}
+                ,&nbsp;
+              {{ end }}
               <a href="{{ $a.RelPermalink }}" class="relative">{{ $a.LinkTitle }}</a>
             {{ end }}
           {{ end }}
@@ -97,9 +99,9 @@
         {{ if and (not (eq $taxonomy "authors")) (not (eq $taxonomy "series")) }}
           {{ if (gt (len ($context.GetTerms $taxonomy)) 0) }}
             {{ range $context.GetTerms $taxonomy }}
-              <a class="relative mt-[0.5rem] mr-2" href="{{ .RelPermalink }}"
-                >{{ partial "badge.html" .LinkTitle }}</a
-              >
+              <a class="relative mt-[0.5rem] me-2" href="{{ .RelPermalink }}">
+                {{ partial "badge.html" .LinkTitle }}
+              </a>
             {{ end }}
           {{ end }}
         {{ end }}
@@ -111,9 +113,9 @@
   {{ if .Params.showCategoryOnly | default (.Site.Params.article.showCategoryOnly | default false) }}
     <div class="flex flex-row flex-wrap items-center">
       {{ range (.GetTerms "categories") }}
-        <a class="relative mt-[0.5rem] mr-2" href="{{ .RelPermalink }}"
-          >{{ partial "badge.html" .LinkTitle }}</a
-        >
+        <a class="relative mt-[0.5rem] me-2" href="{{ .RelPermalink }}">
+          {{ partial "badge.html" .LinkTitle }}
+        </a>
       {{ end }}
     </div>
   {{ end }}

layouts/partials/home/card.html

@@ -13,7 +13,7 @@
         </article>
       </div>
       <div class="mt-6 sm:mt-16 lg:mt-0 mx-auto max-w-xl px-4 sm:px-6 lg:mx-0 lg:max-w-none lg:py-16 lg:px-0">
-        <div class="-mr-48 md:-mr-16 lg:relative lg:m-0 lg:h-full lg:px-0 w-full">
+        <div class="-me-48 md:-me-16 lg:relative lg:m-0 lg:h-full lg:px-0 w-full">
           {{ $homepageImage := "" }}
           {{ with .Site.Params.defaultBackgroundImage }}
             {{ if or (strings.HasPrefix . "http:") (strings.HasPrefix . "https:") }}
@@ -31,7 +31,7 @@
           {{ end }}
           {{ if $homepageImage }}
             <img
-              class="w-full rounded-xl shadow-xl lg:absolute lg:left-0 lg:h-full lg:w-auto lg:max-w-none"
+              class="w-full rounded-xl shadow-xl lg:absolute lg:h-full lg:w-auto lg:max-w-none"
               src="{{ $homepageImage.RelPermalink }}">
           {{ end }}
         </div>

layouts/partials/recent-articles/cardview-fullwidth.html

@@ -2,7 +2,7 @@
 {{ $recentArticles = .Site.Params.homepage.showRecentItems }}
 
 
-<div class="relative w-screen max-w-[1600px] px-[30px] left-[calc(max(-50vw,-800px)+50%)]">
+<div class="relative w-screen max-w-[1600px] px-[30px] start-[calc(max(-50vw,-800px)+50%)]">
   <section class="w-full grid gap-4 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
     {{ range first $recentArticles (.Paginate (where .Site.RegularPages "Type" "in"
       .Site.Params.mainSections)).Pages

layouts/shortcodes/timeline.html

@@ -1,3 +1,3 @@
-<ol class="border-l-2 border-primary-500 dark:border-primary-300 list-none">
+<ol class="border-s-2 border-primary-500 dark:border-primary-300 list-none">
   {{- .Inner -}}
 </ol>

layouts/shortcodes/timelineItem.html

@@ -3,12 +3,12 @@
 {{ $badge := .Get "badge" }}
 {{ $subheader := .Get "subheader" }}
 <li>
-  <div class="flex flex-start">
+  <div class="flex">
     <div
-      class="bg-primary-500 dark:bg-primary-300 text-neutral-50 dark:text-neutral-700 min-w-[30px] h-8 text-2xl flex items-center justify-center rounded-full -ml-12 mt-5">
+      class="bg-primary-500 dark:bg-primary-300 text-neutral-50 dark:text-neutral-700 min-w-[30px] h-8 text-2xl flex items-center justify-center rounded-full ltr:-ml-12 rtl:-mr-[79px] mt-5">
       {{ partial "icon" $icon }}
     </div>
-    <div class="block p-6 rounded-lg shadow-2xl min-w-full ml-6 mb-10 break-words">
+    <div class="block p-6 rounded-lg shadow-2xl flex-1 ms-6 mb-10 break-words">
       <div class="flex justify-between">
         {{ if $header }}
           <h2 class="mt-0">{{ $header }}</h2>
@@ -29,4 +29,4 @@
       </div>
     </div>
   </div>
-</li>
+</li>