From d8e316d9fd7446acf7734c98b7188db18f05ddaf 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: Fri, 25 May 2018 16:55:03 -0500
Subject: [PATCH] Overview is now responsive

---
 .vuepress/components/Ecosystem.vue  |  22 ++--
 .vuepress/scss/pages/_overview.scss | 178 +++++++++++++++++++++-------
 2 files changed, 146 insertions(+), 54 deletions(-)

diff --git a/.vuepress/components/Ecosystem.vue b/.vuepress/components/Ecosystem.vue
index 5b4836b..5263fc0 100644
--- a/.vuepress/components/Ecosystem.vue
+++ b/.vuepress/components/Ecosystem.vue
@@ -18,19 +18,21 @@
     </div>
 
     <ul class="overview__ecosystem__module applications">
-      <strong class="__title">Applications</strong>
+      <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__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__mobile">
+          <strong class="__title">Mobile</strong>
+        </li>
 
-      <li class="overview__ecosystem__module__piece applications__speech">
-        <strong class="__title">spee.ch</strong>
-      </li>
+        <li class="overview__ecosystem__module__piece applications__speech">
+          <strong class="__title">spee.ch</strong>
+        </li>
+      </div>
     </ul>
 
     <div class="overview__ecosystem__module lighthouse">
diff --git a/.vuepress/scss/pages/_overview.scss b/.vuepress/scss/pages/_overview.scss
index 65555de..ebb235a 100644
--- a/.vuepress/scss/pages/_overview.scss
+++ b/.vuepress/scss/pages/_overview.scss
@@ -2,12 +2,15 @@
 }
 
 .overview__ecosystem {
+  margin-bottom: 2rem; padding-top: 1rem;
+
   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;
+
+  @media (min-width: 1081px) {
+    grid-template-columns: auto 5% 144px auto 144px;
+  }
 }
 
 
@@ -33,85 +36,130 @@
 
   &.lbrycard {
     background-color: $black;
+
+    @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;
 
-    .__title {
-      transform: rotate(-90deg);
-      transform-origin: 50% 50%;
+    @media (min-width: 1081px) {
+      grid-row: 1/3;
+
+      .__title {
+        transform: rotate(-90deg);
+        transform-origin: 50% 50%;
+      }
     }
 
-    // top: 150px;
-
-    /*
-    &::before, &::after {
-      width: 0; height: 0;
-
-      content : "";
-      left: 0;
-      position: absolute;
+    @media (min-width: 501px) and (max-width: 1080px) {
+      grid-row: 1;
     }
 
-    &::before {
-      border-bottom: 150px solid $red;
-      border-left: 200px solid transparent;
-      top: -150px;
+    @media (min-width: 501px) {
+      grid-column: 2;
     }
 
-    &::after {
-      border-top: 150px solid $red;
-      border-right: 200px solid transparent;
-      bottom: -150px;
+    @media (max-width: 500px) {
+      grid-row: 2;
     }
-    */
   }
 
 
 
-  &.lbryumx,
-  &.lbry {
-  }
-
   &.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;
+    }
   }
 
   &.lbry {
     background-color: $green;
+
+    @media (min-width: 1081px) {
+      grid-column: 3;
+      grid-row: 2;
+    }
+
+    @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;
+    }
   }
 
 
 
   &.applications {
+    @include center;
     background-color: $violet;
     list-style-type: none;
-    padding-bottom: 1rem;
     text-align: center;
 
-    > .__title {
-      margin-bottom: 1rem; padding-top: 1rem;
-
-      color: $white;
-      display: block;
+    @media (min-width: 1081px) {
+      grid-column: 4;
+      grid-row: 1/3;
     }
-  }
 
-  &.applications__desktop,
-  &.applications__mobile,
-  &.applications__speech {
-  }
+    @media (max-width: 1080px) {
+      padding-top: 1rem;
+      padding-bottom: 2rem;
+    }
 
-  &.applications__desktop {
-  }
+    @media (min-width: 501px) and (max-width: 1080px) {
+      grid-row: 4;
+      grid-column: 1/3;
+    }
 
-  &.applications__mobile {
-  }
+    @media (max-width: 500px) {
+      grid-row: 5;
+    }
 
-  &.applications__speech {
+    > div {
+      width: 100%;
+
+      > .__title {
+        color: $white;
+        display: block;
+        margin-bottom: 1rem;
+      }
+    }
   }
 
 
@@ -119,14 +167,56 @@
   &.lighthouse {
     background-color: $pink;
     border-radius: 50%;
+
+    @media (min-width: 1081px) {
+      grid-column: 5;
+      grid-row: 1;
+    }
+
+    @media (max-width: 1080px) {
+      margin-right: auto;
+      margin-left: auto;
+      width: 144px;
+    }
+
+    @media (min-width: 501px) and (max-width: 1080px) {
+      grid-column: 1;
+      grid-row: 5;
+    }
+
+    @media (max-width: 500px) {
+      grid-row: 6;
+    }
   }
 
   &.chainquery {
     background-color: $orange;
     border-radius: 50%;
+
+    @media (min-width: 1081px) {
+      grid-column: 5;
+      grid-row: 2;
+    }
+
+    @media (max-width: 1080px) {
+      margin-right: auto;
+      margin-left: auto;
+      width: 144px;
+    }
+
+    @media (min-width: 501px) and (max-width: 1080px) {
+      grid-column: 2;
+      grid-row: 5;
+    }
+
+    @media (max-width: 500px) {
+      grid-row: 7;
+    }
   }
 }
 
+
+
 .overview__ecosystem__module__piece {
   background-color: $white;
   left: 10%;