Align with into and links to other parts (#90)

* Align with into and links to other parts

* Bump deps

docs/.vuepress/config.js

@@ -1,16 +1,26 @@
 module.exports = {
   base: '/ui/',
   title: 'polkadot-js/ui',
-  description: 'UI libraries and utilities in-use accross @polkadot projects',
+  description: 'UI utilities, libraries and React components in use accross @polkadot projects',
   markdown: {
     lineNumbers: true
   },
   themeConfig: {
     displayAllHeaders: true,
-    lastUpdated: 'Last Updated',
     nav: [
+      { text: 'Polkadot/Substrate Apps', link: 'https://polkadot.js.org/apps/' },
+      { text: 'Project family', link: 'https://polkadot.js.org/' },
+      {
+        text: 'Documentation',
+        items: [
+          { text: 'API Reference', link: 'https://polkadot.js.org/api/' },
+          { text: 'Utility Reference', link: 'https://polkadot.js.org/common/' },
+          { text: 'UI Libs Reference (this)', link: 'https://polkadot.js.org/ui/' },
+        ]
+      },
       { text: 'GitHub', link: 'https://github.com/polkadot-js/ui' }
     ],
+    search: false,
     sidebar: [
       ['/ui-identicon/', '@polkadot/ui-identicon'],
       ['/ui-keyring/', '@polkadot/ui-keyring'],

docs/.vuepress/styles/palette.styl

@@ -1 +1,9 @@
 $accentColor = #fd8824
+$textColor = #2c3e50
+
+.home .hero .description,
+.home .feature h2,
+.home .feature p {
+  color: $textColor
+  opacity: 0.75
+}