docs: enhance mobile display for plugin market

koishijs · Mar 1, 2022 · 71946b3 · 71946b3
1 parent c527f17
commit 71946b3
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 7 deletions.
diff --git a/docs/.vuepress/layouts/market/index.vue b/docs/.vuepress/layouts/market/index.vue
@@ -132,6 +132,12 @@ html.dark {
       border-radius: 8px;
       margin-top: 2rem;
     }
+
+    .package-view {
+      height: 12rem;
+      display: flex;
+      flex-direction: column;
+    }
   }
 
   > .search-box {
@@ -188,11 +194,16 @@ html.dark {
     }
 
     > .package-view {
+      padding: 0.25rem 0;
       border-top: 1px solid var(--c-border);
 
       &:last-child {
         border-bottom: 1px solid var(--c-border);
       }
+
+      .badge-container {
+        margin: 1rem 0 1.25rem;
+      }
     }
   }
 }

diff --git a/docs/.vuepress/layouts/market/package.vue b/docs/.vuepress/layouts/market/package.vue
@@ -81,9 +81,6 @@ const email = computed(() => props.data.author?.email)
 
 .package-view {
   width: 100%;
-  height: 12rem;
-  display: flex;
-  flex-direction: column;
   overflow: hidden;
 
   > * {
@@ -93,8 +90,6 @@ const email = computed(() => props.data.author?.email)
   .header {
     font-size: 1.3rem;
     font-weight: 500;
-    margin: 1.25rem 0 1rem;
-    flex-shrink: 0;
 
     .right {
       float: right;
@@ -109,8 +104,8 @@ const email = computed(() => props.data.author?.email)
     }
   }
 
-  .footer {
-    margin: 1.25rem 0;
+  .header, .footer {
+    margin: 1rem 0;
     flex-shrink: 0;
   }