From f862b7680374191f3e26e65b9637281360075fad Mon Sep 17 00:00:00 2001 From: MisakaAkio Date: Thu, 24 Sep 2026 07:55:47 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=A1=B5=E8=84=9A=E5=AA=92?= =?UTF-8?q?=E4=BD=93=E6=A0=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/icon/social/bilibili.svg | 3 +++ public/icon/social/x.svg | 3 +++ public/icon/social/xiaohongshu.svg | 3 +++ src/app/globals.css | 7 +++++-- src/components/layout/site-footer.tsx | 18 +++++++++--------- 5 files changed, 23 insertions(+), 11 deletions(-) create mode 100644 public/icon/social/bilibili.svg create mode 100644 public/icon/social/x.svg create mode 100644 public/icon/social/xiaohongshu.svg diff --git a/public/icon/social/bilibili.svg b/public/icon/social/bilibili.svg new file mode 100644 index 0000000..231b8b8 --- /dev/null +++ b/public/icon/social/bilibili.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icon/social/x.svg b/public/icon/social/x.svg new file mode 100644 index 0000000..bb1993a --- /dev/null +++ b/public/icon/social/x.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icon/social/xiaohongshu.svg b/public/icon/social/xiaohongshu.svg new file mode 100644 index 0000000..2bc1963 --- /dev/null +++ b/public/icon/social/xiaohongshu.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/app/globals.css b/src/app/globals.css index 6114805..7849632 100644 --- a/src/app/globals.css +++ b/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) { diff --git a/src/components/layout/site-footer.tsx b/src/components/layout/site-footer.tsx index dd17f68..ed6b5d1 100644 --- a/src/components/layout/site-footer.tsx +++ b/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() {
{messages.footer.follow}
- {messages.footer.social.map((item, index) => ( - - {[ - "◌", - "◍", - "X", - "in", - "▶", - ][index] ?? "•"} + {socialLinks.map((social) => ( + + ))}