From 907ffa8ff1b08c0220f44ee9af3d919a4a839efc Mon Sep 17 00:00:00 2001
From: Eric <eashaw@sailsjs.com>
Date: Tue, 12 Jul 2022 16:24:15 -0500
Subject: [PATCH] Website: update sticky homepage header on smaller screens
 (#6626)

* update homepage mobile styles

* website: update sticky header function

* lint fix
---
 website/assets/styles/layout.less         |  2 +-
 website/assets/styles/pages/homepage.less | 33 +++++++++++++---
 website/views/layouts/layout.ejs          | 47 ++++++++++-------------
 website/views/pages/homepage.ejs          |  4 +-
 4 files changed, 51 insertions(+), 35 deletions(-)

diff --git a/website/assets/styles/layout.less b/website/assets/styles/layout.less
index 231a8f633c..ee4a20d07d 100644
--- a/website/assets/styles/layout.less
+++ b/website/assets/styles/layout.less
@@ -299,5 +299,5 @@ body.detected-mobile {
 
 // Some utilities for the sticky nav behaviour
 .translate-y-0 {
-    transform: translateY(-210px);
+    transform: translateY(-235px);
 }
diff --git a/website/assets/styles/pages/homepage.less b/website/assets/styles/pages/homepage.less
index 2687b3a588..35f6fb50e0 100644
--- a/website/assets/styles/pages/homepage.less
+++ b/website/assets/styles/pages/homepage.less
@@ -106,6 +106,9 @@
     padding: 27px 87px 34px 87px;
     img {
       margin-right: 60px;
+      height: auto;
+      width: 100%;
+      max-width: 309px;
     }
     a {
       font-weight: 400;
@@ -141,6 +144,9 @@
   }
 
   @media (max-width: 990px) {
+    [purpose='hero-banner'] {
+      padding-top: 172px;
+    }
     [purpose='tweets'] {
       [purpose='tweet-card'] {
         flex: 1 1 295px;
@@ -170,7 +176,7 @@
 
   }
 
-  @media (max-width: 768px) {
+  @media (max-width: 769px) {
     [purpose='tweets'] {
       padding-left: 52px;
       padding-right: 52px;
@@ -182,7 +188,7 @@
       background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 23%, rgba(255, 255, 255, 0) 48%, rgba(255, 255, 255, 0) 100%);
     }
     [purpose='hero-banner'] {
-      padding-top: 172px;
+      padding-top: 222px;
     }
     [purpose='report-banner-container'] {
       padding-right: 15px;
@@ -198,6 +204,11 @@
       };
     }
   }
+  @media (max-width: 605px) {
+    [purpose='hero-banner'] {
+      padding-top: 242px;
+    }
+  }
 
   @media (max-width: 600px) {
     [purpose='log-destination'] {
@@ -205,12 +216,13 @@
       p {
         display: none;
       }
+
     }
   }
 
-  @media (max-width: 576px) {
+  @media (max-width: 575px) {
     h1 {
-      font-size: 32px;
+      font-size: 28px;
       line-height: 36px;
     }
     h6 {
@@ -228,14 +240,23 @@
       }
     }
     [purpose='hero-banner'] {
-      padding-top: 192px;
+      padding-top: 216px;
+    }
+  }
+  @media (max-width: 395px) {
+    [purpose='hero-banner'] {
+      padding-top: 236px;
     }
   }
-
   @media (max-width: 355px) {
     [purpose='log-destination'] {
       flex-basis: 80px;
     }
   }
+  @media (max-width: 330px) {
+    [purpose='hero-banner'] {
+      padding-top: 256px;
+    }
+  }
 
 }
diff --git a/website/views/layouts/layout.ejs b/website/views/layouts/layout.ejs
index 2fdbc0a593..03cf142e02 100644
--- a/website/views/layouts/layout.ejs
+++ b/website/views/layouts/layout.ejs
@@ -106,7 +106,7 @@
           <a href="/" style="max-width: 118px;">
             <% /* The homepage-header on the homepage has a white fleet logo */ %>
             <% if (isHomepage) { %>
-            <img alt="Fleet logo" src="/images/logo-white-118x48@2x.png" style="width: 118px; height: 48px;"/>
+            <img alt="Fleet logo" src="/images/logo-white-162x92@2x.png" style="width: 162px; height: 92px;"/>
             <% } else { %>
             <img alt="Fleet logo" src="/images/logo-blue-162x92@2x.png" style="height: 92px; width: 162px;"/>
             <% } %>
@@ -321,7 +321,7 @@
 
     <%/* Stripe.js */%>
     <script src="https://js.stripe.com/v3/"></script>
-    
+
     <%/* Linkedin Ads Insight tag */%>
     <script type="text/javascript">
     _linkedin_partner_id = "4365817";
@@ -349,34 +349,29 @@
     <script>
         var lastScrollTop = 0;
         var header = document.querySelector('.header') || document.querySelector('.homepage-header')
-
         window.addEventListener('scroll', windowScrolled)
 
         function windowScrolled() {
-            var scrollTop = window.pageYOffset || document.documentElement.scrollTop
-            var fleetLogo = header.querySelector('img')
-            var hamburgerMenuIcon = header.querySelector('.btn.btn-link > img')
-
-            if(scrollTop == 0 && header.classList.contains('homepage-header')) {
-                header.classList.remove('sticky')
-                fleetLogo.src = '/images/logo-white-118x48@2x.png'
-                fleetLogo.style = 'width: 118px; height: 48px;'
-                hamburgerMenuIcon.src = '/images/icon-hamburger-16x14@2x.png'
-
-                return;
+          var scrollTop = window.pageYOffset || document.documentElement.scrollTop
+          var fleetLogo = header.querySelector('img')
+          var hamburgerMenuIcon = header.querySelector('.btn.btn-link > img')
+          if(scrollTop == 0 && header.classList.contains('homepage-header')) {
+              header.classList.remove('sticky')
+              fleetLogo.src = '/images/logo-white-162x92@2x.png'
+              hamburgerMenuIcon.src = '/images/icon-hamburger-16x14@2x.png'
+              return;
+          }
+          if(scrollTop > lastScrollTop && scrollTop > window.innerHeight * 1.5) {
+            header.classList.add('translate-y-0');
+          } else {
+            if(header.classList.contains('homepage-header') && scrollTop > 16) {
+              header.classList.add('sticky')
+              fleetLogo.src = '/images/logo-blue-162x92@2x.png'
+              hamburgerMenuIcon.src="/images/icon-hamburger-blue-16x14@2x.png"
             }
-            if (scrollTop > lastScrollTop && scrollTop > window.innerHeight * 1.5) {
-                header.classList.add('translate-y-0');
-             } else {
-                if(header.classList.contains('homepage-header') && scrollTop > header.clientHeight) {
-                    header.classList.add('sticky')
-                    fleetLogo.src = '/images/logo-blue-162x92@2x.png'
-                    fleetLogo.style = 'height: 92px; width: 162px;'
-                    hamburgerMenuIcon.src="/images/icon-hamburger-blue-16x14@2x.png"
-                }
-                header.classList.remove('translate-y-0');
-            }
-            lastScrollTop = scrollTop
+              header.classList.remove('translate-y-0');
+          }
+          lastScrollTop = scrollTop;
         }
     </script>
 
diff --git a/website/views/pages/homepage.ejs b/website/views/pages/homepage.ejs
index ae4a2e768c..5ea6edf1d4 100644
--- a/website/views/pages/homepage.ejs
+++ b/website/views/pages/homepage.ejs
@@ -4,7 +4,7 @@
     <div purpose="hero-banner">
       <div purpose="hero-clouds">
         <div class="container-lg">
-          <div class="container-fluid text-center pt-3 pt-sm-5">
+          <div class="container-fluid text-center">
             <h1>
               Open source <br>
               device management.
@@ -139,7 +139,7 @@
   </div>
   <div purpose="report-banner-container">
     <div purpose="report-banner-cta" class="d-flex flex-column flex-lg-row justify-content-center align-items-center container">
-      <img class="mb-3 mb-lg-0" style="width: 309px; height: 138px" alt="State of device management" src="/images/state-of-device-management-hero-394x177@2x.png">
+      <img class="mb-3 mb-lg-0" alt="State of device management" src="/images/state-of-device-management-hero-394x177@2x.png">
       <div class="d-flex flex-column">
         <h4 class="text-center text-lg-left">State of device management report</h4>
         <p class="mb-0">We surveyed 200+ security practitioners in charge of device management.<br class="d-none d-sm-block"> Here’s what we learned about their struggles, frustrations, and desires.</p>