Skip to content

Commit 499e718

Browse files
Nat1anWasTakenNat1anWasTaken
committed
feat(recruitment): refresh multi-team notice and dialog metadata
Update the recruitment presentation to emphasize multi-team applications and make deadline information more prominent in detail dialogs. Remove obsolete headcount fields and align responsive styles with the revised structure.
1 parent 984b224 commit 499e718

3 files changed

Lines changed: 63 additions & 89 deletions

File tree

‎src/components/Recruitment.astro‎

Lines changed: 13 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -28,12 +28,12 @@ const getRecruitmentUrl = (team: (typeof recruitmentTeams)[number]) =>
2828
</div>
2929
</div>
3030

31-
<aside class="shell multi-team-notice" aria-label="多組報名說明">
32-
<span>Multiple teams welcome</span>
33-
<p>
34-
<strong>可以同時報名多個組別</strong>
35-
不需要只選一組；如果有多個感興趣的組別，都歡迎報名！
36-
</p>
31+
<aside class="shell multi-team-notice" aria-labelledby="multi-team-heading">
32+
<span class="multi-team-notice-mark" aria-hidden="true">＋</span>
33+
<div class="multi-team-notice-copy">
34+
<h3 id="multi-team-heading">喜歡不只一組？<strong>那就都報。</strong></h3>
35+
<p><span>你可以同時報名多個組別，</span><span>不需要只選一組。</span></p>
36+
</div>
3737
</aside>
3838

3939
<div class="shell team-grid" aria-label="工作人員招募組別">
@@ -137,7 +137,13 @@ const getRecruitmentUrl = (team: (typeof recruitmentTeams)[number]) =>
137137
<div>
138138
<p class="eyebrow">Team recruitment · 組別招募</p>
139139
<h2 id={titleId}>{team.name}</h2>
140-
<p id={descriptionId}>{team.description}</p>
140+
<p id={descriptionId} class="recruitment-dialog-description">{team.description}</p>
141+
<dl class="recruitment-dialog-meta">
142+
<div>
143+
<dt>招募截止</dt>
144+
<dd>{details.deadline}</dd>
145+
</div>
146+
</dl>
141147
</div>
142148
<form method="dialog">
143149
<button class="recruitment-dialog-close" type="submit" aria-label={`關閉${team.name}詳細資訊`}>
@@ -146,17 +152,6 @@ const getRecruitmentUrl = (team: (typeof recruitmentTeams)[number]) =>
146152
</form>
147153
</header>
148154

149-
<dl class="recruitment-dialog-meta">
150-
<div>
151-
<dt>招募截止</dt>
152-
<dd>{details.deadline}</dd>
153-
</div>
154-
<div>
155-
<dt>預計人數</dt>
156-
<dd>{details.headcount}</dd>
157-
</div>
158-
</dl>
159-
160155
<div class="recruitment-dialog-content" tabindex="0" aria-label={`${team.name}詳細招募內容`}>
161156
{
162157
details.sections.map((section) => (

‎src/data/site.ts‎

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,6 @@ export interface RecruitmentTeam {
5656
| { type: "none" };
5757
recruitmentDetails?: {
5858
deadline: string;
59-
headcount: string;
6059
sections: RecruitmentDetailSection[];
6160
contacts?: RecruitmentContact[];
6261
};
@@ -176,7 +175,6 @@ export const recruitmentTeams: RecruitmentTeam[] = [
176175
},
177176
recruitmentDetails: {
178177
deadline: "2026/08/15 23:59",
179-
headcount: "行政股 1 人、財務股 1 人",
180178
sections: [
181179
{
182180
title: "行政股工作內容",
@@ -219,7 +217,6 @@ export const recruitmentTeams: RecruitmentTeam[] = [
219217
},
220218
recruitmentDetails: {
221219
deadline: "2026/08/17 23:59",
222-
headcount: "組員 4 人、議程助理 10 人",
223220
sections: [
224221
{
225222
title: "議程組工作內容",
@@ -300,7 +297,6 @@ export const recruitmentTeams: RecruitmentTeam[] = [
300297
},
301298
recruitmentDetails: {
302299
deadline: "2026/08/17 23:59",
303-
headcount: "3–4 人",
304300
sections: [
305301
{
306302
title: "關於活動組",
@@ -378,7 +374,6 @@ export const recruitmentTeams: RecruitmentTeam[] = [
378374
},
379375
recruitmentDetails: {
380376
deadline: "2026/08/31 23:59",
381-
headcount: "40 人",
382377
sections: [
383378
{
384379
title: "關於場務組",
@@ -439,7 +434,6 @@ export const recruitmentTeams: RecruitmentTeam[] = [
439434
},
440435
recruitmentDetails: {
441436
deadline: "2026/08/25 23:59",
442-
headcount: "4 人",
443437
sections: [
444438
{
445439
title: "我們要做的事情",
@@ -474,7 +468,6 @@ export const recruitmentTeams: RecruitmentTeam[] = [
474468
},
475469
recruitmentDetails: {
476470
deadline: "2026/08/31 23:59（UTC+8）",
477-
headcount: "9 人",
478471
sections: [
479472
{
480473
title: "工作內容",
@@ -497,7 +490,6 @@ export const recruitmentTeams: RecruitmentTeam[] = [
497490
},
498491
recruitmentDetails: {
499492
deadline: "2026/08/31 23:59",
500-
headcount: "26 人",
501493
sections: [
502494
{
503495
title: "工作內容",
@@ -537,7 +529,6 @@ export const recruitmentTeams: RecruitmentTeam[] = [
537529
},
538530
recruitmentDetails: {
539531
deadline: "2026/08/21 23:59",
540-
headcount: "未公布",
541532
sections: [
542533
{
543534
title: "加入開發組",
@@ -575,7 +566,6 @@ export const recruitmentTeams: RecruitmentTeam[] = [
575566
},
576567
recruitmentDetails: {
577568
deadline: "2026/08/23 23:59",
578-
headcount: "1–2 人",
579569
sections: [
580570
{
581571
title: "工作內容",
@@ -613,7 +603,6 @@ export const recruitmentTeams: RecruitmentTeam[] = [
613603
recruitment: { type: "form", url: "https://forms.gle/6axBFeVCGrPBQMZFA" },
614604
recruitmentDetails: {
615605
deadline: "2025/08/18 23:59",
616-
headcount: "11 人",
617606
sections: [
618607
{
619608
title: "工作內容",

‎src/styles/global.css‎

Lines changed: 50 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -621,43 +621,44 @@ canvas {
621621
}
622622

623623
.multi-team-notice {
624-
display: flex;
624+
display: grid;
625+
grid-template-columns: auto minmax(0, 1fr);
625626
align-items: center;
626-
justify-content: space-between;
627-
gap: 32px;
628-
margin-top: 52px;
629-
padding: 16px 18px;
630-
color: var(--ink);
631-
background: var(--acid);
632-
border-left: 6px solid var(--coral);
627+
gap: 18px;
628+
margin-top: 72px;
633629
}
634630

635-
.multi-team-notice > span {
636-
flex: 0 0 auto;
637-
font-family: var(--font-sans);
638-
font-size: 10px;
631+
.multi-team-notice-mark {
632+
color: var(--coral);
633+
font-size: clamp(42px, 5vw, 68px);
639634
font-weight: 800;
640-
letter-spacing: 0.08em;
641-
text-transform: uppercase;
635+
line-height: 0.82;
642636
}
643637

644-
.multi-team-notice p {
645-
display: flex;
646-
align-items: baseline;
647-
gap: 12px;
638+
.multi-team-notice h3 {
648639
margin: 0;
649-
font-size: 14px;
640+
color: var(--acid);
641+
font-size: clamp(32px, 3.8vw, 52px);
642+
font-weight: 850;
643+
line-height: 1.02;
644+
letter-spacing: -0.02em;
650645
}
651646

652-
.multi-team-notice strong {
653-
font-size: 17px;
654-
font-weight: 900;
647+
.multi-team-notice h3 strong {
648+
font-weight: inherit;
649+
}
650+
651+
.multi-team-notice-copy > p {
652+
max-width: 400px;
653+
margin: 16px 0 0;
654+
color: rgba(242, 239, 229, 0.72);
655+
font-size: 16px;
655656
}
656657

657658
.team-grid {
658659
display: grid;
659660
grid-template-columns: repeat(4, 1fr);
660-
margin-top: 28px;
661+
margin-top: 36px;
661662
border-top: 1px solid var(--line-light);
662663
border-left: 1px solid var(--line-light);
663664
}
@@ -840,7 +841,7 @@ body.dialog-is-open {
840841
line-height: 1.08;
841842
}
842843

843-
.recruitment-dialog-header > div > p:last-child {
844+
.recruitment-dialog-description {
844845
max-width: 570px;
845846
margin: 14px 0 0;
846847
color: rgba(242, 239, 229, 0.7);
@@ -875,32 +876,28 @@ body.dialog-is-open {
875876
}
876877

877878
.recruitment-dialog-meta {
878-
display: grid;
879-
flex: 0 0 auto;
880-
grid-template-columns: repeat(2, minmax(0, 1fr));
881-
margin: 0;
882-
border-bottom: 1px solid var(--line-light);
879+
margin: 20px 0 0;
880+
padding-left: 14px;
881+
border-left: 4px solid var(--acid);
883882
}
884883

885884
.recruitment-dialog-meta > div {
886-
padding: 18px 36px;
887-
}
888-
889-
.recruitment-dialog-meta > div + div {
890-
border-left: 1px solid var(--line-light);
885+
display: flex;
886+
align-items: center;
887+
gap: 14px;
891888
}
892889

893890
.recruitment-dialog-meta dt {
894-
margin-bottom: 5px;
895-
color: rgba(242, 239, 229, 0.5);
891+
color: var(--acid);
896892
font-family: var(--font-sans);
897-
font-size: 10px;
898-
letter-spacing: 0.08em;
893+
font-size: 14px;
894+
letter-spacing: 0.06em;
899895
text-transform: uppercase;
900896
}
901897

902898
.recruitment-dialog-meta dd {
903899
margin: 0;
900+
font-size: 18px;
904901
font-weight: 800;
905902
}
906903

@@ -1407,6 +1404,10 @@ body.dialog-is-open {
14071404
gap: 28px;
14081405
}
14091406

1407+
.multi-team-notice {
1408+
margin-top: 52px;
1409+
}
1410+
14101411
.section-lede,
14111412
.join-copy,
14121413
.about-copy {
@@ -1526,20 +1527,22 @@ body.dialog-is-open {
15261527
}
15271528

15281529
.multi-team-notice {
1529-
align-items: flex-start;
1530-
flex-direction: column;
1531-
gap: 10px;
1532-
margin-top: 40px;
1533-
padding: 15px 16px;
1530+
gap: 12px;
1531+
margin-top: 44px;
15341532
}
15351533

1536-
.multi-team-notice p {
1537-
align-items: flex-start;
1538-
flex-direction: column;
1539-
gap: 4px;
1534+
.multi-team-notice h3 strong {
1535+
display: block;
1536+
}
1537+
1538+
.multi-team-notice-copy > p {
15401539
line-height: 1.55;
15411540
}
15421541

1542+
.multi-team-notice-copy > p span {
1543+
display: block;
1544+
}
1545+
15431546
.team-grid {
15441547
grid-template-columns: 1fr;
15451548
}
@@ -1571,19 +1574,6 @@ body.dialog-is-open {
15711574
height: 40px;
15721575
}
15731576

1574-
.recruitment-dialog-meta {
1575-
grid-template-columns: 1fr;
1576-
}
1577-
1578-
.recruitment-dialog-meta > div {
1579-
padding: 14px 20px;
1580-
}
1581-
1582-
.recruitment-dialog-meta > div + div {
1583-
border-top: 1px solid var(--line-light);
1584-
border-left: 0;
1585-
}
1586-
15871577
.recruitment-dialog-content {
15881578
gap: 28px;
15891579
padding: 28px 20px 34px;

0 commit comments

Comments
 (0)