Merge pull request #18 from meguroes/refactor/home

refactor: イベントリストのリンク修正とマークアップの修正
meguroes · Jan 4, 2024 · 6883dda · 6883dda
2 parents ec157e2 + 138ab7a
commit 6883dda
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 31 deletions.
diff --git a/src/components/WantedSponsor.tsx b/src/components/WantedSponsor.tsx
@@ -41,10 +41,10 @@ export const WantedSponsor = ({
     ],
   );
   return (
-    <section className="space-y-48">
+    <section>
       <h2 className="mb-24 text-64 font-black leading-[120%]">{title}</h2>
-      <div className="text-14 font-light leading-180 tracking-2">
-        <p dangerouslySetInnerHTML={{ __html: summary }} />
+      <div className="mb-80 text-14 font-light leading-180 tracking-2">
+        <div dangerouslySetInnerHTML={{ __html: summary }} />
       </div>
       <div className="space-y-32">
         <h3 className="text-20 font-bold leading-140 tracking-2">

diff --git a/src/pages/about/+Page.tsx b/src/pages/about/+Page.tsx
@@ -10,7 +10,7 @@ export function Page() {
   const wantedSponsor = context?.data?.wantedSponsor;
 
   return (
-    <main class="about grid grid-cols-1 gap-120 px-20 md:p-80">
+    <div class="about grid grid-cols-1 gap-64 px-20 md:gap-120 md:p-80">
       <div class="grid grid-cols-1 gap-48">
         <Breadcrumb
           items={[
@@ -75,6 +75,6 @@ export function Page() {
       <section>
         <ContactX />
       </section>
-    </main>
+    </div>
   );
 }
diff --git a/src/pages/guideline/+Page.tsx b/src/pages/guideline/+Page.tsx
@@ -70,7 +70,7 @@ export default function Page() {
   );
 
   return (
-    <main className="guideline space-y-64 px-20 md:space-y-120 md:p-80">
+    <div className="guideline space-y-64 px-20 md:space-y-120 md:p-80">
       <section className="space-y-48">
         <Breadcrumb
           items={[
@@ -152,6 +152,6 @@ export default function Page() {
       <section>
         <ContactX />
       </section>
-    </main>
+    </div>
   );
 }
diff --git a/src/pages/index/+Page.tsx b/src/pages/index/+Page.tsx
@@ -179,19 +179,24 @@ export function Page() {
           sizes="large"
           className="mb-32"
         />
-        <table className="w-full table-auto">
-          <tbody>
-            {context?.data?.meetupList?.map((meetup, index) => {
-              const isComingSoon = day(meetup.fields.date).isSameOrAfter(
-                day(),
-                "milliseconds",
-              );
-              return (
-                <tr
-                  key={`${meetup.fields.id}-${index}`}
-                  className="border-b border-white-alpha12"
+        <ol className="w-full table-auto">
+          {context?.data?.meetupList?.map((meetup, index) => {
+            const isComingSoon = day(meetup.fields.date).isSameOrAfter(
+              day(),
+              "milliseconds",
+            );
+            return (
+              <li
+                key={`${meetup.fields.id}-${index}`}
+                className="border-b border-white-alpha12"
+              >
+                <a
+                  href={meetup.fields.connpassUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="flex items-center"
                 >
-                  <td className="flex items-center px-0 py-24 lg:table-cell lg:pl-4 lg:pr-32">
+                  <div className="flex items-center px-0 py-24 lg:pl-4 lg:pr-32">
                     <p
                       className={clsx(
                         "h-fit w-fit whitespace-nowrap rounded-8 py-8 pl-12 pr-10 text-center text-14 font-bold leading-100 tracking-2 md:rounded-12 md:py-12 md:pl-16 md:pr-14 md:text-18",
@@ -239,14 +244,14 @@ export function Page() {
                       </p>
                     </div>
                     {/* --- SPサイズの表示要素 --- */}
-                  </td>
-                  <td className="hidden whitespace-nowrap pr-32 text-18 font-bold leading-100 tracking-2 lg:table-cell">
+                  </div>
+                  <div className="whitespace-nowrap pr-32 text-18 font-bold leading-100 tracking-2">
                     {day(meetup.fields.date).format("YYYY.MM.DD（dd）")}
-                  </td>
-                  <td className="hidden grow pr-32 text-18 font-bold leading-140 tracking-2 lg:table-cell">
+                  </div>
+                  <div className="grow pr-32 text-18 font-bold leading-140 tracking-2">
                     {meetup.fields.title}
-                  </td>
-                  <td className="hidden lg:table-cell">
+                  </div>
+                  <div className="max-w-320">
                     <div className="flex h-full items-center pr-32 text-16 font-bold leading-140 tracking-2">
                       <img
                         alt=""
@@ -257,12 +262,12 @@ export function Page() {
                       />
                       <p>{meetup.fields.locationName}</p>
                     </div>
-                  </td>
-                </tr>
-              );
-            })}
-          </tbody>
-        </table>
+                  </div>
+                </a>
+              </li>
+            );
+          })}
+        </ol>
       </section>
       <section className="px-20 py-40 md:p-80">
         <SectionHeader