Couleurs et variables

dabblet.css

/**
 * Couleurs et variables
 */
 :root {
 	--ma-teinte: 10;
 }
body {	
	font-family: monospace;
}

h1 {color: hsla(var(--ma-teinte), 100%, 50%, 1);}

h2 {color: hsla(var(--ma-teinte), 80%, 50%, 1);}

h3 {color: hsla(var(--ma-teinte), 60%, 50%, 1);}

h4 {color: hsla(var(--ma-teinte), 40%, 50%, 1);}

h5 {color: hsla(var(--ma-teinte), 20%, 50%, 1);}

h6 {color: hsla(var(--ma-teinte), 0%, 50%, 1);}

dabblet.html

<h1>The quick brown fox jumps over the lazy dog</h1>
<h2>The quick brown fox jumps over the lazy dog</h2>
<h3>The quick brown fox jumps over the lazy dog</h3>
<h4>The quick brown fox jumps over the lazy dog</h4>
<h5>The quick brown fox jumps over the lazy dog</h5>
<h6>The quick brown fox jumps over the lazy dog</h6>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}