ourworld_web/www_zola_template
20
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update dark logo

Browse Source
This commit is contained in:
ehab-hassan 2025-05-13 13:29:22 +03:00
parent fe1df2ac35
commit a36bfae87d
6 changed files with 75 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
static/css/main.css
View File

@ -18,10 +18,10 @@ html {
/* Light mode (default) */
body {
background-color: #f3f4f6;
color: #1f2937;
color: #303030;
}
header nav {
background-color: #1f2937;
background-color: #303030;
color: #f9fafb;
}
footer {
@ -37,10 +37,10 @@ html {
color: #f9fafb !important;
}
html.dark header nav {
background-color: #1f2937 !important;
background-color: #303030 !important;
}
html.dark footer {
background-color: #1f2937 !important;
background-color: #303030 !important;
}
html.dark footer p {
color: #9ca3af !important;
@ -52,10 +52,10 @@ html {
color: #93c5fd !important;
}
html.dark .bg-gray-100 {
background-color: #111827 !important;
background-color: #303030 !important;
}
html.dark .bg-white {
background-color: #1f2937 !important;
background-color: #303030 !important;
}
html.dark .text-gray-900 {
color: #f9fafb !important;
@ -131,7 +131,7 @@ hr {
*/
pre {
font-family: monospace, monospace; /* 1 */
font-family: 'Inter', sans-serif; /* 1 */
font-size: 1em; /* 2 */
}
@ -175,7 +175,7 @@ strong {
code,
kbd,
samp {
font-family: monospace, monospace; /* 1 */
font-family: 'Inter', sans-serif; /* 1 */
font-size: 1em; /* 2 */
}
@ -483,7 +483,7 @@ ul {
*/
html {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 1 */
font-family: 'Inter', sans-serif;
line-height: 1.5; /* 2 */
}
@ -619,7 +619,7 @@ pre,
code,
kbd,
samp {
font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-family: 'Inter', sans-serif;
}
/**
@ -12520,15 +12520,15 @@ video {
}
.font-sans {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-family: 'Inter', sans-serif;
}
.font-serif {
font-family: Georgia, Cambria, "Times New Roman", Times, serif;
font-family: 'Inter', sans-serif;
}
.font-mono {
font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-family: 'Inter', sans-serif;
}
.font-hairline {
@ -33575,15 +33575,15 @@ video {
}
.sm\:font-sans {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-family: 'Inter', sans-serif;
}
.sm\:font-serif {
font-family: Georgia, Cambria, "Times New Roman", Times, serif;
font-family: 'Inter', sans-serif;
}
.sm\:font-mono {
font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-family: 'Inter', sans-serif;
}
.sm\:font-hairline {
@ -54563,15 +54563,15 @@ video {
}
.md\:font-sans {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-family: 'Inter', sans-serif;
}
.md\:font-serif {
font-family: Georgia, Cambria, "Times New Roman", Times, serif;
font-family: 'Inter', sans-serif;
}
.md\:font-mono {
font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-family: 'Inter', sans-serif;
}
.md\:font-hairline {
@ -75551,15 +75551,15 @@ video {
}
.lg\:font-sans {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-family: 'Inter', sans-serif; Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.lg\:font-serif {
font-family: Georgia, Cambria, "Times New Roman", Times, serif;
font-family: 'Inter', sans-serif;
}
.lg\:font-mono {
font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-family: 'Inter', sans-serif;
}
.lg\:font-hairline {
@ -96539,15 +96539,15 @@ video {
}
.xl\:font-sans {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-family: 'Inter', sans-serif;
}
.xl\:font-serif {
font-family: Georgia, Cambria, "Times New Roman", Times, serif;
font-family: 'Inter', sans-serif;
}
.xl\:font-mono {
font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-family: 'Inter', sans-serif;
}
.xl\:font-hairline {

28
static/js/main.js
View File

@ -76,6 +76,10 @@ document.addEventListener('DOMContentLoaded', function() {
console.log("Initial dark mode state:", isDarkMode);
// Get logo elements
const logoLight = document.getElementById('logo-light');
const logoDark = document.getElementById('logo-dark');
// Set initial theme
if (isDarkMode) {
document.documentElement.classList.add('dark');
@ -83,12 +87,22 @@ document.addEventListener('DOMContentLoaded', function() {
themeToggleLightIcon.classList.remove('hidden');
themeToggleDarkIcon.classList.add('hidden');
}
// Show dark logo, hide light logo
if (logoLight && logoDark) {
logoLight.classList.add('hidden');
logoDark.classList.remove('hidden');
}
} else {
document.documentElement.classList.remove('dark');
if (themeToggleLightIcon && themeToggleDarkIcon) {
themeToggleLightIcon.classList.add('hidden');
themeToggleDarkIcon.classList.remove('hidden');
}
// Show light logo, hide dark logo
if (logoLight && logoDark) {
logoLight.classList.remove('hidden');
logoDark.classList.add('hidden');
}
}
// Toggle theme function
@ -102,6 +116,10 @@ document.addEventListener('DOMContentLoaded', function() {
const isDark = document.documentElement.classList.contains('dark');
console.log("Current dark mode:", isDark);
// Get logo elements
const logoLight = document.getElementById('logo-light');
const logoDark = document.getElementById('logo-dark');
if (isDark) {
document.documentElement.classList.remove('dark');
localStorage.setItem('color-theme', 'light');
@ -109,6 +127,11 @@ document.addEventListener('DOMContentLoaded', function() {
themeToggleLightIcon.classList.add('hidden');
themeToggleDarkIcon.classList.remove('hidden');
}
// Show light logo, hide dark logo
if (logoLight && logoDark) {
logoLight.classList.remove('hidden');
logoDark.classList.add('hidden');
}
console.log("Switched to light mode");
} else {
document.documentElement.classList.add('dark');
@ -117,6 +140,11 @@ document.addEventListener('DOMContentLoaded', function() {
themeToggleLightIcon.classList.remove('hidden');
themeToggleDarkIcon.classList.add('hidden');
}
// Show dark logo, hide light logo
if (logoLight && logoDark) {
logoLight.classList.add('hidden');
logoDark.classList.remove('hidden');
}
console.log("Switched to dark mode");
}

3
tailwind.config.js
View File

@ -1,4 +1,7 @@
module.exports = {
fontFamily: {
sans: ['Inter', 'sans-serif'],
},
future: {
// removeDeprecatedGapUtilities: true,
// purgeLayersByDefault: true,

6
templates/base.html
View File

@ -6,6 +6,8 @@
<title>{% block title %}Zola with Tailwind CSS{% endblock %}</title>
<link rel="stylesheet" href="{{ get_url(path='css/main.css') }}">
<link rel="stylesheet" href="{{ get_url(path='css/dropdown.css') }}">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<script src="{{ get_url(path='js/main.js') }}" defer></script>
{% block head %}{% endblock %}
@ -15,8 +17,8 @@
{% include "partials/navigation.html" %}
</header>
<main>
<div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
<div class="px-4 py-6 sm:px-0">
<div class="">
<div class="px-4 sm:px-0">
{% block content %}{% endblock %}
</div>
</div>

13
templates/partials/navigation.html
View File

@ -1,9 +1,18 @@
<nav class="bg-white dark:bg-gray-800 transition-colors duration-200">
<nav class=" container mx-auto bg-white dark:bg-gray-800 transition-colors duration-200">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<div class="flex items-center">
<div class="flex-shrink-0">
<a href="{{ config.base_url }}" class="text-gray-800 dark:text-white font-bold text-xl">{{ config.title }}</a>
<a href="{{ config.base_url }}" class="text-gray-800 dark:text-white font-bold text-xl">
<!-- Light mode logo -->
<img id="logo-light" src="/images/mycelium_dark.png"
alt="Mycelium logo"
class="w-40 h-full object-cover object-center" />
<!-- Dark mode logo -->
<img id="logo-dark" src="/images/mycelium_white.png"
alt="Mycelium logo"
class="w-40 h-full object-cover object-center hidden" />
</a>
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-4">

8
templates/shortcodes/hero_img.html
View File

@ -1,4 +1,4 @@
<div class="flex flex-col lg:flex-row-reverse items-center overflow-hidden bg-white pt-10">
<div class="flex flex-col lg:flex-row-reverse items-center overflow-hidden bg-white h-screen">
<!-- Image first on mobile, right on desktop -->
<div class="w-full lg:w-1/2 h-80 lg:h-full">
@ -8,12 +8,12 @@
</div>
<!-- Text Content -->
<div class="w-full lg:w-1/2 px-6 py-12 lg:px-16 lg:py-32">
<div class="max-w-2xl mx-auto">
<div class="w-full lg:w-1/2 max-w-3xl max-auto px-6 py-12 lg:px-16 lg:py-10">
<div>
<h1 class="text-4xl font-semibold tracking-tight lg:text-6xl">
MYCELIUM
</h1>
<h2 class="fade-in text-3xl lg:text-4xl font-normal tracking-tight mt-4">
<h2 class="fade-in text-3xl lg:text-4xl font-normal tracking-tight mt-4 leading-9">
Unleashing the Power of<br> Decentralized Networks
</h2>
<p class="mt-8 text-lg lg:text-xl font-light">