Use defined paddings

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',