Gatsby: Default gatsby-theme-blog avatar is squished on mobile

[trevordmiller]

Description

The default gatsby-theme-blog avatar isn't responsive.

Steps to reproduce

npx gatsby new my-themed-blog https://github.com/gatsbyjs/gatsby-starter-blog-theme
cd my-themed-blog
npm run develop

Open http://localhost:8000 and view default avatar on small screen sizes.

Example project: https://github.com/trevordmiller/trevordmiller.github.io

Expected result

Avatar stays a circle on any screen width.

Actual result

On smaller screen sizes the avatar turns into an oval instead of a circle (it gets squished horizontally).

Environment

Run gatsby info --clipboard in your project directory and paste the output here.

  System:
    OS: macOS 10.14.6
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 12.13.0 - ~/.nvm/versions/node/v12.13.0/bin/node
    npm: 6.12.0 - ~/.nvm/versions/node/v12.13.0/bin/npm
  Languages:
    Python: 2.7.10 - /usr/bin/python
  Browsers:
    Safari: 13.0.3
  npmPackages:
    gatsby: ^2.17.6 => 2.17.6
    gatsby-theme-blog: ^1.1.11 => 1.1.11

[LekoArts]

We'd appreciate a PR to fix that!

[Qovaros985]

@trevordmiller are you interested in fixing this issue? If not, could I try fixing it?

[trevordmiller]

@Qovaros985 Go for it!