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 ** 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~ **** Remove ~mada-regular.ttf~
With this change, the Arabic font is now based on With this change, the Arabic font is now based on
standard web fonts rather than a custom font obtained 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; margin: 0 auto;
max-width: $breakpoint-md; max-width: $breakpoint-md;
width: 85%; 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; } 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 flex-col">
<div className="flex items-center justify-center"> <div className="flex items-center justify-center text-xl">
<a <a
data-testid="h1" data-testid="h1"
href={`/${locale.name}/`} href={`/${locale.name}/`}
@ -29,7 +29,7 @@ export function Head({ locale, theme, setTheme, children }: Props) {
{children} {children}
</a> </a>
</div> </div>
<nav className="flex flex-row justify-between"> <nav className="flex flex-row justify-between text-lg">
<LanguageSelect locale={locale} /> <LanguageSelect locale={locale} />
<ThemeSelect theme={theme} setTheme={setTheme} /> <ThemeSelect theme={theme} setTheme={setTheme} />
</nav> </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}> <Head locale={locale} theme={theme} setTheme={setTheme}>
{t(locale, "TheNobleQuran")} {t(locale, "TheNobleQuran")}
</Head> </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) => ( {index.map((surah, key) => (
<li <li
className={classNames("flex justify-center surah", { className={classNames("flex justify-center surah", {
@ -77,7 +77,7 @@ export function SurahIndex({ locale, surahs, t }: Props) {
</li> </li>
))} ))}
</ul> </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 <a
className="flex flex-row items-center no-underline" className="flex flex-row items-center no-underline"
href={`/${locale.name}/random/`} href={`/${locale.name}/random/`}

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

@ -29,9 +29,9 @@ export function Stream({
<ul <ul
lang={locale.name} lang={locale.name}
className={classNames( 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, ...className,
{ "mt-6": ltr || rtl }, { "mt-4": ltr || rtl },
)} )}
ref={ref} ref={ref}
> >
@ -41,7 +41,7 @@ export function Stream({
key={ayah.id} key={ayah.id}
className="ayah fade mb-5" 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 <AudioControl
hidden={!(isPaused || endOfStream)} hidden={!(isPaused || endOfStream)}
audio={new Audio()} 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} isPaused={isPaused}
t={t} t={t}
/> />
<footer className="flex justify-between items-center h-16"> <footer className="flex justify-between items-center h-16 text-lg">
{!endOfStream && isPaused && ( {!endOfStream && isPaused && (
<PlayIcon onClick={() => setIsPaused(false)} /> <PlayIcon onClick={() => setIsPaused(false)} />
)} )}