Open Time

Je vous disais dans un de mes derniers billets que le wiki de Dotclear a été un peu enrichi depuis quelques versions, avec en particulier l’arrivée du bloc de côté (aside en anglais), des exposants et des listes de définition.

Voyons comment rendre ça plus élégant avec le thème Berlin (je ne parlerai pas de l’exposant qui se suffit à lui-même).

Tout d’abord l’élément aside (obtenu avec une parenthèse fermante suivie d’une espace en début de ligne). Ici-même j’ai utilisé ce style pour obtenir l’affichage par défaut (bloc affiché légèrement décalé sur la droite du contenu principal) :

Le style utilisé est :

#content aside:not(.bigfoot-footnote) {
	background-color: rgb(250, 250, 250);
	color: rgb(99, 99, 99);
	width: 20em;
	padding: 0 1em;
	float: right;
	margin: 0 -5em 1em 2em;
	border-left: 3px solid #267daf;
}

#content aside:not(.bigfoot-footnote) :first-child {
	margin-top: 0;
	padding-top: .5em;
}

#content aside:not(.bigfoot-footnote) :last-child {
	padding-bottom: .5em;
}

@media only screen and (max-width: 60em) {
	#content aside:not(.bigfoot-footnote) {
		float: inherit;
		width: inherit;
		margin: 1em 2em;
		border-left: 3px solid #267daf;
		border-right: none;
	}
}

Vous remarquerez que j’exclus les éléments aside ayant la classe .bigfoot-footnote utilisant le plugin Bigfoot et ce dernier utilisant aussi des éléments aside pour ses besoins.

Si vous n’utilisez pas ce plugin, supprimez la partie :not(.bigfoot-footnote)

Je me suis aussi préparé deux classes particulières qui me permettent respectivement de :

Cadrer à gauche le bloc, en affectant la classe left au bloc :

#content aside.left:not(.bigfoot-footnote) {
	float: left;
	margin: 0 2em 1em -5em;
	border-right: 3px solid #267daf;
	border-left: none;
}

Centrer le bloc (qui est également la présentation utilisée sur petit écran), en affectant la classe inline au bloc :

#content aside.inline:not(.bigfoot-footnote) {
	float: inherit;
	width: inherit;
	margin: 1em 2em;
}

Ensuite pour les listes de définition, bien que je n’en sois pas complètement satisfait, j’utilise ceci :

dl {
	padding: 1em;
	margin: 0;
	background: transparent;
}
dt {
	color: rgb(139, 145, 165);
	font-weight: bold;
}
dd + dt {
    margin-top: .5em;
}
dd {
	margin-left: 1em;
	border-left: 1px solid #d9dbdf;
	padding-left: 1em;
	color: #555;
}
dd + dd {
    margin-top: .5em;
}

Si vous des idées pour styler un plus élégamment les listes de définition, je suis preneur !