aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts
diff options
context:
space:
mode:
authorEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-12-12 23:02:05 +0800
committerEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-12-12 23:02:43 +0800
commit1d5473eece9f4a905e6cbf24489bbe20f908d31d (patch)
treed3a837c1863475b35a5d48fdf5b15cb4748ce6d1 /packages/website/ts
parent4b4db3802a93f0a8a5d0acc061af245be4498f46 (diff)
downloaddexon-sol-tools-1d5473eece9f4a905e6cbf24489bbe20f908d31d.tar
dexon-sol-tools-1d5473eece9f4a905e6cbf24489bbe20f908d31d.tar.gz
dexon-sol-tools-1d5473eece9f4a905e6cbf24489bbe20f908d31d.tar.bz2
dexon-sol-tools-1d5473eece9f4a905e6cbf24489bbe20f908d31d.tar.lz
dexon-sol-tools-1d5473eece9f4a905e6cbf24489bbe20f908d31d.tar.xz
dexon-sol-tools-1d5473eece9f4a905e6cbf24489bbe20f908d31d.tar.zst
dexon-sol-tools-1d5473eece9f4a905e6cbf24489bbe20f908d31d.zip
Fixes fullwidth sections
Diffstat (limited to 'packages/website/ts')
-rw-r--r--packages/website/ts/@next/components/newLayout.tsx3
-rw-r--r--packages/website/ts/@next/components/sections/landing/cta.tsx2
-rw-r--r--packages/website/ts/@next/components/siteWrap.tsx13
-rw-r--r--packages/website/ts/@next/pages/instant.tsx2
-rw-r--r--packages/website/ts/@next/pages/why.tsx7
5 files changed, 11 insertions, 16 deletions
diff --git a/packages/website/ts/@next/components/newLayout.tsx b/packages/website/ts/@next/components/newLayout.tsx
index f4cf19e29..1ac9fccfc 100644
--- a/packages/website/ts/@next/components/newLayout.tsx
+++ b/packages/website/ts/@next/components/newLayout.tsx
@@ -80,6 +80,8 @@ export const WrapSticky = styled.div<WrapProps>`
`;
const SectionBase = styled.section<SectionProps>`
+ width: ${props => !props.isFullWidth && 'calc(100% - 60px)'};
+ max-width: 1500px;
margin: 0 auto;
padding: ${props => props.isPadded && '120px 0'};
background-color: ${props => props.theme[`${props.bgColor}BgColor`] || props.bgColor};
@@ -92,7 +94,6 @@ const SectionBase = styled.section<SectionProps>`
`;
const Wrap = styled(FlexWrap)<WrapProps>`
- width: calc(100% - 60px);
max-width: ${props => !props.isFullWidth && (props.maxWidth || '895px')};
text-align: ${props => props.isTextCentered && 'center'};
margin: 0 auto;
diff --git a/packages/website/ts/@next/components/sections/landing/cta.tsx b/packages/website/ts/@next/components/sections/landing/cta.tsx
index b90b4070e..b387c2418 100644
--- a/packages/website/ts/@next/components/sections/landing/cta.tsx
+++ b/packages/website/ts/@next/components/sections/landing/cta.tsx
@@ -15,8 +15,8 @@ interface Props {
export const SectionLandingCta = (props: Props) => (
<Section
isPadded={false}
- isFullWidth={true}
isFlex={true}
+ maxWidth="auto"
flexBreakpoint="900px"
>
<BlockIconLink
diff --git a/packages/website/ts/@next/components/siteWrap.tsx b/packages/website/ts/@next/components/siteWrap.tsx
index abbd27845..eb2569f3d 100644
--- a/packages/website/ts/@next/components/siteWrap.tsx
+++ b/packages/website/ts/@next/components/siteWrap.tsx
@@ -69,21 +69,12 @@ export const SiteWrap: React.StatelessComponent<Props> = props => {
<>
<GlobalStyles />
<Header />
- <Main>
+ <main>
{children}
- </Main>
+ </main>
<Footer/>
</>
</ThemeProvider>
</>
);
};
-
-export const Main = styled.main`
- max-width: 1500px;
- margin: 0 auto;
-
- @media (min-width: 768px) {
- width: calc(100% - 60px);
- }
-`;
diff --git a/packages/website/ts/@next/pages/instant.tsx b/packages/website/ts/@next/pages/instant.tsx
index e1725b185..878818940 100644
--- a/packages/website/ts/@next/pages/instant.tsx
+++ b/packages/website/ts/@next/pages/instant.tsx
@@ -68,7 +68,7 @@ export const Next0xInstant = () => (
actions={<Button href="#">Get Started</Button>}
/>
- <Section>
+ <Section isFullWidth={true}>
<MarqueeWrap>
<div>
<img src="/images/@next/0x-instant/0x-instant-widgets@2x.png" alt="Preview of payment widgets"/>
diff --git a/packages/website/ts/@next/pages/why.tsx b/packages/website/ts/@next/pages/why.tsx
index 14ca3ab6f..11b8928d9 100644
--- a/packages/website/ts/@next/pages/why.tsx
+++ b/packages/website/ts/@next/pages/why.tsx
@@ -125,7 +125,7 @@ export class NextWhy extends React.PureComponent {
/>
</Section>
- <Section maxWidth="1170px" isFlex={true}>
+ <Section maxWidth="1170px" isFlex={true} isFullWidth={true}>
<Column>
<NavStickyWrap offsetTop="130px">
<ChapterLink offset="60" href="#benefits">Benefits</ChapterLink>
@@ -135,7 +135,7 @@ export class NextWhy extends React.PureComponent {
</Column>
<Column width="55%" maxWidth="826px">
- <Column width="100%" maxWidth="560px">
+ <Column width="100%" maxWidth="560px" padding="0 30px 0 0">
<SectionWrap id="benefits">
<Heading size="medium">What 0x offers</Heading>
@@ -225,6 +225,9 @@ const SectionWrap = styled.div`
`;
const NavStickyWrap = styled(WrapSticky)`
+ padding-left: 60px;
+ z-index: 9999;
+
@media (max-width: 768px) {
display: none;
}