Added navigation to overview

.vuepress/components/Ecosystem.vue

@@ -12,8 +12,15 @@
     </aside>
 
     <section class="ecosystem__modules">
-      <div class="ecosystem__module lbrycard" v-on:click="open('lbrycard')">
+      <div class="ecosystem__module lbrycard">
-        <h2 class="__title">lbrycard</h2>
+        <h2 class="__title">
+          <span v-on:click="open('lbrycard')">lbrycard</span>
+
+          <div>
+            <span v-on:click="open('lbry')">lbry</span>
+            <span v-on:click="open('applications')">applications</span>
+          </div>
+        </h2>
 
         <div class="ecosystem__module__details">
           <p>Lorem ipsum dolor sit amet consectetur adipiscing elit semper luctus praesent phasellus egestas lectus, placerat feugiat arcu dis fermentum maecenas in augue mus quisque euismod justo. Posuere senectus fermentum luctus iaculis nascetur congue enim, semper gravida egestas facilisis mus sociosqu dui metus, est augue mollis phasellus quis leo. Montes hendrerit potenti cubilia feugiat dictum vitae tellus, habitant cursus dignissim et leo morbi, aliquet proin bibendum vivamus per mattis.</p>
@@ -22,8 +29,15 @@
         </div>
       </div>
 
-      <div class="ecosystem__module lbry" v-on:click="open('lbry')">
+      <div class="ecosystem__module lbry">
-        <h2 class="__title">lbry</h2>
+        <h2 class="__title">
+          <span v-on:click="open('lbry')">lbry</span>
+
+          <div>
+            <span v-on:click="open('lbrycard')">lbrycard</span>
+            <span v-on:click="open('applications')">applications</span>
+          </div>
+        </h2>
 
         <div class="ecosystem__module__details">
           <ul>
@@ -56,8 +70,15 @@
         </div>
       </div>
 
-      <div class="ecosystem__module applications" v-on:click="open('applications')">
+      <div class="ecosystem__module applications">
-        <h2 class="__title">Applications</h2>
+        <h2 class="__title">
+          <span v-on:click="open('applications')">Applications</span>
+
+          <div>
+            <span v-on:click="open('lbry')">lbry</span>
+            <span v-on:click="open('lbrycard')">lbrycard</span>
+          </div>
+        </h2>
 
         <div class="ecosystem__module__details">
           <ul>
@@ -137,8 +158,7 @@
             break;
         }
       }
-    },
+    }
-    name: "Something"
   }
 </script>
 
@@ -171,8 +191,47 @@
 
     h2 {
       position: relative;
-      text-align: center;
       width: 100%;
+
+      > div {
+        float: right;
+        font-size: 1rem;
+        padding-top: 1.95rem;
+        position: relative;
+        text-align: right;
+
+        &::before {
+          @include font-serif;
+          top: 1rem; left: 0;
+
+          content: "explore";
+          font-size: 80%;
+          font-style: italic;
+          opacity: 0.3;
+          position: absolute;
+          text-align: right;
+          width: 100%;
+        }
+
+        span {
+          cursor: pointer;
+          display: inline-block;
+          position: relative;
+
+          &:not(:last-of-type) {
+            margin-right: 1rem;
+
+            &::after {
+              top: 0; right: -0.7rem;
+
+              color: rgba($gray, 0.3);
+              content: "/";
+              font-style: italic;
+              position: absolute;
+            }
+          }
+        }
+      }
     }
 
     &::before {
@@ -189,6 +248,11 @@
 
       h2 {
         font-size: 1.5rem;
+        text-align: center;
+
+        > div {
+          display: none;
+        }
       }
 
       .ecosystem__module__details {
@@ -308,6 +372,7 @@
 
     border: 2px dashed;
     border-radius: 50%;
+    cursor: default;
 
     &:not(:last-of-type) {
       margin-bottom: 1rem;