[UPD] Add Footer to Layout

Author: Carms Ng

src/components/contact.js

@@ -4,7 +4,6 @@ import styled from 'styled-components';
 import { StaticImage } from "gatsby-plugin-image";
 
 import SiteBorderStyles from '../styles/SiteBorderStyles';
-import Footer from "./footer";
 
 import { AiTwotoneMail, AiTwotonePhone } from 'react-icons/ai';
 import { FiMapPin } from 'react-icons/fi'
@@ -47,7 +46,6 @@ export default function Contact() {
           <ContactForm />
         </div>
       </SiteBorderStyles>
-      <Footer />
       <div
         className="absolute"
         style={{zIndex: `-1`, width: `50vw`, left: `0`, bottom: `5vh`}}>
@@ -63,6 +61,7 @@ export default function Contact() {
 }
 
 const ContactStyles = styled.section`
+  height: calc(100vh - 56px);
   position: relative;
   display: flex;
   flex-direction: column;

src/components/footer.js

@@ -5,6 +5,7 @@ import { FiGithub, FiLinkedin } from "react-icons/fi";
 import { Trans } from "react-i18next";
 
 const FooterStyle = styled.footer`
+  padding: 100px;
   background: var(--black);
   padding: 0.5rem 0;
   color: var(--lightgrey);
@@ -15,7 +16,7 @@ export default function Footer() {
     <FooterStyle>
       <SiteBorderStyles>
         {/* social links*/}
-        <div className="flex my-1 md:my-2 items-center justify-between md:justify-center md:text-xl">
+        <div className="flex my-1 md:my-2 items-center justify-between md:justify-center">
           <p className="" style={{ color: `var(--lightgrey)` }}>
             © {new Date().getFullYear()} Coderbunker, inc.
           </p>

src/components/layout.js

@@ -3,6 +3,7 @@ import PropTypes from "prop-types";
 import { useStaticQuery, graphql } from "gatsby";
 import GlobalStyles from '../styles/GlobalStyles';
 import Typography from '../styles/Typography';
+import Footer from "./footer";
 
 import Header from "./header";
 
@@ -23,6 +24,7 @@ export default function Layout({ children }) {
       <GlobalStyles/>
       <Typography/>
       <main>{children}</main>
+      <Footer />
     </>
   )
 }