1.8 KiB
Exemples
Quelques exemples des styles que prennent différents composants
Details
La balise <details> permet de cacher et afficher une information au clic. Ici, elle a été stylisé comme un bloc, et le sommaire a reçu un état au survol pour que ce soit plus visible que c'est un élément interactif
Sommaire
Contenu du details.
Mark
La balise <mark> permet d'afficher simplement des éléments en surbrillance. Cela utilise la couleur d'accent claire (et sombre en mode sombre). Le style est proche de celui de code, mais sans monospace et avec la couleur d'accent.
Classes utilitaires
Quelques classes CSS sont utilisées afin d'avoir quelques outils supplémentaires utiles, notamment dans le cadre des flexboxes.
.flexest utilisé pour afficher deux éléments cotes à cotes.toolbar-endest utilsié pour afficher un élément à la fin d'une navbar (cela poussera tout les composants après). Il est utilisé par exemple dans le bouton "Source" de la navbar..pest utlisé pour se faire comporter une balise comme un paragraphe, se combine bien avec .flex dans les articles
Artictecture des titres
Les différents types ont différent style, et voici ce que ça donne du h3 au h6 (le h1 est le titre de page, et le h2 celui juste au dessus)
Titre H3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae augue ut enim iaculis consequat.
Titre H4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae augue ut enim iaculis consequat.
Titre H5
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae augue ut enim iaculis consequat.
Titre H6
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae augue ut enim iaculis consequat.