Skip to content

Fix footer alignment and add hover underline effect #2020

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
parthupadhyaya wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Fix footer alignment and add hover underline effect #2020

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
114 changes: 114 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -286,7 +286,121 @@
.copyright1{
margin-left: 50%;
}
/* Fix hover underline alignment for footer icons */
/* ================================
Footer Social Icons - Simple Fix
================================ */

.social-icons a {
position: relative;
display: inline-block;
text-decoration: none; /* remove browser underline */
color: inherit;
}

.social-icons a::after {
content: "";
position: absolute;
left: 0;
bottom: -4px;
width: 100%;
height: 2px;
background: currentColor; /* underline matches icon color */
transform: scaleX(0);
transform-origin: center;
transition: transform 0.3s ease;
}

.social-icons a:hover::after {
transform: scaleX(1); /* animate underline in */
}
/* Footer social icons - custom underline hover */
footer a {
position: relative;
display: inline-block;
text-decoration: none; /* remove browser underline */
}

footer a::after {
content: "";
position: absolute;
left: 0;
bottom: -4px; /* distance below icon */
width: 100%;
height: 2px; /* thickness of underline */
background: currentColor; /* matches icon color */
transform: scaleX(0); /* hidden by default */
transform-origin: center;
transition: transform 0.3s ease;
}

footer a:hover::after {
transform: scaleX(1); /* animate underline in */
}
/* Footer Social Icons - Underline Fix */
.social-icons a {
position: relative;
display: inline-block;
text-decoration: none;
color: inherit;
}

.social-icons a::after {
content: "";
position: absolute;
left: 50%;
bottom: -4px; /* underline position */
width: 60%; /* shorten underline */
height: 2px;
background: currentColor;
transform: translateX(-50%) scaleX(0);
transform-origin: center;
transition: transform 0.3s ease;
}

.social-icons a:hover::after {
transform: translateX(-50%) scaleX(1);
}

/* Instagram special adjustment */
.social-icons a.instagram::after {
width: 70%; /* make underline a little wider */
bottom: -6px; /* push slightly lower */
}
/* ---- Footer Social Icons: stable underline without changing icons ---- */

/* 1) Normalize anchor width so underline centers on the SVG, not Tailwind's w-* */
.social-icons a {
width: auto !important; /* overrides w-5 / w-10 */
position: relative;
display: inline-block;
text-decoration: none;
color: inherit;
}

/* 2) Centered, shorter underline */
.social-icons a::after {
content: "";
position: absolute;
left: 50%;
bottom: -4px;
width: 60%;
height: 2px;
background: currentColor;
transform: translateX(-50%) scaleX(0);
transform-origin: center;
transition: transform 0.25s ease;
}

.social-icons a:hover::after {
transform: translateX(-50%) scaleX(1);
}

/* 3) Tiny visual nudge for the Instagram icon (the middle item) without editing HTML */
.social-icons > div:nth-child(2) a::after {
/* shift underline ~1px left; adjust -1px to taste (-2px or 0) */
transform: translateX(calc(-50% - 1px)) scaleX(0);
}
.social-icons > div:nth-child(2) a:hover::after {
transform: translateX(calc(-50% - 1px)) scaleX(1);
}