ReflectsLight/al-quran.reflectslight.io
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Replace 'font-size' rules with tail.css classes

Browse source
This commit is contained in:
0x1eef 2024-08-30 20:16:02 -03:00
parent fa47510dd2
commit 105b7b18cb
8 changed files with 12 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
share/al-quran.reflectslight.io/CHANGELOG
View file

@ -2,6 +2,10 @@
** vNEXT
**** Replace font-size rules with tail.css classes
This change replaces custom 'font-size' rules with standard
tail.css classes (eg text-lg, etc)
**** Remove ~mada-regular.ttf~
With this change, the Arabic font is now based on
standard web fonts rather than a custom font obtained

23
src/css/_base.scss
View file

@ -37,29 +37,6 @@ body .root .content.theme {
margin: 0 auto;
max-width: $breakpoint-md;
width: 85%;
header {
a[data-testid="h1"] {
font-size: x-large;
@media screen and
(max-width: $breakpoint-kaiOS-portrait) and
(orientation: portrait) {
font-size: larger;
}
}
}
header {
nav, div {
font-size: large;
}
}
ul.body {
font-size: large;
}
footer {
font-size: large;
}
}
/**

11
src/css/main/SurahIndex.scss
View file

@ -72,15 +72,4 @@ body .root .content.theme.rtl {
span.transliterated { display: none; }
}
}
/* >= $breakpoint-xxl */
@media (min-width: $breakpoint-xxl) {
ul.body.index {
li.surah a {
span:last-child {
font-size: larger;
}
}
}
}
}

10
src/css/main/SurahStream.scss
View file

@ -32,14 +32,4 @@ body .root .content.theme.rtl {
}
}
}
/* >= $breakpoint-xxl */
@media (min-width: $breakpoint-xxl) {
ul.body.stream {
$gap: 2rem;
margin-top: $gap;
li.ayah {
margin-bottom: $gap;
}
}
}
}

4
src/js/components/Head.tsx
View file

@ -20,7 +20,7 @@ export function Head({ locale, theme, setTheme, children }: Props) {
})}
>
<div className="flex flex-col">
<div className="flex items-center justify-center">
<div className="flex items-center justify-center text-xl">
<a
data-testid="h1"
href={`/${locale.name}/`}
@ -29,7 +29,7 @@ export function Head({ locale, theme, setTheme, children }: Props) {
{children}
</a>
</div>
<nav className="flex flex-row justify-between">
<nav className="flex flex-row justify-between text-lg">
<LanguageSelect locale={locale} />
<ThemeSelect theme={theme} setTheme={setTheme} />
</nav>

4
src/js/components/SurahIndex/index.tsx
View file

@ -37,7 +37,7 @@ export function SurahIndex({ locale, surahs, t }: Props) {
<Head locale={locale} theme={theme} setTheme={setTheme}>
{t(locale, "TheNobleQuran")}
</Head>
<ul className="flex flex-wrap body index scroll-y list-none m-0 p-0 pt-4 m-auto w-full h-5/6">
<ul className="flex flex-wrap body index scroll-y list-none m-0 p-0 pt-4 m-auto w-full h-5/6 text-lg">
{index.map((surah, key) => (
<li
className={classNames("flex justify-center surah", {
@ -77,7 +77,7 @@ export function SurahIndex({ locale, surahs, t }: Props) {
</li>
))}
</ul>
<footer className="flex flex-row justify-between mb-5 h-12">
<footer className="flex flex-row justify-between mb-5 h-12 text-lg">
<a
className="flex flex-row items-center no-underline"
href={`/${locale.name}/random/`}

6
src/js/components/SurahStream/Stream.tsx
View file

@ -29,9 +29,9 @@ export function Stream({
<ul
lang={locale.name}
className={classNames(
"body stream scroll-y list-none p-0 m-0 h-5/6",
"body stream scroll-y text-lg list-none p-0 m-0 h-5/6",
...className,
{ "mt-6": ltr || rtl },
{ "mt-4": ltr || rtl },
)}
ref={ref}
>
@ -41,7 +41,7 @@ export function Stream({
key={ayah.id}
className="ayah fade mb-5"
>
<span className={classNames("flex h-8 items-center", {"mb-3": rtl})}>
<span className={classNames("flex h-8 items-center", {"mb-2": rtl})}>
<AudioControl
hidden={!(isPaused || endOfStream)}
audio={new Audio()}

2
src/js/components/SurahStream/index.tsx
View file

@ -67,7 +67,7 @@ export function SurahStream({ surah, locale, t }: Props) {
isPaused={isPaused}
t={t}
/>
<footer className="flex justify-between items-center h-16">
<footer className="flex justify-between items-center h-16 text-lg">
{!endOfStream && isPaused && (
<PlayIcon onClick={() => setIsPaused(false)} />
)}