style: update tag colors

[gapry]

No description provided.

[amazon-q-developer]

This PR updates tag colors from blue to red theme across the application. The CSS class name has been renamed from tag-pill to blog-post-tags and updated consistently in both the stylesheet and component. A new hover state has been added for better user interaction. All changes are style-related with no functional defects or blocking issues identified.

---

You can now have the agent implement changes and create commits directly on your pull request's source branch. Simply comment with /q followed by your request in natural language to ask the agent to make changes.

[gemini-code-assist]

Code Review

This pull request updates the styling for blog post tags, renaming the class to .blog-post-tags and adjusting colors. The review highlights that the chosen text color fails WCAG AA accessibility standards, suggests removing font-weight changes on hover to prevent layout shifts, and recommends standardizing the hover effect across the application for better consistency.

[gemini-code-assist]

The contrast ratio between the text color #c04d4d and the background color #252525 (defined on line 19) is approximately 3.2:1. This fails the WCAG AA accessibility standard, which requires a minimum contrast ratio of 4.5:1 for normal text. This can make the tags difficult to read for users with low vision. Consider using a lighter shade of red to improve readability.

[gemini-code-assist]

Applying font-weight: bold on hover causes a layout shift because bold text is typically wider than regular text, which can push adjacent elements and create a jumpy user experience. Additionally, text-decoration: none is redundant here as it is already defined on the base .blog-post-tags class. It is recommended to remove these properties to maintain a stable layout.

.blog-post-tags:hover {
  background: #121212;
  color: #ff4d4f;
}

[gemini-code-assist]

The hover effect for tags here (using text-decoration: underline) is inconsistent with the hover effect defined for tags in the blog post view (which uses a background color change in MarkdownRenderer.css). For a cohesive user experience, it is recommended to use a consistent hover style for tags across the application.