Un peu de style, bis

J’en causais dans un (vieux) billet, du style applicable aux listes de définition, en disant que je n’étais pas satisfait du résultat dans le thème Berlin, qui donne jusqu’à maintenant à peu près ceci :

Liste de définitions, août 2018
Liste de définitions

Basique mais pas franchement sexy ; alors j’ai ressorti mes pinceaux numériques et j’arrive finalement à cela :

1er terme à définir (ligne commençant par un signe = suivi d’une espace)
1re définition (ligne commençant par un signe : suivi d’une espace)
2e définition
2e terme
3e terme
Définition commune aux 2e et 3e terme

C’est mieux non ?

Liste de définitions

La CSS correspondante est la suivante :

dl {
  display: flex;
  flex-direction: column;
}
dt {
  color: #fff;
  background: #267daf;
  padding: .25em .5em;
  border-radius: .25em;
  margin-bottom: .5em;
}
dd {
  margin-left: 1em;
  margin-bottom: .5em;
  padding-left: 1em;
  max-width: calc(100% - 2em);
}
dd::before {
  content: "→ ";
  margin-left: -1em;
}

Ajouter un commentaire

Les commentaires peuvent être formatés en utilisant la syntaxe Markdown.

Ajouter un rétrolien

URL de rétrolien : https://open-time.net/trackback/14659

Haut de page