130 lines
2.6 KiB
Plaintext
130 lines
2.6 KiB
Plaintext
---
|
|
/**
|
|
* Prose — enveloppe de contenu long (article, page éditoriale).
|
|
* Style tout le HTML slotté (titres, listes, blockquote, code, images, tables)
|
|
* depuis les tokens. Largeur de lecture confortable (65ch).
|
|
*
|
|
* Props :
|
|
* - class (string) : classes additionnelles
|
|
*/
|
|
interface Props {
|
|
class?: string;
|
|
}
|
|
|
|
const { class: className } = Astro.props;
|
|
---
|
|
|
|
<div class:list={["tf-prose", className]}>
|
|
<slot />
|
|
</div>
|
|
|
|
<style>
|
|
.tf-prose {
|
|
max-width: 65ch;
|
|
font-size: var(--fs-base);
|
|
line-height: var(--lh-loose);
|
|
}
|
|
|
|
.tf-prose > :global(* + *) {
|
|
margin-block-start: var(--space-md);
|
|
}
|
|
|
|
.tf-prose :global(h1) {
|
|
font-size: var(--fs-3xl);
|
|
}
|
|
|
|
.tf-prose :global(h2) {
|
|
font-size: var(--fs-2xl);
|
|
margin-block-start: var(--space-xl);
|
|
}
|
|
|
|
.tf-prose :global(h3) {
|
|
font-size: var(--fs-xl);
|
|
margin-block-start: var(--space-lg);
|
|
}
|
|
|
|
.tf-prose :global(h4) {
|
|
font-size: var(--fs-lg);
|
|
}
|
|
|
|
.tf-prose :global(ul),
|
|
.tf-prose :global(ol) {
|
|
padding-inline-start: 1.5em;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-2xs);
|
|
}
|
|
|
|
.tf-prose :global(li::marker) {
|
|
color: var(--text-subtle);
|
|
}
|
|
|
|
.tf-prose :global(blockquote) {
|
|
background: var(--surface-2);
|
|
border-radius: var(--radius-md);
|
|
padding: var(--space-md) var(--space-lg);
|
|
font-style: italic;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.tf-prose :global(blockquote cite) {
|
|
display: block;
|
|
margin-block-start: var(--space-xs);
|
|
font-style: normal;
|
|
font-size: var(--fs-sm);
|
|
color: var(--text-subtle);
|
|
}
|
|
|
|
.tf-prose :global(code) {
|
|
background: var(--surface-2);
|
|
padding: 0.15em 0.4em;
|
|
border-radius: var(--radius-sm);
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.tf-prose :global(pre) {
|
|
background: var(--surface-2);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
padding: var(--space-md) var(--space-lg);
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.tf-prose :global(pre code) {
|
|
background: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.tf-prose :global(img) {
|
|
border-radius: var(--radius-md);
|
|
}
|
|
|
|
.tf-prose :global(hr) {
|
|
border: none;
|
|
border-block-start: 1px solid var(--border);
|
|
margin-block: var(--space-xl);
|
|
}
|
|
|
|
.tf-prose :global(table) {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: var(--fs-sm);
|
|
}
|
|
|
|
.tf-prose :global(th),
|
|
.tf-prose :global(td) {
|
|
text-align: start;
|
|
padding: var(--space-xs) var(--space-sm);
|
|
border-block-end: 1px solid var(--border);
|
|
}
|
|
|
|
.tf-prose :global(th) {
|
|
font-weight: var(--fw-semibold);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.tf-prose :global(a) {
|
|
text-underline-offset: 0.2em;
|
|
}
|
|
</style>
|