From 201b04e4daebef33e184c63586837e759e08f57c Mon Sep 17 00:00:00 2001
From: Daniel Pett <dejp3@cam.ac.uk>
Date: Sat, 2 Dec 2023 23:23:01 +0000
Subject: [PATCH] Fix some layout issues

---
 src/components/structure/blogFrontPage.js     | 11 ++++----
 src/components/structure/post-card-front.js   | 27 ++++++++++---------
 src/components/structure/projectsFrontPage.js |  5 ++--
 src/pages/index.js                            |  8 +++---
 src/styles/footer-style.module.css            |  1 -
 5 files changed, 27 insertions(+), 25 deletions(-)

diff --git a/src/components/structure/blogFrontPage.js b/src/components/structure/blogFrontPage.js
index 40d38423d..cb5168651 100644
--- a/src/components/structure/blogFrontPage.js
+++ b/src/components/structure/blogFrontPage.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import {graphql, useStaticQuery} from 'gatsby';
 import PostCardFront from "./post-card-front";
-import {Container} from 'react-bootstrap';
+import {Container, Row} from 'react-bootstrap';
 
 const query = graphql`
     {
@@ -49,10 +49,11 @@ const LatestPosts = () => {
     console.log(posts)
     return (
         <Container className={'py-2 d-flex my-4'} >
-                    {posts.map(({node}) => (
-
-                        <PostCardFront key={node.id} post={node}/>
-                    ))}
+            <Row>
+                {posts.map(({node}) => (
+                    <PostCardFront key={node.id} post={node}/>
+                ))}
+            </Row>
         </Container>
     );
 };
diff --git a/src/components/structure/post-card-front.js b/src/components/structure/post-card-front.js
index 8d39d4038..b135ad0c7 100644
--- a/src/components/structure/post-card-front.js
+++ b/src/components/structure/post-card-front.js
@@ -1,21 +1,22 @@
 import React from "react";
-import {Card, CardImg, CardBody, CardImgOverlay, CardTitle, CardText} from "react-bootstrap";
+import {Card, CardImg, CardBody, CardImgOverlay, CardTitle, CardText, Col} from "react-bootstrap";
 import {Link} from "gatsby";
 import {GatsbyImage, getImage} from "gatsby-plugin-image";
 
 const PostCardFront = ({post}) => (
-
-    <Card className={'mx-3 border-0'}>
-        <CardImg className={'img-fluid rounded-3'} variant={'top'} as={GatsbyImage}
-                 image={getImage(post.frontmatter.featuredImg)} alt={post.frontmatter.title}/>
-        <CardImgOverlay>
-            <CardBody className={'d-flex align-content-end'}>
-                <Link to={post.frontmatter.slug} className={'link-light text-decoration-none'}><CardTitle
-                    className="stretched-link text-white fw-bold display-6 mb-3 mt-0">{post.frontmatter.title}</CardTitle></Link>
-                <CardText className="text-white small">{post.frontmatter.date}</CardText>
-            </CardBody>
-        </CardImgOverlay>
-    </Card>
+    <Col md={4} className="mb-3">
+        <Card className={'mx-3 border-0'}>
+            <CardImg className={'img-fluid rounded-3'} variant={'top'} as={GatsbyImage}
+                     image={getImage(post.frontmatter.featuredImg)} alt={post.frontmatter.title}/>
+            <CardImgOverlay>
+                <CardBody className={'d-flex align-content-end'}>
+                    <Link to={post.frontmatter.slug} className={'link-light text-decoration-none'}><CardTitle
+                        className="stretched-link text-white fw-bold display-6 mb-3 mt-0">{post.frontmatter.title}</CardTitle></Link>
+                    <CardText className="text-white small">{post.frontmatter.date}</CardText>
+                </CardBody>
+            </CardImgOverlay>
+        </Card>
+    </Col>
 );
 
 export default PostCardFront;
\ No newline at end of file
diff --git a/src/components/structure/projectsFrontPage.js b/src/components/structure/projectsFrontPage.js
index 74d6c856e..cc4662b4d 100644
--- a/src/components/structure/projectsFrontPage.js
+++ b/src/components/structure/projectsFrontPage.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import {graphql, useStaticQuery} from 'gatsby';
 import PostCardFront from "./post-card-front";
-import {Container} from 'react-bootstrap';
+import {Container, Row} from 'react-bootstrap';
 
 const query = graphql`
     {
@@ -48,10 +48,11 @@ const LatestProjects = () => {
     const posts = data.allMarkdownRemark.edges;
     return (
         <Container className={'py-2 d-flex my-4'} >
+            <Row>
                     {posts.map(({node}) => (
-
                         <PostCardFront key={node.id} post={node}/>
                     ))}
+            </Row>
         </Container>
     );
 };
diff --git a/src/pages/index.js b/src/pages/index.js
index a038b6e41..dca532a69 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -1,6 +1,6 @@
 import * as React from "react"
 import HomeLayout from "../components/layouts/homeLayout";
-import {Container} from "react-bootstrap";
+import {Container, Row} from "react-bootstrap";
 import Seo from "../components/structure/SEO";
 import BlogFrontPage from"../components/structure/blogFrontPage";
 import Logos from "../components/structure/logos";
@@ -19,11 +19,11 @@ const IndexPage = () => {
 
             <Container fluid={true} className={'bg-pastel py-3'}>
                 <h2 className="display-6 text-center fw-bold text-dark visually-hidden-focusable">Latest Projects</h2>
-                <LatestProjects />
+                    <LatestProjects />
             </Container>
             <Container fluid={true} className={'bg-pastel py-3'}>
-                <h2 className="display-6 text-center fw-bold text-dark visually-hidden-focusable">Latest Blog Posts</h2>
-                <BlogFrontPage />
+                    <h2 className="display-6 text-center fw-bold text-dark visually-hidden-focusable">Latest Blog Posts</h2>
+                    <BlogFrontPage />
             </Container>
 
             <Logos />
diff --git a/src/styles/footer-style.module.css b/src/styles/footer-style.module.css
index d9f169f18..8dce5d000 100644
--- a/src/styles/footer-style.module.css
+++ b/src/styles/footer-style.module.css
@@ -2,7 +2,6 @@
     padding-top: 10vh;
     font-size: 1rem;
     background: #192036;
-    height: 40vh;
 }
 
 .footer li {