diff --git a/src/components/PageHeader.astro b/src/components/PageHeader.astro index f1e14ce..7fe8081 100644 --- a/src/components/PageHeader.astro +++ b/src/components/PageHeader.astro @@ -31,7 +31,7 @@ const Title = isHome ? 'p' : 'h1'; diff --git a/src/pages/index.astro b/src/pages/index.astro index 7936f3c..137c616 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -129,7 +129,11 @@ const blogEntries = (await getCollection('blog')).toSorted( <main> <section class="wrapper"> - <h2 class="mb-12 text-lg font-bold leading-tight text-dynamic-muted">主な投稿</h2> + <h2 + class="mb-12 text-lg font-bold leading-tight text-dynamic-muted [hanging-punctuation:none]" + > + 主な投稿 + </h2> <DetailsList items={primaryItems} /> </section> @@ -137,7 +141,11 @@ const blogEntries = (await getCollection('blog')).toSorted( <div class="my-16 border-t"></div> <section class="wrapper"> - <h2 class="mb-12 text-lg font-bold leading-tight text-dynamic-muted">プロジェクト</h2> + <h2 + class="mb-12 text-lg font-bold leading-tight text-dynamic-muted [hanging-punctuation:none]" + > + プロジェクト + </h2> <DetailsList items={projectItems} /> </section> @@ -145,7 +153,11 @@ const blogEntries = (await getCollection('blog')).toSorted( <div class="my-16 border-t"></div> <section class="wrapper"> - <h2 class="mb-12 text-lg font-bold leading-tight text-dynamic-muted">最近のブログ</h2> + <h2 + class="mb-12 text-lg font-bold leading-tight text-dynamic-muted [hanging-punctuation:none]" + > + 最近のブログ + </h2> <DetailsList items={blogEntries.slice(0, 3).map((entry) => ({ diff --git a/src/styles/components/prose.css b/src/styles/components/prose.css index 53d67f9..9220b7a 100644 --- a/src/styles/components/prose.css +++ b/src/styles/components/prose.css @@ -20,15 +20,18 @@ } h2 { + hanging-punctuation: none; font-weight: bold; font-size: theme(fontSize.2xl); line-height: theme(lineHeight.tight); font-kerning: normal; font-feature-settings: 'palt'; word-break: auto-phrase; + text-wrap: pretty; } h3 { + hanging-punctuation: none; font-weight: bold; font-size: theme(fontSize.lg); line-height: theme(lineHeight.tight);