Improve styles when subscribers feature is not enabled

package.json

@@ -54,5 +54,5 @@
     "desktop": "assets/screenshot-desktop.jpg",
     "mobile": "assets/screenshot-mobile.jpg"
   },
-  "version": "0.1.6"
+  "version": "0.1.7"
 }

partials/loop.hbs

@@ -47,7 +47,7 @@
     </div>
   {{/is}}
   {{else}}
-    <header class="m-heading">
+    <header class="m-heading no-margin">
       <h3>No posts found</h3>
       <p>
         Apparently there are no posts at the moment, check again later.

post.hbs

@@ -84,7 +84,11 @@ into the {body} of the default.hbs template --}}
           </div>
         </section>
         {{/if}}
+        {{#if @labs.subscribers}}
         <section class="m-author">
+        {{else}}
+        <section class="m-author no-subscribers">
+        {{/if}}
           <div class="m-author__content">
             <div class="m-author__picture">
               <a href="{{primary_author.url}}" class="m-author-picture" aria-label="Author picture">

src/sass/app.scss

@@ -44,6 +44,7 @@
 @import "components/articles/article-card";
 @import "components/articles/featured-slider";
 @import "components/articles/featured-article";
+@import "components/articles/recommended";
 @import "components/articles/recommended-articles";
 @import "components/articles/recommended-slider";
 @import "components/articles/share";

src/sass/common/_global.scss

@@ -9,6 +9,7 @@ body {
   font-size: 1rem;
   font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
   font-display: swap;
+  overflow-x: hidden;
   background-color: white;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;

src/sass/components/articles/_recommended.scss

@@ -0,0 +1,7 @@
+.m-recommended {
+  padding-top: 40px;
+
+  @include respond-to('medium') {
+    padding-top: 60px;
+  }
+}

src/sass/components/author/_author.scss

@@ -1,5 +1,9 @@
 .m-author {
   padding: 40px $mobile-space;
+  border-color: $light-blue;
+  border-top-width: 2px;
+  border-bottom-width: 2px;
+  border-style: solid;
   margin: 0 auto;
 
   @include respond-to('medium') {
@@ -11,6 +15,10 @@
   @include respond-to('extra-large') {
     padding: 60px 0;
   }
+
+  &.no-subscribers {
+    background-color: $light-blue;
+  }
 }
 
 .m-author__content {

src/sass/components/heading/_heading.scss

@@ -11,4 +11,8 @@
       margin-bottom: 50px;
     }
   }
+
+  &.no-margin {
+    margin-bottom: 0 !important;
+  }
 }

src/sass/layouts/_post-content.scss

@@ -1,11 +1,9 @@
 .l-post-content {
+  padding-bottom: 15px;
+
   @include respond-to('medium') {
     max-width: 820px;
     margin: 0 auto;
-  }
-
-  &.has-subscribe-form {
-    padding-bottom: 15px;
 
     @include respond-to('medium') {
       padding-bottom: 30px;
@@ -184,6 +182,15 @@
       }
     }
 
+    &.kg-width-full {
+      @include respond-to('medium') {
+        width: 100vw;
+        margin-left: 50%;
+
+        @include transform(translateX(-50%));
+      }
+    }
+
     img,
     .kg-image {
       display: block;