Adjusting blog container and titles styling

Author: mariana-caldas

CHANGELOG.md

@@ -82,11 +82,12 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 ## Unreleased
 
 ### Added
+
 - Blog page which pulls content from dev.to
 
 ### Fixed
 
 - replaced next/legacy/image with next/image
 - removed unused function in api/register.js
 - adjusted contact form message on mobile
-
+- blog container and title styling

pages/blog/index.js

@@ -15,9 +15,7 @@ export default function Blog({ posts }) {
     <>
       <div className={styles.blogSearch}>
         <Title customClass='blogTitle' title='Latest Posts' />
-        {/*
-          <SearchBar />
-        */}
+        {/* <SearchBar /> */}
       </div>
       <BlogPostsContainer posts={latestPosts} />
       <BlogPostsContainer posts={nextJsPosts} tag='nextjs' />

styles/Blog.module.scss

@@ -4,6 +4,7 @@
 .blogContainer {
   display: flex;
   flex-direction: column;
+  margin: 3rem 0;
 }
 
 .viewAll {
@@ -20,8 +21,13 @@
 
 .blogSearch {
   display: flex;
-  justify-content: space-between;
   align-items: center;
+  padding-top: 2.5rem;
+  margin-bottom: -2.5rem;
+  //TO-DO: Add the style below back when implementing search functionality
+  // margin: 0 auto;
+  // width: 90%;
+  // max-width: $large-desktop-breakpoint;
 
   @include mobile {
     flex-direction: column-reverse;

styles/CardsColumns.module.scss

@@ -14,7 +14,6 @@
 
   .swiper {
     margin-bottom: 5rem;
-    padding: 0 1rem;
 
     :global(.swiper-pagination-bullet-active) {
       background-color: $dark-bg-color;

styles/SearchBar.module.scss

@@ -11,21 +11,9 @@
   box-shadow: 2px 4px 8px 3px rgba(0, 0, 0, 0.08);
   font-size: 1.2rem;
 
-  @include tablet {
-    margin-right: 4rem;
-  }
-
-  @include desktop {
-    margin-right: 4.5rem;
-  }
-
-  @include medium-desktop {
-    margin-right: 6rem;
-  }
-
   @include mobile {
     width: 80%;
-    margin: 3rem auto 0 auto;
+    margin: 3rem auto;
   }
 
   input[type='search'] {

styles/Title.module.scss

@@ -4,7 +4,7 @@
 .title {
   &.blogTitle {
     align-self: flex-start;
-    margin: 0 auto;
+    margin: 0 auto 1rem;
     width: 90%;
     max-width: $large-desktop-breakpoint;
   }