feat(home): add a first-person byline under the hero search #97
No files matched your search
@@ -189,6 +189,43 @@
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* The one line in the first person, so it is set apart from the marketing copy
|
||||
* around it without shouting: display face, a step down in size, and a short
|
||||
* brand rule instead of a bullet or an emoji.
|
||||
*
|
||||
* No italic — Manrope ships no italic in the loaded weights, so font-style
|
||||
* would be synthesised into a slant. Same reason .heroEmph sets font-style
|
||||
* back to normal.
|
||||
*/
|
||||
.heroByline {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.55rem;
|
||||
margin: 1.25rem 0 0;
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--step--1);
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.heroByline::before {
|
||||
content: '';
|
||||
flex: 0 0 auto;
|
||||
width: 1.25rem;
|
||||
height: 2px;
|
||||
border-radius: 1px;
|
||||
background: var(--brand);
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.heroByline {
|
||||
margin-top: 1rem;
|
||||
font-size: var(--step--2);
|
||||
}
|
||||
}
|
||||
|
||||
.heroEyebrow {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
@@ -464,6 +464,19 @@ export function HomeView({ initialSchools, filters, totalSchools, howItWorks, ed
|
||||
geoError={geoError}
|
||||
/>
|
||||
|
||||
{/*
|
||||
Sits under the search rather than in the footer on purpose: this
|
||||
is the one line on the page written in the first person, and it
|
||||
earns its place at the moment someone is deciding whether to
|
||||
trust a site full of government statistics. In the footer it
|
||||
would be true and unread.
|
||||
|
||||
It is deliberately the only such claim — the page's other trust
|
||||
signals are all about the data's provenance, which is checkable.
|
||||
This one is about who made it, which is not, so it is stated
|
||||
once, plainly, and never repeated.
|
||||
*/}
|
||||
<p className={styles.heroByline}>Built for parents, by a parent.</p>
|
||||
</div>
|
||||
|
||||
{/*
|
||||
|
||||
Reference in new issue
Block a user