Fine-tune RTL layout

This commit is contained in:
0x1eef 2024-06-11 00:11:29 -03:00
parent cd9fc3806c
commit 1d3b9384f2
3 changed files with 13 additions and 5 deletions

View file

@ -20,6 +20,7 @@ html {
.rtl {
font-family: "Mada Regular";
direction: rtl;
line-height: 1.8;
}
.invisible, .hidden {
display: none;

View file

@ -19,14 +19,19 @@ body .root .content.theme {
}
body .root .content.theme.rtl {
/* <= $breakpoint-sm */
@media (max-width: $breakpoint-sm) {
ul.body.stream {
li.ayah p { width: 100%; }
}
}
/* >= $breakpoint-xxl */
@media (min-width: $breakpoint-xxl) {
ul.body.stream {
$gap: 2rem;
margin-top: $gap;
margin-top: 4rem;
li.ayah {
font-size: larger;
margin-bottom: $gap;
margin-bottom: 2rem;
}
}
footer {

View file

@ -25,7 +25,7 @@ export function Stream({ locale, surah, stream, endOfStream, isPaused, t }: Prop
className={classNames(
"body stream scroll-y list-none p-0 m-0 h-5/6",
...className,
{ "mt-4": ltr, "mt-6": rtl },
{ "mt-4": ltr, "mt-12": rtl },
)}
ref={ref}
>
@ -53,7 +53,9 @@ export function Stream({ locale, surah, stream, endOfStream, isPaused, t }: Prop
{t(locale, "of")} {formatNumber(locale, surah.ayat.length)}
</span>
</span>
<p className="m-0">{ayah.body}</p>
<p className={classNames("m-0", { "w-96": locale.direction === "rtl" })}>
{ayah.body}
</p>
</li>
);
})}