32 lines
1.1 KiB
Plaintext
32 lines
1.1 KiB
Plaintext
---
|
|
import T from '../content/T.astro';
|
|
import { t } from '../../lib/content';
|
|
const stages = [1, 2, 3];
|
|
---
|
|
<section class="section">
|
|
<div class="container">
|
|
<div class="section-heading">
|
|
<T tag="about.storylab.title" as="h2" />
|
|
<T tag="about.storylab.body" as="p" />
|
|
</div>
|
|
<div class="tl">
|
|
<T tag="about.timeline.label" as="h3" class="tl__label" />
|
|
<T tag="about.timeline.open-text" as="p" />
|
|
{stages.map((n) => (
|
|
<details class="tl__stage">
|
|
<summary>+ {t(`about.timeline.stage${n}.label`)}</summary>
|
|
<T tag={`about.timeline.stage${n}.text`} as="p" />
|
|
</details>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<style>
|
|
.tl { max-width: 720px; margin-inline: auto; }
|
|
.tl__label { text-transform: uppercase; letter-spacing: .16em; font-size: .9rem; }
|
|
.tl__stage { border-top: 1px solid #e4ded6; padding-block: 14px; }
|
|
.tl__stage summary { cursor: pointer; font-family: var(--font-heading); font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; color: var(--c-heading); list-style: none; }
|
|
.tl__stage summary::-webkit-details-marker { display: none; }
|
|
</style>
|