87 lines
2.2 KiB
Plaintext
87 lines
2.2 KiB
Plaintext
---
|
|
import { Picture } from 'astro:assets';
|
|
import plant from '../../assets/images/plant-at-dusk.jpg';
|
|
import { t, type Lang } from '../../i18n/ui';
|
|
|
|
interface Props { lang: Lang }
|
|
const { lang } = Astro.props;
|
|
const ui = t(lang);
|
|
---
|
|
<section class="hero night" aria-labelledby="hero-title">
|
|
<div class="hero__media">
|
|
<Picture
|
|
src={plant}
|
|
alt={ui.hero.imageAlt}
|
|
formats={['avif']}
|
|
fallbackFormat="webp"
|
|
widths={[640, 960, 1440, 1920, 2400, 3024]}
|
|
sizes="100vw"
|
|
loading="eager"
|
|
fetchpriority="high"
|
|
decoding="async"
|
|
class="hero__img img-cover img-doc"
|
|
pictureAttributes={{ class: 'hero__picture' }}
|
|
/>
|
|
<div class="hero__overlay"></div>
|
|
</div>
|
|
|
|
<div class="container hero__content">
|
|
<h1 id="hero-title" class="display hero__title">
|
|
{ui.hero.lines.map((line, i) => (
|
|
<span class="hero__line" style={`--i: ${i}`}>{line}</span>
|
|
))}
|
|
</h1>
|
|
</div>
|
|
</section>
|
|
|
|
<style>
|
|
.hero {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
min-height: clamp(30rem, calc(100svh - var(--header-height)), 56rem);
|
|
overflow: hidden;
|
|
}
|
|
.hero__media { position: absolute; inset: 0; }
|
|
:global(.hero__picture) { display: block; width: 100%; height: 100%; }
|
|
.hero__img,
|
|
:global(.hero__img) {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
object-position: 60% 50%;
|
|
transform-origin: 50% 60%;
|
|
animation: hero-settle var(--dur-hero) var(--ease) both;
|
|
}
|
|
.hero__overlay {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: var(--overlay);
|
|
}
|
|
.hero__content {
|
|
position: relative;
|
|
width: 100%;
|
|
padding-block: var(--space-9);
|
|
}
|
|
.hero__title { max-width: 12em; }
|
|
.hero__line {
|
|
display: block;
|
|
opacity: 0;
|
|
animation: hero-rise 700ms var(--ease) forwards;
|
|
animation-delay: calc(240ms + var(--i) * 160ms);
|
|
}
|
|
|
|
@keyframes hero-settle {
|
|
from { transform: scale(1.045); }
|
|
to { transform: none; }
|
|
}
|
|
@keyframes hero-rise {
|
|
from { opacity: 0; transform: translateY(0.18em); }
|
|
to { opacity: 1; transform: none; }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.hero__img, :global(.hero__img), .hero__line { animation: none; opacity: 1; transform: none; }
|
|
}
|
|
</style>
|