Slingshot App Icon in CSS

Hey !

Well, I created the slingshot icon in pure CSS yesterday, and I decided to share it with you on dribbble.

But, you have to know the story behind, and why it is not as pixel perfect as it have to be.

So, when Slingshot were released, yesterday evening, I was on a rush to meet someone on a train-station. But I would like to be the first to attempt to create it in CSS, just for fun.

So, I ordered a beer at the "Gare de Lyon" in Paris, and I opened my Macbook, and I directly started to code it.

I only had a screenshot of the app icon (from my phone) that I opened with photoshop.. And so, some sizes and "details" are not exactly the same.

Technically, it uses box-shadows to generates the colored squares, and some other CSS3 properties such as border-radius, after that, its just regular css.
I've made it with SASS, yes, because you know, SASS is awesome :)

Anyway, as always, I had fun creating it ! And it would be awesome if you could give me some feedbacks on :
- The written code behind (is there an other way, faster & better way to do it ? )
- The details you would change to make it pixel perfect

And just if you want to like the shot, go on, don't be shy :)

Full page : http://codepen.io/LukyVj/full/skpgA/
See codes : http://codepen.io/LukyVj/pen/skpgA/

Cheers !