diff --git a/src/components/elements/Card/Card.stories.js b/src/components/elements/Card/Card.stories.js index 92010ee88..de2a1bd99 100644 --- a/src/components/elements/Card/Card.stories.js +++ b/src/components/elements/Card/Card.stories.js @@ -12,10 +12,10 @@ import { Card } from 'components/elements' export default () => ( - - - - + + + + )` diff --git a/src/components/elements/Toggle/Toggle.js b/src/components/elements/Toggle/Toggle.js index ec40baf72..f18c3df5c 100644 --- a/src/components/elements/Toggle/Toggle.js +++ b/src/components/elements/Toggle/Toggle.js @@ -25,7 +25,7 @@ function Toggle ({ onChange, children, defaultValue }) { return ( - + {children.map((value, index) => { const isLast = index + 1 === children.length const isActive = active === value diff --git a/src/components/elements/Toolbar.js b/src/components/elements/Toolbar.js index 483ff9751..d387dabe6 100644 --- a/src/components/elements/Toolbar.js +++ b/src/components/elements/Toolbar.js @@ -16,7 +16,7 @@ Toolbar.defaultProps = { display: 'flex', px: 0, height: TOOLBAR_HEIGHT, - maxWidth: layout.medium + maxWidth: layout.normal } export default Toolbar diff --git a/src/components/elements/Unavatar/Unavatar.js b/src/components/elements/Unavatar/Unavatar.js index a729985ea..583fe5954 100644 --- a/src/components/elements/Unavatar/Unavatar.js +++ b/src/components/elements/Unavatar/Unavatar.js @@ -6,10 +6,10 @@ const StyledImage = styled(Image)` max-width: inherit; ` -export default ({ from = '', query, ...props }) => ( +export default ({ query, ...props }) => ( diff --git a/src/components/elements/Unavatar/Unavatar.stories.js b/src/components/elements/Unavatar/Unavatar.stories.js index 9013e169d..4d9a888a1 100644 --- a/src/components/elements/Unavatar/Unavatar.stories.js +++ b/src/components/elements/Unavatar/Unavatar.stories.js @@ -7,7 +7,7 @@ const code = ` import { Unavatar } from 'components/elements' export default () => ( - + ) ` diff --git a/src/components/markdown/index.js b/src/components/markdown/index.js index 2712ce214..dd34ad755 100644 --- a/src/components/markdown/index.js +++ b/src/components/markdown/index.js @@ -27,10 +27,10 @@ import { import MicrolinkBase from '../patterns/Microlink/Microlink' import DemoIntegrations from './DemoIntegrations' -import { textGradient } from '../../theme' +import { layout, textGradient } from '../../theme' import Heading from '../elements/Heading' -const { Container, WIDTH, CONTAINER_SPACE } = withContainer +const { Container, CONTAINER_SPACE } = withContainer const Link = styled(LinkBase)`` @@ -60,7 +60,7 @@ export const MultiCodeEditor = withContainer( export const H1 = withTitle(withSlug(styled(Heading)``)) H1.defaultProps = { - maxWidth: WIDTH.normal, + maxWidth: layout.small, as: 'h1', fontSize: [`calc(${fontSizes[5]} * 0.75px)`, 5], lineHeight: [2, 3], @@ -77,7 +77,7 @@ const H2Base = styled(Heading)`` H2Base.defaultProps = { ml: 'auto', mr: 'auto', - maxWidth: WIDTH.normal, + maxWidth: layout.small, as: 'h2', fontSize: [`calc(${fontSizes[4]} * 0.75px)`, 4], lineHeight: [2, 3], @@ -108,7 +108,7 @@ export const H3 = withTitle(withSlug(styled(Heading)``)) H3.defaultProps = { ml: 'auto', mr: 'auto', - maxWidth: WIDTH.normal, + maxWidth: layout.small, as: 'h3', fontSize: 3, lineHeight: 2, @@ -123,7 +123,7 @@ export const H4 = withTitle(withSlug(styled(Heading)``)) H4.defaultProps = { ml: 'auto', mr: 'auto', - maxWidth: WIDTH.normal, + maxWidth: layout.small, as: 'h4', fontSize: 2, lineHeight: 2, @@ -138,7 +138,7 @@ export const H5 = withTitle(withSlug(styled(Heading)``)) H5.defaultProps = { ml: 'auto', mr: 'auto', - maxWidth: WIDTH.normal, + maxWidth: layout.small, as: 'h5', fontSize: 1, lineHeight: 2, @@ -153,7 +153,7 @@ export const H6 = withTitle(withSlug(styled(Heading)``)) H6.defaultProps = { ml: 'auto', mr: 'auto', - maxWidth: WIDTH.normal, + maxWidth: layout.small, as: 'h6', fontSize: 1, color: 'gray9', @@ -165,10 +165,11 @@ H6.defaultProps = { } export const Paraph = props => { - const special = - get(props, 'children.props.src') || get(props, 'children.props.href') - const maxWidth = special ? WIDTH.large : WIDTH.normal - return + const isMedia = + get(props, 'children.props.props.src') || + get(props, 'children.props.props.href') + const maxWidth = isMedia ? layout.normal : layout.small + return } Paraph.defaultProps = { @@ -192,7 +193,7 @@ Ul.defaultProps = { ml: 'auto', mr: 'auto', as: 'ul', - maxWidth: WIDTH.normal, + maxWidth: layout.small, ...CONTAINER_SPACE } @@ -209,7 +210,7 @@ Li.defaultProps = { mr: 'auto', mb: 2, as: 'li', - maxWidth: WIDTH.normal + maxWidth: layout.small } const codeStyle = css` @@ -237,7 +238,6 @@ CodeInline.defaultProps = { } const mediaStyle = { - maxWidth: `${WIDTH.normal}px`, borderRadius: '3px', ml: 'auto', mr: 'auto', @@ -247,11 +247,12 @@ const mediaStyle = { const _ImageBase = styled(ImageBase)`` _ImageBase.defaultProps = { - ...mediaStyle, - lazy: false + ...mediaStyle } -export const Image = withContainer(_ImageBase) +export const Image = withContainer(_ImageBase, { + maxWidth: 'inherit' +}) const _VideoBase = styled(VideoBase)`` @@ -290,7 +291,7 @@ export const Tweet = props => ( export const Blockquote = styled.blockquote` margin: auto; - max-width: ${WIDTH.normal}px; + max-width: ${layout.small}; border-left: 3px solid ${colors.black}; padding-left: ${space[3]}; font-style: italic; diff --git a/src/components/pages/home/explore.js b/src/components/pages/home/explore.js deleted file mode 100644 index 183d72b79..000000000 --- a/src/components/pages/home/explore.js +++ /dev/null @@ -1,158 +0,0 @@ -import React from 'react' -import { Link, Text, Flex, Card } from 'components/elements' -import { Headline } from 'components/patterns' -import * as Icons from 'components/icons' -import chunk from 'lodash/chunk' - -const CustomCard = ({ blockOne, blockTwo, ...props }) => ( - - - {blockOne} - - - {blockTwo} - - -) - -const ICON_SIZE = ['60px', '60px', '80px', '80px'] - -const RATIO = [0.6, 0.6, 0.7, 0.7] - -const children = [ - { - blockOne: , - blockTwo: ( - <> - React - - Documentation - - - - CodeSandbox - {' '} - /{' '} - - Storybook - - - - ) - }, - { - blockOne: , - blockTwo: ( - <> - Vue - - Documentation - - - - CodeSandbox - {' '} - /{' '} - - Storybook - - - - ) - }, - { - blockOne: , - blockTwo: ( - <> - Vanilla - - Documentation - - - - CodeSandbox - {' '} - /{' '} - - Storybook - - - - ) - }, - { - blockOne: , - blockTwo: ( - <> - Jekyll - - Documentation - - - ) - }, - { - blockOne: ( - - πŸŽ‰ - - ), - blockTwo: ( - - - Request an integration - {' '} - - ) - } -] - -const Explore = ({ itemsPerRow = 3, title, caption, ...props }) => { - return ( - - - - - {chunk(children, itemsPerRow).map((row, chunkIndex) => ( - - {row.map((rowProps, rowIndex) => ( - - ))} - - ))} - - - ) -} - -export default Explore diff --git a/src/components/pages/home/index.js b/src/components/pages/home/index.js index 6e401ad9a..ff0cede44 100644 --- a/src/components/pages/home/index.js +++ b/src/components/pages/home/index.js @@ -1,7 +1,6 @@ import Hero from './hero' import Screenshots from './screenshots' import Meta from './meta' -import Explore from './explore' import Analytics from './analytics' -export { Hero, Screenshots, Meta, Explore, Analytics } +export { Hero, Screenshots, Meta, Analytics } diff --git a/src/components/pages/home/meta.js b/src/components/pages/home/meta.js index 07d2ddd68..c4d7bca3b 100644 --- a/src/components/pages/home/meta.js +++ b/src/components/pages/home/meta.js @@ -40,7 +40,7 @@ const Meta = ({ demoLinks, ...props }) => { mb={[0, 0, 0, 3]} px={[5, 6, 6, 6]} textAlign='center' - maxWidth={layout.medium} + maxWidth={layout.normal} > Engage your content with enriched media. Convert your links into diff --git a/src/components/pages/home/screenshots.js b/src/components/pages/home/screenshots.js index 8ff6e0880..960a7d856 100644 --- a/src/components/pages/home/screenshots.js +++ b/src/components/pages/home/screenshots.js @@ -100,7 +100,7 @@ const Screenshots = props => { mb={[0, 0, 0, 3]} px={[5, 6, 6, 6]} textAlign='center' - maxWidth={layout.medium} + maxWidth={layout.normal} > Take a retina display screenshot of any URL. Automatic CDN diff --git a/src/components/patterns/Aside/AsideBase.js b/src/components/patterns/Aside/AsideBase.js index ea6ea893b..3e6a0b7c0 100644 --- a/src/components/patterns/Aside/AsideBase.js +++ b/src/components/patterns/Aside/AsideBase.js @@ -115,8 +115,8 @@ const Aside = ({ mt={[0, 0, 0, 3]} pb={3} mb={4} - ml={3} - pl={2} + ml={[3, 3, 3, 0]} + pl={[2, 2, 2, 0]} > {CloseButton && ( diff --git a/src/components/patterns/Footer/Footer.js b/src/components/patterns/Footer/Footer.js index 4ef682d8a..4531625a8 100644 --- a/src/components/patterns/Footer/Footer.js +++ b/src/components/patterns/Footer/Footer.js @@ -63,7 +63,7 @@ export default ({ theme, ...props }) => { } = isDark ? DARK_THEME : LIGHT_THEME return ( - + (width * 9) / 16 -const aspectRatio = (ratios, base = layout.medium) => { +const BASE = Number(layout.normal.replace('px', '')) + +const aspectRatio = (ratios, base = BASE) => { const width = ratios.map(n => n * base) const height = width.map(getRatio) diff --git a/src/helpers/hoc/with-container.js b/src/helpers/hoc/with-container.js index 7b5e7289e..485908635 100644 --- a/src/helpers/hoc/with-container.js +++ b/src/helpers/hoc/with-container.js @@ -1,12 +1,7 @@ import React from 'react' import Box from '../../components/elements/Box' -const LAYOUT_WIDTH = 650 - -export const WIDTH = { - normal: LAYOUT_WIDTH, - large: LAYOUT_WIDTH * 1.2 -} +import { layout } from 'theme' export const CONTAINER_SPACE = { mt: 3, @@ -15,7 +10,7 @@ export const CONTAINER_SPACE = { export const Container = props => ( { maxWidth={10} children='We’re constantly improving the platform. See here notable changes in our lineup of products & improvements over the time.' /> - + {changelog.map(({ date, notes }) => { console.log(notes) return ( diff --git a/src/pages/iframe.js b/src/pages/iframe.js index 557feb3d7..41e717bd4 100644 --- a/src/pages/iframe.js +++ b/src/pages/iframe.js @@ -302,7 +302,7 @@ const links = [ export default () => { return ( - + + ( - - - - - +const ICON_SIZE = ['60px', '60px', '60px', '60px'] + +const CARD_SIZE = [0.5, 0.5, 0.6, 0.6] + +const CustomCard = ({ blockOne, blockTwo, ...props }) => ( + + + {blockOne} + + + {blockTwo} + + +) + +const INTEGRATIONS = [ + { + blockOne: , + blockTwo: ( + <> + React + + Documentation + + + + CodeSandbox + {' '} + /{' '} + + Storybook + + + + ) + }, + { + blockOne: , + blockTwo: ( + <> + Vue + + Documentation + + + + CodeSandbox + {' '} + /{' '} + + Storybook + + + + ) + }, + { + blockOne: , + blockTwo: ( + <> + Vanilla + + Documentation + + + + CodeSandbox + {' '} + /{' '} + + Storybook + + + + ) + }, + { + blockOne: , + blockTwo: ( + <> + Jekyll + + Documentation + + + ) + }, + { + blockOne: ( + + πŸŽ‰ + + ), + blockTwo: ( + + + Request an integration + {' '} + + ) + } +] - - - +export default ({ meta, ...props }) => ( + + + + + + {INTEGRATIONS.map((integration, index) => ( + + ))} + + ) diff --git a/src/pages/oss.js b/src/pages/oss.js index 4fc246072..bfe86500d 100644 --- a/src/pages/oss.js +++ b/src/pages/oss.js @@ -26,7 +26,7 @@ export default () => { maxWidth={10} children="It's our great privilege to build our products using open source software (OSS) and we want to give the same effort back." /> - + {repos.map(({ name, description, stars, issues, url }) => ( { pt={[0, 0, 0, 4]} ml={[3, 3, 3, 'auto']} mr={[3, 3, 3, 'auto']} - px={2} - maxWidth={layout.large} + px={0} + maxWidth={layout.normal} >