Adding Footer

src/components/Footer/index.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { StaticQuery, graphql } from 'gatsby';
+
+import style from './style.module.css';
+
+const query = graphql`
+  query FooterQuery {
+    site {
+      siteMetadata {
+        buildId
+      }
+    }
+  }
+`;
+
+const Footer = () => (
+  <footer className={ style.footer }>
+    <ul className={ style.list }>
+      <li>
+        Created by <a href="mailto:jeff.avallone@gmail.com">Jeff Avallone</a>
+      </li>
+      <li>
+        Generated images licensed: <a href="http://creativecommons.org/licenses/by/3.0/" rel="license external noopener noreferrer" target="_blank">
+          <img src="https://licensebuttons.net/l/by/3.0/80x15.png" alt="Creative Commons CC-BY-3.0 License" />
+        </a>
+      </li>
+    </ul>
+    <div className={ style.buildId }>
+      <StaticQuery query={ query } render={ ({ site: { siteMetadata } }) => siteMetadata.buildId } />
+    </div>
+  </footer>
+);
+
+export default Footer;

src/components/Footer/style.module.css

@@ -0,0 +1,26 @@
+@import url('../../globals.module.css');
+
+.footer {
+  display: flex;
+  align-items: flex-start;
+  margin: var(--spacing-margin) 0;
+
+  @media screen and (max-width: 800px) {
+    display: block;
+  }
+
+  & img {
+    vertical-align: text-top;
+    width: 80px;
+    height: 15px;
+  }
+}
+
+.list {
+  composes: inline-list with-separator-left;
+  flex: 1;
+}
+
+.buildId {
+  color: color(var(--color-brown) blend(var(--color-tan) 25%));
+}

src/components/Layout/index.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { Helmet } from 'react-helmet';
 
 import Header from 'components/Header';
+import Footer from 'components/Footer';
 
 const Layout = ({ title, children }) => <React.Fragment>
   <Helmet>
@@ -10,6 +11,7 @@ const Layout = ({ title, children }) => <React.Fragment>
   </Helmet>
   <Header />
   { children }
+  <Footer />
 </React.Fragment>;
 
 Layout.propTypes = {