Fix: Layout

Author: ameen4455

src/components/common/Layout.js

@@ -68,7 +68,7 @@ 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="md:mx-auto max-w-screen-xl px-4">
+            <div className="responsive-container px-4">
               <div className="flex items-center justify-between" id="site-mast">
                 <Link to="/">
                   {isHome ? null : (
@@ -110,30 +110,30 @@ const DefaultLayout = ({ data, children, bodyClass, isHome }) => {
               </div>
               {isHome ? (
                 <div id="site-banner" className="my-0 mx-auto">
-                  <img src="/images/logo.svg" className="h-28 mt-28" />
+                  <img src="/images/logo.svg" className=" w-72 mt-24" />
                   <h1
                     id=" site-banner-title"
-                    className="mt-12 font-bold text-2xl leading-7 not-italic max-w-lg"
+                    className="mt-12 text-white text-superheading not-italic max-w-2xl"
                   >
                     {localData.description}
                   </h1>
                   <p
                     id="site-banner-desc"
-                    className="my-4 max-w-lg text-body-grey text-xl leading-6 not-italic"
+                    className="mt-4 text-body-grey text-big-body not-italic max-w-2xl"
                   >
                     {localData.subDescription}
                   </p>
                   <p
                     id="site-banner-desc"
-                    className="my-4 max-w-lg text-body-grey text-xl leading-6 not-italic mb-14"
+                    className="mt-4 text-body-grey text-big-body not-italic max-w-2xl"
                   >
                     {localData.cta}
                   </p>
-                  <div id="action" className="mb-40">
-                    <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-36 h-14">
+                  <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">
                       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-8 rounded w-36 h-14">
+                    <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">
                       Subscribe
                     </button>
                   </div>

src/styles/global.css

@@ -32,7 +32,7 @@
   }
 
   .text-superheading {
-    @apply text-gray-900 text-7xl md:text-3xl font-semibold
+    @apply text-gray-900 text-2xl md:text-3xl font-semibold
   }
 
   .text-subheading-1 {

src/templates/index.js

@@ -30,10 +30,7 @@ const Index = ({ data, location, pageContext }) => {
     <>
       <MetaData location={location} />
       <Layout isHome={true}>
-        <div
-          id="container"
-          className="mt-20 my-0 ml-5 md:mx-auto text-left lg:max-w-4xl"
-        >
+        <div id="container" className="responsive-container mt-4 text-left">
           <h1 className="text-3xl mb-6 font-bold">Blogposts</h1>
           <section id="post-feed">
             {posts.map(({ node }, index) => (
@@ -51,7 +48,10 @@ const Index = ({ data, location, pageContext }) => {
           </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">
+          <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} />
@@ -80,7 +80,11 @@ const Index = ({ data, location, pageContext }) => {
           </section>
 
           <div className="flex items-center justify-center">
-            <button id="leftScroll" className="px-3" onClick={() => scroll(-200)}>
+            <button
+              id="leftScroll"
+              className="px-3"
+              onClick={() => scroll(-200)}
+            >
               <svg
                 width="32"
                 height="32"
@@ -104,7 +108,11 @@ const Index = ({ data, location, pageContext }) => {
                 />
               </svg>
             </button>
-            <button id="rightScroll" className="px-3" onClick={() => scroll(200)}>
+            <button
+              id="rightScroll"
+              className="px-3"
+              onClick={() => scroll(200)}
+            >
               <svg
                 width="32"
                 height="32"
@@ -129,7 +137,6 @@ const Index = ({ data, location, pageContext }) => {
               </svg>
             </button>
           </div>
-          
         </div>
 
       </Layout>
@@ -161,8 +168,9 @@ export const pageQuery = graphql`
       edges {
         node {
           ...GhostPostFields
-        } 
+        }
       }
     }
   }
 `;
+