Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Website: update logos on homepage #17579

Merged
merged 8 commits into from
Mar 14, 2024
+93 −153
Merged

Website: update logos on homepage #17579

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
da8fa07
update logos on homepage
eashaw Mar 12, 2024
e855832
alow animation, ensure images are centered
eashaw Mar 12, 2024
ba6e0b2
updated logo sizes
mike-j-thomas Mar 13, 2024
1c95d4a
Update homepage.less
eashaw Mar 13, 2024
62dba08
Update homepage.less
eashaw Mar 13, 2024
a9d5983
Update homepage.less
eashaw Mar 13, 2024
65b6d77
Update homepage.less
eashaw Mar 13, 2024
1a90581
Update homepage.less
eashaw Mar 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added website/assets/images/[email protected]
View file
Open in desktop
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
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
149 changes: 48 additions & 101 deletions website/assets/styles/pages/homepage.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,37 +70,48 @@
[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;
}
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 60s linear infinite;
}
img {
margin-right: auto;
margin-left: auto;
height: 24px;
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 @@ -612,38 +623,8 @@
// ╚═╝ ╚═╝╚══════╝
//
@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 +709,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 @@ -1350,11 +1287,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 +1441,13 @@
}


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

}
78 changes: 42 additions & 36 deletions website/views/pages/homepage.ejs
View file
Open in desktop
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 purpose="first-carousel" class="d-flex flex-row">
<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">
<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
Loading