#18052

Le Hollandais Volant

Oh et j’ai changé (légèrement) le thème de mon site.

J’utilise une jolie astuce CSS qui permet de faire deux colonnes de blocs de taille variable, avec en prime la possibilité de garder l’ordre des articles (sur Firefox en tout cas).

Normalement, quand on utilise des colonnes, les éléments HTML sont placés dans la première colonne puis dans la seconde. C’est le comportement que vous avez sous Chrome (ou Vivaldi, Opera…).

Firefox permet un petit truc en plus : si on regarde les articles par ordre chronologique, ils sigzaguent !
Vous me direz que c’est simple et qu’il suffit des inline-block… sauf que les inline-block ne permet pas de garder prendre des blocs de taille variable et d’avoir un beau rendu façon « journal ».

Je trouve ça tellement chouette que je vais mettre ça ailleurs aussi.

Je n’utilise pas de float non plus (qui aurait rendu compliqué un design fluide et responsive). Bien-sûr, tout est 100% CSS !

Si vous voyez des bugs sur un navigateur récent, merci de me le signaler :-)

ÉDIT : après quelques remarques :
– j’ai rajouté le nuage de tags. Je ne pensais pas que quelqu’un les utilisais encore…
– j’ai remis les blocs dans l’ordre sur un affichage mobile (un oubli de ma part).
– le layout en double colonne est joli, mais n’est pas pratique sous Chrome, à cause de l’ordre des éléments. Je ne peux pas faire comme dans Firefox à cause d’un bug dans Blink (il est marqué comme résolu mais ça ne l’est pas pour le mode "Column" de flexbox, et ça ne sera jamais corrigé malheureusement : il est en wontfix).
Du coup, soit je passe par un brin de JS pour forcer les deux colonnes (c’est juste un "height" à fixer), soit je repasse en mode colonne unique.

https://lehollandaisvolant.net/

#18048

Note : Astuce CSS

Imaginez vous avez un template avec N posts à la suite. S’il y N articles, vous voulez un style A. S’il y a 1 seul article, par contre, vous voulez un style B.

Le CSS est très simple :

#blog > article {
    width: 500px;
}
#blog > article:first-of-type:last-of-type {
    width: 1000px;
}

L’idée est que si l’article est tout seul, il est à la fois le premier et le dernier !

Par exemple, là, je bosse sur un design où les articles sont mis côté à côté de largeur 500px. Quand un seul article est affiché, je veux en revanche qu’il occupe toute la largeur.

https://lehollandaisvolant.net/?mode=links&id=20181209215006

#18046

Note

PUTAIN C’EST QUOI CES SITES DE MERDE QUI M’EMPÊCHENT DE SCROLLER COMME JE VEUX AVEC LE CLIC-MOLETTE?

Vous allez me laissez utiliser ma souris et mon clavier oui ???

https://lehollandaisvolant.net/?mode=links&id=20181209184405