From 309d19c73aa1a261081000f7396ec090549b3d64 Mon Sep 17 00:00:00 2001
From: Juan Di Toro <ditorojuanf@gmail.com>
Date: Tue, 15 Aug 2023 18:19:48 +0200
Subject: [PATCH] fix: layout shifting and showing overflow

---
 src/components/Donate/How/How.astro           | 32 +++++++++----------
 .../Donate/Jumbotron/Jumbotron.astro          |  2 +-
 src/components/Donate/Legal/Legal.astro       |  2 +-
 src/components/Donate/Methods/Methods.astro   | 17 ++++++----
 src/components/Donate/Why/Why.astro           | 22 ++++++-------
 src/pages/donate.astro                        | 12 +++----
 6 files changed, 45 insertions(+), 42 deletions(-)

diff --git a/src/components/Donate/How/How.astro b/src/components/Donate/How/How.astro
index f4f6522..da185fe 100644
--- a/src/components/Donate/How/How.astro
+++ b/src/components/Donate/How/How.astro
@@ -33,21 +33,21 @@ import FeaturedGroup from "../../ui/FeaturedGroup.astro";
   }
 </style>
 
-<section id="how" class="relative">
-  <div class="custom-bg -mx-10"></div>
-  <div class="max-w-3xl px-7 mx-10 md:mx-20 lg:mx-40">
-    <div class="bg-black/50 p-3 lg:bg-transparent lg:p-0">
-      <FeaturedGroup
-        subtitle="Donate via Gitcoin during funding rounds"
-        title="How should I donate?"
-        text={[
-          "When Gitcoin is doing funding rounds, donating through their website will give a matching bonus of up to 150%. This means that your donation will have a bigger impact on the project during this time period.",
-        ]}
-      />
-      <Button
-        href="https://gitcoin.co/grants/4722/lume-web-web3-accessibility-freedom-and-education"
-        label="Gitcoin"
-      />
-    </div>
+<section id="how" class="relative overflow-hidden max-w-[100vw]">
+  <div class="custom-bg"></div>
+  <div
+    class="max-w-3xl bg-black/50 p-3 lg:bg-transparent lg:p-0 mx-10 md:mx-20 lg:mx-40"
+  >
+    <FeaturedGroup
+      subtitle="Donate via Gitcoin during funding rounds"
+      title="How should I donate?"
+      text={[
+        "When Gitcoin is doing funding rounds, donating through their website will give a matching bonus of up to 150%. This means that your donation will have a bigger impact on the project during this time period.",
+      ]}
+    />
+    <Button
+      href="https://gitcoin.co/grants/4722/lume-web-web3-accessibility-freedom-and-education"
+      label="Gitcoin"
+    />
   </div>
 </section>
diff --git a/src/components/Donate/Jumbotron/Jumbotron.astro b/src/components/Donate/Jumbotron/Jumbotron.astro
index 3f66fcf..88b03f0 100644
--- a/src/components/Donate/Jumbotron/Jumbotron.astro
+++ b/src/components/Donate/Jumbotron/Jumbotron.astro
@@ -4,7 +4,7 @@ import backgroundSrc from "/src/assets/donate-jumbotron-bg.png";
 
 <section
   id="jumbotron"
-  class="relative w-full h-[420px] flex items-center justify-center"
+  class="relative w-full h-[420px] flex items-center justify-center max-w-[100vw] overflow-hidden"
 >
   <img
     src={backgroundSrc.src}
diff --git a/src/components/Donate/Legal/Legal.astro b/src/components/Donate/Legal/Legal.astro
index 2ec9a03..30adf84 100644
--- a/src/components/Donate/Legal/Legal.astro
+++ b/src/components/Donate/Legal/Legal.astro
@@ -1,4 +1,4 @@
-<section id="legal" class="mx-20 lg:mx-40 pb-40">
+<section id="legal" class="mx-10 lg:mx-40 pb-40">
   <h2 class="text-3xl lg:text-4xl font-display my-10">Tax and Legal</h2>
   <p class="text-lg lg:text-xl font-body text-body my-5">
     <strong
diff --git a/src/components/Donate/Methods/Methods.astro b/src/components/Donate/Methods/Methods.astro
index b88de4b..286cbb6 100644
--- a/src/components/Donate/Methods/Methods.astro
+++ b/src/components/Donate/Methods/Methods.astro
@@ -168,15 +168,17 @@ await addCurrency(
     }
   }
 </style>
-<section id="methods" class="mx-10 md:mx-20 lg:mx-40">
-  <div>
+<section id="methods">
+  <div class="mx-5 md:mx-20 lg:mx-40">
     <h2 class="text-3xl lg:text-4xl mb-5 mt-20">Donate Cryptocurrency</h2>
-    <div class="flex w-full flex-col lg:flex-row lg:flex-wrap gap-[10px]">
+    <div
+      class="flex w-full flex-col lg:flex-row lg:flex-wrap gap-y-[10px] lg:gap-x-[10px]"
+    >
       {
         currencies.map((currency) => (
           <div
             id={"donate-" + currency.id}
-            class={`hover:ring-2 flex flex-col bg-black rounded-md px-10 py-5 w-full max-w-[calc(100vw-30px)] lg:max-w-none lg:w-[calc(50%-20px)]`}
+            class={`hover:ring-2 flex flex-col bg-black rounded-md p-5 w-full max-w-[calc(100vw-40px)] lg:max-w-none lg:w-[calc(50%-20px)]`}
             style={`--tw-ring-color: ${currency.mainColor}`}
           >
             <div class="flex flex-row flex-1 gap-x-4 w-full justify-between">
@@ -206,9 +208,11 @@ await addCurrency(
         ))
       }
     </div>
+  </div>
+  <div class="mx-5 md:mx-20 lg:mx-40 max-w-[calc(100vw-40px)]">
     <h2 class="text-3xl lg:text-4xl mb-10 mt-40">Donate Fiat</h2>
     <div
-      class="flex flex-col items-center justify-between gap-4 lg:flex-row lg:flex-wrap"
+      class="flex flex-col items-center justify-between gap-y-4 lg:gap-x-4 lg:flex-row lg:flex-wrap"
     >
       <div
         id="donate-paypal"
@@ -318,12 +322,13 @@ await addCurrency(
       </div>
     </div>
   </div>
-  <p class="text-lg italic font-body text-body mt-10 mx-10">
+  <p class="text-lg italic font-body text-body mt-5 mx-10">
     If you are interested in donating through other means, please get in touch
     with us to discuss. If there is a cryptocurrency you wish to contribute with
     that we have not listed, please let me know!
   </p>
 </section>
+
 <dialog id="qr-dialog" class="backdrop:bg-black/20 backdrop:backdrop-blur-sm">
 </dialog>
 <script is:inline>
diff --git a/src/components/Donate/Why/Why.astro b/src/components/Donate/Why/Why.astro
index b53294f..e7a15eb 100644
--- a/src/components/Donate/Why/Why.astro
+++ b/src/components/Donate/Why/Why.astro
@@ -6,18 +6,17 @@ import backgroud from "/src/assets/why-bg-2.png";
 
 <section
   id="why"
-  class="flex flex-col overflow-hidden relative md:flex-row mx-10 md:mx-20"
+  class="flex flex-col overflow-hidden relative md:flex-row mx-10 md:mx-20 lg:mx-40"
 >
   <img
     src={backgroud.src}
     class="absolute xl:relative -z-10 min-w-[1000px] h-[750px] -mx-10 md:-mx-20 lg:-mx-40"
   />
-  <div class="px-10 md:px-20 py-5">
-    <FeaturedGroup
-      subtitle="Why should I donate to Lume?"
-      title="Help us break the pattern"
-      text={[
-        `<ul class="space-y-3 -mb-10 text-body font-body list-disc list-inside text-xl lg:text-2xl">
+  <FeaturedGroup
+    subtitle="Why should I donate to Lume?"
+    title="Help us break the pattern"
+    text={[
+      `<ul class="space-y-3 -mb-10 text-body font-body list-disc list-inside text-xl lg:text-2xl">
       <li class="list-item">You believe the internet should be free and open for everyone, regardless of political beliefs.</li>
       <li class="list-item">You want a neutral web accessible to everyday people.</li>
       <li class="list-item">You believe your data should be private and secure unless you choose to share it.</li>
@@ -25,9 +24,8 @@ import backgroud from "/src/assets/why-bg-2.png";
       <li class="list-item">You think people should have free access to information no matter how they choose to access it.</li>
       <li class="list-item">You believe in handling web abuse using legal and social means instead of censorship and restriction.</li>
     </ul>`,
-        `Every single day you use the Internet, your data is sold to companies to pay for your usage. Help us break the pattern by funding the creation of free and open-source Web3 tools.`,
-      ]}
-    />
-    <Button label="Donate" href="#methods" />
-  </div>
+      `Every single day you use the Internet, your data is sold to companies to pay for your usage. Help us break the pattern by funding the creation of free and open-source Web3 tools.`,
+    ]}
+  />
+  <Button label="Donate" href="#methods" />
 </section>
diff --git a/src/pages/donate.astro b/src/pages/donate.astro
index fc2dbbf..c8c2c0d 100644
--- a/src/pages/donate.astro
+++ b/src/pages/donate.astro
@@ -1,10 +1,10 @@
 ---
-import Layout from '../layouts/Layout.astro';
-import Jumbotron from '../components/Donate/Jumbotron/Jumbotron.astro';
-import Why from '../components/Donate/Why/Why.astro';
-import How from '../components/Donate/How/How.astro';
-import Methods from '../components/Donate/Methods/Methods.astro';
-import Legal from '../components/Donate/Legal/Legal.astro';
+import Layout from "../layouts/Layout.astro";
+import Jumbotron from "../components/Donate/Jumbotron/Jumbotron.astro";
+import Why from "../components/Donate/Why/Why.astro";
+import How from "../components/Donate/How/How.astro";
+import Methods from "../components/Donate/Methods/Methods.astro";
+import Legal from "../components/Donate/Legal/Legal.astro";
 ---
 
 <Layout view="donate" title="Donate - Lume Web">