La nouvelle page d’accueil de Valhalla.fr est construite avec des « boîtes » qui s’empilent. La première version mise en ligne imposait à toutes les boîtes d’avoir la même largeur, tandis qu’elle leur permettait d’avoir une hauteur variable. Désormais, les boîtes peuvent s’étendre sur une colonne (par défaut), deux, trois ou quatre colonnes.
Il faut modifier un peu les feuilles de style :
.grid-sizer,
.grid-item { width: 23%; }
.grid-item.w2 { width: 48%; }
.grid-item.w3 { width: 75%; }
.grid-item.w4 { width: 98%; }Un conteneur div vide, avec la classe .div-sizer est placé avant la première boîte.
<div class="grid">
<div class="grid-sizer"></div>
{% for post in paginator.posts %}
{% include excerpt.html %}
{% endfor %}
</div>Enfin, l’on recherche la taille désirée dans le front-matter de chaque fichier. La variable est appelée grid-width ; elle prend les valeurs 2, 3 ou 4. Si elle est absente, la boîte aura la taille 1, par défaut. Le code du fichier excerpt est modifié en fonction afin d’appliquer la classe CSS idoine.
{% assign grid = 'grid-item' %}
{% if post.grid-width == 2 %}
{% assign grid = 'grid-item w2' %}
{% elsif post.grid-width == 3 %}
{% assign grid = 'grid-item w3' %}
{% elsif post.grid-width == 4 %}
{% assign grid = 'grid-item w4' %}
{% endif %}
<div class="{{grid}} thumbnail">
...