Start transition to semantic HTML

src/css/_layout.scss

@@ -32,13 +32,16 @@ body .root .content {
     width: 350px;
   }
 
-  a.title {
+  h1 {
     display: flex;
-    place-content: center;
-    text-decoration: none;
-    width: 100%;
-    font-size: large;
-    line-height: 38px;
+    align-items: center;
+    flex-direction: column;
+    font-size: xx-large;
+
+    a {
+      line-height: 38px;
+      text-decoration: none;
+    }
   }
 
   ul.body {
@@ -66,9 +69,6 @@ body .root .content {
   }
 
   .row.dropdown-row {
-    align-items: flex-end;
-    line-height: 30px;
-
     .react-select.theme {
       width: 35px;
     }

src/css/components/Select.scss

@@ -1,5 +1,8 @@
 .root .content.theme {
   .react-select {
+    display: flex;
+    flex-direction: column;
+
     height: 20px;
     z-index: 1;
 
@@ -23,6 +26,11 @@
   }
 
   .react-select.language {
+    display: flex;
+    align-items: flex-end;
+    flex-direction: column-reverse;
+    justify-content: flex-start;
+
     .selected-option.ar {
       font-size: large;
     }
@@ -34,6 +42,7 @@
         justify-content: flex-end;
         font-size: medium;
         min-height: 35px;
+        min-width: 125px;
       }
 
       li.en {
@@ -55,20 +64,23 @@
 
 .content.theme.en {
   .react-select.language {
-    ul li.en { display: none; }
+    ul {
+      top: 62px;
+      li.en { display: none; }
+    }
   }
 }
 
 .content.theme.ar {
   .react-select.language {
-    ul li.ar { display: none; }
+    ul {
+      top: 75px;
+      li.ar { display: none; }
+    }
   }
 }
 
 .react-select.theme {
-  display: flex;
-  flex-direction: column;
-
   .selected-option {
     .circle {
       display: block;

src/css/themes/blue/_layout.scss

@@ -1,9 +1,7 @@
 .root .content.theme.blue {
   @import "colors";
 
-  .row.title {
-    color: $blue1;
-  }
+  h1 , h1 a { color: $blue1; }
 
   .row.dropdown-row .react-select {
     color: $gold1;

src/css/themes/blue/pages/_SurahIndex.scss

@@ -1,8 +1,5 @@
 .root .content.theme.blue {
   @import "themes/blue/colors";
-  .row.title {
-    justify-content: center;
-  }
 
   ul.body.index li.surah a {
     &:active, &:link, &:visited {

src/css/themes/green/_layout.scss

@@ -1,9 +1,7 @@
 .root .content.theme.green {
   @import "colors";
 
-  .row.title {
-    color: $green1;
-  }
+  h1 , h1 a { color: $green1; }
 
   .row.dropdown-row .react-select {
     background-color: transparent;

src/js/pages/SurahIndex.tsx

@@ -27,9 +27,11 @@ function SurahIndex({ locale, surahs, t }: Props) {
 
   return (
     <div ref={ref} className={classNames("invisible", "content", "theme", theme, locale)}>
-      <a href={`/${locale}/`} className="row title">
-        {t(locale, "TheNobleQuran")}
-      </a>
+      <h1>
+        <a href={`/${locale}/`}>
+          {t(locale, "TheNobleQuran")}
+        </a>
+      </h1>
       <div className="row dropdown-row">
         <ThemeSelect theme={theme} setTheme={setTheme} />
         <LanguageSelect locale={locale} />

src/js/pages/SurahStream.tsx

@@ -57,9 +57,11 @@ function SurahStream({ node, recitations, locale, paused, t }: Props) {
     <div ref={ref} className={classNames("invisible", "content", "theme", theme, locale)}>
       {readyToRender && (
         <>
-          <a href={`/${locale}/`} className="row title">
-            {t(locale, "TheNobleQuran")}
-          </a>
+          <h1>
+            <a href={`/${locale}/`}>
+              {t(locale, "TheNobleQuran")}
+            </a>
+          </h1>
           <div className="row dropdown-row">
             <ThemeSelect theme={theme} setTheme={setTheme} />
             <LanguageSelect locale={locale} path={surah.slug} />