aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website')
-rw-r--r--packages/website/ts/@next/components/button.tsx13
-rw-r--r--packages/website/ts/@next/components/layout.tsx6
-rw-r--r--packages/website/ts/@next/components/sections/landing/hero.tsx2
-rw-r--r--packages/website/ts/@next/constants/utilities.tsx2
4 files changed, 17 insertions, 6 deletions
diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx
index ea7f286b3..24da860ba 100644
--- a/packages/website/ts/@next/components/button.tsx
+++ b/packages/website/ts/@next/components/button.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
import { Link as ReactRouterLink } from 'react-router-dom';
import styled from 'styled-components';
+import { BREAKPOINTS } from 'ts/@next/components/layout';
import { colors } from 'ts/style/colors';
interface ButtonInterface {
@@ -71,6 +72,16 @@ export const ButtonWrap = styled.div`
a + a,
a + button,
button + a {
- margin-left: 10px;
+ @media (min-width: ${BREAKPOINTS.mobile}) {
+ margin-left: 10px;
+ }
+
+ @media (max-width: ${BREAKPOINTS.mobile}) {
+ margin: 0 10px;
+ }
+ }
+
+ @media (max-width: ${BREAKPOINTS.mobile}) {
+ white-space: nowrap;
}
`;
diff --git a/packages/website/ts/@next/components/layout.tsx b/packages/website/ts/@next/components/layout.tsx
index 6584f3fa4..a8734aec8 100644
--- a/packages/website/ts/@next/components/layout.tsx
+++ b/packages/website/ts/@next/components/layout.tsx
@@ -1,5 +1,5 @@
import styled from 'styled-components';
-import { getCSSPadding, PaddingInterface } from 'ts/@next/constants/utilities';
+import {getCSSPadding, PADDING_SIZES, PaddingInterface} from 'ts/@next/constants/utilities';
interface WrapWidths {
default: string;
@@ -83,7 +83,7 @@ export const Main = styled.main`
// just <Section asElement?="div/section/footer/header/whatever" /> ?
export const Section = styled.section<SectionProps>`
width: ${props => props.isFullWidth ? `calc(100% + ${GUTTER * 2}px)` : '100%'};
- padding: ${props => !props.isNoPadding && (props.isPadLarge ? '60px 30px' : '30px')};
+ padding: ${props => !props.isNoPadding && (props.isPadLarge ? `${PADDING_SIZES.large} ${PADDING_SIZES.default}` : PADDING_SIZES.default)};
background-color: ${props => props.bgColor};
position: ${props => props.isRelative && 'relative'};
overflow: ${props => props.isRelative && 'hidden'};
@@ -132,7 +132,7 @@ export const Column = styled.div<ColumnProps>`
background-color: ${props => props.bgColor};
@media (min-width: ${BREAKPOINTS.mobile}) {
- padding: ${props => !props.isNoPadding && (props.isPadLarge ? '60px 30px' : '30px')};
+ padding: ${props => !props.isNoPadding && (props.isPadLarge ? `${PADDING_SIZES.large} ${PADDING_SIZES.default}` : PADDING_SIZES.default)};
width: ${props => props.colWidth ? COLUMN_WIDTHS[props.colWidth] : '100%'};
}
diff --git a/packages/website/ts/@next/components/sections/landing/hero.tsx b/packages/website/ts/@next/components/sections/landing/hero.tsx
index 98e111805..d94da18ec 100644
--- a/packages/website/ts/@next/components/sections/landing/hero.tsx
+++ b/packages/website/ts/@next/components/sections/landing/hero.tsx
@@ -6,7 +6,7 @@ import {Heading, Paragraph} from 'ts/@next/components/text';
import LogoOutlined from 'ts/@next/icons/illustrations/logo-outlined.svg';
export const SectionLandingHero = () => (
- <Section>
+ <Section isPadLarge={true}>
<Wrap isReversed={true}>
<Column colWidth="1/2">
<WrapCentered>
diff --git a/packages/website/ts/@next/constants/utilities.tsx b/packages/website/ts/@next/constants/utilities.tsx
index b6b31e141..ab703c8f7 100644
--- a/packages/website/ts/@next/constants/utilities.tsx
+++ b/packages/website/ts/@next/constants/utilities.tsx
@@ -7,7 +7,7 @@ interface PaddingSizes {
[key: string]: string;
}
-const PADDING_SIZES: PaddingSizes = {
+export const PADDING_SIZES: PaddingSizes = {
'default': '30px',
'large': '60px',
'small': '15px',