#2327 - docs navigation changes to improve usability

packages/composer-website/jekylldocs/_includes/sidebars/accordion-toc0.md

@@ -3,7 +3,7 @@
 {% if page.index-order %}
 {% capture mods %}{{ page.index-order | modulo:100 }}{% endcapture %}
 {% if mods == "0" and page.exception == nil %}
-- [{{ page.title }}](..{{page.url}}.html)
+- [<b>{{ page.title }}</b><img src="{{site.baseurl}}/assets/img/chevron-left.svg" class="caret">](..{{page.url}}.html)
 {% elsif mods != "0" and page.exception == nil %}
   - [{{page.title}}](..{{page.url}}.html)
 {% endif %}

packages/composer-website/jekylldocs/assets/css/404.css

@@ -1,78 +1,70 @@
-::selection {
-  background: #b3d4fc;
-  text-shadow: none;
-}
-
+@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600");
 html {
-  background: #000;
-  font-family: 'Roboto', sans-serif;
-  font-size: 1em;
-  line-height: 1.4;
-  color: #fff;
+  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  height: 100%;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 body {
-  background: #000;
-  color: #fff;
-}
-
-a {
-  color: #0096c7;
-}
-
-a:hover {
-  text-decoration: none;
+  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  padding-bottom: 0;
 }
 
-.container {
-  overflow: hidden;
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 0 1em;
+h1 {
+  font-family: "Open Sans";
+  font-weight: 300;
+  font-size: 2.50rem;
+  color: #3F55AF;
+  margin-bottom: 0rem;
 }
 
-h1 {
-  margin: 0 0 1em;
-  font-family: 'Roboto Slab', serif;
-  font-size: 2em;
-  line-height: 1.2em;
+h2 {
+  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: 300;
+  font-size: 1.35rem;
+  line-height: 130%;
+  color: #3F55AF;
 }
 
 p {
-  margin: 1em 0;
+  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  color: #19273C;
+  font-weight: 400;
+  font-size: 0.9rem;
 }
 
-ul {
-  padding: 0 0 0 2em;
-  margin: 1em 0;
+.content-chunk {
+  height: 94vh;
+  background-color: rgba(241, 243, 247, 0.5);
+  border-radius: 5px;
+  margin: 2rem;
 }
 
-.yeoman {
-  display: block;
-  max-width: 80%;
-  margin: 0 auto 1em;
+.content-chunk .pageproblem-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
 }
 
-@media only screen and (min-width: 50em) {
-  .yeoman {
-    float: left;
-    width: 45%;
-    max-width: 429px;
-  }
-
-  .info {
-    float: left;
-    width: 55%;
-    padding-top: 10em;
-  }
+.content-chunk .pageproblem-container .pageproblem-info {
+  display: inline-block;
+  vertical-align: top;
+  text-align: left;
+}
 
-  h1 {
-    font-size: 2.5em;
-  }
+.content-chunk .pageproblem-container .pageproblem-info a {
+  text-decoration: none;
+  border-bottom: 1px solid #19273C;
+  color: #19273C;
+  transition: all 0.2s ease-in-out;
 }
 
-@media only screen and (min-width: 60em) {
-  h1 {
-    font-size: 3em;
-  }
+.content-chunk .pageproblem-container .pageproblem-info a:hover {
+  border-bottom: 1px solid #19273C;
+  padding-bottom: 3px;
 }

packages/composer-website/jekylldocs/assets/css/grid-layout.scss

@@ -43,14 +43,14 @@ $callout: #FFD640;
     justify-items: start;
     overflow-y: scroll;
     height: 100vh;
+    background-color: #f7f2f0;
 
     // Scrollbar overrides
     &::-webkit-scrollbar {
       display: none;
     }
     -ms-overflow-style: none;  // IE 10+
 
-
     .docs-pagenav-grid {
       padding-top: 5vh;
 
@@ -100,21 +100,20 @@ $callout: #FFD640;
     }
 
     .context-nav {
-      // margin-top: 5vh;
 
       ul {
         padding-left: 0;
         margin: 0;
-        // margin-left: 1rem;
 
       li {
         list-style: none;
-        border-bottom: 1px solid $keyline-highlight;
         position: relative;
         overflow: hidden;
         transition: 0.4s;
+        background-color: $white;
         &.hide {
             height: 4rem !important;
+            background-color: #f7f2f0;
         }
         &:hover {
           border-right: 0px solid $first-highlight;
@@ -124,20 +123,18 @@ $callout: #FFD640;
               top: 0;
               right: 0px;
               bottom: 0;
-              width: 2px;
               background-color: $first-highlight;
           }
         }
         &.active {
           height: auto !important;
-          border-left-color: $first-highlight;
+          border-left-color: $black;
           &:after {
               content: " ";
               position: absolute;
               top: 0;
               right: 0px;
               bottom: 0;
-              width: 2px;
               background-color: $first-highlight;
           }
         }
@@ -152,12 +149,11 @@ $callout: #FFD640;
           }
         }
 
-
         ul {
           list-style: none;
           padding-left: 0;
           margin: 0;
-          margin-left: 2rem;
+          margin-left: 0rem;
           margin-top: 1rem;
           padding-bottom: 2rem;
           &:hover {
@@ -167,24 +163,30 @@ $callout: #FFD640;
                 top: 0;
                 right: 0px;
                 bottom: 0;
-                width: 2px;
                 background-color: $first-highlight;
             }
-            // &:after {
-            //     display: none;
-            // }
           }
 
           li {
             border-bottom: none;
-            border-left: 2px solid $keyline-highlight;
+            border-left: 6px solid $white;
             &:hover {
-              border-left: 2px solid $first-highlight;
+              border-left: 6px solid $black;
               border-right: none;
             }
           }
         }
       }
+
+      .caret {
+        float: right;
+        width: 13px;
+        height: 13px;
+        &.hidden {
+          visibility: hidden;
+        }
+      }
+
     }
 
       a {
@@ -211,6 +213,7 @@ $callout: #FFD640;
           li {
             border-bottom: none;
             padding: 0;
+            background-color: #f7f2f0 !important;
 
             &:hover {
               border-right: none;
@@ -309,8 +312,6 @@ $callout: #FFD640;
 
           blockquote {
             background-color: white;
-            // border: 1px solid $keyline-highlight;
-            // border-radius: 4px;
             padding: 1rem;
             padding-left: 2rem;
             margin-left: 0;
@@ -320,7 +321,6 @@ $callout: #FFD640;
 
           pre {
             background-color: #272B36;
-            // border: 1px solid $keyline-highlight;
             padding: 1rem;
             color: white;
             border-radius: 4px;
@@ -447,10 +447,8 @@ $callout: #FFD640;
           thead {
             font-weight: 600;
             padding-bottom: 1rem;
-            // border-bottom: 1px solid blue;
           }
           tbody {
-            // display: block;
             tr {
               transition: 0.4s cubic-bezier(0.075, 0.820, 0.165, 1.000);
               &:last-of-type {
@@ -683,11 +681,13 @@ copy-button {
     font-size: 0.9rem;
     line-height: 30px;
     border-bottom: 2px solid transparent;
+    background-color: #f7f2f0;
 
     &.opened {
       max-width: 70%;
       border-bottom: 2px solid $primary-text;
       padding-left: 0.8rem;
+      background-color: $white;
 
 
       &:focus {
@@ -718,7 +718,6 @@ copy-button {
 
   .trigger {
     width: 18px;
-    // height: 18px;
   }
 
   .submit-input {