make landing page mobile friendly

This commit is contained in:
Barry Gitarts 2019-11-20 14:51:32 -05:00 committed by Barry G
parent 7fde67b0cd
commit 791a0dd409
4 changed files with 20 additions and 6 deletions

View File

@ -29,7 +29,7 @@ const useStyles = makeStyles(theme => ({
justifyContent: 'space-evenly', justifyContent: 'space-evenly',
alignItems: 'center', alignItems: 'center',
width: '100%', width: '100%',
fontSize: '5.4vw', fontSize: '14px',
[theme.breakpoints.up('md')]: { [theme.breakpoints.up('md')]: {
fontSize: '14px' fontSize: '14px'
} }

View File

@ -114,7 +114,7 @@ function TableCards({ profiles, classes }) {
<Typography className={lightText}>{`By ${creator}`}</Typography> <Typography className={lightText}>{`By ${creator}`}</Typography>
<FundingDetail classes={classes} pledgesInfos={pledgesInfos} goal={goal} goalToken={goalToken} cellStyling={classnames(lightText, classes.cardAmount)} /> <FundingDetail classes={classes} pledgesInfos={pledgesInfos} goal={goal} goalToken={goalToken} cellStyling={classnames(lightText, classes.cardAmount)} />
<Link to={profileUrl} className={classnames(classes.cardLink, cellStyling, classes.cardMore, classes.paddingNone)}> <Link to={profileUrl} className={classnames(classes.cardLink, cellStyling, classes.cardMore, classes.paddingNone)}>
<Typography className={classnames(lightText, classes.paddingNone)}>Read more</Typography> <Typography className={classnames(classes.paddingNone, classes.green)}>Read more</Typography>
</Link> </Link>
</Fragment> </Fragment>
) )

View File

@ -10,6 +10,9 @@ import Icon from '../base/icons/IconByName'
import AssembleFlow from '../image/AssembleFlow' import AssembleFlow from '../image/AssembleFlow'
const useStyles = makeStyles(({ const useStyles = makeStyles(({
breakpoints: {
up
},
palette: { palette: {
primary, primary,
common: { darkGrey } common: { darkGrey }
@ -27,18 +30,26 @@ const useStyles = makeStyles(({
fontSize: '20px' fontSize: '20px'
}, },
creatorsCard: { creatorsCard: {
[up('md')]: {
gridColumn: '14 / 24', gridColumn: '14 / 24',
marginBottom: 0
},
gridColumn: '1 / 49',
boxShadow: '0px 15px 29px rgba(0, 34, 51, 0.08)', boxShadow: '0px 15px 29px rgba(0, 34, 51, 0.08)',
borderRadius: '8px', borderRadius: '8px',
background: '#FFFFFF', background: '#FFFFFF',
padding: '1rem' padding: '1rem',
marginBottom: '1rem'
}, },
cardContent: { cardContent: {
display: 'grid', display: 'grid',
gridTemplateRows: '3.5rem 1.5rem auto 2rem' gridTemplateRows: '3.5rem 1.5rem auto 2rem'
}, },
fundersCard: { fundersCard: {
[up('md')]: {
gridColumn: '26 / 36', gridColumn: '26 / 36',
},
gridColumn: '1 / 49',
boxShadow: '0px 15px 29px rgba(0, 34, 51, 0.08)', boxShadow: '0px 15px 29px rgba(0, 34, 51, 0.08)',
borderRadius: '8px', borderRadius: '8px',
background: '#FFFFFF', background: '#FFFFFF',

View File

@ -20,7 +20,10 @@ const useStyles = makeStyles(theme => ({
main: { main: {
display: 'grid', display: 'grid',
gridTemplateColumns: 'repeat(48, [col] 1fr)', gridTemplateColumns: 'repeat(48, [col] 1fr)',
gridTemplateRows: '12rem 5rem auto auto 6rem',
[theme.breakpoints.up('md')]: {
gridTemplateRows: '4rem 4rem auto auto 6rem' gridTemplateRows: '4rem 4rem auto auto 6rem'
}
}, },
title: { title: {
fontSize: '2rem', fontSize: '2rem',