Feat: 更新 UI 细节

页眉样式修改，增加社交媒体按钮
调整卡片内间距和整体宽度
修复手机版文章卡片插图展示异常

app/components/layout/footer.tsx

@@ -3,7 +3,7 @@ const { APP_SITENAME, APP_FOOTER_EXTRA } = import.meta.env;
 function Footer() {
   return (
     <footer className="pb-12">
-      <div className="grid gap-2 sm:grid-cols-2 px-2 max-w-3xl mx-auto text-sm text-center sm:text-left opacity-60">
+      <div className="grid gap-2 sm:grid-cols-2 px-2 max-w-4xl mx-auto text-sm text-center sm:text-left opacity-60">
         <p>{`© ${new Date().getFullYear()} ${APP_SITENAME}`}</p>
         {APP_FOOTER_EXTRA && <p className="sm:text-right" dangerouslySetInnerHTML={{ __html: APP_FOOTER_EXTRA }} />}
       </div>

app/components/layout/header.tsx

@@ -1,4 +1,6 @@
 import { NavLink } from "react-router";
+import { Feed, GitHub, QQ } from "../ui/icons";
+import { clsn } from "~/utils";
 
 const navItems = [
   { name: "首页", to: "/" },
@@ -7,23 +9,40 @@ const navItems = [
   { name: "关于我", to: "/about" },
 ];
 
-const inheritCls = "inline-block py-2 px-5";
-const activeCls = "inline-block py-2 px-5 bg-orange-200 text-pink-400 rounded-xl";
+const inheritCls = "hover:text-pink-400";
+const activeCls = "bg-pink-300 text-white rounded-xl hover:border-pink-400 border-b-pink-400";
 
 function Header() {
   return (
-    <header className="fixed top-0 left-0 right-0 bg-pink-400 text-white z-10">
-      <nav className="py-3 px-2">
+    <header className="fixed top-0 left-0 right-0 bg-orange-50 z-10 flex justify-between items-center px-2 md:px-6 py-4">
+      <nav>
         {navItems.map((item) => (
           <NavLink
             key={item.name}
             to={item.to}
-            className={({ isActive }) => isActive ? activeCls : inheritCls}
+            className={({ isActive }) =>
+              clsn(
+                "inline-block font-semibold py-2 px-4",
+                "border-4 border-transparent transition-colors",
+                isActive ? activeCls : inheritCls
+              )
+            }
           >
             {item.name}
           </NavLink>
         ))}
       </nav>
+      <nav className="flex items-center gap-2 [&>a]:hover:text-pink-400 [&>a]:transition-colors">
+        <a href="https://paul.ren/join-group" target="_blank" rel="noreferrer" title="企鹅群">
+          <QQ className="w-5" />
+        </a>
+        <a href="https://github.com/Dreamer-Paul" target="_blank" rel="noreferrer" title="GitHub">
+          <GitHub className="w-5" />
+        </a>
+        <a href="https://paul.ren/feed" target="_blank" title="订阅 RSS">
+          <Feed className="w-5" />
+        </a>
+      </nav>
     </header>
   );
 }