Vous l'avez remarqué, le thème du blog vient tout juste de changer ! Un p'tit coup de peinture qui fait du bien et qui redonne un peu de fraîcheur ;)

Je trouvais le précédent design un peu vieillissant. D'ailleurs, j'avais émis le souhait d'en changer dans le dernier bilan du blog. Ça faisait un moment que je ne pouvais plus vraiment le voir et que j'avais en tête de le refaire...

Pour rappel, voici la page d'accueil :

Une page article :

Cela fait effectivement 2 ans et demi que ce thème n'avait pas franchement évolué. J'avais envie de changement, j'ai donc tout repris à partir d'un fichier vide.

Mes exigences pour ce nouveau thème n'étaient pas extraordinaires, surtout de la simplification à la fois au niveau visuel que dans le code :

  • Beaucoup plus simple, aller à l'essentiel, plus aéré
  • Lecture plus aisée du contenu des articles
  • Ne doit pas trop impacter le code HTML pour faciliter l'intégration et la maintenance
  • Simplifier le responsive

J'ai profité de quelques jours pluvieux de ces vacances d'été pour reprendre à zéro le thème du blog. Pour rappel, ce blog n'utilise pas de Wordpress ou équivalent, tout est fait maison.

Il faut dire que ça m'a pris comme ça, sans vraiment de réflexion. J'ai pris le meilleur outil qui existe dans ces cas-là : un papier et un crayon ! J'ai gribouillé quelques interfaces et je me suis lancé dans le code en ayant une bonne idée du rendu dans ma tête.

Après quelques heures de travail et d'ajustements, j'en suis arrivé à un résultat qui me plaisait, bien plus sympa à mon sens. Je le trouve plus "reposant", moins agressif que l'ancien, peut-être un peu plus classique aussi.

Page d'accueil :

Page article :

La structure n'a pas vraiment changé : la barre latérale est toujours présente et est toujours à droite, les articles sont organisés de la même manière (image principale, titre, date, auteur, mots-clés, contenu, suggestions, commentaires, articles au hasard, ...). Le pied de page est identique. Seul l'entête est nouvelle (header).

D'un point de vue technique, j'utilise toujours SASS avec Compass, qui me sert énormément pour les variables (couleurs, notamment) et les mixins. Vous l'aurez peut-être remarqué (j'espère ^^), chaque catégorie (Informatique, Dév Web, ...) a une couleur associée. Les articles d'une catégorie reprennent cette couleur. C'est très facile grâce aux mixins. D'ailleurs, j'utilisais ce principe dans l'ancien thème, mais un peu trop justement. J'ai allégé tout ça dans ce nouveau thème.

Pour être plus concret, dans mon fichier de config SASS, j'ai la liste des catégories avec leur couleur :

$categories: (
    bricolage: #82BBD2,
    jardin: #85B156,
    telephonie: #BB7DC5,
    informatique: #87A0B9,
    devweb: #DF8183,
    voiture: #6998d1,
    projects: #4FBCBC,
    webdesign: #8588A7,
    divers: #909090
);

Ensuite, dans mon fichier .scss, je parcours ces catégories et j'applique la mixin voulue, pour l'élément souhaité :

.post-container {
    @each $categ, $color in $categories {
        &.#{$categ} {
            @include post-container-color($color);
        }
    }
}

Ainsi, le div.post-container ayant une class .bricolage aura certains éléments de couleur #82BBD2.

Bref, assez parlé technique, j'espère que vous apprécierez ce nouveau thème ! On verra combien de temps il durera ^^. J'en profite pour dire merci à vous qui venez de plus en plus nombreux sur ce blog, ça me fait plaisir ;)

Normalement ça devrait être bon mais si vous trouvez une pétouille, n'hésitez pas à m'en parler pour que je puisse corriger ça !