From 1c9ea16f1187a09e621c8372d9c5e14e820d32cd 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: Mon, 28 May 2018 11:40:05 -0500
Subject: [PATCH] V2 of overview

---
 .vuepress/components/Ecosystem.vue  | 121 ++++++++++++------
 .vuepress/scss/pages/_overview.scss | 184 +++++++++++++---------------
 .vuepress/scss/pages/_page.scss     |   2 +-
 3 files changed, 171 insertions(+), 136 deletions(-)

diff --git a/.vuepress/components/Ecosystem.vue b/.vuepress/components/Ecosystem.vue
index 5263fc0..47376aa 100644
--- a/.vuepress/components/Ecosystem.vue
+++ b/.vuepress/components/Ecosystem.vue
@@ -1,52 +1,101 @@
 <template>
 
   <section class="overview__ecosystem">
-    <div class="overview__ecosystem__module lbrycard">
-      <strong class="__title">lbrycard</strong>
-    </div>
+    <div class="overview__ecosystem__module lbrycard" v-on:click="open('lbrycard')">
+      <h2 class="__title">lbrycard</h2>
 
-    <div class="overview__ecosystem__module lbryschema">
-      <strong class="__title">lbryschema</strong>
-    </div>
+      <div class="overview__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>
 
-    <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">
-      <div>
-        <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>
+        <p>Vel nisi hendrerit id tristique congue tortor nisl luctus, vulputate sem ridiculus inceptos et at torquent feugiat, mus cursus lobortis aenean senectus posuere odio. Imperdiet nascetur dapibus eget convallis ante donec iaculis dictumst mi est, venenatis quisque integer etiam justo id aliquet non diam semper erat, blandit quis lectus ac aptent magna cubilia augue laoreet. Mollis luctus pharetra nisl auctor potenti magna penatibus cras, justo lobortis iaculis porta a vel habitasse vulputate, taciti sociis arcu facilisis duis orci aliquam.</p>
       </div>
-    </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 class="overview__ecosystem__module lbry" v-on:click="open('lbry')">
+      <h2 class="__title">lbry</h2>
+
+      <div class="overview__ecosystem__module__details">
+        <ul>
+          <li>
+            <strong class="__title">lbryschema</strong>
+
+            <p>Vel nisi hendrerit id tristique congue tortor nisl luctus, vulputate sem ridiculus inceptos et at torquent feugiat, mus cursus lobortis aenean senectus posuere odio. Imperdiet nascetur dapibus eget convallis ante donec iaculis dictumst mi est, venenatis quisque integer etiam justo id aliquet non diam semper erat, blandit quis lectus ac aptent magna cubilia augue laoreet. Mollis luctus pharetra nisl auctor potenti magna penatibus cras, justo lobortis iaculis porta a vel habitasse vulputate, taciti sociis arcu facilisis duis orci aliquam.</p>
+
+            <ul>
+              <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
+              <li>Himenaeos purus facilisi litora suspendisse molestie, cubilia maecenas faucibus vivamus.</li>
+              <li>Nisi sociosqu interdum augue condimentum vivamus, ac leo feugiat.</li>
+              <li>Justo eu neque aenean nec sagittis, cubilia magnis arcu.</li>
+            </ul>
+          </li>
+
+          <li>
+            <strong class="__title">lbryumx</strong>
+
+            <p>Vel nisi hendrerit id tristique congue tortor nisl luctus, vulputate sem ridiculus inceptos et at torquent feugiat, mus cursus lobortis aenean senectus posuere odio. Imperdiet nascetur dapibus eget convallis ante donec iaculis dictumst mi est, venenatis quisque integer etiam justo id aliquet non diam semper erat, blandit quis lectus ac aptent magna cubilia augue laoreet. Mollis luctus pharetra nisl auctor potenti magna penatibus cras, justo lobortis iaculis porta a vel habitasse vulputate, taciti sociis arcu facilisis duis orci aliquam.</p>
+
+            <ul>
+              <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
+              <li>Himenaeos purus facilisi litora suspendisse molestie, cubilia maecenas faucibus vivamus.</li>
+              <li>Nisi sociosqu interdum augue condimentum vivamus, ac leo feugiat.</li>
+              <li>Justo eu neque aenean nec sagittis, cubilia magnis arcu.</li>
+            </ul>
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="overview__ecosystem__module applications" v-on:click="open('applications')">
+      <h2 class="__title">Applications</h2>
+
+      <div class="overview__ecosystem__module__details">
+        <ul>
+          <li>
+            <strong class="__title">Desktop</strong>
+            <p>Vel nisi hendrerit id tristique congue tortor nisl luctus, vulputate sem ridiculus inceptos et at torquent feugiat, mus cursus lobortis aenean senectus posuere odio. Imperdiet nascetur dapibus eget convallis ante donec iaculis dictumst mi est, venenatis quisque integer etiam justo id aliquet non diam semper erat, blandit quis lectus ac aptent magna cubilia augue laoreet. Mollis luctus pharetra nisl auctor potenti magna penatibus cras, justo lobortis iaculis porta a vel habitasse vulputate, taciti sociis arcu facilisis duis orci aliquam.</p>
+          </li>
+
+          <li>
+            <strong class="__title">Mobile</strong>
+            <p>Vel nisi hendrerit id tristique congue tortor nisl luctus, vulputate sem ridiculus inceptos et at torquent feugiat, mus cursus lobortis aenean senectus posuere odio. Imperdiet nascetur dapibus eget convallis ante donec iaculis dictumst mi est, venenatis quisque integer etiam justo id aliquet non diam semper erat, blandit quis lectus ac aptent magna cubilia augue laoreet. Mollis luctus pharetra nisl auctor potenti magna penatibus cras, justo lobortis iaculis porta a vel habitasse vulputate, taciti sociis arcu facilisis duis orci aliquam.</p>
+          </li>
+
+          <li>
+            <strong class="__title">spee.ch</strong>
+            <p>Vel nisi hendrerit id tristique congue tortor nisl luctus, vulputate sem ridiculus inceptos et at torquent feugiat, mus cursus lobortis aenean senectus posuere odio. Imperdiet nascetur dapibus eget convallis ante donec iaculis dictumst mi est, venenatis quisque integer etiam justo id aliquet non diam semper erat, blandit quis lectus ac aptent magna cubilia augue laoreet. Mollis luctus pharetra nisl auctor potenti magna penatibus cras, justo lobortis iaculis porta a vel habitasse vulputate, taciti sociis arcu facilisis duis orci aliquam.</p>
+          </li>
+
+          <li>
+            <strong class="__title">Lighthouse</strong>
+            <p>Vel nisi hendrerit id tristique congue tortor nisl luctus, vulputate sem ridiculus inceptos et at torquent feugiat, mus cursus lobortis aenean senectus posuere odio. Imperdiet nascetur dapibus eget convallis ante donec iaculis dictumst mi est, venenatis quisque integer etiam justo id aliquet non diam semper erat, blandit quis lectus ac aptent magna cubilia augue laoreet. Mollis luctus pharetra nisl auctor potenti magna penatibus cras, justo lobortis iaculis porta a vel habitasse vulputate, taciti sociis arcu facilisis duis orci aliquam.</p>
+          </li>
+
+          <li>
+            <strong class="__title">chainquery</strong>
+            <p>Vel nisi hendrerit id tristique congue tortor nisl luctus, vulputate sem ridiculus inceptos et at torquent feugiat, mus cursus lobortis aenean senectus posuere odio. Imperdiet nascetur dapibus eget convallis ante donec iaculis dictumst mi est, venenatis quisque integer etiam justo id aliquet non diam semper erat, blandit quis lectus ac aptent magna cubilia augue laoreet. Mollis luctus pharetra nisl auctor potenti magna penatibus cras, justo lobortis iaculis porta a vel habitasse vulputate, taciti sociis arcu facilisis duis orci aliquam.</p>
+          </li>
+        </ul>
+      </div>
     </div>
   </section>
 
 </template>
 
-
+<script>
+  export default {
+    data () {
+      return {
+      }
+    },
+    methods: {
+      open (ecosystemComponentClassName) {
+        document.querySelectorAll(".overview__ecosystem__module").forEach(n => n.classList.remove("active"));
+        document.getElementsByClassName(ecosystemComponentClassName)[0].classList.add("active");
+      }
+    },
+    name: "Something"
+  }
+</script>
 
 <style lang="scss">
   @import "../scss/init/colors";
diff --git a/.vuepress/scss/pages/_overview.scss b/.vuepress/scss/pages/_overview.scss
index ebb235a..7ab59ef 100644
--- a/.vuepress/scss/pages/_overview.scss
+++ b/.vuepress/scss/pages/_overview.scss
@@ -3,135 +3,118 @@
 
 .overview__ecosystem {
   margin-bottom: 2rem; padding-top: 1rem;
-
-  display: grid;
-  grid-gap: 2rem;
   font-size: 1rem;
 
-  @media (min-width: 1081px) {
-    grid-template-columns: auto 5% 144px auto 144px;
+  @media (min-width: 701px) {
+    justify-content: space-evenly;
+  }
+
+  @media (max-width: 700px) {
+    justify-content: space-between;
+  }
+
+  @media (min-width: 551px) {
+    display: flex;
   }
 }
 
 
 
 .overview__ecosystem__module {
-  min-height: 144px;
+  > * {
+    z-index: 1;
+  }
+
+  @media (max-width: 550px) {
+    &:not(:last-of-type) {
+      margin-bottom: 2rem;
+    }
+  }
 
   &.lbrycard,
-  &.lbryschema,
-  &.lbryumx,
   &.lbry,
-  &.lighthouse,
-  &.chainquery {
-    @include center;
+  &.applications {
+    position: relative;
 
-    .__title {
-      color: $white;
-      font-size: 1rem;
+    &::after {
+      top: 0; left: 0;
+
+      content: "";
+      position: absolute;
+      transition: all 0.2s;
+      z-index: -1;
+    }
+
+    &:not(.active) {
+      height: 144px;
+
+      @media (min-width: 551px) {
+        @include center;
+        min-width: 144px;
+      }
+
+      @media (max-width: 550px) {
+        align-items: center;
+        display: flex;
+        justify-content: center;
+        margin-right: auto;
+        margin-left: auto;
+        width: 144px;
+      }
+
+      h2 {
+        font-size: 1rem;
+      }
+
+      .overview__ecosystem__module__details {
+        display: none;
+      }
+    }
+
+    &.active {
+      padding: 2rem;
+
+      h2 {
+        font-size: 3rem;
+        margin-bottom: 1rem;
+      }
     }
   }
 
 
 
   &.lbrycard {
-    background-color: $black;
+    color: $white;
 
-    @media (min-width: 1081px) {
-      grid-row: 1/3;
-    }
-
-    @media (max-width: 1080px) {
-      grid-row: 1;
-    }
-
-    @media (min-width: 501px) {
-      grid-column: 1;
-    }
-  }
-
-  &.lbryschema {
-    background-color: $red;
-    position: relative;
-
-    @media (min-width: 1081px) {
-      grid-row: 1/3;
-
-      .__title {
-        transform: rotate(-90deg);
-        transform-origin: 50% 50%;
-      }
-    }
-
-    @media (min-width: 501px) and (max-width: 1080px) {
-      grid-row: 1;
-    }
-
-    @media (min-width: 501px) {
-      grid-column: 2;
-    }
-
-    @media (max-width: 500px) {
-      grid-row: 2;
-    }
-  }
-
-
-
-  &.lbryumx {
-    background-color: $blue;
-    border-radius: 50%;
-
-    @media (min-width: 1081px) {
-      grid-column: 3;
-      grid-row: 1;
-    }
-
-    @media (max-width: 1080px) {
-      grid-row: 3;
-      margin-right: auto;
-      margin-left: auto;
-      width: 144px;
-    }
-
-    @media (min-width: 501px) and (max-width: 1080px) {
-      grid-column: 2;
-    }
-
-    @media (max-width: 500px) {
-      grid-row: 4;
+    &::after {
+      width: 100%; height: 100%;
+      background-color: $black;
     }
   }
 
   &.lbry {
-    background-color: $green;
-
-    @media (min-width: 1081px) {
-      grid-column: 3;
-      grid-row: 2;
+    &::after {
+      width: 100%; height: 100%;
+      background-color: $teal;
     }
 
-    @media (max-width: 1080px) {
-      grid-row: 3;
-    }
-
-    @media (min-width: 501px) and (max-width: 1080px) {
-      grid-column: 1;
-    }
-
-    @media (max-width: 500px) {
-      grid-row: 3;
+    &:not(.active)::after {
+      border-radius: 50%;
     }
   }
 
-
-
   &.applications {
-    @include center;
-    background-color: $violet;
-    list-style-type: none;
-    text-align: center;
+    &::after {
+      width: 100%; height: 100%;
+      background-color: $yellow;
+    }
 
+    &:not(.active)::after {
+      border-top-right-radius: 20%;
+      border-bottom-left-radius: 20%;
+    }
+
+    /*
     @media (min-width: 1081px) {
       grid-column: 4;
       grid-row: 1/3;
@@ -160,10 +143,12 @@
         margin-bottom: 1rem;
       }
     }
+    */
   }
 
 
 
+  /*
   &.lighthouse {
     background-color: $pink;
     border-radius: 50%;
@@ -213,6 +198,7 @@
       grid-row: 7;
     }
   }
+  */
 }
 
 
diff --git a/.vuepress/scss/pages/_page.scss b/.vuepress/scss/pages/_page.scss
index eed16bd..e924e76 100644
--- a/.vuepress/scss/pages/_page.scss
+++ b/.vuepress/scss/pages/_page.scss
@@ -68,7 +68,7 @@
     }
   }
 
-  h2 {
+  h2:not(.__title) {
     @media (min-width: 901px) {
       font-size: 2rem;
     }