Improve home page UI.

src/components/card-grid.jsx

@@ -2,13 +2,14 @@ import React from 'react';
 import Button from '@material-ui/core/Button';
 import Card from '@material-ui/core/Card';
 import CardActions from '@material-ui/core/CardActions';
+import CardActionArea from '@material-ui/core/CardActionArea';
 import CardContent from '@material-ui/core/CardContent';
 import CardMedia from '@material-ui/core/CardMedia';
 import Typography from '@material-ui/core/Typography';
-import infos from '../data/dungeon-info.json';
 import Grid from '@material-ui/core/Grid';
-import { homeStyles } from '../utils/styles';
 import ArrowForwardIcon from '@material-ui/icons/ArrowForward';
+import infos from '../data/dungeon-info.json';
+import { homeStyles } from '../utils/styles';
 
 export default function CardGrid(props) {
   const classes = homeStyles();
@@ -25,25 +26,30 @@ export default function CardGrid(props) {
       : `${process.env.GATSBY_BASE_IMAGE_URL}${info.image}`;
 
   return info ? (
-    <Grid item xs={12} sm={6} md={4}>
-      <Card className={classes.card}>
-        <CardMedia
-          className={classes.cardMedia}
-          image={defaultImage}
-          title={info.display}
-        />
-        <CardContent className={classes.cardContent}>
-          <Typography gutterBottom variant='h5' component='h2'>
-            {info.display}
-          </Typography>
-          <Typography>{post.excerpt}</Typography>
-        </CardContent>
-        <CardActions dir='rtl'>
-          <Button size='small' color='primary' href={slug.slice(0, -1)}>
-            <ArrowForwardIcon />
-          </Button>
-        </CardActions>
-      </Card>
+    <Grid item xs={props.xs} sm={props.sm} md={props.md}>
+      <CardActionArea
+        href={slug.slice(0, -1)}
+        style={{ textDecoration: 'none' }}
+      >
+        <Card className={classes.card}>
+          <CardMedia
+            className={classes.cardMedia}
+            image={defaultImage}
+            title={info.display}
+          />
+          <CardContent className={classes.cardContent}>
+            <Typography gutterBottom variant='h5' component='h2'>
+              {info.display}
+            </Typography>
+            <Typography>{post.excerpt}</Typography>
+          </CardContent>
+          <CardActions dir='rtl'>
+            <Button size='small' color='primary'>
+              <ArrowForwardIcon />
+            </Button>
+          </CardActions>
+        </Card>
+      </CardActionArea>
     </Grid>
   ) : null;
 }

src/components/hide-appbar.jsx

@@ -44,4 +44,4 @@ export default function HideAppBar(props) {
       </HideOnScroll>
     </React.Fragment>
   );
-}
+}

src/pages/index.jsx

@@ -12,7 +12,6 @@ import { homeStyles } from '../utils/styles';
 export default function Home({ data }) {
   const classes = homeStyles();
   const posts = data.allMarkdownRemark.nodes;
-
   return (
     <React.Fragment>
       <CssBaseline />
@@ -41,11 +40,11 @@ export default function Home({ data }) {
             </Typography>
           </Container>
         </div>
-        <Container className={classes.cardGrid} maxWidth='md'>
+        <Container className={classes.cardGrid} maxWidth='lg'>
           {/* End hero unit */}
-          <Grid container spacing={4}>
+          <Grid container spacing={6}>
             {posts.map((post, index) => (
-              <CardGrid item key={index} post={post} />
+              <CardGrid item key={index} post={post} xs={12} sm={6} md={3} />
             ))}
           </Grid>
         </Container>

src/utils/styles.js

@@ -25,6 +25,7 @@ export const homeStyles = makeStyles((theme) => ({
   },
   cardContent: {
     flexGrow: 1,
+    textAlign: 'center',
   },
   footer: {
     backgroundColor: theme.palette.background.paper,