Content pages styling for typography + WIP

Need to figure out:
- How to detect home page and change header styling
- Where breadcrumbs are included in the layout
- Where “Improve this Page” is included and how to get it in line with
the “Next” link (in docs)

frappe/public/css/docs.css

@@ -295,7 +295,7 @@ body {
 }
 .page-container .webpage-content ul,
 .page-container .webpage-content ol {
-  margin-bottom: 6px;
+  margin-bottom: 26px;
 }
 #page-index {
   padding-top: 0;
@@ -307,7 +307,86 @@ body {
   margin: 0;
 }
 code {
-  color: #ff0000;
+  color: #e66a12;
+  background: #fff6df;
+}
+pre {
+  background: #fafbfc;
+  border: 1px solid #e1e9f0;
+  border-radius: 2px;
+}
+.hljs {
+  background: transparent;
+  border: none;
+  padding: 1.2em 1.5em 1.5em;
+  color: #454e57;
+}
+.hljs-keyword,
+.hljs-tag,
+.css .hljs-class,
+.css .hljs-id,
+.lisp .hljs-title,
+.nginx .hljs-title,
+.hljs-request,
+.hljs-status,
+.clojure .hljs-attribute {
+  color: #e66a12;
+}
+.diff .hljs-deletion,
+.hljs-string,
+.hljs-tag .hljs-value,
+.hljs-preprocessor,
+.hljs-pragma,
+.hljs-built_in,
+.hljs-javadoc,
+.smalltalk .hljs-class,
+.smalltalk .hljs-localvars,
+.smalltalk .hljs-array,
+.css .hljs-rules .hljs-value,
+.hljs-attr_selector,
+.hljs-pseudo,
+.apache .hljs-cbracket,
+.tex .hljs-formula,
+.coffeescript .hljs-attribute {
+  color: #dd4a68;
+}
+.hljs-number,
+.hljs-date,
+.hljs-regexp,
+.hljs-literal,
+.hljs-hexcolor,
+.smalltalk .hljs-symbol,
+.smalltalk .hljs-char,
+.go .hljs-constant,
+.hljs-change,
+.lasso .hljs-variable,
+.makefile .hljs-variable,
+.asciidoc .hljs-bullet,
+.markdown .hljs-bullet,
+.asciidoc .hljs-link_url,
+.markdown .hljs-link_url {
+  color: #7575ff;
+}
+.hljs-shebang,
+.diff .hljs-addition,
+.hljs-comment,
+.hljs-annotation,
+.hljs-template_comment,
+.hljs-pi,
+.hljs-doctype {
+  color: #6a906a;
+}
+.dos .hljs-keyword,
+.hljs-decorator,
+.hljs-title,
+.hljs-type,
+.diff .hljs-header,
+.ruby .hljs-class .hljs-parent,
+.apache .hljs-tag,
+.nginx .hljs-built_in,
+.tex .hljs-command,
+.hljs-prompt {
+  color: #4f4fa4;
 }
 .navbar {
   position: absolute;
@@ -328,7 +407,7 @@ code {
   line-height: 1.5em;
   color: #8D99A6;
   background-color: transparent;
-  margin-bottom: 10px;
+  margin-bottom: 32px;
   padding: 0px;
 }
 .breadcrumb a,
@@ -352,9 +431,24 @@ a.btn-primary:focus,
 a.btn-primary:visited {
   color: #fff;
 }
+.btn-next-wrapper {
+  margin: 32px 0 16px;
+}
 h2 {
+  margin-top: 48px;
   font-size: 24px;
 }
+h3,
+h4 {
+  margin-top: 48px;
+}
+p {
+  margin-bottom: 16px;
+}
+.hero-and-content > p {
+  max-width: 723px;
+  margin: 0 auto;
+}
 .navbar {
   background-color: transparent;
   border: none;
@@ -377,6 +471,7 @@ h2 {
   font-size: 14px;
 }
 .docs-footer h3 {
+  margin-top: 24px;
   font-size: 16px;
 }
 .docs-footer img.frappe-bird {
@@ -450,11 +545,11 @@ h2 {
   border-radius: 15px;
 }
 .screenshot {
-  border: 2px solid #d1d8dd;
+  border: 1px solid #d1d8dd;
   box-shadow: 1px 1px 7px rgba(0, 0, 0, 0.15);
-  margin: 30px 0px;
+  margin: 8px 0px;
   max-width: 100%;
 }
 hr {
-  margin: 30px 0px;
+  margin: 48px 0px 30px;
 }

frappe/public/less/docs.less

@@ -88,9 +88,39 @@ body {
 }
 
 code{
-  color: #ff0000;
+  color: #e66a12;
+  background: #fff6df;
 }
 
+pre {
+  background:#fafbfc;
+  border: 1px solid #e1e9f0;
+  border-radius:2px;
+}
+
+.hljs {
+  background:transparent;
+  border:none;
+  padding:1.2em 1.5em 1.5em;
+  color:#454e57;
+}
+
+.hljs-keyword, .hljs-tag, .css .hljs-class, .css .hljs-id, .lisp .hljs-title, .nginx .hljs-title, .hljs-request, .hljs-status, .clojure .hljs-attribute{
+    color:#e66a12;
+  }
+  .diff .hljs-deletion, .hljs-string, .hljs-tag .hljs-value, .hljs-preprocessor, .hljs-pragma, .hljs-built_in, .hljs-javadoc, .smalltalk .hljs-class, .smalltalk .hljs-localvars, .smalltalk .hljs-array, .css .hljs-rules .hljs-value, .hljs-attr_selector, .hljs-pseudo, .apache .hljs-cbracket, .tex .hljs-formula, .coffeescript .hljs-attribute{
+    color:#dd4a68;
+  }
+  .hljs-number, .hljs-date, .hljs-regexp, .hljs-literal, .hljs-hexcolor, .smalltalk .hljs-symbol, .smalltalk .hljs-char, .go .hljs-constant, .hljs-change, .lasso .hljs-variable, .makefile .hljs-variable, .asciidoc .hljs-bullet, .markdown .hljs-bullet, .asciidoc .hljs-link_url, .markdown .hljs-link_url{
+    color:#7575ff;
+  }
+  .hljs-shebang, .diff .hljs-addition, .hljs-comment, .hljs-annotation, .hljs-template_comment, .hljs-pi, .hljs-doctype{
+    color:#6a906a;
+  }
+  .dos .hljs-keyword, .hljs-decorator, .hljs-title, .hljs-type, .diff .hljs-header, .ruby .hljs-class .hljs-parent, .apache .hljs-tag, .nginx .hljs-built_in, .tex .hljs-command, .hljs-prompt {
+   color:#4f4fa4;
+  }
+
 .navbar {
 	//background-color: @navbar-bg !important;
 	//background-color: @text-color !important;
@@ -115,7 +145,7 @@ code{
   line-height: 1.5em;
   color: @text-muted;
   background-color: transparent;
-  margin-bottom: 10px;
+  margin-bottom: 32px;
   padding: 0px;
 }
 .breadcrumb a,
@@ -137,10 +167,28 @@ a.btn-primary& {
 	}
 }
 
+.btn-next-wrapper {
+  margin:32px 0 16px;
+}
+
 h2 {
+ margin-top:48px;
 	font-size: 24px;
 }
 
+h3, h4 {
+ margin-top:48px;
+}
+
+p {
+ margin-bottom:16px;
+}
+
+.hero-and-content > p {
+ max-width:723px;
+ margin:0 auto;
+}
+
 .navbar {
 	background-color: transparent;
 	border: none;
@@ -166,6 +214,7 @@ h2 {
  font-size: 14px;
  
  h3 {
+  margin-top:24px;
   font-size:16px;
  }
  img.frappe-bird {
@@ -252,12 +301,12 @@ h2 {
 }
 
 .screenshot {
-	border: 2px solid @border-color;
+	border: 1px solid @border-color;
 	box-shadow: 1px 1px 7px rgba(0,0,0,0.15);
-	margin: 30px 0px;
+	margin: 8px 0px;
 	max-width: 100%;
 }
 
 hr {
-	margin: 30px 0px;
+	margin: 48px 0px 30px;
 }