Adding Footer

This commit is contained in:
Jeff Avallone 2019-01-03 18:00:39 -05:00
parent 3ce3a886ed
commit a7ebcd92bf
3 changed files with 62 additions and 0 deletions

View File

@ -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;

View File

@ -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%));
}

View File

@ -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 = {