Chg: Card.astroのpaddingを調整 / New: 詳細を表で表示 / New: scroll-padding-topを指定 / New: scroll-behaviorを指定

src/components/Card.astro

@@ -42,7 +42,7 @@ a {
   align-items: center;
   text-decoration: none;
   width: var(--width);
-  padding: 0.75rem;
+  padding: 0.75rem 1rem;
   border-radius: 1rem;
   background-color: #ffffff;
   color: #000000;

src/pages/index.astro

@@ -27,15 +27,27 @@ import supports from "@/constants/supports";
   </div>
   
   <div class="section">
-    <span>詳細</span>
-    
-    {details.map((detail) => (
-      <Card {...detail} canDarkInvert />
-    ))}
+    <span id="detail">詳細</span>
+
+    <div class="table">
+      <table>
+        <tbody>
+          {details.map((detail, i) => (
+            <tr class={i === 0 || i === details.length - 1
+                ? "edge"
+                : ""}
+            >
+              <td>{detail.title}</td>
+              <td>{detail.description}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
   </div>
   
   <div class="section">
-    <span>リンク</span>
+    <span id="link">リンク</span>
     
     {links.map((link) => (
       <Card {...link} />
@@ -43,7 +55,7 @@ import supports from "@/constants/supports";
   </div>
 
   <div class="section">
-    <span>支援</span>
+    <span id="support">支援</span>
     
     {supports.map((link) => (
       <Card {...link} canDarkInvert isFullWidth />
@@ -51,7 +63,7 @@ import supports from "@/constants/supports";
   </div>
   
   <div class="section">
-    <span>連絡先</span>
+    <span id="contant">連絡先</span>
     
     {contacts.map((contact) => (
       <Card canDarkInvert {...contact} isFullWidth />
@@ -95,7 +107,8 @@ import supports from "@/constants/supports";
 }
 
 .section {
-  width: 70dvw;
+  min-width: 20rem;
+  width: 80dvw;
   display: flex;
   flex-wrap: wrap;
   gap: 0.75rem;
@@ -103,14 +116,49 @@ import supports from "@/constants/supports";
 
 .section span {
   width: 100%;
-  min-width: 20rem;
   font-weight: bold;
   font-size: 2rem;
   user-select: none;
   -webkit-user-select: none;
 }
-</style>
 
+.section .table {
+  width: 100%;
+  overflow: hidden;
+  padding: 0.75rem 1rem;
+  background-color: #ffffff;
+  color: #000000;
+  padding: 0.75rem 1rem;
+  border-radius: 1rem;
+}
+
+.section table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.section .table table tbody tr,
+.section .table table tbody td {
+  padding: 0.25rem;
+  font-size: 1.1rem;
+}
+
+.section .table table tbody tr {
+  border-top: 1px solid var(--border-color);
+  border-bottom: 1px solid var(--border-color);
+}
+
+.section .table table tbody tr.edge {
+  border: none;
+}
+
+@media (prefers-color-scheme: dark) {
+  .section .table {
+    background-color: #000000;
+    color: #ffffff;
+  }
+}
+</style>
 
 <script>
   const birthday = new Date("2014-12-08");
@@ -127,7 +175,7 @@ import supports from "@/constants/supports";
     return age;
   }
 
-  const cardDescriptions = Array.from(document.querySelectorAll(".card-description"));
+  const cardDescriptions = Array.from(document.querySelectorAll("td"));
   const ageData = cardDescriptions.filter(el => el.textContent === "")[0];
   ageData.textContent = getAge() + "歳";
 </script>

src/styles/global.css

@@ -24,6 +24,8 @@ html, body {
   min-height: 100dvh;
   font-family: "Noto Sans JP", sans-serif;
   word-break: break-all;
+  scroll-padding-top: calc(78.6667px + 1rem);
+  scroll-behavior: smooth;
   overscroll-behavior-x: none;
   scrollbar-width: thin;
   color: var(--text-color);