Article du 18/03/2026 : Terminal.

2026-03-18 23:32:42 +01:00
parent 697f49149a
commit 052314328f
2 changed files with 100 additions and 0 deletions
@@ -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.
+
+<!--more-->
+
+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
+<ul class="lsresult">
+  <li>
+    <span aria-hidden="true">drwxr-xr-x</span>
+    <span aria-hidden="true" style="text-align: right">1</span>
+    <span aria-hidden="true">alexis</span>
+    <span aria-hidden="true">alexis</span>
+    <span aria-hidden="true" style="text-align: right">4096</span>
+    <span aria-hidden="true" style="text-align: right">18</span>
+    <span aria-hidden="true">Mar</span>
+    <span aria-hidden="true" style="text-align: right">22:48</span>
+    <span><a class="" href="/blog/2026/03/18/" title="18 Mars 2026">.</a></span>
+  </li>
+  <li>
+    <span aria-hidden="true">drwxr-xr-x</span>
+    <span aria-hidden="true" style="text-align: right">2</span>
+    <span aria-hidden="true">alexis</span>
+    <span aria-hidden="true">alexis</span>
+    <span aria-hidden="true" style="text-align: right">4096</span>
+    <span aria-hidden="true" style="text-align: right">11</span>
+    <span aria-hidden="true">Mar</span>
+    <span aria-hidden="true" style="text-align: right">02:07</span>
+    <span><a class="" href="/blog/2026/03/" title="Mars 2026">..</a></span>
+  </li>
+</ul>
+```
+
+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 `<li>`, 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 !
+
+<!-- vim: set tw=80 ts=2 sw=2 sts=2 spelllang=fr:-->