diff options
| author | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-11-29 22:08:24 +0800 |
|---|---|---|
| committer | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-11-29 22:08:24 +0800 |
| commit | 4bc5881e9a4214a132481062651ff088f61d3241 (patch) | |
| tree | c43311a63368b52fc4223649f5b57561b1021358 /packages/website/ts | |
| parent | a9d413728e82b742d0f76264542bf322470d9416 (diff) | |
| download | dexon-sol-tools-4bc5881e9a4214a132481062651ff088f61d3241.tar dexon-sol-tools-4bc5881e9a4214a132481062651ff088f61d3241.tar.gz dexon-sol-tools-4bc5881e9a4214a132481062651ff088f61d3241.tar.bz2 dexon-sol-tools-4bc5881e9a4214a132481062651ff088f61d3241.tar.lz dexon-sol-tools-4bc5881e9a4214a132481062651ff088f61d3241.tar.xz dexon-sol-tools-4bc5881e9a4214a132481062651ff088f61d3241.tar.zst dexon-sol-tools-4bc5881e9a4214a132481062651ff088f61d3241.zip | |
Tests flush width sections
Diffstat (limited to 'packages/website/ts')
| -rw-r--r-- | packages/website/ts/@next/components/layout.tsx | 9 | ||||
| -rw-r--r-- | packages/website/ts/@next/pages/landing.tsx | 5 |
2 files changed, 11 insertions, 3 deletions
diff --git a/packages/website/ts/@next/components/layout.tsx b/packages/website/ts/@next/components/layout.tsx index 541b4fc58..d64bcf74a 100644 --- a/packages/website/ts/@next/components/layout.tsx +++ b/packages/website/ts/@next/components/layout.tsx @@ -70,12 +70,17 @@ export const Main = styled.main` `; export const Section = styled.section<SectionProps>` - width: ${props => props.fullWidth ? `100vw` : '100%'}; + width: ${props => props.fullWidth ? `calc(100% + ${GUTTER * 2}px)` : '100%'}; padding: ${props => !props.noPadding && '30px'}; margin-bottom: ${props => !props.noMargin && `${GUTTER}px`}; - margin-left: ${props => props.fullWidth && `calc(750px - 50vw)`}; + margin-left: ${props => props.fullWidth && `-${GUTTER}px`}; background-color: ${props => props.bgColor}; border: 1px dotted rgba(0, 255, 0, 0.3); + + @media (min-width: 1560px) { + width: ${props => props.fullWidth && '100vw'}; + margin-left: ${props => props.fullWidth && `calc(750px - 50vw)`}; + } `; export const Wrap = styled.div<WrapProps>` diff --git a/packages/website/ts/@next/pages/landing.tsx b/packages/website/ts/@next/pages/landing.tsx index c0cda84cf..025a9d47b 100644 --- a/packages/website/ts/@next/pages/landing.tsx +++ b/packages/website/ts/@next/pages/landing.tsx @@ -56,7 +56,10 @@ export const NextLanding = () => ( </Wrap> </Section> - <Section fullWidth noPadding> + <Section + bgColor="#ff0000" + fullWidth + noPadding> <Wrap width="full"> <Column colWidth="2/3"> SAMPLE FLUSHED width |