diff options
| author | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-12-14 20:47:40 +0800 |
|---|---|---|
| committer | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-12-14 20:47:40 +0800 |
| commit | ee380316962c1a09944f2ac62125551dc49feffd (patch) | |
| tree | 70b5528d30907e3215aea937593824fd37351b85 /packages/website | |
| parent | 8948029dd78cad2a984853a1123ecd7416b5459d (diff) | |
| download | dexon-sol-tools-ee380316962c1a09944f2ac62125551dc49feffd.tar.gz dexon-sol-tools-ee380316962c1a09944f2ac62125551dc49feffd.tar.zst dexon-sol-tools-ee380316962c1a09944f2ac62125551dc49feffd.zip | |
Fixes borders in why page sections
Diffstat (limited to 'packages/website')
| -rw-r--r-- | packages/website/ts/@next/components/button.tsx | 2 | ||||
| -rw-r--r-- | packages/website/ts/@next/pages/why.tsx | 35 |
2 files changed, 24 insertions, 13 deletions
diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx index fb7c913a5..397bf39cd 100644 --- a/packages/website/ts/@next/components/button.tsx +++ b/packages/website/ts/@next/components/button.tsx @@ -21,7 +21,7 @@ interface ButtonInterface { type?: string; to?: string; onClick?: () => any; - theme: ThemeInterface; + theme?: ThemeInterface; } export const Button = (props: ButtonInterface) => { diff --git a/packages/website/ts/@next/pages/why.tsx b/packages/website/ts/@next/pages/why.tsx index bb9b058e2..6010b9c8a 100644 --- a/packages/website/ts/@next/pages/why.tsx +++ b/packages/website/ts/@next/pages/why.tsx @@ -136,7 +136,7 @@ export class NextWhy extends React.PureComponent { <Column width="55%" maxWidth="826px"> <Column width="100%" maxWidth="560px" padding="0 30px 0 0"> <SectionWrap id="benefits"> - <Heading size="medium" marginBottom="60px">What 0x offers</Heading> + <SectionTitle size="medium" marginBottom="60px">What 0x offers</SectionTitle> {_.map(offersData, (item, index) => ( <Definition @@ -150,7 +150,7 @@ export class NextWhy extends React.PureComponent { </SectionWrap> <SectionWrap id="cases" isNotRelative={true}> - <Heading size="medium" marginBottom="60px">Use Cases</Heading> + <SectionTitle size="medium" marginBottom="60px">Use Cases</SectionTitle> <Slider> {_.map(useCaseSlides, (item, index) => ( <Slide @@ -164,7 +164,7 @@ export class NextWhy extends React.PureComponent { </SectionWrap> <SectionWrap id="functionality"> - <Heading size="medium" marginBottom="60px">Exchange Functionality</Heading> + <SectionTitle size="medium" marginBottom="60px">Exchange Functionality</SectionTitle> {_.map(functionalityData, (item, index) => ( <Definition @@ -203,15 +203,6 @@ const SectionWrap = styled.div<SectionProps>` margin-top: 60px; } - & + &:before { - content: ''; - position: absolute; - top: 0; - left: 0; - height: 1px; - background-color: #3d3d3d; - } - @media (min-width: 768px) { & + &:before { width: 100vw; @@ -227,6 +218,26 @@ const SectionWrap = styled.div<SectionProps>` } `; +const SectionTitle = styled(Heading)` + position: relative; + + &:before { + content: ''; + width: 100vw; + position: absolute; + top: -30px; + left: 0; + height: 1px; + background-color: #3d3d3d; + } + + @media (max-width: 768px) { + &:before { + width: calc(100vw - 60px); + } + } +`; + const NavStickyWrap = styled(WrapSticky)` padding-left: 60px; z-index: 15; |