Skip to content

Instantly share code, notes, and snippets.

@LeaVerou

LeaVerou/dabblet.css

Last active March 28, 2016 16:02
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 5 You must be signed in to fork a gist
  • Save LeaVerou/ed4f0a7dc7326e8e28b8 to your computer and use it in GitHub Desktop.
Save LeaVerou/ed4f0a7dc7326e8e28b8 to your computer and use it in GitHub Desktop.
Download ZIP
HSL clock
Raw
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;
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
Raw
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);
Raw
settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"javascript"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment