[outreachy] Resizing of cards

[DIANAAJAMBO]

@svrnm , This task resolves issue #5335 and below are the changes that i made to this effect.

Card Layout

• Resized cards to fit better within the available space.
• Replaced text next to icons with tooltips for a cleaner look.
• Adjusted font size to match the new card dimensions.

Link Styling

• Removed underlines from the links for a cleaner design.
• Applied different colors to titles and authors for clear visual differentiation.

Card Interactivity

• Added hover effects to make the cards interactive and engaging for users.

Responsive Design

• Made the layout mobile-friendly by ensuring the cards are responsive on various devices, including tablets, computers, and phones.

Card Identification

• Kept the original border colors to maintain card identification but introduced unique hover effects for each card for better user experience.

Testing

• Verified responsiveness and functionality across multiple devices to ensure the layout works well on all screen sizes.

Tools

• Used Bootstrap classes such as those for griding, typography, tooltips and also custom css.

[linux-foundation-easycla]

The committers listed above are authorized under a signed CLA.

• ✅ login: DIANAAJAMBO (7422b09, 3507127, ffe0931, e1cc77d, 39988b1, e9b29ec, 9ecac87)

[svrnm]

this looks really good, thank you, please take a look into my comments, especially the one about formatting, otherwise I have a hard time to see what you have changed and what was there previously

[svrnm]

make sure that these CSS properties are only valid for the registry.

[DIANAAJAMBO]

@svrnm I've modified the above properties and replaced them with more specific class names that are unique to the registry as seen below.

.narrative {
font-size: 0.9rem;
}

.quick-setup {
margin-left: 1%;
}

.item-specs {
padding-left: 0px;
padding-right: 0px;
}

[svrnm]

you have a lot of unrelated changes to the format, that you need to revert, otherwise it is hard for me to identify what is new. If you run npm run fix:format locally they will hopefully be reverted, otherwise you may need to take a look manually

[DIANAAJAMBO]

@svrnm , I have run the command and it made changes to the registry file specifically. It had to do with the spacing between the classes and the curly brackets. Hopefully it was resolved.