Elgato_dark/fleet
1
0
Fork 0
mirror of https://github.com/fleetdm/fleet synced 2026-05-21 07:58:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 110

Website font and schedule button (#676)

Browse source 
* Correct fonts: Nunito and Nunito Sans

* Modify schedule demo button

* Arrow speed

* Add all font weights to website font

* Globalize font size for header, paragraph, footer

* Readable color for dropdown-item:active

Co-authored-by: Rachel Elysia Perkins <rachel@fleetdm.com>
This commit is contained in:
RachelElysia 2021-04-28 03:31:43 -04:00 committed by GitHub
parent 0c98343972
commit d7fbf55131
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 54 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
website/assets/dependencies/bootstrap-4/bootstrap-4.css vendored
View file

@ -3135,7 +3135,7 @@ input[type="button"].btn-block {
}
.dropdown-item.active, .dropdown-item:active {
color: #fff;
color: #6b6cfa;
text-decoration: none;
background-color: #007bff;
}

23
website/assets/styles/bootstrap-overrides.less vendored
View file

@ -28,9 +28,30 @@ h1, h2, h3, h4, h5, h6 {
font-family: @header-font;
}
h1, h2, h3, h4 {
font-weight: 900;
font-weight: 800;
}
h1 {
font-size: 48px;
line-height: 56px;
}
h2 {
font-size: 36px;
line-height: 48px;
}
p {
font-size: 18px;
line-height: 28px;
}
footer {
font-size: 14px;
line-height: 24px;
}
.btn {
font-family: @header-font;
font-weight: 700;

6
website/assets/styles/mixins-and-variables/typography.less vendored
View file

@ -1,7 +1,7 @@
// Font families:
@main-font: 'Mulish', sans-serif;
@header-font: 'Raleway', sans-serif;
@navigation-font: 'Lato', sans-serif;
@main-font: 'Nunito', sans-serif;
@header-font: 'Nunito Sans', sans-serif;
@navigation-font: 'Nunito Sans', sans-serif;
// Font weights:
@bold: 700;

25
website/assets/styles/pages/get-started.less vendored
View file

@ -31,10 +31,6 @@
color: #192147;
background-color: #f9fafc;
border-color: #f9fafc;
&:hover {
background-color: #e2e4ea;
border-color: #e2e4ea;
}
}
}
#arrow {
@ -45,11 +41,11 @@
color: #192147;
font-weight: bold;
user-select: none;
transition: 0.2s ease-in;
-o-transition: 0.2s ease-in;
-ms-transition: 0.2s ease-in;
-moz-transition: 0.2s ease-in;
-webkit-transition: 0.2s ease-in;
transition: 0.2s linear;
-o-transition: 0.2s linear;
-ms-transition: 0.2s linear;
-moz-transition: 0.2s linear;
-webkit-transition: 0.2s linear;
}
#arrow:before {
@ -59,16 +55,15 @@
top: 12px;
left: 80%; // <--- here
/* opacity: 0; */
-webkit-transition: all 1000ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
#arrow:hover:before {
left: 82%; // <--- here
transition: 0.4s ease-in;
-o-transition: 0.4s ease-in;
-ms-transition: 0.4s ease-in;
-moz-transition: 0.4s ease-in;
-webkit-transition: 0.4s ease-in;
transition: 0.2s linear;
-o-transition: 0.2s linear;
-ms-transition: 0.2s linear;
-moz-transition: 0.2s linear;
-webkit-transition: 0.2s linear;
/* opacity:1; */
}
}

25
website/assets/styles/pages/pricing.less vendored
View file

@ -19,10 +19,6 @@
color: #192147;
background-color: #fff;
border-color: #fff;
&:hover {
background-color: #e2e4ea;
border-color: #e2e4ea;
}
}
}
.card-body {
@ -39,11 +35,11 @@
color: #192147;
font-weight: bold;
user-select: none;
transition: 0.2s ease-in;
-o-transition: 0.2s ease-in;
-ms-transition: 0.2s ease-in;
-moz-transition: 0.2s ease-in;
-webkit-transition: 0.2s ease-in;
transition: 0.2s linear;
-o-transition: 0.2s linear;
-ms-transition: 0.2s linear;
-moz-transition: 0.2s linear;
-webkit-transition: 0.2s linear;
}
#arrow:before {
@ -53,16 +49,15 @@
top: 12px;
left: 80%; // <--- here
/* opacity: 0; */
-webkit-transition: all 1000ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
#arrow:hover:before {
left: 82%; // <--- here
transition: 0.4s ease-in;
-o-transition: 0.4s ease-in;
-ms-transition: 0.4s ease-in;
-moz-transition: 0.4s ease-in;
-webkit-transition: 0.4s ease-in;
transition: 0.2s linear;
-o-transition: 0.2s linear;
-ms-transition: 0.2s linear;
-moz-transition: 0.2s linear;
-webkit-transition: 0.2s linear;
/* opacity:1; */
}
}

2
website/views/layouts/layout.ejs vendored
View file

@ -17,7 +17,7 @@
rule. (Include them up here along with any hard-coded «link» tags for Typekit,
Google Fonts, etc. - above the «body» to prevent the page flickering when fonts
load.) */ %>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Mulish:wght@400;700&family=Raleway:wght@400;700&display=swap&Source+Code+Pro&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;500;600;700;800;900&family=Nunito:wght@300;400;500;600;700;800;900&display=swap&Source+Code+Pro&display=swap" rel="stylesheet">
<% /* Certain scripts, normally analytics tools like Google Tag Manager and
Google Analytics, should only be included in production: */

10
website/views/pages/homepage.ejs vendored
View file

@ -30,7 +30,7 @@
<div style="max-width: 1260px" class="container-fluid pb-5 px-4 px-sm-5 mx-auto">
<div class="text-center py-5">
<h2 style="font-size: 36px;" class="my-5">Every device in your enterprise.</h2>
<h2 class="my-5">Every device in your enterprise.</h2>
<p style="max-width: 640px;" class="pb-5 mb-0 mx-auto">Keep track of servers and containers wherever they live: on your own hardware, in Amazon/Azure/Google clouds, or a little bit of each. Write scripts with <span style="font-family: 'Source Code Pro', monospace; font-size: 14px;">fleetctl</span> and design scheduled queries to integrate alerts and dashboards across your enterprise. Run on your own hardware or deploy in any cloud.</p>
<div class="mb-5">
<div class="d-inline-block mr-2 mr-sm-5">
@ -50,7 +50,7 @@
<div style="max-width: 1260px;" class="container-fluid pb-5 px-4 px-sm-5 mx-auto">
<div style="max-width: 800px" class="pb-5 mx-auto">
<div style="max-width: 800px; text-align: center;" class="position-relative mx-auto">
<p style="font-size: 18px; font-family: 'Lato', sans-serif;">"Fleet is hands down the best osquery platform out there. Zach and I created Fleet as a natural extension to our original vision for osquery and this has manifested in the ease-of-use, flexibility, and adoption it has today. Look to Fleet for the future of open-source endpoint monitoring."</p>
<p>"Fleet is hands down the best osquery platform out there. Zach and I created Fleet as a natural extension to our original vision for osquery and this has manifested in the ease-of-use, flexibility, and adoption it has today. Look to Fleet for the future of open-source endpoint monitoring."</p>
<p style="color: #676A7A" class="mb-4">- Mike Arpaia, Co-creator of osquery</p>
<img alt="osquery logo" src="/images/logo-osquery-89x24@2x.png" style="height: 40px; width: 137px;" class="mb-3 mx-auto"/>
</div>
@ -60,7 +60,7 @@
<div style="background-color: #F2F7F9;">
<div style="max-width: 1260px;" class="container-fluid py-5 px-4 px-sm-5 mx-auto">
<div class="text-center py-5">
<h2 style="font-size: 36px;" class="mb-5">Send device data to any log destination.</h2>
<h2 class="mb-5">Send device data to any log destination.</h2>
<p style="max-width: 866px;" class="mx-auto">Fleet makes it easier to query and track your servers, containers, and laptops. It extends <a style="color:#6a67fe; text-decoration: underline;" target="_blank" href="https://osquery.io/">osquery</a> to answer questions about multiple devices at the same time and provides log streams that enable automated threat detection.</p>
</div>
<div class="log-destinations-container pb-5">
@ -89,7 +89,7 @@
<div class="row pb-5">
<div class="col-md">
<div style="max-width: 510px;" class="pr-md-5">
<h2 style="font-size: 36px; max-width: 400px" class="mb-4">Your hosted universe, all in one flexible app.</h2>
<h2 style="max-width: 400px" class="mb-4">Your hosted universe, all in one flexible app.</h2>
<p class="mb-5">Organizations large and small use osquery with Fleet every day to stay secure and compliant. That’s good news, since it means there are lots of other developers and security practitioners talking about Fleet, dreaming up features, and contributing patches. Let’s stop reinventing the wheel and build the future of device management together.</p>
<a target="_blank" href="https://osquery.slack.com/join/shared_invite/zt-h29zm0gk-s2DBtGUTW4CFel0f0IjTEw#/" class="btn btn-block btn-lg btn-info mb-5">Meet the Fleet<span purpose="meet-the-fleet-community-expanded-text"> community</span></a>
</div>
@ -128,7 +128,7 @@
<div style="max-width: 800px" class="py-5 mx-auto">
<div style="max-width: 760px; padding-left: 38px" class="position-relative mx-auto">
<span style="font-size: 48px; line-height: 60px; left: 0; top: 0;" class="quote-mark position-absolute">“</span>
<p style="font-size: 24px; font-family: 'Lato', sans-serif;">I've been using Fleet to manage thousands of hosts running osquery. Fleet itself is pretty low-maintenance; mostly I don't have to worry about Fleet uptime and instead focus on what matters: deploying osquery, developing better queries, and getting the most out of osquery logs.</p>
<p style="font-size: 24px;">I've been using Fleet to manage thousands of hosts running osquery. Fleet itself is pretty low-maintenance; mostly I don't have to worry about Fleet uptime and instead focus on what matters: deploying osquery, developing better queries, and getting the most out of osquery logs.</p>
<p style="color: #676A7A" class="mb-4">- Brendan Shaklovitz, Senior Site Reliability Engineer, Security Team @ Atlassian</p>
<img alt="Atlassian logo" src="/images/logo-atlassian-194x24@2x.png" style="height: 24px; width: 194px;" class="mt-5"/>
</div>

4
website/views/pages/pricing.ejs vendored
View file

@ -15,7 +15,7 @@
<div style="border-radius: 15px" class="card mb-4">
<div class="card-body">
<div style="min-height: 125px" class="text-center mt-4">
<p style="font-size: 18px" class="font-weight-bold mb-0">
<p class="font-weight-bold mb-0">
Core
</p>
<h2 style="color: #6b6cfa">FREE</h2>
@ -75,7 +75,7 @@
<div style="border-radius: 15px" class="card mb-4">
<div class="card-body">
<div style="min-height: 125px" class="text-center mt-4">
<p style="font-size: 18px" class="font-weight-bold mb-0">
<p class="font-weight-bold mb-0">
Basic
</p>
<h2 style="color: #6b6cfa">$4</h2>