update stylings

Author: cherylli

components/blog/BlogPostsContainer.js

@@ -5,6 +5,7 @@ import Link from 'next/link';
 import styles from '@/styles/Blog.module.scss';
 import RevealContentContainer from '@/components/containers/RevealContentContainer';
 import { tagToHeading } from '@/utils/blogCategories';
+import Container from '@/components/containers/Container';
 
 function* splitPosts(arr, n) {
   for (let i = 0; i < arr.length; i += n) {
@@ -44,11 +45,13 @@ const BlogPostsContainer = ({
               ))}
             </>
           ) : (
-            <div className={styles.postContainer}>
-              {posts.map((p, index) => (
-                <Card customClass='blog' key={index} card={p} />
-              ))}
-            </div>
+            <Container>
+              <div className={styles.postContainer}>
+                {posts.map((p, index) => (
+                  <Card customClass='blog' key={index} card={p} />
+                ))}
+              </div>
+            </Container>
           )
         }
         {viewall ? (

components/snippets/Title.js

@@ -1,7 +1,8 @@
 import styles from '@/styles/Title.module.scss';
+import Container from '@/components/containers/Container';
 
 const Title = ({ title, customClass }) => {
-  return (
+  const Content = () => (
     <h2
       className={
         customClass ? `${styles.title} ${styles[customClass]}` : styles.title
@@ -10,6 +11,14 @@ const Title = ({ title, customClass }) => {
       {title}
     </h2>
   );
+
+  return customClass === 'blogTitle' ? (
+    <Container>
+      <Content />
+    </Container>
+  ) : (
+    <Content />
+  );
 };
 
 export default Title;

pages/blog/index.js

@@ -12,7 +12,7 @@ export default function Blog({ posts }) {
   );
 
   return (
-    <Container>
+    <>
       <div className={styles.blogSearch}>
         <Title customClass='blogTitle' title='Latest Posts' />
         {/*
@@ -22,7 +22,7 @@ export default function Blog({ posts }) {
       <BlogPostsContainer posts={latestPosts} />
       <BlogPostsContainer posts={nextJsPosts} tag='nextjs' />
       <BlogPostsContainer posts={typescriptPosts} tag='typescript' />
-    </Container>
+    </>
   );
 }
 

styles/Blog.module.scss

@@ -45,7 +45,6 @@
 
   @include desktop {
     justify-content: flex-start;
-    margin-left: 4rem;
   }
 }
 
@@ -59,7 +58,8 @@
   }
 
   @include desktop {
-    flex-basis: 22%;
+    flex-basis: 32%;
+    max-width: 200px;
   }
 }
 

styles/Card.module.scss

@@ -116,6 +116,7 @@
   }
 
   &.blog {
+    margin: 1rem 0.5rem 0 0.5rem;
     .card__image {
       height: 12rem;
     }

styles/Title.module.scss

@@ -4,22 +4,5 @@
 .title {
   &.blogTitle {
     align-self: flex-start;
-
-    @include mobile {
-      margin-left: 5rem;
-      font-size: 2.5rem;
-    }
-
-    @include tablet {
-      margin-left: 5.5rem;
-    }
-
-    @include desktop {
-      margin-left: 6.5rem;
-    }
-
-    @include medium-desktop {
-      margin-left: 7.5rem;
-    }
   }
 }