aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/@next/components/layout.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts/@next/components/layout.tsx')
-rw-r--r--packages/website/ts/@next/components/layout.tsx11
1 files changed, 10 insertions, 1 deletions
diff --git a/packages/website/ts/@next/components/layout.tsx b/packages/website/ts/@next/components/layout.tsx
index d64bcf74a..c807ccb36 100644
--- a/packages/website/ts/@next/components/layout.tsx
+++ b/packages/website/ts/@next/components/layout.tsx
@@ -83,17 +83,26 @@ export const Section = styled.section<SectionProps>`
}
`;
-export const Wrap = styled.div<WrapProps>`
+const WrapBase = styled.div<WrapProps>`
max-width: ${props => WRAPPER_WIDTHS[props.width || 'default']};
background-color: ${props => props.bgColor};
margin: 0 auto;
+`;
+export const Wrap = styled(WrapBase)`
@media (min-width: ${BREAKPOINTS.mobile}) {
display: flex;
justify-content: space-between;
}
`;
+export const WrapCentered = styled(WrapBase)`
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+`;
+
export const Column = styled.div<ColumnProps>`
padding: ${props => !props.noPadding && '30px'};
border: 1px dotted rgba(255, 0, 0, 0.3);