refactor(tailwind): use logical properties for language direction

This commit is contained in:
ZhenShuo Leo
2025-08-02 07:47:41 +08:00
parent 9cc808ea93
commit 41f6b37e56
26 changed files with 90 additions and 185 deletions

View File

@@ -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 }}

View File

@@ -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>

View File

@@ -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="toc ltr:pl-5 rtl:pr-5 lg:sticky {{ $topClass }}">
<div class="order-first px-0 lg:order-last lg:max-w-xs lg:ps-8">
<div class="toc ps-5 lg:sticky {{ $topClass }}">
{{ partial "toc.html" . }}
</div>
</div>

View File

@@ -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="toc ltr:pl-5 rtl:pr-5 print:hidden lg:sticky {{ $topClass }}">
<div class="order-first lg:ml-auto px-0 lg:order-last lg:ps-8">
<div class="toc ps-5 print:hidden lg:sticky {{ $topClass }}">
{{ if $showToc }}
{{ partial "toc.html" . }}
{{ end }}