56 lines
1.8 KiB
Plaintext
56 lines
1.8 KiB
Plaintext
---
|
|
import GridObject from '../home/GridObject.astro';
|
|
import { t, type Lang } from '../../i18n/ui';
|
|
interface Props { lang: Lang }
|
|
const { lang } = Astro.props;
|
|
const ui = t(lang);
|
|
const objects = ['steps', 'nested', 'stack'] as const;
|
|
---
|
|
<section class="section vcards" aria-label={lang === 'de' ? 'Eigenschaften' : 'Properties'}>
|
|
<div class="container">
|
|
<ul class="vcards__list" role="list">
|
|
{ui.verifier.cards.map((card, i) => (
|
|
<li class="vcards__item">
|
|
<h2 class="vcards__title">{card.title}</h2>
|
|
<GridObject kind={objects[i]} class="vcards__object" />
|
|
<p class="muted vcards__body">{card.body}</p>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
|
|
<style>
|
|
.vcards__list { display: grid; gap: var(--gap); }
|
|
.vcards__item {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr);
|
|
/* Title, then the drawing in the row that takes the slack, then the body at the bottom. */
|
|
grid-template-rows: auto 1fr auto;
|
|
gap: var(--space-6);
|
|
padding: var(--space-6) var(--space-6) var(--space-7);
|
|
background: var(--paper-deep);
|
|
}
|
|
.vcards__title {
|
|
font-size: var(--step-title);
|
|
line-height: var(--leading-title);
|
|
letter-spacing: var(--track-h2);
|
|
font-weight: var(--weight-regular);
|
|
min-height: calc(2 * var(--leading-title) * 1em);
|
|
text-wrap: balance;
|
|
hyphens: auto;
|
|
}
|
|
.vcards__item :global(.vcards__object) { width: 100%; max-width: 14rem; justify-self: center; align-self: center; }
|
|
/* Hovering a card lets its grid recede, so the shape that carries the idea stands alone. */
|
|
@media (hover: hover) {
|
|
.vcards__item:hover {
|
|
--object-scale: 1.03;
|
|
--object-grid: 0.26;
|
|
}
|
|
}
|
|
.vcards__body { max-width: 26em; }
|
|
@media (min-width: 48rem) {
|
|
.vcards__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
|
}
|
|
</style>
|