ourworld_web/www_mycelium
21
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

update dark light mode

Browse Source
This commit is contained in:
Ehab Hassan
2025-05-22 12:05:08 +03:00
parent ecfae1fa72
commit 417f1d0004
16 changed files with 238 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
templates/_default/base.html
View File

@@ -3,7 +3,7 @@
{% include "partials/head.html" %}
{% include "partials/header.html" %}
<body class="bg-white">
<body class="">
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-N7PNMFH" height="0" width="0"

133
templates/partials/header.html
View File

@@ -4,12 +4,17 @@
<header id="header-container">
<div class="z-20 fixed top-0 left-0 right-0 lg:absolute w-full">
<div class="relative z-50">
<div class="bg-white 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 ">
<div>
<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 ">
{# <div>
<a href="{{get_url(path='/')}}" class="flex">
<img class="w-36 h-auto" style="max-width: none;" src="{{ get_url(path=section.extra.logoPath)}}" alt="Mycelium Logo" />
</a>
</div>
</div> #}
<a href="{{ get_url(path='/') }}" class="flex">
<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>
<div class="-mr-2 -my-2 lg:hidden">
<button id="hamburger-btn" type="button" class="bg-white inline-flex items-center justify-center p-2 border border-gray-900 rounded-md transition duration-200 ease-in-out">
<!-- Heroicon name: menu -->
@@ -36,7 +41,7 @@
{% set current = get_url(path=link_path[1]) ~ "/" %}
{% if header_label is containing("http") %}
{% if header_label is not containing("threefold") %}
<a href="{{link_path[1]}}" target="_blank" class="text-lg py-3 leading-6 font-light text-pretty tracking-wide text-black focus:outline-none focus:text-gray-200 transition ease-in-out duration-150">
<a href="{{link_path[1]}}" target="_blank" class="text-lg py-3 leading-6 font-light text-pretty tracking-wide transition ease-in-out duration-150">
{{link_label}}
</a>
{% endif %}
@@ -45,14 +50,14 @@
{{link_label}}
</a>
{% else %}
<a href="{{ get_url(path=link_path[1])}}" class="text-lg py-3 leading-6 font-normal text-black focus:outline-none focus:text-gray-200 transition ease-in-out duration-150">
<a href="{{ get_url(path=link_path[1])}}" class="text-lg py-3 leading-6 font-light text-pretty tracking-wide transition ease-in-out duration-150">
{{link_label}}
</a>
{% endif %}
{% else %}
<div class="relative">
{% set button_id = header_label ~ "-menu-btn" | slugify %}
<button type="button" id="{{button_id}}" class="bg-transparent nav_btn py-3 text-black group inline-flex items-center space-x-2 text-lg leading-6 font-normal focus:outline-none transition ease-in-out duration-150">
<button type="button" id="{{button_id}}" class="bg-transparent nav_btn py-3 group inline-flex items-center space-x-2 text-lg leading-6 font-normal focus:outline-none transition ease-in-out duration-150">
<span>{{ header_label }}</span>
<div class="-rotate-90 transition-transform transform origin-center duration-200 ease-out"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#ffffff"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg></div>
</button>
@@ -62,16 +67,16 @@
{% endif %}
{% endfor %}
<a href="https://threefold.info/mycelium/docs/"
class="text-lg py-3 leading-6 font-light text-pretty tracking-wide text-black focus:outline-none focus:text-gray-200 transition ease-in-out duration-150" target="_blank">
class="text-lg py-3 leading-6 font-light text-pretty tracking-wide focus:outline-none focus:text-gray-200 transition ease-in-out duration-150" target="_blank">
Docs
</a>
</nav>
<div class="hidden md:inline-block md:order-last">
<div class="inline-flex">
<div class="inline-flex justify-center items-center">
{# <ul class="list-none inline-flex mt-5 mr-4 mx-auto">
<li class="ml-4">
<a href="https://t.me/threefoldnews" target="_blank" class="text-black">
<a href="https://t.me/threefoldnews" target="_blank" class="">
<svg
xmlns="http://www.w3.org/2000/svg"
width="18"
@@ -91,7 +96,7 @@
<a
href="javascript:;"
onclick="ml_account('webforms', '3562741', 'n7q9l7', 'show')"
class="text-black"
class=""
>
<svg
aria-hidden="true"
@@ -111,7 +116,19 @@
</a>
</li>
</ul> #}
<a href="/download" class="blinking-effect dashboard rounded-2xl bg-black px-4 p-2 text-sm font-semibold text-white shadow-sm hover:bg-gray-600">Get Mycelium</a>
<div class="theme-toggle mx-4">
<label for="lightModeSwitch" class="switch">
<i class="fa-solid fa-sun" id="lightIcon"></i>
<input type="checkbox" id="lightModeSwitch">
<span class="slider"></span>
<i class="fas fa-moon" id="darkIcon"></i>
</label>
</div>
<a href="/download" class="blinking-effect dashboard rounded-2xl border border-gray-200 bg-black px-4 p-2 text-sm font-semibold text-white shadow-sm hover:bg-gray-600">Get Mycelium</a>
</div>
</div>
</div>
@@ -165,18 +182,18 @@
{% set link_path = header_label | split(pat="%22") | safe%}
{% if header_label is containing("http") %}
{% if header_label is not containing("threefold") %}
<a href="{{link_path[1]}}" target="_blank" class="text-lg px-8 py-3 leading-6 font-normal text-black hover:text-gray-600 focus:outline-none focus:text-gray-50 transition ease-in-out duration-150">
<a href="{{link_path[1]}}" target="_blank" class="text-lg px-8 py-3 leading-6 font-normal hover:text-gray-600 focus:outline-none focus:text-gray-50 transition ease-in-out duration-150">
{{link_label}}
</a>
{% endif %}
{% else %}
<a href="{{ get_url(path=link_path[1])}}" class="text-lg px-8 py-3 leading-6 font-normal text-black hover:text-black focus:outline-none focus:text-gray-100 transition ease-in-out duration-150">
<a href="{{ get_url(path=link_path[1])}}" class="text-lg px-8 py-3 leading-6 font-normal hover: focus:outline-none focus:text-gray-100 transition ease-in-out duration-150">
{{link_label}}
</a>
{% endif %}
{% else %}
{% set button_id = header_label ~ "-mobile-menu-btn" | slugify %}
<button style="background-color: transparent; border:none" type="button" id="{{button_id}}" class=" px-8 py-3 items-start text-left text-black group inline-flex space-x-2 text-lg leading-6 font-normal hover:text-gray-200 focus:outline-none focus:text-black transition ease-in-out duration-150">
<button style="background-color: transparent; border:none" type="button" id="{{button_id}}" class=" px-8 py-3 items-start text-left group inline-flex space-x-2 text-lg leading-6 font-normal hover:text-gray-200 focus:outline-none focus: transition ease-in-out duration-150">
{{ header_label }}
<div class="-rotate-90 transition-transform transform origin-center duration-200 ease-out"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#ffffff"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg></div>
</button>
@@ -200,11 +217,11 @@
{% include "partials/socialLinks.html" %}
</div> #}
<a href="https://threefold.info/mycelium/docs/"
class="text-lg px-8 py-3 leading-6 font-normal text-black hover:text-gray-600 focus:outline-none focus:text-gray-50 transition ease-in-out duration-150" target="_blank">
class="text-lg px-8 py-3 leading-6 font-normal hover:text-gray-600 focus:outline-none focus:text-gray-50 transition ease-in-out duration-150" target="_blank">
Docs
</a>
<div class="rounded-full border-2 my-4 border-gray-400 py-2 mx-4">
<a href="/download" class="mt-2 rounded-md px-4 py-2.5 text-lg font-semibold text-black shadow-sm hover:text-gray-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Get Mycelium</a>
<a href="/download" class="mt-2 rounded-md px-4 py-2.5 text-lg font-semibold shadow-sm hover:text-gray-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Get Mycelium</a>
</div>
</nav>
</div>
@@ -230,4 +247,88 @@
color: #c7c7c7 !important;
}
.theme-toggle {
border: none !important;
box-shadow: none !important;
}
/* logo image */
.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 */
}
/* Styling for the switch container */
.switch {
position: relative;
display: inline-flex;
align-items: center;
width: 50px;
height: 25px;
background: #ccc;
border-radius: 50px;
cursor: pointer;
transition: background 0.3s ease-in-out;
}
/* Hide the default checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* Slider (toggle button) */
.slider {
position: absolute;
top: 2px;
left: 3px;
width: 20px;
height: 20px;
background: white;
border-radius: 50%;
transition: transform 0.3s ease-in-out;
}
/* Show moon by default (dark mode) */
#lightIcon {
display: block;
margin-left: 5px;
color: white;
}
#darkIcon {
display: inline-block;
margin-left: 5px;
}
/* When light mode is active */
.light-mode .switch {
background: #111; /* Dark background in light mode */
}
.light-mode .slider {
transform: translateX(25px); /* Move slider to the right */
}
.light-mode #lightIcon {
display: inline-block;
color: white;
}
.light-mode #darkIcon {
display: none;
}
</style>

2
templates/shortcodes/desciption_blockquote.html
View File

@@ -6,7 +6,7 @@
<div class="lg:py-24 py-12 relative bg-white isolate overflow-hidden">
<div class="lg:py-24 py-12 relative isolate overflow-hidden">
<div class="mx-auto container lg:max-w-7xl px-4">
<div>
<h2 class="fade-in lg:text-5xl text-4xl font-medium tracking-tight l">{{ title }}

2
templates/shortcodes/feature_card.html
View File

@@ -17,7 +17,7 @@
<p class="my-2 text-base font-light">{{ description }}</p>
{% endif %}
{% if link %}
<a href="{{ link }}" class="text-sm font-semibold text-black hover:text-gray-700">{{ link_name }} <span aria-hidden="true">→</span></a>
<a href="{{ link }}" class="text-sm font-semibold hover:text-gray-700">{{ link_name }} <span aria-hidden="true">→</span></a>
{% endif %}
{% if caller %}
<div class="mt-4">

6
templates/shortcodes/hero.html
View File

@@ -13,12 +13,12 @@
<div class="mx-auto max-w-7xl lg:grid lg:grid-cols-12 lg:gap-x-8 lg:px-8">
<div class="px-6 lg:col-span-7 lg:px-0 xl:col-span-6">
<div class="mx-auto max-w-2xl lg:mx-0 lg:flex-auto">
<h1 class="text-4xl font-semibold tracking-tight text-black lg:text-6xl">
<h1 class="text-4xl font-semibold tracking-tight lg:text-6xl">
{{ title }}
</h1>
<h2 class="fade-in text-balance lg:text-4xl text-3xl font-normal tracking-tight text-black">{{ subtitle }}
<h2 class="fade-in text-balance lg:text-4xl text-3xl font-normal tracking-tight ">{{ subtitle }}
</h2>
<p class="mt-8 text-pretty lg:text-xl text-lg font-light text-black lgl:text-xl">
<p class="mt-8 text-pretty lg:text-xl text-lg font-light lgl:text-xl">
{{ description }} <br><br> <b>{{ highlight }}</b>
</p>
<div class="mt-10 flex items-center gap-x-6">

2
templates/shortcodes/hero_features.html
View File

@@ -1,4 +1,4 @@
<div class="fade-in bg-white lg:max-w-7xl container mx-auto">
<div class="fade-in lg:max-w-7xl container mx-auto">
<div class="lg:py-24 py-12 relative isolate">
<div class="px-4 lg:px-8 lg:pb-24">
<p class="text-base font-light tracking-wide">{{ subtitle_1 }}</p>

4
templates/shortcodes/hero_right_img.html
View File

@@ -19,9 +19,9 @@
{{ title }}
</h1>
<h2 class="text-balance lg:text-4xl text-3xl font-normal tracking-tight">{{ subtitle }}</h2>
<p class="mt-6 text-md font-light text-stone-800 lg:text-lg">
<p class="mt-6 text-md font-light semigray lg:text-lg">
{{ description_1 }}
<p class="mt-2 text-md font-light text-stone-800 lg:text-lg">
<p class="mt-2 text-md font-light semigray lg:text-lg">
{{ description_2 }}
</p>
{% if button %}

4
templates/shortcodes/left_header.html
View File

@@ -12,14 +12,14 @@
<div class="mx-auto">
<p class="text-base font-light tracking-wide">{{ subtitle }}</p>
<h2 class="fade-in lg:text-5xl text-4xl font-medium tracking-tight">{{ title }}</h2>
<h3 class="mx-auto fade-in text-left lg:text-3xl text-2xl leading-snug font-light tracking-tight text-black">{{ subtitle_2 }}</h2>
<h3 class="mx-auto fade-in text-left lg:text-3xl text-2xl leading-snug font-light tracking-tight ">{{ subtitle_2 }}</h2>
<p class="mt-6 max-w-3xl text-lg font-light">{{ description }}</p>
{% if description2 %}
<p class="mt-6 text-lg font-light">{{ description2 }}</p>
{% endif %}
{% if description3 %}
<p class="text-left mt-4 max-w-3xl text-pretty lg:text-lg text-md font-light text-black fade-in">
<p class="text-left mt-4 max-w-3xl text-pretty lg:text-lg text-md font-light fade-in">
{{ description3 }} <a href="{{ button_link }}" class="font-semibold" target="_blanks"><u>{{ button_text }}</u></a>
</p>
{% endif %}

6
templates/shortcodes/text_center.html
View File

@@ -8,9 +8,9 @@
<div class="relative isolate px-4 lg:px-8">
<div class="mx-auto max-w-4xl">
<div class="text-left lg:text-center">
<h2 class="fade-in text-balance lg:text-5xl text-4xl font-medium tracking-tight text-black">{{ title }}</h2>
<h3 class="fade-in text-balance lg:text-3xl text-2xl font-normal tracking-tight text-black">{{ subtitle }}</h3>
<p class="mt-8 lg:text-lg font-light text-black sm:text-xl/8">{{ description }}</p>
<h2 class="fade-in text-balance lg:text-5xl text-4xl font-medium tracking-tight ">{{ title }}</h2>
<h3 class="fade-in text-balance lg:text-3xl text-2xl font-normal tracking-tight ">{{ subtitle }}</h3>
<p class="mt-8 lg:text-lg font-light sm:text-xl/8">{{ description }}</p>
</div>
</div>
</div>

2
templates/shortcodes/text_left_img.html
View File

@@ -8,7 +8,7 @@
{% set image_src = image_src | default(value="") %}
{% set image_alt = image_alt | default(value="") %}
<div class="lg:py-24 py-12 fade-in bg-semi-white lg:max-w-7xl container mx-auto px-4">
<div class="lg:py-24 py-12 fade-in lg:max-w-7xl container mx-auto px-4">
<div class="relative isolate">
<div class="mx-auto mt-10 lg:mt-0 lg:flex lg:items-center lg:gap-x-15 ">
<div class="lg:order-2 mt-6 lg:mt-0 lg:flex lg:justify-center lg:w-1/2">

2
templates/shortcodes/text_right_img.html
View File

@@ -8,7 +8,7 @@
{% set image_src = image_src | default(value="") %}
{% set image_alt = image_alt | default(value="") %}
<div class="lg:py-24 py-12 fade-in bg-semi-white lg:max-w-7xl container mx-auto px-4">
<div class="lg:py-24 py-12 fade-in lg:max-w-7xl container mx-auto px-4">
<div class="relative isolate">
<div class="mx-auto mt-10 lg:mt-0 lg:flex lg:items-center lg:gap-x-15 ">