Port .donate__box to Tailwind

LadybirdBrowser · Jul 13, 2024 · 4e9e987 · 4e9e987
1 parent 2adf3cb
commit 4e9e987
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 67 deletions.
diff --git a/src/components/landing/donate.astro b/src/components/landing/donate.astro
@@ -1,16 +1,20 @@
 <section class="donate">
   <div class="container">
-    <div class="donate__box">
-      <div class="donate__box-content">
-        <h2>Become a <span>Ladybird</span> supporter</h2>
-        <p>
+    <div
+      class="relative z-10 -top-4 bg-[url('assets/img/blurp.webp')] bg-center bg-cover flex justify-center mb-12 text-[#fff]"
+    >
+      <div class="p-6 md:p-8 lg:px-16 lg:py-10">
+        <h2 class="mb-[0.8em] text-3xl lg:mb-[0.4em] lg:text-4xl">
+          Become a <span>Ladybird</span> supporter
+        </h2>
+        <p class="mb-5 max-w-2xl">
           Ladybird is funded entirely by sponsorships and donations from people
           and companies who care about the open web.
-          <p>
+          <p class="mb-5 max-w-2xl">
             We accept one-time and recurring monthly donations via <a
               href="https://donorbox.org/ladybird">Donorbox</a
             >.
-            <p>
+            <p class="mb-5 max-w-2xl">
               If you or your company would like to make a large donation, we
               would be happy to display your logo on this website! Please <a
                 href="mailto:[email protected]">contact us</a

diff --git a/src/styles/global.css b/src/styles/global.css
@@ -910,67 +910,6 @@ table.sponsor-tiers td:first-child {
   color: black;
 }
 
-.donate__box {
-  position: relative;
-  z-index: 10;
-  top: -20px;
-  background-image: url("../../../assets/img/blurp.webp");
-  background-position: center;
-  background-size: cover;
-  width: 100%;
-  height: 560px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: 60px;
-  color: #fff;
-}
-
 .donate .container {
   max-width: none;
 }
-
-@media (min-width: 768px) {
-  .donate__box {
-    height: 435px;
-  }
-}
-
-.donate__box-content {
-  padding: 30px;
-}
-
-@media (min-width: 768px) {
-  .donate__box-content {
-    padding: 40px;
-  }
-}
-
-@media (min-width: 991px) {
-  .donate__box-content {
-    padding: 50px 90px;
-  }
-}
-
-.donate__box h2 {
-  color: #fff;
-  margin-bottom: 0.8em;
-  font-size: 36px;
-}
-
-@media (min-width: 991px) {
-  .donate__box h2 {
-    font-size: 48px;
-    margin-bottom: 0.4em;
-  }
-}
-
-.donate__box p {
-  color: #fff;
-  margin-bottom: 24px;
-  max-width: 832px;
-}
-
-.donate__box a:not(.btn--black) {
-  color: #fff;
-}