card update

src/components/Card/index.tsx

@@ -18,15 +18,20 @@ export type CardProps = {
 }
 
 export const Card: React.FC<CardProps> = props => (
-    <div className={cx(s.card, layoutClass[props.layout])} style={props.style}>
-        <Link href={props.href}>
-            <div className={s.image}>
-                {props.cover}
-            </div>
+    <Link
+        href={props.href}
+        // className={cx(s.card, layoutClass[props.layout])}
+        className={cx(s.card, layoutClass["simple"])}
+        style={props.style}
+    >
+        <div className={s.image}>
+            {props.cover}
+        </div>
 
-            <div className={s.body}>
-                {props.children}
-            </div>
-        </Link>
-    </div>
+        <div className={s.body}>
+            {props.children}
+        </div>
+    </Link>
 )
+
+

src/components/Card/styles.module.css

@@ -3,28 +3,7 @@
 .card {
     border-radius: var(--radius);
     box-shadow: var(--shadow);
-    overflow: hidden;
-    transition: box-shadow 150ms;
 
-    border: var(--border);
-}
-
-.card:hover {
-    box-shadow: var(--shadow-active);
-}
-
-.card:hover img {
-    width: 104%;
-    height: 104%;
-
-    top: -2%;
-    left: -2%;
-}
-
-.card > a {
-    display: block;
-    height: 100%;
-    position: relative;
     color: var(--color-text);
     text-decoration: none;
 }
@@ -33,39 +12,52 @@
     position: relative;
     width: 100%;
     height: 100%;
+
+    overflow: hidden;
+    border-radius: var(--radius);
+}
+
+.image img {
+    border-radius: var(--radius);
 }
 
 .body {
     background-color: var(--color-back);
     padding: var(--size-m);
+    border-radius: var(--radius);
+}
+
+/* CARD ANIMATION */
+
+/* .card:hover { */
+/*     box-shadow: var(--shadow-active); */
+/* } */
+
+/* IMAGE  ANIMATION */
+
+.card .image {
+    transition: box-shadow 150ms ease, transform 150ms ease;
+}
+
+.card:hover .image {
+    box-shadow: var(--shadow-active);
+    transform: scale(1.025);
 }
 
 /* SIMPLE */
 
-.simple .body {
-    position: relative;
-    padding-top: 0;
-}
-
-.simple .body:before {
-    position: absolute;
-    content: '';
+.card.simple {
     background-color: var(--color-back);
-
-    border-radius: var(--radius) var(--radius) 0 0;
-    width: 100%;
-    height: var(--size-m);
-    top: calc(var(--size-m) * -1);
-    left: 0;
-}
-
-.simple > a {
     display: flex;
     flex-direction: column;
 }
 
 /* FEATURED */
 
+.card.featured {
+    position: relative;
+}
+
 .featured .body {
     position: absolute;
 

src/style/style.css

@@ -29,7 +29,7 @@
     --color-link: hsl(0, 0%, 85%);
     --color-link-opposite: hsl(0, 0%, 35%);
 
-    --color-back-main: white;
+    --color-back-main: oklch(0.95 0 0);
     --color-back: white;
     --color-back-opposite: hsl(0, 0%, 15%);
 
@@ -44,15 +44,17 @@
     --size-xl: 5rem;
 
     /* EFFECTS */
-    --radius: 16px;
+    --radius: 24px;
     --radius-small: 12px;
     --shadow:
         0 2px 4px rgba(27, 51, 88, 0.2),
         0 4px 8px -8px rgba(0, 0, 0, 0.2),
         0 8px 16px -8px rgba(0, 0, 0, 0.3);
+    --shadow: none;
     --shadow-active:
-        0 12px 24px -8px rgba(27, 51, 88, 0.25),
-        0 8px 16px -8px rgba(0, 0, 0, 0.3);
+        0 4px 8px oklch(0.32 0.07 258.8 / 0.2),
+        0 8px 16px -16px rgba(0, 0, 0, 0.2),
+        0 16px 32px -16px rgba(0, 0, 0, 0.3);
     --border: none;
 
     /* SPECIAL */
@@ -224,4 +226,4 @@ h3 {
         --color-hover: white;
         --color-hover-back: white;
     }
-}
+}