Fix footer for now

anagstef · Jul 2, 2019 · 0aa8268 · 0aa8268
1 parent e4107ed
commit 0aa8268
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 5 deletions.
diff --git a/src/components/header.js b/src/components/header.js
@@ -6,7 +6,7 @@ import IonicLogo from '../images/ionic-icon.png'
 const Header = ({ siteTitle, siteSubtitle }) => (
   <header>
     <div className="header-container">
-      <img src={IonicLogo} className="ionic-logo" />
+      <img src={IonicLogo} className="ionic-logo" alt="ionic logo" />
       <div className="header-title-text">
         <h1>{siteTitle}</h1>
         <h5>{siteSubtitle}</h5>

diff --git a/src/components/layout.css b/src/components/layout.css
@@ -625,4 +625,20 @@ pre tt:after {
   height: 20px;
   opacity: 0.8;
   background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-49 141 512 512'%3E%3Cpath d='M79 641.8c0 5.7.8 8.9 4 10.5 2.4 1.6 6.4 0 10.5-4.1l235.1-236.7c4-4.1 6.4-8.9 6.4-14.6s-2.4-10.5-6.4-14.6L93.5 145.7c-4-4.1-7.2-5.7-10.5-4.1-2.4.8-4 4.9-4 10.5'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+.heart-icon{
+  mask-repeat: no-repeat;
+  background-color: red;
+  color: red;
+  mask-size: contain;
+  mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 448l-30.164-27.211C118.718 322.442 48 258.61 48 179.095 48 114.221 97.918 64 162.4 64c36.399 0 70.717 16.742 93.6 43.947C278.882 80.742 313.199 64 349.6 64 414.082 64 464 114.221 464 179.095c0 79.516-70.719 143.348-177.836 241.694L256 448z'/%3E%3C/svg%3E");
+}
+
+.twitter-icon{
+  mask-repeat: no-repeat;
+  background-color: #1da1f2;
+  color: #1da1f2;
+  mask-size: contain;
+  mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M492 109.5c-17.4 7.7-36 12.9-55.6 15.3 20-12 35.4-31 42.6-53.6-18.7 11.1-39.4 19.2-61.5 23.5C399.8 75.8 374.6 64 346.8 64c-53.5 0-96.8 43.4-96.8 96.9 0 7.6.8 15 2.5 22.1-80.5-4-151.9-42.6-199.6-101.3-8.3 14.3-13.1 31-13.1 48.7 0 33.6 17.2 63.3 43.2 80.7-16-.4-31-4.8-44-12.1v1.2c0 47 33.4 86.1 77.7 95-8.1 2.2-16.7 3.4-25.5 3.4-6.2 0-12.3-.6-18.2-1.8 12.3 38.5 48.1 66.5 90.5 67.3-33.1 26-74.9 41.5-120.3 41.5-7.8 0-15.5-.5-23.1-1.4C62.8 432 113.7 448 168.3 448 346.6 448 444 300.3 444 172.2c0-4.2-.1-8.4-.3-12.5C462.6 146 479 129 492 109.5z'/%3E%3C/svg%3E");
 }
diff --git a/src/components/layout.js b/src/components/layout.js
@@ -36,10 +36,9 @@ const Layout = ({ children }) => (
           }}
         >
           <main>{children}</main>
-          <footer>
-            © {new Date().getFullYear()}, Built with
-            {` `}
-            <a href="https://www.gatsbyjs.org">Gatsby</a>
+          <footer style={{ fontSize: '12px'}}>
+            © {new Date().getFullYear()}. Built with <span class="heart-icon">&lt;3</span> Hit me up on{' '}
+            <a href="https://twitter.com/anagstef" target="_blank" rel="noopener noreferrer"><span class="twitter-icon">Twitter</span></a>
           </footer>
         </div>
       </>