Overview is now responsive

.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">
+        <li class="overview__ecosystem__module__piece applications__desktop">
-        <strong class="__title">Desktop</strong>
+          <strong class="__title">Desktop</strong>
-      </li>
+        </li>
 
-      <li class="overview__ecosystem__module__piece applications__mobile">
+        <li class="overview__ecosystem__module__piece applications__mobile">
-        <strong class="__title">Mobile</strong>
+          <strong class="__title">Mobile</strong>
-      </li>
+        </li>
 
-      <li class="overview__ecosystem__module__piece applications__speech">
+        <li class="overview__ecosystem__module__piece applications__speech">
-        <strong class="__title">spee.ch</strong>
+          <strong class="__title">spee.ch</strong>
-      </li>
+        </li>
+      </div>
     </ul>
 
     <div class="overview__ecosystem__module lighthouse">

.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 {
+    @media (min-width: 1081px) {
-      transform: rotate(-90deg);
+      grid-row: 1/3;
-      transform-origin: 50% 50%;
+
+      .__title {
+        transform: rotate(-90deg);
+        transform-origin: 50% 50%;
+      }
     }
 
-    // top: 150px;
+    @media (min-width: 501px) and (max-width: 1080px) {
-
+      grid-row: 1;
-    /*
-    &::before, &::after {
-      width: 0; height: 0;
-
-      content : "";
-      left: 0;
-      position: absolute;
     }
 
-    &::before {
+    @media (min-width: 501px) {
-      border-bottom: 150px solid $red;
+      grid-column: 2;
-      border-left: 200px solid transparent;
-      top: -150px;
     }
 
-    &::after {
+    @media (max-width: 500px) {
-      border-top: 150px solid $red;
+      grid-row: 2;
-      border-right: 200px solid transparent;
-      bottom: -150px;
     }
-    */
   }
 
 
 
-  &.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 {
+    @media (min-width: 1081px) {
-      margin-bottom: 1rem; padding-top: 1rem;
+      grid-column: 4;
-
+      grid-row: 1/3;
-      color: $white;
-      display: block;
     }
-  }
 
-  &.applications__desktop,
+    @media (max-width: 1080px) {
-  &.applications__mobile,
+      padding-top: 1rem;
-  &.applications__speech {
+      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%;