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

public/icons/age.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="M260-720q-33 0-56.5-23.5T180-800q0-33 23.5-56.5T260-880q33 0 56.5 23.5T340-800q0 33-23.5 56.5T260-720Zm420 200q-25 0-42.5-17.5T620-580q0-25 17.5-42.5T680-640q25 0 42.5 17.5T740-580q0 25-17.5 42.5T680-520ZM180-80v-280h-60v-240q0-33 23.5-56.5T200-680h120q22 0 40 10.5t29 29.5l143 247 41-61q8-12 21.5-19t28.5-7h117q25 0 42.5 17.5T800-420v140h-40v200H600v-284l-31 44h-88L380-496v416H180Z"/></svg>

public/icons/cake.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="M160-80q-17 0-28.5-11.5T120-120v-200q0-33 23.5-56.5T200-400v-160q0-33 23.5-56.5T280-640h160v-58q-18-12-29-29t-11-41q0-15 6-29.5t18-26.5l56-56 56 56q12 12 18 26.5t6 29.5q0 24-11 41t-29 29v58h160q33 0 56.5 23.5T760-560v160q33 0 56.5 23.5T840-320v200q0 17-11.5 28.5T800-80H160Zm120-320h400v-160H280v160Zm-80 240h560v-160H200v160Zm80-240h400-400Zm-80 240h560-560Zm560-240H200h560Z"/></svg>

public/icons/calendar.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Z"/></svg>

public/icons/gender.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="M220-80v-300h-60v-220q0-33 23.5-56.5T240-680h120q33 0 56.5 23.5T440-600v220h-60v300H220Zm80-640q-33 0-56.5-23.5T220-800q0-33 23.5-56.5T300-880q33 0 56.5 23.5T380-800q0 33-23.5 56.5T300-720ZM600-80v-240H480l102-306q8-26 29.5-40t48.5-14q27 0 48.5 14t29.5 40l102 306H720v240H600Zm60-640q-33 0-56.5-23.5T580-800q0-33 23.5-56.5T660-880q33 0 56.5 23.5T740-800q0 33-23.5 56.5T660-720Z"/></svg>

public/icons/location.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="M480-480q33 0 56.5-23.5T560-560q0-33-23.5-56.5T480-640q-33 0-56.5 23.5T400-560q0 33 23.5 56.5T480-480Zm0 294q122-112 181-203.5T720-552q0-109-69.5-178.5T480-800q-101 0-170.5 69.5T240-552q0 71 59 162.5T480-186Zm0 106Q319-217 239.5-334.5T160-552q0-150 96.5-239T480-880q127 0 223.5 89T800-552q0 100-79.5 217.5T480-80Zm0-480Z"/></svg>

public/icons/world.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="M480-80q-82 0-155-31.5t-127.5-86Q143-252 111.5-325T80-480q0-83 31.5-155.5t86-127Q252-817 325-848.5T480-880q83 0 155.5 31.5t127 86q54.5 54.5 86 127T880-480q0 82-31.5 155t-86 127.5q-54.5 54.5-127 86T480-80Zm0-82q26-36 45-75t31-83H404q12 44 31 83t45 75Zm-104-16q-18-33-31.5-68.5T322-320H204q29 50 72.5 87t99.5 55Zm208 0q56-18 99.5-55t72.5-87H638q-9 38-22.5 73.5T584-178ZM170-400h136q-3-20-4.5-39.5T300-480q0-21 1.5-40.5T306-560H170q-5 20-7.5 39.5T160-480q0 21 2.5 40.5T170-400Zm216 0h188q3-20 4.5-39.5T580-480q0-21-1.5-40.5T574-560H386q-3 20-4.5 39.5T380-480q0 21 1.5 40.5T386-400Zm268 0h136q5-20 7.5-39.5T800-480q0-21-2.5-40.5T790-560H654q3 20 4.5 39.5T660-480q0 21-1.5 40.5T654-400Zm-16-240h118q-29-50-72.5-87T584-782q18 33 31.5 68.5T638-640Zm-234 0h152q-12-44-31-83t-45-75q-26 36-45 75t-31 83Zm-200 0h118q9-38 22.5-73.5T376-782q-56 18-99.5 55T204-640Z"/></svg>

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>
+    <span id="detail">詳細</span>
-    
+
-    {details.map((detail) => (
+    <div class="table">
-      <Card {...detail} canDarkInvert />
+      <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);