Fix: Layout colors and sizings

Author: ameen4455

src/components/common/Layout.js

@@ -68,8 +68,8 @@ const DefaultLayout = ({ data, children, bodyClass, isHome }) => {
         <div className="viewport-top">
           {/* The main header section on top of the screen */}
           <header className="bg-center bg-cover py-5 text-white bg-bg-black">
-            <div className="responsive-container px-4">
-              <div className="flex items-center justify-between" id="site-mast">
+            <div className="px-4">
+              <div className="flex items-center justify-between max-w-6xl mx-auto" id="site-mast">
                 <Link to="/">
                   {isHome ? null : (
                     <img
@@ -109,7 +109,7 @@ const DefaultLayout = ({ data, children, bodyClass, isHome }) => {
                 </div>
               </div>
               {isHome ? (
-                <div id="site-banner" className="my-0 mx-auto">
+                <div id="site-banner" className="my-0 mx-auto responsive-container ">
                   <img src="/images/logo.svg" className=" w-72 mt-24" />
                   <h1
                     id=" site-banner-title"
@@ -119,21 +119,21 @@ const DefaultLayout = ({ data, children, bodyClass, isHome }) => {
                   </h1>
                   <p
                     id="site-banner-desc"
-                    className="mt-4 text-body-grey text-big-body not-italic max-w-2xl"
+                    className="mt-4 text-gray-400 text-big-body not-italic max-w-2xl"
                   >
                     {localData.subDescription}
                   </p>
                   <p
                     id="site-banner-desc"
-                    className="mt-4 text-body-grey text-big-body not-italic max-w-2xl"
+                    className="mt-4 text-gray-400 text-big-body not-italic max-w-2xl"
                   >
                     {localData.cta}
                   </p>
                   <div id="action" className="mb-20 mt-8 flex">
-                    <button class="bg-iff-orange hover:bg-iff-orange-700 text-white font-normal text-xl leading-6 not-italic py-2 px-4 rounded w-full md:w-36  h-14">
+                    <button class="btn w-full text-xl md:w-36  h-14">
                       Donate
                     </button>
-                    <button class="border border-iff-orange hover:text-white text-iff-orange font-normal text-xl leading-6 not-italic py-2 ml-4 rounded w-full md:w-36 h-14">
+                    <button class="btn-secondary ml-4 w-full text-xl md:w-36  h-14">
                       Subscribe
                     </button>
                   </div>

src/styles/global.css

@@ -20,11 +20,11 @@
   }
 
   .btn {
-    @apply border-2 border-iff-orange text-white bg-iff-orange px-6 py-2 rounded-md;
+    @apply border-2 border-iff-orange text-white bg-iff-orange hover:bg-opacity-80 px-6 py-2 rounded-md;
   }
 
   .btn-secondary {
-    @apply border border-iff-orange text-iff-orange px-6 py-2 rounded-md;
+    @apply border border-iff-orange text-iff-orange hover:bg-iff-orange hover:bg-opacity-10 px-6  py-2 rounded-md;
   }
 
   .responsive-container {

src/templates/index.js

@@ -8,6 +8,7 @@ import {
   Pagination,
   PostCarousel,
   ProjectCarousel,
+  PostCardBlog
 } from "../components/common";
 import { MetaData } from "../components/common/meta";
 import DonateCard from "../components/common/DonateCard";
@@ -30,34 +31,22 @@ const Index = ({ data, location, pageContext }) => {
     <>
       <MetaData location={location} />
       <Layout isHome={true}>
-        <div id="container" className="responsive-container mt-4 text-left">
-          <h1 className="text-3xl mb-6 font-bold">Blogposts</h1>
+        <div id="container" className="responsive-container px-4 mt-4 text-left">
+          <h1 className="text-subheading-1 mb-4 mt-24 font-bold">Blogposts</h1>
           <section id="post-feed">
             {posts.map(({ node }, index) => (
               // The tag below includes the markup for each post - components/common/PostCard.js
-              <PostCard key={node.id} post={node} number={index + 1} />
+              <PostCardBlog key={node.id} post={node} number={index + 1} />
             ))}
           </section>
 
-          {/* <Pagination pageContext={pageContext} /> */}
-          <p className="ml-14 text-body-grey">
+          <p className="text-body-grey">
             Read more blogs on numerous other topics
           </p>
-          <button class="ml-14 mt-6 mb-20 bg-iff-orange hover:bg-iff-orange-700 text-white font-normal text-xl leading-6 not-italic py-2 px-4 rounded w-36 h-14">
+          <button class="mt-6 mb-16 bg-iff-orange hover:bg-iff-orange-700 text-white font-normal text-xl leading-6 not-italic py-2 px-4 rounded w-36 h-14">
             Read more
           </button>
           <hr></hr>
-          <h1 className="text-3xl mt-20 mb-6 font-bold">Our latest work</h1>
-          <section
-            id="post-feed"
-            className="flex flex-col lg:w-1/3 md:flex-row"
-          >
-            {posts.map(({ node }, index) => (
-              // The tag below includes the markup for each post - components/common/PostCard.js
-              <PostCarousel key={node.id} post={node} number={index + 1} />
-            ))}
-          </section>
-          <hr></hr>
           <h1 className="text-3xl mt-20 font-bold">Campaigns & Projects</h1>
           <p className="text-base text-body-grey mt-6 mb-6">
             Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris