feature(app-blog-featured): update frontend for home view

PaulPaulDevelops · PaulPaulDevelops · commit 9f9111a0f282 · 2019-04-30T14:34:41.000-04:00
diff --git a/src/components/app-blog-featured/app-blog-featured.scss b/src/components/app-blog-featured/app-blog-featured.scss
@@ -18,9 +18,10 @@
     img {
       @include media-breakpoint-up(sm) {
         border-radius: 15px;
+        height: 100%;
+        margin-top: 2rem;
         object-fit: cover;
         width: 100%;
-        height: 100%;
       }
     }
   }
@@ -31,6 +32,10 @@
       &:hover {
         text-decoration: underline black;
       }
+
+      @include media-breakpoint-down(sm) {
+        margin-top: 2rem;
+      }
     }
 
     h4 {
@@ -45,7 +50,7 @@
   }
 
   p {
-    margin-bottom: 25px;
+    margin: 25px 0;
     font-size: 12px;
   }
 
diff --git a/src/components/app-blog-featured/app-blog-featured.tsx b/src/components/app-blog-featured/app-blog-featured.tsx
@@ -27,7 +27,7 @@ export class AppBlogFeatured {
               </div>
             </div>
             <div class="info col-md-6 order-md-1">
-              <h4>Featured Post</h4>
+              <h4>What's New in Our Blog</h4>
               <stencil-route-link url={`/blog/${this.blogPost.slug}`}>
                 <h2>{this.blogPost.title}</h2>
               </stencil-route-link>

Original file line number	Diff line number	Diff line change
`@@ -18,9 +18,10 @@`
`18`	`18`	`img {`
`19`	`19`	`@include media-breakpoint-up(sm) {`
`20`	`20`	`border-radius: 15px;`
	`21`	`+ height: 100%;`
	`22`	`+ margin-top: 2rem;`
`21`	`23`	`object-fit: cover;`
`22`	`24`	`width: 100%;`
`23`		`- height: 100%;`
`24`	`25`	`}`
`25`	`26`	`}`
`26`	`27`	`}`
`@@ -31,6 +32,10 @@`
`31`	`32`	`&:hover {`
`32`	`33`	`text-decoration: underline black;`
`33`	`34`	`}`
	`35`	`+`
	`36`	`+ @include media-breakpoint-down(sm) {`
	`37`	`+ margin-top: 2rem;`
	`38`	`+ }`
`34`	`39`	`}`
`35`	`40`
`36`	`41`	`h4 {`
`@@ -45,7 +50,7 @@`
`45`	`50`	`}`
`46`	`51`
`47`	`52`	`p {`
`48`		`- margin-bottom: 25px;`
	`53`	`+ margin: 25px 0;`
`49`	`54`	`font-size: 12px;`
`50`	`55`	`}`
`51`	`56`