simplize css

1 files changed, 9 insertions, 18 deletions

diff --git a/app/routes/home.tsx b/app/routes/home.tsx
index 5600645..5aa7de1 100644
--- a/app/routes/home.tsx
+++ b/app/routes/home.tsx
@@ -14,32 +14,23 @@ const STATUS_LABEL: Record<string, string> = {
 export default function Home() {
   const { bands } = useLoaderData<typeof loader>();
   return (
-    <main className="max-w-2xl mx-auto px-6 py-12">
+    <main>
       {bands.length === 0 ? (
-        <p className="text-gray-600 text-sm">
+        <p className="muted">
           バンドがまだありません。{" "}
-          <Link to="/bands/new" className="underline">
-            追加する
-          </Link>
+          <Link to="/bands/new">追加する</Link>
         </p>
       ) : (
-        <ul className="divide-y divide-gray-900">
+        <ul className="band-list">
           {bands.map((band) => (
-            <li key={band.id} className="py-4 flex items-start justify-between gap-6">
-              <div className="min-w-0">
-                <Link
-                  to={`/bands/of/${band.id}`}
-                  className="text-gray-100 hover:text-white font-medium"
-                >
-                  {band.name}
-                </Link>
+            <li key={band.id}>
+              <div className="name-col">
+                <Link to={`/bands/of/${band.id}`}>{band.name}</Link>
                 {band.description && (
-                  <p className="text-gray-500 text-sm mt-0.5 line-clamp-1">
-                    {band.description}
-                  </p>
+                  <p className="desc">{band.description}</p>
                 )}
               </div>
-              <div className="flex items-center gap-4 text-sm text-gray-500 shrink-0 pt-0.5">
+              <div className="info">
                 {band.area && <span>{band.area}</span>}
                 <span>{STATUS_LABEL[band.status] ?? band.status}</span>
               </div>