[codex] Improve article link visibility

[big-mon]

Summary

• Make Markdown body links visibly identifiable before hover by using the site's accent color and underline treatment.
• Strengthen hover feedback with a thicker underline.
• Add a keyboard focus outline for article and note body links.

Why

Inline links in individual article bodies were styled like normal text until hover, making them hard to discover while reading. The root cause was text-decoration: none on shared Markdown body links.

Validation

• prettier --check apps/astro-blog/src/app.css
• pnpm --filter astro-blog lint

Note: the normal pnpm shim failed with mise ERROR cannot find binary path, so validation used the existing mise-managed pnpm.exe directly.

• 記事・ノート内のインラインリンクに基本色と下線スタイルを適用した / クリック可能な要素であることを視覚的に示すため
• ホバー時に下線の厚みを増加させ、より強い視覚的フィードバックを提供した / リンク操作時のユーザー体験を向上させるため
• キーボードフォーカス時にアウトラインを表示した / キーボード操作ユーザーの操作性を確保するため
• 記事本文にYouTube動画埋め込みを2件追加した / コンテンツのエンゲージメント向上のため

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 8fc89121-fa6b-424e-9c38-763ebbe8eda1

📥 Commits

Reviewing files that changed from the base of the PR and between 70bccfd and 28f97b2.

📒 Files selected for processing (2)

• apps/astro-blog/src/app.css
• content/notes/2026-06-19_itsme.md

---

📝 Walkthrough

ウォークスルー

app.css にて、記事・ノート本文内のリンク（.heading-anchor を除く）のスタイルを更新。基本色・下線色・下線厚み・遷移設定を整理し、ホバー時は text-decoration-thickness を太くする方式に変更。新たに :focus-visible セレクタを追加し、border-radius・outline・outline-offset を付与。既存のホバー側 text-decoration: underline 指定は削除。また、ノート記事 2026-06-19_itsme.md に ::youtube 埋め込みブロックを2件追加した。

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch codex/article-link-visibility

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint install failed: private package registry requires authentication. Disable ESLint in CodeRabbit settings or use public packages.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 28f97b26fb

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[chatgpt-codex-connector]

Preserve Amazon card link styling

In posts or notes containing ::amazon embeds, the generated card title and CTA are also plain <a> elements, so this broader selector now matches them. Its specificity (.article-body a:not(...)) is higher than the later .amazon-card__title and .amazon-card__cta rules, which means the new red color and underline override the card/button styles on every Amazon embed; please exclude card links here or make the card rules at least as specific.

Useful? React with 👍 / 👎.