[design/css] aligner icônes et titres

[joelgombin]

Sur la page https://datactivist.coop/fr/references/occitanie/ par exemple, comment aligner l'icône avec le titre "Objectifs", de manière similaire à ce qui est fait au niveau du titre "Résultats obtenus" ? @moreymat @SylvainLapoix je suis preneur de vos lumières en css ! sachant que dans les deux cas le md derrière est le même, le html généré aussi, donc a priori ça ne peut venir que du css (et notamment de la classe .blockquotes qui change des choses visiblement)

[moreymat]

Si je comprends bien les diverses docs en ligne, il faut un élément contenant qui rassemble l'image, le titre et le contenu, pour que la feuille de style CSS puisse positionner l'image par rapport à l'angle supérieur gauche de la zone rectangulaire d'affichage correspondant à cet élément contenant.

Le blockquote joue ce rôle mais on ne peut pas vraiment le paramétrer dans le markdown pour avoir un fond transparent sur certains paragraphes et coloré sur d'autres par exemple.

Ma meilleure hypothèse à ce stade est qu'il faudrait qu'on crée un template frontmatter pour les références et que chaque référence soit un item avec la même structure, par exemple :

items:
  - objectifs:
      - Faire gagner la région
      - Ajouter de la valeur
    approche:
      - Super méthodo 1
      - Super trick
    resultats:
      - Géniale adhésion
      - Retours incroyables

Dans le bout de code Hugo (comme pour le block_team) on ajoute l'élément contenant autour du contenu, et on spécifie la mise en forme pour chaque rubrique dans le CSS.

Non?