[J-core] J-Core: Style Sheet Donation

[Santiago Gil]

> When I shrink the window width on chrome, your text overlaps between the
> nav bar and the body of the page. The old one could go much smaller
> before it had a problem, and then it introduced scrollbars to handle it.
> (See attached screenshots.)
You're right. I found the problem: It was due to the indentation level
on the list with the navigation links and also the column width wasn't
properly defined in some places. I'll attach the fix below.

> Attempting to factor out the "header.html copied inline into each file"
> thing, I noticed that you replaced the tables with a css implementation
> of tables. Is there a reason for that?
Yes, to make the website responsive. If you keep shrinking the window,
after a certain point the left column becomes centered and the content
is displayed under it, without scroll bars. That means it should look
good with any screen size.

> What does div class="nine columns" mean? It doesn't seem to be defined
> in your css, and google only finds it in examples.
It is defined in 'skeleton.css', which does all the responsive magic.
(If you grepped, you might have missed it because it is defined as
".nine.columns".)

The whole page is defined to have 12 columns in total. With that
property you define what proportion of the page do you want the
content inside that div to take, and you can build any layout that
sums 12 columns.

> I tried installing the stylesheet(s) by themsevles without the many
> other changes you made to the site (thanks for catching the typo in a
> href="#download_bistream" but maybe that should be a separate commit?)
> and the result... wasn't pretty. So I'm reading through to see what the
> changes are.
Right, because most of the changes in look come from the fact that the
tables are now divs.


Here are the changes that fix the overlapping problem:

1) Make sure that in the header of the page the "div" just before the
"What is it?" title, has class="three columns" (this was defined
correctly in some pages, but others had "two columns").
<div class="row">
    <div class="three columns">
    <strong>What is it?</strong>
    ...

2) On 'skeleton.css' add the following:
/* No indentation for navigation links */
#navigation ol, ul {
  margin-left: -2rem;
}

> Thanks,
>
> Rob
You're welcome.

Anything, just let me know.