feat: Redesign article cards with glassmorphism effect#346
Open
Aerospace-prog wants to merge 2 commits into
Open
feat: Redesign article cards with glassmorphism effect#346Aerospace-prog wants to merge 2 commits into
Aerospace-prog wants to merge 2 commits into
Conversation
Aerospace-prog
force-pushed
the
feat/glassmorphism-cards
branch
from
cdc2054 to
75d8b88
Compare
Author
|
@jineshnagori Also fixed the merge conflicts , now ready to merge in main |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
PR Description:
This PR resolves issue #299 by redesigning the blog article cards on the homepage to use a modern glassmorphism effect.
Key Changes:
Glassmorphism Effect: The article cards (
.article-card) have been styled to appear as glass panels. This was achieved by:rgba(255, 255, 255, 0.15)).backdrop-filter: blur(10px)to blur the content behind the cards.1px solid rgba(255, 255, 255, 0.2)) to define the edges.box-shadowto create a sense of depth and make the cards appear to float.Background and Legibility:
<body>background has been updated to use the hero section's background image, providing a textured backdrop for the glass effect to work correctly.HTML Cleanup:
shadow-smclass from the article cards in index.html to prevent conflicting styles with the new custombox-shadow.Screenshots:
IMAGE : 1
IMAGE : 2
IMAGE : 3
