mirror of
https://github.com/fleetdm/fleet
synced 2026-05-23 00:49:03 +00:00
Update website footer layout (#2745)
* route to privacy policy doc * updated footer layout, higher resolution CC license * updated footer layout, styles and color twitter logo * change papercups widget color
This commit is contained in:
eashaw
GitHub
parent
a7c1136877
commit
fc9490fdc0
7 changed files with 99 additions and 75 deletions
BIN
website/assets/images/logo-creative-commons-160x30@2x.png
vendored
Normal file
BIN
website/assets/images/logo-creative-commons-160x30@2x.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB |
BIN
website/assets/images/logo-twitter-32x26@2x.png
vendored
BIN
website/assets/images/logo-twitter-32x26@2x.png
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 990 B |
BIN
website/assets/images/logo-twitter-50x44@2x.png
vendored
Normal file
BIN
website/assets/images/logo-twitter-50x44@2x.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
58
website/assets/styles/layout.less
vendored
58
website/assets/styles/layout.less
vendored
|
|
@ -1,4 +1,4 @@
|
|||
@footer-height: 288px;
|
||||
@footer-height: 222px;
|
||||
@container-md-max-width: 1100px;
|
||||
|
||||
[v-cloak] { display: none; }
|
||||
|
|
@ -208,14 +208,28 @@ html, body {
|
|||
[purpose='footer-container'] {
|
||||
padding-left: 40px;
|
||||
padding-right: 40px;
|
||||
padding-bottom: 70px;
|
||||
padding-top: 60px;
|
||||
padding-bottom: 32px;
|
||||
padding-top: 40px;
|
||||
}
|
||||
|
||||
[purpose='footer-bottom'] {
|
||||
padding-left: 40px;
|
||||
padding-right: 70px;
|
||||
|
||||
}
|
||||
|
||||
[purpose='footer-nav'] {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
[purpose='legal-nav'] {
|
||||
padding-left: 16px;
|
||||
display: inline;
|
||||
font-size: 11px;
|
||||
line-height: 18px;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
body.detected-mobile {
|
||||
|
|
@ -232,40 +246,42 @@ body.detected-mobile {
|
|||
color: #6a67fe;
|
||||
}
|
||||
|
||||
@media (max-width: 1199px) {
|
||||
[purpose='page-wrap'] {
|
||||
padding-bottom: 404px;
|
||||
|
||||
[purpose='page-footer'] {
|
||||
height: 404px;
|
||||
|
||||
[purpose='footer-container'] {
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
[purpose='page-wrap'] {
|
||||
padding-bottom: 518px;
|
||||
padding-bottom: 264px;
|
||||
|
||||
[purpose='page-footer'] {
|
||||
height: 518px;
|
||||
height: 264px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
@media (max-width: 575px) {
|
||||
[purpose='page-wrap'] {
|
||||
padding-bottom: 371px;
|
||||
|
||||
[purpose='page-footer'] {
|
||||
height: 371px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 490px) {
|
||||
[purpose='page-wrap'] {
|
||||
padding-bottom: 728px;
|
||||
padding-bottom: 581px;
|
||||
|
||||
[purpose='page-footer'] {
|
||||
height: 728px;
|
||||
height: 581px;
|
||||
|
||||
[purpose='footer-nav'] {
|
||||
display: block;
|
||||
}
|
||||
[purpose='legal-nav'] {
|
||||
padding-left: 0px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
1
website/config/routes.js
vendored
1
website/config/routes.js
vendored
|
|
@ -160,6 +160,7 @@ module.exports.routes = {
|
|||
'GET /apply': 'https://fleet-device-management.breezy.hr',
|
||||
'GET /company/stewardship': 'https://github.com/fleetdm/fleet', // FUTURE: page about how we approach open source and our commitments to the community
|
||||
'GET /legal/terms': 'https://docs.google.com/document/d/1OM6YDVIs7bP8wg6iA3VG13X086r64tWDqBSRudG4a0Y/edit',
|
||||
'GET /legal/privacy': 'https://docs.google.com/document/d/17i_g1aGpnuSmlqj35-yHJiwj7WRrLdC_Typc1Yb7aBE/edit',
|
||||
|
||||
|
||||
// ╦ ╦╔═╗╔╗ ╦ ╦╔═╗╔═╗╦╔═╔═╗
|
||||
|
|
|
|||
115
website/views/layouts/layout.ejs
vendored
115
website/views/layouts/layout.ejs
vendored
|
|
@ -123,61 +123,68 @@
|
|||
|
||||
<%- body %>
|
||||
|
||||
<div style="background-color: #201E43;" purpose="page-footer">
|
||||
<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>© 2021 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">Docs</a>
|
||||
<a href="/transparency" class="d-block pr-lg-5 pb-2 pb-xl-0">Transparency</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">Blog</a>
|
||||
<a href="/logos" class="d-block px-lg-5 pb-2 pb-xl-0">Logos/artwork</a>
|
||||
</div>
|
||||
<div class="flex-column">
|
||||
<a href="/handbook" class="d-block pr-lg-2 pl-lg-5 pb-2">Handbook</a>
|
||||
<a href="/docs/contributing" class="d-block pr-lg-2 pl-lg-5 pb-2">Contribute</a>
|
||||
<a href="/hall-of-fame" class="d-block pr-lg-2 pl-lg-5 pb-2 pb-xl-0">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://www.youtube.com/channel/UCZyoqZ4exJvoibmTKJrQ-dQ" 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"> </span>
|
||||
<img alt="Creative Commons Licence CC BY-SA 4.0" src="/images/logo-creative-commons-80x15@2x.png" style="width: 80px"/>
|
||||
<div style="background-color: #182147;" purpose="page-footer">
|
||||
<div style="max-width: 1248px;" purpose="footer-container" class="container-fluid d-flex flex-column flex-sm-row align-items-sm-end justify-content-center justify-content-sm-between">
|
||||
<div class="d-flex flex-column order-first justify-content-start">
|
||||
<div class="d-flex pb-4 pr-4">
|
||||
<a class="pb-3" href="/">
|
||||
<img alt="Fleet logo" src="/images/logo-white-118x48@2x.png" style="width: 118px; height: 48px;" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex flex-grow-1 flex-column">
|
||||
<div purpose="footer-nav" class="justify-content-between justify-content-sm-end order-l pb-xl-2 px-lg-0">
|
||||
<div class="flex-column">
|
||||
<a href="/get-started" class="d-block pr-md-5 pr-sm-3 pb-2">Get started</a>
|
||||
<a href="/docs" class="d-block pr-md-5 pr-sm-3 pb-2">Docs</a>
|
||||
<a href="/transparency" class="d-block pr-md-5 pr-sm-3 pb-2 pb-xl-0">Transparency</a>
|
||||
</div>
|
||||
<div class="flex-column">
|
||||
<a href="/pricing" class="d-block px-md-5 px-sm-3 pb-2">Pricing</a>
|
||||
<a href="/blog" class="d-block px-md-5 px-sm-3 pb-2">Blog</a>
|
||||
<a href="/logos" class="d-block px-md-5 px-sm-3 pb-2 pb-xl-0">Logos/artwork</a>
|
||||
</div>
|
||||
<div class="flex-column">
|
||||
<a href="/handbook" class="d-block pr-lg-2 pl-md-5 pl-sm-3 pb-2">Handbook</a>
|
||||
<a href="/docs/contributing" class="d-block pr-lg-2 pl-md-5 pl-sm-3 pb-2">Contribute</a>
|
||||
<a href="/hall-of-fame" class="d-block pr-lg-2 pl-md-5 pl-sm-3 pb-2 pb-xl-0">Hall of fame</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div purpose="footer-bottom" style="background-color: #101639;">
|
||||
<div style="max-width: 1248px;" class="container-fluid d-flex px-0 flex-md-row flex-column align-items-md-center justify-content-md-between pb-4 pr-3 pb-md-0">
|
||||
|
||||
<div style="font-size: 11px; line-height: 18px;" class="d-flex flex-column justify-content-start flex-sm-row pr-sm-0">
|
||||
<img alt="Creative Commons Licence CC BY-SA 4.0" src="/images/logo-creative-commons-160x30@2x.png" style="width: 80px; height: 15px;" />
|
||||
<div class="pl-sm-3 pt-sm-0 pt-1 pl-0 text-sm-nowrap d-block d-sm-inline">
|
||||
© 2021 Fleet Device Management Inc.
|
||||
<span purpose="legal-nav">
|
||||
<a style="text-decoration: underline;" href="/legal/privacy">Privacy</a>
|
||||
<a style="text-decoration: underline;" class="pl-3" href="/legal/privacy">What is osquery?</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="font-size: 14px;" class="flex-row d-inline-flex font-weight-bold order-first order-md-last justify-content-start justify-content-md-end pl-md-3 py-3">
|
||||
<a href="https://twitter.com/fleetctl">
|
||||
<img alt="Twitter logo" src="/images/logo-twitter-50x44@2x.png" style="height: 20px; width: auto; margin-top:2px" class="pr-4" />
|
||||
</a>
|
||||
<a href="https://www.youtube.com/channel/UCZyoqZ4exJvoibmTKJrQ-dQ">
|
||||
<img alt="Youtube logo" src="/images/logo-youtube-57x40@2x.png" style="height: 20px; width: auto; margin-top:2px" class="pr-4" />
|
||||
</a>
|
||||
<a href="https://osquery.slack.com/join/shared_invite/zt-h29zm0gk-s2DBtGUTW4CFel0f0IjTEw#/">
|
||||
<img alt="Slack logo" src="/images/logo-slack-24x24@2x.png" style="height: 20px; width: auto; margin-top:2px" class="pr-4" />
|
||||
</a>
|
||||
<a href="https://github.com/fleetdm/fleet">
|
||||
<img alt="GitHub logo" src="/images/github-mark-white-24x24@2x.png" style="height: 20px; width: auto; margin-top:2px" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -192,7 +199,7 @@
|
|||
<% /* Cookie consent banner */ %>
|
||||
<script id="cookieyes" type="text/javascript" src="https://cdn-cookieyes.com/client_data/71bcdd51b166ceeb18bd0d28/script.js"></script>
|
||||
<% /* Chat (Papercups) */ %>
|
||||
<script>window.Papercups = { config: { accountId: '5b59eeac-1578-4fdb-b946-e17c1dca0c51', requireEmailUpfront: true } };</script>
|
||||
<script>window.Papercups = { config: { accountId: '5b59eeac-1578-4fdb-b946-e17c1dca0c51', primaryColor:'#6A67FE', requireEmailUpfront: true } };</script>
|
||||
<script type="text/javascript" async defer src="https://app.papercups.io/widget.js"></script>
|
||||
|
||||
<%/* Stripe.js */%>
|
||||
|
|
|
|||
Loading…
Reference in a new issue