Skip to content

fix(ui): Ensure footer consistency and fix dark mode style #772

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

Closed
wants to merge 4 commits into from
Closed

fix(ui): Ensure footer consistency and fix dark mode style #772

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d666216
fix(ui): Ensure footer consistency and fix dark mode style
UjjwalTomar0808 Sep 25, 2025
fcb5d61
Delete .DS_Store
UjjwalTomar0808 Sep 26, 2025
1a82f85
Merge branch 'main' into fix/footer-ui-consistency
UjjwalTomar0808 Sep 26, 2025
c2bd83c
fix the code alignment and resolve the conflict
UjjwalTomar0808 Sep 26, 2025
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
271 changes: 205 additions & 66 deletions assets/css/convert.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@

/* Active navigation link styles */
.nav-links a.active {
background: linear-gradient(90deg, #3e2723, #573730, #3e2723) !important;
background-color: #0d0d0d !important;
color: #ffffff !important;
border-color: #1e1e1e !important;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
Expand Down Expand Up @@ -415,79 +415,218 @@ body.dark-mode .badge-purple {
}

/* ===== FOOTER ===== */
.footer { background: radial-gradient(circle at center, #e9b4b6, #e5c5b3); backdrop-filter: blur(15px); position:relative; z-index:2; border-top:1px solid rgba(255,255,255,0.3); margin-top:4rem; }
body.dark-mode .footer { background:#1e1e1e; }
.footer-content { max-width:1500px; margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:3rem; padding:3rem 2rem 2rem; }
.footer-section h3.footer-title { color:#3e2723; font-size:1.2rem; font-weight:700; margin-bottom:1.5rem; position:relative; }
.footer-section h3.footer-title::after { content:''; position:absolute; bottom:-8px; left:0; width:30px; height:3px; background:#3e2723; border-radius:2px; }
body.dark-mode .footer-section h3.footer-title::after { background:#e0e0e0; }
.footer-logo { display:flex; align-items:center; gap:.8rem; margin-bottom:1.5rem; font-size:1.8rem; font-weight:700; color:#3e2723;}
.footer-logo-icon { font-size:2rem; }
.footer-description { color:#333; line-height:1.6; margin-bottom:2rem; font-size:.95rem; }
.footer-links { list-style:none; padding:0; margin:0; }
.footer-links li { margin-bottom:.8rem; }
.footer-links a { color:#333; text-decoration:none; display:flex; align-items:center; gap:.8rem; font-weight:500; transition:all .3s ease; padding:.3rem 0; border-radius:5px; }
.footer-links a:hover { color:black; transform:translateX(4px); background:rgba(255,107,107,0.1); padding-left:.8rem; }
.footer-links i { font-size:.9rem; width:16px; opacity:.7; }
.social-links { display:flex; gap:1rem; margin-top:1rem; }
.social-link { display:inline-flex; align-items:center; justify-content:center; width:45px; height:45px; background:linear-gradient(90deg,#3e2723,#6e463e,#3e2723); color:white; text-decoration:none; border-radius:50%; font-size:1.2rem; transition:all .3s ease; box-shadow:0 4px 15px rgba(0,0,0,0.2); }
.social-link:hover { transform:translateY(-3px) scale(1.1); box-shadow:0 8px 25px rgba(0,0,0,0.3); }

.footer-bottom { background:rgba(0,0,0,0.05); backdrop-filter:blur(10px); border-top:1px solid rgba(255,255,255,0.1); padding:1.5rem 0; }
.footer-bottom-content { max-width:1500px; margin:0 auto; padding:0 2rem; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; }
.copyright { color:#333; font-size:.9rem; margin:0; }
.copyright .name { color:#3e2723; font-weight:600; }

/*dark mode*/
body.dark-mode .footer {

background: #1e1e1e;
.footer {
background: radial-gradient(circle at center, #e9b4b6, #e5c5b3);
backdrop-filter: blur(15px);
position: relative;
z-index: 2;
border-top: 1px solid rgba(255, 255, 255, 0.3);
margin-top: 4rem;
}

}
.footer-content {
max-width: 1500px;
margin: 0 auto;
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 3rem;
padding: 3rem 2rem 2rem;
}

body.dark-mode .footer-section h3.footer-title {
color: #e0e0e0;
}
.footer-section h3.footer-title {
color: #3e2723;
font-size: 1.2rem;
font-weight: 700;
margin-bottom: 1.5rem;
position: relative;
}

body.dark-mode .footer-logo {
color: #e0e0e0;
}
.footer-section h3.footer-title::after {
content: '';
position: absolute;
bottom: -8px;
left: 0;
width: 30px;
height: 3px;
background: #3e2723;
border-radius: 2px;
}

body.dark-mode .footer-description {
color: #a0a0a0;
}
.footer-logo {
display: flex;
align-items: center;
gap: .8rem;
margin-bottom: 1.5rem;
font-size: 1.8rem;
font-weight: 700;
color: #3e2723;
}

body.dark-mode .footer-links a {
color: #a0a0a0;
}
.footer-logo-icon {
font-size: 2rem;
}

body.dark-mode .footer-links a:hover {
color: #a0a0a0;
background: rgba(255, 138, 128, 0.1);
}
.footer-description {
color: #333;
line-height: 1.6;
margin-bottom: 2rem;
font-size: .95rem;
}

body.dark-mode .footer-bottom {
background: #1e1e1e;
}
.footer-links {
list-style: none;
padding: 0;
margin: 0;
}

body.dark-mode .copyright {
color: #a0a0a0;
}
.footer-links li {
margin-bottom: .8rem;
}

body.dark-mode .copyright .name {
color: #ef6154;
}
.footer-links a {
color: #333;
text-decoration: none;
display: flex;
align-items: center;
gap: .8rem;
font-weight: 500;
transition: all .3s ease;
padding: .3rem 0;
border-radius: 5px;
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
@media (max-width:1024px){
.footer-content{ grid-template-columns:1fr 1fr; gap:2rem; }
.footer-links a:hover {
color: black;
transform: translateX(4px);
background: rgba(255, 107, 107, 0.1);
padding-left: .8rem;
}

.footer-links i {
font-size: .9rem;
width: 16px;
opacity: .7;
}

.social-links {
display: flex;
gap: 1rem;
margin-top: 1rem;
}

.social-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 45px;
height: 45px;
background: linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
color: white;
text-decoration: none;
border-radius: 50%;
font-size: 1.2rem;
transition: all .3s ease;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.social-link:hover {
transform: translateY(-3px) scale(1.1);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.footer-bottom {
background: rgba(0, 0, 0, 0.05);
backdrop-filter: blur(10px);
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding: 1.5rem 0;
}

.footer-bottom-content {
max-width: 1500px;
margin: 0 auto;
padding: 0 2rem;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
}

.copyright {
color: #333;
font-size: .9rem;
margin: 0;
}

.copyright .name {
color: #3e2723;
font-weight: 600;
}

/* ===== Dark Mode Styles ===== */
body.dark-mode .footer {
background: #1e1e1e;
}

body.dark-mode .footer-section h3.footer-title {
color: #e0e0e0;
}

body.dark-mode .footer-section h3.footer-title::after {
background: #e0e0e0;
}

body.dark-mode .footer-logo {
color: #f7f3f3;
}

body.dark-mode .footer-description {
color: #a0a0a0;
}

body.dark-mode .footer-links a {
color: #e0e0e0;
}

body.dark-mode .footer-links a:hover {
color: #a0a0a0;
background: rgba(255, 138, 128, 0.1);
}

body.dark-mode .footer-bottom {
background: #1e1e1e;
}

body.dark-mode .copyright {
color: #a0a0a0;
}

body.dark-mode .copyright .name {
color: #ef6154;
}

/* ===== Responsive Styles ===== */
@media (max-width: 1024px) {
.footer-content {
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
}

@media (max-width: 768px) {
.footer-content {
grid-template-columns: 1fr;
gap: 2rem;
text-align: center;
}
@media (max-width:768px){
.footer-content{ grid-template-columns:1fr; gap:2rem; text-align:center; }
.footer-bottom-content{ flex-direction:column; text-align:center; gap:1rem; }
.social-links{ justify-content:center; }
}

.footer-bottom-content {
flex-direction: column;
text-align: center;
gap: 1rem;
}

.social-links {
justify-content: center;
}
}