97 lines
3.0 KiB
Markdown
97 lines
3.0 KiB
Markdown
---
|
||
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:-->
|