From aeb64322e620d8839e867a881f9bdc69d8ac237e Mon Sep 17 00:00:00 2001
From: 0x1eef <0x1eef@protonmail.com>
Date: Thu, 22 Aug 2024 19:32:36 -0300
Subject: [PATCH] Improve layout / ux on KaiOS

---
 share/al-quran.reflectslight.io/CHANGELOG |  4 ++++
 src/css/_base.scss                        | 13 +++++++++++++
 src/css/base/_breakpoints.scss            |  5 +++++
 src/css/main/SurahIndex.scss              |  7 +++++++
 src/css/themes/blue/_base.scss            |  1 -
 src/css/themes/green/_base.scss           |  1 -
 6 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/share/al-quran.reflectslight.io/CHANGELOG b/share/al-quran.reflectslight.io/CHANGELOG
index 8c8c01520..71cbd1a13 100644
--- a/share/al-quran.reflectslight.io/CHANGELOG
+++ b/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
diff --git a/src/css/_base.scss b/src/css/_base.scss
index 8abbc32d1..d6957b621 100644
--- a/src/css/_base.scss
+++ b/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;
diff --git a/src/css/base/_breakpoints.scss b/src/css/base/_breakpoints.scss
index 16df36d63..55e83a152 100644
--- a/src/css/base/_breakpoints.scss
+++ b/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;
diff --git a/src/css/main/SurahIndex.scss b/src/css/main/SurahIndex.scss
index 8fc752ba0..8d6b82fe5 100644
--- a/src/css/main/SurahIndex.scss
+++ b/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,
diff --git a/src/css/themes/blue/_base.scss b/src/css/themes/blue/_base.scss
index 1dd280e7e..897de1025 100644
--- a/src/css/themes/blue/_base.scss
+++ b/src/css/themes/blue/_base.scss
@@ -10,7 +10,6 @@
       background: $primary-color;
       border: 1px solid $black;
       color: #FFF;
-      font-size: x-large;
     }
   }
 }
diff --git a/src/css/themes/green/_base.scss b/src/css/themes/green/_base.scss
index 2230d365a..018ed89da 100644
--- a/src/css/themes/green/_base.scss
+++ b/src/css/themes/green/_base.scss
@@ -10,7 +10,6 @@
       background: $primary-color;
       border: 1px solid $black;
       color: #FFF;
-      font-size: x-large;
     }
   }
 }