Fix: responsive

src/components/header/Header.astro

@@ -9,7 +9,7 @@ import Link from "@/components/header/Link.astro";
   mb-8
   top-[1rem]
   rounded-[1em]
-  w-[calc(80vw-2rem)]
+  w-[calc(90vw-2rem)]
   h-[5rem]
   sticky
   p-[1em]

src/pages/index.astro

@@ -7,28 +7,16 @@ import contacts from "@/constants/contacts";
 ---
 
 <Layout>
-  <div class={`
+  <div class="min-w-[400px] w-[70vw] flex p-5">
-    flex
-    justify-between
-    bg-white
-    shadow-sm
-    min-w-[420px]
-    w-[70vw]
-    rounded
-    p-5
-  `}>
     <img
       src={new URL("/last2014.png", Astro.url.origin).toString()}
       alt="アバター"
-      class={`
+      class="w-[60px] h-[60px] mr-2 rounded-full"
-        w-15
-        h-15
-        mr-2
-        !rounded-[100%]
-      `}
     />
     <div class="flex flex-grow flex-col">
-      <span class="text-xl font-bold">Last2014</span>
+      <span class="text-xl font-bold">
+        Last2014
+      </span>
       <p class="text-sm">
         ウェブ開発一生やってる小学生です。<br />
         TypeScriptをメインに色々作っています。
@@ -67,12 +55,7 @@ import contacts from "@/constants/contacts";
     <span class="font-bold text-4xl w-full mb-3">リンク</span>
     
     {links.map((link) => (
-      <Card
+      <Card {...link} />
-        title={link.title}
-        description={link.description}
-        img={link.img}
-        href={link.href}
-      />
     ))}
   </div>
   
@@ -87,13 +70,7 @@ import contacts from "@/constants/contacts";
     <span class="font-bold text-4xl w-full mb-3">連絡先</span>
     
     {contacts.map((contact) => (
-      <Card
+      <Card {...contact} isFullWidth />
-        title={contact.title}
-        description={contact.description}
-        img={contact.img}
-        href={contact.href}
-        isFullWidth
-      />
     ))}
   </div>
 </Layout>