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.

assets/styles/root.css

@@ -48,13 +48,9 @@
 
     --transition-duration: 0.7s;
 
-    --social-menu-padding: 1rem;
     --menu-icon-size: 20px;
-    --mastodon-icon: url(/icons/mastodon.svg);
-    --github-icon: url(/icons/github.svg);
-    --instagram-icon: url(/icons/instagram.svg);
-    --feed-icon: url(/icons/rss.svg);
 }
+
 @media (prefers-color-scheme: dark) {
     :root {
         --background: var(--black);
@@ -76,10 +72,6 @@
         --tag-hover-background-color: rgb(var(--super-dk-gray));
         --tag-hover-foreground-color: rgb(var(--mid-gray));
 
-        --mastodon-icon: url(/icons/mastodon-dark.svg);
-        --github-icon: url(/icons/github-dark.svg);
-        --instagram-icon: url(/icons/instagram-dark.svg);
-        --feed-icon: url(/icons/rss-dark.svg);
     }
 }
 

assets/styles/root/050_site_header.css

@@ -1,4 +1,23 @@
 @layer root {
+    :root {
+        --mastodon-icon: url(/icons/mastodon.svg);
+        --github-icon: url(/icons/github.svg);
+        --instagram-icon: url(/icons/instagram.svg);
+        --feed-icon: url(/icons/feed.svg);
+
+        --social-menu-padding: 1rem;
+    }
+
+    @media (prefers-color-scheme: dark) {
+        :root {
+            --mastodon-icon: url(/icons/mastodon-dark.svg);
+            --github-icon: url(/icons/github-dark.svg);
+            --instagram-icon: url(/icons/instagram-dark.svg);
+            --feed-icon: url(/icons/feed-dark.svg);
+        }
+    }
+
+
     header.site h1 > a:hover { text-decoration: none; }
 
     header.site {
@@ -84,4 +103,9 @@
         color: var(--dark);
         padding: 0 0.5rem;
     }
+
+    #social-menu-mastodon img { content: var(--mastodon-icon); }
+    #social-menu-github img { content: var(--github-icon); }
+    #social-menu-instagram img { content: var(--instagram-icon); }
+    #social-menu-feed img { content: var(--feed-icon); }
 }

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>

static/icons/feed.svg

@@ -1,10 +1,10 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <!--Generator: Apple Native CoreSVG 149-->
-
 <svg
    version="1.1"
-   width="53"
+   viewBox="1 5 48 48"
-   height="53"
+   width="48"
+   height="48"
    id="svg61"
    sodipodi:docname="rss.svg"
    inkscape:version="1.1.1 (c3084ef, 2021-09-22)"