update dark logo

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

View File

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

View File

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

View File

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

View File

@ -6,6 +6,8 @@
<title>{% block title %}Zola with Tailwind CSS{% endblock %}</title> <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/main.css') }}">
<link rel="stylesheet" href="{{ get_url(path='css/dropdown.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> <script src="{{ get_url(path='js/main.js') }}" defer></script>
{% block head %}{% endblock %} {% block head %}{% endblock %}
@ -15,8 +17,8 @@
{% include "partials/navigation.html" %} {% include "partials/navigation.html" %}
</header> </header>
<main> <main>
<div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8"> <div class="">
<div class="px-4 py-6 sm:px-0"> <div class="px-4 sm:px-0">
{% block content %}{% endblock %} {% block content %}{% endblock %}
</div> </div>
</div> </div>

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="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 justify-between h-16">
<div class="flex items-center"> <div class="flex items-center">
<div class="flex-shrink-0"> <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>
<div class="hidden md:block"> <div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-4"> <div class="ml-10 flex items-baseline space-x-4">

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 --> <!-- Image first on mobile, right on desktop -->
<div class="w-full lg:w-1/2 h-80 lg:h-full"> <div class="w-full lg:w-1/2 h-80 lg:h-full">
@ -8,12 +8,12 @@
</div> </div>
<!-- Text Content --> <!-- Text Content -->
<div class="w-full lg:w-1/2 px-6 py-12 lg:px-16 lg:py-32"> <div class="w-full lg:w-1/2 max-w-3xl max-auto px-6 py-12 lg:px-16 lg:py-10">
<div class="max-w-2xl mx-auto"> <div>
<h1 class="text-4xl font-semibold tracking-tight lg:text-6xl"> <h1 class="text-4xl font-semibold tracking-tight lg:text-6xl">
MYCELIUM MYCELIUM
</h1> </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 Unleashing the Power of<br> Decentralized Networks
</h2> </h2>
<p class="mt-8 text-lg lg:text-xl font-light"> <p class="mt-8 text-lg lg:text-xl font-light">