Search box: make it sticky

[tripu]

Only on screens ≥ 768px wide.

I wrapped placeholder, reset and legend in a new div filters, and tweaked styles a bit.

Fixes #17.

[tanyeah]

@tripu, can we add to div#filters.stuck : border-bottom: 1px solid #cccccc; padding: 10px 0px; width:72%

^ This gives the sticky header some visual definition, and stops it from bleeding into the rest of the content on scroll.

(If you can think of a better way to do this, please have at it!)

[tanyeah]

I tried that, @deniak. Wasn't a fan of how it competed with the border-top of the first content block. 😕

This might be just me, though. If everyone else feels that's not a problem, let's!

[tripu]

@tanyeah, @deniak: you hit on something I actually tried to do, but gave up about.

My initial idea was to set a subtle shadow underneath that box when it becomes sticky. The problem was, I didn't know how to prevent that shadow from spilling to the sides, too.

I think I found a solution now, though. I'll commit that.

Also, +1 to the extra padding.

[tripu]

@tanyeah, @deniak, my first attempt wasn't good enough: there were oddities when resizing the window, or when the filters div changes its size (because the button is shown/hiden, filters change, etc). Also, at the exact cutoff point where the div is stuck/unstuck, you could notice a jump in the content. This last commit hopefully fixes all that.

I've also added a shadow underneath the box when it's sticky, fine-tuned position and size, and added some padding as suggested.

Does it look better now?

[tanyeah]

Needs a little more breathing room on the left edge - there's a dissonance between all that space on the right, and none on the left between the edge and the 'F' in Filters.

Other than that, I'm a fan!