From 73c4b87ea8b101842b3c47e975c84e61f535b6ca Mon Sep 17 00:00:00 2001
From: 0x1eef <0x1eef@protonmail.com>
Date: Fri, 25 Oct 2024 06:04:36 -0300
Subject: [PATCH] Large screen optimization
---
share/al-quran.reflectslight.io/CHANGELOG | 6 ++++++
src/css/_base.scss | 13 +++++++++++++
src/html/main/surah-index.html.erb | 2 +-
src/html/main/surah-stream.html.erb | 2 +-
4 files changed, 21 insertions(+), 2 deletions(-)
diff --git a/share/al-quran.reflectslight.io/CHANGELOG b/share/al-quran.reflectslight.io/CHANGELOG
index 2f135b7..734b6f9 100644
--- a/share/al-quran.reflectslight.io/CHANGELOG
+++ b/share/al-quran.reflectslight.io/CHANGELOG
@@ -2,6 +2,12 @@
* vNEXT
+** Large screen optimization
+On large screens - the content now has a maximum height
+of ~$breakpoint-md~, and the content is both vertically
+and horiztonally aligned. At 2560x1080 the appearance is
+similar to a book on a large blank space
+
** Revisit ~ThemeSelect.tsx~ for touch devices
On touch devices it is now easier to change themes thanks to
a container that has a larger height and width than the theme
diff --git a/src/css/_base.scss b/src/css/_base.scss
index 89845e8..6167c4f 100644
--- a/src/css/_base.scss
+++ b/src/css/_base.scss
@@ -5,6 +5,19 @@
html {
height: 100%;
+
+ @media (min-height: $breakpoint-lg) {
+ body {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+
+ .app.mount.root {
+ max-height: $breakpoint-md;
+ }
+ }
+
body {
height: 100%;
margin: 0;
diff --git a/src/html/main/surah-index.html.erb b/src/html/main/surah-index.html.erb
index 3e3a32c..27caa00 100644
--- a/src/html/main/surah-index.html.erb
+++ b/src/html/main/surah-index.html.erb
@@ -21,7 +21,7 @@
<%= erb("_postman.html.erb", {locale: context.locale, dir: context.dir}) %>
-
+