simplize css

1 files changed, 20 insertions, 55 deletions

diff --git a/app/routes/artist-by-uuid.tsx b/app/routes/artist-by-uuid.tsx
index 9b8a4b1..6eb06a7 100644
--- a/app/routes/artist-by-uuid.tsx
+++ b/app/routes/artist-by-uuid.tsx
@@ -14,42 +14,23 @@ export async function loader({ params }: LoaderFunctionArgs) {
 export default function ArtistDetail() {
   const { artist, links, bands, latest } = useLoaderData<typeof loader>();
   return (
-    <main className="max-w-3xl mx-auto px-4 py-8">
-      <div className="flex items-start justify-between mb-6">
-        <h1 className="text-2xl font-bold">{artist.name}</h1>
-        <div className="flex items-center gap-3 text-sm shrink-0 ml-4">
-          <Link
-            to={`/artists/of/${artist.id}/history`}
-            className="text-gray-400 hover:text-gray-200 transition-colors"
-          >
-            履歴
-          </Link>
-          <Link
-            to={`/artists/of/${artist.id}/edit`}
-            className="bg-gray-800 hover:bg-gray-700 text-gray-200 px-3 py-1.5 rounded transition-colors"
-          >
-            編集
-          </Link>
+    <main>
+      <div className="detail-header">
+        <h1>{artist.name}</h1>
+        <div className="detail-actions">
+          <Link to={`/artists/of/${artist.id}/history`} className="history">履歴</Link>
+          <Link to={`/artists/of/${artist.id}/edit`} className="edit">編集</Link>
         </div>
       </div>
 
       {bands.length > 0 && (
-        <section className="mb-6">
-          <h2 className="text-xs font-medium text-gray-500 uppercase tracking-wider mb-3">
-            バンド
-          </h2>
-          <ul className="space-y-2">
+        <section>
+          <h2>バンド</h2>
+          <ul className="member-list">
             {bands.map((b) => (
-              <li key={b.band_id} className="flex items-center gap-3">
-                <Link
-                  to={`/bands/of/${b.band_id}`}
-                  className="text-blue-400 hover:text-blue-300 transition-colors font-medium"
-                >
-                  {b.band_name}
-                </Link>
-                {b.role && (
-                  <span className="text-gray-400 text-sm">{b.role}</span>
-                )}
+              <li key={b.band_id}>
+                <Link to={`/bands/of/${b.band_id}`}>{b.band_name}</Link>
+                {b.role && <span className="muted">{b.role}</span>}
               </li>
             ))}
           </ul>
@@ -57,42 +38,26 @@ export default function ArtistDetail() {
       )}
 
       {links.length > 0 && (
-        <section className="mb-6">
-          <h2 className="text-xs font-medium text-gray-500 uppercase tracking-wider mb-3">
-            リンク
-          </h2>
-          <ul className="space-y-1.5">
+        <section>
+          <h2>リンク</h2>
+          <ul className="link-list">
             {links.map((l) => (
               <li key={l.id}>
-                <a
-                  href={l.url}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="text-blue-400 hover:text-blue-300 transition-colors text-sm"
-                >
-                  {l.label}
-                </a>
+                <a href={l.url} target="_blank" rel="noopener noreferrer">{l.label}</a>
               </li>
             ))}
           </ul>
         </section>
       )}
 
-      <hr className="border-gray-800 my-6" />
-      <div className="text-xs text-gray-600 space-y-1 font-mono">
+      <hr />
+      <div className="meta">
         <p>/artists/of/{artist.id}</p>
         <p>
-          <Link
-            to={`/artists/named/${artist.slug}`}
-            className="hover:text-gray-400 transition-colors"
-          >
-            /artists/named/{artist.slug}
-          </Link>
+          <Link to={`/artists/named/${artist.slug}`}>/artists/named/{artist.slug}</Link>
         </p>
         {latest && (
-          <p className="font-sans text-gray-500 mt-2">
-            最終更新: {latest.created_at} — {latest.message}
-          </p>
+          <p className="updated">最終更新: {latest.created_at} — {latest.message}</p>
         )}
       </div>
     </main>