Style CSS du blog pour les créatures nocturnes 10

cactus — Mon, 26 Aug 2013 19:07:14 +0000

Ceci est un post invité de cactus posté sous licence creative common 3.0 unported.

Comme tout bon codeur, je travaille la nuit ou alors la journée mais seulement avec les volets fermés.
Et si y’a bien un défaut avec ce blog, c’est qu’il arrache la rétine à la pince anglaise !
Du coup, de mes petits doigts agiles et gracieux je me suis bricolé un petit CSS maison pour ne plus pleurer chaque fois que j’ai besoin de relire un des articles, en rendant le site ténébreux plus qu’un gothique un soir sans lune !
Comme vous pouvez le constater, la différence est flagrante :

S&M : comparaison entre sans et avec thème

Pour l’appliquer, j’utilise l’extension Stylish de mon navigateur (l’addon est disponible pour tous les navigateurs populaires).
Voici donc le style :

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("sametmax.com") {
	body {
		background: none !important;
		background-color: black !important;
		color: white !important;
	} code, pre, blockquote {
		background-color : #101010 !important;
		color : white !important;
	} #slogan {
		color: white !important;
	} a {
		color: grey !important;
	} #header ul li {
		color: white !important;
		background-color: #101010 !important;
	} ul.nav li:hover a {
		background-color: #202020 !important;
	} #header ul {
		background-color: black !important;
	} * {
		text-shadow: none !important;
	}
}

Pour pousser un peu plus loin il y a le problème de la coloration syntaxique. En effet, le style est codé directement dans les balises html, qui ne sont pas modifiées par le CSS, et la coloration syntaxique foire parfois. Du coup pour ceux qui veulent se montrer tatillons, il faut utiliser un petit script (à intégrer par exemple à GreaseMonkey) pour modifier la coloration syntaxique.
Voilà le script :

// ==UserScript==
// @name        Sam&Max - Litlle Color Fix
// @namespace   sametmax.com
// @description Fix a color bug for code coloring on sametmax.com with Stylish "Darker" theme
// @include     http://sametmax.com/*
// @version     1
var spans = document.getElementsByTagName("span");
console.info(spans.length + " spans trouvés by GreaseMonkey/Sam&Max - Little Color Fix");
var white = 0;
for (var i=0; i < spans.length; i++) {
	if (spans[i].style.color == "black" || spans[i].style.color == "#000000" || spans[i].style.color == "rgb(0, 0, 0)") {
		spans[i].style.color = "white";
		white++;
	}
	if (spans[i].style.color == "#000000") {
		spans[i].style.color = "blue";
	}
}
console.info(white + " spans colorisés by GreaseMonkey/Sam&Max - Little Color Fix");
// ==/UserScript==

Enfin, pour ceux qui se plaignent qu’il y ait du cul dans les articles de SM, un petit Stylish pour enlever les images :

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("sametmax.com") {
	.wp-caption, .wp-post-image {visibility: hidden !important;}
}

Sam & Max » noir

Style CSS du blog pour les créatures nocturnes 10