website - various styling bug fixes and updates

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')
     }

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;
   }

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%;
+          }
         }
       }
     }

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 {

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;

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;
 

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>