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}) %> -
+
diff --git a/src/html/main/surah-stream.html.erb b/src/html/main/surah-stream.html.erb index 13c3f1c..aa2eaa2 100644 --- a/src/html/main/surah-stream.html.erb +++ b/src/html/main/surah-stream.html.erb @@ -21,7 +21,7 @@ <%= erb("_postman.html.erb", {locale: context.locale, dir: context.dir}) %> -