From 052314328f0398d3468be1f7aa5f3489544b3a81 Mon Sep 17 00:00:00 2001 From: Alexis Lahouze Date: Wed, 18 Mar 2026 23:32:42 +0100 Subject: [PATCH] Article du 18/03/2026 : Terminal. --- content/blog/2026/03/18/_index.md | 4 ++ content/blog/2026/03/18/terminal.md | 96 +++++++++++++++++++++++++++++ 2 files changed, 100 insertions(+) create mode 100644 content/blog/2026/03/18/_index.md create mode 100644 content/blog/2026/03/18/terminal.md diff --git a/content/blog/2026/03/18/_index.md b/content/blog/2026/03/18/_index.md new file mode 100644 index 0000000..61cb85e --- /dev/null +++ b/content/blog/2026/03/18/_index.md @@ -0,0 +1,4 @@ +--- +title: 18 Mars 2026 +linkTitle: "18" +--- diff --git a/content/blog/2026/03/18/terminal.md b/content/blog/2026/03/18/terminal.md new file mode 100644 index 0000000..01dd4bc --- /dev/null +++ b/content/blog/2026/03/18/terminal.md @@ -0,0 +1,96 @@ +--- +date: "2026-03-18T22:49:00+0100" +draft: false +author: Alexis Lahouze +title: "Terminal" +linkTitle: "terminal" +tags: + - général + - css +--- +Je joue un peu plus avec HTML et CSS. + + + +Comme vous pouvez le voir, j'ai mis un menu sous la forme de la commande `ls`. + +Je pense que c'est perfectible, du moins dans le HTML généré, et le CSS +associé, mais je trouve que le rendu est déjà pas si mal. + +J'ai, normalement, mis les balises ARIA qui vont bien, mais je peux m'être +trompé, faut voir. Pour m'aider, j'ai utilisé un plugin Firefox [ARIA DevTools](https://github.com/ziolko/aria-devtools). + +D'un point de vue code, j'ai généré une liste `ul`, en gros : + +```html + +``` + +Et en CSS : + +```css +ul.lsresult { + padding: 0; + display: table; + + li { + display: table-row; + } + + li span { + display: table-cell; + } + + li span:not(:first-child) { + padding-left: 1ch; + } +} +``` + +C'est probablement perfectible, notamment en donnant le style `file` ou +`directory` en fonction du type de page, directement à la balise `
  • `, et +gérer l'affichage des privilèges directement dans la CSS. Pareil pour +l'alignement à droite, je pourrais mettre plutôt une classe et gérer ça dans la +CSS. + +Aussi, l'idée, c'est que la liste se comporte comme un tableau, pour que les +champs soient alignés. Entre chaque colonne, on met au moins un caractère de +séparation (le `padding-left: 1ch`), je ne peux pas utiliser `border-spacing` +car ça me rajoute un espace en début de ligne aussi). + +Dans les modifications que j'ai apportées, aussi, j'ai limité la largeur du +texte à 80 colonnes, terminal oblige. + +Je pense qu'il faut que j'améliore les couleurs, parce ça n'est pas très +lisible, et plutôt monotone, là, mais je verrai ça plus tard. + +Il va falloir que je remplisse la page d'accueil, aussi, à un moment, parce que +bon, c'est vide, et sauf ceux qui me connaissent déjà, vous ne pourrais pas me +contacter. + +À très bientôt ! + +