Merge pull request #2391 from ZhenShuo2021/refactor/logical-properties

♻️ Refactor(CSS): use logical properties for language direction

assets/css/compiled/main.css

@@ -491,6 +491,9 @@ body.zen-mode-enable {
   .inset-x-0 {
     inset-inline: calc(var(--spacing) * 0);
   }
+  .-start-6 {
+    inset-inline-start: calc(var(--spacing) * -6);
+  }
   .top-0 {
     top: calc(var(--spacing) * 0);
   }
@@ -623,9 +626,24 @@ body.zen-mode-enable {
   .my-3 {
     margin-block: calc(var(--spacing) * 3);
   }
+  .-ms-5 {
+    margin-inline-start: calc(var(--spacing) * -5);
+  }
+  .ms-0 {
+    margin-inline-start: calc(var(--spacing) * 0);
+  }
+  .ms-2 {
+    margin-inline-start: calc(var(--spacing) * 2);
+  }
+  .me-1 {
+    margin-inline-end: calc(var(--spacing) * 1);
+  }
   .me-2 {
     margin-inline-end: calc(var(--spacing) * 2);
   }
+  .me-4 {
+    margin-inline-end: calc(var(--spacing) * 4);
+  }
   .prose {
     color: var(--tw-prose-body);
     max-width: 65ch;
@@ -1144,9 +1162,6 @@ body.zen-mode-enable {
   .mr-5 {
     margin-right: calc(var(--spacing) * 5);
   }
-  .mr-\[10px\] {
-    margin-right: 10px;
-  }
   .mr-auto {
     margin-right: auto;
   }
@@ -1760,6 +1775,10 @@ body.zen-mode-enable {
     border-inline-start-style: var(--tw-border-style);
     border-inline-start-width: 0px;
   }
+  .border-s-1 {
+    border-inline-start-style: var(--tw-border-style);
+    border-inline-start-width: 1px;
+  }
   .border-s-\[0\.125rem\] {
     border-inline-start-style: var(--tw-border-style);
     border-inline-start-width: 0.125rem;
@@ -2034,6 +2053,15 @@ body.zen-mode-enable {
   .py-\[1px\] {
     padding-block: 1px;
   }
+  .ps-5 {
+    padding-inline-start: calc(var(--spacing) * 5);
+  }
+  .pe-2 {
+    padding-inline-end: calc(var(--spacing) * 2);
+  }
+  .pe-3 {
+    padding-inline-end: calc(var(--spacing) * 3);
+  }
   .pt-1 {
     padding-top: calc(var(--spacing) * 1);
   }
@@ -2103,6 +2131,9 @@ body.zen-mode-enable {
   .text-center {
     text-align: center;
   }
+  .text-end {
+    text-align: end;
+  }
   .text-left {
     text-align: left;
   }
@@ -2872,6 +2903,11 @@ body.zen-mode-enable {
       transition-property: none;
     }
   }
+  .sm\:me-7 {
+    @media (width >= 640px) {
+      margin-inline-end: calc(var(--spacing) * 7);
+    }
+  }
   .sm\:mt-16 {
     @media (width >= 640px) {
       margin-top: calc(var(--spacing) * 16);
@@ -2928,6 +2964,13 @@ body.zen-mode-enable {
       line-height: var(--tw-leading, var(--text-lg--line-height));
     }
   }
+  .sm\:last\:me-0 {
+    @media (width >= 640px) {
+      &:last-child {
+        margin-inline-end: calc(var(--spacing) * 0);
+      }
+    }
+  }
   .md\:mt-0 {
     @media (width >= 853px) {
       margin-top: calc(var(--spacing) * 0);
@@ -3163,6 +3206,11 @@ body.zen-mode-enable {
       padding-block: calc(var(--spacing) * 32);
     }
   }
+  .lg\:ps-8 {
+    @media (width >= 1024px) {
+      padding-inline-start: calc(var(--spacing) * 8);
+    }
+  }
   .xl\:w-1\/4 {
     @media (width >= 1280px) {
       width: calc(1/4 * 100%);
@@ -3183,36 +3231,11 @@ body.zen-mode-enable {
       right: calc(var(--spacing) * 0);
     }
   }
-  .ltr\:-left-6 {
-    &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) {
-      left: calc(var(--spacing) * -6);
-    }
-  }
-  .ltr\:mr-1 {
-    &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) {
-      margin-right: calc(var(--spacing) * 1);
-    }
-  }
   .ltr\:mr-4 {
     &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) {
       margin-right: calc(var(--spacing) * 4);
     }
   }
-  .ltr\:-ml-5 {
-    &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) {
-      margin-left: calc(var(--spacing) * -5);
-    }
-  }
-  .ltr\:ml-0 {
-    &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) {
-      margin-left: calc(var(--spacing) * 0);
-    }
-  }
-  .ltr\:ml-2 {
-    &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) {
-      margin-left: calc(var(--spacing) * 2);
-    }
-  }
   .ltr\:block {
     &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) {
       display: block;
@@ -3228,85 +3251,16 @@ body.zen-mode-enable {
       display: inline;
     }
   }
-  .ltr\:border-l {
-    &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) {
-      border-left-style: var(--tw-border-style);
-      border-left-width: 1px;
-    }
-  }
-  .ltr\:pr-2 {
-    &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) {
-      padding-right: calc(var(--spacing) * 2);
-    }
-  }
-  .ltr\:pr-3 {
-    &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) {
-      padding-right: calc(var(--spacing) * 3);
-    }
-  }
-  .ltr\:pl-5 {
-    &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) {
-      padding-left: calc(var(--spacing) * 5);
-    }
-  }
   .ltr\:text-right {
     &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) {
       text-align: right;
     }
   }
-  .ltr\:sm\:mr-7 {
-    &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) {
-      @media (width >= 640px) {
-        margin-right: calc(var(--spacing) * 7);
-      }
-    }
-  }
-  .ltr\:sm\:last\:mr-0 {
-    &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) {
-      @media (width >= 640px) {
-        &:last-child {
-          margin-right: calc(var(--spacing) * 0);
-        }
-      }
-    }
-  }
-  .ltr\:lg\:pl-8 {
-    &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) {
-      @media (width >= 1024px) {
-        padding-left: calc(var(--spacing) * 8);
-      }
-    }
-  }
-  .rtl\:-right-6 {
-    &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
-      right: calc(var(--spacing) * -6);
-    }
-  }
   .rtl\:left-0 {
     &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
       left: calc(var(--spacing) * 0);
     }
   }
-  .rtl\:-mr-5 {
-    &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
-      margin-right: calc(var(--spacing) * -5);
-    }
-  }
-  .rtl\:mr-0 {
-    &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
-      margin-right: calc(var(--spacing) * 0);
-    }
-  }
-  .rtl\:mr-2 {
-    &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
-      margin-right: calc(var(--spacing) * 2);
-    }
-  }
-  .rtl\:ml-1 {
-    &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
-      margin-left: calc(var(--spacing) * 1);
-    }
-  }
   .rtl\:ml-4 {
     &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
       margin-left: calc(var(--spacing) * 4);
@@ -3327,55 +3281,6 @@ body.zen-mode-enable {
       display: inline;
     }
   }
-  .rtl\:border-r {
-    &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
-      border-right-style: var(--tw-border-style);
-      border-right-width: 1px;
-    }
-  }
-  .rtl\:pr-5 {
-    &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
-      padding-right: calc(var(--spacing) * 5);
-    }
-  }
-  .rtl\:pl-2 {
-    &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
-      padding-left: calc(var(--spacing) * 2);
-    }
-  }
-  .rtl\:pl-3 {
-    &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
-      padding-left: calc(var(--spacing) * 3);
-    }
-  }
-  .rtl\:text-left {
-    &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
-      text-align: left;
-    }
-  }
-  .rtl\:sm\:ml-7 {
-    &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
-      @media (width >= 640px) {
-        margin-left: calc(var(--spacing) * 7);
-      }
-    }
-  }
-  .rtl\:sm\:last\:ml-0 {
-    &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
-      @media (width >= 640px) {
-        &:last-child {
-          margin-left: calc(var(--spacing) * 0);
-        }
-      }
-    }
-  }
-  .rtl\:lg\:pr-8 {
-    &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
-      @media (width >= 1024px) {
-        padding-right: calc(var(--spacing) * 8);
-      }
-    }
-  }
   .dark\:flex {
     &:is(.dark *) {
       display: flex;

exampleSite/content/_index.it.md

@@ -3,7 +3,7 @@ title: "Benvenuti a Blowfish!"
 description: "Questa pagina è stata creata utilizzando il tema Blowfish per Hugo."
 ---
 <div class="flex px-4 py-2 mb-8 text-base rounded-md bg-primary-100 dark:bg-primary-900">
-  <span class="flex items-center ltr:pr-3 rtl:pl-3 text-primary-400">
+  <span class="flex items-center pe-3 text-primary-400">
     {{< icon "triangle-exclamation" >}}
   </span>
   <span class="flex items-center justify-between grow dark:text-neutral-300">
@@ -22,4 +22,4 @@ description: "Questa pagina è stata creata utilizzando il tema Blowfish per Hug
 npx blowfish-tools
 ```  
 
-{{< youtubeLite id="SgXhGb-7QbU" label="Demo degli strumenti Blowfish" >}}
+{{< youtubeLite id="SgXhGb-7QbU" label="Demo degli strumenti Blowfish" >}}

exampleSite/content/_index.ja.md

@@ -5,7 +5,7 @@ description: "このページは Hugo の Blowfish テーマを利用して構
 
 
 <div class="flex px-4 py-2 mb-8 text-base rounded-md bg-primary-100 dark:bg-primary-900">
-  <span class="flex items-center ltr:pr-3 rtl:pl-3 text-primary-400">
+  <span class="flex items-center pe-3 text-primary-400">
     {{< icon "triangle-exclamation" >}}
   </span>
   <span class="flex items-center justify-between grow dark:text-neutral-300">

exampleSite/content/_index.md

@@ -5,7 +5,7 @@ description: "This page was built using the Blowfish theme for Hugo."
 
 
 <div class="flex px-4 py-2 mb-8 text-base rounded-md bg-primary-100 dark:bg-primary-900">
-  <span class="flex items-center ltr:pr-3 rtl:pl-3 text-primary-400">
+  <span class="flex items-center pe-3 text-primary-400">
     {{< icon "triangle-exclamation" >}}
   </span>
   <span class="flex items-center justify-between grow dark:text-neutral-300">

exampleSite/content/_index.zh-cn.md

@@ -5,7 +5,7 @@ description: "此页面是使用 Hugo 的 Blowfish 主题搭建的"
 
 
 <div class="flex px-4 py-2 mb-8 text-base rounded-md bg-primary-100 dark:bg-primary-900">
-  <span class="flex items-center ltr:pr-3 rtl:pl-3 text-primary-400">
+  <span class="flex items-center pe-3 text-primary-400">
     {{< icon "triangle-exclamation" >}}
   </span>
   <span class="flex items-center justify-between grow dark:text-neutral-300">

layouts/_default/_markup/render-heading.html

@@ -3,7 +3,7 @@
     <div id="{{ $anchor }}" class="anchor"></div>
     {{ if .Page.Params.showHeadingAnchors | default (.Page.Site.Params.article.showHeadingAnchors | default true) }}
     <span
-        class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100 select-none">
+        class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100 select-none">
         <a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700 !no-underline" href="#{{ $anchor }}" aria-label="{{ i18n "article.anchor_label" }}">#</a>
     </span>        
     {{ end }}

layouts/_default/baseof.html

@@ -18,7 +18,7 @@
       <a
         class="px-3 py-1 text-sm -translate-y-8 rounded-b-lg bg-primary-200 focus:translate-y-0 dark:bg-neutral-600"
         href="#main-content">
-        <span class="font-bold text-primary-600 ltr:pr-2 rtl:pl-2 dark:text-primary-400">&darr;</span>
+        <span class="font-bold text-primary-600 pe-2 dark:text-primary-400">&darr;</span>
         {{ i18n "nav.skip_to_main" }}
       </a>
     </div>

layouts/_default/list.html

@@ -45,8 +45,8 @@
   {{ $topClass := cond (hasPrefix site.Params.header.layout "fixed") "lg:top-[140px]" "lg:top-10" }}
   <section class="{{ $tocMargin }} prose flex max-w-full flex-col dark:prose-invert lg:flex-row">
     {{ if $showToc }}
-      <div class="order-first px-0 lg:order-last lg:max-w-xs ltr:lg:pl-8 rtl:lg:pr-8">
+      <div class="order-first px-0 lg:order-last lg:max-w-xs lg:ps-8">
-        <div class="toc ltr:pl-5 rtl:pr-5 lg:sticky {{ $topClass }}">
+        <div class="toc ps-5 lg:sticky {{ $topClass }}">
           {{ partial "toc.html" . }}
         </div>
       </div>

layouts/_default/single.html

@@ -36,8 +36,8 @@
       {{ $showRelated := site.Params.article.showRelatedPosts | default false }}
       {{ $topClass := cond (hasPrefix site.Params.header.layout "fixed") "lg:top-[140px]" "lg:top-10" }}
       {{ if or $showToc $showRelated }}
-        <div class="order-first lg:ml-auto px-0 lg:order-last ltr:lg:pl-8 rtl:lg:pr-8">
+        <div class="order-first lg:ml-auto px-0 lg:order-last lg:ps-8">
-          <div class="toc ltr:pl-5 rtl:pr-5 print:hidden lg:sticky {{ $topClass }}">
+          <div class="toc ps-5 print:hidden lg:sticky {{ $topClass }}">
             {{ if $showToc }}
               {{ partial "toc.html" . }}
             {{ end }}

layouts/partials/article-link/_shortcode.html

@@ -91,7 +91,7 @@
         </div>
       {{ end }}
       {{ if and $target.Draft site.Params.article.showDraftLabel }}
-        <div class="ltr:ml-2 rtl:mr-2">
+        <div class="ms-2">
           {{ partial "badge.html" (i18n "article.draft" | emojify) }}
         </div>
       {{ end }}

layouts/partials/article-link/simple.html

@@ -85,7 +85,7 @@
         </div>
       {{ end }}
       {{ if and .Draft .Site.Params.article.showDraftLabel }}
-        <div class="ltr:ml-2 rtl:mr-2">{{ partial "badge.html" (i18n "article.draft" | emojify) }}</div>
+        <div class="ms-2">{{ partial "badge.html" (i18n "article.draft" | emojify) }}</div>
       {{ end }}
       {{ if templates.Exists "partials/extend-article-link.html" }}
         {{ partial "extend-article-link.html" . }}

layouts/partials/author-extra.html

@@ -12,7 +12,7 @@
         {{ $authorImage = $authorImage.Fill "192x192" }}
       {{ end }}
       <img
-        class="!mt-0 !mb-0 h-24 w-24 rounded-full ltr:mr-4 rtl:ml-4"
+        class="!mt-0 !mb-0 h-24 w-24 rounded-full me-4"
         width="96"
         height="96"
         src="{{ $authorImage.RelPermalink }}">

layouts/partials/author.html

@@ -12,7 +12,7 @@
         {{ $authorImage = $authorImage.Fill "192x192" }}
       {{ end }}
       <img
-        class="!mt-0 !mb-0 h-24 w-24 rounded-full ltr:mr-4 rtl:ml-4"
+        class="!mt-0 !mb-0 h-24 w-24 rounded-full me-4"
         width="96"
         height="96"
         alt="{{ $.Site.Params.Author.name | default " Author" }}"
@@ -23,7 +23,7 @@
         {{ $authorImage = $authorImage.Fill "192x192" }}
       {{ end }}
       <img
-        class="!mt-0 !mb-0 h-24 w-24 rounded-full ltr:mr-4 rtl:ml-4"
+        class="!mt-0 !mb-0 h-24 w-24 rounded-full me-4"
         width="96"
         height="96"
         alt="{{ $.Site.Params.Author.name | default " Author" }}"

layouts/partials/footer.html

@@ -11,7 +11,7 @@
       {{ end }}
       {{ $navClass := printf "flex flex-row pb-4 text-base font-medium text-neutral-500 dark:text-neutral-400 %s" (cond $onlyIcon "overflow-x-auto py-2" "") }}
       {{ $ulClass := printf "flex list-none %s" (cond $onlyIcon "flex-row" "flex-col sm:flex-row") }}
-      {{ $liClass := printf "flex mb-1 ltr:text-right rtl:text-left sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0 %s" (cond $onlyIcon "ltr:mr-4 rtl:ml-4" "") }}
+      {{ $liClass := printf "flex mb-1 text-end sm:mb-0 sm:me-7 sm:last:me-0 %s" (cond $onlyIcon "ltr:mr-4 rtl:ml-4" "") }}
       <nav class="{{ $navClass }}">
         <ul class="{{ $ulClass }}">
           {{ range .Site.Menus.footer }}

layouts/partials/header/basic.html

@@ -92,7 +92,7 @@
         id="appearance-switcher-mobile"
         aria-label="Dark mode switcher"
         type="button"
-        class="text-base hover:text-primary-600 dark:hover:text-primary-400 ltr:mr-1 rtl:ml-1">
+        class="text-base hover:text-primary-600 dark:hover:text-primary-400 me-1">
         <div class="flex items-center justify-center dark:hidden">
           {{ partial "icon.html" "moon" }}
         </div>
@@ -115,7 +115,7 @@
           id="menu-wrapper"
           class="fixed inset-0 z-30 invisible w-screen h-screen m-0 overflow-auto transition-opacity opacity-0 cursor-default bg-neutral-100/50 backdrop-blur-sm dark:bg-neutral-900/50 pt-[5px]">
           <ul
-            class="flex space-y-2 mt-3 flex-col items-end w-full px-6 py-6 mx-auto overflow-visible list-none ltr:text-right rtl:text-left max-w-7xl">
+            class="flex space-y-2 mt-3 flex-col items-end w-full px-6 py-6 mx-auto overflow-visible list-none text-end max-w-7xl">
             <li id="menu-close-button">
               <span
                 class="cursor-pointer inline-block align-text-bottom hover:text-primary-600 dark:hover:text-primary-400">
@@ -131,7 +131,7 @@
           {{ if .Site.Menus.subnavigation }}
             <hr>
             <ul
-              class="flex mt-4 flex-col items-end w-full px-6 py-6 mx-auto overflow-visible list-none ltr:text-right rtl:text-left max-w-7xl">
+              class="flex mt-4 flex-col items-end w-full px-6 py-6 mx-auto overflow-visible list-none text-end max-w-7xl">
               {{ range .Site.Menus.subnavigation }}
                 <li class="mb-1">
                   <a

layouts/partials/series/series-closed.html

@@ -1,5 +1,5 @@
 {{ if .Params.series }}
-  <details class="mt-2 mb-5 overflow-hidden rounded-lg ltr:ml-0 ltr:pl-5 rtl:mr-0 rtl:pr-5">
+  <details class="mt-2 mb-5 overflow-hidden rounded-lg ms-0 ps-5">
     {{ partial "series/series_base.html" . }}
   </details>
 {{ end }}

layouts/partials/series/series.html

@@ -1,6 +1,6 @@
 {{ if .Params.series }}
   <details
-    class="mt-2 mb-5 overflow-hidden rounded-lg ltr:ml-0 ltr:pl-5 rtl:mr-0 rtl:pr-5"
+    class="mt-2 mb-5 overflow-hidden rounded-lg ms-0 ps-5"
     {{ if .Params.seriesOpened | default (.Site.Params.article.seriesOpened | default false) }}open{{ end }}>
     {{ partial "series/series_base.html" . }}
   </details>

layouts/partials/series/series_base.html

@@ -1,6 +1,6 @@
 {{ if .Params.series }}
   <summary
-    class="py-1 text-lg font-semibold cursor-pointer bg-primary-200 text-neutral-800 ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5 dark:bg-primary-800 dark:text-neutral-100">
+    class="py-1 text-lg font-semibold cursor-pointer bg-primary-200 text-neutral-800 -ms-5 ps-5 dark:bg-primary-800 dark:text-neutral-100">
     {{ index .Params.series 0 }} -
     {{ i18n "article.part_of_series" }}
   </summary>
@@ -8,13 +8,13 @@
   {{ range $post := sort (index .Site.Taxonomies.series $seriesName) "Params.series_order" }}
     {{ if eq $post.Permalink $.Page.Permalink }}
       <div
-        class="py-1 border-dotted border-neutral-300 ltr:-ml-5 ltr:border-l ltr:pl-5 rtl:-mr-5 rtl:border-r rtl:pr-5 dark:border-neutral-600">
+        class="py-1 border-dotted border-neutral-300 border-s-1 -ms-5 ps-5 dark:border-neutral-600">
         {{ i18n "article.part" }} {{ $post.Params.series_order }}:
         {{ i18n "article.this_article" }}
       </div>
     {{ else }}
       <div
-        class="py-1 border-dotted border-neutral-300 ltr:-ml-5 ltr:border-l ltr:pl-5 rtl:-mr-5 rtl:border-r rtl:pr-5 dark:border-neutral-600">
+        class="py-1 border-dotted border-neutral-300 border-s-1 -ms-5 ps-5 dark:border-neutral-600">
         <a href="{{ $post.RelPermalink }}">
           {{ i18n "article.part" }} {{ $post.Params.series_order }}:
           {{ $post.Params.title }}

layouts/partials/toc.html

@@ -1,23 +1,23 @@
 <details
   open
   id="TOCView"
-  class="toc-right mt-0 overflow-y-auto overscroll-contain scrollbar-thin scrollbar-track-neutral-200 scrollbar-thumb-neutral-400 dark:scrollbar-track-neutral-800 dark:scrollbar-thumb-neutral-600 rounded-lg ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5 hidden lg:block">
+  class="toc-right mt-0 overflow-y-auto overscroll-contain scrollbar-thin scrollbar-track-neutral-200 scrollbar-thumb-neutral-400 dark:scrollbar-track-neutral-800 dark:scrollbar-thumb-neutral-600 rounded-lg -ms-5 ps-5 pe-2 hidden lg:block">
   <summary
-    class="block py-1 text-lg font-semibold cursor-pointer bg-neutral-100 text-neutral-800 ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5 dark:bg-neutral-700 dark:text-neutral-100 lg:hidden">
+    class="block py-1 text-lg font-semibold cursor-pointer bg-neutral-100 text-neutral-800 -ms-5 ps-5 dark:bg-neutral-700 dark:text-neutral-100 lg:hidden">
     {{ i18n "article.table_of_contents" }}
   </summary>
   <div
-    class="min-w-[220px] py-2 border-dotted ltr:-ml-5 ltr:border-l ltr:pl-5 rtl:-mr-5 rtl:border-r rtl:pr-5 dark:border-neutral-600">
+    class="min-w-[220px] py-2 border-dotted border-s-1 -ms-5 ps-5 dark:border-neutral-600">
     {{ .TableOfContents | emojify }}
   </div>
 </details>
-<details class="toc-inside mt-0 overflow-hidden rounded-lg ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5 lg:hidden">
+<details class="toc-inside mt-0 overflow-hidden rounded-lg -ms-5 ps-5 lg:hidden">
   <summary
-    class="py-1 text-lg font-semibold cursor-pointer bg-neutral-100 text-neutral-800 ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5 dark:bg-neutral-700 dark:text-neutral-100 lg:hidden">
+    class="py-1 text-lg font-semibold cursor-pointer bg-neutral-100 text-neutral-800 -ms-5 ps-5 dark:bg-neutral-700 dark:text-neutral-100 lg:hidden">
     {{ i18n "article.table_of_contents" }}
   </summary>
   <div
-    class="py-2 border-dotted border-neutral-300 ltr:-ml-5 ltr:border-l ltr:pl-5 rtl:-mr-5 rtl:border-r rtl:pr-5 dark:border-neutral-600">
+    class="py-2 border-dotted border-neutral-300 border-s-1 -ms-5 ps-5 dark:border-neutral-600">
     {{ .TableOfContents | emojify }}
   </div>
 </details>

layouts/partials/translations.html

@@ -1,7 +1,7 @@
 {{ if .IsTranslated }}
   <div>
     <div class="cursor-pointer flex items-center nested-menu">
-      <span class="ltr:mr-1 rtl:ml-1">
+      <span class="me-1">
         {{ partial "icon.html" "language" }}
       </span>
       <div

layouts/shortcodes/alert.html

@@ -17,9 +17,9 @@
   >
   <span
     {{ if not ($.Scratch.Get "iconColor") }}
-      class="text-primary-400 ltr:pr-3 rtl:pl-3 flex items-center"
+      class="text-primary-400 pe-3 flex items-center"
     {{ else }}
-      class="ltr:pr-3 rtl:pl-3 flex items-center" style="color: {{ $.Scratch.Get "iconColor" }}"
+      class="pe-3 flex items-center" style="color: {{ $.Scratch.Get "iconColor" }}"
     {{ end }}
     >
     {{ partial "icon.html" ($.Scratch.Get "icon") }}

layouts/shortcodes/codeberg.html

@@ -18,7 +18,7 @@
       <div
         class="w-full md:w-auto pt-3 p-5 border border-neutral-200 dark:border-neutral-700 border rounded-md shadow-2xl">
         <div class="flex items-center">
-          <span class="text-2xl text-neutral-800 dark:text-neutral mr-[10px]">
+          <span class="text-2xl text-neutral-800 dark:text-neutral me-2">
             {{ partial "icon.html" "codeberg" }}
           </span>
           <div

layouts/shortcodes/forgejo.html

@@ -18,7 +18,7 @@
       <div
         class="w-full md:w-auto pt-3 p-5 border border-neutral-200 dark:border-neutral-700 border rounded-md shadow-2xl">
         <div class="flex items-center">
-          <span class="text-2xl text-neutral-800 dark:text-neutral mr-[10px]">
+          <span class="text-2xl text-neutral-800 dark:text-neutral me-2">
             {{ partial "icon.html" "forgejo" }}
           </span>
           <div

layouts/shortcodes/gitea.html

@@ -18,7 +18,7 @@
       <div
         class="w-full md:w-auto pt-3 p-5 border border-neutral-200 dark:border-neutral-700 border rounded-md shadow-2xl">
         <div class="flex items-center">
-          <span class="text-2xl text-neutral-800 dark:text-neutral mr-[10px]">
+          <span class="text-2xl text-neutral-800 dark:text-neutral me-2">
             {{ partial "icon.html" "gitea" }}
           </span>
           <div

layouts/shortcodes/github.html

@@ -31,7 +31,7 @@
 
         <div class="w-full md:w-auto pt-3 p-5">
           <div class="flex items-center">
-            <span class="text-2xl text-neutral-800 dark:text-neutral mr-[10px]">
+            <span class="text-2xl text-neutral-800 dark:text-neutral me-2">
               {{ partial "icon.html" "github" }}
             </span>
             <div

layouts/shortcodes/gitlab.html

@@ -17,7 +17,7 @@
       <div
         class="w-full md:w-auto pt-3 p-5 border border-neutral-200 dark:border-neutral-700 border rounded-md shadow-2xl">
         <div class="flex items-center">
-          <span class="text-2xl text-neutral-800 dark:text-neutral mr-[10px]">
+          <span class="text-2xl text-neutral-800 dark:text-neutral me-2">
             {{ partial "icon.html" "gitlab" }}
           </span>
           <div