~/tilder/, fr/, Documentation/, Thèmes/, Classes

classes - chaque classe écrite par la construction, à mettre en forme par le thème

La construction écrit du HTML sémantique avec un jeu fixe de noms de classes, et jamais de style en ligne, de couleur ni de police : tout cela revient au thème. Cette page donne ce jeu, regroupé comme dans le contrat de tilder, avec l'élément qui porte chaque classe. Un thème qui les met toutes en forme affiche correctement chaque page que tilder sait construire ; build.py --check lui dit lesquelles il oublie.

Les segments du logotype situés entre le nom du site et celui de la page mènent aux pages qu'ils nomment : le index.md d'un dossier, sinon la page à côté de lui. Une section de collection récursive sans page propre est nommée d'après son dossier, sans lien. Sur la page d'accueil, le logotype se réduit à ~/site et au curseur.

Une collection récursive imbrique ses dossiers dans la barre latérale, sous forme de sections :

La barre latérale de ce manuel sur sa page docs/guide/writing, abrégée (<!-- ... --> tient la place des lignes omises) ; la construction rend chaque lien relatif à la page :

<nav class="collection-nav" aria-label="Dans cette section">
<ul>
	<li class="collection-section collection-section--open"><a class="collection-section-label" href="../guide">Guide</a>
	<ul>
		<li><a href="getting-started">Premiers pas</a></li>
		<li><a href="project">Le projet</a></li>
		<li><a href="writing" aria-current="page">Écrire des pages</a></li>
		<!-- ... -->
	</ul>
	</li>
	<li class="collection-section"><a class="collection-section-label" href="../content-types">Types de contenu</a>
	<ul>
		<li><a href="../content-types/page">page</a></li>
		<!-- ... -->
	</ul>
	</li>
	<!-- ... -->
</ul>
</nav>

Un marqueur qui nomme une collection, {upcoming:meetups}, donne la classe sans ce nom : upcoming. Les mots des étiquettes et des états sont toujours écrits : la carte d'un mentor complet le dit en toutes lettres (le mot full de la collection), jamais par une couleur seule.

La référence Markdown montre chacune de ces constructions, sa source et son rendu.

Un bloc sans langue, ou dans une langue que tilder ne connaît pas, est un simple <pre class="code">, sans data-lang ni jetons. Un diff garde ses + et ses - : la couleur n'est jamais le seul signe.

La construction écrit le balisage : un seul <h1>, des <h2> pour les sections et des <h3> pour les entrées, les textes alternatifs (elle avertit quand une image n'en a pas), les libellés et les attributs aria-*, des zones défilantes qui reçoivent le focus, un mot à côté de chaque couleur. Le reste revient au thème :

• Le contraste : au moins 4,5:1 pour le texte, sur son fond, dans chaque jeu de couleurs que propose le thème. Vérifier un thème mesure les paires qu'un thème déclare.
• Le focus : un contour visible sur tout ce qui reçoit le focus, les liens, le résumé du [TOC], les pre.code et .table focalisables.
• Le texte masqué : .sr-only est masqué à l'écran, mais lu. display: none le cacherait aussi aux lecteurs d'écran ; la règle habituelle :

.sr-only {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip-path: inset(50%); white-space: nowrap;
}

• Les animations réduites : aucune animation, ou aucune sous @media (prefers-reduced-motion: reduce), pour le curseur du logotype comme pour le reste.

• vérifier un thème
• gabarits et variables
• la référence Markdown