FIx responsive landing

This commit is contained in:
Ines Montani 2019-03-18 16:24:52 +01:00
parent 08284f3a11
commit a20d3772fd
3 changed files with 12 additions and 6 deletions

View File

@ -44,6 +44,8 @@ export const LandingGrid = ({ cols = 3, blocks = false, children }) => (
</Content> </Content>
) )
export const LandingCol = ({ children }) => <div className={classes.col}>{children}</div>
export const LandingCard = ({ title, children }) => ( export const LandingCard = ({ title, children }) => (
<div className={classes.card}> <div className={classes.card}>
{title && <H3>{title}</H3>} {title && <H3>{title}</H3>}

View File

@ -127,6 +127,9 @@
.banner-text .banner-text
padding-top: 0 padding-top: 0
.col
grid-column: 1 / span 2
.banner-button .banner-button
margin-bottom: var(--spacing-sm) margin-bottom: var(--spacing-sm)
text-align: right text-align: right

View File

@ -8,6 +8,7 @@ import {
LandingSubtitle, LandingSubtitle,
LandingGrid, LandingGrid,
LandingCard, LandingCard,
LandingCol,
LandingButton, LandingButton,
LandingDemo, LandingDemo,
LandingBannerGrid, LandingBannerGrid,
@ -111,7 +112,7 @@ const Landing = ({ data }) => {
<LandingGrid> <LandingGrid>
<LandingDemo title="Edit the code & try spaCy">{CODE_EXAMPLE}</LandingDemo> <LandingDemo title="Edit the code & try spaCy">{CODE_EXAMPLE}</LandingDemo>
<div> <LandingCol>
<H2>Features</H2> <H2>Features</H2>
<Ul> <Ul>
<Li> <Li>
@ -148,7 +149,7 @@ const Landing = ({ data }) => {
<Li>State-of-the-art speed</Li> <Li>State-of-the-art speed</Li>
<Li>Robust, rigorously evaluated accuracy</Li> <Li>Robust, rigorously evaluated accuracy</Li>
</Ul> </Ul>
</div> </LandingCol>
</LandingGrid> </LandingGrid>
<LandingBannerGrid> <LandingBannerGrid>
@ -213,7 +214,7 @@ const Landing = ({ data }) => {
</LandingBanner> </LandingBanner>
<LandingGrid cols={2}> <LandingGrid cols={2}>
<div> <LandingCol>
<H2>Benchmarks</H2> <H2>Benchmarks</H2>
<p> <p>
In 2015, independent researchers from Emory University and Yahoo! Labs In 2015, independent researchers from Emory University and Yahoo! Labs
@ -231,11 +232,11 @@ const Landing = ({ data }) => {
See details See details
</Button> </Button>
</p> </p>
</div> </LandingCol>
<div> <LandingCol>
<BenchmarksChoi /> <BenchmarksChoi />
</div> </LandingCol>
</LandingGrid> </LandingGrid>
</> </>
) )