Merge pull request #271 from BitcoinDesign/feature/home-banner-background-image

Add home page banner full-width background images option

Author: GBKS

_compress_images_cache.yml

@@ -547,6 +547,10 @@ assets/images/guide/payments/transactions/transactions-mobile.jpg: transactions-
 assets/images/guide/payments/transactions/transactions-mobile@2x.jpg: transactions-mobile@2x.jpg
 assets/images/guide/onboarding/getting-to-know-your-users-mobile@2x.jpg: getting-to-know-your-users-mobile@2x.jpg
 assets/images/guide/onboarding/getting-to-know-your-users-mobile.jpg: getting-to-know-your-users-mobile.jpg
+assets/images/home/banner/the-meta-future-mobile.jpg: the-meta-future-mobile.jpg
+assets/images/home/banner/the-meta-future-mobile@2x.jpg: the-meta-future-mobile@2x.jpg
+assets/images/home/banner/the-meta-future.jpg: the-meta-future.jpg
+assets/images/home/banner/the-meta-future@2x.jpg: the-meta-future@2x.jpg
 assets/images/guide/getting-started/common-user-flows/muun-onboarding-1.png: muun-onboarding-1.png
 assets/images/guide/getting-started/common-user-flows/muun-onboarding-10.png: muun-onboarding-10.png
 assets/images/guide/getting-started/common-user-flows/muun-onboarding-10@2x.png: muun-onboarding-10@2x.png

_sass/minima/_home-banner.scss

@@ -6,6 +6,16 @@
   max-width: 1680px;
   margin-left: auto;
   margin-right: auto;
+  background-color: var(--banner-background-color);
+  background-image: var(--banner-background-path-mobile);
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center top;
+  transition: background-color 150ms $ease;
+
+  @include retina() {
+    background-image: var(--banner-background-path-mobile-retina);
+  }
 
   .home-banner-copy-wrapper {
     background-color: var(--copy-background-color);
@@ -78,15 +88,15 @@
   .home-banner-image {
     width: 100%;
     padding-bottom: 100%;
-    background-color: var(--background-image-color);
-    background-image: var(--background-image-path-mobile);
+    background-color: var(--banner-image-color);
+    background-image: var(--banner-image-path-mobile);
     background-size:     cover;
     background-repeat:   no-repeat;
     background-position: center center;
     transition: background-color 150ms $ease;
 
     @include retina() {
-      background-image: var(--background-image-path-mobile-retina);
+      background-image: var(--banner-image-path-mobile-retina);
     }
   }
 
@@ -112,12 +122,18 @@
     display: flex;
     flex-direction: row;
     align-items: stretch;
+    background-image: var(--banner-background-path);
+    background-position: center center;
+
+    @include retina() {
+      background-image: var(--banner-background-path-retina);
+    }
 
     .home-banner-image {
-      background-image: var(--background-image-path);
+      background-image: var(--banner-image-path);
 
       @include retina() {
-        background-image: var(--background-image-path-retina);
+        background-image: var(--banner-image-path-retina);
       }
     }