Petit article sur le CSS sur le site

content/tech/css.md

@@ -0,0 +1,65 @@
+---
+title: "Css"
+date: 2025-03-25T23:38:35+01:00
+lastmod: 0001-01-01T00:00:00+01:00
+publishdate: 2025-03-25T23:38:35+01:00
+description: ""
+weight: 10
+categories: ["tech"]
+tags: ["css"]
+---
+
+Je découvre le CSS, donc je pose là tous les trucs que j'ai pu découvrir en faisant ce site...
+
+# Des listes en colonnes
+
+La personne qui a fait le thème de base que j'utilise ([TechDoc][techdoc-github]) n'a pas du tout pensé aux [taxonomies][taxonomies-hugo].
+Pour faire court, une taxonomie est ce qui permet de faire des catégories et de chercher des articles parmi ces catégories.
+Certains sites appellent ça tags ou étiquettes.
+
+Eh bien sur mon thème, elles ne s'affichent pas.
+Après un petit temps de creusage de cervelle, il s'avère qu'il faut que je crée dans le dossier `layout/_defaults` un template `taxonomy.html`.
+
+Du coup, je prends un fichier trouvé sur internet (je ne peux pas dire où... oups !) qui ressemble à 
+
+```html
+{{ define "main" }}
+  <h1>{{ .Title }}</h1>
+  {{ .Content }}
+  {{ range .Pages }}
+    <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
+  {{ end }}
+{{ end }}
+```
+
+Bon, faire des `<h2>` pour chaque élément, ce n'est pas terrible, et j'en fais donc une liste.
+Problème : cette liste est toujours sur une colonne et j'ai comme un sentiment de place perdue, surtout pour afficher seulement des tags, qui risquent de faire une très longue liste.
+
+Alors je me mets en recherche d'une solution à ce problème, mais je trouve peu d'information qui répond vraiment à mon besoin jusqu'à ce que je tombe sur [cette page][haacked-css-solution] qui propose la solution suivante :
+
+```css
+ul {
+  display: grid;
+  grid-template-columns: repeat(auto-fit,minmax(150px, 1fr));
+}
+```
+
+Je dis que ma liste est une grille et je dis que c'est une grille en colonnes.
+Ces colonnes s'adaptent à la taille de l'écran en prenant le minimum d'espace nécessaire pour afficher le tout, tout en ayant une largeur d'au moins 150 pixels.
+Le nombre de colonnes est donc variable.
+Alleluia !
+
+Je vois malgré tout que les colonnes se marchent dessus, notamment à cause du cercle devant chaque élément de la liste.
+Qu'à sela ne tienne, je dis que le texte des colonnes ne dois prendre que 80% de l'espace disponible avec le CSS suivant :
+
+```css
+li {
+  width: 80%;
+}
+```
+
+Et hop, c'est gagné !
+
+[techdoc-github]: https://thingsym.github.io/hugo-theme-techdoc/ "Dépot Github du thème TechDoc"
+[taxonomies-hugo]: https://gohugo.io/content-management/taxonomies/ "Documentation de Hugo sur les taxonomies"
+[haacked-css-solution]: https://haacked.com/archive/2018/12/03/css-column-list-adventure/ "Page de la solution en CSS qui m'a sauvé"