Adding Footer
This commit is contained in:
parent
3ce3a886ed
commit
a7ebcd92bf
34
src/components/Footer/index.js
Normal file
34
src/components/Footer/index.js
Normal 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;
|
26
src/components/Footer/style.module.css
Normal file
26
src/components/Footer/style.module.css
Normal 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%));
|
||||
}
|
@ -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 = {
|
||||
|
Loading…
Reference in New Issue
Block a user