Docs: Overhaul of installation documentation (#7841)

* Initial commit to bring new branch up to speed with previous work

* Initial commit to bring new branch up to speed with previous work

* Pass through for grammar and typos

* Pass through for grammar and typos

* First additions

* Improvements to installation page plus new separate kickstart page

* Lots of new pages, lots of improvements

* Continued work

* Fixing the install grid

* Added methods to nav

* Fix typo and add kickstart to nav

* CSS cleanup

* Various cleanup

* Cleanup on update/uninstall pages

* Add responsiveness to install grid

* Update checking of the kickstart files MD5 checksusm.

This updates the CI script used to verify the MD5 checksums of the
kickstart files as being correct in the documentation to use the new
locations for the respective checksums.

This is more involved than a simple path update because the existing
script assumes that both checksums are listed in the same file, which is
no longer the case.

Any future updates that move the location of the checksums just need to
modify the lines in tests/installer/checksums.sh that start with
`check_checksum` to point to the correct files.

* Added Alpine package for James

* Add packages to top of installation page

* Fix for Chris

* Telemetry fixes

* Trying to fix CI

* Changing checksums

* Fix CI checks for kickstart checksums.

The changed wording was confusing the code that parsed the checksum out
of the documentation, this fixes the code to handle this new wording
correctly.

* Update kickstart-static64 checksum

* Update 64 checksum

Co-authored-by: Austin S. Hemmelgarn <ahferroin7@gmail.com>

2 files changed, 127 insertions, 21 deletions

diff --git a/docs/generator/buildyaml.sh b/docs/generator/buildyaml.sh
index 4313b49392..b1d3d13f63 100755
--- a/docs/generator/buildyaml.sh
+++ b/docs/generator/buildyaml.sh
@@ -147,9 +147,21 @@ echo -ne "    - 'docs/what-is-netdata.md'
     - 'docs/why-netdata/immediate-results.md'
 - Installation:
     - 'packaging/installer/README.md'
-    - 'packaging/docker/README.md'
-    - 'packaging/installer/UPDATE.md'
+    - Other methods:
+        - 'packaging/installer/methods/packages.md'
+        - 'packaging/installer/methods/kickstart.md'
+        - 'packaging/installer/methods/kickstart-64.md'
+        - 'packaging/docker/README.md'
+        - 'packaging/installer/methods/macos.md'
+        - 'packaging/installer/methods/freebsd.md'
+        - 'packaging/installer/methods/manual.md'
+        - 'packaging/installer/methods/offline.md'
+        - 'packaging/installer/methods/pfsense.md'
+        - 'packaging/installer/methods/synology.md'
+        - 'packaging/installer/methods/freenas.md'
+        - 'packaging/installer/methods/alpine.md'
     - 'packaging/DISTRIBUTIONS.md'
+    - 'packaging/installer/UPDATE.md'
     - 'packaging/installer/UNINSTALL.md'
 - 'docs/getting-started.md'
 "
diff --git a/docs/generator/custom/css/netdata.css b/docs/generator/custom/css/netdata.css
index 18495df8be..63e78a2da5 100644
--- a/docs/generator/custom/css/netdata.css
+++ b/docs/generator/custom/css/netdata.css
@@ -305,12 +305,68 @@ html [data-md-color-primary="blue-grey"] .md-nav--primary .md-nav__title--site {
     margin: 0;
 }
 
+/*  Custom styling for the installation page. */
+
+.install-nav-buttons {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: space-around;
+    margin-top: 1.4rem;
+}
+
+.install-nav-buttons div {
+    flex: 1;
+    min-width: 300px;
+}
+
+.install-nav-buttons div:first-of-type {
+    flex: 1 100%;
+}
+
+.install-nav-buttons div:first-of-type .inner {
+    max-width: 400px;
+    margin: 0 auto;
+    margin-bottom: 1rem;
+}
+
+.install-nav-buttons > div:last-of-type {
+    margin-left: 2rem;
+}
+
+/*  Custom styling for the installation page. */
+
+.install-nav-buttons {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: space-around;
+    margin-top: 1.4rem;
+}
+
+.install-nav-buttons div {
+    flex: 1;
+    min-width: 300px;
+}
+
+.install-nav-buttons div:first-of-type {
+    flex: 1 100%;
+}
+
+.install-nav-buttons div:first-of-type .inner {
+    max-width: 400px;
+    margin: 0 auto;
+    margin-bottom: 1rem;
+}
+
+.install-nav-buttons > div:last-of-type {
+    margin-left: 2rem;
+}
+
 .nav-button {
     border: 2px solid black;
     border-radius: 4px;
     display: block;
     font-weight: 700;
-    margin: 0 auto;
+    margin: 0 auto -0.4rem auto;
     padding: 0.6rem 0;
     text-align: center;
 }
@@ -333,26 +389,13 @@ html [data-md-color-primary="blue-grey"] .md-nav--primary .md-nav__title--site {
     word-break: normal;
 }
 
-/* Give code blocks a little more line height */
-.md-typeset pre {
-    line-height: 1.6;
+/* Make the clipboard button a little darker. */
+.md-clipboard::before {
+    color: #546e7a;
 }
 
-/* Show line numbers. */
-[data-linenos]:before {
-    border-right: .0625rem solid #ddd;
-    color: #999;
-    content: attr(data-linenos);
-    display: inline-block;
-    margin-left: -1.2rem;
-    margin-right: .7rem;
-    padding-left: 1.2rem;
-}
-
-.md-typeset .highlight .hll {
-    display: inline;
-    margin: 0;
-    padding: 0;
+.md-clipboard:focus::before {
+    color: #546e7a;
 }
 
 /* Underline links, but not badges/icons. */
@@ -384,4 +427,55 @@ html [data-md-color-primary="blue-grey"] .md-nav--primary .md-nav__title--site {
 /* Fix the font size of admonition and details sections. */
 .md-typeset .admonition, .md-typeset details {
     font-size: 0.75rem;
+}
+
+/*
+   Installer grid
+*/
+
+/* Installation / OS and method grid */
+.installer-grid {
+    display: grid;
+    grid-template-columns: repeat(4, [col-start] 1fr);
+    grid-gap: 2rem;
+}
+
+.grid-item {
+    grid-column: span 2;
+    border-radius: 2px;
+    border: 1px solid black;
+    padding: 1rem;
+}
+
+@media only screen and (max-width:76.25em) {
+    .grid-item {
+        grid-column: span 4;
+    }
+}
+
+.md-typeset .grid-item img {
+    border: 0;
+    display: inline;
+    margin: 0 1rem 0 0;
+    max-height: 52px;
+    vertical-align: middle;
+}
+
+.grid-item h3 {
+    margin-top: 0;
+}
+
+.grid-item ul {
+    margin-bottom: 0;
+}
+
+.grid-item ul li {
+    list-style-type: disclosure-closed;
+    margin: 0;
+}
+
+.md-typeset .grid-item li a {
+    border-bottom: 0px !important;
+    text-decoration: none;
+    display: inline;
 }
\ No newline at end of file