Skip to content
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
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
2 changes: 0 additions & 2 deletions about.html
Original file line number Diff line number Diff line change
Expand Up @@ -302,7 +302,5 @@ <h3 class="footer-title">Support</h3>
</footer>
</body>
<script src="assets/js/about.js"></script>
<script src="assets/js/theme.js"></script>


</html>
28 changes: 15 additions & 13 deletions assets/css/about.css
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,12 @@ body.dark-mode .footer {
}

.footer-content {
max-width: 1500px;
margin: 0 auto;
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 3rem;
padding: 3rem 2rem 2rem;
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 {
Expand Down Expand Up @@ -230,7 +230,7 @@ body.dark-mode .footer-section h3.footer-title::after {
}

.footer-bottom-content {
max-width: 1400px;
max-width: 1500px;
margin: 0 auto;
padding: 0 2rem;
display: flex;
Expand Down Expand Up @@ -622,6 +622,9 @@ body.dark-mode {
}

.nav-links a {
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
color: #3e2723;
font-weight: 600;
Expand Down Expand Up @@ -1807,7 +1810,7 @@ body.about-page.dark-mode p,
body.about-page.dark-mode a,
body.about-page.dark-mode span,
body.about-page.dark-mode li {
color: #e0e0e0 !important;
color: #e0e0e0;
}

body.dark-mode .navbar {
Expand Down Expand Up @@ -2367,20 +2370,19 @@ body.about-page.dark-mode li {
margin-top: 2rem;
}

.footer-content {
/* .footer-content {
grid-template-columns: 1fr;
gap: 2rem;
padding: 2rem 1rem 1rem;
text-align: center;
}
} */

.footer-section h3.footer-title::after {
left: 50%;
left: 6%;
transform: translateX(-50%);
}

.footer-bottom-content {
flex-direction: column;
text-align: center;
gap: 1rem;
}
Expand All @@ -2392,7 +2394,7 @@ body.about-page.dark-mode li {
.social-links {
justify-content: center;
}
}


@media (max-width: 1024px) {
.footer-content {
Expand Down
33 changes: 32 additions & 1 deletion assets/js/about.js
Original file line number Diff line number Diff line change
Expand Up @@ -137,4 +137,35 @@ document.addEventListener("DOMContentLoaded", function () {
hamburger.classList.remove("active");
}
});
});
// ================= Dark Mode Toggle =================
const darkModeBtn = document.getElementById("darkModeToggle");
const darkModeIcon = darkModeBtn.querySelector("i");

// Apply saved preference on page load
if (localStorage.getItem("darkMode") === "enabled") {
document.body.classList.add("dark-mode");
darkModeIcon.classList.remove("fa-moon");
darkModeIcon.classList.add("fa-sun");
}

darkModeBtn.addEventListener("click", () => {
document.body.classList.toggle("dark-mode");

if (document.body.classList.contains("dark-mode")) {
localStorage.setItem("darkMode", "enabled");
darkModeIcon.classList.remove("fa-moon");
darkModeIcon.classList.add("fa-sun");
} else {
localStorage.setItem("darkMode", "disabled");
darkModeIcon.classList.remove("fa-sun");
darkModeIcon.classList.add("fa-moon");
}
});
});







27 changes: 23 additions & 4 deletions contact.html
Original file line number Diff line number Diff line change
Expand Up @@ -225,7 +225,7 @@
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 100px 20px 20px;
padding: 20px;
}

.contact-box {
Expand Down Expand Up @@ -993,10 +993,29 @@ <h3 class="footer-title">Support</h3>
</div>
</footer>
<!-- JS for dark mode and nav toggle -->

<script src="assets/js/theme.js"></script>
<script>

// Dark Mode Toggle
const darkModeToggle = document.getElementById("darkModeToggle");
const body = document.body;
const darkModeIcon = darkModeToggle.querySelector("i");
const currentTheme = localStorage.getItem("theme") || "light";
if (currentTheme === "dark") {
body.classList.add("dark-mode");
darkModeIcon.classList.remove("fa-moon");
darkModeIcon.classList.add("fa-sun");
}
darkModeToggle.addEventListener("click", () => {
body.classList.toggle("dark-mode");
if (body.classList.contains("dark-mode")) {
darkModeIcon.classList.remove("fa-moon");
darkModeIcon.classList.add("fa-sun");
localStorage.setItem("theme", "dark");
} else {
darkModeIcon.classList.remove("fa-sun");
darkModeIcon.classList.add("fa-moon");
localStorage.setItem("theme", "light");
}
});
// Mobile Navigation Toggle
const hamburger = document.getElementById("hamburger");
const navLinks = document.getElementById("navLinks");
Expand Down
Loading