aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/@next
diff options
context:
space:
mode:
authorEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-11-30 22:23:26 +0800
committerEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-11-30 22:23:26 +0800
commit7962e4050c60e6f7eb57740da19e7b7ef9bec6a6 (patch)
tree7206a123e3b8e942bb93f45edbdaae7fdfd2a95c /packages/website/ts/@next
parent6bf988942936a8cbb7a42a2fed9b586b16c65029 (diff)
downloaddexon-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.tsx8
-rw-r--r--packages/website/ts/@next/pages/landing.tsx2
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>