update dark logo
This commit is contained in:
parent
fe1df2ac35
commit
a36bfae87d
@ -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 {
|
||||||
|
@ -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");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,4 +1,7 @@
|
|||||||
module.exports = {
|
module.exports = {
|
||||||
|
fontFamily: {
|
||||||
|
sans: ['Inter', 'sans-serif'],
|
||||||
|
},
|
||||||
future: {
|
future: {
|
||||||
// removeDeprecatedGapUtilities: true,
|
// removeDeprecatedGapUtilities: true,
|
||||||
// purgeLayersByDefault: true,
|
// purgeLayersByDefault: true,
|
||||||
|
@ -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>
|
||||||
|
@ -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">
|
||||||
|
@ -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">
|
||||||
|
Loading…
Reference in New Issue
Block a user