mirror of
https://github.com/fleetdm/fleet
synced 2026-05-06 06:48:54 +00:00
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>
This commit is contained in:
eashaw
GitHub
parent
55aa8c702e
commit
cc8599f07a
5 changed files with 87 additions and 53 deletions
BIN
website/assets/images/logo-creative-commons-80x15@2x.png
vendored
Normal file
BIN
website/assets/images/logo-creative-commons-80x15@2x.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
BIN
website/assets/images/logo-youtube-57x40@2x.png
vendored
Normal file
BIN
website/assets/images/logo-youtube-57x40@2x.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
43
website/assets/styles/layout.less
vendored
43
website/assets/styles/layout.less
vendored
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
4
website/config/routes.js
vendored
4
website/config/routes.js
vendored
|
|
@ -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.'
|
||||
}
|
||||
},
|
||||
|
|
|
|||
93
website/views/layouts/layout.ejs
vendored
93
website/views/layouts/layout.ejs
vendored
|
|
@ -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>© 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>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue