From b216bae284ee911c422b0db5cf09a33f2b79601f Mon Sep 17 00:00:00 2001
From: Roman Godmaire <godmaire@twilit.io>
Date: Thu, 7 Dec 2023 21:22:31 -0500
Subject: [PATCH] feat: Primitive mobile support

---
 src/routes/+page.svelte | 44 +++++++++++++++++++++++++++++++++++------
 1 file changed, 38 insertions(+), 6 deletions(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 3da5f15..b0969f7 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -76,12 +76,13 @@
     height: 16rem;
     width: 32rem;
 
-    padding: 4rem 8rem;
+    max-width: calc(90% - 8rem);
+    padding: 4rem 4rem;
 
     position: absolute;
     left: 50%;
     bottom: 50%;
-    transform: translate(-50%, 25%);
+    transform: translate(-50%, 40%);
 
     display: grid;
     grid-template-columns: 1fr;
@@ -96,15 +97,15 @@
 
   form {
     display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-template-rows: 4em 4em;
+    grid-template-columns: 1fr;
+    grid-template-rows: auto 4rem 4rem;
     gap: 1em;
 
     grid-row: 1 / 1;
     grid-column: 1 / 1;
 
     & h1 {
-      grid-column: span 2;
+      grid-column: span 1;
     }
 
     & button {
@@ -119,7 +120,7 @@
 
   button {
     width: 100%;
-    padding: 1em;
+    padding: 1rem;
 
     background-color: #a16207;
     border: none;
@@ -136,4 +137,35 @@
     bottom: 1em;
     transform: translate(-50%, 0);
   }
+
+  @media (min-width: 480px) {
+    main {
+      transform: translate(-50%, 25%);
+    }
+    form {
+      grid-template-rows: repeat(3, 1fr);
+    }
+  }
+
+  @media (min-width: 1024px) {
+    main {
+      padding: 4rem 8rem;
+    }
+
+    form {
+      grid-template-columns: repeat(2, 1fr);
+      grid-template-rows: repeat(2, 4em);
+
+      grid-row: 1 / 1;
+      grid-column: 1 / 1;
+    }
+
+    form h1 {
+      grid-column: span 2;
+    }
+
+    form button {
+      grid-column: span 1;
+    }
+  }
 </style>