Merge pull request #279 from vevcom/feat/new-card

refactor: New image-card design
vevcom · Jul 8, 2024 · c07b132 · c07b132
2 parents d6f76a7 + fb60f71
commit c07b132
Showing 1 changed file with 13 additions and 16 deletions.
diff --git a/src/app/components/ImageCard/ImageCard.module.scss b/src/app/components/ImageCard/ImageCard.module.scss
@@ -1,13 +1,12 @@
 @use "@/styles/ohma";
 
 $padding: 1.5em;
-$imageHeight: 170px;
-$contentHeight: 230px;
+$imageHeight: 200px;
+$contentHeight: 200px;
 $height: $imageHeight + $contentHeight;
 
-$background: lighten(ohma.$colors-secondary, 15%);
+$background: lighten(ohma.$colors-secondary, 20%);
 
-$textBoxTransparency: 60%;
 $textColor: ohma.$colors-gray-900;
 $textUnderlineColor: ohma.$colors-secondary;
 $textBoxBackgroundColor: ohma.$colors-white;
@@ -16,7 +15,6 @@ $textBoxBackgroundColor: ohma.$colors-white;
     min-width: 200px; 
     max-width: 300px;
     border-radius: ohma.$cardRounding;
-    padding: $padding;
     position: relative;
     color: inherit;
     text-decoration: none;
@@ -29,10 +27,8 @@ $textBoxBackgroundColor: ohma.$colors-white;
         > .image {
             scale: 1.1;
         }
-        > .content {
-            background-color: rgba($textBoxBackgroundColor, 90%);
-        }
     }
+
     > .image {
         position: absolute;
         top: 0;
@@ -41,38 +37,40 @@ $textBoxBackgroundColor: ohma.$colors-white;
         height: $imageHeight;
         z-index: 1;
         transition: scale 0.3s;
+
         > * {
             width: 100% !important;
             height: 100%;
             object-fit: cover;
+
             img {
                 width: 100% !important;
                 height: 100%;
                 object-fit: cover;
             }
         } 
+
         &::after {
             content: '';
             position: absolute;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
-            background: radial-gradient(ellipse at center top, transparent 40%, $background 70%, $background 100%);
+            background: linear-gradient(to bottom, transparent 30%, $background 80%, $background 100%);
             scale: 1.5 1;
             z-index: 0;
         }
     }
+
     > .content {
         z-index: 2;
         position: absolute;
-        border-radius: calc(ohma.$cardRounding - $padding);
-        background-color: rgba($textBoxBackgroundColor, $textBoxTransparency);
-        width: calc(100% - #{$padding} * 2);
-        padding: $padding;
+        width: 100%;
+        padding-left: $padding;
+        padding-right: $padding;
         top: calc($imageHeight - $padding);
         height: $contentHeight;
-        box-shadow: ohma.$colors-secondary 0 0 40px;
         color: $textColor;
         transition: 0.3s;
         overflow: hidden;
@@ -82,9 +80,8 @@ $textBoxBackgroundColor: ohma.$colors-white;
             text-underline-offset: 0.1em;
             text-decoration-thickness: 2px;
             text-decoration-color: $textUnderlineColor;
-            margin-bottom: ohma.$gap;
         }
     }
 
-    box-shadow: ohma.$colors-gray-800 0 0 10px;
+    box-shadow: ohma.$colors-gray-700 0 0 10px;
 }