85 lines
1.8 KiB
Svelte
85 lines
1.8 KiB
Svelte
|
<script lang="ts">
|
||
|
|
import Icon, { type IconName } from './Icon.svelte';
|
||
|
|
|
||
|
|
export interface StepItem {
|
||
|
|
step: string;
|
||
|
|
icon: IconName;
|
||
|
|
title: string;
|
||
|
|
description: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
items: StepItem[];
|
||
|
|
}
|
||
|
|
|
||
|
|
let { items }: Props = $props();
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<div class="steps-cq">
|
||
|
|
<ol class="grid" role="list" style:--grid-min="17rem">
|
||
|
|
{#each items as item (item.step)}
|
||
|
|
<li class="step-card">
|
||
|
|
<span class="step-number" aria-hidden="true">{item.step}</span>
|
||
|
|
<span class="step-icon"><Icon name={item.icon} size={24} /></span>
|
||
|
|
<h3>{item.title}</h3>
|
||
|
|
<p>{item.description}</p>
|
||
|
|
</li>
|
||
|
|
{/each}
|
||
|
|
</ol>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
/* Container query : rythme plus généreux quand le conteneur s'élargit. */
|
||
|
|
.steps-cq {
|
||
|
|
container-type: inline-size;
|
||
|
|
}
|
||
|
|
|
||
|
|
.step-card {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
text-align: center;
|
||
|
|
gap: var(--space-3);
|
||
|
|
padding: var(--space-4);
|
||
|
|
background: var(--glass);
|
||
|
|
backdrop-filter: blur(12px);
|
||
|
|
-webkit-backdrop-filter: blur(12px);
|
||
|
|
border: 1px solid var(--glass-border);
|
||
|
|
border-radius: var(--radius-2);
|
||
|
|
}
|
||
|
|
|
||
|
|
.step-number {
|
||
|
|
font-family: var(--font-mono);
|
||
|
|
font-size: var(--text-4);
|
||
|
|
font-weight: 700;
|
||
|
|
line-height: 1;
|
||
|
|
color: color-mix(in oklch, var(--page-accent, var(--accent)) 25%, transparent);
|
||
|
|
}
|
||
|
|
|
||
|
|
.step-icon {
|
||
|
|
display: inline-flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
inline-size: 3rem;
|
||
|
|
block-size: 3rem;
|
||
|
|
border-radius: var(--radius-1);
|
||
|
|
color: var(--page-accent-text, var(--accent-text));
|
||
|
|
background: color-mix(in oklch, var(--page-accent, var(--accent)) 14%, transparent);
|
||
|
|
}
|
||
|
|
|
||
|
|
h3 {
|
||
|
|
font-size: var(--text-2);
|
||
|
|
}
|
||
|
|
|
||
|
|
p {
|
||
|
|
font-size: var(--text-small);
|
||
|
|
color: var(--ink-soft);
|
||
|
|
}
|
||
|
|
|
||
|
|
@container (min-width: 45rem) {
|
||
|
|
.step-card {
|
||
|
|
padding: var(--space-5);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|