Working on back links to main modules

content/.vuepress/components/Ecosystem.vue

@@ -15,6 +15,14 @@
           <ul>
             <li><a href="https://github.com/lbryio/chainquery" title="chainquery source code">https://github.com/lbryio/chainquery</a></li>
           </ul>
+
+          <ul class="__parents">
+            <li class="__parent green" v-on:click="open('applications')">Applications</li>
+            <li class="__parent red" v-on:click="open('lbrycrd')">Blockchain</li>
+            <li class="__parent blue" v-on:click="open('lbry')">Data Network</li>
+          </ul>
+
+          <span class="__close" v-on:click="close()">&times;</span>
         </div>
       </div>
 
@@ -32,6 +40,8 @@
           <ul>
             <li><a href="https://github.com/lbryio/lbry-app" title="lbry-app source code">https://github.com/lbryio/lbry-app</a></li>
           </ul>
+
+          <span class="__close" v-on:click="close()">&times;</span>
         </div>
       </div>
     </aside>
@@ -222,6 +232,8 @@
           <ul>
             <li><a href="https://github.com/lbryio/lighthouse" title="lighthouse source code">https://github.com/lbryio/lighthouse</a></li>
           </ul>
+
+          <span class="__close" v-on:click="close()">&times;</span>
         </div>
       </div>
 
@@ -239,6 +251,8 @@
           <ul>
             <li><a href="https://github.com/lbryio/reflector.go" title="reflector source code">https://github.com/lbryio/reflector.go</a></li>
           </ul>
+
+          <span class="__close" v-on:click="close()">&times;</span>
         </div>
       </div>
     </aside>
@@ -250,6 +264,7 @@
     methods: {
       open (ecosystemComponentClassName) {
         document.querySelectorAll(".ecosystem__module").forEach(n => n.classList.remove("active"));
+        document.querySelectorAll(".__parent").forEach(n => n.classList.remove("active"));
         document.getElementsByClassName(ecosystemComponentClassName)[0].classList.add("active");
 
         switch (true) {
@@ -389,14 +404,17 @@
   function setSubmoduleConnectionTitle(submoduleClass) {
     if (document.getElementsByClassName(submoduleClass)[0].classList.contains("blue")) {
       document.querySelector(`.${submoduleClass} .__connection`).innerHTML = "Connection to Data Network";
+      document.querySelector(`.${submoduleClass} .__parent.blue`).className += " active";
     }
 
     if (document.getElementsByClassName(submoduleClass)[0].classList.contains("green")) {
       document.querySelector(`.${submoduleClass} .__connection`).innerHTML = "Connection to Applications";
+      document.querySelector(`.${submoduleClass} .__parent.green`).className += " active";
     }
 
     if (document.getElementsByClassName(submoduleClass)[0].classList.contains("red")) {
       document.querySelector(`.${submoduleClass} .__connection`).innerHTML = "Connection to Blockchain";
+      document.querySelector(`.${submoduleClass} .__parent.red`).className += " active";
     }
   }
 
@@ -687,6 +705,10 @@
       border-radius: 50%;
       border-style: dashed;
 
+      .ecosystem__submodule__title {
+        text-align: center;
+      }
+
       .ecosystem__submodule__description {
         display: none;
       }
@@ -704,16 +726,6 @@
       }
     }
 
-    /*
-    &.chainquery,
-    &.wallet {
-    }
-
-    &.lighthouse,
-    &.reflector {
-    }
-    */
-
     &:not(.blue):not(.green):not(.red) {
       border-color: rgba($gray, 0.3);
     }
@@ -743,11 +755,16 @@
   }
 
   .ecosystem__submodule__title {
-    text-align: center;
+    font-size: 1.15rem;
+    line-height: 1.33;
   }
 
   .ecosystem__submodule__description {
     margin-bottom: 2rem;
+
+    .__close {
+      top: 1.35rem;
+    }
   }
 
   .ecosystem__submodule__description__title {
@@ -758,6 +775,49 @@
 
 
 
+  .__parents {
+    top: 2rem; right: 4rem;
+
+    font-size: 1.15rem;
+    line-height: 1.33;
+    list-style-type: none;
+    padding-right: 1rem;
+    position: absolute;
+    z-index: 1;
+
+    &::before,
+    &::after {
+      position: absolute;
+    }
+
+    &::before {
+      top: 0.25rem; left: -3.2rem;
+
+      color: rgba($black, 0.3);
+      content: "back to";
+      font-size: 0.8rem;
+      opacity: 0.3;
+    }
+
+    &::after {
+      width: 1px; height: 100%;
+      top: 0; right: 0;
+
+      background-color: rgba($black, 0.3);
+      content: "";
+    }
+  }
+
+  .__parent {
+    &:not(.active) {
+      display: none;
+    }
+
+    &.active {
+      cursor: pointer;
+    }
+  }
+
   .__close {
     cursor: pointer;
     font-size: 2rem;

content/.vuepress/scss/pages/_page.scss

@@ -180,7 +180,7 @@
 
   p,
   ol,
-  ul:not(.feature-links):not(.overview__ecosystem__module) {
+  ul:not(.feature-links):not(.overview__ecosystem__module):not(.__parents) {
     margin-bottom: 1rem;
     position: relative;
 
@@ -196,7 +196,7 @@
   }
 
   ol,
-  ul:not(.feature-links):not(.overview__ecosystem__module) {
+  ul:not(.feature-links):not(.overview__ecosystem__module):not(.__parents) {
     padding-top: 0.5rem;
 
     li {
@@ -215,7 +215,7 @@
     padding-left: 1.6rem;
   }
 
-  ul:not(.feature-links):not(.overview__ecosystem__module) {
+  ul:not(.feature-links):not(.overview__ecosystem__module):not(.__parents) {
     padding-left: 1.25rem;
   }