Start transition to semantic HTML
This commit is contained in:
parent
b8af887718
commit
a3d9dd1446
7 changed files with 38 additions and 29 deletions
|
@ -32,13 +32,16 @@ body .root .content {
|
||||||
width: 350px;
|
width: 350px;
|
||||||
}
|
}
|
||||||
|
|
||||||
a.title {
|
h1 {
|
||||||
display: flex;
|
display: flex;
|
||||||
place-content: center;
|
align-items: center;
|
||||||
text-decoration: none;
|
flex-direction: column;
|
||||||
width: 100%;
|
font-size: xx-large;
|
||||||
font-size: large;
|
|
||||||
line-height: 38px;
|
a {
|
||||||
|
line-height: 38px;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
ul.body {
|
ul.body {
|
||||||
|
@ -66,9 +69,6 @@ body .root .content {
|
||||||
}
|
}
|
||||||
|
|
||||||
.row.dropdown-row {
|
.row.dropdown-row {
|
||||||
align-items: flex-end;
|
|
||||||
line-height: 30px;
|
|
||||||
|
|
||||||
.react-select.theme {
|
.react-select.theme {
|
||||||
width: 35px;
|
width: 35px;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,5 +1,8 @@
|
||||||
.root .content.theme {
|
.root .content.theme {
|
||||||
.react-select {
|
.react-select {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
height: 20px;
|
height: 20px;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
|
|
||||||
|
@ -23,6 +26,11 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.react-select.language {
|
.react-select.language {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
flex-direction: column-reverse;
|
||||||
|
justify-content: flex-start;
|
||||||
|
|
||||||
.selected-option.ar {
|
.selected-option.ar {
|
||||||
font-size: large;
|
font-size: large;
|
||||||
}
|
}
|
||||||
|
@ -34,6 +42,7 @@
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
font-size: medium;
|
font-size: medium;
|
||||||
min-height: 35px;
|
min-height: 35px;
|
||||||
|
min-width: 125px;
|
||||||
}
|
}
|
||||||
|
|
||||||
li.en {
|
li.en {
|
||||||
|
@ -55,20 +64,23 @@
|
||||||
|
|
||||||
.content.theme.en {
|
.content.theme.en {
|
||||||
.react-select.language {
|
.react-select.language {
|
||||||
ul li.en { display: none; }
|
ul {
|
||||||
|
top: 62px;
|
||||||
|
li.en { display: none; }
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.content.theme.ar {
|
.content.theme.ar {
|
||||||
.react-select.language {
|
.react-select.language {
|
||||||
ul li.ar { display: none; }
|
ul {
|
||||||
|
top: 75px;
|
||||||
|
li.ar { display: none; }
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.react-select.theme {
|
.react-select.theme {
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
.selected-option {
|
.selected-option {
|
||||||
.circle {
|
.circle {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
|
@ -1,9 +1,7 @@
|
||||||
.root .content.theme.blue {
|
.root .content.theme.blue {
|
||||||
@import "colors";
|
@import "colors";
|
||||||
|
|
||||||
.row.title {
|
h1 , h1 a { color: $blue1; }
|
||||||
color: $blue1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.row.dropdown-row .react-select {
|
.row.dropdown-row .react-select {
|
||||||
color: $gold1;
|
color: $gold1;
|
||||||
|
|
|
@ -1,8 +1,5 @@
|
||||||
.root .content.theme.blue {
|
.root .content.theme.blue {
|
||||||
@import "themes/blue/colors";
|
@import "themes/blue/colors";
|
||||||
.row.title {
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul.body.index li.surah a {
|
ul.body.index li.surah a {
|
||||||
&:active, &:link, &:visited {
|
&:active, &:link, &:visited {
|
||||||
|
|
|
@ -1,9 +1,7 @@
|
||||||
.root .content.theme.green {
|
.root .content.theme.green {
|
||||||
@import "colors";
|
@import "colors";
|
||||||
|
|
||||||
.row.title {
|
h1 , h1 a { color: $green1; }
|
||||||
color: $green1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.row.dropdown-row .react-select {
|
.row.dropdown-row .react-select {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
|
|
|
@ -27,9 +27,11 @@ function SurahIndex({ locale, surahs, t }: Props) {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div ref={ref} className={classNames("invisible", "content", "theme", theme, locale)}>
|
<div ref={ref} className={classNames("invisible", "content", "theme", theme, locale)}>
|
||||||
<a href={`/${locale}/`} className="row title">
|
<h1>
|
||||||
{t(locale, "TheNobleQuran")}
|
<a href={`/${locale}/`}>
|
||||||
</a>
|
{t(locale, "TheNobleQuran")}
|
||||||
|
</a>
|
||||||
|
</h1>
|
||||||
<div className="row dropdown-row">
|
<div className="row dropdown-row">
|
||||||
<ThemeSelect theme={theme} setTheme={setTheme} />
|
<ThemeSelect theme={theme} setTheme={setTheme} />
|
||||||
<LanguageSelect locale={locale} />
|
<LanguageSelect locale={locale} />
|
||||||
|
|
|
@ -57,9 +57,11 @@ function SurahStream({ node, recitations, locale, paused, t }: Props) {
|
||||||
<div ref={ref} className={classNames("invisible", "content", "theme", theme, locale)}>
|
<div ref={ref} className={classNames("invisible", "content", "theme", theme, locale)}>
|
||||||
{readyToRender && (
|
{readyToRender && (
|
||||||
<>
|
<>
|
||||||
<a href={`/${locale}/`} className="row title">
|
<h1>
|
||||||
{t(locale, "TheNobleQuran")}
|
<a href={`/${locale}/`}>
|
||||||
</a>
|
{t(locale, "TheNobleQuran")}
|
||||||
|
</a>
|
||||||
|
</h1>
|
||||||
<div className="row dropdown-row">
|
<div className="row dropdown-row">
|
||||||
<ThemeSelect theme={theme} setTheme={setTheme} />
|
<ThemeSelect theme={theme} setTheme={setTheme} />
|
||||||
<LanguageSelect locale={locale} path={surah.slug} />
|
<LanguageSelect locale={locale} path={surah.slug} />
|
||||||
|
|
Loading…
Reference in a new issue