Website: update space between sections on landing pages. (#20510)

Closes: #20495 Changes: - Updated the space between sections on the endpoint ops and vulnerability management pages.
fleetdm · Jul 16, 2024 · a6904ed · a6904ed
1 parent 7dda2e9
commit a6904ed
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 29 deletions.
diff --git a/website/assets/styles/pages/endpoint-ops.less b/website/assets/styles/pages/endpoint-ops.less
@@ -408,11 +408,15 @@
       margin-bottom: 24px;
     }
   }
-  [purpose='feature-image'].left {
-    margin-left: 24px;
+  [purpose='feature'].flex-column {
+    [purpose='feature-text'] {
+      margin-left: 48px;
+    }
   }
-  [purpose='feature-image'].right {
-    margin-right: 24px;
+  [purpose='feature'].flex-column-reverse {
+    [purpose='feature-text'] {
+      margin-right: 48px;
+    }
   }
   [purpose='feature-image'] {
     max-width: 380px;
@@ -610,19 +614,23 @@
     [purpose='feature-text'] {
       width: unset;
     }
+    [purpose='feature'].flex-column {
+      [purpose='feature-text'] {
+        margin-left: auto;
+      }
+    }
+    [purpose='feature'].flex-column-reverse {
+      [purpose='feature-text'] {
+        margin-right: auto;
+      }
+    }
     [purpose='feature'] {
       margin-bottom: 120px;
     }
     [purpose='feature-image'] {
       margin-left: auto;
       margin-right: auto;
       margin-bottom: 60px;
-      &.left {
-        margin-left: auto;
-      }
-      &.right {
-        margin-right: auto;
-      }
     }
     [purpose='testimonial-videos'] {
       margin-left: auto;

diff --git a/website/assets/styles/pages/vulnerability-management.less b/website/assets/styles/pages/vulnerability-management.less
@@ -351,11 +351,15 @@
     }
   }
 
-  [purpose='feature-image'].left {
-    margin-left: 24px;
+  [purpose='feature'].flex-column {
+    [purpose='feature-text'] {
+      margin-left: 48px;
+    }
   }
-  [purpose='feature-image'].right {
-    margin-right: 24px;
+  [purpose='feature'].flex-column-reverse {
+    [purpose='feature-text'] {
+      margin-right: 48px;
+    }
   }
   [purpose='feature-image'] {
     max-width: 380px;
@@ -539,17 +543,21 @@
     [purpose='feature'] {
       margin-bottom: 120px;
     }
-    [purpose='feature-image'] {
-      margin-left: auto;
-      margin-right: auto;
-      margin-bottom: 60px;
-      &.left {
+    [purpose='feature'].flex-column {
+      [purpose='feature-text'] {
         margin-left: auto;
       }
-      &.right {
+    }
+    [purpose='feature'].flex-column-reverse {
+      [purpose='feature-text'] {
         margin-right: auto;
       }
     }
+    [purpose='feature-image'] {
+      margin-left: auto;
+      margin-right: auto;
+      margin-bottom: 60px;
+    }
     [purpose='hero-image'] {
       margin-bottom: 60px;
     }

diff --git a/website/views/pages/endpoint-ops.ejs b/website/views/pages/endpoint-ops.ejs
@@ -128,7 +128,7 @@
         </div>
         <p purpose="feature-footnote">*Coming soon</p>
       </div>
-      <div purpose="feature-image" class="left">
+      <div purpose="feature-image">
         <img alt="Ship data to any platform" src="/images/[email protected]">
       </div>
     </div>
@@ -194,7 +194,7 @@
           <p>Ease your logging burden, pull the data you need.</p>
         </div>
       </div>
-      <div purpose="feature-image" class="left">
+      <div purpose="feature-image">
         <img alt="Ship data to any platform" src="/images/[email protected]">
       </div>
     </div>
@@ -230,7 +230,7 @@
     </div>
     <%-  partial('../partials/calendar-banner.partial.ejs') %>
     <div purpose="feature" class="d-flex flex-md-row flex-column justify-content-between mx-auto align-items-center">
-      <div purpose="feature-image" class="right">
+      <div purpose="feature-image">
         <img alt="Ship data to any platform" src="/images/[email protected]">
       </div>
       <div purpose="feature-text" class="d-flex flex-column">

diff --git a/website/views/pages/vulnerability-management.ejs b/website/views/pages/vulnerability-management.ejs
@@ -52,7 +52,7 @@
       <logo-carousel></logo-carousel>
 
     <div purpose="feature" class="d-flex flex-md-row flex-column justify-content-between mx-auto align-items-center">
-      <div purpose="feature-image" class="right">
+      <div purpose="feature-image">
         <img alt="Report what matters" src="/images/[email protected]">
       </div>
       <div purpose="feature-text" class="d-flex flex-column">
@@ -75,13 +75,13 @@
           <p>Automatically match CVEs to your operating systems, apps, extensions, browser plugins, Python libraries, everything.</p>
         </div>
       </div>
-      <div purpose="feature-image" class="left">
+      <div purpose="feature-image">
         <img alt="Deep context from the environment" src="/images/[email protected]">
       </div>
     </div>
 
     <div purpose="feature" class="d-flex flex-md-row flex-column justify-content-between mx-auto align-items-center">
-      <div purpose="feature-image" class="right">
+      <div purpose="feature-image">
         <img alt="Untangle your security stack" src="/images/[email protected]">
       </div>
       <div purpose="feature-text" class="d-flex flex-column">
@@ -106,21 +106,21 @@
           <p>Deep-link live data with internal IT and platform teams.</p>
         </div>
       </div>
-      <div purpose="feature-image" class="right">
+      <div purpose="feature-image">
         <img alt="Mitigate CVEs automatically" src="/images/[email protected]">
       </div>
     </div>
     <%-  partial('../partials/calendar-banner.partial.ejs') %>
     <div purpose="feature" class="d-flex flex-md-row flex-column justify-content-between mx-auto align-items-center">
-      <div purpose="feature-image" class="left">
+      <div purpose="feature-image">
         <img alt="Up-to-date data without scans" src="/images/[email protected]">
       </div>
       <div purpose="feature-text" class="d-flex flex-column">
         <h3>Up-to-date data without scans</h3>
         <p>Traditional network vulnerability scans can clog your network and even haunt your printers with pages full of wingdings. Fleet does things differently.</p>
         <div purpose="checklist" class="flex-column d-flex">
           <p>Eliminate the risk of side effects from scanning the network.</p>
-<p>Lightweight enough for the most brittle environments (OT, data centers, embedded/BTS, low-latency gaming servers).</p>
+          <p>Lightweight enough for the most brittle environments (OT, data centers, embedded/BTS, low-latency gaming servers).</p>
           <p>Quickly pull data about important CVEs and zero days during an incident or audit.</p>
         </div>
       </div>