Fine-tune RTL layout
This commit is contained in:
parent
cd9fc3806c
commit
1d3b9384f2
3 changed files with 13 additions and 5 deletions
|
@ -20,6 +20,7 @@ html {
|
|||
.rtl {
|
||||
font-family: "Mada Regular";
|
||||
direction: rtl;
|
||||
line-height: 1.8;
|
||||
}
|
||||
.invisible, .hidden {
|
||||
display: none;
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
})}
|
||||
|
|
Loading…
Reference in a new issue