From 8e84643019389ec1124bff0e811d8172341fca34 Mon Sep 17 00:00:00 2001 From: Kia King Ishii Date: Mon, 22 Apr 2024 19:51:39 +0900 Subject: [PATCH] fix fix fix --- docs/team-test.md | 66 ++++++++++++++++--- .../components/VPTeamMembers.vue | 60 ++++++++++------- .../styles/components/vp-doc.css | 7 ++ 3 files changed, 101 insertions(+), 32 deletions(-) diff --git a/docs/team-test.md b/docs/team-test.md index e2254b1994e1..6b8bfeba5811 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. - + \ 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 c9dac9f2a7e9..9c97a5389b09 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 419b52408f3b..b13569763e45 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 {