Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(theme-default): Support centering members in VPTeamPage #3796

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

fix(theme-default): Support centering members in VPTeamPage #3796

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e64701e
fix(theme-default): Support centering members in VPTeamPage
stevending1st Apr 17, 2024
8b7d27a
go with more manual media query approach
kiaking Apr 19, 2024
8e84643
fix fix fix
kiaking Apr 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
131 changes: 131 additions & 0 deletions docs/team-test.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,131 @@
---
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 members1 = [
{
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' }
// ]
// }
]

const members2 = [
{
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="members1" />
<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="members2" />
</template>
</VPTeamPageSection>
</VPTeamPage>
101 changes: 79 additions & 22 deletions src/client/theme-default/components/VPTeamMembers.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,41 +26,98 @@ const classes = computed(() => [props.size, `count-${props.members.length}`])
</template>

<style scoped>
.VPTeamMembers.small .container {
grid-template-columns: repeat(auto-fit, minmax(224px, 1fr));
.container {
display: grid;
gap: 24px;
margin: 0 auto;
width: 100%;
max-width: 1152px;
}

.VPTeamMembers.small.count-1 .container {
max-width: 276px;
.item {
width: 100%;
}
.VPTeamMembers.small.count-2 .container {
max-width: calc(276px * 2 + 24px);

/**
* Small size layout.
* -------------------------------------------------------------------------- */

@media (min-width: 512px) {
.VPTeamMembers.small .container {
grid-template-columns: repeat(2, 1fr);
}

.VPTeamMembers.small.count-1 .container,
.VPTeamMembers.small.count-2 .container {
display: flex;
justify-content: center;
}

.VPTeamMembers.small.count-1 .item,
.VPTeamMembers.small.count-2 .item {
max-width: 272px;
}
}
.VPTeamMembers.small.count-3 .container {
max-width: calc(276px * 3 + 24px * 2);

@media (min-width: 768px) {
.VPTeamMembers.small .container {
grid-template-columns: repeat(3, 1fr);
}
}

.VPTeamMembers.medium .container {
grid-template-columns: repeat(auto-fit, minmax(256px, 1fr));
@media (min-width: 960px) {
.VPTeamMembers.small .container {
grid-template-columns: repeat(4, 1fr);
}

.VPTeamMembers.small.count-3 .container {
display: flex;
justify-content: center;
}

.VPTeamMembers.small.count-3 .item {
max-width: 272px;
}
}

@media (min-width: 375px) {
/**
* Medium size layout.
* -------------------------------------------------------------------------- */

@media (min-width: 512px) and (max-width: 639px) {
.VPTeamMembers.medium .container {
grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
}

.VPTeamMembers.medium.count-1 .container {
max-width: 368px;
.VPTeamMembers.medium .item {
max-width: 368px;
}
}
.VPTeamMembers.medium.count-2 .container {
max-width: calc(368px * 2 + 24px);

@media (min-width: 640px) {
.VPTeamMembers.medium .container {
grid-template-columns: repeat(2, 1fr);
}

.VPTeamMembers.medium.count-1 .container,
.VPTeamMembers.medium.count-2 .container {
display: flex;
justify-content: center;
align-items: center;
}

.VPTeamMembers.medium.count-1 .item,
.VPTeamMembers.medium.count-2 .item {
max-width: 368px;
}
}

.container {
display: grid;
gap: 24px;
margin: 0 auto;
max-width: 1152px;
@media (min-width: 960px) {
.VPTeamMembers.medium .container {
grid-template-columns: repeat(3, 1fr);
}
}
</style>
43 changes: 16 additions & 27 deletions src/client/theme-default/components/VPTeamPage.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
border-top: 1px solid var(--vp-c-gutter);
padding-top: 88px !important;
@media (min-width: 960px) {
.VPTeamPage {
padding: 96px 64px 128px;
}
}

:slotted(.VPTeamPageSection + .VPTeamPageSection),
:slotted(.VPTeamMembers + .VPTeamPageSection) {
.VPTeamPage :deep(.VPTeamPageSection + .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),
:slotted(.VPTeamMembers + .VPTeamPageSection) {
.VPTeamPage :deep(.VPTeamPageSection + .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>
19 changes: 1 addition & 18 deletions src/client/theme-default/components/VPTeamPageSection.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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>
13 changes: 0 additions & 13 deletions src/client/theme-default/components/VPTeamPageTitle.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Loading