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;
     }
 }

src/components/ArticleCardList.tsx

@@ -1,14 +1,15 @@
 import { ArticleCard } from './ArticleCard'
 import { Pager } from './Pager'
 import { CardGrid } from './CardGrid'
+import { IArticle } from 'src/types'
 
 export interface IArticleCardListProps {
-    articles: any[]
+    articles: IArticle[]
     nextPage: number | null
     prevPage: number | null
 }
 
-export const ArticleCardList: React.FC<IArticleCardListProps> = ({ articles, nextPage, prevPage }) => (
+export const ArticleCardList: React.FC<IArticleCardListProps> = ({ articles, nextPage, prevPage, ...props }) => (
     <>
         <CardGrid
             style={{
@@ -22,11 +23,16 @@ export const ArticleCardList: React.FC<IArticleCardListProps> = ({ articles, nex
                     srcSet: article.preview.set,
                 }
 
+                const gridColumn = article.featured ? 'span 2' : 'auto'
+
                 return (
                     <ArticleCard
                         key={i}
                         article={article}
-                        preview={preview}
+                        preview={preview as any}
+                        style={{
+                            gridColumn
+                        }}
                     />
                 )
             })}

src/components/Button/styles.css

@@ -12,7 +12,7 @@
     border-radius: 100px;
 
     background-color: var(--color-back);
-    box-shadow: 0 0 0 1px rgba(27, 51, 88, 0.15);
+    box-shadow: 0 0 0 1px var(--color-shadow);
 
     transition: box-shadow 150ms;
 
@@ -21,5 +21,5 @@
 }
 
 .button:hover {
-    box-shadow: 0 4px 20px rgba(27, 51, 88, 0.15)
+    box-shadow: var(--shadow-active);
 }

src/components/CardGrid/styles.css

@@ -1,7 +1,10 @@
 .card-grid {
+    --min-cell-size: 240px;
     display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    grid-gap: var(--size-xl) var(--size-l); 
+    /* grid-template-columns: 1fr 1fr 1fr; */
+    grid-template-columns: repeat(auto-fill, minmax(var(--min-cell-size), 1fr));
+    grid-auto-rows: 1fr;
+    grid-gap: var(--size-xl) var(--size-l);
 }
 
 /* .card-grid > *:first-child {
@@ -10,4 +13,9 @@
 } */
 
 @media screen and (max-width: 31.25em) {
+    .card-grid {
+        grid-template-columns: 1fr;
+        /* grid-template-columns: auto; */
+        grid-gap: var(--size-l) 0;
+    }
 }

src/style.css

@@ -55,6 +55,7 @@
     --magenta-color: rgb(214, 39, 246);
     --red-color: rgb(246, 27, 20);
     --gray-color: rgb(153, 154, 160);
+    --color-shadow: rgba(27, 51, 88, 0.15);
 
     --inactive-link-color: var(--light-color);
 
@@ -77,7 +78,8 @@
 
     /* EFFECTS */
     --radius: 15px;
-    --shadow: 0 0 15px rgba(27, 51, 88, 0.15);
+    --shadow: 0 0 8px var(--color-shadow);
+    --shadow-active: 0 4px 16px var(--color-shadow);
 
     /* MARGINS */
     --small-margin: 0.2em;

src/types.ts

@@ -28,4 +28,13 @@ export interface IImage {
     alt: string
     src: string
     srcSet: Array<{ url: string, density: number }>
+    set: any // TODO
+}
+
+export interface IArticle {
+    id: string
+    featured: boolean
+    url: string
+    title: string
+    preview: IImage
 }