Update header icons

Author: marcprux

public/img/bluesky.svg

@@ -9,6 +9,9 @@
 #  url: ""
 #  poc: ""
 #  region: ""
+#  social-mastodon: ""
+#  social-bluesky: ""
+#  social-x: ""
 
 - organization: "AdGuard"
   url: "adguard.com"

public/img/mastodon.svg

@@ -211,7 +211,6 @@ const dir = isRtl(lang) ? "rtl" : "ltr";
     }
 
     .header-icon-link {
-      color: var(--pico-text);
       padding: 0.5rem;
       transition: all 0.3s ease;
       display: inline-flex;
@@ -222,6 +221,10 @@ const dir = isRtl(lang) ? "rtl" : "ltr";
       opacity: 0.8;
     }
 
+    .header-icon-link img {
+      display: block;
+    }
+
     .callout-warning {
       border-inline-start: 4px solid #d32f2f;
       background: rgba(211, 47, 47, 0.08);

public/img/x-twitter.svg

@@ -46,7 +46,12 @@ const languageEntries = Object.entries(languages);
   </div>
   <header>
     <h1>{title}</h1>
-    <span class="header-icons"><a href="https://techhub.social/@keepandroidopen" class="header-icon-link" aria-label="Mastodon" title="Mastodon" rel="me" target="_blank"><svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M16.45 17.77c2.77-.33 5.18-2.03 5.49-3.58.47-2.45.44-5.97.44-5.97 0-4.77-3.15-6.17-3.15-6.17-1.58-.72-4.3-1.03-7.13-1.05h-.07c-2.83.02-5.55.33-7.13 1.05 0 0-3.14 1.4-3.14 6.17v.91c-.01.88-.02 1.86 0 2.88.12 4.67.87 9.27 5.2 10.4 2 .53 3.72.64 5.1.57 2.51-.14 3.92-.9 3.92-.9l-.08-1.8s-1.8.56-3.8.5c-2-.08-4.1-.22-4.43-2.66a4.97 4.97 0 0 1-.04-.68s1.96.48 4.44.59c1.51.07 2.94-.09 4.38-.26Zm2.22-3.4h-2.3v-5.6c0-1.19-.5-1.79-1.5-1.79-1.1 0-1.66.71-1.66 2.12v3.07h-2.3V9.1c0-1.4-.55-2.12-1.65-2.12-1 0-1.5.6-1.5 1.78v5.61h-2.3V8.6c0-1.18.3-2.12.9-2.81a3.17 3.17 0 0 1 2.47-1.05c1.18 0 2.07.45 2.66 1.35l.57.96.58-.96a2.97 2.97 0 0 1 2.66-1.35c1.01 0 1.83.36 2.46 1.05.6.7.9 1.63.9 2.81v5.78Z"></path></svg></a><a href="https://bsky.app/profile/keepandroidopen.bsky.social" class="header-icon-link" aria-label="BlueSky" title="BlueSky" target="_blank"><svg width="20" height="20" viewBox="0 0 16 16" fill="currentColor"><path d="M3.468 1.948C5.303 3.325 7.276 6.118 8 7.616c.725-1.498 2.698-4.29 4.532-5.668C13.855.955 16 .186 16 2.632c0 .489-.28 4.105-.444 4.692-.572 2.04-2.653 2.561-4.504 2.246 3.236.551 4.06 2.375 2.281 4.2-3.376 3.464-4.852-.87-5.23-1.98-.07-.204-.103-.3-.103-.218 0-.081-.033.014-.102.218-.379 1.11-1.855 5.444-5.231 1.98-1.778-1.825-.955-3.65 2.28-4.2-1.85.315-3.932-.205-4.503-2.246C.28 6.737 0 3.12 0 2.632 0 .186 2.145.955 3.468 1.948"></path></svg></a><a href="https://x.com/AlteredDeal" class="header-icon-link" aria-label="Twitter" title="Twitter" target="_blank"><svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"></path></svg></a><ThemeToggle /></span>
+    <span class="header-icons">
+      <a href="https://techhub.social/@keepandroidopen" class="header-icon-link" aria-label="Mastodon" title="Mastodon" rel="me" target="_blank"><img src="/img/mastodon.svg" width="20" height="20" alt="Mastodon" /></a>
+      <a href="https://bsky.app/profile/keepandroidopen.bsky.social" class="header-icon-link" aria-label="BlueSky" title="BlueSky" target="_blank"><img src="/img/bluesky.svg" width="20" height="20" alt="BlueSky" /></a>
+      <a href="https://x.com/AlteredDeal" class="header-icon-link" aria-label="Twitter" title="Twitter" target="_blank"><img src="/img/x-twitter.svg" width="20" height="20" alt="Twitter" /></a>
+      <ThemeToggle />
+    </span>
     <div class="lang-menu">
       {languageEntries.map(([code, { label, path }], i) => (
         <>