From f4f78eae064cfec6b8e053221edea3098029f1a1 Mon Sep 17 00:00:00 2001
From: Moris Zen <moris.pasic@gmail.com>
Date: Fri, 6 Jul 2018 12:56:09 +0200
Subject: [PATCH] Restructuring of cards and styling blog

---
 src/components/Card.js | 16 +++++-----------
 src/templates/blog.js  | 28 +++++++++++++++-------------
 2 files changed, 20 insertions(+), 24 deletions(-)

diff --git a/src/components/Card.js b/src/components/Card.js
index 7f8bbdb..ff0fd6e 100644
--- a/src/components/Card.js
+++ b/src/components/Card.js
@@ -1,32 +1,26 @@
 import React from 'react'
 import Link from 'gatsby-link'
-import Img from 'gatsby-image'
 
 import ImgSprint from '../images/wow-we-did-design-sprint-remotely.png'
 
 const Card = ({ ...props }) => (
-  <article className="my-4 lg:my-2 lg:mx-2 w-full rounded overflow-hidden shadow-md hover:shadow-lg">
+  <article className="h-full w-full rounded overflow-hidden shadow-md hover:shadow-lg">
     <Link to={props.url}>
       {props.image ? (
-        <Img resolutions={props.image} />
+        <img className="w-full" src={props.image.src} />
       ) : (
         <img className="w-full" src={ImgSprint} alt="Sprint Work" />
       )}
     </Link>
     <div className="px-6 py-4">
-      <div className="font-bold text-xl mb-2">
-        {props.title} - {props.date}
-      </div>
+      <Link className="no-underline" to={props.url}>
+        <h3 className="text-black font-bold text-xl mb-2">{props.title}</h3>
+      </Link>
       <p
         className="text-grey-darker text-base"
         dangerouslySetInnerHTML={{ __html: props.excerpt }}
       />
     </div>
-    <div className="px-6 py-4">
-      <span className="inline-block bg-grey-lighter rounded-full px-3 py-1 text-sm font-semibold text-grey-darker">
-        #workstyle
-      </span>
-    </div>
   </article>
 )
 
diff --git a/src/templates/blog.js b/src/templates/blog.js
index a622df2..f353ae5 100644
--- a/src/templates/blog.js
+++ b/src/templates/blog.js
@@ -7,20 +7,22 @@ class Blog extends Component {
   render() {
     const data = this.props.data
     return (
-      <div className="flex">
+      <div className="container mx-auto p-4 w-full md:flex md:flex-wrap items-stretch w-full">
         {data.allWordpressPost.edges.map(({ node }) => (
-          <Card
-            key={node.id}
-            url={`blog/${node.slug}`}
-            title={node.title}
-            date={node.date}
-            excerpt={node.excerpt}
-            image={
-              node.featured_media
-                ? node.featured_media.localFile.childImageSharp.resolutions
-                : undefined
-            }
-          />
+          <div className="md:w-1/2 p-2">
+            <Card
+              key={node.id}
+              url={`blog/${node.slug}`}
+              title={node.title}
+              date={node.date}
+              excerpt={node.excerpt}
+              image={
+                node.featured_media
+                  ? node.featured_media.localFile.childImageSharp.resolutions
+                  : undefined
+              }
+            />
+          </div>
         ))}
       </div>
     )