Merge pull request #154 from Web-Dev-Path/fix/blog-search-styling

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

components/blog/BlogPostsContainer.js

@@ -55,12 +55,14 @@ const BlogPostsContainer = ({
           )
         }
         {viewall && posts.length >= 3 ? (
-          <Link
-            className={styles.viewAll}
-            href={tag ? `/blog/category/${tag}` : '/blog/category/all'}
-          >
-            view all
-          </Link>
+          <Container>
+            <Link
+              className={styles.viewAll}
+              href={tag ? `/blog/category/${tag}` : '/blog/category/all'}
+            >
+              view all
+            </Link>
+          </Container>
         ) : null}
       </div>
     </RevealContentContainer>

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,24 +4,32 @@
 .blogContainer {
   display: flex;
   flex-direction: column;
+  margin: 3rem 0;
 }
 
 .viewAll {
   font-size: 1.5rem;
   font-weight: bold;
-  margin: -6rem 6.5rem 4rem 0;
-  text-align: right;
+  position: relative;
+  top: -3rem;
+  display: block;
+  text-align: center;
 
-  @include mobile {
-    text-align: center;
-    margin: -5rem auto 4rem auto;
+  @include desktop {
+    float: right;
+    top: -5rem;
   }
 }
 
 .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;
   }