[Bug] logos/social icons flash purple briefly on click

## Description
when clicked the logos and social icons flash to a purple color briefly on click. This is due to the fact that the way in which the logo and social icons was implemented sets the svg a mask of the element, rather than to a mask of a child pseudo element of `:before` or `:after`. This disallows any outline or border indicators on that element for a `:focus` state. To correct for this in a temporary fashion, color was used to denote an item "in focus".

As a side effect when an item is clicked it is briefly "in focus", which makes it turn purple.

However, this behavior needs to change, so that proper outline behavior will occur.

## Reproduction

1. Click the logo
2. See it briefly turn purple

## Expectation
The items in question need to have standard default browser outline focus indicators, and the method of svg replacement needs to be moved to a child pseudo element to allow for this.

## Resolution

- [x] I would be interested in resolving this bug.