fix: home page layout for tablets

3 files changed, 9 insertions, 13 deletions

diff --git a/static/input.css b/static/input.css
index 1e7f9fc..be85915 100644
--- a/static/input.css
+++ b/static/input.css
@@ -385,10 +385,6 @@ body[data-theme~="ram"] .leaflet-tile {
         max-width: 20dvh;
     }
 
-    .ar-gt-0\.8\:max-w-\[100dvh\] {
-        max-width: 100dvh;
-    }
-
     .ar-gt-0\.8\:items-center {
         align-items: center;
     }
diff --git a/views/layouts/general-page.html b/views/layouts/general-page.html
index b163387..f38598b 100644
--- a/views/layouts/general-page.html
+++ b/views/layouts/general-page.html
@@ -197,10 +197,10 @@
         </div>
     </div>
 
-    <div class="bg-background-dark flex z-10 ar-lt-0.8:w-screen h-screen ar-lt-0.8:max-h-[92dvh]">
+    <div class="bg-background-dark flex z-10 w-[min(90dvw,100dvh)] grow-0 ar-lt-0.8:w-screen h-screen ar-lt-0.8:max-h-[92dvh]">
         <div class="pl-[0.5vw] bg-background-dark border-r-2 border-dashed border-main-dark"></div>
 
-        <div class="ar-gt-0.8:w-[100dvh] max-h-100% flex flex-col bg-background-dark relative pt-4 ml-8 pr-4">
+        <div class="max-h-100% flex flex-col grow bg-background-dark relative pt-4 ml-8 pr-4">
             <div id="general-page-header" class="max-xs:hidden flex flex-col basis-8"
                 hx-get="/api/v1/general-page/header{{ if .QueryString }}?{{ .QueryString }}{{ end }}" hx-trigger="load" hx-target="this" hx-swap="innerHTML">
             </div>
diff --git a/views/pages/home-page.html b/views/pages/home-page.html
index df0f5b3..95093a0 100644
--- a/views/pages/home-page.html
+++ b/views/pages/home-page.html
@@ -2,17 +2,17 @@
 <div class="bg-background-light flex flex-row ar-lt-0.6:flex-col w-full h-full inset-shadow overflow-y-auto text-base/[2] tracking-wide">
     <div class="ar-gt-0.6:flex-3/5 justify-center content-start p-8">
         <div class="flex flex-col justify-start items-start bg-background-dark mb-8">
-            <p class="text-3xl/[2] xs:text-4xl/[2] sm:text-5xl/[2] ml-4 tracking-widest uppercase w-full font-spectral italic text-left
+            <p class="text-3xl/[2] sm:text-4xl/[2] lg:text-5xl/[2] ml-4 tracking-widest uppercase w-full font-spectral italic text-left
                 border-l-1.5 border-solid border-(--background-dark-color)
                 bg-gradient-to-r from-(--background-dark-color) to-(--background-light-color)">{{ .L.HomePage.Hymn1 }}</p>
             <hr class="w-full border-t-2 border-dotted border-main-dark mb-1">
-            <p class="text-xl/[2] xs:text-2xl/[2] sm:text-3xl/[2] -indent-8 ml-12 p-1">{{ .L.HomePage.Hymn2 }}</p>
-            <p class="text-xl/[2] xs:text-2xl/[2] sm:text-3xl/[2] -indent-8 ml-12 p-1">{{ .L.HomePage.Hymn3 }}</p>
-            <p class="text-xl/[2] xs:text-2xl/[2] sm:text-3xl/[2] -indent-8 ml-12 p-1">{{ .L.HomePage.Hymn4 }}</p>
+            <p class="text-xl/[2] sm:text-2xl/[2] lg:text-3xl/[2] -indent-8 ml-12 p-1">{{ .L.HomePage.Hymn2 }}</p>
+            <p class="text-xl/[2] sm:text-2xl/[2] lg:text-3xl/[2] -indent-8 ml-12 p-1">{{ .L.HomePage.Hymn3 }}</p>
+            <p class="text-xl/[2] sm:text-2xl/[2] lg:text-3xl/[2] -indent-8 ml-12 p-1">{{ .L.HomePage.Hymn4 }}</p>
         </div>
 
         <div class="flex flex-col justify-center items-center">
-            <p class="text-3xl p-1 w-full font-spectral italic text-left
+            <p class="text-xl sm:text-2xl lg:text-3xl p-1 w-full font-spectral italic text-left
                 border-l-1.5 border-solid border-(--background-dark-color)
                 bg-gradient-to-r from-(--background-dark-color) to-(--background-light-color)">{{ .L.HomePage.DidYouKnowThat }}</p>
             <hr class="w-full border-t-2 border-dotted border-main-dark mb-1">
@@ -26,7 +26,7 @@
 
     <div class="ar-gt-0.6:flex-2/5 justify-center content-start p-8">
         <div class="flex flex-col justify-center items-start mb-4">
-            <p class="text-3xl p-1 w-full font-spectral italic text-left
+            <p class="text-xl sm:text-2xl lg:text-3xl p-1 w-full font-spectral italic text-left
                 border-l-1.5 border-solid border-(--background-dark-color)
                 bg-gradient-to-r from-(--background-dark-color) to-(--background-light-color)">{{ .L.HomePage.Contacts }}</p>
             <a href="https://t.me/EarlInisMona">
@@ -100,7 +100,7 @@
         </script>
 
         <div class="flex flex-col justify-center items-center">
-            <p class="text-3xl p-1 w-full font-spectral italic text-left
+            <p class="text-xl sm:text-2xl lg:text-3xl p-1 w-full font-spectral italic text-left
                 border-l-1.5 border-solid border-(--background-dark-color)
                 bg-gradient-to-r from-(--background-dark-color) to-(--background-light-color)">{{ .L.HomePage.SidebarDescription }}</p>
             <hr class="w-full border-t-2 border-dotted border-main-dark mb-1">