aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/@next/components/aboutPageLayout.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts/@next/components/aboutPageLayout.tsx')
-rw-r--r--packages/website/ts/@next/components/aboutPageLayout.tsx59
1 files changed, 27 insertions, 32 deletions
diff --git a/packages/website/ts/@next/components/aboutPageLayout.tsx b/packages/website/ts/@next/components/aboutPageLayout.tsx
index e8f09c8d9..54e4c34f4 100644
--- a/packages/website/ts/@next/components/aboutPageLayout.tsx
+++ b/packages/website/ts/@next/components/aboutPageLayout.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components';
import { Link } from 'ts/@next/components/button';
import { ChapterLink } from 'ts/@next/components/chapter_link';
-import { BREAKPOINTS, Column, Section, Wrap } from 'ts/@next/components/layout';
+import { Column, Section } from 'ts/@next/components/newLayout';
import { SiteWrap } from 'ts/@next/components/siteWrap';
import { Heading, Paragraph } from 'ts/@next/components/text';
@@ -16,44 +16,39 @@ interface Props {
export const AboutPageLayout = (props: Props) => (
<SiteWrap theme="light">
- <Section isPadLarge={true}>
- <Wrap>
- <Nav colWidth="1/3">
- <ChapterLink to="/next/about/mission">Our Mission</ChapterLink>
- <ChapterLink to="/next/about/team">Team</ChapterLink>
- <ChapterLink to="/next/about/press">Press</ChapterLink>
- <ChapterLink to="/next/about/jobs">Jobs</ChapterLink>
- </Nav>
-
- <Column colWidth="2/3">
- <IntroWrap>
- <Heading size="medium">
- {props.title}
- </Heading>
- <Paragraph size="medium" marginBottom="60px">
- {props.description}
- </Paragraph>
-
- {(props.linkLabel && props.linkUrl) &&
- <Link href={props.linkUrl} isNoBorder={true} isWithArrow={true}>
- {props.linkLabel}
- </Link>
- }
- </IntroWrap>
- </Column>
- </Wrap>
+ <Section isFlex={true} maxWidth="1170px">
+ <Nav colWidth="1/3">
+ <ChapterLink to="/next/about/mission">Our Mission</ChapterLink>
+ <ChapterLink to="/next/about/team">Team</ChapterLink>
+ <ChapterLink to="/next/about/press">Press</ChapterLink>
+ <ChapterLink to="/next/about/jobs">Jobs</ChapterLink>
+ </Nav>
+
+ <Column width="70%" maxWidth="826px">
+ <Column width="100%" maxWidth="680px">
+ <Heading size="medium">
+ {props.title}
+ </Heading>
+
+ <Paragraph size="medium" marginBottom="60px" isMuted={0.65}>
+ {props.description}
+ </Paragraph>
+
+ {(props.linkLabel && props.linkUrl) &&
+ <Link href={props.linkUrl} isNoBorder={true} isWithArrow={true}>
+ {props.linkLabel}
+ </Link>
+ }
+ </Column>
+ </Column>
</Section>
{props.children}
</SiteWrap>
);
-const IntroWrap = styled.div`
- max-width: 680px;
-`;
-
const Nav = styled(Column)`
- @media (max-width: ${BREAKPOINTS.mobile}) {
+ @media (max-width: 768px) {
// display: none;
}
`;