{% include 'components/login.html' %} <footer class="tf_footer"> <div class="tf_footer_container"> <div class="tf_footer_section"> <h3>Project Mycelium</h3> <p>Building a decentralized internet <br>for a better world.</p> </div> <div class="tf_footer_section"> <h4>Links</h4> <div class="footer_links"> <a href="#">About</a> <a href="#">Technology</a> <a href="#">Community</a> <a href="#">Contact</a> </div> </div> <div class="tf_footer_section"> <h4>Resources</h4> <div class="footer_links"> <a href="#">Documentation</a> <a href="#">Blog</a> <a href="#">FAQ</a> <a href="#">Support</a> </div> </div> <div class="tf_footer_section"> <h4>Connect</h4> <div class="footer_links"> <a href="#">Twitter</a> <a href="#">Telegram</a> <a href="#">GitHub</a> <a href="#">Discord</a> </div> </div> </div> <div class="tf_footer_bottom"> <p>© 2024 Project Mycelium. All rights reserved.</p> </div> </footer> <style> :root { /* Light theme variables */ --footer-background-light: #FFFFFFF2; --footer-text-light: #333; --footer-link-light: #385bb5; --footer-link-hover-light: #2a4494; --footer-border-light: #eee; /* Dark theme variables */ --footer-background-dark: #282C34F2; --footer-text-dark: #fff; --footer-link-dark: #7a9bff; --footer-link-hover-dark: #a8beff; --footer-border-dark: #444; /* Default to dark theme */ --footer-background: var(--footer-background-dark); --footer-text: var(--footer-text-dark); --footer-link: var(--footer-link-dark); --footer-link-hover: var(--footer-link-hover-dark); --footer-border: var(--footer-border-dark); } /* Light theme class */ .light-theme { --footer-background: var(--footer-background-light); --footer-text: var(--footer-text-light); --footer-link: var(--footer-link-light); --footer-link-hover: var(--footer-link-hover-light); --footer-border: var(--footer-border-light); } .tf_footer { background-color: var(--footer-background); color: var(--footer-text); padding: 1.5rem 0 0.5rem; margin-top: auto; transition: background-color 0.3s, color 0.3s; box-sizing: border-box; } .tf_footer_container { max-width: 1200px; margin: 0 auto; padding: 0 0rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.8rem; } .tf_footer_section { display: flex; flex-direction: column; } .tf_footer_section h3 { font-size: 1.1rem; margin: 0 0 0.4rem; color: var(--footer-text); } .tf_footer_section h4 { font-size: 0.9rem; margin: 0 0 0.3rem; color: var(--footer-text); padding-left: 0.5rem; } .tf_footer_section p { margin: 0; line-height: 1.3; font-size: 0.8rem; color: var(--footer-text); } .footer_links { display: flex; flex-direction: column; gap: 0.2rem; padding-left: 1rem; } .footer_links a { color: var(--footer-link); text-decoration: none; transition: color 0.3s; font-size: 0.8rem; line-height: 1.2; } .footer_links a:hover { color: var(--footer-link-hover); } .tf_footer_bottom { background-color: var(--footer-background); margin-top: 1rem; padding-top: 0.5rem; /* Add flexbox properties */ display: flex; justify-content: center; /* Horizontally center */ align-items: center; /* Vertically center */ border-top: 0px solid var(--footer-border); } .tf_footer_bottom p { margin: 0; font-size: 0.75rem; color: var(--footer-text); } @media (max-width: 768px) { .tf_footer_container { grid-template-columns: repeat(2, 1fr); gap: 0.8rem; } .tf_footer { padding: 1rem 0 0.4rem; } } @media (max-width: 480px) { .tf_footer_container { grid-template-columns: repeat(2, 1fr); } .tf_footer { padding: 0.8rem 0 0.3rem; } .tf_footer_section { font-size: 0.75rem; } .tf_footer_section h4 { padding-left: 0.3rem; } .footer_links { padding-left: 0.6rem; } } </style> <script> // Ensure theme changes are applied consistently across all components function applyTheme(theme) { document.documentElement.className = theme; localStorage.setItem('theme', theme); } // Initialize theme from localStorage or default to dark document.addEventListener('DOMContentLoaded', () => { const savedTheme = localStorage.getItem('theme') || ''; applyTheme(savedTheme); }); // Override the toggleTheme function from nav.html function toggleTheme() { const isLight = document.documentElement.classList.contains('light-theme'); applyTheme(isLight ? '' : 'light-theme'); } </script>