Fix author name visibility in dark mode with professional horizontal… by Kiretychowdary · Pull Request #643 · recodehive/recode-website

Kiretychowdary · 2025-10-01T10:39:17Z

… layout

Redesigned author layout from vertical circular to horizontal card style
Fixed author name visibility issues in dark mode
Added circular avatar on left with name beside it
Implemented social links row below author name
Added delightful hover effects and animations
Ensured perfect contrast in both light and dark themes
Made layout responsive for mobile devices
Updated styling across blog carousel and main blog pages

… layout - Redesigned author layout from vertical circular to horizontal card style - Fixed author name visibility issues in dark mode - Added circular avatar on left with name beside it - Implemented social links row below author name - Added delightful hover effects and animations - Ensured perfect contrast in both light and dark themes - Made layout responsive for mobile devices - Updated styling across blog carousel and main blog pages Fixes author name display issues for better UX in Hacktoberfest 2025

vercel · 2025-10-01T10:39:22Z

@Kiretychowdary is attempting to deploy a commit to the recode Team on Vercel.

A member of the Team first needs to authorize it.

github-actions · 2025-10-01T10:39:25Z

Thank you for submitting your pull request! 🙌 We'll review it as soon as possible. The estimated time for response is 5–8 hrs.

In the meantime, please provide all necessary screenshots and make sure you run - npm build run , command and provide a screenshot, a video recording, or an image of the update you made below, which helps speed up the review and assignment. If you have questions, reach out to LinkedIn. Your contributions are highly appreciated!😊

Note: I maintain the repo issue every day twice at 8:00 AM IST and 9:00 PM IST. If your PR goes stale for more than one day, you can tag and comment on this same issue by tagging @sanjay-kv.

We are here to help you on this journey of open source. Consistent 20 contributions are eligible for sponsorship 💰

🎁 check our list of amazing people we sponsored so far: GitHub Sponsorship. ✨

📚Your perks for contribution to this community 👇🏻

Get free Consultation use code recode50 to get free: Mentorship for free.
Get the Ebook for free use code recode at checkout: Data Science cheatsheet for Beginners.
Check out this weekly Newsletter: Sanjay's Newsletter.

If there are any specific instructions or feedback regarding your PR, we'll provide them here. Thanks again for your contribution! 😊

Copilot

Pull Request Overview

This PR redesigns the author display layout from a vertical circular design to a horizontal card-style layout, with a primary focus on fixing author name visibility issues in dark mode.

Redesigned author layout to use horizontal card style with avatar on left and name beside it
Fixed author name visibility problems in dark mode by adding explicit color overrides and text shadows
Updated package.json dependencies from Docusaurus 3.8.1 to 3.9.1

Reviewed Changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.

File	Description
src/pages/blogs/blogs-new.css	Restructured author component from vertical to horizontal layout with enhanced styling
src/css/custom.css	Added comprehensive author styling overrides for both light and dark themes with animations
src/components/blogCarousel/blogCarousel.css	Applied horizontal author layout styling to blog carousel components
package.json	Updated Docusaurus dependencies from 3.8.1 to 3.9.1

Comments suppressed due to low confidence (1)

src/css/custom.css:1

Excessive use of !important declarations makes CSS difficult to maintain and override. Consider using more specific selectors instead of relying on !important for all properties.

/* You can override the default Infima variables here. */

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

Copilot · 2025-10-01T10:40:16Z

+}
+
+/* ================= SIMPLE CIRCULAR AUTHOR DESIGN ================= */
+/* � Clean & Perfect Circular Author Layout */


There's a rendering issue with the emoji character. Replace '�' with an appropriate emoji like '🎯' or remove it entirely.

Suggested change

/* � Clean & Perfect Circular Author Layout */

/* 🎯 Clean & Perfect Circular Author Layout */

Copilot · 2025-10-01T10:40:17Z

+  display: flex !important;
+  flex-direction: row !important;
+  align-items: flex-start !important;
+  justify-content: flex-start !important;
+  width: auto !important;
+  height: auto !important;
+  border-radius: 16px !important;
+  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;
+  border: 2px solid #e2e8f0 !important;
+  padding: 20px !important;
+  box-shadow: 
+    0 4px 15px rgba(0, 0, 0, 0.08),
+    0 2px 8px rgba(0, 0, 0, 0.04) !important;
+  transition: all 0.3s ease !important;
+  text-align: left !important;
+  position: relative !important;
+  max-width: 320px !important;
+  min-height: 120px !important;


This CSS rule for .avatar is duplicated earlier in the file (lines 1536-1553) with conflicting styles. The horizontal layout defined here conflicts with the circular layout defined earlier, creating unpredictable behavior.

Copilot · 2025-10-01T10:40:17Z

+  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #ec4899 100%);
+  box-shadow: 
+    0 6px 20px rgba(79, 70, 229, 0.4),
+    0 3px 10px rgba(124, 58, 237, 0.3);
+  border: 2px solid rgba(99, 102, 241, 0.3);


This dark theme styling for .author-avatar conflicts with the earlier dark theme rule at lines 273-277 which has different background and border styles. This creates inconsistent styling behavior.

Suggested change

background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #ec4899 100%);

box-shadow:

0 6px 20px rgba(79, 70, 229, 0.4),

0 3px 10px rgba(124, 58, 237, 0.3);

border: 2px solid rgba(99, 102, 241, 0.3);

/* Consolidated dark theme styles for consistency */

background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #ec4899 100%);

box-shadow:

0 6px 20px rgba(79, 70, 229, 0.4),

0 3px 10px rgba(124, 58, 237, 0.3);

border: 3px solid #8b5cf6;

Kiretychowdary · 2025-10-01T13:12:24Z

Hello sir can you check it once the changes i have made it and it will look good for the users to observe the author name

vercel · 2025-10-01T13:55:05Z

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

Project	Deployment	Preview	Comments	Updated (UTC)
recode-website	Ready	Preview	Comment	Oct 1, 2025 1:57pm

sanjay-kv · 2025-10-01T14:04:41Z

@Kiretychowdary

There is some change in the UI required.

#530
lets stick to the below design

https://github.com/codeharborhub/codeharborhub.github.io

you can refer this repo blog for code base.

your changes made change to other page.

Kiretychowdary · 2025-10-01T14:19:13Z

sorry sir I will check it make it proper way sorry for any conflicts but I will make it better to you with good UI

Kiretychowdary · 2025-10-01T17:09:06Z

yeah sir as I have made the change because while I am visiting the web page I can see that the author name is looking small so for the better purpose I have made those changes if you need to change it before one I can do it but for better looking I have been done it sir , If you need it I can create a new pull request sir ?

Kiretychowdary · 2025-10-01T17:26:19Z

sir I have done the changes and I have increased the size of icon for visibility

i have uploaded the screen shot you can observe it if it like to you I can create pull request sir is it ok to ?
or else i made again changes

iitzIrFan · 2025-10-01T19:14:35Z

@sanjay-kv Design review.

Adez017 · 2025-10-02T03:17:19Z

@Kiretychowdary , lets stick the design we had previously.

Copilot

Pull Request Overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

Copilot · 2025-10-02T04:34:38Z

+[data-theme='dark'] .avatar {
+  position: relative;
+  border: 3px solid transparent;
+  border-radius: 16px;
+  background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
+  backdrop-filter: blur(12px);
+  box-shadow: 
+    0 8px 32px rgba(79, 70, 229, 0.15),
+    0 4px 16px rgba(124, 58, 237, 0.1),
+    inset 0 1px 0 rgba(255, 255, 255, 0.1);
+  padding: 16px;
+  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  overflow: hidden;
+}


This dark theme avatar styling is later overridden by the horizontal layout styles starting at line 1867. The conflicting styles create unnecessary complexity and could lead to unexpected behavior.

Copilot · 2025-10-02T04:34:38Z

+.avatar {
+  display: flex !important;
+  flex-direction: column !important;
+  align-items: center !important;
+  justify-content: center !important;
+  width: 140px !important;
+  height: 140px !important;
+  border-radius: 50% !important;
+  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;
+  border: 3px solid #6366f1 !important;
+  padding: 16px !important;
+  box-shadow: 
+    0 6px 20px rgba(99, 102, 241, 0.25),
+    0 3px 10px rgba(139, 92, 246, 0.15) !important;
+  transition: all 0.3s ease !important;
+  text-align: center !important;
+  position: relative !important;
+}
+
+[data-theme='dark'] .avatar {
+  background: linear-gradient(135deg, #1e293b 0%, #334155 100%) !important;
+  border-color: #8b5cf6 !important;
+  box-shadow: 
+    0 6px 20px rgba(139, 92, 246, 0.3),
+    0 3px 10px rgba(124, 58, 237, 0.2) !important;
+}


This circular avatar layout is completely overridden by the horizontal layout starting at line 1867. Having multiple conflicting style definitions for the same class creates maintainability issues and makes the code harder to understand.

Suggested change

.avatar {

display: flex !important;

flex-direction: column !important;

align-items: center !important;

justify-content: center !important;

width: 140px !important;

height: 140px !important;

border-radius: 50% !important;

background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;

border: 3px solid #6366f1 !important;

padding: 16px !important;

box-shadow:

0 6px 20px rgba(99, 102, 241, 0.25),

0 3px 10px rgba(139, 92, 246, 0.15) !important;

transition: all 0.3s ease !important;

text-align: center !important;

position: relative !important;

}

[data-theme='dark'] .avatar {

background: linear-gradient(135deg, #1e293b 0%, #334155 100%) !important;

border-color: #8b5cf6 !important;

box-shadow:

0 6px 20px rgba(139, 92, 246, 0.3),

0 3px 10px rgba(124, 58, 237, 0.2) !important;

}

Copilot · 2025-10-02T04:34:39Z

+  display: flex !important;
+  flex-direction: row !important;
+  align-items: flex-start !important;
+  justify-content: flex-start !important;
+  width: auto !important;
+  height: auto !important;
+  border-radius: 16px !important;
+  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;
+  border: 2px solid #e2e8f0 !important;
+  padding: 20px !important;
+  box-shadow: 
+    0 4px 15px rgba(0, 0, 0, 0.08),
+    0 2px 8px rgba(0, 0, 0, 0.04) !important;
+  transition: all 0.3s ease !important;
+  text-align: left !important;
+  position: relative !important;
+  max-width: 320px !important;
+  min-height: 120px !important;


Excessive use of !important declarations makes CSS harder to maintain and override. Consider using more specific selectors instead of relying on !important for every property.

Suggested change

display: flex !important;

flex-direction: row !important;

align-items: flex-start !important;

justify-content: flex-start !important;

width: auto !important;

height: auto !important;

border-radius: 16px !important;

background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;

border: 2px solid #e2e8f0 !important;

padding: 20px !important;

box-shadow:

0 4px 15px rgba(0, 0, 0, 0.08),

0 2px 8px rgba(0, 0, 0, 0.04) !important;

transition: all 0.3s ease !important;

text-align: left !important;

position: relative !important;

max-width: 320px !important;

min-height: 120px !important;

display: flex;

flex-direction: row;

align-items: flex-start;

justify-content: flex-start;

width: auto;

height: auto;

border-radius: 16px;

background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);

border: 2px solid #e2e8f0;

padding: 20px;

box-shadow:

0 4px 15px rgba(0, 0, 0, 0.08),

0 2px 8px rgba(0, 0, 0, 0.04);

transition: all 0.3s ease;

text-align: left;

position: relative;

max-width: 320px;

min-height: 120px;

Kiretychowdary · 2025-10-02T05:19:40Z

Sir @Adez017 but while i am visiting the below UI design was displaying

In dark mode

in light mode

so i have updated and Pulled it sir

Kiretychowdary · 2025-10-02T05:25:18Z

present the above design in your webpage and i have updated to new one that like you below one

I think it likes to you sir

Kiretychowdary · 2025-10-02T05:30:38Z

if this pull request is done perfectly I am very happy to do more changes to your web application that look wonderful to the users please trust me I will make look awesome and everything that helps to you sirs @Adez017 @sanjay-kv

Adez017 · 2025-10-02T08:29:02Z

Sir @Adez017 but while i am visiting the below UI design was displaying

In dark mode

in light mode
so i have updated and Pulled it sir

thats Correct @Kiretychowdary , but we want it to be fixed. the UI which I and @sanjay-kv has mentioned looks good with the overall website and thats why we are pointing to fix the existing one . if you are okay with it , try to fix that one .

Adez017

try to fix it .

Kiretychowdary · 2025-10-02T08:53:24Z

Ok sir I will do it

iitzIrFan · 2025-10-04T14:08:57Z

Fixed here
#530

iitzIrFan

My suggestion would be to stick to the previous design and resolve this, issue ASAP ! @Kiretychowdary

iitzIrFan · 2025-10-04T14:19:37Z

+  "@docusaurus/preset-classic": "3.9.1",
+  "@docusaurus/theme-classic": "3.9.1",
+  "@docusaurus/theme-mermaid": "3.9.1",
+  "@docusaurus/theme-search-algolia": "3.9.1",


Revert this changes.

iitzIrFan · 2025-10-04T14:19:54Z

-    "@docusaurus/types": "^3.8.1",
+  "@docusaurus/module-type-aliases": "3.9.1",
+  "@docusaurus/tsconfig": "3.9.1",
+  "@docusaurus/types": "3.9.1",


same as above.

Copilot AI review requested due to automatic review settings October 1, 2025 10:39

github-actions Bot added level 1 10 points recode this is label for leaderboard labels Oct 1, 2025

Copilot AI reviewed Oct 1, 2025

View reviewed changes

vercel Bot deployed to Preview October 1, 2025 13:57 View deployment

sanjay-kv assigned Kiretychowdary Oct 1, 2025

sanjay-kv added the hacktoberfest-accepted label Oct 1, 2025

sanjay-kv added this to @recode-web Oct 1, 2025

sanjay-kv moved this to In Progress in @recode-web Oct 1, 2025

iitzIrFan requested a review from sanjay-kv October 1, 2025 19:14

Adez017 self-requested a review October 2, 2025 03:17

Kiretychowdary requested a review from Copilot October 2, 2025 04:33

Copilot AI reviewed Oct 2, 2025

View reviewed changes

Adez017 requested changes Oct 2, 2025

View reviewed changes

sanjay-kv added the under review Review under the maintainers or the admins label Oct 3, 2025

iitzIrFan mentioned this pull request Oct 4, 2025

🐞[Bug]: Fix the author details #530

Closed

4 tasks

iitzIrFan self-requested a review October 4, 2025 14:13

iitzIrFan reviewed Oct 4, 2025

View reviewed changes

sanjay-kv closed this Oct 4, 2025

github-project-automation Bot moved this from In Progress to Done in @recode-web Oct 4, 2025

Copilot AI mentioned this pull request Oct 27, 2025

[WIP] Fix the author details to previous version #1088

Closed

	/* � Clean & Perfect Circular Author Layout */
	/* 🎯 Clean & Perfect Circular Author Layout */

Conversation

Kiretychowdary commented Oct 1, 2025

Uh oh!

vercel Bot commented Oct 1, 2025

Uh oh!

github-actions Bot commented Oct 1, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Oct 1, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 1, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 1, 2025

Choose a reason for hiding this comment

Uh oh!

Kiretychowdary commented Oct 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vercel Bot commented Oct 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sanjay-kv commented Oct 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Kiretychowdary commented Oct 1, 2025

Uh oh!

Kiretychowdary commented Oct 1, 2025

Uh oh!

Kiretychowdary commented Oct 1, 2025

Uh oh!

iitzIrFan commented Oct 1, 2025

Uh oh!

Adez017 commented Oct 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Uh oh!

Copilot AI Oct 2, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 2, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 2, 2025

Choose a reason for hiding this comment

Uh oh!

Kiretychowdary commented Oct 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Kiretychowdary commented Oct 2, 2025

Uh oh!

Kiretychowdary commented Oct 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Adez017 commented Oct 2, 2025

Uh oh!

Adez017 left a comment

Choose a reason for hiding this comment

Uh oh!

Kiretychowdary commented Oct 2, 2025

Uh oh!

iitzIrFan commented Oct 4, 2025

Uh oh!

iitzIrFan left a comment

Choose a reason for hiding this comment

Uh oh!

iitzIrFan Oct 4, 2025

Choose a reason for hiding this comment

Uh oh!

iitzIrFan Oct 4, 2025

Choose a reason for hiding this comment

Uh oh!

Kiretychowdary commented Oct 1, 2025 •

edited

Loading

vercel Bot commented Oct 1, 2025 •

edited

Loading

sanjay-kv commented Oct 1, 2025 •

edited

Loading

Adez017 commented Oct 2, 2025 •

edited

Loading

Kiretychowdary commented Oct 2, 2025 •

edited

Loading

Kiretychowdary commented Oct 2, 2025 •

edited

Loading