fix(css): remove horizontal transform on footer link hover

[Nexvyn]

Issue Reference

Footer “Resources” Section Lacks Padding #61

---

What Was Changed

Removed horizontal transform on footer link hover

• Deleted transform: translateX(3px) from footer__link-item hover state
• Maintain color, text-decoration, and background style on hover without shift effect

---

Why Was It Changed

The footer links in the "Resources" section (and other footer columns) had a horizontal shift effect on hover, caused by a transform: translateX(3px) property. This created an inconsistent user experience as the links would move horizontally when hovered, which could be distracting and doesn't align with modern UI/UX best practices for subtle hover effects.

---

Screenshots

ui.fix.mp4

---

Additional Context (Optional)

Changes made:

1. Removed the transform: translateX(3px) property from the .footer__link-item:hover state in custom.css
2. Maintained all other hover effects including:
   • Color transition to #bbdefb
   • Background highlight with rgba(255, 255, 255, 0.05)
   • Text decoration preservation
3. Kept the smooth transition effect with transition: all 0.2s ease

Before/After:

• Before: Footer links would shift 3px to the right on hover, creating a jarring movement
• After: Footer links maintain their position while still providing clear visual feedback through color and background changes

This change improves the user experience by removing unnecessary animation effects that could be distracting, while maintaining clear visual feedback for interactive elements. The footer links now provide a more polished and professional interaction pattern that aligns with modern web design principles.

Summary by CodeRabbit

• Style
  • Removed the horizontal shift animation from footer links on hover, providing a cleaner interaction while maintaining color and background changes.

[vercel]

@Nexvyn is attempting to deploy a commit to the idan lodzki's projects Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

Walkthrough

Removed the transform: translateX(3px) hover effect from the .footer__link-item CSS selector, eliminating the horizontal shift animation while preserving other hover state styling.

Changes

Cohort / File(s)	Change Summary
Footer Link Hover Styling opsimate-docs/src/css/custom.css	Removed the transform: translateX(3px) property from .footer__link-item hover state

Possibly related PRs

• fix: Reduce the size of integration section in footer #54: Also modifies opsimate-docs/src/css/custom.css and adjusts footer link hover behavior as part of a compact footer refactor.

Suggested labels

hacktoberfest

---

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 39a4ba5 and 9b1737b.

📒 Files selected for processing (1)

• opsimate-docs/src/css/custom.css (0 hunks)

💤 Files with no reviewable changes (1)

• opsimate-docs/src/css/custom.css

---

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 and usage tips.}

[github-actions]

Thanks for your contribution! Join our Slack: https://join.slack.com/t/opsimate/shared_invite/zt-39bq3x6et-NrVCZzH7xuBGIXmOjJM7gA Please make sure to include an image with your PR — it really helps us review and understand the changes better. Only in rare cases will we accept a PR without one. Also, take a moment to review your code to ensure it’s clear, readable, and easy to follow. PRs from contributors who haven’t joined our Slack community or starred the repository won’t be reviewed — we’d love to see you join and be part of the project!