Kata #1: Clean + rich card

I like recode's simple and minimalist cards. I also like how they designed the fonts: huge titles, small sans-serif description, tiny but uppercase date and author and the use of the middot as a divider rather than |.

Modification: the .gif plays when you put your mouse over the card and stops on mouseout.

I had a bit of trouble getting this to happen as onmouseout apparently triggers for all children of the element you assign it to.

// this will log a random number when you mouseout on
// every single element inside .cleanrich-card

document.querySelector(".cleanrich-card").onmouseout = function() {
	console.log(Math.random())
}

Check out the following clean + rich card. If you open the developer console (CTRL+SHIFT+J on Chrome) and hover around it you'll see what I mean.

Eventually, I just went with overlaying the card with a link.

Also, there was a slight loading lag when hovering over the still image so I decided to preload it. A clean way of doing this just via css is just putting it as an out-of-sight background on an element.

#preload {
	background: url(../img/move.gif) no-repeat -9999px -9999px;
}

Idea: Mark Steve gave me the idea of making these cards without using any JS. I think I will take up his challenge in another kata.