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