logo & social tweaks

src/components/atoms/Icons.js

@@ -1,12 +1,9 @@
 import React from 'react'
 import './Icons.scss'
 
-export const Facebook = props => (
+export const Logo = props => <svg width="146" height="146" viewBox="0 0 146 146" {...props}>
-  <svg className="icon" viewBox="0 0 20 20" width="20" height="20" {...props}>
+    <path d="M307.015625,177.53125 L317.421875,188.078125 L182.421875,322.515625 L172.4375,312.390625 L307.015625,177.53125 Z M307.015625,217.328125 L317.421875,227.875 L222.21875,322.515625 L212.234375,312.390625 L307.015625,217.328125 Z M267.359375,177.53125 L277.625,188.078125 L182.421875,282.71875 L172.4375,272.59375 L267.359375,177.53125 Z" transform="translate(-172 -177)" />
-    <path d="M17,1H3C1.9,1,1,1.9,1,3v14c0,1.101,0.9,2,2,2h7v-7H8V9.525h2V7.475c0-2.164,1.212-3.684,3.766-3.684l1.803,0.002v2.605
+  </svg>
-	h-1.197C13.378,6.398,13,7.144,13,7.836v1.69h2.568L15,12h-2v7h4c1.1,0,2-0.899,2-2V3C19,1.9,18.1,1,17,1z"/>
-</svg>
-)
 
 export const GitHub = props => (
   <svg className="icon" viewBox="0 0 20 20" width="20" height="20" {...props}>
@@ -41,3 +38,10 @@ export const Blog = props => <svg className="icon" viewBox="0 0 22 22" width="22
       <path d="M21.607,3.224 L18.778,0.395 C18.583,0.201 18.266,0.201 18.071,0.395 L17.682,0.785 C17.276,0.515 16.801,0.37 16.303,0.37 C15.635,0.37 15.007,0.63 14.535,1.103 L8.879,6.761 C8.684,6.956 8.684,7.272 8.879,7.467 C9.075,7.662 9.392,7.661 9.586,7.467 L15.243,1.811 C15.686,1.367 16.385,1.275 16.941,1.527 L12.833,5.634 L16.368,9.17 L21.606,3.931 C21.803,3.736 21.802,3.419 21.607,3.224 Z" />
     </g>
   </svg>
+
+export const Email = props => <svg className="icon" viewBox="0 0 22 15" width="22" height="15" {...props}>
+    <g>
+      <path d="M11.002,8.36 L21.097,0.33 C20.782,0.123 20.406,0 20.001,0 L2.001,0 C1.614,0 1.255,0.115 0.948,0.307 L11.002,8.36 Z" />
+      <path d="M21.764,1.076 L11.296,9.391 C11.118,9.525 10.88,9.525 10.702,9.39 L0.26,1.036 C0.1,1.323 0.001,1.648 0,2 L0,13 C0.001,14.103 0.898,15 2.001,15 L19.999,15 C21.102,15 21.999,14.103 22,13 L22,2 C22,1.665 21.91,1.353 21.764,1.076 Z" />
+    </g>
+  </svg>

src/components/molecules/Header.js

@@ -2,6 +2,7 @@ import React from 'react'
 import Link from 'gatsby-link'
 import PropTypes from 'prop-types'
 import Social from './Social'
+import { Logo } from '../atoms/Icons'
 import './Header.scss'
 
 const Header = ({ meta }) => {
@@ -10,7 +11,7 @@ const Header = ({ meta }) => {
 
   return <header className={classes}>
       <Link className="header__name" to={'/'}>
-        <span className="header__logo">␥</span>
+        <Logo className="header__logo" />
         <h1 className="header__title">{meta.title}</h1>
         <p className="header__description">{meta.tagline}</p>
       </Link>

src/components/molecules/Header.scss

@@ -11,10 +11,13 @@
 
 .header__logo {
     display: block;
+    width: 1.5rem;
+    height: 1.5rem;
+    fill: $brand-grey-light;
     margin-top: -3rem;
-    font-size: 3rem;
+    margin-bottom: $spacer;
-    color: $brand-grey-light;
+    margin-left: auto;
-    margin-bottom: $spacer / 2;
+    margin-right: auto;
 }
 
 .header__title,
@@ -51,8 +54,7 @@
     }
 
     .header__title,
-    .header__description,
+    .header__description {
-    .header__logo {
         color: $brand-grey-light;
         transition: color .2s ease-out;
     }
@@ -67,11 +69,12 @@
 
     .header__logo {
         display: inline-block;
-        margin: 0;
+        width: 1rem;
-        font-size: 2rem;
+        height: 1rem;
         margin-top: -2rem;
         margin-bottom: 0;
-        margin-right: $spacer / 4;
+        margin-right: $spacer / 3;
+        margin-left: 0;
     }
 
     .header__name {

src/components/molecules/Social.js

@@ -1,20 +1,23 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { OutboundLink } from 'gatsby-plugin-google-analytics'
-import { Blog, Twitter, GitHub, Facebook } from '../atoms/Icons'
+import { Email, Blog, Twitter, GitHub, Dribbble } from '../atoms/Icons'
 import './Social.scss'
 
 const SocialIcon = ({ title }) => {
-  if (title === 'Blog') {
+  switch (title) {
+    case 'Email':
+      return <Email />
+    case 'Blog':
       return <Blog />
-  } else if (title === 'Twitter') {
+    case 'Twitter':
       return <Twitter />
-  } else if (title === 'GitHub') {
+    case 'GitHub':
       return <GitHub />
-  } else if (title === 'Facebook') {
+    case 'Dribbble':
-    return <Facebook />
+      return <Dribbble />
-  } else {
+    default:
-    return <i />
+      return null
   }
 }
 

src/components/molecules/Social.scss

@@ -1,7 +1,7 @@
 @import 'variables';
 
 .social {
-    margin-top: $spacer;
+    margin-top: $spacer * $line-height;
     display: flex;
     justify-content: center;
     width: 100%;

src/data/meta.json

@@ -3,12 +3,12 @@
   "tagline": "Designer & Developer",
   "description": "Portfolio of web & ui designer/developer hybrid Matthias Kretschmann.",
   "url": "https://matthiaskretschmann.com",
-  "email": "m@kretschmann.io",
   "social": {
+    "Email": "mailto:m@kretschmann.io",
     "Blog": "https://kremalicious.com",
     "Twitter": "https://twitter.com/kremalicious",
     "GitHub": "https://github.com/kremalicious",
-    "Facebook": "https://facebook.com/matthiaskretschmann"
+    "Dribbble": "https://dribbble.com/kremalicious"
   },
   "available": false,
   "googleanalytics": "UA-1441794-4"

src/images/logo.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="146" height="146" viewBox="0 0 146 146">
+  <path d="M307.015625,177.53125 L317.421875,188.078125 L182.421875,322.515625 L172.4375,312.390625 L307.015625,177.53125 Z M307.015625,217.328125 L317.421875,227.875 L222.21875,322.515625 L212.234375,312.390625 L307.015625,217.328125 Z M267.359375,177.53125 L277.625,188.078125 L182.421875,282.71875 L172.4375,272.59375 L267.359375,177.53125 Z" transform="translate(-172 -177)"/>
+</svg>

src/layouts/index.js

@@ -34,10 +34,11 @@ export const query = graphql`
           description
           url
           social {
+            Email
             Blog
             Twitter
             GitHub
-            Facebook
+            Dribbble
           }
         }
       }