aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts
diff options
context:
space:
mode:
authorEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-11-29 22:08:24 +0800
committerEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-11-29 22:08:24 +0800
commit4bc5881e9a4214a132481062651ff088f61d3241 (patch)
treec43311a63368b52fc4223649f5b57561b1021358 /packages/website/ts
parenta9d413728e82b742d0f76264542bf322470d9416 (diff)
downloaddexon-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.tsx9
-rw-r--r--packages/website/ts/@next/pages/landing.tsx5
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