fix(blog): style tweaks

Author: luiskcs89

src/components/app-blog-content/app-blog-content.scss

@@ -172,7 +172,14 @@
     text-align: center;
     margin-bottom: 20px;
 
+    @include media-breakpoint-down(md) {
+      text-align: left;
+      font-size: 24px;
+      margin-bottom: 40px;
+    }
+
     @include media-breakpoint-down(sm) {
+      text-align: center;
       font-size: 24px;
       margin-bottom: 40px;
     }

src/components/app-blog-content/app-blog-content.tsx

@@ -123,11 +123,11 @@ export class AppBlogContent {
           </div>
           <hr />
           <div class="row">
-            <div class="col-md-2 offset-md-2 blog-content-author-image">
+            <div class="col-md-3 col-lg-2 offset-md-1 offset-lg-2 blog-content-author-image">
               <h5>About the Author</h5>
               <img src={this.blogPost.author.profile_image} alt={`${this.blogPost.author.first_name} ${this.blogPost.author.last_name}`} />
             </div>
-            <div class="col-md-6 blog-content-author-text">
+            <div class="col-md-7 col-lg-6 blog-content-author-text">
               <h5>About the Author</h5>
               <h2>{`${this.blogPost.author.first_name} ${this.blogPost.author.last_name}`}</h2>
               <p class="text-left">{this.blogPost.author.bio}</p>

src/pages/app-blog-post/app-blog-post.scss

@@ -2,6 +2,10 @@
   margin-top: 70px;
   font-family: 'Muli';
 
+  a {
+    word-break: break-word;
+  }
+
   .blog-post-content {
     padding: 4%;
 

src/pages/app-blog/app-blog.scss

@@ -205,7 +205,9 @@
       display: flex;
 
       button {
-        height: 52px;
+        padding: 0;
+        border: 0;
+        background: transparent;
       }
     }