fix: refresh blog layouts and typography

[Mr-Dark-debug]

Summary

• replace the blog listing hero copy with a cleaner introduction and widen the sort toggle so the labels render properly
• keep the recommended topics/follow module sticky on both the listing and post pages and reuse the same component for article sidebars
• expand markdown typography styles to add breathing room to published content

Testing

• npm run lint

---

https://chatgpt.com/codex/tasks/task_e_68e7790d1bf8832db54abd306916a0df

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
syntax-blogs	Ready	Preview	Comment	Oct 9, 2025 10:05am

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

ℹ️ 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 fix this CI failure
• @codex address that feedback

[chatgpt-codex-connector]

Restore toggle’s state-specific accessible label

Rendering both offLabel and onLabel spans at the same time leaves the switch’s accessible name static (screen readers will always encounter both labels regardless of aria-checked). Without the visible text changing or an alternative aria-label, users relying on assistive tech cannot tell whether the current sort is “Latest” or “Popular”. Consider only exposing the active label or updating the accessible name when checked toggles so that the spoken state matches the visual state.

Useful? React with 👍 / 👎.