info-card sticky and friend link css reconstitution

[we-are-Zed]

Enhanced Sidebar Card in ParticleX Theme

This contribution improves the side information card in the ParticleX theme with the following enhancements:

Key Features

• Sticky Position: The sidebar card now remains visible during page scrolling, with proper constraints to avoid overlapping with the header background
• Visual Segregation: Personal information is now wrapped in a dedicated container with background and subtle shadow for better visual hierarchy
• Improved Friend Links Section:
  • Added a dedicated "Friend Links" heading
  • Implemented a responsive two-column grid layout
  • Enhanced styling with proper spacing and hover effects
  • Contained in a distinct visual block
• Social Icons Enhancement: Added title tooltips on hover for better accessibility
• Responsive Considerations: Maintained mobile compatibility while improving desktop experience
• CSS Optimizations:
  • Refactored layout structure using modern Flexbox properties
  • Added smooth transitions and better spacing
  • Improved visual hierarchy through background colors and shadows
  • Ensured proper overflow handling with scrollable content

These changes maintain all original functionality while significantly improving the user experience and visual appeal of the information card.

The screenshot:

P.S.: Maybe the CSS is not perfect as before but the feature is finished. Thanks