Cleanup CSS

src/css/_base.scss

@@ -1,41 +1,42 @@
 @import "base/colors";
-$max-width: 768px;
-
-html[lang="en"], .ltr {
-  font-family: "Kanit Regular";
-}
-
-html[lang="ar"], .rtl {
-  font-family: "Mada Regular";
-}
-
-html[lang="fa"] {
-  // FIXME: add font for farsi?
-  font-family: "Mada Regular";
-}
+@import "base/breakpoints";
+@import "base/icon";
+@import "base/select";
+@import "vendor/tail";
 
 html {
   height: 100%;
-}
-
-html body {
-  color: $black;
-  height: 100%;
-  margin: 0;
-}
-
-body .root {
-  height: 100%;
+  body {
+    height: 100%;
+    color: $black;
+    margin: 0;
+    .root {
+      height: 100%;
+    }
+    .ltr {
+      font-family: "Kanit Regular";
+      direction: ltr;
+    }
+    .rtl {
+      font-family: "Mada Regular";
+      direction: rtl;
+    }
+    .invisible, .hidden {
+      display: none;
+    }
+    .outline-0 {
+      outline: 0;
+    }
+    .scroll-y {
+      overflow-y: auto;
+    }
+  }
 }
 
 body .root .content.theme {
   margin: 0 auto;
+  max-width: $breakpoint-md;
   width: 85%;
-  max-width: $max-width;
-
-  .scroll-y {
-    overflow-y: auto !important;
-  }
 }
 
 body .root .content {
@@ -59,14 +60,14 @@ body .root .content {
  * RTL languages
  */
 body .root .content.theme.rtl {
-  @import "base/breakpoints";
+  header h1 {
+    font-size: xx-large;
+  }
 
-  header {
-    h1 {
-      font-size: xx-large;
-      @media (max-width: $breakpoint-sm) {
-        font-size: x-large;
-      }
+  /* <= $breakpoint-sm */
+  @media (max-width: $breakpoint-sm) {
+    header h1 {
+      font-size: x-large;
     }
   }
 
@@ -76,43 +77,4 @@ body .root .content.theme.rtl {
       font-size: larger;
     }
   }
-
-  /* >= $breakpoint-xxl */
-  @media (min-width: $breakpoint-xxl) {
-    ul.body.stream {
-      $gap: 2rem;
-      margin-top: $gap;
-      li.ayah {
-        font-size: larger;
-        margin-bottom: $gap;
-      }
-    }
-
-    ul.body.index {
-      li.surah a {
-        span:last-child {
-          font-size: larger;
-        }
-      }
-    }
-
-    footer {
-      .timer {
-        font-size: larger;
-      }
-    }
-  }
 }
-
-.invisible, .hidden {
-  display: none !important;
-}
-
-.outline-0 {
-  outline: 0 !important;
-}
-
-@import "vendor/tail";
-@import "base/breakpoints";
-@import "base/icon";
-@import "base/select";

src/css/base/_icon.scss

@@ -10,6 +10,16 @@
     left: 8px;
     width: 5px;
     animation: stalled 0.8s cubic-bezier(0, 0.5, 0.5, 1) infinite;
+    @keyframes stalled {
+      0% {
+        top: 4px;
+        height: 8px;
+      }
+      50%, 100% {
+        top: 8px;
+        height: 4px;
+      }
+    }
   }
 
   div:nth-child(1) {
@@ -28,17 +38,6 @@
   }
 }
 
-@keyframes stalled {
-  0% {
-    top: 4px;
-    height: 8px;
-  }
-  50%, 100% {
-    top: 8px;
-    height: 4px;
-  }
-}
-
 .root .content.theme {
   .icon {
     display: inline-block;

src/css/main/SurahIndex.scss

@@ -49,20 +49,10 @@ body .root .content.theme {
   }
 }
 
-/**
- * LTR languages
- */
-body .root .content.theme.ltr {
-
-}
-
 /**
  * RTL languages
  */
 body .root .content.theme.rtl {
-  @import "base/breakpoints";
-  font-size: larger;
-
   ul.body.index {
     li a {
       span:first-child {
@@ -74,4 +64,15 @@ 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;
+        }
+      }
+    }
+  }
 }

src/css/main/SurahStream.scss

@@ -17,3 +17,22 @@ body .root .content.theme {
     }
   }
 }
+
+body .root .content.theme.rtl {
+  /* >= $breakpoint-xxl */
+  @media (min-width: $breakpoint-xxl) {
+    ul.body.stream {
+      $gap: 2rem;
+      margin-top: $gap;
+      li.ayah {
+        font-size: larger;
+        margin-bottom: $gap;
+      }
+    }
+    footer {
+      .timer {
+        font-size: larger;
+      }
+    }
+  }
+}