From 26ae22b4ad84ea3c74f4cef4dca9377973a73367 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=83=9D=E3=83=BC=E3=83=AB=20=E3=82=A6=E3=82=A7=E3=83=83?=
 =?UTF-8?q?=E3=83=96?= <netopwibby@thenetwork.email>
Date: Tue, 29 May 2018 16:01:06 -0500
Subject: [PATCH] Added navigation to overview

---
 .vuepress/components/Ecosystem.vue | 83 ++++++++++++++++++++++++++----
 1 file changed, 74 insertions(+), 9 deletions(-)

diff --git a/.vuepress/components/Ecosystem.vue b/.vuepress/components/Ecosystem.vue
index 8f2e2b6..c537220 100644
--- a/.vuepress/components/Ecosystem.vue
+++ b/.vuepress/components/Ecosystem.vue
@@ -12,8 +12,15 @@
     </aside>
 
     <section class="ecosystem__modules">
-      <div class="ecosystem__module lbrycard" v-on:click="open('lbrycard')">
-        <h2 class="__title">lbrycard</h2>
+      <div class="ecosystem__module lbrycard">
+        <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')">
-        <h2 class="__title">lbry</h2>
+      <div class="ecosystem__module lbry">
+        <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')">
-        <h2 class="__title">Applications</h2>
+      <div class="ecosystem__module applications">
+        <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;