Add social icons

[bonniegee]

Creating a draft PR because I'm struggling a bit--

I was having some issues with automatic linting that seem to be resolved when I fixed them manually, but the changing-color-on hover is no longer happening. It looks like the hover functionality stopped working when I introduced @media (prefers-reduced-motion); I'm not sure what the best practice is for fixing this?

[helrond]

You're almost there! When you add the prefers-reduced-motion media query what happens is that the styles in that block only get applied if a user has declared that they want reduced motion. In this case, the styles are a bit backwards because if a user has declared that they want reduced motion, these hover styles will be applied, which is kind of the opposite of what should be happening.

What you want to do is change that prefers-reduced-motion to prefers-reduced-motion: no-preference. This is the inverse of the default value, which is reduce and means those styles will be applied unless a user has asked for reduced motion. Check out the Mozilla docs for more information.

[bonniegee]

Adds styles for social media icons. Fixes #67

[helrond]

@bonniegee just noticed that on smaller styles (Large mobile and Small mobile) there's an underline peeking out. I think you need to add a text-decoration property to the links.

[HaSistrunk]

Looks good! If you tab through the component to test focus styles, you'll see that the focus outline is around the whole anchor element, not the span with the .social-icons__icon class. That is because there are some global focus styles in _base.scss that apply to all links and buttons. I'm guessing linting is forcing you to use both :hover and :focus together on lines 30-31, but we're only seeing those specific styles applied with the mouse hover.

I think it's fine to leave it as is, I just wanted to call attention to why hover and focus look different.