article cards updated

src/components/ArticleCard/index.tsx

@@ -6,12 +6,13 @@ import { IImage } from 'src/types'
 import Link from 'next/link'
 
 export interface IArticleCardProps {
+    style?: React.CSSProperties
     article: any
     preview?: IImage
 }
 
 export const ArticleCard: React.FC<IArticleCardProps> = ({ article, ...props }) => (
-    <section className="ArticleCard">
+    <div className="ArticleCard" style={props.style}>
         <Link href={article.url}>
             <a className="invisible">
                 <div className="ArticleCard-image">
@@ -38,5 +39,5 @@ export const ArticleCard: React.FC<IArticleCardProps> = ({ article, ...props })
                 </div>
             </a>
         </Link>
-    </section>
+    </div>
 )

src/components/ArticleCard/styles.css

@@ -1,20 +1,20 @@
 .ArticleCard {
-    --article-card-width: 100%;
     --article-card-image-height: 15em;
-    --article-card-margin: var(--double-margin) var(--single-margin);
 
     display: flex;
     flex-direction: column;
 
-    /* margin: var(--article-card-margin); */
-    width: var(--article-card-width);
-    /* min-width: 15em; */
-    /* max-width: 20em; */
-
     border-radius: var(--radius);
     box-shadow: var(--shadow);
+    /* box-shadow: 0 0 0 1px var(--color-shadow); */
 
     overflow: hidden;
+    
+    transition: box-shadow 150ms;
+}
+
+.ArticleCard:hover {
+    box-shadow: var(--shadow-active);
 }
 
 .ArticleCard > a {
@@ -42,6 +42,8 @@
 }
 
 .ArticleCard-body {
+    position: relative;
+
     z-index: 1000;
     display: flex;
     flex-direction: column;
@@ -50,15 +52,29 @@
 
     height: 5em;
 
-    padding: 0.75em 1em;
+    background-color: white;
+
+    padding: 0 var(--size-m) var(--size-m);
+}
+
+.ArticleCard-body:before {
+    position: absolute;
+    content: '';
+    background-color: white;
+
+    border-radius: var(--radius) var(--radius) 0 0 ;
+    width: 100%;
+    height: var(--radius);
+    top: calc(var(--radius) * -1);
+    left: 0;
 }
 
 .ArticleCard:hover img {
-    width: 105%;
-    height: 105%;
-
-    top: -2.5%;
-    left: -2.5%;
+    width: 104%;
+    height: 104%;
+ 
+    top: -2%;
+    left: -2%;
 }
 
 /* Tablet */
@@ -71,7 +87,5 @@
 /* Mobile */
 @media (max-width: 31.25em) {
     .ArticleCard {
-        --article-card-width: 100%;
-        --article-card-margin: var(--single-margin) 0;
     }
 }