fix(rtl): homepage card layout broken on rtl site

This commit is contained in:
ZhenShuo Leo
2025-08-02 09:17:33 +08:00
parent 3150fb6631
commit 2efd19e793
2 changed files with 10 additions and 15 deletions

View File

@@ -638,6 +638,9 @@ body.zen-mode-enable {
.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);
}
@@ -1144,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);
}
@@ -2968,16 +2968,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);
@@ -3068,11 +3068,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;

View File

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