diff --git a/docs/team-test.md b/docs/team-test.md
index e2254b19..6b8bfeba 100644
--- a/docs/team-test.md
+++ b/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' }
+ // ]
+ // }
]
@@ -69,7 +117,7 @@ const members = [
have chosen to be featured below.
-
+
Team Emeriti
@@ -77,7 +125,7 @@ const members = [
contributions in the past.
-
+
\ No newline at end of file
diff --git a/src/client/theme-default/components/VPTeamMembers.vue b/src/client/theme-default/components/VPTeamMembers.vue
index c9dac9f2..9c97a538 100644
--- a/src/client/theme-default/components/VPTeamMembers.vue
+++ b/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);
}
diff --git a/src/client/theme-default/styles/components/vp-doc.css b/src/client/theme-default/styles/components/vp-doc.css
index 419b5240..b1356976 100644
--- a/src/client/theme-default/styles/components/vp-doc.css
+++ b/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 {