From fe5a12592b22276af324dfbbfc0c312277340cd1 Mon Sep 17 00:00:00 2001
From: John Hess <johnhess@johns-mbp.lan>
Date: Mon, 10 Oct 2022 16:00:01 -0500
Subject: [PATCH] pixel pushing

---
 _data/home.yml               |  2 +-
 _scss/helpers/utilities.scss | 10 ++++++----
 _scss/helpers/variables.scss |  3 +--
 _scss/pages/home.scss        | 27 +++++++++++++++------------
 4 files changed, 23 insertions(+), 19 deletions(-)

diff --git a/_data/home.yml b/_data/home.yml
index ecbd612..4aa694e 100644
--- a/_data/home.yml
+++ b/_data/home.yml
@@ -2,7 +2,7 @@
 # To specify per-language data, use the _i18n folder's yml files.
 
 page_logo: '/assets/images/btr-logo.svg'
-app_tiles_image: '/assets/images/butter-collection-features-offline-essentials.svg'
+app_tiles_image: '/assets/images/btr-apps.png'
 
 modal:
   butter_app_logo: '/assets/images/butter-app-icon-large.svg'
diff --git a/_scss/helpers/utilities.scss b/_scss/helpers/utilities.scss
index 2678565..3319ac9 100644
--- a/_scss/helpers/utilities.scss
+++ b/_scss/helpers/utilities.scss
@@ -21,6 +21,7 @@ body {
 }
 
 .main-area {
+  min-width: 375px;
   max-width: 500px;
   margin: 0 auto;
   overflow: hidden;
@@ -72,14 +73,15 @@ body {
   .btn-split {
     display: inline-flex;
     .btn-logo {
-      border-right: 1pt;
-      border-right-color: black;
-      border-right-style: solid;
+      margin: auto 0px;
       height: 60px;
     }
     .btn-text {
+      border-left: 1pt;
+      border-left-color: black;
+      border-left-style: solid;
       text-align: left;
-      padding: 0px 20px;
+      padding: 12px 20px;
       height: fit-content;
       margin: auto;
       .button-main-text {
diff --git a/_scss/helpers/variables.scss b/_scss/helpers/variables.scss
index 33c08ec..c59d3a7 100644
--- a/_scss/helpers/variables.scss
+++ b/_scss/helpers/variables.scss
@@ -2,8 +2,7 @@
 $white:      #ffffff;
 $black:      #000000;
 $dark-gray:  #242424;
-$light-gray:  #D9D9D9;
-$lighter-gray:  #EEE;
+$light-gray:  #EEE;
 
 // Brand colors
 $gold:       #FFDF3F;
diff --git a/_scss/pages/home.scss b/_scss/pages/home.scss
index 3e4ee78..2994364 100644
--- a/_scss/pages/home.scss
+++ b/_scss/pages/home.scss
@@ -77,10 +77,11 @@ a:active {
 // -------------------------
 .content-area {
   background-color: white;
-  border-top-left-radius: 50vw;
-  border-top-right-radius: 50vw;
-  border-bottom-left-radius: 50vw;
-  border-bottom-right-radius: 50vw;
+  // This makes the radius as large as a pill shape can be.
+  border-top-left-radius: 9999px;
+  border-top-right-radius: 9999px;
+  border-bottom-left-radius: 9999px;
+  border-bottom-right-radius: 9999px;
   padding-bottom: Min(50vw, 250px);
   &-topper {
     margin-top: 175px;
@@ -93,6 +94,7 @@ a:active {
       height: auto;
     }
     .content-title {
+      margin-top: 25px;
       margin-left: 15%;
       margin-right: 15%;
       font-size: 36px;
@@ -103,7 +105,6 @@ a:active {
     }
   }
   &-wrapper {
-    margin-top: 30px;
     margin-bottom: 30px;
     margin-left: 30px;
     margin-right: 30px;
@@ -155,7 +156,7 @@ a:active {
       transition: transform .25s ease-out;
     } 
     .content-expander {
-      border-bottom-color: $lighter-gray;
+      border-bottom-color: $light-gray;
       border-bottom-style: solid;
       border-bottom-width: 2px;
       padding: 10px;
@@ -191,7 +192,7 @@ a:active {
       margin-top: 5px;
       text-align: left;
       font-size: 13px;
-      border-bottom-color: $lighter-gray;
+      border-bottom-color: $light-gray;
       border-bottom-style: solid;
       border-bottom-width: 2px;
     }
@@ -199,20 +200,22 @@ a:active {
       img {
         margin-top: 10px;
         position: relative;
-        left: -20vw;
-        width: 150%;
+        left: -40px;
+        // Bleed to the edges of the main section.
+        width: calc(100% + 80px);
+        height: auto;
       }
     }
   }
 }
 
 // -------------------------
-// Footer Styles
+// Button Styles
 // -------------------------
 
 .btn-android {
-  margin: 17.5px 15px 17.5px 0px;
-  height: 25px;
+  margin: 15px 15px 15px 0px;
+  height: 30px;
   width: auto;
 }