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); }
 }