Evaluating the Docsy theme - ready for review (kubeflow#303)

* Initial commit of Docsy theme.

* Moved Docsy to the themes directory.

* Updated theme config and shortcodes for Docsy theme.

* Fixed order of TOML entries - tables must go last.

* Ad nil checks for menus and footer links

This commit also bumps `netlify.toml` to a newer Hugo version, as variable overwrites needs Go 1.11. It can be made to work with older Hugo's, but ...

See gohugoio/hugo#5461

* Fix duplicated params definition

* Check in JS resources as workaround to Netlify build issue kubeflow#182 (unable to build from Hugo extended version).

* Still trying to fix the Netlify build problem.

* Netfify build issue - adding dependencies.

* Initial commit of index files to define Docsy toc.

* Added pipelines index file for Docsy toc.

* Adjusts page front matter for the 'About' section.

* Removed resources and guild modifications that were supposed to fix Netlify build issue.

* Added the package-lock JSON file needed by npm.

* Updated the package-lock JSON file updated by npm.

* Added the 'resources' directory after local 'extended' Hugo build.

* Adjusted page front matter for the 'Components' section.

* Adjusted page front matter for rest of the 'Guides' section.

* Adjusted page front matter for the 'Getting Started' section.

* Removed 'docs' menu config from config file.

* Moved top-level index page and 404 page out of kf theme into project.

* Initial version of list pages for the docs.

* Added the 'resources' directory to gitignore, as we don't want everyone updating it unless they mean to.

* Add a .gitattributes file to ignore the resources files in diffs and merge conflicts.

* Minor clarification in config comment.

* Minor fixes.

* Removed the kf theme.

* Forcing commit of resources.

* Added Kubeflow colours to top nav.

* In progress: Adding the versions menu in the top nav.

* Removed the word 'default' from the custom CSS variable definitions.

* Got the version selector working in the navbar.

* Fixed URL variable for version dropdown.

* Trying a quick fix to get Netlify to recognise updated styles.

* Didn't work. Reverting change.

* Removed unneeded CSS classes.

* Work in progress: Rebuilding the home page in Docsy.

* Work in progress: Rebuilding the home page in Docsy.

* Home page in progress: Added background image and more styling.

* Updated footer for Docsy theme.

* Changed colour of 'info' style for down-arrow on home page.

* Fixed copyright statement to match change in master.

* Moved favicons to right place so browser picks them up.

* Regenerated resources files.

* Fixed the link for editing pages in GitHub.

* In progress: styling for landing page.

* Finished styling for landing page.

* Regenerated the resources files.

* Fixed down-link on landing page.

* Improved styling of logo.

* Fixed logo styling except for mobile.

* Fixed logo styling on mobile.

* Tweaking the logo styles.

* Adding the nav CSS.

.gitattributes

@@ -0,0 +1,3 @@
+# Ignore the resources files in diffs and merge conflicts
+resources/    linguist-generated=true
+resources/    -diff -merge

.gitignore

@@ -1,4 +1,10 @@
 public/
 
+# Modules generated by node.js for CSS editing
+node_modules/
+
+# Resources directory generated by Hugo local build
+resources/
+
 # MacOS temporary files
 .DS_Store

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "docsy"]
+	path = docsy
+	url = https://github.com/google/docsy

archetypes/docs.md

@@ -4,6 +4,4 @@ description = ""
 date = {{ .Date }}
 weight = 20
 draft = false
-bref = ""
-toc = true
 +++

assets/scss/_nav.scss

@@ -0,0 +1,119 @@
+//
+// Top navbar - copied from Docsy theme and additional styling included.
+//
+
+.td-navbar-cover {
+    background: $primary;
+
+    @include media-breakpoint-up(md) {
+        background: transparent !important;
+
+        .nav-link {
+            text-shadow: 1px 1px 2px $dark;
+        }
+
+        .brand-name {
+            display: none;}
+
+    }
+
+    &.navbar-bg-onscroll .nav-link {
+        text-shadow: none;
+    }
+}
+
+.navbar-bg-onscroll {
+    background: $primary !important;
+    opacity: inherit;
+}
+
+.td-navbar {
+    background: $primary;
+    min-height: 4rem;
+    margin: 0;
+    z-index: 32;
+
+    @include media-breakpoint-up(md) {
+        position: fixed;
+        top: 0;
+        width: 100%;
+
+        .brand-name {
+            display: none;}
+    }
+
+    @include media-breakpoint-down(md) {
+        .navbar-logo {
+            display: none;}
+    }
+
+
+    .navbar-brand {
+        text-transform: none;
+        text-align: middle;
+
+        .nav-link {
+            display: inline-block;
+            margin-right: -30px;
+        }
+
+        .navbar-logo {
+            svg {
+                display: inline-block;
+                position: absolute;
+                z-index: 33;
+                margin: -32px 10px 0 10px;
+                padding: 10px;
+                height: 95px;
+                background: white;
+                border: 2px solid #4279f4;
+                border-top: none;
+            }
+        }
+    }
+
+    .nav-link {
+        text-transform: none;
+        font-weight: $font-weight-bold;
+    }
+
+    .td-search-input {
+        border: none;
+
+        @include placeholder {
+            color: $navbar-dark-color;
+        }
+    }
+
+    .dropdown {
+        min-width: 100px;
+    }
+
+    @include media-breakpoint-down(md) {
+        padding-right: .5rem;
+        padding-left: .75rem;
+
+        .td-navbar-nav-scroll {
+            max-width: 100%;
+            height: 2.5rem;
+            margin-top: .25rem;
+            overflow: hidden;
+            font-size: .875rem;
+
+            .nav-link {
+                padding-right: .25rem;
+                padding-left: 0;
+            }
+
+            .navbar-nav {
+                padding-bottom: 2rem;
+                overflow-x: auto;
+                white-space: nowrap;
+                -webkit-overflow-scrolling: touch;
+
+            }
+        }
+        .navbar-logo {
+            display: none;}
+    }
+}

assets/scss/_variables_project.scss

@@ -0,0 +1,110 @@
+/*
+
+Add styles or override the theme's variables here.
+
+*/
+
+// Theme colors
+
+$primary: #4279f4;
+$secondary: #fff;
+$dark: #213d7a;
+$info: #adb5bd;
+
+// Nav bar colors
+
+$white: #fff;
+$navbar-dark-color: rgba($white, 1);
+$navbar-dark-hover-color: rgba($white, 0.75);
+$navbar-dark-active-color: $navbar-dark-color;
+
+// Front page styling
+
+.section-head {
+  font-size: 1.25em;
+  color: $primary;
+  font-weight: bold;
+  padding: 0 0 1em 0;
+}
+
+.contain {
+  margin: 0 auto;
+  max-width: 1200px; }
+
+.image {
+  display: block; }
+  .image img {
+    display: block;
+    width: 100%;
+    height: auto; }
+  .image.left, .image.right {
+    max-width: 45%; }
+    .image.left::after, .image.right::after {
+      clear: both;
+      content: "";
+      display: block; }
+  .image.left {
+    float: left;
+    margin: 0 1.5em 1.5em 0; }
+  .image.right {
+    float: right;
+    margin: 0 0 1.5em 1.5em; }
+
+#overview {
+  border-bottom: 2px solid #b6d0ff;
+  padding: 6em 1.5em 3em 1.5em;
+  text-align: center;
+  margin: 0; }
+  #overview p {
+    font-size: 1.125em;}
+
+#pageContent .lead {
+  margin: 0 1.5em 3em 1.5em;}
+  #pageContent .lead > .image {
+    padding: 0 1.5em;
+    max-width: 60%;
+    margin-bottom: 1.5em; }
+  #pageContent .lead > .text p {
+    font-size: 1em; }
+
+@media screen and (min-width: 480px) {
+  #overview {
+    font-size: 1.125em; }
+  #pageContent .lead > .image {
+    max-width: 35%;
+    margin-bottom: 3em; }
+  #pageContent .lead > .text p {
+    font-size: 1em; } }
+
+@media screen and (min-width: 769px) {
+  #pageContent .lead {
+    margin-top: 1em;
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-direction: row;
+        flex-direction: row;
+    -ms-flex-wrap: nowrap;
+        flex-wrap: nowrap;
+    -ms-flex-pack: justify;
+        justify-content: space-between;
+    -ms-flex-align: stretch;
+        align-items: stretch; }
+    #pageContent .lead > * {
+      -ms-flex: 0 1 auto;
+          flex: 0 1 auto; }
+    #pageContent .lead > .image {
+      display: block;
+      margin: 0 auto;
+      max-width: 100%; }
+      #pageContent .lead > .image > img {
+        max-width: 80%;
+        margin: 0 auto; }
+    #pageContent .lead > .text {
+      -ms-flex-preferred-size: 70%;
+          flex-basis: 70%; }
+    #pageContent .lead:nth-child(2n+0) > .image {
+      -ms-flex-order: 2;
+          order: 2; }
+    #pageContent .lead:nth-child(2n+0) > .text {
+      -ms-flex-order: 1;
+          order: 1; } }