Author link visibility for blog and fix for avatar hover twitch

[rdela]

As discussed in #3199 I am splitting my PRs to the blog so the other one does not get unwieldy.

This one has:

• avatars all linking to contrib. pages

• add color to contributor page links

#3199 (comment)
#3199 (comment)

In addition as a special bonus this includes a fix for the twitchy avatars when hovering blog post previews that was driving me crazy. I have a video screen recording I will upload to my blog and add a link in a comment, the fix is:

marginTop: rhythm(17 / 8),
marginBottom: rhythm(17 / 8),

added to avatar wrapping div, and equal margins on Img:

marginRight: rhythm(1 / 32),
marginLeft: rhythm(1 / 32),

Added some developer beware comments around the danger zones.

also I hit the jackpot while building my test:

success createPages — 0.777 s

🎰

test output

Summary of all failing tests
 FAIL  packages/gatsby-source-wordpress/src/__tests__/normalize.js
  ● Test suite failed to run

    Cannot find module 'gatsby-source-filesystem' from 'normalize.js'

      2 | const deepMapKeys = require(`deep-map-keys`)
      3 | const _ = require(`lodash`)
    > 4 | const { createRemoteFileNode } = require(`gatsby-source-filesystem`)
      5 | 
      6 | const colorized = require(`./output-color`)
      7 | const conflictFieldPrefix = `wordpress_`
      
      at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:194:17)
      at Object.<anonymous> (packages/gatsby-source-wordpress/src/normalize.js:4:34)


Test Suites: 1 failed, 72 passed, 73 total
Tests:       3 skipped, 512 passed, 515 total
Snapshots:   185 passed, 185 total
Time:        8.147s
Ran all test suites.

[gatsbybot]

Deploy preview for gatsbygram ready!

Built with commit 476f62f

https://deploy-preview-4354--gatsbygram.netlify.com

[rdela]

Edit 20180317: rm’d file using git filter-branch
https://help.github.com/articles/removing-sensitive-data-from-a-repository/

[rdela]

Also of note: this bumps title to the top which is so will match multi-author where title under author info is super weird. Never bothered me on single author until I noticed it, and Medium is really the only example I can find of author info on top style, but now I don’t like it on either personally.

[KyleAMathews]

Seems to be cutting off the avatar now on hover https://deploy-preview-4354--gatsbyjs.netlify.com/blog/

Also, the spacing on blog previews changed quite a bit. Could you limit the css changes to the minimum necessary to fix the avatar twitch :-)

[rdela]

Hmmm the preview did fix the twitch for me and is not cutting avatars off for me either. What browser/OS are you seeing unwanted crop in? Screenshot for me maybe?

There are substantial spacing changes that are part of twitch remedy that maybe point to the fact I am solving a symptom and not root cause of twitch.

If I just back out spacing changes so we can get more noticeable contributor links in, and we live with the twitch for now, do you still want to keep the post title position change in this one or save that for multi-author PR?

Also depending on above want me to open a new, minimal PR on a clean branch without all the cruft in this one (some of which, namely GraphCMS post stuff, will end up in the tree later anyway). Or just add some commits because you are fine with it or will handle?

[rdela]

The twitching seems like a Chrome bug, Firefox and Safari do not exhibit the issue on my machine.

[KyleAMathews]

Just in general, don't make design changes unless you clear that with me or @fk

Yeah, happy to have a PR fixing the twitch but I'd assume it'd be a fairly minor change.

Small PRs are best. If you want to work on finding the root cause of the twitch and solving that here that'd be great. If not, close this and start another minimal PR for adding multi-author.