Feat: 更新 UI 细节

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

app/routes/gallery.tsx

@@ -81,7 +81,7 @@ export default function Gallery({ loaderData }: Route.ComponentProps) {
             role="button"
             tabIndex={0}
             onKeyDown={() => {}}
-            className="relative bg-white rounded-xl overflow-hidden border-4 border-transparent hover:border-pink-400 transition-colors border-b-4 border-b-cyan-200 group"
+            className="relative bg-white rounded-xl overflow-hidden border-4 border-transparent hover:border-pink-400 transition-colors border-b-4 border-b-cyan-200 group cursor-pointer"
             onClick={() => open(index)}
           >
             <img className={styles.image} src={item.thumb_url} alt={item.title} loading="lazy" />

app/routes/index.tsx

@@ -8,6 +8,7 @@ import {
   QQ,
   Steam,
   TwitterX,
+  Feed,
 } from "~/components/ui/icons";
 import { siteTitle } from "~/utils";
 
@@ -63,6 +64,9 @@ export default function Index({ loaderData }: Route.ComponentProps) {
             <a href="https://steamcommunity.com/id/dreamer-paul" target="_blank" rel="noreferrer" title="Steam">
               <Steam className="w-6" />
             </a>
+            <a href="https://paul.ren/feed" target="_blank" title="订阅 RSS">
+              <Feed className="w-6" />
+            </a>
           </p>
         </div>
         <ArrowDown className="absolute left-0 right-0 bottom-20 mx-auto w-10 h-10 opacity-60 animate-bounce" />

app/routes/note-detail.tsx

@@ -53,7 +53,7 @@ export default function NoteDetail({ loaderData }: Route.ComponentProps) {
   };
 
   return (
-    <main className="px-2 py-24 max-w-3xl mx-auto">
+    <main className="px-2 py-24 max-w-4xl mx-auto">
       <section className="mb-12">
         <h1
           className="text-center text-5xl/tight md:text-7xl/tight mb-4"
@@ -63,7 +63,7 @@ export default function NoteDetail({ loaderData }: Route.ComponentProps) {
         </h1>
         <p className="text-center opacity-60">{note.data.date}</p>
       </section>
-      <section className="p-5 bg-white rounded-xl border-b-4 border-b-cyan-200 mb-8">
+      <section className="p-5 md:p-12 bg-white rounded-xl border-b-4 border-b-cyan-200 mb-16">
         <Article html={note.data.content_html} />
       </section>
       <section className="flex gap-16 items-center justify-center text-base md:text-lg">

app/routes/note.tsx

@@ -50,7 +50,7 @@ export default function Note({ loaderData }: Route.ComponentProps) {
   };
 
   return (
-    <main className="px-2 py-24 max-w-3xl mx-auto">
+    <main className="px-2 py-24 max-w-4xl mx-auto">
       <section className="mb-12">
         <h1 className="text-center text-5xl/tight md:text-7xl/tight">日记</h1>
       </section>
@@ -67,13 +67,13 @@ export default function Note({ loaderData }: Route.ComponentProps) {
               viewTransition
             >
               {item.starred && (
-                <StarFill className="absolute -top-5 -right-5 w-28 h-28 text-yellow-300 text-opacity-20 -rotate-[23deg]" />
+                <StarFill className="absolute -top-5 -right-5 w-28 h-28 text-yellow-300 text-opacity-20 rotate-[-23deg]" />
               )}
-              <h2 className={clsn(cover && "md:mr-40", "text-pink-400 text-2xl font-bold mb-4")} style={{ viewTransitionName: `note-title-${item.id}` }}>
+              <h2 className={clsn(cover && "mt-48 sm:mt-0 md:mr-40", "text-pink-400 text-2xl font-bold mb-4")} style={{ viewTransitionName: `note-title-${item.id}` }}>
                 {item.title}
               </h2>
               <p className={clsn(cover && "sm:mr-40", "mb-8 relative")}>{item.except}</p>
-              <div className={clsn(cover && "mb-40 sm:mb-0 sm:mr-40", "flex items-end justify-between text-sm")}>
+              <div className={clsn(cover && "sm:mr-40", "flex items-end justify-between text-sm")}>
                 <p className="opacity-60">{item.date}</p>
                 <span className="flex items-center opacity-60">
                   <ThumbUpFill className="h-4 w-4 mr-1" />
@@ -82,8 +82,8 @@ export default function Note({ loaderData }: Route.ComponentProps) {
               </div>
               {cover && (
                 <div
-                  className="absolute h-40 sm:h-auto sm:w-40 left-0 sm:top-0 sm:left-[unset] right-0 bottom-0 transition-opacity bg-cover opacity-30 group-hover:opacity-80"
-                  style={{ backgroundImage: `url("${cover}")`, clipPath: "polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%)" }}
+                  className="absolute h-48 sm:h-auto sm:w-40 left-0 top-0 sm:left-[unset] right-0 sm:bottom-0 transition-opacity bg-cover opacity-80 sm:opacity-30 group-hover:opacity-80 sm:[clip-path:polygon(25%_0%,100%_0%,100%_100%,0%_100%)]"
+                  style={{ backgroundImage: `url("${cover}")` }}
                 />
               )}
             </Link>

app/routes/page.tsx

@@ -28,12 +28,12 @@ export default function DynamicPage({ loaderData }: Route.ComponentProps) {
   const page = loaderData;
 
   return (
-    <main className="px-2 py-24 max-w-3xl mx-auto">
+    <main className="px-2 py-24 max-w-4xl mx-auto">
       <section className="mb-12">
         <h1 className="text-center text-5xl/tight md:text-7xl/tight mb-4">{page.data.title}</h1>
         <p className="text-center opacity-60">{page.data.desc}</p>
       </section>
-      <section className="p-5 bg-white rounded-xl border-b-4 border-b-cyan-200">
+      <section className="p-5 md:p-12 bg-white rounded-xl border-b-4 border-b-cyan-200">
         <Article html={page.data.content} />
       </section>
     </main>