From 156a34dc9a941ff4633b7988699df0adb593f77d Mon Sep 17 00:00:00 2001
From: 0x1eef <0x1eef@protonmail.com>
Date: Tue, 8 Oct 2024 22:30:32 -0300
Subject: [PATCH] Reduce default width

---
 share/al-quran.reflectslight.io/CHANGELOG.txt |  8 ++++----
 src/css/_base.scss                            |  4 ++--
 src/css/main/SurahStream.scss                 | 11 -----------
 src/js/components/SurahIndex/index.tsx        |  2 +-
 4 files changed, 7 insertions(+), 18 deletions(-)

diff --git a/share/al-quran.reflectslight.io/CHANGELOG.txt b/share/al-quran.reflectslight.io/CHANGELOG.txt
index 847d1ca..b25d466 100644
--- a/share/al-quran.reflectslight.io/CHANGELOG.txt
+++ b/share/al-quran.reflectslight.io/CHANGELOG.txt
@@ -2,6 +2,10 @@
 
 * vNEXT
 
+** Reduce default width
+The look and feel of the website has changed to be more like
+a book that could fit in the palm of your hand
+
 ** Add src/images/albumcover-600x600.jpg
 A copy of the album art that has been embedded as metadata
 in the MP3 files served from audio.al-quran.reflectslight.io
@@ -12,10 +16,6 @@ of a surah. With this change the distinction is more so between a
 RTL language vs a LTR language rather than between Arabic vs English
 vs Farsi
 
-** Center-align ~ul.body.stream~
-For RTL languages we will show the content of a surah centered,
-and within a max width of 470px
-
 ** Render ~LanguageSelect.tsx~ items in an optimal font
 RTL languages have ~Cairo Regular~ applied.
 LTR languages have ~Kanit Regular~ applied
diff --git a/src/css/_base.scss b/src/css/_base.scss
index a38b64a..9a7f9ff 100644
--- a/src/css/_base.scss
+++ b/src/css/_base.scss
@@ -51,8 +51,8 @@ html {
 
 body .root .content.theme {
   margin: 0 auto;
-  max-width: $breakpoint-md;
-  width: 85%;
+  max-width: $breakpoint-sm;
+  width: 100%;
   color: var(--color-accent);
 
   header {
diff --git a/src/css/main/SurahStream.scss b/src/css/main/SurahStream.scss
index 463ac02..2f8ffae 100644
--- a/src/css/main/SurahStream.scss
+++ b/src/css/main/SurahStream.scss
@@ -25,15 +25,4 @@ body .root .content.theme.rtl {
       @extend .font-amiri;
     }
   }
-
-  /* >= $breakpoint-sm */
-  @media (min-width: $breakpoint-sm) {
-    ul.body.stream {
-      display: flex;
-      flex-direction: column;
-      min-width: 470px;
-      max-width: 470px;
-      align-self: center;
-    }
-  }
 }
diff --git a/src/js/components/SurahIndex/index.tsx b/src/js/components/SurahIndex/index.tsx
index 53313ba..c467d36 100644
--- a/src/js/components/SurahIndex/index.tsx
+++ b/src/js/components/SurahIndex/index.tsx
@@ -45,7 +45,7 @@ export function SurahIndex({ locale, surahs, t }: Props) {
           <li
             className={classNames("flex justify-center surah", {
               "w-full": locale.direction === "ltr",
-              "w-1/3": locale.direction === "rtl",
+              "w-1/2": locale.direction === "rtl",
             })}
             key={key}
           >