diff options
| author | Yasutake Yohei <61961825+yasutakeyohei@users.noreply.github.com> | 2026-09-21 10:01:48 +0900 |
|---|---|---|
| committer | Yasutake Yohei <61961825+yasutakeyohei@users.noreply.github.com> | 2026-09-21 10:01:48 +0900 |
| commit | b2b58aecb82656ec3ab4114a861bd5a1f9c859f6 (patch) | |
| tree | 0353a7daa65fe2da0e0336cc2af1a8d449c99897 /src/styles | |
| parent | 6eb83b805316c6c408e7009d2c2740d6a8e3b0b4 (diff) | |
custom.css: サイドバーに項目アイコンを付け、セクションの見出しを外す
- トップレベルの各項目に線画アイコン(インラインSVGをマスクとして使用)を付けた。
現在地のアイコンはアクセント色になる
- セクションの小見出し(議会での活動・調べたことのまとめ・その他)を外し、
間隔(1.7rem)だけで区切るようにした
- 項目の文字を太字から中太に、現在地の下地をアクセントの淡い色にして、
全体の主張を弱めた
Diffstat (limited to 'src/styles')
| -rw-r--r-- | src/styles/custom.css | 97 |
1 files changed, 74 insertions, 23 deletions
diff --git a/src/styles/custom.css b/src/styles/custom.css index 00a27cf..783d309 100644 --- a/src/styles/custom.css +++ b/src/styles/custom.css @@ -340,9 +340,9 @@ p, text-align: justify; } -/* ── Sidebar section headings ── */ +/* ── Sidebar navigation ── */ /* - * 左サイドバーのトップレベルに、セクションの小見出しを付ける。 + * 左サイドバーのトップレベルに、セクションの区切りと項目アイコンを付ける。 * 番号は astro.config.mjs の sidebar の並び順。 * 1 ホーム | * 2 実績 / 3 一般質問 / 4 委員会・請願 / 5 メディア掲載 | @@ -350,32 +350,83 @@ p, * 8 ご支援 / 9 コンタクト / 10 私の方針 * サイドバーを並べ替えたときは、ここも見直すこと。 */ -/* セクションの区切りは見出しの上の余白だけで示す(横線は使わない) */ -#starlight__sidebar ul.top-level > li:nth-child(2), -#starlight__sidebar ul.top-level > li:nth-child(6), + +/* 項目アイコン(24x24の線画SVG。マスクとして使い、色はCSS側で指定する) */ +#starlight__sidebar ul.top-level > li:nth-child(1) { + --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E"); +} +#starlight__sidebar ul.top-level > li:nth-child(2) { + --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 6 9.5 18 3 11.5'/%3E%3C/svg%3E"); +} +#starlight__sidebar ul.top-level > li:nth-child(3) { + --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 15a2 2 0 0 1-2 2H8l-4 3V5a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); +} +#starlight__sidebar ul.top-level > li:nth-child(4) { + --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z'/%3E%3Cpath d='M14 3v6h6'/%3E%3C/svg%3E"); +} +#starlight__sidebar ul.top-level > li:nth-child(5) { + --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h13v14H4z'/%3E%3Cpath d='M17 9h3v8a2 2 0 0 1-2 2h-1'/%3E%3Cpath d='M7 9h7M7 13h7M7 16h4'/%3E%3C/svg%3E"); +} +#starlight__sidebar ul.top-level > li:nth-child(6) { + --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 7S9.5 5 5 5v12c4.5 0 7 2 7 2s2.5-2 7-2V5c-4.5 0-7 2-7 2z'/%3E%3Cpath d='M12 7v12'/%3E%3C/svg%3E"); +} +#starlight__sidebar ul.top-level > li:nth-child(7) { + --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3Ccircle cx='9' cy='7' r='2'/%3E%3Ccircle cx='15' cy='12' r='2'/%3E%3Ccircle cx='7' cy='17' r='2'/%3E%3C/svg%3E"); +} #starlight__sidebar ul.top-level > li:nth-child(8) { - margin-top: 1rem; + --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7-4.4-7-9a4 4 0 0 1 7-2.6A4 4 0 0 1 19 11c0 4.6-7 9-7 9z'/%3E%3C/svg%3E"); } -#starlight__sidebar ul.top-level > li:nth-child(2)::before, -#starlight__sidebar ul.top-level > li:nth-child(6)::before, -#starlight__sidebar ul.top-level > li:nth-child(8)::before { - display: block; - margin-bottom: 0.15rem; - padding-inline: var(--sl-sidebar-item-padding-inline, 0.5rem); - font-size: 0.72rem; - line-height: 1.6; - font-weight: 400; - letter-spacing: 0.04em; - color: var(--sl-color-gray-3); +#starlight__sidebar ul.top-level > li:nth-child(9) { + --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16v12H4z'/%3E%3Cpath d='m4 7 8 6 8-6'/%3E%3C/svg%3E"); } -#starlight__sidebar ul.top-level > li:nth-child(2)::before { - content: "議会での活動"; +#starlight__sidebar ul.top-level > li:nth-child(10) { + --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m15.5 8.5-2 5-5 2 2-5z'/%3E%3C/svg%3E"); } -#starlight__sidebar ul.top-level > li:nth-child(6)::before { - content: "調べたことのまとめ"; + +/* アイコン本体 */ +#starlight__sidebar ul.top-level > li > a > span::before, +#starlight__sidebar ul.top-level > li > details > summary > .group-label::before { + content: ""; + display: inline-block; + width: 1.1em; + height: 1.1em; + margin-inline-end: 0.45em; + vertical-align: -0.2em; + background-color: var(--nav-icon-color, var(--sl-color-gray-3)); + -webkit-mask: var(--nav-icon) center / contain no-repeat; + mask: var(--nav-icon) center / contain no-repeat; +} + +/* 現在地のアイコンはアクセント色にする */ +#starlight__sidebar ul.top-level > li > a[aria-current="page"] > span::before, +#starlight__sidebar + ul.top-level + > li:has(a[aria-current="page"]) + > details + > summary + > .group-label::before { + --nav-icon-color: var(--sl-color-text-accent); } -#starlight__sidebar ul.top-level > li:nth-child(8)::before { - content: "その他"; + +/* セクションの区切りは、項目の間隔だけで示す(見出しも横線も使わない) */ +#starlight__sidebar ul.top-level > li:nth-child(2), +#starlight__sidebar ul.top-level > li:nth-child(6), +#starlight__sidebar ul.top-level > li:nth-child(8) { + margin-top: 1.7rem; +} + +/* 項目の文字を少し軽くして、見出しとの階層をつける */ +#starlight__sidebar ul.top-level > li > a, +#starlight__sidebar ul.top-level > li > details > summary .group-label > .large { + font-weight: 500; +} + +/* 現在地の下地は、アクセントの淡い色にする(既定の濃い塗りは主張が強いため) */ +#starlight__sidebar ul.top-level [aria-current="page"], +#starlight__sidebar ul.top-level [aria-current="page"]:hover, +#starlight__sidebar ul.top-level [aria-current="page"]:focus { + color: var(--sl-color-text-accent); + background-color: var(--sl-color-accent-low); } /* ── Admonition title inline ── */ |
