Fix bloglist

Author: ameen4455

src/components/common/PostCardBlog.js

@@ -9,8 +9,8 @@ const PostCardBlog = ({ post, number }) => {
 
   return (
     <>
-      <Link to={url} id="post-card" className="mb-4 w-full flex flex-col md:flex-row items-center pb-5 border-b-2 md:border-0">
-        <div className=" md:w-1/3 md:mr-4">
+      <Link to={url} id="post-card" className="mb-4 w-full flex hover:text-iff-orange flex-col md:flex-row items-center pb-5">
+        <div className=" md:w-1/3 md:mr-10">
           <img
             src={post.feature_image || post.og_image || "/images/blog_placeholder_image.png"}
             className={
@@ -25,35 +25,36 @@ const PostCardBlog = ({ post, number }) => {
               <div className="line-clamp-1 overflow-clip">
                 <Link
                   to={`/tag/${post.primary_tag.slug}`}
-                  className={`bg-slate-100 capitalize hover:underline text-slate-500 mr-2 py-1 px-2 rounded-lg text-sm`}
+                  className={`bg-number-grey capitalize text-bg-black hover:text-iff-orange mr-2 py-1 px-3 rounded-full text-sm`}
                 >
                   {post.primary_tag.name}
                 </Link>
               </div>
             }
             {post.featured && <span>Featured</span>}
-            <h2 className="text-lg mt-2 md:text-xl mb-1 text-heading-black font-bold hover:underline">
+            <h2 className="text-lg mt-2 md:text-xl mb-1 text-heading-black font-bold hover:text-iff-orange">
               {post.title}
             </h2>
           </header>
           <section className=" text-body-grey line-clamp-6 my-2 md:line-clamp-2">
             {post.excerpt}
           </section>
-          <div>
-            {post.authors.map((author, index) =>
-              <Link to={`/author/${author.slug}`} key={index} className=" text-sm font-semibold text-neutral-600 hover:underline">
-                {author.name} {index !== post.authors.length - 1 && "& "}
-              </Link>
-            )}
-          </div>
-          <footer className="flex text-sm pb-4 font-light">
-            <div className="mr-3 text-iff-orange">
+          <div className="flex text-sm pb-2">
+            <div className="mr-3 text-gray-900">
               <span>{post.published_at_pretty}</span>
             </div>
-            <div className="ml-3 text-iff-orange font-light">
+            <div className="ml-3 text-gray-900">
               <div>{readingTime}</div>
             </div>
-          </footer>
+          </div>
+          <hr />
+          <div className="mt-1 pb-2">
+            {post.authors.map((author, index) =>
+              <Link to={`/author/${author.slug}`} key={index} className=" text-sm text-gray-900 hover:text-iff-orange">
+                {author.name}{index !== post.authors.length - 1 && (index === post.authors.length - 2 ? " & " :  ", ")}
+              </Link>
+            )}
+          </div>
         </div>
       </Link>
     </>

src/templates/author.js

@@ -33,7 +33,7 @@ const Author = ({ data, location, pageContext }) => {
             </div>
           </div>
           <div className="post-container">
-            <section className="post-feed max-w-3xl mx-auto">
+            <section className="post-feed max-w-4xl mx-auto">
               {posts.map(({ node }) => (
                 // The tag below includes the markup for each post - components/common/PostCard.js
                 <PostCardBlog key={node.id} post={node} />

src/templates/blogs.js

@@ -20,7 +20,7 @@ const Blogs = ({ data, location, pageContext }) => {
       <Layout>
         <div>
           <div className="bg-bg-black py-8 text-white mx-auto">
-            <h1 className="text-4xl md:text-5xl ml-4 font-semibold md:mx-auto max-w-screen-md 2xl:max-w-screen-lg p-4">
+            <h1 className="text-4xl md:text-5xl ml-4 font-semibold md:mx-auto max-w-4xl 2xl:max-w-screen-lg p-4">
               Blogposts
             </h1>
           </div>
@@ -34,7 +34,7 @@ const Blogs = ({ data, location, pageContext }) => {
           </div>
 
           <div className="m-4 mt-16">
-            <section className="post-feed max-w-3xl p-4 2xl:max-w-screen-lg mx-auto">
+            <section className="post-feed max-w-4xl p-4 2xl:max-w-screen-lg mx-auto">
               {posts.map(({ node }) => (
                 // The tag below includes the markup for each post - components/common/PostCard.js
                 <PostCardBlog key={node.id} post={node} />

src/templates/tag.js

@@ -36,7 +36,7 @@ const Tag = ({ data, location, pageContext }) => {
           </div>
 
           <div className="post-container">
-            <section className="post-feed max-w-3xl mx-auto">
+            <section className="post-feed max-w-4xl mx-auto">
               {posts.map(({ node }) => (
                 // The tag below includes the markup for each post - components/common/PostCard.js
                 <PostCardBlog key={node.id} post={node} />