Make the CSS responsive down to 757 px.

[brendanlong]

This is mainly just a start to make reponsifying the site easier. All of the main layout pieces scale and the only big problem is that the header doesn't fit once you go down past 757px. It's pixel-identical to the current style, except for:

• On the discussion page, the tagline gets removed when the screen is below 980px
• The tagline looks slightly different on the discussion page, since we re-use the same image as the main page now

[brendanlong]

There's a lot more I could do, but I didn't want to change the style on the first attempt. If people think it's a good idea, future commits could make more changes when the screens size warrants it:

• Display the affiliated site icons (MIRI, etc.) differently. Maybe stack them?
• Make the header just say "LessWrong" when "Discussion" doesn't fit
• Hide the sidebar and add buttons to show/hide it.
• Remove some of the padding on the site

[brendanlong]

Compared to PR #597, this takes a completely different approach by just letting the body of the page scale down farther, rather than explicitly making things bigger. Mine doesn't scale as far, but that's only because I don't remove the sidebar (yet).

[brendanlong]

Here's a before and after on my phone:

before after

The point isn't to be perfect, but to be better in a way I can easily build on.

[jeffkaufman]

@brendanlong could you post some more screenshots? I would find it helpful to see:

• Article comments
• Article page
• Discussion page
• Promoted page

[jeffkaufman]

(basically, the same screenshots I posted on #597)

[brendanlong]

I pushed something to simplify this commit (making fewer changes -- no doctype change, not messing with the affiliated organization icons).

The links Jeff wants are here:

http://lesswrong.brendanlong.com/

The more-responsive ones are a work in progress to re-arrange the icons so we can scale to ~560px.

[brendanlong]

I fixed the regression on Firefox, so it scales properly at least on Firefox and Chrome. I do need to check on an iPhone (if someone has one). The full pages are here, so if someone with an iPhone can just load one of them and see if it fills the page, that would be helpful:

http://lesswrong.brendanlong.com/

It really doesn't matter which since all of them use the same CSS and JavaScript.

[brendanlong]

I got the uploaded version working a lot better using wget. Just go here and there's a 3-link-deep static copy of the site:

http://lesswrong.brendanlong.com/responsive/

And for the "more-responsive" version:

http://lesswrong.brendanlong.com/more-responsive/

(Ignore the random "LessWrong: Homepage" header -- this is a wget-related error, not an actual style problem)