diff options
| author | Yasutake Yohei <61961825+yasutakeyohei@users.noreply.github.com> | 2026-11-07 12:44:17 +0900 |
|---|---|---|
| committer | Yasutake Yohei <61961825+yasutakeyohei@users.noreply.github.com> | 2026-11-07 12:44:17 +0900 |
| commit | 4694675635a449f6537272ddad2feb2a4724c41d (patch) | |
| tree | 8d376f782eae7cff6d09e35afe0b12349112614d /src/styles | |
| parent | 5c56c4f74225ef9f8a5e992228cdab17eb029bea (diff) | |
events: 日付の改行と行ごとの共有ボタンを追加
「令和9年1月28日（木）」のような日付で列が広がるため、「令和〇年」の
直後で改行するようにした。各行にX・Instagram・Facebookの共有ボタンを
付け、日付・タイトル・時間と場所・申込みを文面にして共有する。
ボタンは行数が多いためHTMLには書かず、スクリプトで差し込んでいる。
Diffstat (limited to 'src/styles')
| -rw-r--r-- | src/styles/custom.css | 45 |
1 files changed, 45 insertions, 0 deletions
diff --git a/src/styles/custom.css b/src/styles/custom.css index 843599c..4fd4829 100644 --- a/src/styles/custom.css +++ b/src/styles/custom.css @@ -297,6 +297,51 @@ body:has(.parks-controls) .sl-markdown-content p { white-space: nowrap; width: 1%; } +/* 行ごとの共有ボタン（アイコンは mask-image で描く） */ +.schedule-share { + display: inline-flex; + gap: 0.25rem; + margin-left: 0.5rem; + vertical-align: -2px; + white-space: nowrap; +} +.schedule-share-btn { + display: inline-flex; + align-items: center; + justify-content: center; + width: 1.35rem; + height: 1.35rem; + padding: 0; + border: 1px solid var(--sl-color-gray-5); + border-radius: 4px; + background: var(--sl-color-bg); + color: var(--sl-color-gray-3); + cursor: pointer; + line-height: 1; + opacity: 0.8; +} +.schedule-share-btn::before { + content: ""; + width: 14px; + height: 14px; + background: currentColor; + -webkit-mask: var(--share-icon) center / contain no-repeat; + mask: var(--share-icon) center / contain no-repeat; +} +.schedule-share-btn:hover { + color: var(--sl-color-accent); + border-color: var(--sl-color-accent); + opacity: 1; +} +.schedule-share-btn.is-x { + --share-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M18.244%202.25h3.308l-7.227%208.26%208.502%2011.24H16.17l-5.214-6.817L4.99%2021.75H1.68l7.73-8.835L1.254%202.25H8.08l4.713%206.231%205.451-6.231Zm-1.161%2017.52h1.833L7.084%204.126H5.117l11.966%2015.644Z%27%2F%3E%3C%2Fsvg%3E"); +} +.schedule-share-btn.is-instagram { + --share-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Crect%20x%3D%273%27%20y%3D%273%27%20width%3D%2718%27%20height%3D%2718%27%20rx%3D%275%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%274%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%2F%3E%3Ccircle%20cx%3D%2717.2%27%20cy%3D%276.8%27%20r%3D%271.2%27%2F%3E%3C%2Fsvg%3E"); +} +.schedule-share-btn.is-facebook { + --share-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M22%2012a10%2010%200%201%200-11.6%209.9v-7H7.9V12h2.5V9.8c0-2.5%201.5-3.9%203.8-3.9%201.1%200%202.2.2%202.2.2v2.4h-1.2c-1.2%200-1.6.8-1.6%201.6V12h2.7l-.4%202.9h-2.3v7A10%2010%200%200%200%2022%2012Z%27%2F%3E%3C%2Fsvg%3E"); +} /* ── 冒頭の英語・中国語・韓国語・ベトナム語の案内 ── */ .lang-intro { |