update npo styling

calblueprint · Jan 12, 2024 · 916c160 · 916c160
1 parent 0ffafb0
commit 916c160
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 33 deletions.
diff --git a/src/components/NonProfit.astro b/src/components/NonProfit.astro
@@ -11,14 +11,17 @@ interface Props {
 const { name, description, image, startColor, endColor, url } = Astro.props;
 ---
 
-<a class="card" href={url || null} target="_blank">
-  <h3>
-    {name}
-  </h3>
-  <p>
-    {description}
-  </p>
-</a>
+<div class="card">
+  <div class="bg"></div>
+  <a href={url || null} target="_blank">
+    <h3>
+      {name}
+    </h3>
+    <p>
+      {description}
+    </p>
+  </a>
+</div>
 
 <style
   lang="scss"
@@ -28,35 +31,49 @@ const { name, description, image, startColor, endColor, url } = Astro.props;
   @use '../styles/colors';
 
   .card {
-    background-image: linear-gradient(var(--startColor), var(--endColor)),
-      var(--image);
-    background-size: cover;
-    background-position: center;
+    position: relative;
+    overflow: hidden;
     border-radius: 12px;
-    padding: 32px;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-end;
-    gap: 12px;
-    width: 100%;
-    padding-top: 160px;
-    color: white;
-    font-weight: 400;
-    line-height: 100%;
-    transition: transform 0.225s ease-in-out;
 
-    &:hover {
-      transform: scale(1.025);
+    .bg {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: -1;
+      width: 100%;
+      height: 100%;
+      background-image: linear-gradient(var(--startColor), var(--endColor)),
+        var(--image);
+      background-size: cover;
+      background-position: center;
+      transition: transform 0.225s ease-in-out;
     }
 
-    @media (min-width: breakpoints.$laptop) {
-      padding-top: 0;
-      aspect-ratio: 10 / 9;
+    &:hover > .bg {
+      transform: scale(1.05);
     }
-  }
 
-  .card:hover > h3 {
-    text-decoration: underline;
+    a {
+      width: 100%;
+      padding-top: 160px;
+      padding: 32px;
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-end;
+      gap: 12px;
+      color: white;
+      font-weight: 400;
+      line-height: 100%;
+
+      @media (min-width: breakpoints.$laptop) {
+        padding-top: 0;
+        aspect-ratio: 10 / 9;
+      }
+    }
+
+    &:hover > h3 {
+      text-decoration: underline;
+    }
   }
 
   h3 {

diff --git a/src/components/NonProfits.astro b/src/components/NonProfits.astro
@@ -101,8 +101,7 @@ import NonProfit from './NonProfit.astro';
     gap: 24px;
 
     @media (min-width: breakpoints.$laptop) {
-      $pad: 156px;
-      padding: 0 $pad $pad;
+      padding: 0 156px;
       grid-template-columns: 1fr 1fr 1fr;
     }
   }