smlombardi · March 28, 2016 16:02
diff --git a/dabblet.css b/dabblet.css
 /**
 * HSL clock
 */

 height: 100%;
 font: bold 5em/1 Helvetica Neue, sans-serif;
 display: flex;
 text-align: center;
 align-items: center;
 justify-content: center;
 margin-top: -.1em;
 transition: .1s background;
 color: white;
 text-shadow: 0 0 1px black, 0 0 2px black, 0 0 2px black, 1px 1px black;
diff --git a/dabblet.html b/dabblet.html
 <!-- content to be placed inside <body>…</body> -->
diff --git a/dabblet.js b/dabblet.js
 setInterval(function(){
 	var d = new Date();
 	var h = d.getHours();
 	var m = d.getMinutes();
 	var s = d.getSeconds();
 	
 	document.body.textContent = [h, m, s].map(function(a){ return a < 10? '0' + a : a}).join(':');
 	
 	// TODO: Shift lightness so that the color is dark at night and light in the day
 	document.body.style.background = 'hsl(' + ~~(s*6) + ', ' + ~~(m*10/6) + '%, ' +  ~~(h*25/6) + '%)';
 }, 1000);
diff --git a/settings.json b/settings.json
 {"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"javascript"}
	/**
	* HSL clock
	*/

	height: 100%;
	font: bold 5em/1 Helvetica Neue, sans-serif;
	display: flex;
	text-align: center;
	align-items: center;
	justify-content: center;
	margin-top: -.1em;
	transition: .1s background;
	color: white;
	text-shadow: 0 0 1px black, 0 0 2px black, 0 0 2px black, 1px 1px black;
	setInterval(function(){
	var d = new Date();
	var h = d.getHours();
	var m = d.getMinutes();
	var s = d.getSeconds();

	document.body.textContent = [h, m, s].map(function(a){ return a < 10? '0' + a : a}).join(':');

	// TODO: Shift lightness so that the color is dark at night and light in the day
	document.body.style.background = 'hsl(' + ~~(s6) + ', ' + ~~(m10/6) + '%, ' + ~~(h*25/6) + '%)';
	}, 1000);