go with more manual media query approach

docs/team-test.md

@@ -0,0 +1,83 @@
+---
+layout: page
+title: Meet the Team
+description: The development of Vite is guided by an international team.
+---
+
+<script setup>
+import {
+  VPTeamPage,
+  VPTeamPageTitle,
+  VPTeamPageSection,
+  VPTeamMembers
+} from 'vitepress/theme'
+
+const members = [
+  {
+    avatar: 'https://github.com/yyx990803.png',
+    name: 'Evan You',
+    title: 'Creator',
+    links: [
+      { icon: 'github', link: 'https://github.com/yyx990803' },
+      { icon: 'twitter', link: 'https://twitter.com/youyuxi' }
+    ]
+  },
+  {
+    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' }
+    ]
+  },
+  {
+    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>
+
+<VPTeamPage>
+  <VPTeamPageTitle>
+    <template #title>Meet the Team</template>
+    <template #lead>
+      The development of Vite is guided by an international team, some of whom
+      have chosen to be featured below.
+    </template>
+  </VPTeamPageTitle>
+  <VPTeamMembers :members="members" />
+  <VPTeamPageSection>
+    <template #title>Team Emeriti</template>
+    <template #lead>
+      Here we honor some no-longer-active team members who have made valuable
+      contributions in the past.
+    </template>
+    <template #members>
+      <VPTeamMembers size="small" :members="members" />
+    </template>
+  </VPTeamPageSection>
+</VPTeamPage>

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

@@ -34,85 +34,76 @@ const classes = computed(() => [props.size, `count-${props.members.length}`])
   max-width: 1152px;
 }
 
-.VPTeamMembers.count-1 {
+.item {
-  display: flex;
+  width: 100%;
-  justify-content: center;
 }
 
-.VPTeamMembers.small.count-1 .container ,
+@media (min-width: 512px) {
-.VPTeamMembers.small.count-2 .container,
+  .VPTeamMembers.small .container {
-.VPTeamMembers.small.count-3 .container,
+    grid-template-columns: repeat(2, 1fr);
-.VPTeamMembers.medium.count-1 .container,
+  }
-.VPTeamMembers.medium.count-2 .container {
-  display: flex;
-  justify-content: center;
-  width: 100% !important;
-  max-width: 100% !important;
-}
 
-.VPTeamMembers.small .container {
+  .VPTeamMembers.small.count-1 .container,
-  grid-template-columns: repeat(auto-fit, minmax(224px, 1fr));
+  .VPTeamMembers.medium.count-1 .container {
-}
+    display: flex;
+    justify-content: center;
+  }
 
-@media (max-width: 940px) {
+  .VPTeamMembers.small.count-1 .item {
-  .VPTeamMembers.small.count-3 .container {
+    max-width: 272px;
-    flex-wrap: wrap;
-    justify-content: start;
   }
-}
 
-@media (max-width: 640px) {
+  .VPTeamMembers.medium.count-1 .item {
-  .VPTeamMembers.small.count-2 .container {
+    max-width: 368px;
-    flex-wrap: wrap;
   }
 }
 
-.VPTeamMembers.small.count-1 .item,
+@media (min-width: 640px) {
-.VPTeamMembers.small.count-2 .item,
+  .VPTeamMembers.medium .container {
-.VPTeamMembers.small.count-3 .item {
+    grid-template-columns: repeat(2, 1fr);
-  width: 276px;
+  }
-}
 
-@media (max-width: 940px) and (min-width: 640px) {
+  .VPTeamMembers.medium.count-2 .container {
-  .VPTeamMembers.small.count-2 .item,
+    display: flex;
-  .VPTeamMembers.small.count-3 .item {
+    justify-content: center;
-    width: calc(50% - 12px);
   }
-}
 
-@media (max-width: 640px) {
+  .VPTeamMembers.medium.count-2 .item {
-  .VPTeamMembers.small.count-1 .item,
+    max-width: 368px;
-  .VPTeamMembers.small.count-2 .item,
-  .VPTeamMembers.small.count-3 .item {
-    width: 100% !important;
   }
 }
 
-.VPTeamMembers.medium .container {
+@media (min-width: 768px) {
-  grid-template-columns: repeat(auto-fit, minmax(256px, 1fr));
+  .VPTeamMembers.small .container {
-}
+    grid-template-columns: repeat(3, 1fr);
+  }
 
-@media (min-width: 375px) {
+  .VPTeamMembers.small.count-2 .container {
-  .VPTeamMembers.medium .container {
+    display: flex;
-    grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
+    justify-content: center;
   }
-}
 
-@media (max-width: 888px) {
+  .VPTeamMembers.small.count-2 .item {
-  .VPTeamMembers.medium.count-2 .container {
+    max-width: 272px;
-    flex-wrap: wrap;
   }
 }
 
-.VPTeamMembers.medium.count-1 .item,
+@media (min-width: 960px) {
-.VPTeamMembers.medium.count-2 .item {
+  .VPTeamMembers.small .container {
-  width: 368px;
+    grid-template-columns: repeat(4, 1fr);
-}
+  }
 
-@media (max-width: 888px) {
+  .VPTeamMembers.small.count-3 .container {
-  .VPTeamMembers.medium.count-1 .item,
+    display: flex;
-  .VPTeamMembers.medium.count-2 .item {
+    justify-content: center;
-    width: 100% !important;
+  }
+
+  .VPTeamMembers.small.count-3 .item {
+    max-width: 272px;
+  }
+
+  .VPTeamMembers.medium .container {
+    grid-template-columns: repeat(3, 1fr);
   }
 }
 </style>

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

@@ -6,53 +6,42 @@
 
 <style scoped>
 .VPTeamPage {
-  margin: 96px 0;
+  padding: 48px 24px 128px;
 }
 
 @media (min-width: 768px) {
   .VPTeamPage {
-    margin: 128px 0;
+    padding: 64px 32px 128px;
   }
 }
 
-.VPHome :slotted(.VPTeamPageTitle) {
+@media (min-width: 960px) {
-  border-top: 1px solid var(--vp-c-gutter);
+  .VPTeamPage {
-  padding-top: 88px !important;
+    padding: 96px 64px 128px;
+  }
 }
 
-:slotted(.VPTeamPageSection + .VPTeamPageSection),
+.VPTeamPage :deep(.VPTeamPageSection + .VPTeamPageSection),
-:slotted(.VPTeamMembers + .VPTeamPageSection) {
+.VPTeamPage :deep(.VPTeamMembers + .VPTeamPageSection) {
   margin-top: 64px;
 }
 
-:slotted(.VPTeamMembers + .VPTeamMembers) {
+.VPTeamPage :deep(.VPTeamPageTitle + .VPTeamMembers) {
+  margin-top: 32px;
+}
+
+.VPTeamPage :deep(.VPTeamMembers + .VPTeamMembers) {
   margin-top: 24px;
 }
 
 @media (min-width: 768px) {
-  :slotted(.VPTeamPageTitle + .VPTeamPageSection) {
+  .VPTeamPage :deep(.VPTeamPageTitle + .VPTeamPageSection) {
     margin-top: 16px;
   }
 
-  :slotted(.VPTeamPageSection + .VPTeamPageSection),
+  .VPTeamPage :deep(.VPTeamPageSection + .VPTeamPageSection),
-  :slotted(.VPTeamMembers + .VPTeamPageSection) {
+  .VPTeamPage :deep(.VPTeamMembers + .VPTeamPageSection) {
     margin-top: 96px;
   }
 }
-
-:slotted(.VPTeamMembers) {
-  padding: 0 24px;
-}
-
-@media (min-width: 768px) {
-  :slotted(.VPTeamMembers) {
-    padding: 0 48px;
-  }
-}
-
-@media (min-width: 960px) {
-  :slotted(.VPTeamMembers) {
-    padding: 0 64px;
-  }
-}
 </style>

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

@@ -16,22 +16,6 @@
 </template>
 
 <style scoped>
-.VPTeamPageSection {
-  padding: 0 32px;
-}
-
-@media (min-width: 768px) {
-  .VPTeamPageSection {
-    padding: 0 48px;
-  }
-}
-
-@media (min-width: 960px) {
-  .VPTeamPageSection {
-    padding: 0 64px;
-  }
-}
-
 .title {
   position: relative;
   margin: 0 auto;
@@ -67,11 +51,10 @@
   text-align: center;
   line-height: 24px;
   font-size: 16px;
-  font-weight: 500;
   color: var(--vp-c-text-2);
 }
 
 .members {
-  padding-top: 40px;
+  padding-top: 24px;
 }
 </style>

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

@@ -11,22 +11,9 @@
 
 <style scoped>
 .VPTeamPageTitle {
-  padding: 48px 32px;
   text-align: center;
 }
 
-@media (min-width: 768px) {
-  .VPTeamPageTitle {
-    padding: 64px 48px 48px;
-  }
-}
-
-@media (min-width: 960px) {
-  .VPTeamPageTitle {
-    padding: 80px 64px 48px;
-  }
-}
-
 .title {
   letter-spacing: 0;
   line-height: 44px;

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

@@ -523,21 +523,28 @@
 
 .vp-doc .VPTeamMembers {
   margin-top: 24px;
+  margin-bottom: 24px;
 }
 
-.vp-doc .VPTeamMembers.small.count-1 .container {
+@media (min-width: 768px) {
-  margin: 0 !important;
+  .vp-doc .VPTeamMembers.small .container,
-  max-width: calc((100% - 24px) / 2) !important;
+  .vp-doc .VPTeamMembers.medium .container {
-}
+    grid-template-columns: repeat(2, 1fr) !important;
+  }
 
-.vp-doc .VPTeamMembers.small.count-2 .container,
+  .vp-doc .VPTeamMembers.small.count-2 .container,
-.vp-doc .VPTeamMembers.small.count-3 .container {
+  .vp-doc .VPTeamMembers.small.count-3 .container {
-  max-width: 100% !important;
+    display: grid !important;
-}
+    grid-template-columns: repeat(2, 1fr) !important;
+  }
+
+  .vp-doc .VPTeamMembers.small .item {
+    max-width: 100% !important;
+  }
 
-.vp-doc .VPTeamMembers.medium.count-1 .container {
+  .vp-doc .VPTeamMembers.small.count-1 .item {
-  margin: 0 !important;
+    max-width: 272px !important;
-  max-width: calc((100% - 24px) / 2) !important;
+  }
 }
 
 /**