feat: make card slightly taller on bigger screens

BlueprintFramework · Dec 29, 2024 · 0631e2f · 0631e2f
1 parent 01858f4
commit 0631e2f
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git 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;
+  }
 }
diff --git 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>