From 98188157affc5366f7b70d4e9edc5d89a8adb47e Mon Sep 17 00:00:00 2001
From: RJ Spiker <spiker.rj@gmail.com>
Date: Fri, 22 Jun 2018 14:50:29 -0600
Subject: [PATCH] website - various styling bug fixes and updates

---
 .../javascripts/consul-connect/carousel.js     |  2 +-
 .../consul-connect/components/_section.scss    |  4 ++++
 .../consul-connect/components/_text-asset.scss | 11 ++++++++++-
 .../consul-connect/components/_timeline.scss   |  4 ++++
 .../consul-connect/components/_use-cases.scss  |  4 ++++
 .../consul-connect/pages/_home.scss            | 18 ++++++------------
 website/source/index.html.erb                  |  2 +-
 7 files changed, 30 insertions(+), 15 deletions(-)

diff --git a/website/source/assets/javascripts/consul-connect/carousel.js b/website/source/assets/javascripts/consul-connect/carousel.js
index 6a4a323870..c42e9b2550 100644
--- a/website/source/assets/javascripts/consul-connect/carousel.js
+++ b/website/source/assets/javascripts/consul-connect/carousel.js
@@ -11,7 +11,7 @@ var carousel = new Siema({
   threshold: 20,
   loop: true,
   rtl: false,
-  onChange: () => {
+  onChange: function() {
     for (var i = 0; i < dots.length; i++) {
       dots[i].classList.remove('active')
     }
diff --git a/website/source/assets/stylesheets/consul-connect/components/_section.scss b/website/source/assets/stylesheets/consul-connect/components/_section.scss
index 142337c3e8..6e98d10359 100644
--- a/website/source/assets/stylesheets/consul-connect/components/_section.scss
+++ b/website/source/assets/stylesheets/consul-connect/components/_section.scss
@@ -6,6 +6,10 @@
     padding: 96px 0;
   }
 
+  @media (min-width: 992px) {
+    padding: 120px 0;
+  }
+
   &.bg-light {
     background: #f7f8fa !important; //TODO - !important is to override the `#page-home section` #fff background;
   }
diff --git a/website/source/assets/stylesheets/consul-connect/components/_text-asset.scss b/website/source/assets/stylesheets/consul-connect/components/_text-asset.scss
index a14fd4c542..7af8785d66 100644
--- a/website/source/assets/stylesheets/consul-connect/components/_text-asset.scss
+++ b/website/source/assets/stylesheets/consul-connect/components/_text-asset.scss
@@ -32,6 +32,10 @@
       margin-bottom: -96px;
     }
 
+    @media (min-width: 992px) {
+      margin-bottom: -120px;
+    }
+
     img {
       width: 145%;
     }
@@ -143,7 +147,12 @@
         flex-direction: column;
 
         & img {
-          margin: 29px 0;
+          margin: 30px 0;
+
+          @media (max-width: 767px) {
+            margin: 15px 0;
+            max-width: 51%;
+          }
         }
       }
     }
diff --git a/website/source/assets/stylesheets/consul-connect/components/_timeline.scss b/website/source/assets/stylesheets/consul-connect/components/_timeline.scss
index 231689f91d..f15670a7ee 100644
--- a/website/source/assets/stylesheets/consul-connect/components/_timeline.scss
+++ b/website/source/assets/stylesheets/consul-connect/components/_timeline.scss
@@ -18,6 +18,10 @@
     @media (min-width: 768px) {
       margin-top: -90px;
     }
+
+    @media (min-width: 992px) {
+      margin-top: -116px;
+    }
   }
 
   & > div {
diff --git a/website/source/assets/stylesheets/consul-connect/components/_use-cases.scss b/website/source/assets/stylesheets/consul-connect/components/_use-cases.scss
index 9c8b4340e9..8619790276 100644
--- a/website/source/assets/stylesheets/consul-connect/components/_use-cases.scss
+++ b/website/source/assets/stylesheets/consul-connect/components/_use-cases.scss
@@ -7,6 +7,10 @@
     margin: 0 (-$site-gutter-padding);
   }
 
+  img {
+    width: 51%;
+  }
+
   h3 {
     font-weight: 800;
     margin: 40px 0 0;
diff --git a/website/source/assets/stylesheets/consul-connect/pages/_home.scss b/website/source/assets/stylesheets/consul-connect/pages/_home.scss
index 50b76e8e88..c936b661a3 100644
--- a/website/source/assets/stylesheets/consul-connect/pages/_home.scss
+++ b/website/source/assets/stylesheets/consul-connect/pages/_home.scss
@@ -8,7 +8,7 @@
     }
 
     @media (min-width: 992px) {
-      padding-top: 120px;
+      padding-top: 80px;
       padding-bottom: 100px;
     }
 
@@ -131,7 +131,7 @@
           }
 
           .secondary-link {
-            border-bottom: 2px dashed $consul-red;
+            border-bottom: 1px dashed $consul-red;
             color: $consul-black;
             display: inline-block;
             font-size: 1.4rem;
@@ -233,6 +233,7 @@
       width: 100%;
 
       @media (min-width: 768px) {
+        margin-bottom: -152px;
         padding-top: calc((100% * 0.63569) + 38px);
       }
 
@@ -346,10 +347,9 @@
   }
 
   #static-dynamic {
-    padding-top: 158px;
-
-    @media (min-width: 992px) {
-      padding-top: 56px;
+    
+    @media (max-width: 991px) {
+      padding-top: 212px;
     }
 
     .static-callout {
@@ -367,12 +367,6 @@
     }
   }
 
-  #use-cases {
-    .g-use-cases img {
-      width: 51%;
-    }
-  }
-
   .home-cta-section {
     color: $white;
 
diff --git a/website/source/index.html.erb b/website/source/index.html.erb
index b69b41b366..827eb0743c 100644
--- a/website/source/index.html.erb
+++ b/website/source/index.html.erb
@@ -143,7 +143,7 @@ description: |-
     </div>
   </section>
 
-  <section class='g-section bg-light border-top'>
+  <section class='g-section bg-light'>
     <div class='g-container'>
       <div class='intro'>
         <h2>Consul Principles</h2>