New layout

[frankpf]

I changed the (CSS) layout a bit.

The main changes are:

• Mobile first responsiveness (pretty basic right now)
• The comments were changed to a sans-serif font
• The front page now uses a two-colum grid and is centered
• The top bar is using a black background and white font and dimensions were changed a little

Screenshots:

The front page:
http://cl.ly/BDGc

The front page resized (look at how the two column grid turns into one column):
http://cl.ly/BE0E

The comments page:
http://cl.ly/BD6l

Currently the CSS is totally screwed up (it seems to be very hard to maintain), so I plan to restart the layout and CSS from zero (if you guys agree with a redesign), although keeping LN's minimal design.

Also, I propose some markup changes: it seems LN is currently using some elements that don't even exist in the HTML5 spec, like <news>, <newslist>, <content> etc.
I'd be happy to help you change that to a more semantic markup, the only problem is that I don't know how to use the tool LN uses to generate the markup.

[rkh]

The markup tool is implemented in page.rb.

[frankpf]

Yeah, I'm trying to, but I'm having trouble understanding that. Are there any docs (if it is an external package/tool)?

Also, why can't we use something like HAML or Slim, aren't those easier and more well-known (I'm pretty newbie in Ruby, so maybe I'm saying some sh** right now)?

[jozan]

Getting rid of non-existing HTML tags should be done already.

The markup is pretty much screwed and maintaining a good CSS layout isn't easy job.

[netroy]

+1 on HAML or some simple templates. Non-ruby folks can contribute as well then, without breaking anything.

Also can we nest the comment tags instead of adding the "margin-left" style . That would make collapsing much easier as well.

Also +1 on the 2-column layout , but with a max-width on each column.

[frankpf]

Yeah, HAML/Slim is much, MUCH easier for someone without Ruby knowledge.

The 2-column layout, as gbrindisi said on the LN thread, which is much worse than the "2 colums are messy" argument:

I like the overall feel of having two columns but this way we lose the sense of priority of every news item since we have two submission per row.

[netroy]

maybe the right column can be the latest news & left for top news ..
can drop the latest news below top on lower width screens

[frankpf]

Wouldn't that lead to a lot of redundancy (especially right now when the site is starting out and most news will be repeated)?

[mulderp]

What do you think of extracting the View generators to its own view layer: #143 ?

For my taste, ERB should be the way to go, since HTML is the best reference for web design.