Basic structure for lbry overview

.vuepress/components/Ecosystem.vue

@@ -0,0 +1,53 @@
+<template>
+
+  <section class="overview__ecosystem">
+    <div class="overview__ecosystem__module lbrycard">
+      <strong class="__title">lbrycard</strong>
+    </div>
+
+    <div class="overview__ecosystem__module lbryschema">
+      <strong class="__title">lbryschema</strong>
+    </div>
+
+    <div class="overview__ecosystem__module lbryumx">
+      <strong class="__title">lbryumx</strong>
+    </div>
+
+    <div class="overview__ecosystem__module lbry">
+      <strong class="__title">lbry</strong>
+    </div>
+
+    <ul class="overview__ecosystem__module applications">
+      <strong class="__title">Applications</strong>
+
+      <li class="overview__ecosystem__module__piece applications__desktop">
+        <strong class="__title">Desktop</strong>
+      </li>
+
+      <li class="overview__ecosystem__module__piece applications__mobile">
+        <strong class="__title">Mobile</strong>
+      </li>
+
+      <li class="overview__ecosystem__module__piece applications__speech">
+        <strong class="__title">spee.ch</strong>
+      </li>
+    </ul>
+
+    <div class="overview__ecosystem__module lighthouse">
+      <strong class="__title">Lighthouse</strong>
+    </div>
+
+    <div class="overview__ecosystem__module chainquery">
+      <strong class="__title">chainquery</strong>
+    </div>
+  </section>
+
+</template>
+
+
+
+<style lang="scss">
+  @import "../scss/init/colors";
+  @import "../scss/init/mixins";
+  @import "../scss/pages/overview";
+</style>

.vuepress/scss/pages/_overview.scss

@@ -0,0 +1,140 @@
+.overview {
+}
+
+.overview__ecosystem {
+  display: grid;
+  grid-gap: 2rem;
+  grid-template-areas: "lbrycard lbryschema lbryumx lbry applications lighthouse chainquery";
+  grid-template-columns: auto 5% 180px auto auto 180px 180px;
+  font-size: 1rem;
+  margin-bottom: 2rem;
+}
+
+
+
+.overview__ecosystem__module {
+  min-height: 144px;
+
+  &.lbrycard,
+  &.lbryschema,
+  &.lbryumx,
+  &.lbry,
+  &.lighthouse,
+  &.chainquery {
+    @include center;
+
+    .__title {
+      color: $white;
+      font-size: 1rem;
+    }
+  }
+
+
+
+  &.lbrycard {
+    background-color: $black;
+  }
+
+  &.lbryschema {
+    background-color: $red;
+    position: relative;
+
+    .__title {
+      transform: rotate(-90deg);
+      transform-origin: 50% 50%;
+    }
+
+    // top: 150px;
+
+    /*
+    &::before, &::after {
+      width: 0; height: 0;
+
+      content : "";
+      left: 0;
+      position: absolute;
+    }
+
+    &::before {
+      border-bottom: 150px solid $red;
+      border-left: 200px solid transparent;
+      top: -150px;
+    }
+
+    &::after {
+      border-top: 150px solid $red;
+      border-right: 200px solid transparent;
+      bottom: -150px;
+    }
+    */
+  }
+
+
+
+  &.lbryumx,
+  &.lbry {
+  }
+
+  &.lbryumx {
+    background-color: $blue;
+    border-radius: 50%;
+  }
+
+  &.lbry {
+    background-color: $green;
+  }
+
+
+
+  &.applications {
+    background-color: $violet;
+    list-style-type: none;
+    padding-bottom: 1rem;
+    text-align: center;
+
+    > .__title {
+      margin-bottom: 1rem; padding-top: 1rem;
+
+      color: $white;
+      display: block;
+    }
+  }
+
+  &.applications__desktop,
+  &.applications__mobile,
+  &.applications__speech {
+  }
+
+  &.applications__desktop {
+  }
+
+  &.applications__mobile {
+  }
+
+  &.applications__speech {
+  }
+
+
+
+  &.lighthouse {
+    background-color: $pink;
+    border-radius: 50%;
+  }
+
+  &.chainquery {
+    background-color: $orange;
+    border-radius: 50%;
+  }
+}
+
+.overview__ecosystem__module__piece {
+  background-color: $white;
+  left: 10%;
+  line-height: 2;
+  position: relative;
+  width: 80%;
+
+  &:not(:last-of-type) {
+    margin-bottom: 0.5rem;
+  }
+}

.vuepress/scss/pages/_page.scss

@@ -113,7 +113,7 @@
     font-size: 1rem;
   }
 
-  p, ol, ul, table {
+  p, ol, ul:not(.overview__ecosystem__module), table {
     code {
       background-color: $black;
       border-radius: 3px;
@@ -130,7 +130,7 @@
     }
   }
 
-  p, ol, ul {
+  p, ol, ul:not(.overview__ecosystem__module) {
     position: relative;
 
     @media (min-width: 901px) {
@@ -144,7 +144,7 @@
     }
   }
 
-  ol, ul {
+  ol, ul:not(.overview__ecosystem__module) {
     padding-top: 0.5rem;
 
     li {
@@ -163,7 +163,7 @@
     padding-left: 1.6rem;
   }
 
-  ul {
+  ul:not(.overview__ecosystem__module) {
     padding-left: 1.25rem;
   }
 

overview/index.md

@@ -26,9 +26,7 @@ That's a fancy sentence, so here's a plainer one: we just thought it'd be really
 
 ## LBRY Basics
 
-<figure>
+<Ecosystem></Ecosystem>
-  <img src="https://cdn.rawgit.com/lbryio/lbry.tech/b7dd5fe2/.vuepress/media/images/lbry-overview.png" alt="LBRY Overview"/>
-</figure>
 
 ## What's Next?