Reduce spacing of heading cells

[ellisonbg]

The spacing above and below of heading cells has been off for a long time - since the very early days of the notebook. This is an attempt to improve the design of those elements. Here is a rough sketch of what I have done:

• Rendered TextCells now have a 0.5em padding at the top and bottom. This provides a nice 2*0.5em = 1.0em spacing between all rendered text cells. The goal is is to make the spacing between TextCells identical as the spacings within TextCells.
• The line-height of headings have been set to 1.0. The reason for this is that line-height add of its space above and below the text. Thus it cannot be used to add asymetric spacing to headings. The sense from everyone is that we want more space above than below.
• For the larger headings (1-4) I use a margin-top of 1em (measured wrt to the base font size of 14px). 5 and 6 get slightly smaller.
• The old heading sizes were (28,22,18,14,12,11)px. New ones are (26,22,18,14,12,12). Only minor changes here.
• Heading 6 is now italic bold rather than super small bold.
• Added a 1em padding at the top of the notebook div to provide a bit more space above the first cell.

If you want to try these changes out in your custom.js (please do) add the following:

.rendered_html h1{font-size:185.7%;margin:1.08em 0 0 0;font-weight:bold;line-height:1.0;}
.rendered_html h2{font-size:157.1%;margin:1.27em 0 0 0;font-weight:bold;line-height:1.0;}
.rendered_html h3{font-size:128.6%;margin:1.55em 0 0 0;font-weight:bold;line-height:1.0;}
.rendered_html h4{font-size:100%;margin:2em 0 0 0;font-weight:bold;line-height:1.0;}
.rendered_html h5{font-size:85.7%;margin:1.83em 0 0 0;font-weight:bold;line-height:1.0;}
.rendered_html h6{font-size:85.7%;margin:1.83em 0 0 0;font-weight:bold;line-height:1.0;font-style:italic;}
.rendered_html h1:first-child{margin-top:0.538em;}
.rendered_html h2:first-child{margin-top:0.636em;}
.rendered_html h3:first-child{margin-top:0.777em;}
.rendered_html h4:first-child{margin-top:1em;}
.rendered_html h5:first-child{margin-top:1.16em;}
.rendered_html h6:first-child{margin-top:1.16em;}
.rendered_html ul{list-style:disc;margin:0em 2em;}
.rendered_html ol{list-style:decimal;margin:0em 2em;}
.rendered_html *+ul{margin-top:1em;}
.rendered_html *+ol{margin-top:1em;}
.rendered_html *+table{margin-top:1em;}
.rendered_html img{display:block;margin-left:auto;margin-right:auto;}
div.text_cell_render{outline:none;resize:none;width:inherit;border-style:none;padding:0.5em 0.5em 0.5em 0.4em;color:#000000;}
div.cell.text_cell.rendered{padding:0px;}
div#notebook{overflow-y:scroll;overflow-x:auto;width:100%;padding:1em 0 1em 0;margin:0px;border-top:1px solid #ababab;outline:none;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}

Here is what this looks like:

Another screenshot:

Another screenshot:

[takluyver]

Is it possible (/practical) to, when the first cell is a heading, leave less space above it, so the document starts slightly nearer the toolbar? Not to worry if that's difficult.

Otherwise, I think it looks good.

[Carreau]

Is it possible (/practical) to, when the first cell is a heading, leave less space above it, so the document starts slightly nearer the toolbar?

I suppose we can add a :first pseudo selector.

[ellisonbg]

I actually added a 1 em extra spacing at the top of the notebook because
the first heading looked to crowded... :)

On Sun, Jan 12, 2014 at 8:02 AM, Matthias Bussonnier <
notifications@github.com> wrote:

Is it possible (/practical) to, when the first cell is a heading, leave
less space above it, so the document starts slightly nearer the toolbar?

I suppose we can add a :first pseudo selector.

—
Reply to this email directly or view it on GitHubhttps://github.com//pull/4786#issuecomment-32125666
.

Brian E. Granger
Cal Poly State University, San Luis Obispo
bgranger@calpoly.edu and ellisonbg@gmail.com

[damianavila]

I like the general idea... and the code looks good 👍

[minrk]

what is the effect of the tiny nonuniformity here?

[ellisonbg]

I would use 0.5em all around, but the text in our code cells in indented
from the L by 0.4em. I wanted the heading/md text to match that indentation
level. But this reminds be that we have a less variable for this that I can
use.

On Sun, Jan 12, 2014 at 11:40 AM, Min RK notifications@github.com wrote:

In IPython/html/static/notebook/less/textcell.less:

@@ -16,7 +16,7 @@ div.text_cell_render {
resize: none;
width: inherit;
border-style: none;

• padding: 5px;
• padding: 0.5em 0.5em 0.5em 0.4em;

what is the effect of the tiny nonuniformity here?

—
Reply to this email directly or view it on GitHubhttps://github.com//pull/4786/files#r8814946
.

Brian E. Granger
Cal Poly State University, San Luis Obispo
bgranger@calpoly.edu and ellisonbg@gmail.com

[ellisonbg]

OK I think all review changes have been made.

[damianavila]

just add semicolons at the end to keep consistency...

[takluyver]

@ellisonbg : Do you want to respond to @damianavila's requests for semicolons?

[ellisonbg]

Yep

On Fri, Jan 24, 2014 at 11:07 AM, Thomas Kluyver
notifications@github.comwrote:

@ellisonbg https://github.com/ellisonbg : Do you want to respond to
@damianavila https://github.com/damianavila's requests for semicolons?

—
Reply to this email directly or view it on GitHubhttps://github.com//pull/4786#issuecomment-33251432
.

Brian E. Granger
Cal Poly State University, San Luis Obispo
bgranger@calpoly.edu and ellisonbg@gmail.com

[ellisonbg]

Crap lost a comment. From a code perspective, this is ready to go. I addressed all the comments and cleaned up a bit more. We could probably fine tune the style more, but I think it is much better and we probably just need to live with this for a while to see how we like it. I am +1 for merging unless someone wants to try it out more. I have not made any style changes since we looked at in at the dev meeting.