aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website')
-rw-r--r--packages/website/ts/@next/components/button.tsx2
-rw-r--r--packages/website/ts/@next/components/layout.tsx13
-rw-r--r--packages/website/ts/@next/pages/landing.tsx2
3 files changed, 12 insertions, 5 deletions
diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx
index 9cadc4fd5..067576d3c 100644
--- a/packages/website/ts/@next/components/button.tsx
+++ b/packages/website/ts/@next/components/button.tsx
@@ -8,6 +8,8 @@ interface ButtonInterface {
text: string;
transparent?: boolean;
inline?: boolean;
+ href?: string,
+ onClick?: Function,
}
const StyledButton = styled.button<ButtonInterface>`
diff --git a/packages/website/ts/@next/components/layout.tsx b/packages/website/ts/@next/components/layout.tsx
index 81ae43db7..6f6e6cd6b 100644
--- a/packages/website/ts/@next/components/layout.tsx
+++ b/packages/website/ts/@next/components/layout.tsx
@@ -17,6 +17,7 @@ interface SectionProps {
noPadding?: any;
noMargin?: any;
bgColor?: string;
+ fullWidth?: any;
}
interface WrapProps {
@@ -44,6 +45,9 @@ const _getColumnWidth = (args: GetColWidthArgs) => {
const GUTTER = 30 as number;
const MAX_WIDTH = 1500;
+const BREAKPOINTS = {
+ mobile: '768px',
+};
const WRAPPER_WIDTHS: WrapWidths = {
default: `${MAX_WIDTH}px`, // tbd
full: '100%',
@@ -66,9 +70,10 @@ export const Main = styled.main`
`;
export const Section = styled.section<SectionProps>`
- width: 100%;
+ width: ${props => props.fullWidth ? `calc(100% + ${GUTTER * 2}px)` : '100%'};
padding: ${props => !props.noPadding && '30px'};
- margin-bottom: ${props => !props.noMargin && '30px'};
+ margin-bottom: ${props => !props.noMargin && `${GUTTER}px`};
+ margin-left: ${props => props.fullWidth && `-${GUTTER}px`};
background-color: ${props => props.bgColor};
border: 1px dotted rgba(0, 255, 0, 0.3);
`;
@@ -78,7 +83,7 @@ export const Wrap = styled.div<WrapProps>`
background-color: ${props => props.bgColor};
margin: 0 auto;
- @media (min-width: 768px) {
+ @media (min-width: ${BREAKPOINTS.mobile}) {
display: flex;
justify-content: space-between;
}
@@ -88,7 +93,7 @@ export const Column = styled.div<ColumnProps>`
padding: ${props => !props.noPadding && '30px'};
border: 1px dotted rgba(255, 0, 0, 0.3);
- @media (min-width: 768px) {
+ @media (min-width: ${BREAKPOINTS.mobile}) {
width: ${props => props.colWidth ? COLUMN_WIDTHS[props.colWidth] : '100%'};
}
`;
diff --git a/packages/website/ts/@next/pages/landing.tsx b/packages/website/ts/@next/pages/landing.tsx
index 603a26ba3..fa2bf45a1 100644
--- a/packages/website/ts/@next/pages/landing.tsx
+++ b/packages/website/ts/@next/pages/landing.tsx
@@ -52,7 +52,7 @@ export const NextLanding = () => (
</Wrap>
</Section>
- <Section noPadding>
+ <Section fullWidth noPadding>
<Wrap width="full">
<Column colWidth="2/3">
SAMPLE FLUSHED width