Add an rss icon/link on the right side of the footer

Author: eyalroth

src/components/Footer/index.jsx

@@ -1,18 +1,26 @@
 import React from 'react'
+import { Link } from 'gatsby'
 import './style.scss'
+import '../../assets/fonts/fontello-41f8de9d/css/fontello.css'
 
 class Footer extends React.Component {
   render() {
     return (
         <footer className="footer">
-            {`Made with ❤️`}
-            <br/>
-            <div className="footer-links">
-            <a href="https://www.gatsbyjs.org/" target="_blank" rel="noopener noreferrer">Gatsby</a>
-            {` + `}
-            <a href="https://github.com/" target="_blank" rel="noopener noreferrer">GitHub</a>
-            {` + `}
-            <a href="https://www.netlify.com/" target="_blank" rel="noopener noreferrer">Netlify</a>
+            <div className="footer__center">
+              {`Made with ❤️`}
+              <div className="footer__links">
+                <a href="https://www.gatsbyjs.org/" target="_blank" rel="noopener noreferrer">Gatsby</a>
+                {` + `}
+                <a href="https://github.com/" target="_blank" rel="noopener noreferrer">GitHub</a>
+                {` + `}
+                <a href="https://www.netlify.com/" target="_blank" rel="noopener noreferrer">Netlify</a>
+              </div>
+            </div> 
+            <div className="footer__right">
+              <a className="footer__feed" href="/rss.xml">
+                <i className="icon-rss" />
+              </a>
             </div>
         </footer>
     )

src/components/Footer/style.scss

@@ -4,15 +4,55 @@
 .footer {
     background-color: #F8F8F8;
     border-top: 1px solid #E7E7E7;
-    text-align: center;
     padding-top: 10px;
     padding-bottom: 30px;
     left: 0;
     bottom: 0;
     height: 30px;
     width: 100%;
     position: absolute;
-    .footer-links {
+    display: flex;
+    justify-content: center;
+
+    &__center {
+        text-align: center;
+        width: 80vw;
+    }
+
+    &__right {
+        position: relative;
+        padding-top: 13px;
+    }
+
+    &__links {
         font-size: 0.8rem;
     }
+
+    &__feed {
+        & i {
+            color: lighten($color-base, 30%);
+        }
+        &:hover,
+        &:focus {
+            & i {
+                color: $color-base;
+            }
+        }
+    }
+}
+
+@include breakpoint-sm {
+    .footer {
+        &__center {
+            width: 90vw;
+        }
+    }
+}
+
+@include breakpoint-md {
+    .footer {
+        &__center {
+            width: 95vw;
+        }
+    }
 }