100 lines
2.3 KiB
Svelte
100 lines
2.3 KiB
Svelte
|
<script lang="ts">
|
||
|
|
import DifficultyBadge from './DifficultyBadge.svelte'
|
||
|
|
import { t } from '$lib/i18n/index.svelte'
|
||
|
|
|
||
|
|
interface CardTool {
|
||
|
|
name: string
|
||
|
|
slug: string
|
||
|
|
difficulty: 'beginner' | 'intermediate' | 'advanced'
|
||
|
|
license?: string
|
||
|
|
color?: string
|
||
|
|
monogram?: string
|
||
|
|
tags: string[]
|
||
|
|
excerpt: string
|
||
|
|
}
|
||
|
|
|
||
|
|
let { tool }: { tool: CardTool } = $props()
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<article class="card">
|
||
|
|
<header class="cluster">
|
||
|
|
<span class="monogram" style:--tool-color={tool.color} aria-hidden="true">
|
||
|
|
{tool.monogram ?? tool.name.slice(0, 2)}
|
||
|
|
</span>
|
||
|
|
<h3><a href="/outils/{tool.slug}">{tool.name}</a></h3>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<p class="excerpt"><span class="visually-hidden">{t('tool.why')} : </span>{tool.excerpt}</p>
|
||
|
|
|
||
|
|
<footer class="cluster">
|
||
|
|
<DifficultyBadge difficulty={tool.difficulty} />
|
||
|
|
{#if tool.license}
|
||
|
|
<span class="meta">{tool.license}</span>
|
||
|
|
{/if}
|
||
|
|
{#each tool.tags as tag (tag)}
|
||
|
|
<span class="meta">{tag}</span>
|
||
|
|
{/each}
|
||
|
|
</footer>
|
||
|
|
</article>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.card {
|
||
|
|
position: relative;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: var(--space-2);
|
||
|
|
padding: var(--space-3);
|
||
|
|
border: 1px solid var(--oki-line);
|
||
|
|
border-left: 4px solid var(--oki-jaune);
|
||
|
|
border-radius: var(--radius-2);
|
||
|
|
background: var(--oki-surface);
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.monogram {
|
||
|
|
display: grid;
|
||
|
|
place-items: center;
|
||
|
|
inline-size: 2.5rem;
|
||
|
|
block-size: 2.5rem;
|
||
|
|
border-radius: var(--radius-2);
|
||
|
|
background: var(--tool-color, var(--oki-surface-2));
|
||
|
|
color: white;
|
||
|
|
font-weight: 700;
|
||
|
|
font-size: var(--text-0);
|
||
|
|
}
|
||
|
|
|
||
|
|
h3 {
|
||
|
|
font-size: var(--text-2);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* toute la carte est cliquable via le pseudo-élément du lien —
|
||
|
|
un vrai <a>, pas de div cliquable (doctrine §4.3) */
|
||
|
|
h3 a {
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
h3 a::after {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
inset: 0;
|
||
|
|
}
|
||
|
|
h3 a:focus-visible::after {
|
||
|
|
outline: var(--focus-ring);
|
||
|
|
outline-offset: -3px;
|
||
|
|
border-radius: var(--radius-2);
|
||
|
|
}
|
||
|
|
|
||
|
|
.excerpt {
|
||
|
|
color: var(--oki-ink-2);
|
||
|
|
font-size: var(--text-0);
|
||
|
|
flex-grow: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.meta {
|
||
|
|
font-size: var(--text-0);
|
||
|
|
color: var(--oki-ink-2);
|
||
|
|
border: 1px solid var(--oki-line);
|
||
|
|
border-radius: var(--radius-2);
|
||
|
|
padding: 0.1em 0.6em;
|
||
|
|
}
|
||
|
|
</style>
|