diff options
| author | Yasutake Yohei <61961825+yasutakeyohei@users.noreply.github.com> | 2026-06-25 12:02:09 +0900 |
|---|---|---|
| committer | Yasutake Yohei <61961825+yasutakeyohei@users.noreply.github.com> | 2026-06-25 12:02:09 +0900 |
| commit | ebfc09bdb8fb16c2cca9d9bc273a07c8097c9968 (patch) | |
| tree | 31903e95a59060f635766f5d968bd47af6ec6516 /src/components | |
| parent | 5a3259202faea53de7463e2569561f14bd17aefd (diff) | |
Whisperページ: 画像に枠線追加、文字起こし例の視認性を改善
- 画像に枠線（border-radius 6px）を付けて本文と区別
- 文字起こし例を背景色付きブロックに変更、各例にラベル追加
- MDX の <style> 制約を回避するため WhisperStyles コンポーネントを分離
- このスタイルはWhisperページのみに適用
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/WhisperStyles.astro | 24 |
1 files changed, 24 insertions, 0 deletions
diff --git a/src/components/WhisperStyles.astro b/src/components/WhisperStyles.astro new file mode 100644 index 0000000..98bf2ab --- /dev/null +++ b/src/components/WhisperStyles.astro @@ -0,0 +1,24 @@ +<style> + .whisper-img { + border: 1px solid var(--sl-color-gray-4); + border-radius: 6px; + max-width: 100%; + display: block; + margin: 0.75rem 0; + } + .whisper-transcript { + background: var(--sl-color-gray-7); + border-left: 3px solid var(--sl-color-gray-3); + border-radius: 0 6px 6px 0; + padding: 1rem 1.25rem; + margin: 1rem 0; + font-size: 0.95rem; + line-height: 1.8; + } + .whisper-transcript :is(p, strong) { + margin: 0 0 0.5rem; + } + .whisper-transcript strong:last-of-type { + margin-top: 1rem; + } +</style> |