Add "monitor-features" partial and supporting files.
This commit is contained in:
lesleyjanenorton
Родитель
e1a1798bb9
Коммит
e4762560dc
|
|
@ -486,3 +486,11 @@ create-strong-passwords= How to Create Strong Passwords
|
|||
take-control= Take back control of your personal data.
|
||||
cant-stop-hackers= You can't stop hackers from hacking. But you can avoid bad habits that make their work easy.
|
||||
see-more-articles= See more articles
|
||||
|
||||
monitor-your-online-accounts = Monitor your online accounts for threats
|
||||
stay-alert= Stay alert to new breaches
|
||||
if-your-info= If your information surfaces in a new data breach, we'll send you an alert.
|
||||
search-all-emails= Search all your email addresses for breaches and get alerts about new threats.
|
||||
keep-your-data-safe= Find out what you need to do to keep your data safe from cyber criminals.
|
||||
monitor-several-emails= Monitor several emails
|
||||
get-expert-advice= Get ongoing expert advice
|
||||
|
|
|
|||
|
|
@ -12,6 +12,11 @@ body {
|
|||
--color: rgba(47, 43, 55, 1);
|
||||
--padding: 2rem;
|
||||
--maxWidth: 1100px;
|
||||
--margin: 1rem;
|
||||
--bigHeadline: 2.8rem;
|
||||
--headline: 2.1rem;
|
||||
--subhead: 1.1rem;
|
||||
--lineHeight: 180%;
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
|
@ -19,7 +24,6 @@ body {
|
|||
color: var(--color);
|
||||
font-family: "SF Pro Text", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
font-size: 0.9rem;
|
||||
line-height: 100%;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
min-height: 100vh;
|
||||
|
|
@ -28,31 +32,45 @@ body {
|
|||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: var(--lineHeight);
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
line-height: 100%;
|
||||
.big-headline {
|
||||
font-size: var(--bigHeadline);
|
||||
font-weight: 300;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
h2.headline {
|
||||
.headline {
|
||||
font-size: 2.1rem;
|
||||
font-weight: 500;
|
||||
margin-bottom: 1.5rem;
|
||||
margin-bottom: var(--margin);
|
||||
}
|
||||
|
||||
h3.subhead {
|
||||
.main-subhead,
|
||||
.subhead {
|
||||
font-weight: 200;
|
||||
font-size: 1.1rem;
|
||||
line-height: 1.6rem;
|
||||
font-size: var(--subhead);
|
||||
line-height: var(--lineHeight);
|
||||
margin-bottom: var(--margin);
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.subhead {
|
||||
padding-right: 10%;
|
||||
}
|
||||
|
||||
h4.feature {
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--color);
|
||||
font-size: 0.85rem;
|
||||
|
|
@ -101,7 +119,7 @@ ul li {
|
|||
position: relative;
|
||||
}
|
||||
|
||||
.content-row {
|
||||
.row {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
|
|
@ -112,7 +130,7 @@ ul li {
|
|||
padding: 1.5rem 3.25rem;
|
||||
}
|
||||
|
||||
.content-row,
|
||||
.row,
|
||||
.content-box {
|
||||
max-width: var(--maxWidth);
|
||||
margin: auto;
|
||||
|
|
@ -120,25 +138,22 @@ ul li {
|
|||
|
||||
.container,
|
||||
.content-box,
|
||||
.content-row,
|
||||
.row,
|
||||
.col-12 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.col,
|
||||
.col-6,
|
||||
.col-12 {
|
||||
margin-left: 0.5rem;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.container,
|
||||
.content-box,
|
||||
.content-row,
|
||||
.row,
|
||||
.col-5,
|
||||
.col-6,
|
||||
.col-7,
|
||||
.col-12,
|
||||
.flx,
|
||||
.flx-cntr {
|
||||
.flx-cntr,
|
||||
.flx-row {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
|
@ -146,14 +161,27 @@ ul li {
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
.spc-btwn {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.col-5 {
|
||||
flex: 1 1 41.66666667%;
|
||||
max-width: 41.66666667%;
|
||||
}
|
||||
|
||||
.col-6 {
|
||||
padding: var(--padding);
|
||||
flex: 1 1 50%;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
.col-7 {
|
||||
flex: 1 1 58.33333333%;
|
||||
max-width: 58.33333333%;
|
||||
}
|
||||
|
||||
.col-8 {
|
||||
padding: var(--padding);
|
||||
flex: 1 1 66.66666667%;
|
||||
max-width: 66.66666667%;
|
||||
}
|
||||
|
|
@ -161,7 +189,31 @@ ul li {
|
|||
.col-12 {
|
||||
flex: 1 1 100%;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.col-5,
|
||||
.col-6,
|
||||
.col-7,
|
||||
.col-8,
|
||||
.col-12 {
|
||||
padding: var(--padding);
|
||||
flex-direction: column;
|
||||
margin-left: 0.5rem;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.col {
|
||||
flex-direction: column;
|
||||
margin-left: 0.5rem;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.txt-cntr {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.bg-white {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
/* SPRITES */
|
||||
|
|
@ -189,7 +241,8 @@ div.sprite {
|
|||
|
||||
@media screen and (max-width: 800px) {
|
||||
body {
|
||||
--maxWidth: 700px;
|
||||
--maxWidth: 600px;
|
||||
--bigHeadline: 2.5rem;
|
||||
}
|
||||
|
||||
.hide-mobile {
|
||||
|
|
@ -202,9 +255,15 @@ div.sprite {
|
|||
visibility: visible;
|
||||
}
|
||||
|
||||
.col-5,
|
||||
.col-6,
|
||||
.col-8 {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.row {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 500px) {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,58 @@
|
|||
h3.feature-title {
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
.monitor-features {
|
||||
background: rgb(27, 26, 29);
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
|
||||
.monitor-features .content {
|
||||
border-radius: 3px;
|
||||
max-width: 260px;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
h3.feature-title {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
h4.feature-subhead {
|
||||
font-weight: 300;
|
||||
line-height: 1.5rem;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.monitor-features .flx {
|
||||
width: 100%;
|
||||
margin-top: 2rem;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.feat-img {
|
||||
height: 4rem;
|
||||
width: 4rem;
|
||||
border: 1px solid rgba(255, 255, 255, .1);
|
||||
border-radius: 50%;
|
||||
margin: 1rem auto;
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.monitor-features .content:hover .feat-img,
|
||||
.feat-img:hover {
|
||||
background-color: rgba(255, 255, 255, .08);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.monitor-features .content {
|
||||
max-width: 300px;
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
.monitor-features .flx {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
.homepage-scan-form {
|
||||
border: 1px solid #eee;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.monitor-homepage .row {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
|
@ -5,6 +5,7 @@ const breaches = require("./breaches");
|
|||
const footer = require("./footer");
|
||||
const header = require("./header");
|
||||
const legacyHelpers = require("./hbs-helpers");
|
||||
const monitorFeatures = require("./monitor-features");
|
||||
|
||||
|
||||
module.exports = {
|
||||
|
|
@ -14,5 +15,6 @@ module.exports = {
|
|||
footer,
|
||||
header,
|
||||
legacyHelpers,
|
||||
monitorFeatures,
|
||||
),
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,37 @@
|
|||
"use strict";
|
||||
|
||||
const { LocaleUtils } = require("./../locale-utils");
|
||||
|
||||
const monitorFeaturesList = (args) => {
|
||||
const locales = args.data.root.req.supportedLocales;
|
||||
const features = [
|
||||
{
|
||||
title: "Stay alert to new breaches",
|
||||
titleId: "stay-alert",
|
||||
subhead: "If your information surfaces in a new data breach, we'll send you an alert.",
|
||||
subheadId: "if-your-info",
|
||||
},
|
||||
{
|
||||
title: "Monitor several emails",
|
||||
titleId: "monitor-several-emails",
|
||||
subhead: "Search all your email addresses for breaches and get alerts about new threats.",
|
||||
subheadId: "search-all-emails",
|
||||
},
|
||||
{
|
||||
title: "Get ongoing expert advice",
|
||||
titleId: "get-expert-advice",
|
||||
subhead: "Find out what you need to do to keep your data safe from cyber criminals.",
|
||||
subheadId: "keep-your-data-safe",
|
||||
},
|
||||
];
|
||||
|
||||
features.forEach(feature => {
|
||||
feature.titleId = LocaleUtils.fluentFormat(locales, feature.titleId);
|
||||
feature.subheadId = LocaleUtils.fluentFormat(locales, feature.subheadId);
|
||||
});
|
||||
return features;
|
||||
};
|
||||
|
||||
module.exports = {
|
||||
monitorFeaturesList,
|
||||
};
|
||||
|
|
@ -1,4 +1,17 @@
|
|||
{{!< default }}
|
||||
|
||||
{{> latest-breach }}
|
||||
<main class="container monitor-homepage">
|
||||
<section class="row spc-btwn">
|
||||
<div class="col-6">
|
||||
<h2 class="big-headline">{{getString "landing-headline"}}</h2>
|
||||
</div>
|
||||
<div class="col-5 homepage-scan-form">
|
||||
<h3 class="main-subhead">{{getString "fxa-landing-blurb"}}</h3>
|
||||
{{> scan_form }}
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
{{!-- {{> latest-breach }} --}}
|
||||
{{> article-list }}
|
||||
{{> monitor-features }}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,16 @@
|
|||
<section class="container monitor-features">
|
||||
<div class="row">
|
||||
<div class="col-12 flx-cntr txt-cntr">
|
||||
<h2 class="headline">{{getString "monitor-your-online-accounts"}}</h2>
|
||||
<div class="flx">
|
||||
{{#each (monitorFeaturesList)}}
|
||||
<div class="content col">
|
||||
<div class="feat-img"></div>
|
||||
<h3 class="feature-title">{{ this.titleId }}</h3>
|
||||
<h4 class="feature-subhead">{{ this.subheadId }}</h4>
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -1,10 +1,14 @@
|
|||
{{#ifCompare UTM_SOURCE "===" "localhost"}}
|
||||
<link rel="stylesheet" href="/css/app.css">
|
||||
<link rel="stylesheet" href="/css/articles.css">
|
||||
<link rel="stylesheet" href="/css/articles.css">
|
||||
<link rel="stylesheet" href="/css/breach-listing.css">
|
||||
<link rel="stylesheet" href="/css/breach-stats.css">
|
||||
<link rel="stylesheet" href="/css/footer.css">
|
||||
<link rel="stylesheet" href="/css/forms.css">
|
||||
<link rel="stylesheet" href="/css/header.css">
|
||||
<link rel="stylesheet" href="/css/latest-breach.css">
|
||||
<link rel="stylesheet" href="/css/monitor.css">
|
||||
<link rel="stylesheet" href="/css/monitor-features.css">
|
||||
{{else}}
|
||||
<link rel="stylesheet" href="/dist/app.min.css">
|
||||
{{/ifCompare}}
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче