aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorFred Carlsen <fred@sjelfull.no>2018-12-15 02:17:31 +0800
committerFred Carlsen <fred@sjelfull.no>2018-12-15 02:19:50 +0800
commit101fd78cb28ccfaf25b0d2c4b8bb20b8e62a9631 (patch)
treea25f96b04995f45dea4f193b90a3ce8cf81451d5
parentdde2baf2043011d0fa11db7b4955621c1a0a4446 (diff)
downloaddexon-0x-contracts-101fd78cb28ccfaf25b0d2c4b8bb20b8e62a9631.tar
dexon-0x-contracts-101fd78cb28ccfaf25b0d2c4b8bb20b8e62a9631.tar.gz
dexon-0x-contracts-101fd78cb28ccfaf25b0d2c4b8bb20b8e62a9631.tar.bz2
dexon-0x-contracts-101fd78cb28ccfaf25b0d2c4b8bb20b8e62a9631.tar.lz
dexon-0x-contracts-101fd78cb28ccfaf25b0d2c4b8bb20b8e62a9631.tar.xz
dexon-0x-contracts-101fd78cb28ccfaf25b0d2c4b8bb20b8e62a9631.tar.zst
dexon-0x-contracts-101fd78cb28ccfaf25b0d2c4b8bb20b8e62a9631.zip
Finish tweaking team
-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;
+`;