From 5cc6a5ee3e0e05ed11a22edea733a4a5dbb4adfa Mon Sep 17 00:00:00 2001
From: krasch <dev@krasch.io>
Date: Thu, 30 Jan 2025 20:57:19 +0100
Subject: [PATCH] Clean up modal layout (but css is a mess)

---
 index.html                 |  4 ++--
 style/components/modal.css | 27 +++++++++++++--------------
 2 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/index.html b/index.html
index e2756a8..a198b44 100644
--- a/index.html
+++ b/index.html
@@ -298,7 +298,7 @@ <h3>
     <a class="logo" href="/">
         <img src="images/logo.svg" alt="logo for the trans-europe-planner">
     </a>
-    <div>
+    <div class="claim">
         <h1>
             <span lang="de">Willkommen beim Trans Europa Planer</span>
             <span lang="en">Welcome to Trans Europa Planer</span>
@@ -313,7 +313,7 @@ <h3>
     <div id="choose-home">
         <h1>
             <span lang="de">Wo soll die Reise starten?</span>
-            <span lang="en">Where should your trip start?</span>
+            <span lang="en">Where is your trip starting?</span>
         </h1>
         <div>
             <a href="?start=Berlin">Berlin</a>
diff --git a/style/components/modal.css b/style/components/modal.css
index 1c6a251..39996e0 100644
--- a/style/components/modal.css
+++ b/style/components/modal.css
@@ -11,20 +11,12 @@
   top: 50%;
   transform: translate(-50%, -50%);
 
-  min-height: 50%;
-  min-width: 50%;
-
-    overflow: hidden;
+  overflow: hidden;
 
   --logo-size: 6rem;
 }
 
 @media only screen and (max-width: 1000px) {
-    #modal {
-      min-width: 80%;
-      min-height: 80%;
-    }
-
   #modal h1 {
     font-size: 1.5rem;
   }
@@ -35,18 +27,19 @@
 }
 
 #modal {
+  padding-bottom: 1rem;
   display: grid;
+
   grid-auto-flow: row;
-  grid-template-columns: calc(var(--logo-size) * 2) 1fr;
-  grid-template-rows: min(min-content, calc(var(--logo-size) * 2)) 1fr;
+  grid-template-columns: 1fr auto;
+  grid-template-rows: 1fr auto;
+
 }
 
 #modal > * {
   height: 100%;
   width: 100%;
 
-  padding-right: 1rem;
-
   display: flex;
   flex-direction: column;
 
@@ -54,17 +47,23 @@
   align-content: center;
 }
 
-
 #modal .logo img,
 #modal .marker {
   align-self: center;
   height: var(--logo-size);
+  padding: 1rem;
+}
+
+#modal .claim {
+  padding-left: 1rem;
+  padding-right: 1rem;
 }
 
 #modal #choose-home {
   display: flex;
   flex-direction: column;
   gap: 1rem;
+  padding: 1rem;
 }
 
 #modal #choose-home div {