Tweak all the icons

Make them a little bigger. Clean up the view boxes.
Use <img> instead of backgrounds of <a> tags so the Mastodon logo does not get clipped.

layouts/partials/header.html

@@ -9,8 +9,13 @@
     <nav class="social">
       {{ with site.Menus.social }}
         {{- range . -}}
+        {{- $id := .Identifier -}}
         {{- $targetBlank := .Params.targetBlank | default true -}}
-        <li><a style="--url: var(--{{ .Identifier }}-icon)" href="{{ .URL }}" {{ if $targetBlank }}target="_blank"{{ end }} aria-label="{{ .Name }}"><span>{{ .Params.shortName | default .Name }}</span></a></li>
+        <li id="social-menu-{{ $id }}">
+          <a href="{{ .URL }}" {{ if $targetBlank }}target="_blank"{{ end }} aria-label="{{ .Name }}">
+            <img alt="{{ .Name }}">
+          </a>
+        </li>
         {{- end -}}
       {{ end }}
     </nav>