修改页脚媒体栏

public/icon/social/bilibili.svg

@@ -0,0 +1,3 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="28" height="24.92" viewBox="0 0 28 24.92" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector" d="M20.7818 3.8885H21.7782C23.5398 3.9515 25.0087 4.56283 26.18 5.72483C27.3513 6.88567 27.958 8.34867 28 10.1115V18.6982C27.958 20.4598 27.3513 21.9287 26.18 23.1C25.0087 24.2713 23.541 24.878 21.7782 24.92H6.22183C4.46017 24.878 2.99133 24.2713 1.82 23.1C0.648667 21.9287 0.042 20.461 0 18.6982V10.1115C0.042 8.34867 0.648667 6.88567 1.82 5.72483C2.99133 4.56283 4.459 3.9515 6.22183 3.8885H7.12483L5.75517 2.58183C5.61431 2.4447 5.50302 2.28016 5.42818 2.09837C5.35334 1.91658 5.31652 1.72139 5.32 1.52483C5.32 1.1095 5.46467 0.757167 5.75517 0.466667L5.78667 0.435167C6.09817 0.144667 6.45517 0 6.86 0C7.26483 0 7.62183 0.144667 7.93333 0.435167L11.2618 3.64C11.3447 3.72283 11.4182 3.80567 11.48 3.8885H16.4582C16.5067 3.79622 16.5697 3.71232 16.6448 3.64L19.9733 0.435167C20.2848 0.144667 20.6418 0 21.0467 0C21.4515 0 21.819 0.176167 22.1305 0.466667C22.442 0.757167 22.5867 1.1095 22.5867 1.52483C22.5867 1.939 22.442 2.29133 22.1515 2.58183L20.7818 3.8885ZM6.22183 6.90667C5.3515 6.92767 4.62 7.22867 4.0285 7.8085C3.43817 8.3895 3.13133 9.12683 3.1115 10.0182V18.7915C3.13133 19.6828 3.43817 20.419 4.0285 21C4.62 21.581 5.3515 21.882 6.22183 21.9018H21.7782C22.6485 21.882 23.38 21.581 23.9715 21C24.5618 20.419 24.8687 19.6828 24.8885 18.7915V10.0182C24.8687 9.12567 24.5618 8.3895 23.9715 7.8085C23.38 7.22867 22.6485 6.92767 21.7782 6.90667H6.22183ZM9.33333 11.4182C9.7685 11.4182 10.1313 11.5628 10.4218 11.8533C10.7135 12.1438 10.8687 12.5172 10.8885 12.9733V14.3418C10.8687 14.798 10.7135 15.1713 10.4218 15.4618C10.1313 15.7535 9.7685 15.8982 9.33333 15.8982C8.89817 15.8982 8.53533 15.7523 8.24483 15.4618C7.95317 15.1713 7.798 14.798 7.77817 14.3418V12.9733C7.77817 12.5382 7.92867 12.1695 8.2285 11.8685C8.5295 11.5687 8.89817 11.4182 9.33333 11.4182ZM18.6667 11.4182C19.1018 11.4182 19.4647 11.5628 19.7552 11.8533C20.0468 12.1438 20.202 12.5172 20.2218 12.9733V14.3418C20.202 14.798 20.0468 15.1713 19.7552 15.4618C19.4647 15.7535 19.1018 15.8982 18.6667 15.8982C18.2315 15.8982 17.8687 15.7523 17.5782 15.4618C17.2865 15.1713 17.1313 14.798 17.1115 14.3418V12.9733C17.1313 12.5172 17.2865 12.1438 17.5782 11.8533C17.8687 11.5628 18.2315 11.4182 18.6667 11.4182Z" fill="#5F6464"/>
+</svg>

public/icon/social/x.svg

@@ -0,0 +1,3 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="27.398" height="28" viewBox="0 0 27.398 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector" d="M16.3053 11.8557L26.5055 0H24.0882L15.232 10.2947L8.1585 0H0L10.696 15.5668L0 28H2.41733L11.7693 17.129L19.2395 28H27.398L16.3053 11.8557ZM12.9955 15.7045L11.9117 14.154L3.28767 1.82H7L13.9592 11.774L15.043 13.3245L24.0893 26.2628H20.377L12.9955 15.7045Z" fill="#5F6464"/>
+</svg>

src/app/globals.css

@@ -165,8 +165,9 @@ a.friendly-link-card:hover, a.friendly-link-card:focus-visible { border-color: #
 .site-footer-socials { display: flex; align-items: center; justify-content: flex-start; gap: 33px; height: 28px; }
 .site-footer-title { width: 80px; font-family: "Noto Sans SC", sans-serif; font-size: 20px; font-weight: 400; line-height: 21px; letter-spacing: 0; color: #5f6464; }
 .site-footer-icons { display: flex; align-items: center; gap: 28px; }
-.site-footer-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 4px; background: transparent; color: #5e686d; font-size: 14px; font-weight: 700; transition: transform .2s ease, color .2s ease; }
-.site-footer-icon:hover { color: #1f2b38; transform: translateY(-1px); }
+.site-footer-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 4px; background: transparent; transition: transform .2s ease, opacity .2s ease; }
+.site-footer-icon img { display: block; max-width: 28px; max-height: 28px; object-fit: contain; }
+.site-footer-icon:hover, .site-footer-icon:focus-visible { opacity: .72; transform: translateY(-1px); }
 .site-footer-main { position: relative; height: 234px; padding-top: 21px; }
 .site-footer-columns { display: grid; grid-template-columns: 216px 216px 298px; gap: 0; width: 730px; height: 207px; }
 .site-footer-column h3 { margin: 0; font-family: "Noto Sans SC", sans-serif; font-size: 20px; font-weight: 400; line-height: 21px; color: #5f6464; }
@@ -222,6 +223,7 @@ html[data-theme="dark"] .status-code, html[data-theme="dark"] .status-content h1
 html[data-theme="dark"] .site-footer { color: #afbbc6; background: #0b1016; }
 html[data-theme="dark"] .site-footer-top, html[data-theme="dark"] .site-footer-meta { border-color: rgba(255, 255, 255, 0.1); }
 html[data-theme="dark"] .site-footer-title, html[data-theme="dark"] .site-footer-column h3, html[data-theme="dark"] .site-footer-column a, html[data-theme="dark"] .site-footer-icon, html[data-theme="dark"] .site-footer-legal-row, html[data-theme="dark"] .site-footer-copyright-row, html[data-theme="dark"] .site-footer-meta p { color: #afbbc6; }
+html[data-theme="dark"] .site-footer-icon img { filter: brightness(0) invert(1); opacity: .78; }
 
 /* The static HTML has no theme attribute. Apply the system theme before React hydrates. */
 @media (prefers-color-scheme: dark) {
@@ -261,6 +263,7 @@ html[data-theme="dark"] .site-footer-title, html[data-theme="dark"] .site-footer
   html:not([data-theme]) .site-footer { color: #afbbc6; background: #0b1016; }
   html:not([data-theme]) .site-footer-top, html:not([data-theme]) .site-footer-meta { border-color: rgba(255, 255, 255, 0.1); }
   html:not([data-theme]) .site-footer-title, html:not([data-theme]) .site-footer-column h3, html:not([data-theme]) .site-footer-column a, html:not([data-theme]) .site-footer-icon, html:not([data-theme]) .site-footer-legal-row, html:not([data-theme]) .site-footer-copyright-row, html:not([data-theme]) .site-footer-meta p { color: #afbbc6; }
+  html:not([data-theme]) .site-footer-icon img { filter: brightness(0) invert(1); opacity: .78; }
 }
 
 @media (max-width: 900px) { 

src/components/layout/site-footer.tsx

@@ -15,6 +15,12 @@ const footerColumnHrefs = [
 
 const footerLegalHrefs = ["https://wiki.kivotosrailway.com", "https://url.kivotos.cc/status", "/links"] as const;
 
+const socialLinks = [
+  { label: "Bilibili", icon: "/icon/social/bilibili.svg", width: 28, height: 25, href: "https://space.bilibili.com/14823193" },
+  { label: "X", icon: "/icon/social/x.svg", width: 27, height: 28, href: "https://x.com/kivotosrailway" },
+  { label: "Xiaohongshu", icon: "/icon/social/xiaohongshu.svg", width: 28, height: 10, href: "https://www.xiaohongshu.com/user/profile/655396cf0000000008003eea" },
+] as const;
+
 function isIcpVisibleHost(hostname: string) {
   return hostname === "localhost" || hostname === "127.0.0.1" || hostname === "[::1]" || hostname.endsWith(".kivotos.cc");
 }
@@ -59,15 +65,9 @@ export function SiteFooter() {
           <div className="site-footer-socials" aria-label="socials">
             <span className="site-footer-title">{messages.footer.follow}</span>
             <div className="site-footer-icons">
-              {messages.footer.social.map((item, index) => (
-                <a key={`social-${index}`} href="#" aria-label={item} className="site-footer-icon" title={item}>
-                  {[
-                    "◌",
-                    "◍",
-                    "X",
-                    "in",
-                    "▶",
-                  ][index] ?? "•"}
+              {socialLinks.map((social) => (
+                <a key={social.label} href={social.href} target="_blank" rel="noreferrer" aria-label={social.label} className="site-footer-icon" title={social.label}>
+                  <Image src={social.icon} alt="" width={social.width} height={social.height} />
                 </a>
               ))}
             </div>