ourworld_web/www_threefold_io
23
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update logos

Browse Source
This commit is contained in:
Ehab Hassan
2025-02-03 16:49:11 +02:00
parent a06dc38b43
commit 7dcf8767e8
5 changed files with 69 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
content/footer/_index.md
View File

@@ -4,7 +4,7 @@ description: ""
insert_anchor_links: "left"
template: "partials/footer.html"
extra:
logoPath: "images/new_logo_tft_light.png"
logoPath: "images/logolight.png"
socialLinks: { Twitter: "https://twitter.com/threefold_io", Telegram: "https://t.me/threefoldnews", Github: "https://github.com/threefoldfoundation", Github2: "https://github.com/threefoldtech"}
---

6
css/index.css
View File

@@ -51,14 +51,12 @@ body.light-mode .icon {
fill: #424242 !important;
}
.double_bg {
background-color: rgb(100 100 100 / 0.2);
}
.dashboard:hover {
background: #74ddc3 !important;

26
static/js/custom.js
View File

@@ -194,34 +194,34 @@ document.getElementById("year").innerHTML = new Date().getFullYear();
// Get the toggle switch and the logo element
// Get elements
const toggleSwitch = document.getElementById('lightModeSwitch');
const siteLogo = document.getElementById('site-logo');
const body = document.body;
// Apply the saved theme on load
document.addEventListener('DOMContentLoaded', () => {
const savedTheme = localStorage.getItem('theme');
const savedTheme = localStorage.getItem('theme') || 'dark'; // Default to dark mode
if (savedTheme === 'light') {
document.body.classList.add('light-mode');
body.classList.add('light-mode');
body.classList.remove('dark-mode');
toggleSwitch.checked = true;
siteLogo.src = siteLogo.getAttribute('data-light'); // Use light mode logo
} else {
document.body.classList.remove('light-mode');
body.classList.add('dark-mode');
body.classList.remove('light-mode');
toggleSwitch.checked = false;
siteLogo.src = siteLogo.getAttribute('data-dark'); // Use dark mode logo
}
});
// Toggle light mode
// Toggle between light and dark mode
toggleSwitch.addEventListener('change', () => {
if (toggleSwitch.checked) {
document.body.classList.add('light-mode');
body.classList.add('light-mode');
body.classList.remove('dark-mode');
localStorage.setItem('theme', 'light');
siteLogo.src = siteLogo.getAttribute('data-dark'); // Switch to light mode logo
} else {
document.body.classList.remove('light-mode');
body.classList.add('dark-mode');
body.classList.remove('light-mode');
localStorage.setItem('theme', 'dark');
siteLogo.src = siteLogo.getAttribute('data-light'); // Switch to dark mode logo
}
});

23
templates/partials/footer.html
View File

@@ -9,7 +9,9 @@
<div class="max-w-screen-2xl mx-auto py-12 px-4 sm:px-6">
<div class="xl:flex xl:gap-4">
<div class="space-y-8 lg:max-w-sm xl:max-w-sm lg:mr-8 lg:mb-8 xl:col-span-1">
<img class="w-36 h-auto" src="{{ get_url(path=logoPath)}}" alt="ThreeFold Logo" />
{# <img class="w-36 h-auto" src="images/logolight.png" alt="ThreeFold Logo" /> #}
<img id="lightLogo" src="images/logolight.png" alt="Light Logo" class="logo light w-36 h-auto" style="max-width: none;">
<img id="darkLogo" src="images/logodark.png" alt="Dark Logo" class="logo dark w-36 h-auto" style="max-width: none;">
<p class="text-gray-200 text-base font-light leading-6">
{{section.description}}
</p>
@@ -31,5 +33,24 @@
</div>
</div>
</footer>
<style>
.light {
display: block; /* Show dark logo by default */
}
.dark {
display: none; /* Hide light logo by default */
}
.light-mode .light {
display: none; /* Hide dark logo in light mode */
}
.light-mode .dark {
display: block;/* Show light logo in light mode */
}
</style>
</body>
</html>

29
templates/partials/header.html
View File

@@ -6,14 +6,9 @@
<div class="relative z-50">
<div class="mx-auto container flex z-50 justify-between items-center px-6 sm:px-4 md:px-6 py-4 lg:px-5 lg:justify-start space-x-10 sm:space-x-4 ">
<a href="{{ get_url(path='/') }}" class="flex">
<img
id="site-logo"
class="w-36 h-auto"
style="max-width: none;"
data-light="{{ get_url(path=section.extra.logoPathLight) }}"
data-dark="{{ get_url(path=section.extra.logoPathDark) }}"
src="{{ get_url(path=section.extra.logoPathLight) }}"
alt="ThreeFold Logo" />
<img id="lightLogo" src="{{ get_url(path=section.extra.logoPathLight) }}" alt="Light Logo" class="logo light w-36 h-auto" style="max-width: none;">
<img id="darkLogo" src="{{ get_url(path=section.extra.logoPathDark) }}" alt="Dark Logo" class="logo dark w-36 h-auto" style="max-width: none;">
</a>
{# <a href="{{ get_url(path='/') }}" class="flex">
<img
@@ -241,6 +236,24 @@
color: #c7c7c7 !important;
}
.light {
display: block; /* Show dark logo by default */
}
.dark {
display: none; /* Hide light logo by default */
}
.light-mode .light {
display: none; /* Hide dark logo in light mode */
}
.light-mode .dark {
display: block;/* Show light logo in light mode */
}
.theme-toggle {
border: none !important;
box-shadow: none !important;