From ebfc09bdb8fb16c2cca9d9bc273a07c8097c9968 Mon Sep 17 00:00:00 2001
From: Yasutake Yohei <61961825+yasutakeyohei@users.noreply.github.com>
Date: Thu, 25 Jun 2026 12:02:09 +0900
Subject: Whisperページ: 画像に枠線追加、文字起こし例の視認性を改善
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 画像に枠線（border-radius 6px）を付けて本文と区別
- 文字起こし例を背景色付きブロックに変更、各例にラベル追加
- MDX の <style> 制約を回避するため WhisperStyles コンポーネントを分離
- このスタイルはWhisperページのみに適用
---
 src/components/WhisperStyles.astro | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)
 create mode 100644 src/components/WhisperStyles.astro

(limited to 'src/components')

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>
-- 
cgit v1.3.1