fix(blog): makes newsletter email field clickable

#363

Author: daftclaud

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

@@ -2,7 +2,7 @@
   text-align: left;
 
   padding: 0 6rem;
-  
+
   h1 {
     @include media-breakpoint-down(md) {
       padding: 20px 0;
@@ -13,12 +13,12 @@
     margin-bottom: 10px;
   }
 
-  .--date {
+  &--date {
     color: #6d6e71;
     font-size: 12px;
   }
 
-  .--author {
+  &--author {
     align-items: center;
     display: flex;
     flex-direction: row;
@@ -37,7 +37,7 @@
     }
   }
 
-  .--main-image {
+  &--main-image {
     border-radius: 35px;
     padding: 2%;
     width: 100%;
@@ -47,7 +47,6 @@
     text-align: center;
     padding: 0 1rem;
   }
-
 }
 
 .content {
@@ -123,4 +122,4 @@
   img {
     width: 20px;
   }
-}
+}

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

@@ -77,17 +77,19 @@ export class AppBlogContent {
           <h1>{this.blogPost.title}</h1>
           <p>{this.blogPost.summary}</p>
           <div>
-            <div class="--date">{formatDate(publishDate)}</div>
-            <div class="--author">
+            <div class="header--date">{formatDate(publishDate)}</div>
+            <div class="header--author">
               <img src={this.blogPost.author.profile_image} />
               <div>
                 By &nbsp;
                 <stencil-route-link url={`/about/${this.blogPost.author.slug}`}>{`${this.blogPost.author.first_name} ${this.blogPost.author.last_name}`}</stencil-route-link>
               </div>
             </div>
           </div>
-          <div class="contact-icons-top" id="contact-icons-top">{contactIconsTop}</div>
-          <img class="--main-image" src={this.blogPost.featured_image} />
+          <div class="contact-icons-top" id="contact-icons-top">
+            {contactIconsTop}
+          </div>
+          <img class="header--main-image" src={this.blogPost.featured_image} />
         </div>
         <div class="content">
           <div class="row">

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

@@ -17,7 +17,7 @@
 
     .form-row-content {
       @include media-breakpoint-up(sm) {
-        position: fixed;
+        // position: fixed; this caused the input field to become unclickable
         z-index: -1;
       }
 
@@ -166,7 +166,7 @@
 
         @include media-breakpoint-down(sm) {
           text-decoration: none;
-          border-bottom: 3px solid
+          border-bottom: 3px solid;
         }
       }