Skip to content

Commit

Permalink
Website: update logos on homepage (#17579)
Browse files Browse the repository at this point in the history 
Closes: #17391

Changes:
- Updated the logos on the homepage to match latest wireframes

---------

Co-authored-by: Mike Thomas <[email protected]>
  • Loading branch information
@eashaw @mike-j-thomas
eashaw and mike-j-thomas authored Mar 14, 2024
1 parent 42aeb9f commit ee50173
Show file tree
Hide file tree
Showing 4 changed files with 93 additions and 153 deletions.
Binary file added website/assets/images/[email protected]
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added website/assets/images/[email protected]
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
168 changes: 51 additions & 117 deletions website/assets/styles/pages/homepage.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
margin-bottom: 80px;
max-width: 1200px;
padding-left: 60px;
padding-right: 60px;
overflow-x: hidden;
width: 100%;
}
[purpose='logo-column'] {
[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;
}
Expand Down Expand Up @@ -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;
}
}
}
// ██╗ ██████╗
// ██║ ██╔════╝
// ██║ ██║ ███╗
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -975,8 +900,7 @@
}
}
[purpose='hero-logos'] {
margin-top: 32px;
margin-bottom: 120px;
margin-bottom: 64px;
}
[purpose='page-section'] {
margin-bottom: 80px;
Expand Down Expand Up @@ -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'] {
Expand Down Expand Up @@ -1503,4 +1428,13 @@
}


@keyframes scroll-horizontal {
0% {
transform: translateX(50%);
}
100% {
transform: translateX(-50%);
}
}

}
78 changes: 42 additions & 36 deletions website/views/pages/homepage.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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/[email protected]"></a>
<img purpose="wayfair-logo" alt="Wayfair logo" src="/images/[email protected]">
<img purpose="uber-logo" alt="Uber logo" class="" src="/images/[email protected]">
<img purpose="fastly-logo" alt="Fastly logo" class="" src="/images/[email protected]">
<img purpose="atlassian-logo" alt="Atlassian logo" src="/images/[email protected]">
<img purpose="gusto-logo" alt="Gusto logo" src="/images/[email protected]">
<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/[email protected]"></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/[email protected]"></a>
<img class="d-block" purpose="wayfair-logo" alt="Wayfair logo" src="/images/[email protected]">
<img class="d-block" purpose="uber-logo" alt="Uber logo" src="/images/[email protected]">
<img class="d-block" purpose="fastly-logo" alt="Fastly logo" src="/images/[email protected]">
</div>
<div purpose="hero-logos" class="mx-auto d-flex flex-row align-items-center justify-content-center">

<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/[email protected]">
<img purpose="gusto-logo" alt="Gusto logo" src="/images/[email protected]">
<a href="https://segment.com/blog/hosting-fleetdm-on-aws-eks/" target="_blank"><img purpose="segment-logo" alt="Segment logo" src="/images/[email protected]"></a>
</div>
<div purpose="logo-carousel">
<div class="d-flex flex-row align-items-center">
<img alt="Notion logo" src="/images/[email protected]">
<img alt="Pinterest logo" src="/images/[email protected]">
<img alt="Gusto logo" src="/images/[email protected]">
<img alt="Epic Games logo" style="height: 32px" src="/images/[email protected]">
<img alt="Rivian logo" src="/images/[email protected]">
<img alt="Deloitte logo" src="/images/[email protected]">
<img alt="Flywire logo" src="/images/[email protected]">
<img alt="Snowflake logo" src="/images/[email protected]">
<img alt="Uber logo" src="/images/[email protected]">
<img alt="Atlassian logo" src="/images/[email protected]">
<img alt="Toast logo" src="/images/[email protected]">

<%/* <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/[email protected]"></a>
<span ><img purpose="wayfair-logo" alt="Wayfair logo" src="/images/[email protected]"></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/[email protected]">
<img purpose="fastly-logo" alt="Fastly logo" src="/images/[email protected]">
<img purpose="atlassian-logo" alt="Atlassian logo" src="/images/[email protected]">
</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/[email protected]"></span>
<a href="https://segment.com/blog/hosting-fleetdm-on-aws-eks/" target="_blank"><img purpose="segment-logo" alt="Segment logo" src="/images/[email protected]"></a>
<img alt="Fastly logo" src="/images/[email protected]">
<img alt="Hashicorp logo" src="/images/[email protected]">
<img alt="Dropbox logo" src="/images/[email protected]">

<img alt="Reddit logo" src="/images/[email protected]">
</div>
<div class="d-flex flex-row align-items-center">
<img alt="Notion logo" src="/images/[email protected]">
<img alt="Pinterest logo" src="/images/[email protected]">
<img alt="Gusto logo" src="/images/[email protected]">
<img alt="Epic Games logo" style="height: 32px" src="/images/[email protected]">
<img alt="Rivian logo" src="/images/[email protected]">
<img alt="Deloitte logo" src="/images/[email protected]">
<img alt="Flywire logo" src="/images/[email protected]">
<img alt="Snowflake logo" src="/images/[email protected]">
<img alt="Uber logo" src="/images/[email protected]">
<img alt="Atlassian logo" src="/images/[email protected]">
<img alt="Toast logo" src="/images/[email protected]">

<img alt="Fastly logo" src="/images/[email protected]">
<img alt="Hashicorp logo" src="/images/[email protected]">
<img alt="Dropbox logo" src="/images/[email protected]">

<img alt="Reddit logo" src="/images/[email protected]">
</div>
<div purpose="fade-left"></div>
<div purpose="fade-right"></div>
</div>

</div>
<%/* Homepage content */%>
<div purpose="homepage-content" class="container">
Expand Down

0 comments on commit ee50173

Please sign in to comment.