diff --git a/src/client/components/main_layout/Main.js b/src/client/components/main_layout/Main.js index 9a0f58e706cd6427e36031b1eb23142b6ac11971..03e9b554f324ed9ef62f150ea82ddd547813f248 100644 --- a/src/client/components/main_layout/Main.js +++ b/src/client/components/main_layout/Main.js @@ -15,11 +15,6 @@ const styles = theme => ({ overflow: 'auto' } }, - heroContent: { - maxWidth: 1100, - paddingTop: theme.spacing(3), - paddingBottom: theme.spacing(1) - }, layout: { width: 'auto', marginLeft: theme.spacing(3), @@ -30,6 +25,10 @@ const styles = theme => ({ marginRight: 'auto' } }, + heroContent: { + paddingTop: theme.spacing(3), + paddingBottom: theme.spacing(1) + }, licenceText: { marginTop: theme.spacing(0.5), fontSize: '0.7em' @@ -52,13 +51,9 @@ const Main = props => { {intl.get('selectPerspective')} </Typography> </div> - </div> - <div className={classes.layout}> <Grid container spacing={1}> {props.perspectives.map(perspective => <MainCard key={perspective.id} perspective={perspective} />)} </Grid> - </div> - <div className={classes.layout}> <Typography className={classes.licenceText}>{intl.getHTML('mainPageImageLicence')}</Typography> </div> </div> diff --git a/src/client/components/main_layout/MainCard.js b/src/client/components/main_layout/MainCard.js index 8a53c3e3eafe960bd05ad4eb86876835abb99381..d24fc71b02562f2cfb2de799badf112ab7c10d70 100644 --- a/src/client/components/main_layout/MainCard.js +++ b/src/client/components/main_layout/MainCard.js @@ -22,6 +22,10 @@ const useStyles = makeStyles(theme => ({ backgroundSize: 'cover', backgroundPosition: 'center' }, + [theme.breakpoints.up('lg')]: { + height: 180, + backgroundSize: 'cover' + }, '&:hover': { background: `linear-gradient( rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8) ), url(${props.perspective.frontPageImage})` } @@ -35,7 +39,7 @@ const MainCard = props => { <Grid className={classes.link} key={perspective.id} - item xs={12} sm={4} md + item xs={12} sm={4} md lg={4} component={Link} to={`/${perspective.id}/faceted-search`} >