Website: Update vulnerability management image on homepage (#16375)

https://fleetdm.slack.com/archives/C058S8PFSK0/p1706280817663569

Changes:
- Updated the widths of category images on the homepage to match
wireframes
- Added left padding to the vulnerability management image to align it
with the center of the viewport.
This commit is contained in:
Eric 2024-01-26 09:38:58 -06:00 committed by GitHub
parent b8ccebcbca
commit 512f0b7d3f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 34 additions and 11 deletions

View File

@ -253,8 +253,16 @@
margin-left: 60px;
padding-right: 40px;
img {
width: auto;
height: 293px;
width: 380px;
height: auto;
}
}
[purpose='vuln-management-image'] {
margin-left: 60px;
padding-right: 40px;
img {
width: 360px;
height: auto;
}
}
[purpose='category-button'] {
@ -282,13 +290,6 @@
padding-left: 40px;
}
[purpose='category-image'] {
img {
width: auto;
height: 293px;
}
transition: transform 0.3s, right 0.3s, left 0.3s, bottom 0.3s;
}
[purpose='bottom-gradient'] {
background: linear-gradient(180deg, #FFFFFF 0%, #E9F4F4 100%);
}
@ -788,6 +789,17 @@
margin-right: auto;
}
}
[purpose='vuln-management-image'] {
width: 100%;
height: auto;
margin-left: 0px;
padding-right: 0px;
padding-left: 75px;
img {
margin-left: auto;
margin-right: auto;
}
}
[purpose='category-button'] {
width: 100%;
display: flex;
@ -1184,7 +1196,18 @@
width: 100%;
height: auto;
img {
max-height: 293px;
max-height: 236px;
max-width: 100%;
width: auto;
height: auto;
}
}
[purpose='vuln-management-image'] {
width: 100%;
height: auto;
padding-left: 48px;
img {
max-height: 236px;
max-width: 100%;
width: auto;
height: auto;

View File

@ -128,7 +128,7 @@
<a class="btn btn-primary text-nowrap" href="/vulnerability-management">Start with vuln<span purpose="truncated-vulnerability-management-text">erability</span>&nbsp;management</a>
</div>
</div>
<div purpose="category-image">
<div purpose="vuln-management-image">
<img alt="A pocket monster orb being scanned for vulnerabilities" src="/images/vuln-management-hero-image-360x374@2x.png">
</div>
</div>