improve docs readability (#1310)

* improve docs readability

* update prism

website/config/variables.js

@@ -46,5 +46,6 @@ module.exports = {
   mobile: '480px',
   tablet: '768px',
   desktop: '960px',
-  display: '1200px'
+  display: '1200px',
+  xlarge: '1280px'
 }

website/site/content/docs/add-to-your-site.md

@@ -24,7 +24,7 @@ If your generator isn't listed here, you can check its documentation, or as a sh
 
 Inside the `admin` folder, you'll create two files:
 
-```
+```x
 admin
  ├ index.html
  └ config.yml
@@ -57,13 +57,13 @@ The second file, `admin/config.yml`, is the heart of your Netlify CMS installati
 
 You can also use Netlify CMS as an npm module. Wherever you import Netlify CMS, it will automatically run, taking over the current page. Make sure the script that imports it is only run on your CMS page. First install the package and save it to your project:
 
-```
+```bash
 npm install netlify-cms --save
 ```
 
 Then import it (assuming your project has tooling for imports):
 
-```
+```js
 import CMS from 'netlify-cms'
 
 // Now the registry is available via the CMS object.

website/site/content/docs/custom-widgets.md

@@ -76,7 +76,7 @@ CMS.registerWidget('categories', CategoriesControl, CategoriesPreview);
 
 Register a block level component for the Markdown editor:
 
-```
+```js
 CMS.registerEditorComponent(definition)
 ```
 

website/src/css/imports/base.css

@@ -56,7 +56,7 @@ h3 > p {
 }
 
 p, ul {
-  font-size: $tiny;
+  font-size: 18px;
   line-height: 26px;
   margin-top: 0;
 }
@@ -142,6 +142,7 @@ ul {
 
 pre {
   border-radius: $borderRadius;
+  line-height: 1 !important;
 }
 
 .code,
@@ -149,4 +150,5 @@ code {
   font-family: 'Roboto Mono', monospace !important;
   font-size: 14px;
   text-transform: none;
+  line-height: 1 !important;
 }

website/src/css/imports/docs.css

@@ -113,6 +113,10 @@
       margin-top: $large;
     }
 
+    p {
+      line-height: 1.7;
+    }
+
     a {
 			text-decoration: none;
 			color: $darkGreen;
@@ -144,6 +148,16 @@
       padding: initial;
       white-space: inherit;
     }
+
+    pre {
+      margin: 30px -16px !important;
+    }
+
+    @media (min-width: $xlarge) {
+      pre {
+        margin-right: -120px !important;
+      }
+    }
 	}
 
 	h1,
@@ -163,23 +177,10 @@
 
 	h3 {
 		color: $grey;
-		font-size: 12px;
+		font-size: 20px;
-		font-weight: $semibold;
+		margin-top: $large;
-		text-transform: uppercase;
-		letter-spacing: 1.5px;
-		margin-top: $medium;
     margin-bottom: $small;
 
-
-		&:after {
-			content: ' ';
-			width: $small;
-			height: 2px;
-			background: $darkGreen;
-		    display: block;
-		    margin-top: 5px;
-		}
-
 		&.inverse {
 			color: white;
 		}

website/src/css/lib/prism.css

@@ -1,13 +1,12 @@
-/* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript+bash+ruby+git+go+json+jsx+yaml&plugins=line-numbers */
 /**
- * prism.js default theme for JavaScript, CSS and HTML
+ * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML
- * Based on dabblet (http://dabblet.com)
+ * Based on https://github.com/chriskempson/tomorrow-theme
- * @author Lea Verou
+ * @author Rose Pritchard
  */
 
 code[class*="language-"],
 pre[class*="language-"] {
-  color: black;
+	color: #ccc;
 	background: none;
 	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
 	text-align: left;
@@ -15,7 +14,7 @@ pre[class*="language-"] {
 	word-spacing: normal;
 	word-break: normal;
 	word-wrap: normal;
-  line-height: 1;
+	line-height: 1.5;
 
 	-moz-tab-size: 4;
 	-o-tab-size: 4;
@@ -25,25 +24,7 @@ pre[class*="language-"] {
 	-moz-hyphens: none;
 	-ms-hyphens: none;
 	hyphens: none;
-}
 
-pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
-code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
-  text-shadow: none;
-  background: #b3d4fc;
-}
-
-pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
-code[class*="language-"]::selection, code[class*="language-"] ::selection {
-  text-shadow: none;
-  background: #b3d4fc;
-}
-
-@media print {
-  code[class*="language-"],
-  pre[class*="language-"] {
-    text-shadow: none;
-  }
 }
 
 /* Code blocks */
@@ -55,7 +36,7 @@ pre[class*="language-"] {
 
 :not(pre) > code[class*="language-"],
 pre[class*="language-"] {
-  background: #f5f2f0;
+	background: #2d2d2d;
 }
 
 /* Inline code */
@@ -66,62 +47,61 @@ pre[class*="language-"] {
 }
 
 .token.comment,
+.token.block-comment,
 .token.prolog,
 .token.doctype,
 .token.cdata {
-  color: slategray;
-}
-
-.token.punctuation {
 	color: #999;
 }
 
-.namespace {
+.token.punctuation {
-  opacity: .7;
+	color: #ccc;
+}
+
+.token.tag,
+.token.attr-name,
+.token.namespace,
+.token.deleted {
+	color: #e2777a;
+}
+
+.token.function-name {
+	color: #6196cc;
+}
+
+.token.boolean,
+.token.number,
+.token.function {
+	color: #f08d49;
 }
 
 .token.property,
-.token.tag,
+.token.class-name,
-.token.boolean,
-.token.number,
 .token.constant,
-.token.symbol,
+.token.symbol {
-.token.deleted {
+	color: #f8c555;
-  color: #905;
 }
 
 .token.selector,
-.token.attr-name,
+.token.important,
+.token.atrule,
+.token.keyword,
+.token.builtin {
+	color: #cc99cd;
+}
+
 .token.string,
 .token.char,
-.token.builtin,
+.token.attr-value,
-.token.inserted {
+.token.regex,
-  color: #690;
+.token.variable {
+	color: #7ec699;
 }
 
 .token.operator,
 .token.entity,
-.token.url,
+.token.url {
-.language-css .token.string,
+	color: #67cdcc;
-.style .token.string {
-  color: #a67f59;
-  background: hsla(0, 0%, 100%, .5);
-}
-
-.token.atrule,
-.token.attr-value,
-.token.keyword {
-  color: #07a;
-}
-
-.token.function {
-  color: #DD4A68;
-}
-
-.token.regex,
-.token.important,
-.token.variable {
-  color: #e90;
 }
 
 .token.important,
@@ -136,43 +116,6 @@ pre[class*="language-"] {
 	cursor: help;
 }
 
-pre.line-numbers {
+.token.inserted {
-  position: relative;
+	color: green;
-  padding-left: 3.8em;
-  counter-reset: linenumber;
 }
-
-pre.line-numbers > code {
-  position: relative;
-}
-
-.line-numbers .line-numbers-rows {
-  position: absolute;
-  pointer-events: none;
-  top: 0;
-  font-size: 100%;
-  left: -3.8em;
-  width: 3em; /* works for line-numbers below 1000 lines */
-  letter-spacing: -1px;
-  border-right: 1px solid #999;
-
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-
-}
-
-  .line-numbers-rows > span {
-    pointer-events: none;
-    display: block;
-    counter-increment: linenumber;
-  }
-
-    .line-numbers-rows > span:before {
-      content: counter(linenumber);
-      color: #999;
-      display: block;
-      padding-right: 0.8em;
-      text-align: right;
-    }