Website: Update /endpoint-ops page layout (#21689)

Closes: #21542 Changes: - Updated the "three column feature" blocks on the /endpoint-ops page to be more responsive. They start at three columns on large screens, then go to a two-column layout on medium screens and a one-column layout on small screens (previously three columns on large, then one column on small)
fleetdm · Aug 29, 2024 · e2077eb · e2077eb
1 parent a00559e
commit e2077eb
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 69 deletions.
diff --git a/website/assets/styles/pages/endpoint-ops.less b/website/assets/styles/pages/endpoint-ops.less
@@ -361,44 +361,52 @@
       line-height: 24px;
     }
   }
-
   [purpose='three-column-features'] {
-    margin-bottom: 160px;
     max-width: 1080px;
-    [purpose='feature-row'] {
-      &:not(:last-of-type) {
-        margin-bottom: 60px;
-      }
-      [purpose='feature-item'] {
-        margin-left: 40px;
-        margin-right: 40px;
-        max-width: 266px;
-        width: 33%;
-        p {
-          font-size: 14px;
-          font-weight: 400;
-          line-height: 21px;
-        }
-      }
-    }
+    margin-bottom: 160px;
     h2 {
       font-size: 32px;
       line-height: 48px;
       margin-bottom: 40px;
     }
   }
+  [purpose='responsive-feature-row'] {
+    margin-right: 0px;
+    margin-left: 0px;
+    [purpose='feature-item'] {
+      padding-right: 24px;
+      padding-left: 24px;
+      margin-bottom: 64px;
+      h5 {
+        font-size: 16px;
+        line-height: 1.2;
+        font-weight: 800;
+      }
+      a {
+        color: @core-fleet-black-75;
+        text-decoration: underline;
+        &:hover {
+          color: @core-fleet-black-75;
+        }
+      }
+      img {
+        height: 48px;
+        width: auto;
+        margin-bottom: 16px;
+      }
+      h5 {
+        font-weight: 800;
+        font-size: 16px;
+        line-height: 1.2;
+        margin-bottom: 16px;
+      }
 
-  [purpose='feature-item'] {
-    img {
-      height: 48px;
-      width: auto;
-      margin-bottom: 16px;
-    }
-    h5 {
-      font-weight: 800;
-      font-size: 16px;
-      line-height: 27px;
-      margin-bottom: 16px;
+      p {
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 21px;
+        margin-bottom: 0px;
+      }
     }
   }
 
@@ -541,6 +549,18 @@
     [purpose='feature-text'] {
       width: 410px;
     }
+    [purpose='responsive-feature-row'] {
+      [purpose='feature-item'] {
+        padding-right: 24px;
+        padding-left: 24px;
+        margin-bottom: 64px;
+        p {
+          font-size: 14px;
+          font-weight: 400;
+          line-height: 21px;
+        }
+      }
+    }
   }
 
   @media (max-width: 767px) {
@@ -701,18 +721,16 @@
         margin-left: 10px;
       }
     }
-    [purpose='three-column-features'] {
-      [purpose='feature-row'] {
-        [purpose='feature-item'] {
-
-          margin-left: 0;
-          margin-right: 0;
-          text-align: center;
-          max-width: 320px;
-          width: 100%;
-          &:not(:last-of-type) {
-            margin-bottom: 60px;
-          }
+    [purpose='responsive-feature-row'] {
+      [purpose='feature-item'] {
+        padding-right: 0px;
+        padding-left: 0px;
+        margin-bottom: 64px;
+        text-align: center;
+        p {
+          font-size: 14px;
+          font-weight: 400;
+          line-height: 21px;
         }
       }
     }

diff --git a/website/views/pages/endpoint-ops.ejs b/website/views/pages/endpoint-ops.ejs
@@ -138,43 +138,38 @@
     </div>
 
     <div purpose="three-column-features" class="mx-auto">
-
-      <div purpose="feature-row" class="d-flex flex-sm-row flex-column align-items-sm-start align-items-center justify-content-center">
-        <div purpose="feature-item" class="ml-sm-0">
+      <div purpose="responsive-feature-row" class="row d-flex flex-sm-row flex-column justify-content-lg-between justify-content-center align-items-center align-items-sm-start">
+        <div purpose="feature-item" class="pl-0 col-12 col-sm-6 col-lg-4">
           <img alt="Software and asset inventory" src="/images/[email protected]" class="mx-auto mx-sm-0">
           <h5>Live connection</h5>
           <p>Talk to online devices in real time with Fleet’s live query API. Implement custom workflows like conditional access based on device posture, Identity, and more.</p>
         </div>
 
-        <div purpose="feature-item">
+        <div purpose="feature-item" class="pr-0 pr-lg-4 col-12 col-sm-6 col-lg-4" >
           <img alt="Software and asset inventory" src="/images/[email protected]" class="mx-auto mx-sm-0">
           <h5>Software and asset inventory</h5>
           <p>Get visibility into all endpoints across any operating system*, including support for servers and containers in every cloud infrastructure.</p>
         </div>
 
-        <div purpose="feature-item" class="mr-sm-0 mb-0">
+        <div purpose="feature-item" class="pl-0 pl-lg-4 pr-lg-0 col-12 col-sm-6 col-lg-4">
           <img alt="See logins for every endpoint" src="/images/[email protected]" class="mx-auto mx-sm-0">
           <h5>See logins for every endpoint</h5>
           <p>Identify who logs in to any system, including login history and current sessions. Look up any computer by the email address of the person using it.</p>
         </div>
 
-
-      </div>
-      <div purpose="feature-row" class="d-flex flex-sm-row flex-column align-items-sm-start align-items-center">
-
-        <div purpose="feature-item" class="ml-sm-0">
+        <div purpose="feature-item" class="pr-0 pr-lg-4 pl-lg-0 col-12 col-sm-6 col-lg-4 mb-lg-0">
           <img alt="CIS benchmarks" src="/images/[email protected]" class="mx-auto mx-sm-0">
           <h5>CIS benchmarks</h5>
           <p>Keep all your endpoints* compliant with customizable baselines, or use common benchmarks like CIS.</p>
         </div>
 
-        <div purpose="feature-item">
+        <div purpose="feature-item" class="pl-0 pl-lg-4 col-12 col-sm-6 col-lg-4 mb-sm-0">
           <img alt="Verify updates and settings" src="/images/[email protected]" class="mx-auto mx-sm-0">
           <h5>EDR health checks</h5>
           <p>Verify that your EDR tools are installed and working so you can identify and address configuration issues quickly.</p>
         </div>
 
-        <div purpose="feature-item" class="mr-sm-0 mb-0">
+        <div purpose="feature-item" class="pr-0 pr-lg-4 col-12 col-sm-6 col-lg-4 mb-0">
           <img alt="Verify updates and settings" src="/images/[email protected]" class="mx-auto mx-sm-0">
           <h5>Verify updates and settings</h5>
           <p>Track progress towards deadlines for security posture remediation projects, and enforce due dates through automations.</p>
@@ -202,23 +197,21 @@
         <h3>“Zero” trust, fewer tickets</h3>
         <p>You can use Fleet’s API to customize every aspect of conditional access – even the stuff your CISO hasn’t thought of yet.</p>
       </div>
-
       <div purpose="three-column-features" class="mx-auto">
-        <div purpose="feature-row" class="d-flex flex-sm-row flex-column align-items-sm-start align-items-center justify-content-center">
-
-          <div purpose="feature-item" class="ml-sm-0">
+        <div purpose="responsive-feature-row" class="row d-flex flex-sm-row flex-column justify-content-lg-between justify-content-sm-start justify-content-center align-items-center align-items-sm-start">
+          <div purpose="feature-item" class="pl-0 col-12 col-sm-6 col-lg-4">
             <img alt="Get in front of the IdP" src="/images/[email protected]" class="mx-auto mx-sm-0">
             <h5>Get in front of the IdP</h5>
             <p>Gate access with <a href="https://fleetdm.com/queries">common device trust policies</a> from industry peers, or roll out your own device health checks using system data and events.</p>
           </div>
 
-          <div purpose="feature-item">
+          <div purpose="feature-item" class="pr-0 pr-lg-4 col-12 col-sm-6 col-lg-4" >
             <img alt="Step-by-step instructions" src="/images/[email protected]" class="mx-auto mx-sm-0">
             <h5>Step-by-step instructions</h5>
             <p>Show resolution steps or use <a href="https://medium.com/pinterest-engineering/enforcing-device-authn-compliance-at-pinterest-a74938cb089b" target="_blank">custom HTML</a> to show employees what they need to do to restore their access without waiting on a ticket. Then give it back automatically, as soon as the problems are fixed.</p>
           </div>
 
-          <div purpose="feature-item" class="mr-sm-0 mb-0">
+          <div purpose="feature-item" class="pl-0 pl-lg-4 pr-lg-0 col-12 col-sm-6 col-lg-4 mb-0">
             <img alt="Manage device posture" src="/images/[email protected]" class="mx-auto mx-sm-0">
             <h5>Live retry</h5>
             <p>Give people a way to get back to work quickly and minimize downtime. Fleet’s live query API instantly re-checks the OS version and other device state so users don’t get locked out.</p>
@@ -249,40 +242,38 @@
     </div>
 
     <div purpose="three-column-features" class="mx-auto">
-
-      <div purpose="feature-row" class="d-flex flex-sm-row flex-column align-items-sm-start align-items-center justify-content-center">
-        <div purpose="feature-item" class="ml-sm-0">
+      <div purpose="responsive-feature-row" class="row d-flex flex-sm-row flex-column justify-content-lg-between justify-content-center align-items-center align-items-sm-start">
+        <div purpose="feature-item" class="pl-0 col-12 col-sm-6 col-lg-4">
           <img alt="Incident response (IR)" src="/images/[email protected]" class="mx-auto mx-sm-0">
           <h5>Incident response (IR)</h5>
           <p>Contain and recover from breaches using live data, remote commands, and automated workflows.</p>
         </div>
 
-        <div purpose="feature-item">
+        <div purpose="feature-item" class="pr-0 pr-lg-4 col-12 col-sm-6 col-lg-4" >
           <img alt="Detection and response" src="/images/[email protected]" class="mx-auto mx-sm-0">
           <h5>Detection and response</h5>
           <p>Ship logs and alerts when unusual behavior is detected. Run scripts on demand or when alerts trigger.</p>
         </div>
 
-        <div purpose="feature-item" class="mr-sm-0 mb-0">
+        <div purpose="feature-item" class="pl-0 pl-lg-4 pr-lg-0 col-12 col-sm-6 col-lg-4">
           <img alt="File access monitoring (FIM)" src="/images/[email protected]" class="mx-auto mx-sm-0">
           <h5>File access monitoring (FIM)</h5>
           <p>Specify files to monitor for changes or deletions, then log those events to your SIEM or data lake.</p>
         </div>
-      </div>
-      <div purpose="feature-row" class="d-flex flex-sm-row flex-column align-items-sm-start align-items-center justify-content-center">
-        <div purpose="feature-item" class="ml-sm-0">
+
+        <div purpose="feature-item" class="pr-0 pr-lg-4 pl-lg-0 col-12 col-sm-6 col-lg-4 mb-lg-0">
           <img alt="Attack surface management" src="/images/[email protected]" class="mx-auto mx-sm-0">
           <h5>Attack surface management</h5>
           <p>Discover security misconfigurations and vulnerabilities and prioritize risks that matter to your organization.</p>
         </div>
 
-        <div purpose="feature-item">
+        <div purpose="feature-item" class="pl-0 pl-lg-4 col-12 col-sm-6 col-lg-4 mb-sm-0">
           <img alt="Malware detection" src="/images/[email protected]" class="mx-auto mx-sm-0">
           <h5>Malware detection</h5>
           <p>Continuously scan host filesystems for indicators of compromise (IOC). Import malware signatures from threat intelligence sources.</p>
         </div>
 
-        <div purpose="feature-item" class="mr-sm-0 mb-0">
+        <div purpose="feature-item" class="pr-0 pr-lg-4 col-12 col-sm-6 col-lg-4 mb-0">
           <img alt="Osquery made easy" src="/images/[email protected]" class="mx-auto mx-sm-0">
           <h5>Osquery made easy</h5>
           <p>Collect exactly the data you need from your production infrastructure across every cloud and data center*.</p>