...
This commit is contained in:
203
poc/components/footer.html
Normal file
203
poc/components/footer.html
Normal file
@@ -0,0 +1,203 @@
|
||||
{% include 'components/login.html' %}
|
||||
|
||||
<footer class="tf_footer">
|
||||
<div class="tf_footer_container">
|
||||
<div class="tf_footer_section">
|
||||
<h3>ThreeFold</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 ThreeFold. 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;
|
||||
max-height: 160px;
|
||||
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 {
|
||||
margin-top: 1rem;
|
||||
padding-top: 0.5rem;
|
||||
text-align: center;
|
||||
border-top: 1px 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>
|
||||
Reference in New Issue
Block a user