From cc8599f07a1c5497300a8fe9d3eb0de5676be921 Mon Sep 17 00:00:00 2001
From: eashaw <eashaw@sailsjs.com>
Date: Sun, 3 Oct 2021 23:28:20 -0500
Subject: [PATCH] Implement new footer design and update /press-kit route
 (#2332)

* logos, layout update

* press kit -> logos

* Update layout.less

* update footer layout

* Update layout.less

* lint fix

* Update layout.ejs

* fix height

* Update layout.ejs

* update local attribute names

* Update website/views/layouts/layout.ejs

Co-authored-by: Mike Thomas <78363703+mike-j-thomas@users.noreply.github.com>
---
 .../images/logo-creative-commons-80x15@2x.png | Bin 0 -> 1834 bytes
 .../assets/images/logo-youtube-57x40@2x.png   | Bin 0 -> 1176 bytes
 website/assets/styles/layout.less             |  43 ++++++--
 website/config/routes.js                      |   4 +-
 website/views/layouts/layout.ejs              |  93 ++++++++++--------
 5 files changed, 87 insertions(+), 53 deletions(-)
 create mode 100644 website/assets/images/logo-creative-commons-80x15@2x.png
 create mode 100644 website/assets/images/logo-youtube-57x40@2x.png

diff --git a/website/assets/images/logo-creative-commons-80x15@2x.png b/website/assets/images/logo-creative-commons-80x15@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..1d5c817558a4807e84d024d7b25c750c829370c4
GIT binary patch
literal 1834
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
Y4ct{pBYq8_HUIzs07*qoM6N<$f-$9MSO5S3

literal 0
HcmV?d00001

diff --git a/website/assets/images/logo-youtube-57x40@2x.png b/website/assets/images/logo-youtube-57x40@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..1068199548929a8e95bc8b00e31d5bcc40725c01
GIT binary patch
literal 1176
zcmV;J1ZVq+P)<h;3K|Lk000e1NJLTq0046U002-31^@s6Dtk(P00009a7bBm001mY
z001mY0i`{bsQ>@~0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH1T9HKK~#7F?VbNo
z;y@I~Uzq#<=zz6?!wL>6P%98SkP46rgbKtCyb8n$<SJmT;Glxse#vfTSrbS^l(%`G
znYX_T%)r<8Bby9K=*Xl*$_~Rm9Cy5N+ZvS|8&Y(99dyb1%G$2Aw}SWakHOk1dH+72
zPC_3f&AvQktZRFS;nv!8_!k@_PGs%%Z{B=yi0GBYwBq%QUD#fca10jKUW_=iIxnmw
zrV(;vx?2)Y`)V|0f<7kYsh}E0#ICWWu~h6^ZE0*kAH}@*+SorPAGRqrqPkcixqLto
z)RGhksZ94uk{?f*p%HEpE*6QoB&k$S9h|<Lhec7#pQKrmRV17`h?)=K;+AKMSF)pT
z1f07`?wLl&OA;Zuap_O|Fnd7)H?IAOFJ_MfZnRVH0>ws5dpe>>;7H#MoM$Q$xYBil
zR=6Or<ChzVnEX+0;Kb~Zz!jC+tyjsJaqtt3h#3dxXj-WV83TEkRm6?9T%8M0Xj;UP
zt|`7B%tZsGNZ7C`V0n5b7!1rc9&?drG!juQe8qI!-4Q)MXW}*&g@$LC4S{DO?7~yK
zjoklGX!v`k4@7-^ZEQY`!!twteA<l4H$OFrcPkJ16rLJ?KHb{Rix)qiMjm?O7t;YD
zA!wxe6n7lNRRC21As3-{G@{sOj%WIyC_+Akr$&@dn<=Kl<x^}rL=bu*rtDhxdNJhF
zGZE7VAs1eHdrKT?c9<;!o_T-IGM|c=Ww?CGDD;Y$`*2%>3`7+%tFm4bt&aXvJ_qrG
zgx$>NL^n4?TGOc`VwM5%AR@$Mf`r)+gwpZYoVA^?5)!~OHOcLk8PjRD&3EFtu?z{b
z03HZ$Wafzh%Vvv-yf_>ZJv~tjG*e83QH0dVgl$MI0%FGVX{s=rW!@N(h?X^~*=C4|
zeAw@2ryKDJiQfQP#qXKOizsg3k&y#2*Ayd>=EV{;nm7v}RHw*`47T7t6XZ-yvEcIJ
z)m77k)M(<!nQjYiGNC5JUrZ-r{CRN~8Vz4D8C{zC0yagg+i2$ngyg-C`q^w8vN@Xu
zaih_+l9;O5=AzNG{E5JpJj~`3fhS4!xT##sza(%)yMYsPK>}B_8%WONPaajpGx?Ki
zw-M8xo@f#{vMr|Ng#>Qsq(saa3EY_b6JJayEa#iNc=RW^nD)WdQxdo^PXf<O!XxD2
zZfrQ)`N&1f6-l@~b;d;(NZyHQtD_+ar^?i5bXVsEn@2FF@&NHuvz<3NC3^%_rh6vI
zq2CSC-Z<GKW+jZM0~AI~{(EDyhqR(IB~*hnd&cIavEL-m4?7m{LewpPjLni7#b_-t
zL()u8<ynWaU;Jv@x%~Rqd$iZXaA%#{uvr{(8_z*vRw3OM*P((QbiA>94eeRmwO)r6
qm3u(Z-*hm4D>!x)S{*O@2>$^|w)}i0WO-o#0000<MNUMnLSTYU_ZdR~

literal 0
HcmV?d00001

diff --git a/website/assets/styles/layout.less b/website/assets/styles/layout.less
index 0159c49f7b..ca71021918 100644
--- a/website/assets/styles/layout.less
+++ b/website/assets/styles/layout.less
@@ -1,4 +1,4 @@
-@footer-height: 222px;
+@footer-height: 280px;
 @container-md-max-width: 1100px;
 
 [v-cloak] { display: none; }
@@ -192,12 +192,22 @@ html, body {
   position: absolute;
   left: 0px;
   bottom: 0px;
-  // padding-top: 63px;
 
   a {
     color: white;
   }
 
+  [purpose='footer-container'] {
+    padding-left: 40px;
+    padding-right: 40px;
+    padding-bottom: 70px;
+    padding-top: 60px;
+  }
+
+  [purpose='footer-nav'] {
+    display: flex;
+    flex-direction: row;
+  }
 }
 
 body.detected-mobile {
@@ -216,25 +226,38 @@ body.detected-mobile {
 
 @media (max-width: 1199px) {
   [purpose='page-wrap'] {
-    padding-bottom: 260px;
+    padding-bottom: 404px;
+
     [purpose='page-footer'] {
-      height: 260px;
+      height: 404px;
+
+      [purpose='footer-container'] {
+        padding-bottom: 40px;
+      }
     }
   }
 }
 
 @media (max-width: 767px) {
   [purpose='page-wrap'] {
-    padding-bottom: 380px;
+    padding-bottom: 518px;
+
     [purpose='page-footer'] {
-      padding-top: 44px;
-      height: 380px;
+      height: 518px;
     }
   }
 }
 
-@media (max-width: 300px) {
-  [purpose='join-the-community-on-slack-expanded-text'] {
-    display: none;
+@media (max-width: 500px) {
+  [purpose='page-wrap'] {
+    padding-bottom: 728px;
+
+    [purpose='page-footer'] {
+      height: 728px;
+
+      [purpose='footer-nav'] {
+        display: block;
+      }
+    }
   }
 }
diff --git a/website/config/routes.js b/website/config/routes.js
index 520e899f1f..540e0a35ee 100644
--- a/website/config/routes.js
+++ b/website/config/routes.js
@@ -42,10 +42,10 @@ module.exports.routes = {
     }
   },
 
-  'GET /press-kit': {
+  'GET /logos': {
     action: 'view-press-kit',
     locals:{
-      pageTitleForMeta: 'Press kit | Fleet for osquery',
+      pageTitleForMeta: 'Logos | Fleet for osquery',
       pageDescriptionForMeta: 'Download Fleet logos, wallpapers, and screenshots.'
     }
   },
diff --git a/website/views/layouts/layout.ejs b/website/views/layouts/layout.ejs
index d5fed1a121..79188e5b13 100644
--- a/website/views/layouts/layout.ejs
+++ b/website/views/layouts/layout.ejs
@@ -124,51 +124,62 @@
       <%- body %>
 
       <div style="background-color: #201E43;" purpose="page-footer">
-        <div style="background-color: #201E43;">
-          <div style="max-width: 1248px;" class="container-fluid d-flex flex-column flex-lg-row justify-content-center justify-content-lg-between px-3 px-md-4 pt-4 pb-0 mt-md-5">
-          <div class="d-flex flex-grow-1 flex-column align-items-center">
-            <div class="container-fluid d-block d-md-flex flex-md-row text-center justify-content-between justify-content-lg-end px-5 px-lg-0 pt-lg-3 pb-4 pb-md-0">
-              <a href="/get-started" class="d-block pr-lg-4 pb-4">Get started</a>
-              <a href="/docs" class="d-block pr-lg-4 pb-4">Docs</a>
-              <a href="/queries" class="d-block pr-lg-4 pb-4">Queries</a>
-              <a href="/pricing" class="d-block pr-lg-4 pb-4">Pricing</a>
-              <a href="/blog" class="d-block pr-lg-4 pb-4">Blog</a>
-              <a href="/apply" class="d-block pr-lg-4 pb-4">Jobs</a>
-              <a href="/docs/contributing" class="d-block pr-lg-4 pb-4">Contribute</a>
-              <a href="/press-kit" class="d-block pr-lg-4 pb-4">Logos/artwork</a>
-              <a href="/handbook" class="d-block pr-lg-4 pb-4">Handbook</a>
-              <a href="/hall-of-fame" class="d-block pb-4">Hall of fame</a>
-            </div>
-    
-            <div class="container-fluid d-flex flex-column flex-md-row font-weight-bold justify-content-center justify-content-lg-end px-0 pt-3 pt-md-0">
-              <a href="https://twitter.com/fleetctl" class="d-flex flex-shrink-1 justify-content-center align-items-center px-0 pb-4 pb-lg-0">
-                <img alt="Twitter logo" src="/images/logo-twitter-32x26@2x.png" style="height: 25px; width: auto;" class="mr-3"/>
-                Follow us on Twitter
-              </a>
-              <a href="https://osquery.slack.com/join/shared_invite/zt-h29zm0gk-s2DBtGUTW4CFel0f0IjTEw#/" class="d-flex flex-nowrap justify-content-center align-items-center px-1 px-sm-5 pb-4 pb-lg-0">
-                <img alt="Slack logo" src="/images/logo-slack-24x24@2x.png" style="height: 25px; width: auto" class="mr-3"/>
-                <span>Join the community<span purpose="join-the-community-on-slack-expanded-text"> on Slack</span></span>
-              </a>
-              <a href="https://github.com/fleetdm/fleet" class="d-flex flex-shrink-1 justify-content-center align-items-center px-0 pb-4 pb-lg-0">
-                <img alt="GitHub logo" src="/images/github-mark-white-24x24@2x.png" style="height: 25px; width: auto" class="mr-3"/>
-                GitHub
-              </a>
-            </div>  
-          </div>
-          <div class="d-flex flex-column order-lg-first">
-            <div class="d-none d-lg-flex">
-              <a href="/">
-                <img alt="Fleet logo" src="/images/logo-white-118x48@2x.png" style="width: 118px; height: 48px;"/>
-              </a>  
-            </div>    
-            <div style="font-family: 'Lato', sans-serif; font-size: 13px;" class="d-flex flex-column justify-content-center justify-content-lg-start pt-5 pb-5 pt-md-4">
-              <div class="text-center text-lg-left">
+          <div style="max-width: 1248px; background-color: #201E43;" purpose="footer-container" class="container-fluid d-flex flex-column flex-xl-row align-items-xl-end justify-content-center justify-content-xl-between">
+            <div class="d-flex flex-column order-first justify-content-start">
+              <div class="d-flex pb-4 pb-xl-0">
+                <a class="pb-3" href="/">
+                  <img alt="Fleet logo" src="/images/logo-white-118x48@2x.png" style="width: 118px; height: 48px;"/>
+                </a>
+              </div>
+              <div style="font-size: 11px; line-height: 18px;" class="d-none d-xl-flex flex-column pt-lg-4 text-nowrap">
                 <span>&copy; 2021 Fleet Device Management Inc.</span>
+                <span>Licensed under CC BY-SA 4.0 by Fleet Device Management Inc.</span>
+                <img alt="Creative Commons Licence CC BY-SA 4.0" src="/images/logo-creative-commons-80x15@2x.png" style="width: 80px"/>
               </div>
             </div>
+            <div class="d-flex flex-grow-1 flex-column">
+              <div purpose="footer-nav" class="justify-content-between justify-content-xl-end pb-4  pb-xl-2 px-lg-0">
+                <div class="flex-column">
+                  <a href="/get-started" class="d-block pr-lg-5 pb-2">Get started</a>
+                  <a href="/docs" class="d-block pr-lg-5 pb-2 pb-xl-4">Docs</a>
+                </div>
+                <div class="flex-column">
+                  <a href="/pricing" class="d-block px-lg-5 pb-2">Pricing</a>
+                  <a href="/blog" class="d-block px-lg-5 pb-2 pb-xl-4">Blog</a>
+                </div>
+                <div class="flex-column">
+                  <a href="/logos" class="d-block px-lg-5 pb-2">Logos/artwork</a>
+                  <a href="/handbook" class="d-block px-lg-5 pb-2 pb-xl-4">Handbook</a>
+                </div>
+                <div class="flex-column">
+                  <a href="/docs/contributing" class="d-block pr-lg-2 pb-2">Contribute</a>
+                  <a href="/hall-of-fame" class="d-block pb-3 pr-lg-2 pb-xl-4">Hall of fame</a>
+                </div>
+              </div>
+              <div style="font-size: 14px;" class="container-fluid d-flex flex-column flex-md-row font-weight-bold text-nowrap justify-content-start justify-content-md-between justify-content-xl-end px-0 pt-xl-4 pb-3">
+                <a href="https://twitter.com/fleetctl" class="d-flex flex-nowrap px-xl-3 pb-3 pb-lg-0">
+                  <img alt="Twitter logo" src="/images/logo-twitter-32x26@2x.png" style="height: 20px; width: auto; margin-top:2px" class="mr-2"/>
+                  Follow us on Twitter
+                </a>
+                <a href="https://osquery.slack.com/join/shared_invite/zt-h29zm0gk-s2DBtGUTW4CFel0f0IjTEw#/" class="d-flex flex-nowrap px-xl-3 pb-3 pb-lg-0">
+                  <img alt="Youtube logo" src="/images/logo-youtube-57x40@2x.png" style="height: 20px; width: auto; margin-top:2px" class="mr-2"/>
+                  <span>Watch on YouTube</span>
+                </a>
+                <a href="https://osquery.slack.com/join/shared_invite/zt-h29zm0gk-s2DBtGUTW4CFel0f0IjTEw#/" class="d-flex flex-nowrap px-xl-3 pb-3 pb-lg-0">
+                  <img alt="Slack logo" src="/images/logo-slack-24x24@2x.png" style="height: 20px; width: auto; margin-top:2px" class="mr-2"/>
+                  <span>Join the community<span purpose="join-the-community-on-slack-expanded-text"> on Slack</span></span>
+                </a>
+                <a href="https://github.com/fleetdm/fleet" class="d-flex flex-nowrap px-xl-3 pb-4 pb-lg-0 pr-3">
+                  <img alt="GitHub logo" src="/images/github-mark-white-24x24@2x.png" style="height: 20px; width: auto; margin-top:2px" class="mr-2"/>
+                  GitHub
+                </a>
+              </div>
+            </div>
+            <div style="font-size: 11px; line-height: 18px;" class="d-block d-xl-none pt-lg-4 pr-5 pr-sm-0">
+              <span class="mb-2">fleetdm.com is licensed under CC BY-SA 4.0 by Fleet Device Management Inc.</span>
+              <img alt="Creative Commons Licence CC BY-SA 4.0" src="/images/logo-creative-commons-80x15@2x.png" style="width: 80px"/>
+            </div>
           </div>
-          </div>
-        </div>
       </div>
     </div>