Styling improvements to documentation (#6425)

* Changed mkdocs theme

* Added custom styles for various elements

* Moved to different syntax highlighting plugin

* Added a README for the docs/ folder to direct people to the docs site

* Change highlight theme

docs/README.md

@@ -0,0 +1,7 @@
+# Read documentation on https://docs.netdata.cloud
+
+Welcome to the Netdata documentation! While you can read Netdata documentation here, or throughout the Netdata repository, our intention is that these pages are read on [docs.netdata.cloud](https://docs.netdata.cloud). 
+
+Links between documentation pages will work fine here, but the formatting may not be perfect, as our documentation site uses a few extra Markdown features that GitHub doesn't support natively. Other things might be missing or look less than perfect.
+
+Now get out there and build an exceptional infrastructure.

docs/generator/buildyaml.sh

@@ -68,6 +68,9 @@ extra:
       link: "https://www.facebook.com/linuxnetdata/"
 theme:
     name: "material"
+    palette:
+      primary: "blue grey"
+      accent: "light green"
     custom_dir: custom/themes/material
     favicon: custom/img/favicon.ico
     language: '${language}'
@@ -86,7 +89,6 @@ markdown_extensions:
  - footnotes
  - tables
  - admonition
- - codehilite
  - meta
  - sane_lists
  - smarty
@@ -100,6 +102,9 @@ markdown_extensions:
  - pymdownx.caret
  - pymdownx.critic
  - pymdownx.details
+ - pymdownx.highlight:
+    pygments_style: manni
+    noclasses: true
  - pymdownx.inlinehilite
  - pymdownx.magiclink
  - pymdownx.mark

docs/generator/custom/css/netdata.css

@@ -5,3 +5,26 @@
 .md-typeset {
     font-size: .75rem
 }
+
+/* Hide the label at the top of the navigation menu. Does nothing. */
+.md-nav__title {
+    display: none;
+}
+
+/* Change the language selector dropdown to match new color. */
+.md-header-nav select#sel {
+    background-color: rgba(0,0,0,.26) !important;
+    padding: 3px;
+    margin-left: 5px;
+    margin-right: 20px;
+}
+
+/* Add some whitespace to the bottom of each doc. */
+.md-content {
+    margin-bottom: 6rem;
+}
+
+/* Make sure inline code in tables doesn't break. */
+.md-typeset__table code {
+    word-break: normal;
+}