sucupira
93c577c5d3
Snapshot de l'existant avant application du playbook OKI : background shader Three.js, carte graphe 3D, timeline statique.
81 lines
1.7 KiB
Svelte
81 lines
1.7 KiB
Svelte
<script lang="ts">
|
|
import Icon, { type IconName } from './Icon.svelte';
|
|
|
|
export interface FeatureItem {
|
|
icon: IconName;
|
|
title: string;
|
|
description: string;
|
|
}
|
|
|
|
interface Props {
|
|
items: FeatureItem[];
|
|
/** Taille minimale des colonnes de la grille (primitive .grid). */
|
|
min?: string;
|
|
}
|
|
|
|
let { items, min = '15rem' }: Props = $props();
|
|
</script>
|
|
|
|
<div class="feature-cq">
|
|
<ul class="grid" role="list" style:--grid-min={min}>
|
|
{#each items as item (item.title)}
|
|
<li class="feature-card">
|
|
<span class="feature-icon"><Icon name={item.icon} /></span>
|
|
<div class="feature-text">
|
|
<h3>{item.title}</h3>
|
|
<p>{item.description}</p>
|
|
</div>
|
|
</li>
|
|
{/each}
|
|
</ul>
|
|
</div>
|
|
|
|
<style>
|
|
/* Container query : la carte passe en disposition horizontale
|
|
quand son conteneur (pas le viewport) est assez large. */
|
|
.feature-cq {
|
|
container-type: inline-size;
|
|
}
|
|
|
|
.feature-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
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);
|
|
}
|
|
|
|
.feature-icon {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
inline-size: 2.75rem;
|
|
block-size: 2.75rem;
|
|
flex-shrink: 0;
|
|
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-1);
|
|
margin-block-end: var(--space-1);
|
|
}
|
|
|
|
p {
|
|
font-size: var(--text-small);
|
|
color: var(--ink-soft);
|
|
}
|
|
|
|
@container (min-width: 30rem) {
|
|
.feature-card {
|
|
flex-direction: row;
|
|
}
|
|
}
|
|
</style>
|