Merge pull request #4 from ameen4455/layout_fix

Add layout fix

Author: ameen4455

src/components/common/Layout.js

@@ -85,7 +85,7 @@ const DefaultLayout = ({ data, children, bodyClass, isHome }) => {
             </div>
           </header>
 
-          <main className="px-4 py-4 mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8 lg:pt-16" id="site-main">
+          <main id="site-main">
             {/* All the main content gets inserted here, index.js, post.js */}
             {children} 
           </main>

src/templates/blogs.js

@@ -19,8 +19,8 @@ const Blogs = ({ data, location, pageContext }) => {
       <MetaData data={data} location={location} type="blogs" />
       <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-3xl">
+          <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">
               Blogposts
             </h1>
           </div>
@@ -33,8 +33,8 @@ const Blogs = ({ data, location, pageContext }) => {
             </div> */}
           </div>
 
-          <div className="post-container">
-            <section className="post-feed max-w-3xl mx-auto">
+          <div className="m-4 mt-16">
+            <section className="post-feed max-w-3xl 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/post.js

@@ -32,8 +32,8 @@ const Post = ({ data, location }) => {
       <Layout>
         <div className="">
           <div className="bg-bg-black text-white">
-            <div className="px-4 py-4 mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8 lg:pt-16">
-              <div className="md:mx-auto text-left lg:max-w-4xl">
+            <div className="px-4 py-4 mx-auto md:max-w-full lg:max-w-screen-md 2xl:max-w-screen-lg lg:pt-16">
+              <div className="md:mx-auto text-left">
                 <div>
                   {post.tags.map((tag) => (
                     <span className="uppercase text-sm text-iff-orange font-bold mr-4">
@@ -102,7 +102,7 @@ const Post = ({ data, location }) => {
           </div>
 
           <article
-            className="mt-16 prose md:prose-lg lg:prose-lg prose-img:rounded-xl prose-img:shadow-xl mx-auto p-4"
+            className="mt-16 prose prose-img:rounded-xl prose-img:shadow-xl mx-auto lg:max-w-screen-md 2xl:max-w-screen-lg p-4"
             dangerouslySetInnerHTML={{ __html: post.html }}
           ></article>
         </div>