last2014/website
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Last2014
2026-03-28 22:18:28 +09:00
parent bce92aa00e
commit b93eb11d17
9 changed files with 63 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/icons/age.svg
-1
View File
@@ -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>
Side by Side

Before

Width:  |  Height:  |  Size: 508 B

public/icons/cake.svg
-1
View File
@@ -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>
Side by Side

Before

Width:  |  Height:  |  Size: 503 B

public/icons/calendar.svg
-1
View File
@@ -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>
Side by Side

Before

Width:  |  Height:  |  Size: 327 B

public/icons/gender.svg
-1
View File
@@ -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>
Side by Side

Before

Width:  |  Height:  |  Size: 502 B

public/icons/location.svg
-1
View File
@@ -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>
Side by Side

Before

Width:  |  Height:  |  Size: 445 B

public/icons/world.svg
-1
View File
@@ -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>
Side by Side

Before

Width:  |  Height:  |  Size: 976 B

src/components/Card.astro
+1 -1
View File
@@ -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
+60 -12
View File
@@ -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
+2
View File
@@ -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);