Merge branch 'develop' of github.com:shaun-jacks/shaunjacks.io into d…

…evelop

src/components/Footer/Footer.tsx

@@ -5,6 +5,8 @@ import FooterLink from "./FooterLink";
 
 /** @jsx jsx */
 import { Styled, jsx } from "theme-ui";
+import AvatarLinks from "../Avatar/AvatarLinks";
+import FooterLogos from "./FooterLogos";
 
 export default function Footer() {
   return (
@@ -22,29 +24,38 @@ export default function Footer() {
           flexDirection: "column",
           maxWidth: `container`,
           m: "auto",
-        }}
-      >
-        <div
-          sx={{
+          pt: 3,
+          pb: 2,
+          fontSize: "12px",
+          ".row": {
             display: "flex",
             justifyContent: "space-between",
             alignItems: `center`,
             maxWidth: `container`,
             flexWrap: "wrap",
             px: 3,
-            py: 4,
-          }}
-        >
-          <div
-            sx={{
-              display: "flex",
-              justifyContent: "space-between",
-            }}
-          >
+            pt: 1,
+          },
+          ".row-container": {
+            display: "flex",
+            justifyContent: "space-between",
+          },
+        }}
+      >
+        <div className="row">
+          <div className="row-container">
             <FooterLink url="https://patreon.com/shaunjacks" label="Patreon" />
             <FooterLink url="https://ko-fi.com/shaunjacks" label="Ko-Fi" />
           </div>
-          <div sx={{ mx: 1, fontSize: "12px" }}> {siteConfig.copyright} </div>
+          <div sx={{ mx: 1 }}>
+            <AvatarLinks />
+          </div>
+        </div>
+        <div className="row">
+          <div className="row-container">
+            <FooterLogos />
+          </div>
+          <div sx={{ mx: 1 }}> {siteConfig.copyright} </div>
         </div>
       </div>
     </footer>

src/components/Footer/FooterLink.tsx

@@ -2,8 +2,8 @@ import React from "react";
 import _ from "lodash";
 
 /** @jsx jsx */
-import { Styled, jsx, Card } from "theme-ui";
-import { darken, lighten } from "@theme-ui/color";
+import { Styled, jsx } from "theme-ui";
+import { lighten } from "@theme-ui/color";
 
 interface FooterLinkProps {
   url: string;
@@ -19,6 +19,7 @@ export default function FooterLink({ url, label }: FooterLinkProps) {
         pb: 2,
         textDecoration: "none",
         transition: "all .3s ease",
+        fontSize: "12px",
         "&:hover": { cursor: "pointer", color: lighten("secondary", 0.2) },
       }}
       href={url}

src/components/Footer/FooterLogos.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import _ from "lodash";
+import gatsbyLogo from "../../images/Gatsby-Monogram-logo.svg";
+import firebaseLogo from "../../images/firebase-logo-logomark.svg";
+import typescriptLogo from "../../images/typescriptlang-icon.svg";
+
+/** @jsx jsx */
+import { Styled, jsx } from "theme-ui";
+
+export default function FooterLogos() {
+  return (
+    <div
+      sx={{
+        display: "flex",
+        fontSize: "12px",
+        alignItems: "center",
+        img: { mx: 2 },
+        a: {
+          "&:hover": {
+            cursor: "pointer",
+          },
+        },
+      }}
+    >
+      <Styled.p sx={{ mr: 1 }}>Composed with </Styled.p>
+      <a href="https://www.gatsbyjs.org/">
+        <img
+          alt="Gatsby Logo"
+          src={gatsbyLogo}
+          width="24"
+          height="24"
+          role="presentation"
+          style={{
+            pointerEvents: `none`,
+          }}
+        />
+      </a>
+
+      <a href="https://www.typescriptlang.org/">
+        <img
+          alt="Typescript Logo"
+          src={typescriptLogo}
+          width="24"
+          height="24"
+          role="presentation"
+          style={{
+            backgroundColor: "#faf9f8",
+            pointerEvents: `none`,
+          }}
+        />
+      </a>
+    </div>
+  );
+}

src/pages/blog.tsx

@@ -30,7 +30,6 @@ export default function Blog({ data: { allMdx } }: BlogProps) {
           sx={{ width: "100%", display: "flex", alignItems: "center", mb: 3 }}
         ></div>
         <PostListing postEdges={allMdx.edges} />
-        <AvatarLinks />
       </Styled>
     </Layout>
   );