mirror of
https://github.com/fleetdm/fleet
synced 2026-05-23 08:58:41 +00:00
Website: update logos on homepage (#17579)
Closes: #17391 Changes: - Updated the logos on the homepage to match latest wireframes --------- Co-authored-by: Mike Thomas <78363703+mike-j-thomas@users.noreply.github.com>
This commit is contained in:
Eric
GitHub
parent
42aeb9f75e
commit
ee50173be0
4 changed files with 95 additions and 155 deletions
BIN
website/assets/images/logo-dropbox-122x32@2x.png
vendored
Normal file
BIN
website/assets/images/logo-dropbox-122x32@2x.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
BIN
website/assets/images/logo-toast-91x32@2x.png
vendored
Normal file
BIN
website/assets/images/logo-toast-91x32@2x.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
170
website/assets/styles/pages/homepage.less
vendored
170
website/assets/styles/pages/homepage.less
vendored
|
|
@ -68,39 +68,50 @@
|
|||
}
|
||||
|
||||
[purpose='hero-logos'] {
|
||||
margin-top: 32px;
|
||||
margin-bottom: 120px;
|
||||
max-width: 1080px;
|
||||
[purpose='snowflake-logo'] {
|
||||
height: 28px;
|
||||
}
|
||||
[purpose='wayfair-logo'] {
|
||||
height: 24px;
|
||||
}
|
||||
[purpose='uber-logo'] {
|
||||
height: 24px;
|
||||
}
|
||||
[purpose='fastly-logo'] {
|
||||
height: 30px;
|
||||
}
|
||||
[purpose='atlassian-logo'] {
|
||||
height: 18px;
|
||||
}
|
||||
[purpose='gusto-logo'] {
|
||||
height: 24px;
|
||||
}
|
||||
[purpose='segment-logo'] {
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
[purpose='logo-column'] {
|
||||
margin-bottom: 80px;
|
||||
max-width: 1200px;
|
||||
padding-left: 60px;
|
||||
padding-right: 60px;
|
||||
overflow-x: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
[purpose='logo-carousel'] {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
div {
|
||||
white-space: nowrap;
|
||||
animation: scroll-horizontal 80s linear infinite;
|
||||
}
|
||||
img {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
vertical-align: middle;
|
||||
height: 32px;
|
||||
margin-right: 64px;
|
||||
}
|
||||
[purpose='fade-left'] {
|
||||
height: 32px;
|
||||
width: 80px;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
bottom: 0px;
|
||||
animation: none;
|
||||
background: linear-gradient(90deg, #FFF 0%, rgba(255, 255, 255, 0.00) 100%);
|
||||
}
|
||||
[purpose='fade-right'] {
|
||||
height: 32px;
|
||||
width: 80px;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
animation: none;
|
||||
background: linear-gradient(90deg, rgba(255, 255, 255, 0.00) 0%, #FFF 100%);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
[purpose='homepage-content'] {
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
|
@ -604,48 +615,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
// ██╗ ██╗██╗
|
||||
// ╚██╗██╔╝██║
|
||||
// ╚███╔╝ ██║
|
||||
// ██╔██╗ ██║
|
||||
// ██╔╝ ██╗███████╗
|
||||
// ╚═╝ ╚═╝╚══════╝
|
||||
//
|
||||
@media (max-width: 1400px) {
|
||||
|
||||
[purpose='hero-logos'] {
|
||||
margin-bottom: 120px;
|
||||
[purpose='snowflake-logo'] {
|
||||
height: 28px;
|
||||
}
|
||||
[purpose='wayfair-logo'] {
|
||||
height: 24px;
|
||||
}
|
||||
[purpose='uber-logo'] {
|
||||
height: 24px;
|
||||
}
|
||||
[purpose='fastly-logo'] {
|
||||
height: 30px;
|
||||
}
|
||||
[purpose='atlassian-logo'] {
|
||||
height: 18px;
|
||||
}
|
||||
[purpose='gusto-logo'] {
|
||||
height: 24px;
|
||||
}
|
||||
[purpose='segment-logo'] {
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
[purpose='logo-column'] {
|
||||
width: 100%;
|
||||
img {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
// ██╗ ██████╗
|
||||
// ██║ ██╔════╝
|
||||
// ██║ ██║ ███╗
|
||||
|
|
@ -728,52 +697,8 @@
|
|||
padding-left: 60px;
|
||||
}
|
||||
[purpose='hero-logos'] {
|
||||
max-width: 688px;
|
||||
padding-left: 40px;
|
||||
padding-right: 40px;
|
||||
img {
|
||||
display: inline;
|
||||
}
|
||||
[purpose='snowflake-logo'] {
|
||||
height: 22px;
|
||||
margin-left: 0px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
[purpose='wayfair-logo'] {
|
||||
height: 22px;
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
[purpose='uber-logo'] {
|
||||
height: 22px;
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
[purpose='atlassian-logo'] {
|
||||
height: 16px;
|
||||
margin-left: 0px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
[purpose='segment-logo'] {
|
||||
height: 24px;
|
||||
margin-left: 20px;
|
||||
margin-right: 0px;
|
||||
}
|
||||
[purpose='fastly-logo'] {
|
||||
margin-left: 20px;
|
||||
margin-right: 0px;
|
||||
}
|
||||
[purpose='gusto-logo'] {
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
[purpose='logo-column'] {
|
||||
margin-bottom: 32px;
|
||||
img {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
[purpose='page-section'] {
|
||||
margin-bottom: 120px;
|
||||
|
|
@ -975,8 +900,7 @@
|
|||
}
|
||||
}
|
||||
[purpose='hero-logos'] {
|
||||
margin-top: 32px;
|
||||
margin-bottom: 120px;
|
||||
margin-bottom: 64px;
|
||||
}
|
||||
[purpose='page-section'] {
|
||||
margin-bottom: 80px;
|
||||
|
|
@ -1350,11 +1274,12 @@
|
|||
}
|
||||
|
||||
[purpose='hero-logos'] {
|
||||
max-width: 335px;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
[purpose='logo-carousel'] {
|
||||
img {
|
||||
display: inline;
|
||||
margin-right: 48px;
|
||||
}
|
||||
}
|
||||
[purpose='video-modal'] {
|
||||
|
|
@ -1503,4 +1428,13 @@
|
|||
}
|
||||
|
||||
|
||||
@keyframes scroll-horizontal {
|
||||
0% {
|
||||
transform: translateX(50%);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
80
website/views/pages/homepage.ejs
vendored
80
website/views/pages/homepage.ejs
vendored
|
|
@ -19,45 +19,51 @@
|
|||
</div>
|
||||
</div>
|
||||
<%/* Row of logos */%>
|
||||
<div purpose="hero-logos" class="mx-auto d-flex flex-column align-items-center justify-content-center">
|
||||
<%/* >991px logos all on one row */%>
|
||||
<div purpose="logo-column" class="w-100 flex-row d-lg-flex d-none justify-content-between align-items-center">
|
||||
<a href="/guides/delivering-data-to-snowflake-from-fleet-and-osquery" class="ml-0 mr-auto" ><img purpose="snowflake-logo" alt="Snowflake logo" src="/images/logo-snowflake-117x28@2x.png"></a>
|
||||
<img purpose="wayfair-logo" alt="Wayfair logo" src="/images/logo-wayfair-110x24@2x.png">
|
||||
<img purpose="uber-logo" alt="Uber logo" class="" src="/images/logo-uber-70x24@2x.png">
|
||||
<img purpose="fastly-logo" alt="Fastly logo" class="" src="/images/logo-fastly-75x30@2x.png">
|
||||
<img purpose="atlassian-logo" alt="Atlassian logo" src="/images/logo-atlassian-140x18@2x.png">
|
||||
<img purpose="gusto-logo" alt="Gusto logo" src="/images/logo-gusto-64x24@2x.png">
|
||||
<a href="https://segment.com/blog/hosting-fleetdm-on-aws-eks/" target="_blank" class="mr-0 ml-auto"><img purpose="segment-logo" alt="Segment logo" src="/images/logo-segment-112x24@2x.png"></a>
|
||||
</div>
|
||||
<%/* >576px logos - two rows */%>
|
||||
<div purpose="logo-column" class="d-sm-flex d-none d-lg-none flex-row justify-content-center align-items-start align-items-md-center">
|
||||
<a href="/guides/delivering-data-to-snowflake-from-fleet-and-osquery"><img purpose="snowflake-logo" alt="Snowflake logo" src="/images/logo-snowflake-117x28@2x.png"></a>
|
||||
<img class="d-block" purpose="wayfair-logo" alt="Wayfair logo" src="/images/logo-wayfair-110x24@2x.png">
|
||||
<img class="d-block" purpose="uber-logo" alt="Uber logo" src="/images/logo-uber-70x24@2x.png">
|
||||
<img class="d-block" purpose="fastly-logo" alt="Fastly logo" src="/images/logo-fastly-75x30@2x.png">
|
||||
<div purpose="hero-logos" class="mx-auto d-flex flex-row align-items-center justify-content-center">
|
||||
|
||||
<div purpose="logo-carousel">
|
||||
<div class="d-flex flex-row align-items-center">
|
||||
<img alt="Notion logo" src="/images/logo-notion-68x32@2x.png">
|
||||
<img alt="Pinterest logo" src="/images/logo-pinterest-98x32@2x.png">
|
||||
<img alt="Gusto logo" src="/images/logo-gusto-64x32@2x.png">
|
||||
<img alt="Epic Games logo" style="height: 32px" src="/images/logo-epic-games-28x32@2x.png">
|
||||
<img alt="Rivian logo" src="/images/logo-rivian-120x32@2x.png">
|
||||
<img alt="Deloitte logo" src="/images/logo-deloitte-97x32@2x.png">
|
||||
<img alt="Flywire logo" src="/images/logo-flywire-69x32@2x.png">
|
||||
<img alt="Snowflake logo" src="/images/logo-snowflake-101x32@2x.png">
|
||||
<img alt="Uber logo" src="/images/logo-uber-65x32@2x.png">
|
||||
<img alt="Atlassian logo" src="/images/logo-atlassian-140x32@2x.png">
|
||||
<img alt="Toast logo" src="/images/logo-toast-91x32@2x.png">
|
||||
|
||||
<img alt="Fastly logo" src="/images/logo-fastly-60x32@2x.png">
|
||||
<img alt="Hashicorp logo" src="/images/logo-hashicorp-103x32@2x.png">
|
||||
<img alt="Dropbox logo" src="/images/logo-dropbox-122x32@2x.png">
|
||||
|
||||
<img alt="Reddit logo" src="/images/logo-reddit-80x32@2x.png">
|
||||
</div>
|
||||
<div class="d-flex flex-row align-items-center">
|
||||
<img alt="Notion logo" src="/images/logo-notion-68x32@2x.png">
|
||||
<img alt="Pinterest logo" src="/images/logo-pinterest-98x32@2x.png">
|
||||
<img alt="Gusto logo" src="/images/logo-gusto-64x32@2x.png">
|
||||
<img alt="Epic Games logo" style="height: 32px" src="/images/logo-epic-games-28x32@2x.png">
|
||||
<img alt="Rivian logo" src="/images/logo-rivian-120x32@2x.png">
|
||||
<img alt="Deloitte logo" src="/images/logo-deloitte-97x32@2x.png">
|
||||
<img alt="Flywire logo" src="/images/logo-flywire-69x32@2x.png">
|
||||
<img alt="Snowflake logo" src="/images/logo-snowflake-101x32@2x.png">
|
||||
<img alt="Uber logo" src="/images/logo-uber-65x32@2x.png">
|
||||
<img alt="Atlassian logo" src="/images/logo-atlassian-140x32@2x.png">
|
||||
<img alt="Toast logo" src="/images/logo-toast-91x32@2x.png">
|
||||
|
||||
<img alt="Fastly logo" src="/images/logo-fastly-60x32@2x.png">
|
||||
<img alt="Hashicorp logo" src="/images/logo-hashicorp-103x32@2x.png">
|
||||
<img alt="Dropbox logo" src="/images/logo-dropbox-122x32@2x.png">
|
||||
|
||||
<img alt="Reddit logo" src="/images/logo-reddit-80x32@2x.png">
|
||||
</div>
|
||||
<div purpose="fade-left"></div>
|
||||
<div purpose="fade-right"></div>
|
||||
</div>
|
||||
|
||||
<div purpose="logo-column" class="d-sm-flex d-none d-lg-none flex-row justify-content-center align-items-center mb-0">
|
||||
<img purpose="atlassian-logo" alt="Atlassian logo" src="/images/logo-atlassian-140x18@2x.png">
|
||||
<img purpose="gusto-logo" alt="Gusto logo" src="/images/logo-gusto-64x24@2x.png">
|
||||
<a href="https://segment.com/blog/hosting-fleetdm-on-aws-eks/" target="_blank"><img purpose="segment-logo" alt="Segment logo" src="/images/logo-segment-112x24@2x.png"></a>
|
||||
</div>
|
||||
|
||||
<%/* <576px logos - three rows */%>
|
||||
<div purpose="logo-column" class="d-flex d-sm-none flex-row justify-content-center align-items-center">
|
||||
<a href="/guides/delivering-data-to-snowflake-from-fleet-and-osquery"><img purpose="snowflake-logo" alt="Snowflake logo" src="/images/logo-snowflake-117x28@2x.png"></a>
|
||||
<span ><img purpose="wayfair-logo" alt="Wayfair logo" src="/images/logo-wayfair-110x24@2x.png"></span>
|
||||
</div>
|
||||
<div purpose="logo-column" class="d-flex d-sm-none flex-row justify-content-between align-items-center">
|
||||
<img purpose="uber-logo" alt="Uber logo" src="/images/logo-uber-70x24@2x.png">
|
||||
<img purpose="fastly-logo" alt="Fastly logo" src="/images/logo-fastly-75x30@2x.png">
|
||||
<img purpose="atlassian-logo" alt="Atlassian logo" src="/images/logo-atlassian-140x18@2x.png">
|
||||
</div>
|
||||
<div purpose="logo-column" class="d-flex d-sm-none flex-row justify-content-center align-items-center mb-0">
|
||||
<span ><img purpose="gusto-logo" alt="Gusto logo" src="/images/logo-gusto-64x24@2x.png"></span>
|
||||
<a href="https://segment.com/blog/hosting-fleetdm-on-aws-eks/" target="_blank"><img purpose="segment-logo" alt="Segment logo" src="/images/logo-segment-112x24@2x.png"></a>
|
||||
</div>
|
||||
</div>
|
||||
<%/* Homepage content */%>
|
||||
<div purpose="homepage-content" class="container">
|
||||
|
|
|
|||
Loading…
Reference in a new issue