DeCentN2Madness
a048d395f7
- consolidate the shared eyebrow label styling into the global typography layer - replace the old script-label usage in page hero, home hero, FAQ, and team shells - keep the next heading flush under the label across all affected page types
41 lines
2.1 KiB
Plaintext
41 lines
2.1 KiB
Plaintext
---
|
|
interface Props {
|
|
title: string;
|
|
subtitle?: string;
|
|
image?: string;
|
|
eyebrow?: string;
|
|
constrain?: boolean;
|
|
}
|
|
const { title, subtitle, image, eyebrow, constrain = false } = Astro.props;
|
|
---
|
|
|
|
<header class:list={['page-hero', { 'page-hero--image': image, 'page-hero--constrained': image && constrain }]} style={image ? `--hero-image: url("${image}")` : undefined}>
|
|
<div class="container">
|
|
<div class="page-hero__heading">
|
|
{eyebrow
|
|
? <div class="page-hero__copy"><p class="eyebrow">{eyebrow}</p><h1>{title}</h1>{subtitle && <h2>{subtitle}</h2>}</div>
|
|
: <><h1>{title}</h1>{subtitle && <h2>{subtitle}</h2>}</>
|
|
}
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<style>
|
|
.page-hero { background: var(--color-tint); padding-block: 4rem; text-align: center; }
|
|
.page-hero__heading { display: inline-block; }
|
|
.page-hero h1 { margin: 0; }
|
|
.page-hero h2 { color: var(--color-primary); font-family: var(--font-heading); font-size: clamp(2rem, 4vw, 2.5rem); font-weight: 400; line-height: 1.15; margin: .5rem 0 0; }
|
|
.page-hero--image { background-image: var(--hero-image); background-position: center; background-repeat: no-repeat; background-size: cover; max-height: 420px; padding-block: 0; text-align: left; }
|
|
.page-hero--image > .container { padding-block: 10rem; }
|
|
.page-hero--image h1 { max-width: 600px; }
|
|
.page-hero--image h2 { max-width: 600px; }
|
|
.page-hero__copy { max-width: 600px; }
|
|
.page-hero--constrained { background-image: var(--hero-image), linear-gradient(var(--color-tint), var(--color-tint)); background-clip: content-box, border-box; background-origin: content-box, border-box; background-position: center, center; background-repeat: no-repeat, repeat; background-size: cover, auto; padding-inline: max(0px, calc((100% - var(--container-w)) / 2)); }
|
|
@media (max-width: 760px) {
|
|
.page-hero__heading { background: #fffb; padding: 2rem; }
|
|
.page-hero--image > .container { padding-block: 6.25rem; }
|
|
.page-hero--image { text-align: center; }
|
|
.page-hero--image h1, .page-hero--image h2, .page-hero__copy { margin-inline: auto; }
|
|
}
|
|
</style>
|