diff options
| author | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-12-10 21:26:32 +0800 |
|---|---|---|
| committer | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-12-10 21:26:32 +0800 |
| commit | 55ed406746e3a1bd5cca6010e438b8f2a3550a3c (patch) | |
| tree | 08bd10307354c0b10f9771a3cbf63c8396e78967 /packages/website | |
| parent | f93e77e77cede2ef87db8bfc2d40d5a9b842e9d7 (diff) | |
| download | dexon-sol-tools-55ed406746e3a1bd5cca6010e438b8f2a3550a3c.tar dexon-sol-tools-55ed406746e3a1bd5cca6010e438b8f2a3550a3c.tar.gz dexon-sol-tools-55ed406746e3a1bd5cca6010e438b8f2a3550a3c.tar.bz2 dexon-sol-tools-55ed406746e3a1bd5cca6010e438b8f2a3550a3c.tar.lz dexon-sol-tools-55ed406746e3a1bd5cca6010e438b8f2a3550a3c.tar.xz dexon-sol-tools-55ed406746e3a1bd5cca6010e438b8f2a3550a3c.tar.zst dexon-sol-tools-55ed406746e3a1bd5cca6010e438b8f2a3550a3c.zip | |
Use defined paddings
Diffstat (limited to 'packages/website')
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', |