From 680f16ca1515ce5a95ce24e97c6eaccbe4413401 Mon Sep 17 00:00:00 2001
From: eashaw <eashaw@sailsjs.com>
Date: Thu, 24 Feb 2022 20:30:21 -0600
Subject: [PATCH] Update twitter card layout on fleetdm.com homepage (#4350)

* update twitter cards styles

* lint fixes
---
 website/assets/styles/pages/homepage.less | 81 +++++++++++++++--------
 website/views/pages/homepage.ejs          | 18 ++---
 2 files changed, 64 insertions(+), 35 deletions(-)

diff --git a/website/assets/styles/pages/homepage.less b/website/assets/styles/pages/homepage.less
index f4eaeb699d..bc84899519 100644
--- a/website/assets/styles/pages/homepage.less
+++ b/website/assets/styles/pages/homepage.less
@@ -69,28 +69,19 @@
     }
   }
 
-  .tweets {
+  [purpose='tweets'] {
     max-width: 1200px;
-  }
-
-  .tweet {
-    flex: 0 1 380px;
-    text-align: left;
-    background: #FFFFFF;
-    padding: 40px;
-    margin-bottom: 30px;
-    border: 1px solid #E2E4EA;
-    box-sizing: border-box;
-    box-shadow: 0px 7px 3px -5px rgba(25, 33, 71, 0.1);
-    border-radius: 16px;
-    &[purpose='top-row'] {
-      min-height: 390px;
-    }
-    &[purpose='middle-row'] {
-      min-height: 290px;
-    }
-    &[purpose='bottom-row'] {
-      min-height: 340px;
+    padding-bottom: 50px;
+    box-sizing: content-box;
+    [purpose='tweet-card'], [purpose='tweet-card-bottom-row'] {
+      text-align: left;
+      background: #FFFFFF;
+      padding: 40px;
+      margin-bottom: 30px;
+      border: 1px solid #E2E4EA;
+      box-sizing: border-box;
+      box-shadow: 0px 7px 3px 0px rgba(25, 33, 71, 0.1);
+      border-radius: 16px;
     }
   }
 
@@ -239,16 +230,34 @@
   }
 
   @media (min-width: 1200px) {
+    [purpose='tweets'] {
+      padding-left: 0px;
+      padding-right: 0px;
+      [purpose='tweet-card'] {
+        margin-left: 15px;
+        margin-right: 15px;
+        flex: 0 1 326px;
+      }
+      [purpose='tweet-card-bottom-row'] {
+        margin-left: 15px;
+        margin-right: 15px;
+        flex: 0 1 380px;
+      }
+    }
     [purpose='demo-cta'] {
       max-width: 960px;
     }
   }
 
   @media (max-width: 1200px) {
-    .tweets {
-      max-width: 390px;
-      &[purpose='top-row'], [purpose='middle-row'], [purpose='bottom-row'] {
-        min-height: auto;
+    [purpose='tweets'] {
+      padding-left: 72px;
+      padding-right: 72px;
+      [purpose='tweet-card'], [purpose='tweet-card-bottom-row'] {
+        flex: 1 1 360px;
+        margin-bottom: 15px;
+        margin-left: 8px;
+        margin-right: 8px;
       }
     }
     [purpose='demo-cta-container'] {
@@ -257,6 +266,7 @@
     }
   }
 
+
   @media (min-width: 1024px) {
     [purpose='demo-cta'] {
       [purpose='demo-cta-text' ] {
@@ -264,7 +274,12 @@
       }
     }
   }
-  @media (max-width: 994px) {
+  @media (max-width: 990px) {
+    [purpose='tweets'] {
+      [purpose='tweet-card'], [purpose='tweet-card-bottom-row'] {
+        flex: 1 1 295px;
+      }
+    }
     [purpose='demo-cta-container'] {
       padding-left: 45px;
       padding-right: 45px;
@@ -291,6 +306,13 @@
   }
 
   @media (max-width: 768px) {
+    [purpose='tweets'] {
+      padding-left: 52px;
+      padding-right: 52px;
+      [purpose='tweet-card'], [purpose='tweet-card-bottom-row'] {
+        flex: 1 1 316px;
+      }
+    }
     .hero-clouds {
       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%);
     }
@@ -327,6 +349,13 @@
       padding-left: 20px;
       padding-right: 20px;
     }
+    [purpose='tweets'] {
+      padding-left: 16px;
+      padding-right: 16px;
+      [purpose='tweet-card'], [purpose='tweet-card-bottom-row'] {
+        margin-bottom: 30px;
+      }
+    }
   }
 
   @media (max-width: 355px) {
diff --git a/website/views/pages/homepage.ejs b/website/views/pages/homepage.ejs
index 0c8672c95f..9bf90610f0 100644
--- a/website/views/pages/homepage.ejs
+++ b/website/views/pages/homepage.ejs
@@ -173,8 +173,8 @@
       <p style="max-width: 860px" class="px-3 px-xs-5 px-md-4 mx-auto">
         That’s good news, since it means there are lots of other developers and security practitioners talking about Fleet, dreaming up features, and contributing patches.
       </p>
-      <div class="tweets d-flex flex-wrap justify-content-center align-items-start px-2 pt-3 pt-lg-5 pb-5 mx-auto">
-        <div purpose="top-row" class="tweet container">
+      <div purpose="tweets" class="d-flex card-deck justify-content-center pt-5 mx-auto">
+        <div purpose="tweet-card" class="card ">
           <div class="mb-4">
             <a href="https://twitter.com/osquery"><img width="140" height="36" alt="osquery logo" src="/images/social-proof-logo-osquery-140x36@2x.png"/></a>
           </div>
@@ -186,7 +186,7 @@
             </div>
           </div>
         </div>
-        <div purpose="top-row" class="tweet container">
+        <div purpose="tweet-card" class="card">
           <div class="mb-4">
             <a href="https://twitter.com/Wayfair"><img width="136" height="32" alt="Wayfair logo" src="/images/social-proof-logo-wayfair-136x32@2x.png"/></a>
           </div>
@@ -199,7 +199,7 @@
               </div>
           </div>
         </div>
-        <div purpose="top-row" class="tweet container">
+        <div purpose="tweet-card" class="card ">
           <div class="mb-4">
             <a href="https://twitter.com/SnowflakeDB"><img width="153" height="38" alt="Snowflake logo" src="/images/social-proof-logo-snowflake-153x38@2x.png"/></a>
           </div>
@@ -211,7 +211,7 @@
             </div>
           </div>
         </div>
-        <div purpose="middle-row" class="tweet container">
+        <div purpose="tweet-card" class="card ">
           <div class="mb-4">
             <a href="https://twitter.com/Uber"><img width="87" height="38" alt="Uber logo" src="/images/social-proof-logo-uber-87x38@2x.png"/></a>
           </div>
@@ -223,7 +223,7 @@
             </div>
           </div>
         </div>
-        <div purpose="middle-row" class="tweet container">
+        <div purpose="tweet-card" class="card">
           <div class="mb-4">
             <a href="https://twitter.com/Square"><img width="131" height="38" alt="Square logo" src="/images/social-proof-logo-square-131x38@2x.png"/></a>
           </div>
@@ -235,7 +235,7 @@
             </div>
           </div>
         </div>
-        <div purpose="middle-row" class="tweet container">
+        <div purpose="tweet-card" class="card ">
           <div class="mb-4">
             <a href="https://twitter.com/atlassian"><img width="162" height="20" alt="Atlassian logo" src="/images/social-proof-logo-atlassian-162x20@2x.png"/></a>
           </div>
@@ -247,7 +247,7 @@
             </div>
           </div>
         </div>
-        <div purpose="bottom-row" class="tweet container mr-0 mr-xl-2">
+        <div purpose="tweet-card-bottom-row" class="card ">
           <div class="mb-4">
             <a href="https://twitter.com/comcast"><img width="107" height="38" alt="Comcast logo" src="/images/social-proof-logo-comcast-107x38.png"/></a>
           </div>
@@ -259,7 +259,7 @@
             </div>
           </div>
         </div>
-        <div purpose="bottom-row" class="tweet container ml-0 ml-xl-2">
+        <div purpose="tweet-card-bottom-row" class="card ">
           <div class="mb-4">
             <a href="https://twitter.com/versia"><img width="90" height="38" alt="Versia logo" src="/images/social-proof-logo-versia-90x38@2x.png"/></a>
           </div>