diff options
| author | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-11-30 22:23:26 +0800 |
|---|---|---|
| committer | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-11-30 22:23:26 +0800 |
| commit | 7962e4050c60e6f7eb57740da19e7b7ef9bec6a6 (patch) | |
| tree | 7206a123e3b8e942bb93f45edbdaae7fdfd2a95c /packages/website/ts/@next | |
| parent | 6bf988942936a8cbb7a42a2fed9b586b16c65029 (diff) | |
| download | dexon-sol-tools-7962e4050c60e6f7eb57740da19e7b7ef9bec6a6.tar dexon-sol-tools-7962e4050c60e6f7eb57740da19e7b7ef9bec6a6.tar.gz dexon-sol-tools-7962e4050c60e6f7eb57740da19e7b7ef9bec6a6.tar.bz2 dexon-sol-tools-7962e4050c60e6f7eb57740da19e7b7ef9bec6a6.tar.lz dexon-sol-tools-7962e4050c60e6f7eb57740da19e7b7ef9bec6a6.tar.xz dexon-sol-tools-7962e4050c60e6f7eb57740da19e7b7ef9bec6a6.tar.zst dexon-sol-tools-7962e4050c60e6f7eb57740da19e7b7ef9bec6a6.zip | |
Breakpoint on padding
Diffstat (limited to 'packages/website/ts/@next')
| -rw-r--r-- | packages/website/ts/@next/components/layout.tsx | 8 | ||||
| -rw-r--r-- | packages/website/ts/@next/pages/landing.tsx | 2 |
2 files changed, 7 insertions, 3 deletions
diff --git a/packages/website/ts/@next/components/layout.tsx b/packages/website/ts/@next/components/layout.tsx index a9e95f13c..1a78f691c 100644 --- a/packages/website/ts/@next/components/layout.tsx +++ b/packages/website/ts/@next/components/layout.tsx @@ -27,7 +27,7 @@ interface SectionProps { interface WrapProps { width?: 'default' | 'full' | 'medium' | 'narrow'; bgColor?: string; - margin?: number | ('large' | 'default' | number)[]; + padding?: number | ('large' | 'default' | number)[]; } interface ColumnProps { @@ -99,11 +99,15 @@ export const Section = styled.section<SectionProps>` width: ${props => props.fullWidth && '100vw'}; margin-left: ${props => props.fullWidth && `calc(750px - 50vw)`}; } + + @media (max-width: ${BREAKPOINTS.mobile}) { + padding: 30px; + } `; const WrapBase = styled.div<WrapProps>` max-width: ${props => WRAPPER_WIDTHS[props.width || 'default']}; - padding: ${props => props.margin && _getPadding(props.margin)}; + padding: ${props => props.padding && _getPadding(props.padding)}; background-color: ${props => props.bgColor}; margin: 0 auto; `; diff --git a/packages/website/ts/@next/pages/landing.tsx b/packages/website/ts/@next/pages/landing.tsx index 6f1d14661..a2afab97e 100644 --- a/packages/website/ts/@next/pages/landing.tsx +++ b/packages/website/ts/@next/pages/landing.tsx @@ -72,7 +72,7 @@ export const NextLanding = () => ( </WrapCentered> {/* Note you can also pass in a string "large/default" or a number for custom margins */} - <Wrap margin={['large', 0, 0, 0]}> + <Wrap padding={['large', 0, 0, 0]}> {/* NOTE: this probably should be withComponent as part of a <dl> */} <Column colWidth="1/3" noPadding> <Heading size="medium" center> |