Fix some layout issues

portableant · Dec 2, 2023 · 201b04e · 201b04e
1 parent ee1169c
commit 201b04e
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 25 deletions.
diff --git 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
@@ -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;
diff --git 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
@@ -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
@@ -2,7 +2,6 @@
     padding-top: 10vh;
     font-size: 1rem;
     background: #192036;
-    height: 40vh;
 }
 
 .footer li {