Add semantic-HTML improvements, CSS improvements

src/css/_layout.scss

@@ -23,26 +23,45 @@ body .root {
   height: 100%;
 }
 
-body .root .content {
+body .root .content.theme {
   margin: 0 auto;
   height: 100%;
-  width: 90%;
+  width: 85%;
   max-width: $max-width;
 
-  .row.details {
+  header {
-    height: 30px;
+    h1 {
-  }
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+      font-size: xx-large;
+      margin: 0;
+      line-height: 1.5;
 
-  h1 {
+      a {
-    display: flex;
+        text-decoration: none;
-    align-items: center;
+      }
-    flex-direction: column;
+    }
-    font-size: xx-large;
-    margin: 0;
-    line-height: 1.5;
 
-    a {
+    div {
-      text-decoration: none;
+      display: flex;
+      justify-content: space-between;
+      min-height: 35px;
+
+      .react-select {
+        display: flex;
+        justify-content: center;
+      }
+
+      .react-select.theme {
+        min-width: 35px;
+      }
+
+      .react-select.language {
+        min-width: 70px;
+        text-align: right;
+        li { font-family: "Kanit Regular"; }
+      }
     }
   }
 
@@ -53,7 +72,7 @@ body .root .content {
     margin: 0;
     overflow: auto;
     height: 73%;
-    padding: 0 0 35px 0;
+    padding: 0 0 30px 0;
   }
 
   footer {
@@ -67,26 +86,6 @@ body .root .content {
       width: 100%;
     }
   }
-
-  .row {
-    height: 30px;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    direction: ltr;
-  }
-
-  .row.dropdown-row {
-    .react-select.theme {
-      width: 35px;
-    }
-
-    .react-select.language {
-      width: 70px;
-      text-align: right;
-      li { font-family: "Kanit Regular"; }
-    }
-  }
 }
 
 body .root .content.en {
@@ -96,6 +95,22 @@ body .root .content.en {
 }
 
 body .root .content.ar {
+  header {
+    div {
+      direction: ltr;
+      .localized-name {
+        display: flex;
+        font-size: x-large;
+        justify-content: flex-end;
+        align-items: flex-end;
+        width: 100%;
+      }
+      .transliterated-name {
+        display: none;
+      }
+    }
+  }
+
   footer {
     flex-direction: row-reverse;
   }

src/css/components/Select.scss

@@ -12,17 +12,16 @@
     }
 
     ul {
-      position: relative;
       margin: 0;
       padding: 0;
-      background: #FFF;
+      height: 0;
+      background: #fff;
       list-style-type: none;
     }
 
     ul li {
       height: 100%;
       width: 100%;
-      display: block;
       font-weight: normal;
       cursor: pointer;
     }
@@ -32,17 +31,17 @@
     display: flex;
     align-items: flex-end;
     flex-direction: column-reverse;
-    justify-content: flex-start;
 
     .selected-option.ar {
       font-size: large;
     }
 
     ul {
+      height: 0;
       li {
         display: flex;
         align-items: center;
-        justify-content: flex-end;
+        justify-content: center;
         font-size: medium;
         min-height: 35px;
         min-width: 125px;
@@ -75,7 +74,7 @@
 
     ul {
       border: none;
-      height: 50px;
+      height: 0;
       width: 50px;
     }
 
@@ -96,8 +95,10 @@
 .content.theme.en {
   .react-select.language {
     ul {
-      top: 52px;
+      li.en {
-      li.en { display: none; }
+        display: flex;
+        visibility: hidden;
+      }
     }
   }
 }
@@ -105,9 +106,13 @@
 .content.theme.ar {
   .react-select.language {
     ul {
-      top: 75px;
+      li {
-      li.ar { display: none; }
+        justify-content: flex-end;
+      }
+      li.ar {
+        display: flex;
+        visibility: hidden;
+      }
     }
   }
 }
-

src/css/pages/SurahIndex.scss

@@ -80,8 +80,6 @@ body .root .content.theme.ar {
     height: 70%;
     li.surah a {
       div:first-child .id {
-        position: relative;
-        top: 7px;
         font-family: "Kanit Regular";
         font-size: large;
         width: 55px;

src/css/pages/SurahStream.scss

@@ -57,36 +57,32 @@
 }
 
 .content.theme.ar {
-  .row.details {
+  header { }
-    justify-content: flex-end;
-    .localized-name {
-      display: flex;
-      width: 180px;
-      font-size: x-large;
-      align-items: flex-end;
-      justify-content: flex-end;
-    }
-    .transliterated-name {
-      display: none;
-    }
-  }
 
   ul.body.stream {
+    li.ayah:first-child {
+      span.title {
+        padding: 15px 0 20px 0;
+      }
+    }
     li.ayah {
       span.title {
         font-size: x-large;
         height: 0;
-        padding: 35px 0 25px 0;
+        padding: 35px 0 20px 0;
       }
       p {
         font-size: x-large;
         font-weight: normal;
       }
     }
+    padding: 0;
   }
 
-  footer .timer {
+  footer {
-    align-items: flex-start;
+    .timer {
+      align-items: flex-start;
+    }
   }
 }
 

src/css/themes/blue/_layout.scss

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

src/css/themes/blue/components/_Select.scss

@@ -21,7 +21,9 @@
   }
 
   .react-select.theme {
-    ul li.blue { display: none; }
+    ul li.blue {
+      display: none;
+    }
   }
 
   .react-select.language ul {
@@ -30,13 +32,3 @@
     }
   }
 }
-
-.content.theme.blue.ar {
-  @import "themes/blue/colors";
-
-  .row.details {
-    .localized-name {
-      color: $blue1;
-    }
-  }
-}

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

@@ -26,8 +26,10 @@
 
 .root .content.theme.blue.en {
   @import "themes/blue/colors";
-  .row.details span {
+  header {
-    color: $gold1;
+    div {
+      color: $gold1;
+    }
   }
 }
 

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

@@ -1,10 +1,6 @@
 .root .content.theme.blue {
   @import "themes/blue/colors";
 
-  footer .timer {
-    color: $blue1;
-  }
-
   ul.body.stream {
     li.ayah {
       span.title span {
@@ -13,14 +9,22 @@
       p { }
     }
   }
+
+  footer {
+    .timer {
+      color: $blue1;
+    }
+  }
 }
 
 .root .content.theme.blue.ar {
   @import "themes/blue/colors";
 
-  .row.details {
+  header {
-    .localized-name {
+    div {
-      color: $blue1;
+      .localized-name {
+        color: $blue1;
+      }
     }
   }
 }

src/css/themes/green/_layout.scss

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

src/css/themes/green/pages/_SurahStream.scss

@@ -1,23 +1,22 @@
 .root .content.theme.green {
   @import "themes/green/colors";
 
-  .row.details {
+  header {
+    h1, h1 a { color: $green1; }
     color: $green1;
   }
 
-  ul.body.stream li.ayah {
+  ul.body.stream {
-    span.title span:first-child {
+    li.ayah {
       color: $green1;
+      p { color: $black; }
     }
   }
 
-  .timer {
+  footer {
-    color: $green1;
+    .timer {
-  }
+      color: $green1;
-
+    }
-  .row .shape.refresh {
-    background: unset;
-    fill: $green1;
   }
 
   .sound-on.icon, .svg.sound-off.icon {

src/js/pages/SurahIndex.tsx

@@ -35,11 +35,11 @@ function SurahIndex({ locale, surahs, t }: Props) {
         <h1>
           <a href={`/${locale}/`}>{t(locale, "TheNobleQuran")}</a>
         </h1>
+        <div>
+          <ThemeSelect theme={theme} setTheme={setTheme} />
+          <LanguageSelect locale={locale} />
+        </div>
       </header>
-      <div className="row dropdown-row">
-        <ThemeSelect theme={theme} setTheme={setTheme} />
-        <LanguageSelect locale={locale} />
-      </div>
       <ul className="body index scroll-y">
         {surahs.map((surah, key) => (
           <li className="surah" key={key}>

src/js/pages/SurahStream.tsx

@@ -59,27 +59,23 @@ function SurahStream({ node, recitations, locale, paused, t }: Props) {
       className={classNames("invisible", "content", "theme", theme, locale)}
     >
       {readyToRender && (
-        <>
+        <header>
-          <header>
+          <h1>
-            <h1>
+            <a href={`/${locale}/`}>{t(locale, "TheNobleQuran")}</a>
-              <a href={`/${locale}/`}>{t(locale, "TheNobleQuran")}</a>
+          </h1>
-            </h1>
+          <div>
-          </header>
-          <div className="row dropdown-row">
             <ThemeSelect theme={theme} setTheme={setTheme} />
             <LanguageSelect locale={locale} path={surah.slug} />
           </div>
-        </>
+          <div>
-      )}
+            <span className="localized-name" lang={locale}>
-      {readyToRender && (
+              {surah.localizedName}
-        <div className="row details">
+            </span>
-          <span className="localized-name" lang={locale}>
+            <span className="transliterated-name" lang="en">
-            {surah.localizedName}
+              {surah.transliteratedName}
-          </span>
+            </span>
-          <span className="transliterated-name" lang="en">
+          </div>
-            {surah.transliteratedName}
+        </header>
-          </span>
-        </div>
       )}
       {readyToRender && (
         <Stream