feat(extend): ui cleanup / mobile

fictionco · Mar 19, 2020 · 0ca0e02 · 0ca0e02
1 parent e8f677c
commit 0ca0e02
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 74 deletions.
diff --git a/@apps/factor/src/extend/grid-plugin.vue b/@apps/factor/src/extend/grid-plugin.vue
@@ -71,14 +71,8 @@ export default Vue.extend({
     }
     .extend-icon {
       width: 80px;
-      // position: absolute;
-      // right: 1rem;
-      // bottom: -1rem;
       background: #fff;
-      //border: 3px solid #fff;
       border-radius: 50%;
-      // box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.07), 0px 2px 3px rgba(50, 50, 93, 0.13),
-      //   0px 2px 5px rgba(50, 50, 93, 0.11);
     }
   }
 

diff --git a/@apps/factor/src/extend/grid-theme.vue b/@apps/factor/src/extend/grid-theme.vue
@@ -139,34 +139,17 @@ export default Vue.extend({
       }
     }
     @media (max-width: 900px) {
-      padding: 50% 0;
+      padding: 80% 0 0;
       .entry-content {
+        position: relative;
         transform: translateY(0%);
+        .action {
+          .btn-link + .btn-link {
+            margin-top: 1rem;
+          }
+        }
       }
     }
   }
-
-  .entry-images {
-    position: relative;
-    max-width: 100%;
-    img {
-      max-width: 100%;
-    }
-    .screenshot {
-      box-shadow: 0px 0px 3px rgba(50, 50, 93, 0.2);
-      transition: 0.29s cubic-bezier(0.52, 0.01, 0.16, 1);
-    }
-    .logo {
-      position: absolute;
-      width: 200px;
-      right: 1rem;
-      bottom: -1rem;
-      background: #fff;
-      box-shadow: 0 5px 15px rgba(27, 34, 60, 0.1), 0 15px 35px rgba(27, 34, 60, 0.1),
-        0 50px 100px rgba(27, 34, 60, 0.1), 20px -20px 35px rgba(80, 102, 119, 0.15);
-      transform: perspective(1040px) rotate(2deg) rotateX(2deg) rotateY(-11deg)
-        translateZ(-20px) scale(1);
-    }
-  }
 }
 </style>
diff --git a/@apps/factor/src/extend/index.vue b/@apps/factor/src/extend/index.vue
@@ -134,6 +134,7 @@ export default Vue.extend({
   .posts-loading .loading-ring-wrap {
     min-height: 400px;
   }
+
   .content-pad {
     max-width: 1300px;
     margin: 0 auto;
@@ -143,47 +144,13 @@ export default Vue.extend({
     position: relative;
   }
 
-  /* HEADER */
-  .header {
-    background-image: url("./img/dot.svg");
-    overflow: hidden;
-
-    .content-pad {
-      display: grid;
-      grid-template-columns: 4fr 3fr;
-    }
-
-    .header-content {
+  @media (max-width: 900px) {
+    padding-top: 0;
+    .extend-index-head {
       padding: 4em 0;
-
-      .page-title-sub {
-        font-size: 1.6em;
-      }
-      @media (max-width: 900px) {
-        padding: 3rem 0;
-        .page-title {
-          font-size: 1.7em;
-          line-height: 1.3;
-        }
-        .page-title-sub {
-          font-size: 1.4em;
-          line-height: 1.1;
-        }
-      }
-    }
-
-    .header-figure {
-      position: relative;
-    }
-
-    @media (max-width: 900px) {
-      .content-pad {
-        grid-template-columns: 1fr;
-      }
     }
   }
 
-  /* PAGE CONTENT */
   .extensions-wrap {
     &.plugins-wrap {
       display: grid;

diff --git a/@apps/factor/src/extend/sidebar.vue b/@apps/factor/src/extend/sidebar.vue
@@ -90,7 +90,6 @@ export default Vue.extend({
 </script>
 
 <style lang="less">
-// Plugins Sidebar
 .plugins-sidebar {
   padding: 0;
 
@@ -109,16 +108,12 @@ export default Vue.extend({
     }
   }
 
-  // NEW AND RECENTLY UPDATED PLUGINS
-
   .plugins-new .section-header {
     margin: 0 0 1rem;
   }
 
-  .plugins-updated {
-    .section-header {
-      margin: 2rem 0 1rem;
-    }
+  .plugins-updated .section-header {
+    margin: 2rem 0 1rem;
   }
 
   .plugins-new,