aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--packages/website/ts/@next/pages/about/team.tsx44
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;
+`;