General CSS cleanup.

* Created layout.css for common layout related mixins.
* monospace is the default font for now.

IPython/frontend/html/notebook/static/css/layout.css

@@ -0,0 +1,103 b''
+
+.border-box-sizing {
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+}
+
+/* Flexible box model classes */
+/* Taken from Alex Russell http://infrequently.org/2009/08/css-3-progress/ */
+ 
+.hbox {
+	display: -webkit-box;
+	-webkit-box-orient: horizontal;
+	-webkit-box-align: stretch;
+ 
+	display: -moz-box;
+	-moz-box-orient: horizontal;
+	-moz-box-align: stretch;
+ 
+	display: box;
+	box-orient: horizontal;
+	box-align: stretch;
+}
+ 
+.hbox > * {
+	-webkit-box-flex: 0;
+	-moz-box-flex: 0;
+	box-flex: 0;
+}
+ 
+.vbox {
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
+	-webkit-box-align: stretch;
+ 
+	display: -moz-box;
+	-moz-box-orient: vertical;
+	-moz-box-align: stretch;
+ 
+	display: box;
+	box-orient: vertical;
+	box-align: stretch;
+}
+ 
+.vbox > * {
+	-webkit-box-flex: 0;
+	-moz-box-flex: 0;
+	box-flex: 0;
+}
+  
+.reverse {
+	-webkit-box-direction: reverse;
+	-moz-box-direction: reverse;
+	box-direction: reverse;
+}
+ 
+.box-flex0 {
+	-webkit-box-flex: 0;
+	-moz-box-flex: 0;
+	box-flex: 0;
+}
+ 
+.box-flex1, .box-flex {
+	-webkit-box-flex: 1;
+	-moz-box-flex: 1;
+	box-flex: 1;
+}
+ 
+.box-flex2 {
+	-webkit-box-flex: 2;
+	-moz-box-flex: 2;
+	box-flex: 2;
+}
+ 
+.box-group1 {
+	-webkit-box-flex-group: 1;
+	-moz-box-flex-group: 1;
+	box-flex-group: 1;
+}
+ 
+.box-group2 {
+	-webkit-box-flex-group: 2;
+	-moz-box-flex-group: 2;
+	box-flex-group: 2;
+}
+ 
+.start {
+	-webkit-box-pack: start;
+	-moz-box-pack: start;
+	box-pack: start;
+}
+ 
+.end {
+	-webkit-box-pack: end;
+	-moz-box-pack: end;
+	box-pack: end;
+}
+ 
+.center {
+	-webkit-box-pack: center;
+	-moz-box-pack: center;
+	box-pack: center;
+}
  No newline at end of file

IPython/frontend/html/notebook/static/css/notebook.css

@@ -58,16 +58,6 b' hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin:'
 
 input, select { vertical-align: middle; }
 
-/* Normalize monospace sizing:
-   en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome */
-pre, code, kbd, samp { font-family: monospace, sans-serif; }
-
-pre {
-    text-align: left;
-    font-family: Monaco, Consolas, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace;
-    font-size: 12pt;
-}
-
 body {
     background-color: white;
     /* This won't propagate to all children so we also set it below */
@@ -82,21 +72,9 b' body {'
 }
 
 div#wrapper {
-    display: box;
-    display: -webkit-box;
-    display: -moz-box;
-
-    box-orient: vertical;
-    -webkit-box-orient: vertical;
-    -moz-box-orient: vertical;
-
     /* This is needed to make sure the wrapper fills the body */
     width: 100%;
     height: 100%;
-
-    box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
 }
 
 span#ipython_notebook h1 {
@@ -139,15 +117,12 b' div.notebook {'
     padding: 0px 40px;
     background-color: white;
     font-size: 12pt;
+}
 
-    /* Allow the notebook div to take up the rest of the vertical space */
-    box-flex: 1;
-    -webkit-box-flex: 1;
-    -moz-box-flex: 1;
-
-    box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
+.monospace-font {
+    font-family: monospace;
+/*    font-family: Monaco, Consolas, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace;*/
+    font-size: 12pt;
 }
 
 div.cell {
@@ -156,21 +131,6 b' div.cell {'
     /* This acts as a spacer between cells, that is outside the border */
     margin: 15px 0px 15px 0px;
     position: relative;
-
-    box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-
-    display: box;
-    display: -webkit-box;
-    display: -moz-box;
-
-    box-orient: vertical;
-    -webkit-box-orient: vertical;
-    -moz-box-orient: vertical;
-
-/*    border-width: 1px;*/
-/*    border-style: solid;*/
 }
 
 div.code_cell {
@@ -181,45 +141,15 b' div.prompt {'
     width: 90px;
     padding: 0px;
     margin: 0px;
-    font-family: Monaco, Consolas, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace;
-}
-
-div.input {
-    display: box;
-    display: -webkit-box;
-    display: -moz-box;
-
-    box-orient: horizontal;
-    -webkit-box-orient: horizontal;
-    -moz-box-orient: horizontal;
-
-    box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-
-/*    border-width: 1px;*/
-/*    border-style: solid;*/
 }
 
 div.input_prompt {
     color: blue;
 }
 
-div.input_area {
-    box-flex: 1;
-    -webkit-box-flex: 1;
-    -moz-box-flex: 1;
-
-    box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-}
-
 textarea.input_textarea {
     width: 100%;
     text-align: left;
-    font-family: Monaco, Consolas, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace;
-    font-size: 12pt;
     border-style: none;
     padding: 0px;
     margin: 0px;
@@ -231,31 +161,6 b' textarea.input_textarea {'
 div.output {
     /* This is a spacer between the input and output of each cell */
     margin-top: 15px;
-
-    display: box;
-    display: -webkit-box;
-    display: -moz-box;
-
-    box-orient: vertical;
-    -webkit-box-orient: vertical;
-    -moz-box-orient: vertical;
-
-    box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-
-/*    border-width: 1px;*/
-/*    border-style: solid;*/
-}
-
-div.output_pyout {
-    display: box;
-    display: -webkit-box;
-    display: -moz-box;
-    
-    box-orient: horizontal;
-    -webkit-box-orient: horizontal;
-    -moz-box-orient: horizontal;
 }
 
 div.output_prompt {
@@ -265,27 +170,19 b' div.output_prompt {'
 div.output_area {
     text-align: left;
     color: black;
-    font-family: Monaco, Consolas, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace;
-    font-size: 12pt;
 }
 
 div.output_latex {
+    /* Slightly bigger than the rest of the notebook */
     font-size: 13pt;
 }
 
-.box_flex1 {
-    box-flex: 1;
-    -webkit-box-flex: 1;
-    -moz-box-flex: 1;
-}
 
 div.text_cell {
     background-color: white;
 }
 
 textarea.text_cell_input {
-    font-family: Monaco, Consolas, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace;
-/*    font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;*/
     /* Slightly bigger than the rest of the notebook */
     font-size: 13pt;
     outline: none;

IPython/frontend/html/notebook/static/js/notebook.js

@@ -659,12 +659,12 b' CodeCell.prototype = new Cell();'
 
 
 CodeCell.prototype.create_element = function () {
-    var cell =  $('<div></div>').addClass('cell code_cell');
-    var input = $('<div></div>').addClass('input');
-    input.append($('<div/>').addClass('prompt input_prompt'));
-    var input_textarea = $('<textarea/>').addClass('input_textarea').attr('rows',1).attr('wrap','hard').autogrow();
-    input.append($('<div/>').addClass('input_area').append(input_textarea));
-    var output = $('<div></div>').addClass('output');
+    var cell =  $('<div></div>').addClass('cell code_cell vbox border-box-sizing');
+    var input = $('<div></div>').addClass('input hbox border-box-sizing');
+    input.append($('<div/>').addClass('prompt input_prompt monospace-font'));
+    var input_textarea = $('<textarea/>').addClass('input_textarea monospace-font').attr('rows',1).attr('wrap','hard').autogrow();
+    input.append($('<div/>').addClass('input_area box-flex1 border-box-sizing').append(input_textarea));
+    var output = $('<div></div>').addClass('output vbox border-box-sizing');
     cell.append(input).append(output);
     this.element = cell;
     this.collapse()
@@ -672,7 +672,7 b' CodeCell.prototype.create_element = function () {'
 
 
 CodeCell.prototype.append_pyout = function (data, n) {
-    var toinsert = $("<div/>").addClass("output_area output_pyout");
+    var toinsert = $("<div/>").addClass("output_area output_pyout hbox monospace-font");
     toinsert.append($('<div/>').
         addClass('prompt output_prompt').
         html('Out[' + n + ']:')
@@ -718,8 +718,8 b' CodeCell.prototype.append_display_data = function (data, element) {'
 
 CodeCell.prototype.append_stream = function (data, element) {
     element = element || this.element.find("div.output");
-    var toinsert = $("<div/>").addClass("output_area output_stream");
-    toinsert.append($("<pre/>").html(fixConsole(data)));
+    var toinsert = $("<div/>").addClass("output_area output_stream monospace-font");
+    toinsert.append($("<pre/>").addClass("monospace-font").html(fixConsole(data)));
     element.append(toinsert);
     return element;
 };
@@ -738,7 +738,7 b' CodeCell.prototype.append_latex = function (latex, element) {'
     // This method cannot do the typesetting because the latex first has to
     // be on the page.
     element = element || this.element.find("div.output");
-    var toinsert = $("<div/>").addClass("output_area output_latex");
+    var toinsert = $("<div/>").addClass("output_area output_latex monospace-font");
     toinsert.append(latex);
     element.append(toinsert);
     return element;
@@ -812,7 +812,7 b' TextCell.prototype.create_element = function () {'
     var cell = $("<div>").addClass('cell text_cell').
                append(
                    $("<textarea>" + this.placeholder + "</textarea>").
-                   addClass('text_cell_input').
+                   addClass('text_cell_input monospace-font').
                    attr('rows',1).
                    attr('cols',80).
                    autogrow()
@@ -1007,6 +1007,9 b' Kernel.prototype.status_restarting = function () {'
 
 $(document).ready(function () {
 
+    $('div#wrapper').addClass('vbox border-box-sizing')
+    $('div.notebook').addClass('box-flex1 border-box-sizing')
+
     MathJax.Hub.Config({
         tex2jax: {
             inlineMath: [ ['$','$'], ["\\(","\\)"] ],

IPython/frontend/html/notebook/templates/notebook.html

@@ -6,6 +6,7 b''
 
     <title>IPython Notebook</title>
 
+    <link rel="stylesheet" href="static/css/layout.css" type="text/css" />
     <link rel="stylesheet" href="static/css/notebook.css" type="text/css" />
 
     <link rel="stylesheet" href="static/jquery/css/themes/aristo/jquery-wijmo.css" type="text/css" />