mirror of
https://github.com/fleetdm/fleet
synced 2026-05-23 08:58:41 +00:00
Website: Update /endpoint-ops page layout (#21689)
Closes: #21542 Changes: - Updated the "three column feature" blocks on the /endpoint-ops page to be more responsive. They start at three columns on large screens, then go to a two-column layout on medium screens and a one-column layout on small screens (previously three columns on large, then one column on small)
This commit is contained in:
Eric
GitHub
parent
a00559e732
commit
e2077eb79d
2 changed files with 78 additions and 69 deletions
100
website/assets/styles/pages/endpoint-ops.less
vendored
100
website/assets/styles/pages/endpoint-ops.less
vendored
|
|
@ -361,44 +361,52 @@
|
|||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
[purpose='three-column-features'] {
|
||||
margin-bottom: 160px;
|
||||
max-width: 1080px;
|
||||
[purpose='feature-row'] {
|
||||
&:not(:last-of-type) {
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
[purpose='feature-item'] {
|
||||
margin-left: 40px;
|
||||
margin-right: 40px;
|
||||
max-width: 266px;
|
||||
width: 33%;
|
||||
p {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 21px;
|
||||
}
|
||||
}
|
||||
}
|
||||
margin-bottom: 160px;
|
||||
h2 {
|
||||
font-size: 32px;
|
||||
line-height: 48px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
}
|
||||
[purpose='responsive-feature-row'] {
|
||||
margin-right: 0px;
|
||||
margin-left: 0px;
|
||||
[purpose='feature-item'] {
|
||||
padding-right: 24px;
|
||||
padding-left: 24px;
|
||||
margin-bottom: 64px;
|
||||
h5 {
|
||||
font-size: 16px;
|
||||
line-height: 1.2;
|
||||
font-weight: 800;
|
||||
}
|
||||
a {
|
||||
color: @core-fleet-black-75;
|
||||
text-decoration: underline;
|
||||
&:hover {
|
||||
color: @core-fleet-black-75;
|
||||
}
|
||||
}
|
||||
img {
|
||||
height: 48px;
|
||||
width: auto;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
h5 {
|
||||
font-weight: 800;
|
||||
font-size: 16px;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
[purpose='feature-item'] {
|
||||
img {
|
||||
height: 48px;
|
||||
width: auto;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
h5 {
|
||||
font-weight: 800;
|
||||
font-size: 16px;
|
||||
line-height: 27px;
|
||||
margin-bottom: 16px;
|
||||
p {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 21px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -541,6 +549,18 @@
|
|||
[purpose='feature-text'] {
|
||||
width: 410px;
|
||||
}
|
||||
[purpose='responsive-feature-row'] {
|
||||
[purpose='feature-item'] {
|
||||
padding-right: 24px;
|
||||
padding-left: 24px;
|
||||
margin-bottom: 64px;
|
||||
p {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 21px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
|
|
@ -701,18 +721,16 @@
|
|||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
[purpose='three-column-features'] {
|
||||
[purpose='feature-row'] {
|
||||
[purpose='feature-item'] {
|
||||
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
text-align: center;
|
||||
max-width: 320px;
|
||||
width: 100%;
|
||||
&:not(:last-of-type) {
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
[purpose='responsive-feature-row'] {
|
||||
[purpose='feature-item'] {
|
||||
padding-right: 0px;
|
||||
padding-left: 0px;
|
||||
margin-bottom: 64px;
|
||||
text-align: center;
|
||||
p {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 21px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
47
website/views/pages/endpoint-ops.ejs
vendored
47
website/views/pages/endpoint-ops.ejs
vendored
|
|
@ -138,43 +138,38 @@
|
|||
</div>
|
||||
|
||||
<div purpose="three-column-features" class="mx-auto">
|
||||
|
||||
<div purpose="feature-row" class="d-flex flex-sm-row flex-column align-items-sm-start align-items-center justify-content-center">
|
||||
<div purpose="feature-item" class="ml-sm-0">
|
||||
<div purpose="responsive-feature-row" class="row d-flex flex-sm-row flex-column justify-content-lg-between justify-content-center align-items-center align-items-sm-start">
|
||||
<div purpose="feature-item" class="pl-0 col-12 col-sm-6 col-lg-4">
|
||||
<img alt="Software and asset inventory" src="/images/icon-live-connection-48x48@2x.png" class="mx-auto mx-sm-0">
|
||||
<h5>Live connection</h5>
|
||||
<p>Talk to online devices in real time with Fleet’s live query API. Implement custom workflows like conditional access based on device posture, Identity, and more.</p>
|
||||
</div>
|
||||
|
||||
<div purpose="feature-item">
|
||||
<div purpose="feature-item" class="pr-0 pr-lg-4 col-12 col-sm-6 col-lg-4" >
|
||||
<img alt="Software and asset inventory" src="/images/icon-software-and-asset-inventory-48x48@2x.png" class="mx-auto mx-sm-0">
|
||||
<h5>Software and asset inventory</h5>
|
||||
<p>Get visibility into all endpoints across any operating system*, including support for servers and containers in every cloud infrastructure.</p>
|
||||
</div>
|
||||
|
||||
<div purpose="feature-item" class="mr-sm-0 mb-0">
|
||||
<div purpose="feature-item" class="pl-0 pl-lg-4 pr-lg-0 col-12 col-sm-6 col-lg-4">
|
||||
<img alt="See logins for every endpoint" src="/images/icon-see-logins-for-every-endpoint-48x48@2x.png" class="mx-auto mx-sm-0">
|
||||
<h5>See logins for every endpoint</h5>
|
||||
<p>Identify who logs in to any system, including login history and current sessions. Look up any computer by the email address of the person using it.</p>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<div purpose="feature-row" class="d-flex flex-sm-row flex-column align-items-sm-start align-items-center">
|
||||
|
||||
<div purpose="feature-item" class="ml-sm-0">
|
||||
<div purpose="feature-item" class="pr-0 pr-lg-4 pl-lg-0 col-12 col-sm-6 col-lg-4 mb-lg-0">
|
||||
<img alt="CIS benchmarks" src="/images/icon-cis-benchmarks-48x48@2x.png" class="mx-auto mx-sm-0">
|
||||
<h5>CIS benchmarks</h5>
|
||||
<p>Keep all your endpoints* compliant with customizable baselines, or use common benchmarks like CIS.</p>
|
||||
</div>
|
||||
|
||||
<div purpose="feature-item">
|
||||
<div purpose="feature-item" class="pl-0 pl-lg-4 col-12 col-sm-6 col-lg-4 mb-sm-0">
|
||||
<img alt="Verify updates and settings" src="/images/icon-edr-health-check-48x48@2x.png" class="mx-auto mx-sm-0">
|
||||
<h5>EDR health checks</h5>
|
||||
<p>Verify that your EDR tools are installed and working so you can identify and address configuration issues quickly.</p>
|
||||
</div>
|
||||
|
||||
<div purpose="feature-item" class="mr-sm-0 mb-0">
|
||||
<div purpose="feature-item" class="pr-0 pr-lg-4 col-12 col-sm-6 col-lg-4 mb-0">
|
||||
<img alt="Verify updates and settings" src="/images/icon-verify-updates-and-settings-48x48@2x.png" class="mx-auto mx-sm-0">
|
||||
<h5>Verify updates and settings</h5>
|
||||
<p>Track progress towards deadlines for security posture remediation projects, and enforce due dates through automations.</p>
|
||||
|
|
@ -202,23 +197,21 @@
|
|||
<h3>“Zero” trust, fewer tickets</h3>
|
||||
<p>You can use Fleet’s API to customize every aspect of conditional access – even the stuff your CISO hasn’t thought of yet.</p>
|
||||
</div>
|
||||
|
||||
<div purpose="three-column-features" class="mx-auto">
|
||||
<div purpose="feature-row" class="d-flex flex-sm-row flex-column align-items-sm-start align-items-center justify-content-center">
|
||||
|
||||
<div purpose="feature-item" class="ml-sm-0">
|
||||
<div purpose="responsive-feature-row" class="row d-flex flex-sm-row flex-column justify-content-lg-between justify-content-sm-start justify-content-center align-items-center align-items-sm-start">
|
||||
<div purpose="feature-item" class="pl-0 col-12 col-sm-6 col-lg-4">
|
||||
<img alt="Get in front of the IdP" src="/images/device-management-icon-control-login-experience-48x48@2x.png" class="mx-auto mx-sm-0">
|
||||
<h5>Get in front of the IdP</h5>
|
||||
<p>Gate access with <a href="https://fleetdm.com/queries">common device trust policies</a> from industry peers, or roll out your own device health checks using system data and events.</p>
|
||||
</div>
|
||||
|
||||
<div purpose="feature-item">
|
||||
<div purpose="feature-item" class="pr-0 pr-lg-4 col-12 col-sm-6 col-lg-4" >
|
||||
<img alt="Step-by-step instructions" src="/images/device-management-icon-step-by-step-48x48@2x.png" class="mx-auto mx-sm-0">
|
||||
<h5>Step-by-step instructions</h5>
|
||||
<p>Show resolution steps or use <a href="https://medium.com/pinterest-engineering/enforcing-device-authn-compliance-at-pinterest-a74938cb089b" target="_blank">custom HTML</a> to show employees what they need to do to restore their access without waiting on a ticket. Then give it back automatically, as soon as the problems are fixed.</p>
|
||||
</div>
|
||||
|
||||
<div purpose="feature-item" class="mr-sm-0 mb-0">
|
||||
<div purpose="feature-item" class="pl-0 pl-lg-4 pr-lg-0 col-12 col-sm-6 col-lg-4 mb-0">
|
||||
<img alt="Manage device posture" src="/images/device-management-icon-manage-device-posture-48x48@2x.png" class="mx-auto mx-sm-0">
|
||||
<h5>Live retry</h5>
|
||||
<p>Give people a way to get back to work quickly and minimize downtime. Fleet’s live query API instantly re-checks the OS version and other device state so users don’t get locked out.</p>
|
||||
|
|
@ -249,40 +242,38 @@
|
|||
</div>
|
||||
|
||||
<div purpose="three-column-features" class="mx-auto">
|
||||
|
||||
<div purpose="feature-row" class="d-flex flex-sm-row flex-column align-items-sm-start align-items-center justify-content-center">
|
||||
<div purpose="feature-item" class="ml-sm-0">
|
||||
<div purpose="responsive-feature-row" class="row d-flex flex-sm-row flex-column justify-content-lg-between justify-content-center align-items-center align-items-sm-start">
|
||||
<div purpose="feature-item" class="pl-0 col-12 col-sm-6 col-lg-4">
|
||||
<img alt="Incident response (IR)" src="/images/icon-incident-response-48x48@2x.png" class="mx-auto mx-sm-0">
|
||||
<h5>Incident response (IR)</h5>
|
||||
<p>Contain and recover from breaches using live data, remote commands, and automated workflows.</p>
|
||||
</div>
|
||||
|
||||
<div purpose="feature-item">
|
||||
<div purpose="feature-item" class="pr-0 pr-lg-4 col-12 col-sm-6 col-lg-4" >
|
||||
<img alt="Detection and response" src="/images/icon-detection-and-response-48x48@2x.png" class="mx-auto mx-sm-0">
|
||||
<h5>Detection and response</h5>
|
||||
<p>Ship logs and alerts when unusual behavior is detected. Run scripts on demand or when alerts trigger.</p>
|
||||
</div>
|
||||
|
||||
<div purpose="feature-item" class="mr-sm-0 mb-0">
|
||||
<div purpose="feature-item" class="pl-0 pl-lg-4 pr-lg-0 col-12 col-sm-6 col-lg-4">
|
||||
<img alt="File access monitoring (FIM)" src="/images/icon-fim-48x48@2x.png" class="mx-auto mx-sm-0">
|
||||
<h5>File access monitoring (FIM)</h5>
|
||||
<p>Specify files to monitor for changes or deletions, then log those events to your SIEM or data lake.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div purpose="feature-row" class="d-flex flex-sm-row flex-column align-items-sm-start align-items-center justify-content-center">
|
||||
<div purpose="feature-item" class="ml-sm-0">
|
||||
|
||||
<div purpose="feature-item" class="pr-0 pr-lg-4 pl-lg-0 col-12 col-sm-6 col-lg-4 mb-lg-0">
|
||||
<img alt="Attack surface management" src="/images/icon-attack-surface-management-48x48@2x.png" class="mx-auto mx-sm-0">
|
||||
<h5>Attack surface management</h5>
|
||||
<p>Discover security misconfigurations and vulnerabilities and prioritize risks that matter to your organization.</p>
|
||||
</div>
|
||||
|
||||
<div purpose="feature-item">
|
||||
<div purpose="feature-item" class="pl-0 pl-lg-4 col-12 col-sm-6 col-lg-4 mb-sm-0">
|
||||
<img alt="Malware detection" src="/images/icon-malware-detection-48x48@2x.png" class="mx-auto mx-sm-0">
|
||||
<h5>Malware detection</h5>
|
||||
<p>Continuously scan host filesystems for indicators of compromise (IOC). Import malware signatures from threat intelligence sources.</p>
|
||||
</div>
|
||||
|
||||
<div purpose="feature-item" class="mr-sm-0 mb-0">
|
||||
<div purpose="feature-item" class="pr-0 pr-lg-4 col-12 col-sm-6 col-lg-4 mb-0">
|
||||
<img alt="Osquery made easy" src="/images/icon-osquery-made-easy-48x48@2x.png" class="mx-auto mx-sm-0">
|
||||
<h5>Osquery made easy</h5>
|
||||
<p>Collect exactly the data you need from your production infrastructure across every cloud and data center*.</p>
|
||||
|
|
|
|||
Loading…
Reference in a new issue