Reduce default width

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

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 {

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;
-    }
-  }
 }

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}
           >