fix fix fix

docs/team-test.md

@@ -12,7 +12,7 @@ import {
   VPTeamMembers
 } from 'vitepress/theme'
 
-const members = [
+const members1 = [
   {
     avatar: 'https://github.com/yyx990803.png',
     name: 'Evan You',
@@ -31,13 +31,43 @@ const members = [
       { icon: 'twitter', link: 'https://twitter.com/KiaKing85' }
     ]
   },
+  // {
+  //   avatar: 'https://github.com/kiaking.png',
+  //   name: 'Kia King Ishii',
+  //   title: 'Developer',
+  //   links: [
+  //     { icon: 'github', link: 'https://github.com/kiaking' },
+  //     { icon: 'twitter', link: 'https://twitter.com/KiaKing85' }
+  //   ]
+  // },
+  // {
+  //   avatar: 'https://github.com/kiaking.png',
+  //   name: 'Kia King Ishii',
+  //   title: 'Developer',
+  //   links: [
+  //     { icon: 'github', link: 'https://github.com/kiaking' },
+  //     { icon: 'twitter', link: 'https://twitter.com/KiaKing85' }
+  //   ]
+  // },
+  // {
+  //   avatar: 'https://github.com/kiaking.png',
+  //   name: 'Kia King Ishii',
+  //   title: 'Developer',
+  //   links: [
+  //     { icon: 'github', link: 'https://github.com/kiaking' },
+  //     { icon: 'twitter', link: 'https://twitter.com/KiaKing85' }
+  //   ]
+  // }
+]
+
+const members2 = [
   {
-    avatar: 'https://github.com/kiaking.png',
-    name: 'Kia King Ishii',
-    title: 'Developer',
+    avatar: 'https://github.com/yyx990803.png',
+    name: 'Evan You',
+    title: 'Creator',
     links: [
-      { icon: 'github', link: 'https://github.com/kiaking' },
-      { icon: 'twitter', link: 'https://twitter.com/KiaKing85' }
+      { icon: 'github', link: 'https://github.com/yyx990803' },
+      { icon: 'twitter', link: 'https://twitter.com/youyuxi' }
     ]
   },
   {
@@ -57,7 +87,25 @@ const members = [
       { icon: 'github', link: 'https://github.com/kiaking' },
       { icon: 'twitter', link: 'https://twitter.com/KiaKing85' }
     ]
-  }
+  },
+  // {
+  //   avatar: 'https://github.com/kiaking.png',
+  //   name: 'Kia King Ishii',
+  //   title: 'Developer',
+  //   links: [
+  //     { icon: 'github', link: 'https://github.com/kiaking' },
+  //     { icon: 'twitter', link: 'https://twitter.com/KiaKing85' }
+  //   ]
+  // },
+  // {
+  //   avatar: 'https://github.com/kiaking.png',
+  //   name: 'Kia King Ishii',
+  //   title: 'Developer',
+  //   links: [
+  //     { icon: 'github', link: 'https://github.com/kiaking' },
+  //     { icon: 'twitter', link: 'https://twitter.com/KiaKing85' }
+  //   ]
+  // }
 ]
 </script>
 
@@ -69,7 +117,7 @@ const members = [
       have chosen to be featured below.
     </template>
   </VPTeamPageTitle>
-  <VPTeamMembers :members="members" />
+  <VPTeamMembers :members="members1" />
   <VPTeamPageSection>
     <template #title>Team Emeriti</template>
     <template #lead>
@@ -77,7 +125,7 @@ const members = [
       contributions in the past.
     </template>
     <template #members>
-      <VPTeamMembers size="small" :members="members" />
+      <VPTeamMembers size="small" :members="members2" />
     </template>
   </VPTeamPageSection>
 </VPTeamPage>

src/client/theme-default/components/VPTeamMembers.vue

@@ -38,70 +38,84 @@ const classes = computed(() => [props.size, `count-${props.members.length}`])
   width: 100%;
 }
 
+/**
+ * Small size layout.
+ * -------------------------------------------------------------------------- */
+
 @media (min-width: 512px) {
   .VPTeamMembers.small .container {
     grid-template-columns: repeat(2, 1fr);
   }
 
   .VPTeamMembers.small.count-1 .container,
-  .VPTeamMembers.medium.count-1 .container {
+  .VPTeamMembers.small.count-2 .container {
     display: flex;
     justify-content: center;
   }
 
-  .VPTeamMembers.small.count-1 .item {
+  .VPTeamMembers.small.count-1 .item,
+  .VPTeamMembers.small.count-2 .item {
     max-width: 272px;
   }
+}
 
-  .VPTeamMembers.medium.count-1 .item {
-    max-width: 368px;
+@media (min-width: 768px) {
+  .VPTeamMembers.small .container {
+    grid-template-columns: repeat(3, 1fr);
   }
 }
 
-@media (min-width: 640px) {
-  .VPTeamMembers.medium .container {
-    grid-template-columns: repeat(2, 1fr);
+@media (min-width: 960px) {
+  .VPTeamMembers.small .container {
+    grid-template-columns: repeat(4, 1fr);
   }
 
-  .VPTeamMembers.medium.count-2 .container {
+  .VPTeamMembers.small.count-3 .container {
     display: flex;
     justify-content: center;
   }
 
-  .VPTeamMembers.medium.count-2 .item {
-    max-width: 368px;
+  .VPTeamMembers.small.count-3 .item {
+    max-width: 272px;
   }
 }
 
-@media (min-width: 768px) {
-  .VPTeamMembers.small .container {
-    grid-template-columns: repeat(3, 1fr);
-  }
+/**
+ * Medium size layout.
+ * -------------------------------------------------------------------------- */
 
-  .VPTeamMembers.small.count-2 .container {
+@media (min-width: 512px) and (max-width: 639px) {
+  .VPTeamMembers.medium .container {
     display: flex;
+    flex-direction: column;
     justify-content: center;
+    align-items: center;
   }
 
-  .VPTeamMembers.small.count-2 .item {
-    max-width: 272px;
+  .VPTeamMembers.medium .item {
+    max-width: 368px;
   }
 }
 
-@media (min-width: 960px) {
-  .VPTeamMembers.small .container {
-    grid-template-columns: repeat(4, 1fr);
+@media (min-width: 640px) {
+  .VPTeamMembers.medium .container {
+    grid-template-columns: repeat(2, 1fr);
   }
 
-  .VPTeamMembers.small.count-3 .container {
+  .VPTeamMembers.medium.count-1 .container,
+  .VPTeamMembers.medium.count-2 .container {
     display: flex;
     justify-content: center;
+    align-items: center;
   }
 
-  .VPTeamMembers.small.count-3 .item {
-    max-width: 272px;
+  .VPTeamMembers.medium.count-1 .item,
+  .VPTeamMembers.medium.count-2 .item {
+    max-width: 368px;
   }
+}
 
+@media (min-width: 960px) {
   .VPTeamMembers.medium .container {
     grid-template-columns: repeat(3, 1fr);
   }

src/client/theme-default/styles/components/vp-doc.css

@@ -526,6 +526,13 @@
   margin-bottom: 24px;
 }
 
+@media (min-width: 512px) {
+  .VPTeamMembers.small.count-2 .item,
+  .VPTeamMembers.small.count-3 .item {
+    max-width: 100% !important;
+  }
+}
+
 @media (min-width: 768px) {
   .vp-doc .VPTeamMembers.small .container,
   .vp-doc .VPTeamMembers.medium .container {