Les ateliers du klafoutis

Histoire de me remettre dans le bain, je replonge dans le thème Ductile pour le rafraîchir. Ceci est un billet que je compléterai au fil de mon travail, une sorte de journal de bord, tant pour redécouvrir la mécanique des thèmes de Dotclear que réveiller ma mémoire côté CSS… et me remettre progressivement à jour de mes connaissances.

Les retours et suggestions sont évidemment plus que bienvenus dans les commentaires.

Environnement de travail

Pour pouvoir tester ici, j’ai commencé par dupliquer le thème Ductile. C’est sur cette copie que je vais travailler. Dans le fichier _define.php, je remplace le nom créé automatiquement (Ductile (copie)) par Ductile 2026.

Work in progress en live

On peut comparer ancienne et nouvelle version grâce au plugin Arlequin installé ici qui permet d’afficher un bloc « Changer le thème » dans le sidebar. L’ancienne continue de s’appeler Ductile et la nouvelle se nomme Ductile 2026.

Modifs CSS non visibles

• Fusion des règles css dans un seul fichier : au lieu des include, copie-colle les règles dans des @layer {}.
• Ajout de variables pour les fontes.

Modifs visibles

• remplacement du logo par le même mais en svg et sombre pour rééquilibrer sombre/clair dans l’entête ;
• remplacement des stickers png par des sitckers svg, même fond que la feuille ;
• sur mobile, fond du titre du blog en bleu ;
• famille de caractères : conservation du serif, mais remplacée par une serif dite transitionnelle ;
• taille de base des caractères un peu augmentée (de 100% à 105%) ;
• taille du titre du blog légèrement augmentée aussi et un peu plus d’espace au-dessus de la baseline ;
• suppression des text-shadow en différents endroits (titre du blog
• augmentation de l’interlignage de base de 1.5 à 1.6 ;
• réduction des marges de côté pour la zone principale sur les écrans de largeur supérieure à celle des tablettes ;
• réduction légère de la taille des titres de billet, de 2.5em à 2.25em ;
• augmentation de la marge entre les billets (dans les présentations en liste) à 2em au lieu de 1em ;
• appels de note en bleu, en gras, un peu décollés du texte ;
• notes : filet de séparation un poil plus large ; marge au-dessus un peu plus grande ;
• augmentation légère de l’espace intérieur des boîtes de la sidebar ;
• suppression du hideux dégradé du bandeau de navigation de billet en billet ;
• bandeau de navigation : précédent à gauche et suivant à droite au lieu des deux centrés ;
• correction du débordement du post-info lorsque le nom de la catégorie ou du tag est trop long ;
• soulignement des liens un poil moins collé, grâce à text-underline-position: from-font; et text-underline-offset: .2em; ;
• remplacement du set d’icônes (et passage au format svg) ;
• ajout de styles pour l’élément aside.