Added page navigation and tweaked header styles

Changed header selection in editor to be more descriptive and
to provide a wider range of styles.

Closes #68

resources/assets/js/pages/page-form.js

@@ -81,9 +81,10 @@ var mceOptions = module.exports = {
     toolbar: "undo redo | styleselect | bold italic underline strikethrough superscript subscript | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | table image-insert link hr | removeformat code fullscreen",
     content_style: "body {padding-left: 15px !important; padding-right: 15px !important; margin:0!important; margin-left:auto!important;margin-right:auto!important;}",
     style_formats: [
-        {title: "Header 1", format: "h1"},
-        {title: "Header 2", format: "h2"},
-        {title: "Header 3", format: "h3"},
+        {title: "Header Large", format: "h2"},
+        {title: "Header Medium", format: "h3"},
+        {title: "Header Small", format: "h4"},
+        {title: "Header Tiny", format: "h5"},
         {title: "Paragraph", format: "p", exact: true, classes: ''},
         {title: "Blockquote", format: "blockquote"},
         {title: "Code Block", icon: "code", format: "pre"},

resources/assets/sass/_lists.scss

@@ -1,5 +1,5 @@
 .page-list {
-  h3 {
+  h4 {
     margin: $-l 0 $-xs 0;
     font-size: 1.666em;
   }
@@ -11,11 +11,13 @@
     overflow: hidden;
     margin-bottom: $-l;
   }
-  h4 {
+  h5 {
     display: block;
     margin: $-s 0 0 0;
     border-left: 5px solid $color-page;
     padding: $-xs 0 $-xs $-m;
+    font-size: 1.1em;
+    font-weight: normal;
     &.draft {
       border-left-color: $color-page-draft;
     }
@@ -67,44 +69,39 @@
   }
 }
 
-.page-nav-list {
+.sidebar-page-nav {
   $nav-indent: $-s;
-  margin-left: 2px;
   list-style: none;
+  margin: $-s 0 $-m 2px;
+  border-left: 2px dotted #BBB;
   li {
-    //border-left: 1px solid rgba(0, 0, 0, 0.1);
-    padding-left: $-xs;
-    border-left: 2px solid #888;
+    padding-left: $-s;
     margin-bottom: 4px;
-  }
-  li a {
-    color: #555;
-  }
-  .nav-H2 {
-    margin-left: $nav-indent;
     font-size: 0.95em;
   }
-  .nav-H3 {
+  .h1 {
+    margin-left: -2px;
+  }
+  .h2 {
+    margin-left: -2px;
+  }
+  .h3 {
+    margin-left: $nav-indent;
+  }
+  .h4 {
     margin-left: $nav-indent*2;
-    font-size: 0.90em
   }
-  .nav-H4 {
+  .h5 {
     margin-left: $nav-indent*3;
-    font-size: 0.85em
   }
-  .nav-H5 {
+  .h6 {
     margin-left: $nav-indent*4;
-    font-size: 0.80em
-  }
-  .nav-H6 {
-    margin-left: $nav-indent*5;
-    font-size: 0.75em
   }
 }
 
 // Sidebar list
 .book-tree {
-  padding: $-l 0 0 0;
+  padding: $-xs 0 0 0;
   position: relative;
   right: 0;
   top: 0;
@@ -306,10 +303,10 @@ ul.pagination {
 }
 
 .entity-list {
-  >div {
+  > div {
     padding: $-m 0;
   }
-  h3 {
+  h4 {
     margin: 0;
   }
   p {
@@ -327,9 +324,10 @@ ul.pagination {
     color: $color-page-draft;
   }
 }
+
 .entity-list.compact {
   font-size: 0.6em;
-  h3, a {
+  h4, a {
     line-height: 1.2;
   }
   p {

resources/assets/sass/_text.scss

@@ -15,31 +15,41 @@ h2 {
   margin-bottom: 0.43137255em;
 }
 h3 {
-  font-size: 1.75em;
+  font-size: 2.333em;
   line-height: 1.571428572em;
   margin-top: 0.78571429em;
   margin-bottom: 0.43137255em;
 }
 h4 {
-  font-size: 1em;
+  font-size: 1.666em;
   line-height: 1.375em;
   margin-top: 0.78571429em;
   margin-bottom: 0.43137255em;
 }
 
-h1, h2, h3, h4 {
+h1, h2, h3, h4, h5, h6 {
   font-weight: 400;
   position: relative;
   display: block;
   color: #555;
   .subheader {
-    //display: block;
     font-size: 0.5em;
     line-height: 1em;
     color: lighten($text-dark, 32%);
   }
 }
 
+h5 {
+  font-size: 1.4em;
+}
+
+h5, h6 {
+  font-weight: 500;
+  line-height: 1.2em;
+  margin-top: 0.78571429em;
+  margin-bottom: 0.66em;
+}
+
 /*
  * Link styling
  */