diff options
| -rw-r--r-- | src/components/ScheduleMonthLinks.astro | 20 | ||||
| -rw-r--r-- | src/pages/kodaira/events/[period].astro | 8 | ||||
| -rw-r--r-- | src/styles/custom.css | 64 |
3 files changed, 56 insertions, 36 deletions
diff --git a/src/components/ScheduleMonthLinks.astro b/src/components/ScheduleMonthLinks.astro index 9f553df..adf3b32 100644 --- a/src/components/ScheduleMonthLinks.astro +++ b/src/components/ScheduleMonthLinks.astro @@ -17,20 +17,24 @@ const groups = fiscalYearKeys.map((fy) => ({ })); --- -<ul class="schedule-month-archive"> +<div class="schedule-archive"> { groups.map((group) => ( - <li class="schedule-year-archive"> - <a href={scheduleUrl(`${group.key}/`)}>{group.label}の予定</a> - <ul> + <section class="schedule-archive-year"> + <h3 class="schedule-archive-year-title"> + <a href={scheduleUrl(`${group.key}/`)}>{group.label}の予定</a> + </h3> + <ul class="schedule-archive-months"> {group.months.map((key) => ( <li> - <a href={scheduleUrl(`${key}/`)}>{monthLabel(key)}の予定</a> - <span class="schedule-month-count">{monthCounts[key]}件</span> + <a href={scheduleUrl(`${key}/`)}> + <span>{monthLabel(key)}</span> + <span class="schedule-archive-count">{monthCounts[key]}件</span> + </a> </li> ))} </ul> - </li> + </section> )) } -</ul> +</div> diff --git a/src/pages/kodaira/events/[period].astro b/src/pages/kodaira/events/[period].astro index 084760c..701d9e3 100644 --- a/src/pages/kodaira/events/[period].astro +++ b/src/pages/kodaira/events/[period].astro @@ -97,11 +97,13 @@ const description = isAllPast { kind === 'fiscal' && ( - <ul class="schedule-month-archive"> + <ul class="schedule-archive-months"> {months.map((month) => ( <li> - <a href={url(month)}>{monthLabel(month)}の予定</a> - <span class="schedule-month-count">{monthCounts[month]}件</span> + <a href={url(month)}> + <span>{monthLabel(month)}</span> + <span class="schedule-archive-count">{monthCounts[month]}件</span> + </a> </li> ))} </ul> diff --git a/src/styles/custom.css b/src/styles/custom.css index 668e922..e100625 100644 --- a/src/styles/custom.css +++ b/src/styles/custom.css @@ -2254,38 +2254,52 @@ td.sanpi-open .sanpi-title { font-size: 0.88rem; line-height: 1.7; } -.schedule-month-archive { - display: flex; - flex-wrap: wrap; - gap: 0.4rem 1.2rem; - margin: 0.6rem 0 1.2rem; +.schedule-archive { + display: grid; + gap: 0.9rem; + margin: 1rem 0 1.4rem; +} +.schedule-archive-year { + padding: 0.9rem 1rem 1rem; + border: 1px solid var(--sl-color-gray-5); + border-radius: 0.7rem; + background: var(--sl-color-gray-6); +} +.schedule-archive-year-title { + margin: 0 0 0.7rem; + font-size: 1rem; + line-height: 1.5; +} +.schedule-archive-months { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); + gap: 0.5rem; + margin: 0; padding: 0; list-style: none; } -.schedule-month-archive li { +.schedule-archive-months a { display: flex; align-items: baseline; - gap: 0.35rem; -} -.schedule-month-count { - color: var(--sl-color-gray-3); - font-size: 0.8rem; -} -.schedule-year-archive { - display: block; - width: 100%; - margin: 0 0 0.6rem; + justify-content: space-between; + gap: 0.4rem; + padding: 0.5rem 0.7rem; + border: 1px solid var(--sl-color-gray-5); + border-radius: 0.5rem; + background: var(--sl-color-bg); + color: var(--sl-color-text); + font-size: 0.9rem; + line-height: 1.4; + text-decoration: none; } -.schedule-year-archive > a { - font-weight: 600; +.schedule-archive-months a:hover { + border-color: var(--sl-color-accent); + background: var(--sl-color-gray-5); } -.schedule-year-archive > ul { - display: flex; - flex-wrap: wrap; - gap: 0.4rem 1.2rem; - margin: 0.35rem 0 0; - padding: 0 0 0 1rem; - list-style: none; +.schedule-archive-count { + color: var(--sl-color-gray-3); + font-size: 0.78rem; + white-space: nowrap; } .schedule-month-nav { display: flex; |