homepage style tweaks #36
Conversation
There was a problem hiding this comment.
Pull Request Overview
Minor visual refinements on the homepage feature card, including background updates, author thumbnail insertion, title layout adjustment, and button style change.
- Replaced the dark purple card background with a translucent Snow variant and wrapped the card header in a flex container.
- Inserted a circular author image and moved the emoji after the title text.
- Swapped the
snow-buttonclass for the new genericbuttonutility on the "Read More" link.
Comments suppressed due to low confidence (1)
frontend/src/app/(public-area)/page.tsx:104
- [nitpick] The generic
buttonclass may collide with other styles in the project. Consider using a more specific utility or prefix (e.g.btn-primary) to avoid unintended overrides.
className="button flex grow-0 items-center whitespace-nowrap"
| <div className="flex gap-4 items-center"> | ||
| <Image | ||
| src="/images/chris.jpg" | ||
| alt={`By Chris`} |
There was a problem hiding this comment.
The alt text is not descriptive of the image content. Consider using something like alt="Photo of Chris" to better convey the image purpose to screen readers.
| alt={`By Chris`} | |
| alt="Photo of Chris" |
| alt={`By Chris`} | ||
| height={48} | ||
| width={48} | ||
| className="rounded-full h-[48px] w-[48px]" |
There was a problem hiding this comment.
[nitpick] Using arbitrary pixel values (h-[48px] / w-[48px]) can hinder consistency. Consider replacing with Tailwind spacing utilities (e.g. h-12 w-12) to align with your design system.
| className="rounded-full h-[48px] w-[48px]" | |
| className="rounded-full h-12 w-12" |
| <span className="text-amethyst-gradient"> | ||
| Capital One Data Breach – A Cautionary Tale | ||
| </span>{' '} | ||
| 😱 |
There was a problem hiding this comment.
The standalone emoji will be announced by screen readers, which may be distracting. Wrap it in a <span aria-hidden="true"> or add role="img" aria-hidden="true" so it's purely decorative.
| 😱 | |
| <span aria-hidden="true">😱</span> |
1 participant
What It Does
Minor homepage style tweaks.