Un petit article pour indiquer les dernières modifications et corrections sur les sites kobold.cafe de ces derniers temps, et celles potentiellement à venir dans les prochains temps.

Kobold.cafe héberge pour l’instant :

• Mes sites et projets personnels sur le domaine kazhnuz.space
• Des services publics et des sites et projets de potes sur le domaine kobold.cafe
• Le site de tech libre Quarante-Douze et ses projets associés (tramweb, nodrm)
• Le host de fansite fanstuff.garden

J’ai fait ces derniers temps quelques corrections sur divers sites et services, et le but est donc de lister tout ici.

Évolutions kazhnuz.space

Le site kazhnuz.space a eu quelques évolutions ces derniers temps. Le premier a été des corrections du responsives, qui avait les soucis suivants :

• Mon avatar kobold n’était pas responsive
• L’iframe de gestion des RSS galérait en responsives

Voici donc comment j’ai modifié ça.

Pour le premier, c’était juste que je n’avais pas adapté le code à l’utilisation de au lieu de . J’ai du adapté le code pour gérer le responsive dans picture plutôt qu’un img ayant directeur la classe “illustration”.

Pour le second, j’ai ajouté d’un système d’onglet pour afficher mes derniers articles et ajouts dans la veille. En effet, le souci était que j’avais deux block dans une iframe, qui devaient être gérés en responsive. Utiliser à la place un système d’onglet m’a permis de mieux gérer la taille qu’aurait la zone.

J’ai également modifié la page d’accueil afin de la rendre plus fun :

• Ajout d’une zone style terminal donnait l’accès à mes slashpages
• Ajout d’une liste de mes sites sur le côté des flux RSS

Responsive et double-sidebar

Plusieurs de mes sites utilisent des designs avec deux sidebar. Si ce genre de design est un que j’aime bien (même si ou parce que un peu rétro), c’est aussi un design qui a besoin d’adaptation pour être responsive.

Pour le rendre responsive, j’ai décide de rendre les deux sidebar accessible via des boutons, qui s’affiche dans une barre en bas de la vue (du coup toujours accessible). Les trois vue (sidebar 1, contenu, sidebar 2) s’affichent donc suivant ce qui est selectionné par l’utilisateur.

Cela a demandé une petite adaptation supplémentaire : faire qu’en mode mobile, cliquer sur un élément du sommaire ramène à la vue principale.

Autres soucis de responsives sur ces sites

L’autre gros souci de responsives que j’avais sur ces sites était dans la gestion des tableaux. De nombreux tableaux faisaient dépasser le design en mode responsive, ce qui provoquait des soucis. Les deux sites impactés étaient notamment le site du JDR Erratum en premier lieu, et le site Missing Number à un niveau moindre.

J’ai pour ça employé trois moyens :

• Le premier a été d’éviter les tableaux trop horizontaux dès que c’était possible. Cela a surtout été fait sur Erratum où j’ai remanié tout ce que je pouvais niveau tableau pour les rendre plus simples à lire de plus.
• Ensuite, j’ai modifié certains tableaux (surtout dans missing-number) pour qu’ils perdent des colonnes plus secondaires en mode mobile. Est visé par exemple les listes de pokémon de missing-number.
• J’ai rajouté aussi un petit utilitaire pour pouvoir rendre quelques tableaux responsive, avec un container qui leur permet de scroll.

Cela m’a permis d’avoir des tableaux qui cause moins de soucis, et qui s’adaptent mieux à la taille de l’écran.

Autres modifications

J’ai fais aussi quelques autres modifications diverses :

• Les différents sites ont eu des robots.txt demandant de ne pas être scrapped par les différents moteurs d’IA.
• Le responsive a été amélioré aussi sur Kobold Start