fix(): fix 3,4 & 5

Author: Fdom92

scripts/get-butter.js

@@ -2,7 +2,7 @@ const fs = require('fs');
 
 const request = require('sync-request');
 const res = request('GET', 
-    'https://api.buttercms.com/v2/posts/?page=1&page_size=1000000&auth_token=fca1bc914c05371263f98c9d3480eaa215fd63d6', 
+    'https://api.buttercms.com/v2/posts/?page=1&page_size=1000000&auth_token=150aed013009daf59b81dd9ad8d7aac75777ee79', 
     {}
 );
 

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

@@ -10,6 +10,10 @@
       text-align: center;
       padding: 15px;
     }
+
+    &:hover {
+      text-decoration: underline black;
+    }
   }
 
   .blog-card-image {

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

@@ -61,6 +61,13 @@
   }
 
   .blog-info {
+    h1 {
+      color: black;
+      &:hover {
+        text-decoration: underline black;
+      }
+    }
+
     @include media-breakpoint-down(sm) {
       text-align: center;
     }

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

@@ -22,12 +22,16 @@ export class AppBlogFeatured {
             <div class="blog-featured-image-wrapper col-md-6 order-md-2">
               <h4>Featured Post</h4>
               <div class="blog-featured-image">
-                <img src={this.blogPost.featured_image} />
+                <stencil-route-link url={`/blog/${this.blogPost.slug}`}>
+                  <img src={this.blogPost.featured_image} />
+                </stencil-route-link>
               </div>
             </div>
             <div class="blog-info col-md-6 order-md-1">
               <h4>Featured Post</h4>
-              <h1>{this.blogPost.title}</h1>
+              <stencil-route-link url={`/blog/${this.blogPost.slug}`}>
+                <h1>{this.blogPost.title}</h1>
+              </stencil-route-link>
 
               <div class="blog-featured-summary">{this.blogPost.summary}</div>
               <div class="blog-featured-date">{formatDate(publishDate)}</div>

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

@@ -125,12 +125,12 @@
 
   .blog-card-wrapper {
     min-height: 300px;
-    margin-bottom: 20px;
+    margin-bottom: 50px;
   }
 
   .blog-card-wrapper-last {
     min-height: 300px;
-    margin-bottom: 0;
+    margin-bottom: 20px;
   }
 }
 
@@ -149,6 +149,7 @@
     .blog-page-item .active {
       padding: 7px;
       color: $orange;
+      text-decoration: underline $orange;
     }
   }
 }

src/pages/open-forge-app/open-forge-app.tsx

@@ -25,7 +25,7 @@ export class OpenForgeApp {
   }
 
   componentWillLoad() {
-    this.butterService = Butter('fca1bc914c05371263f98c9d3480eaa215fd63d6');
+    this.butterService = Butter('150aed013009daf59b81dd9ad8d7aac75777ee79');
   }
 
   componentDidLoad() {