Improve layout / ux on KaiOS

share/al-quran.reflectslight.io/CHANGELOG

@@ -2,6 +2,10 @@
 
 * vNEXT
 
+**** Improve KaiOS support
+This change optimizes the layout for KaiOS devices through
+specialized media queries
+
 **** Add ~etc/~
 This change moves a large portion of the website's configuration
 files to the ~/etc~ directory

src/css/_base.scss

@@ -38,9 +38,22 @@ body .root .content.theme {
   max-width: $breakpoint-md;
   width: 85%;
 
+  header {
+    a[data-testid="h1"] {
+      font-size: x-large;
+    }
+
+    @media screen and (max-width: $breakpoint-kaiOS-portrait) and (orientation: portrait) {
+      a[data-testid="h1"] {
+        font-size: larger;
+      }
+    }
+  }
+
   h1 {
     font-size: x-large;
   }
+
   header {
     nav, div {
       font-size: large;

src/css/base/_breakpoints.scss

@@ -1,3 +1,8 @@
+/* KaiOS: max widths */
+$breakpoint-kaiOS-portrait: 240px;
+$breakpoint-kaiOS-landscape: 320px;
+
+/* Standard max widths */
 $breakpoint-sm: 576px;
 $breakpoint-md: 768px;
 $breakpoint-lg: 992px;

src/css/main/SurahIndex.scss

@@ -30,6 +30,13 @@ body .root .content.theme {
   }
 
   footer {
+    @media screen and (max-width: $breakpoint-kaiOS-landscape) {
+      display: none;
+    }
+    @media screen and (max-width: $breakpoint-kaiOS-portrait) {
+      display: none;
+    }
+
     @media(max-width: $breakpoint-sm) {
       border-top: 1px solid #f2f2f2;
       .right-arrow,

src/css/themes/blue/_base.scss

@@ -10,7 +10,6 @@
       background: $primary-color;
       border: 1px solid $black;
       color: #FFF;
-      font-size: x-large;
     }
   }
 }

src/css/themes/green/_base.scss

@@ -10,7 +10,6 @@
       background: $primary-color;
       border: 1px solid $black;
       color: #FFF;
-      font-size: x-large;
     }
   }
 }