chore(footer): add mastodon svg icon (#9689)

* feat(footer): add mastodon svg icon

ref. Brand Toolkit - Mastodon - https://joinmastodon.org/branding

* fix(footer): manual adjustment of mastodon.svg for the footer usage

* feat(footer): replace mastodon icon link with twitter

* fix(footer): revert twitter icon link

* refactor(footer): move "mastodon" order and apply prettier

client/src/ui/atoms/icon/index.scss

@@ -2,14 +2,14 @@ $icons: "add-filled", "add", "altname", "bell-filled", "bell", "bookmark-filled"
   "bookmark", "cancel", "chatgpt", "checkmark", "chevron", "chrome", "critical",
   "deno", "deprecated", "desktop", "disabled", "edge", "edit", "ellipses",
   "experimental", "external", "eye-filled", "eye", "feed", "filter", "footnote",
-  "github-mark-small", "ie", "information", "language", "menu-filled", "menu",
-  "mobile", "more", "theme-dark", "next", "no", "nodejs", "nonstandard",
-  "note-info", "note-warning", "note-deprecated", "opera", "padlock", "partial",
-  "prefix", "preview", "previous", "quote", "safari", "samsunginternet",
-  "search", "send", "server", "sidebar", "simple-firefox", "small-arrow",
-  "theme-light", "star-filled", "star", "theme-os-default", "thumbs-down",
-  "thumbs-up", "trash", "twitter", "unknown", "warning", "webview", "yes",
-  "yes-circle";
+  "github-mark-small", "ie", "information", "language", "mastodon",
+  "menu-filled", "menu", "mobile", "more", "theme-dark", "next", "no", "nodejs",
+  "nonstandard", "note-info", "note-warning", "note-deprecated", "opera",
+  "padlock", "partial", "prefix", "preview", "previous", "quote", "safari",
+  "samsunginternet", "search", "send", "server", "sidebar", "simple-firefox",
+  "small-arrow", "theme-light", "star-filled", "star", "theme-os-default",
+  "thumbs-down", "thumbs-up", "trash", "twitter", "unknown", "warning",
+  "webview", "yes", "yes-circle";
 
 .icon {
   --size: var(--icon-size, 1rem);

client/src/ui/organisms/footer/index.tsx

@@ -22,6 +22,16 @@ export function Footer() {
           </a>
           <p>Your blueprint for a better internet.</p>
           <ul className="social-icons">
+            <li>
+              <a
+                className="icon icon-mastodon"
+                href="https://mozilla.social/@mdn"
+                target="_blank"
+                rel="me noopener noreferrer"
+              >
+                <span className="visually-hidden">MDN on Mastodon</span>
+              </a>
+            </li>
             <li>
               <a
                 className="icon icon-twitter"