Add Contentful wordmark

ryanwiemer · Feb 27, 2018 · 06b3434 · 06b3434
1 parent 47f6ea3
commit 06b3434
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 13 deletions.
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -5,6 +5,7 @@ module.exports = {
     'gatsby-plugin-react-next',
     'gatsby-plugin-react-helmet',
     'gatsby-plugin-sass',
+    'gatsby-plugin-styled-components',
     'gatsby-transformer-remark',
     {
       resolve: `gatsby-plugin-canonical-urls`,

diff --git a/package.json b/package.json
@@ -17,11 +17,13 @@
     "gatsby-plugin-react-helmet": "^2.0.5",
     "gatsby-plugin-react-next": "^1.0.9",
     "gatsby-plugin-sass": "^1.0.17",
+    "gatsby-plugin-styled-components": "^2.0.8",
     "gatsby-source-contentful": "^1.3.39",
     "gatsby-source-filesystem": "^1.5.24",
     "gatsby-transformer-remark": "^1.7.33",
     "lodash.find": "^4.6.0",
-    "react-helmet": "^5.2.0"
+    "react-helmet": "^5.2.0",
+    "styled-components": "^3.1.6"
   },
   "keywords": [
     "rw"

diff --git a/src/components/footer.js b/src/components/footer.js
@@ -1,11 +1,19 @@
 import React from 'react'
 import Link from 'gatsby-link'
+import styled from 'styled-components'
+
+const Wordmark = styled.img`
+  max-width: 100px;
+  opacity: .8;
+`
 
 const Footer = () => (
   <footer className="footer">
     <ul className="grid">
       <li className="cell cell--middle">Copyright &copy; {new Date().getFullYear()} Ryan Wiemer</li>
-      <li className="cell cell--middle">Bulit with <a href="https://www.gatsbyjs.org/" target="_blank">Gatsby</a> and <a href="https://www.contentful.com/" target="_blank">Contentful</a></li>
+      <li className="cell cell--middle">
+        <a href="https://www.contentful.com/" rel="nofollow" target="_blank"><Wordmark src="https://images.contentful.com/fo9twyrwpveg/7Htleo27dKYua8gio8UEUy/0797152a2d2f8e41db49ecbf1ccffdaa/PoweredByContentful_DarkBackground_MonochromeLogo.svg" alt="Powered by Contentful" /></a>
+      </li>
     </ul>
   </footer>
 )

diff --git a/src/stylesheets/objects/_footer.scss b/src/stylesheets/objects/_footer.scss
@@ -5,17 +5,6 @@
 footer {
   background: $tertiary;
   color: $secondary;
-  a {
-    color: $secondary;
-    &:hover {
-      opacity: .7;
-    }
-  }
-}
-@media (hover: none) {
-  footer a {
-    opacity: 1;
-  }
 }
 
 footer ul {
@@ -35,5 +24,9 @@ footer ul li {
   width: 100%;
   @include bp(medium) {
     width: auto;
+    padding: .25em 0 !important;
+  }
+  &:last-child {
+    padding: 1em 0 .25em;
   }
 }