From 0631e2f912fc162569f53036dc89298ea0b25bdc Mon Sep 17 00:00:00 2001
From: Emma <hello@prpl.wtf>
Date: Sun, 29 Dec 2024 22:44:52 +0100
Subject: [PATCH] feat: make card slightly taller on bigger screens

---
 browse/extensions/index.css  | 11 +++++++++++
 browse/extensions/index.html |  2 +-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/browse/extensions/index.css b/browse/extensions/index.css
index 66d20ea..d060e6b 100644
--- a/browse/extensions/index.css
+++ b/browse/extensions/index.css
@@ -38,4 +38,15 @@
   --bs-btn-disabled-color: #000;
   --bs-btn-disabled-bg: #f8f9fa;
   --bs-btn-disabled-border-color: #f8f9fa;
+}
+
+.extension-card-content {
+  --card-padding-top: 100px;
+  padding-top: var(--card-padding-top) !important;
+}
+
+@media screen and (min-width: 992px) {
+  .extension-card-content {
+    --card-padding-top: 240px;
+  }
 }
\ No newline at end of file
diff --git a/browse/extensions/index.html b/browse/extensions/index.html
index e1c1f25..77a1536 100644
--- a/browse/extensions/index.html
+++ b/browse/extensions/index.html
@@ -180,7 +180,7 @@ <h3 class="pt-5 mt-5 mb-3 placeholder-wave">
           <div class="shadow-lg rounded-4">
             <div class="card card-cover h-100 overflow-hidden text-bg-dark rounded-4 rounded-bottom-0 position-relative pt-5" style="background: url('${data.banner}') center; background-size: cover; border: unset;">
               <div class="blur-gradient-overlay"></div>
-              <div class="d-flex flex-column h-100 p-5 pt-5 text-white text-shadow-1 position-relative">
+              <div class="d-flex flex-column h-100 p-5 pt-5 text-white text-shadow-1 position-relative extension-card-content">
                 <h3 class="pt-5 mt-5 mb-3 fw-bolder">
                   ${data.name}
                 </h3>