fix(home): style and image tweaks

Author: luiskcs89

src/assets/svg/home-animation-desktop.svg

@@ -13,6 +13,12 @@
     }
   }
 
+  .col-title {
+    @include media-breakpoint-down(sm) {
+      padding: 0;
+    }
+  }
+
   .featured-title {
     h2 {
       color: $gray-dark;

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

@@ -30,7 +30,7 @@ export class AppBlogFeaturedHome {
             </div>
           </div>
           <div class="row post">
-            <div class="col-lg-6 col-md-8">
+            <div class="col-lg-6 col-md-8 col-title">
               <div class="featured-post-title">
                 <stencil-route-link url={`/blog/${this.blogPost.slug}`}>
                   <h2 id="featured-blog-title">{this.blogPost.title}</h2>
@@ -72,7 +72,7 @@ export class AppBlogFeaturedHome {
 
           {this.blogPost1 ? (
             <div class="row post">
-              <div class="col-lg-6 col-md-8">
+              <div class="col-lg-6 col-md-8 col-title">
                 <div class="featured-post-title">
                   <stencil-route-link url={`/blog/${this.blogPost1.slug}`}>
                     <h2 id="featured-blog-title">{this.blogPost1.title}</h2>

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

@@ -171,7 +171,8 @@
       width: 100%;
 
       @include media-breakpoint-down(sm) {
-        max-width: none;
+        margin-left: auto;
+        margin-right: auto;
         position: initial;
         width: initial;
       }

src/components/app-footer/app-footer.scss

@@ -25,6 +25,7 @@ export class AppFooter {
                   <br />
                   <a href="mailto:hello@openforge.io">{translate('footer.address.email')}</a>
                   <br />
+                  <br class="d-none d-md-block" />
                   <stencil-route-link url="/service-level-agreement">{translate('footer.social.sla')}</stencil-route-link>
                   <br />
                   <stencil-route-link url="/service-level-agreement">{translate('footer.social.presskit')}</stencil-route-link>

src/components/app-footer/app-footer.tsx

@@ -42,11 +42,16 @@
       background: url('assets/svg/home-animation-desktop.svg') center center no-repeat;
       height: 542px;
       display: block;
+      background-size: cover;
 
       @include media-breakpoint-up(md) {
         display: block;
       }
 
+      @include media-breakpoint-down(md) {
+        background-size: contain;
+      }
+
       @include media-breakpoint-down(sm) {
         display: none;
       }
@@ -91,7 +96,7 @@
     h2 {
       color: $gray-dark;
       font-family: Muli;
-      font-size: 47px;
+      font-size: 45px;
       font-weight: 600;
       letter-spacing: 1.73px;
       line-height: 62px;