networks fix, split up logo unit

data/meta.yml

@@ -19,10 +19,11 @@ availability:
   available: "👔 Available for new projects. <a href=\"mailto:m@kretschmann.io\">Let’s talk</a>!"
   unavailable: Not available for new projects.
 
+# Footer actions
 gpg: https://kretschmann.io/pub.gpg
 addressbook: /matthias-kretschmann.vcf
 
-typekit: dtg3zui
+# Analytics tools
 googleanalytics: UA-1441794-4
 matomoUrl: https://analytics.kremalicious.com
 matomoSite: 2

package.json

@@ -49,11 +49,13 @@
     "eslint-plugin-compat": "^2.2.0",
     "eslint-plugin-graphql": "^2.1.1",
     "eslint-plugin-prettier": "^2.6.0",
-    "eslint-plugin-react": "^7.8.1",
+    "eslint-plugin-react": "^7.8.2",
     "prettier": "^1.12.1",
     "prettier-stylelint": "^0.4.2",
     "stylelint": "^9.2.0",
     "stylelint-config-standard": "^18.2.0"
   },
-  "browserslist": ["defaults"]
+  "browserslist": [
+    "defaults"
+  ]
 }

src/components/atoms/LogoUnit.jsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { ReactComponent as Logo } from '../../images/logo.svg'
+import './LogoUnit.scss'
+
+const LogoUnit = ({ meta, minimal }) => {
+  const classes = minimal ? 'logounit logounit--minimal' : 'logounit'
+
+  return (
+    <div className={classes}>
+      <Logo className="logounit__logo" />
+      <h1 className="logounit__title">{meta.title.toLowerCase()}</h1>
+      <p className="logounit__description">
+        <span>{'{ '}</span> {meta.tagline.toLowerCase()} <span>{' }'}</span>
+      </p>
+    </div>
+  )
+}
+
+LogoUnit.propTypes = {
+  meta: PropTypes.object.isRequired,
+  minimal: PropTypes.bool,
+}
+
+export default LogoUnit

src/components/atoms/LogoUnit.scss

@@ -0,0 +1,57 @@
+@import 'variables';
+
+.logounit__logo {
+    display: block;
+    width: 1.5rem;
+    height: 1.5rem;
+    fill: $brand-grey-light;
+    margin-bottom: $spacer / 2;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.logounit__title,
+.logounit__description {
+    display: inline-block;
+    margin-bottom: 0;
+}
+
+.logounit__title {
+    font-size: $font-size-h3;
+    margin-right: $spacer / 4;
+    color: $brand-main;
+    line-height: $line-height;
+}
+
+.logounit__description {
+    font-size: $font-size-h4;
+    color: $brand-grey;
+
+    .dark & {
+        color: $brand-grey-light;
+    }
+
+    span {
+        opacity: .4;
+    }
+}
+
+.logounit--minimal {
+    transform: scale(.7);
+    transform-origin: top center;
+    transform-box: border-box;
+
+    .logounit__title,
+    .logounit__description {
+        color: $brand-grey-light;
+
+        .dark & {
+            color: $brand-grey;
+        }
+    }
+
+    .logounit__logo {
+        margin-bottom: $spacer / 3;
+        opacity: .5;
+    }
+}

src/components/molecules/Networks.jsx

@@ -33,7 +33,9 @@ class Network extends PureComponent {
   constructor(props) {
     super(props)
 
-    this.state = { classes: 'networks' }
+    this.state = {
+      classes: 'networks',
+    }
   }
 
   componentDidMount() {
@@ -46,23 +48,21 @@ class Network extends PureComponent {
 
   toggleClasses = () => {
     if (this.props.minimal) {
-      this.setState({ classes: 'networks' })
-    } else {
       this.setState({ classes: 'networks networks--minimal' })
+    } else {
+      this.setState({ classes: 'networks' })
     }
   }
 
   render() {
-    const { social } = this.props.meta
-
     return (
       !this.props.hide && (
-        <FadeIn timeout={{ enter: 200, exit: 0, appear: 200 }}>
+        <FadeIn>
           <aside className={this.state.classes}>
-            {Object.keys(social).map((key, i) => (
+            {Object.keys(this.props.meta.social).map((key, i) => (
               <OutboundLink
                 className="networks__link"
-                href={social[key]}
+                href={this.props.meta.social[key]}
                 key={i}
               >
                 <NetworkIcon title={key} className="icon" />

src/components/molecules/Networks.scss

@@ -16,7 +16,7 @@
     color: $brand-grey-light;
     opacity: 0;
     transform: translate3d(0, .5rem, 0);
-    transition: .2s ease-out;
+    transition: .2s $easing;
 }
 
 .networks__link {
@@ -28,7 +28,7 @@
 
     &,
     .icon {
-        transition: .2s ease-out;
+        transition: .2s $easing;
     }
 
     .icon {
@@ -55,6 +55,7 @@
         .icon {
             width: .85rem;
             height: .85rem;
+            opacity: .8;
         }
     }
 }

src/components/organisms/Footer.jsx

@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import Vcard from '../atoms/Vcard'
+import LogoUnit from '../atoms/LogoUnit'
 import Networks from '../molecules/Networks'
 import './Footer.scss'
 
@@ -16,12 +17,14 @@ class Footer extends PureComponent {
 
     return (
       <footer className="footer">
+        <LogoUnit meta={meta} minimal />
         <Networks meta={meta} minimal />
+
         <p className="footer__actions">
           <Vcard meta={meta} />
           <a href={meta.gpg}>PGP/GPG key</a>
         </p>
-        <p>
+        <p className="footer__copyright">
           <small>
             &copy; {this.state.year} {meta.title} &mdash; All Rights Reserved
           </small>

src/components/organisms/Footer.scss

@@ -1,7 +1,8 @@
 @import 'variables';
 
 .footer {
-    padding: $spacer * 2;
+    padding: $spacer;
+    padding-top: $spacer * 4;
     text-align: center;
     color: $text-color-light;
 
@@ -12,7 +13,7 @@
 
     .networks {
         margin-top: 0;
-        margin-bottom: $spacer;
+        margin-bottom: $spacer * 2;
     }
 
     .dark & {
@@ -21,9 +22,6 @@
 }
 
 .footer__actions {
-    width: 100%;
-    margin-bottom: $spacer;
-
     a {
         display: inline-block;
         padding: 0 $spacer / 4;

src/components/organisms/Header.jsx

@@ -5,7 +5,7 @@ import { FadeIn } from '../atoms/Animations'
 import Networks from '../molecules/Networks'
 import Availability from '../molecules/Availability'
 import ThemeSwitch from '../molecules/ThemeSwitch'
-import { ReactComponent as Logo } from '../../images/logo.svg'
+import LogoUnit from '../atoms/LogoUnit'
 import './Header.scss'
 
 class Header extends PureComponent {
@@ -39,13 +39,8 @@ class Header extends PureComponent {
       <header className={this.state.classes}>
         <ThemeSwitch />
         <FadeIn>
-          <Link className="header__name" to={'/'}>
+          <Link className="header__logounit-link" to={'/'}>
-            <Logo className="header__logo" />
+            <LogoUnit meta={meta} minimal={!isHomepage} />
-            <h1 className="header__title">{meta.title.toLowerCase()}</h1>
-            <p className="header__description">
-              <span>{'{ '}</span> {meta.tagline.toLowerCase()}{' '}
-              <span>{' }'}</span>
-            </p>
           </Link>
         </FadeIn>
 

src/components/organisms/Header.scss

@@ -12,43 +12,7 @@
     text-align: center;
 }
 
-.header__logo {
+.header__logounit-link {
-    display: block;
-    width: 1.5rem;
-    height: 1.5rem;
-    fill: $brand-grey-light;
-    margin-bottom: $spacer / 2;
-    margin-left: auto;
-    margin-right: auto;
-}
-
-.header__title,
-.header__description {
-    display: inline-block;
-    margin-bottom: 0;
-}
-
-.header__title {
-    font-size: $font-size-h3;
-    margin-right: $spacer / 4;
-    color: $brand-main;
-    line-height: $line-height;
-}
-
-.header__description {
-    font-size: $font-size-large;
-    color: $brand-grey;
-
-    .dark & {
-        color: $brand-grey-light;
-    }
-
-    span {
-        opacity: .4;
-    }
-}
-
-.header__name {
     pointer-events: none;
     display: block;
     width: 100%;
@@ -61,57 +25,8 @@
         padding-top: $spacer * 2;
     }
 
-    .header__title {
+    .header__logounit-link {
-        font-size: $font-size-h4;
-        line-height: $line-height-headings;
-    }
-
-    .header__description {
-        font-size: $font-size-base;
-    }
-
-    .header__title,
-    .header__description {
-        color: $brand-grey-light;
-
-        .dark & {
-            color: $brand-grey;
-        }
-    }
-
-    .header__logo {
-        width: 1rem;
-        height: 1rem;
-        margin-bottom: $spacer / 3;
-        opacity: .5;
-    }
-
-    .header__name {
         pointer-events: all;
-        display: inline-block;
         width: auto;
-
-        &:hover,
-        &:focus {
-            .header__logo {
-                opacity: 1;
-            }
-
-            .header__title {
-                color: $color-headings;
-
-                .dark & {
-                    color: $color-headings--dark;
-                }
-            }
-
-            .header__description {
-                color: $text-color;
-
-                .dark & {
-                    color: $text-color--dark;
-                }
-            }
-        }
     }
 }

src/layouts/index.jsx

@@ -102,8 +102,6 @@ export const query = graphql`
       }
       gpg
       addressbook
-      typekit
-      googleanalytics
     }
   }
 `

src/pages/index.scss

@@ -8,6 +8,10 @@
         margin-bottom: $spacer * 8;
     }
 
+    &:last-child {
+        margin-bottom: 0;
+    }
+
     a {
         display: block;
         position: relative;

src/templates/Project.jsx

@@ -109,8 +109,6 @@ export const projectQuery = graphql`
         available
         unavailable
       }
-      typekit
-      googleanalytics
       img {
         childImageSharp {
           resize(width: 980) {