Mise en page des entrées de journal

Zoner les entrées d'articles

La première étape est de "zoner" mes entrées de journal pour définir des zones facilement manipulables : une zone "En-tête de l'article" et une zone "contenu de l'article"

Pour ça j'ajoute une balise dans mon template de base : <main id="content">

Note : Dans mes entrées de journal, je préfère utiliser la balise <article>, j'ajoute donc une propriété pour modifier cette balise depuis le template enfant (contentType)

Ensuite, j'utilise une grille CSS pour créer ce zoning. L'intérêt est que je peux ainsi facilement réorganiser les principales zones de ma page (notamment en fonction de la résolution de l'écran).

body.log-entry #content {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: min-content min-content;
  grid-template-areas: 
    "header"
    "article-content"
    "footer";
}

Par contre, les grilles CSS empilent les contenus d'une même zone les uns en par-dessus les autres, je ne peux donc pas juste assigner tous mes éléments à une zone. Il faut que j'ajoute un conteneur pour chaque zone que je souhaite créer :

<article id="content">
  <header id="article-header">
    <h1>Titre de l'entrée de journal</h1>
    …
  </header>
  <div id="article-content">
    …
  </div>
</article>

Problème : Le h1 est actuellement dans le template de base, je peux donc difficilement l'inclure dans un conteneur avec les autres éléments que je veux placer dans mon en-tête d'article (date de publication par exemple). Il va falloir que je sorte le h1 du template de base et que je laisse chaque page / template se basant dessus gérer leur propre h1.

Organiser le header de l'article

Ces préparations faites, ma première tâche est de mettre un peu d'ordre dans mon header. J'ai actuellement simplement le h1 de la page, suivi d'une date. L'ordre sémantique est juste, mais j'aimerais que visuellement ma date apparaisse au-dessus du titre. Pour ça, je passe mon header en flex (CSS) :

body.log-entry #article-header {
  display: flex;
  flex-direction: column;
}

body.log-entry #article-header > h1 {
  margin: 0; /* Pour supprimer la marge par défaut du h1 */
  order: 2;
}
body.log-entry #article-header > .date {
  order: 1;
}

Note : J'ai modifié la direction par défaut du flex dans mon header avec la propriété flex-direction: column. Cela permet d'avoir par défaut tous mes éléments empilés, sans avoir à jouer sur leur largeur pour forcer des retours à la ligne. (Ici, la fonctionnalité de flex qui m'intéresse, c'est la facilité à modifier l'ordre des éléments avec flex, pas le redimensionnement fluide des éléments.)

En repassant sur mes anciennes entrées pour vérifier leur affichage, je me dis qu'il est pénible de devoir défiler tout en bas pour passer à l'entrée suivante. Je décide donc de dupliquer la navigation entre entrées du journal en haut de l'article (au dessus du h1). Ça marche assez bien, mais il faut quand même que j'ajoute un peu de CSS pour qu'il se positionne bien en haut de page.

body.log-entry #article-header > .article-nav {
  order: 1; /* Note : la date à la même priorité, mais ce n'est pas un problème car dans ce cas-là, les éléments sont placés dans leur ordre dans le code (ici, d'abord la navigation, ensuite la date). */
}

Il reste du travail sur l'en-tête de l'article, mais ce sera pour un autre jour…