55 lines
776 B
Plaintext
55 lines
776 B
Plaintext
---
|
|
interface Props {
|
|
title: string;
|
|
tagline?: string;
|
|
align?: 'start' | 'center';
|
|
}
|
|
|
|
const { align = 'center', tagline, title } = Astro.props;
|
|
---
|
|
|
|
<div class:list={['hero stack gap-4', align]}>
|
|
<div class="stack gap-2">
|
|
<h1 class="title">{title}</h1>
|
|
{tagline && <p class="tagline">{tagline}</p>}
|
|
</div>
|
|
<slot />
|
|
</div>
|
|
|
|
<style>
|
|
.hero {
|
|
font-size: var(--text-lg);
|
|
text-align: center;
|
|
}
|
|
|
|
.title,
|
|
.tagline {
|
|
max-width: 37ch;
|
|
margin-inline: auto;
|
|
}
|
|
|
|
.title {
|
|
font-size: var(--text-3xl);
|
|
color: var(--gray-0);
|
|
}
|
|
|
|
@media (min-width: 50em) {
|
|
.hero {
|
|
font-size: var(--text-xl);
|
|
}
|
|
|
|
.start {
|
|
text-align: start;
|
|
}
|
|
|
|
.start .title,
|
|
.start .tagline {
|
|
margin-inline: unset;
|
|
}
|
|
|
|
.title {
|
|
font-size: var(--text-5xl);
|
|
}
|
|
}
|
|
</style>
|