add shadow to cards and style fixes to improve usability on mobile.

[amalaabraham]

fixes #11

Changes

Even though the site is responsive, but it does not look good on a small screen. To make it more mobile-friendly, especially for the advantage of small screens, we can add a breakpoint where certain parts of the design will behave differently on each side of the breakpoint. Media queries can help with that. Also, the shadowbox effect has been added so to make it visually appealing and distinguish the geometry.

Screenshots

Before

After

Mentions

@wrussell1999 , @Korusuke Please go through the changes

Types of changes

• [ ] Breaking change (fix or feature that would cause existing functionality to change)
• [x] New feature and improvements (non-breaking change which adds/improves functionality)
• [x] Bug fix (non-breaking change which fixes an issue)
• [ ] Code Refactoring (internal change which is not user facing)
• [ ] Documentation
• [ ] Test, CI, or build

Checklist

• [x] Coding style of this project is followed
• [ ] Change in documentation is required
• [ ] Documentation has been updated accordingly
• [ ] Unit tests have been added to cover code change

[Korusuke]

Thanks for the PR! I personally am a fan of shadow cards!

Two things:

• I tested the PR and not all cards are showing the shadow, please check it out:

• Can we add this to a variable so if someone doesn't want shadow cards, it can be turned off?

[amalaabraham]

Check above comment

Hey @Korusuke

Resolved requested changes :)

• Added shadow effect to all cards
• Set a variable called box_shadow which when true, the shadow effect is shown else not.

[Korusuke]

Love it!

2 last things:

• Solve the conflicts so we can get this merged
• If possible can we have the clickable cards increase shadow when hovered (optional) (maybe a new PR, maybe in this)

Thanks a lot! :)

[amalaabraham]

Love it!

2 last things:

• Solve the conflicts so we can get this merged
• If possible can we have the clickable cards increase shadow when hovered (optional) (maybe a new PR, maybe in this)

Thanks a lot! :)

Thank you @Korusuke :) Resolved conflicts. Thank you for the suggestions and will make a separate PR for the same.