diff options
| -rw-r--r-- | packages/website/ts/@next/pages/about/team.tsx | 44 |
1 files changed, 37 insertions, 7 deletions
diff --git a/packages/website/ts/@next/pages/about/team.tsx b/packages/website/ts/@next/pages/about/team.tsx index f73322576..5ed534593 100644 --- a/packages/website/ts/@next/pages/about/team.tsx +++ b/packages/website/ts/@next/pages/about/team.tsx @@ -239,16 +239,22 @@ const StyledGrid = styled.div` const Member = ({ name, title, imageUrl }: TeamMember) => ( <StyledMember> <img src={imageUrl} alt={name}/> - <Heading color={colors.textDarkPrimary} size="small" isNoMargin={true}>{name}</Heading> - <Paragraph isMuted={0.5} style={{ textTransform: 'capitalize' }}>{title}</Paragraph> + <Name>{name}</Name> + <MemberTitle isMuted={0.5} size={14} style={{ textTransform: 'capitalize' }}>{title}</MemberTitle> </StyledMember> ); const StyledMember = styled.div` - width: calc(25% - 15px); margin-bottom: 10px; float: left; - margin-right: 10px; + width: calc(50% - 15px); + margin-right: 15px; + + @media (max-width: 600px) { + &:nth-child(2n+1) { + clear: left; + } + } img, svg { width: 100%; @@ -257,11 +263,35 @@ const StyledMember = styled.div` margin-bottom: 10px; } - @media (max-width: 900px) { + @media (min-width: 600px) { width: calc(33.3333% - 30px); + margin-right: 20px; + + &:nth-child(3n+1) { + clear: left; + } } - @media (max-width: 600px) { - width: calc(50% - 15px); + @media (min-width: 900px) { + width: calc(25% - 30px); + + &:nth-child(3n+1) { + clear: none; + } + + &:nth-child(4n+1) { + clear: left; + } } `; + +const Name = styled.h3` + color: ${colors.textDarkPrimary}; + font-size: 14px; + line-height: 1; + margin: 0; +`; + +const MemberTitle = styled(Paragraph)` + font-size: 14px; +`; |