From bded1098bbcff7db736c139d76845c466eefac9b Mon Sep 17 00:00:00 2001
From: wearrrrr <contact@wearr.dev>
Date: Sun, 11 Feb 2024 18:52:16 -0600
Subject: [PATCH] Fix a lot of the UI for mobile

---
 src/components/Footer.astro  | 13 +++++++------
 src/pages/[lang]/index.astro | 32 +++++++++++++++++++++-----------
 2 files changed, 28 insertions(+), 17 deletions(-)

diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 5358e3e..a55f681 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -18,15 +18,16 @@ const t = useTranslations(lang);
     <div class="footer-madeby">
       <Link href="https://wearr.dev" newTab linkTextContent={t("footer.madeWithLove")} />
     </div>
-    <div class="footer-bottom">
-      <div class="footer-links">
-        <Link href="https://titaniumnetwork.org" newTab linkTextContent={t("footer.poweredBy")} />
+  </div>
+  <div class="footer-bottom">
+    <div class="footer-links">
+      <Link href="https://titaniumnetwork.org" newTab linkTextContent={t("footer.poweredBy")} />
 
-        <div class="footer-copyright">
-          <p>&copy; {t("footer.aluProject")} 2024</p>
-        </div>
+      <div class="footer-copyright">
+        <p>&copy; {t("footer.aluProject")} 2024</p>
       </div>
     </div>
+  </div>
 
     <style>
       .wave-svg-container {
diff --git a/src/pages/[lang]/index.astro b/src/pages/[lang]/index.astro
index aa4bcac..4441321 100644
--- a/src/pages/[lang]/index.astro
+++ b/src/pages/[lang]/index.astro
@@ -14,12 +14,15 @@ export function getStaticPaths() {
 <Layout title={t("pages.home")}>
   <div class="main-content">
     <h1 class="title-text">{t("menu.welcome")}</h1>
-    <form class="url-input-form" id="url-input-form">
-      <input class="url-input" type="text" placeholder={t("menu.search")} />
-      <div id="loading-content">Loading...</div>
-      <div id="top-bar"></div>
-      <iframe title="proxy-iframe" id="proxy-frame"></iframe>
-    </form>
+    <div class="form-wrapper">
+      <form class="url-input-form" id="url-input-form">
+        <input class="url-input" type="text" placeholder={t("menu.search")} />
+        <div id="loading-content">Loading...</div>
+        <div id="top-bar"></div>
+        <iframe title="proxy-iframe" id="proxy-frame"></iframe>
+      </form>
+    </div>
+
     <div class="faq-section">
       <div class="faq-card">
         <h2>{t("faq.whatIsAProxy")}</h2>
@@ -46,16 +49,17 @@ export function getStaticPaths() {
 
 <style>
   .main-content {
+    width: 100%;
+    margin-top: 50px;
+  }
+
+  .form-wrapper {
     display: flex;
     justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    width: 100%;
-    height: 75vh;
-    margin-top: 50px;
   }
   form {
     width: 40%;
+    height: 56px;
   }
 
   .title-text {
@@ -104,6 +108,7 @@ export function getStaticPaths() {
     gap: 20px;
     margin: 0 auto;
     width: 90%;
+    margin-top: 20px;
   }
 
   .faq-card {
@@ -112,6 +117,11 @@ export function getStaticPaths() {
     padding: 20px;
     color: var(--text-color);
   }
+  @media (max-width: 768px) {
+    .faq-card {
+      grid-column: span 2;
+    }
+  }
   .faq-large {
     grid-column: span 2;
   }