Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feat]-added hover effect and 'Read More' to blog cards #1350

Open
wants to merge 11 commits into
base: main
Choose a base branch
from

Conversation

MadhavDhatrak
Copy link
Contributor

What kind of change does this PR introduce?
Feature Addition- Add hover and Read More to blog cards

Issue Number:

Screenshots/videos:

screen-recording-2025-01-21-205322_lsZboQTR.mp4

If relevant, did you update the documentation?
No

Summary
Added new UI enhancements to improve blog post interaction and readability:

  • Added hover effects to the blog cards to make them visually interactive.
  • Introducing a dedicated "Read More" button to guide users towards detailed blog posts.

Does this PR introduce a breaking change?

No

@MadhavDhatrak MadhavDhatrak requested a review from a team as a code owner January 21, 2025 15:37
Copy link

github-actions bot commented Jan 21, 2025

built with Refined Cloudflare Pages Action

⚡ Cloudflare Pages Deployment

Name Status Preview Last Commit
website ✅ Ready (View Log) Visit Preview 77da065

Copy link

codecov bot commented Jan 21, 2025

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 100.00%. Comparing base (ee9538b) to head (77da065).
Report is 21 commits behind head on main.

Additional details and impacted files
@@            Coverage Diff            @@
##              main     #1350   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files           10        10           
  Lines          373       387   +14     
  Branches        94       103    +9     
=========================================
+ Hits           373       387   +14     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

Copy link
Member

@DhairyaMajmudar DhairyaMajmudar left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@MadhavDhatrak if you check we're getting such background effect while hovering the headlines

Screencast.from.2025-01-31.23-47-18.webm

Pls. fix them its not required

Comment on lines 317 to 327
/* Add smooth transitions for dark mode */
.dark .group:hover {
background: rgba(255, 255, 255, 0.05);
}

/* Enhance card interactions */
.group {
transition: all 0.3s ease;
}

.group:hover {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pls. remove comments too

@DhairyaMajmudar
Copy link
Member

Making blogs page a grid of 4xn makes it looks more airy, Pls. make it grid of 4

image

@MadhavDhatrak
Copy link
Contributor Author

Hey @DhairyaMajmudar

As you requested I have made the following changes:

  • Added a 4xN grid.
  • Removed the hover background from headings.
  • Removed comments from the codebase.

A video demo is attached below:

screen-recording-2025-02-02-103151_9cmM0F1b.mp4

Please review the changes and let me know if any further modifications are needed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

✨ Enhancement: Blog Cards with Hover Effects and Dedicated 'Read More' Button
2 participants