ourworld_web/www_mycelium
20
0
Fork 0
Code Issues 2 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
content/header/index.md
View File

@ -3,7 +3,8 @@ title: "Header"
insert_anchor_links: "left" insert_anchor_links: "left"
template: "partials/header.html" template: "partials/header.html"
extra: extra:
logoPath: "images/new_logo_tft.png" logoPathLight: "images/mycelium_white.png"
logoPathDark: "images/mycelium_dark.png"
--- ---

77
css/index.css
View File

@ -12,11 +12,78 @@
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
.dashboard:hover { /* Defaul lightMode */
body.light-mode {
background: #74ddc3 !important; background-color: #ffffff;
color: #000000;
} }
body.light-mode .semigray {
color: #424242 !important;
}
body.light-mode .semigray2 {
color: #424242 !important;
}
body.light-mode .dropdown a{
@apply
px-0
text-black
}
body.light-mode .dropdown{
background-color: rgb(255 255 255 / 100%);
color: #121212;
}
body.light-mode .d_menu {
background-color: #e5e5e5;
}
body.light-mode .icon {
fill: #424242 !important;
}
/* Dark Mode */
body {
background-color: #121212;
color: #ffffff;
}
body .semigray {
color: #e5e7eb !important;
}
body .semigray2 {
color: #d1d5db !important;
}
body .icon {
fill: #ffffff !important;
}
body .dropdown a{
@apply
px-0
text-white
}
body .dropdown{
background-color: rgb(0 0 0 / 50%);
color: #fff;
}
body .d_menu {
background-color: rgba(34 34 34);
}
/* Custom CSS for header partial */ /* Custom CSS for header partial */
.backdrop-blur { .backdrop-blur {
@ -287,7 +354,7 @@ background-color:#5596f5 !important;
h5 { h5 {
@apply text-lg my-1 tracking-normal font-medium; @apply text-lg my-1 tracking-normal font-medium;
font-family: "Inter", sans-serif !important; font-family: "Inter", sans-serif !important;
color: #fff !important
} }
h6 { h6 {
@apply text-md not-italic font-normal my-1; @apply text-md not-italic font-normal my-1;
@ -295,7 +362,7 @@ background-color:#5596f5 !important;
} }
p { p {
@apply text-lg; @apply text-lg;
color: #3d3d3d;
font-family: "Inter", sans-serif !important; font-family: "Inter", sans-serif !important;
} }
blockquote { blockquote {

BIN
static/images/mycelium_dark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
static/images/mycelium_white.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

31
static/js/custom.js
View File

@ -191,3 +191,34 @@ function formatStatsData(stats) {
readingTime(); readingTime();
getStats(); getStats();
document.getElementById("year").innerHTML = new Date().getFullYear(); document.getElementById("year").innerHTML = new Date().getFullYear();
// Get elements
const toggleSwitch = document.getElementById('lightModeSwitch');
const body = document.body;
// Apply saved theme on load
document.addEventListener('DOMContentLoaded', () => {
const savedTheme = localStorage.getItem('theme') || 'light'; // Default is light mode
if (savedTheme === 'light') {
body.classList.add('light-mode');
toggleSwitch.checked = true;
} else {
body.classList.remove('light-mode');
toggleSwitch.checked = false;
}
});
// Toggle between light and dark mode
toggleSwitch.addEventListener('change', () => {
if (toggleSwitch.checked) {
body.classList.add('light-mode');
localStorage.setItem('theme', 'light');
} else {
body.classList.remove('light-mode');
localStorage.setItem('theme', 'dark');
}
});

2
templates/_default/base.html
View File

@ -3,7 +3,7 @@
{% include "partials/head.html" %} {% include "partials/head.html" %}
{% include "partials/header.html" %} {% include "partials/header.html" %}
<body class="bg-white"> <body class="">
<!-- Google Tag Manager (noscript) --> <!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-N7PNMFH" height="0" width="0" <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"> <header id="header-container">
<div class="z-20 fixed top-0 left-0 right-0 lg:absolute w-full"> <div class="z-20 fixed top-0 left-0 right-0 lg:absolute w-full">
<div class="relative z-50"> <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 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> {# <div>
<a href="{{get_url(path='/')}}" class="flex"> <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" /> <img class="w-36 h-auto" style="max-width: none;" src="{{ get_url(path=section.extra.logoPath)}}" alt="Mycelium Logo" />
</a> </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"> <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"> <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 --> <!-- Heroicon name: menu -->
@ -36,7 +41,7 @@
{% set current = get_url(path=link_path[1]) ~ "/" %} {% set current = get_url(path=link_path[1]) ~ "/" %}
{% if header_label is containing("http") %} {% if header_label is containing("http") %}
{% if header_label is not containing("threefold") %} {% 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}} {{link_label}}
</a> </a>
{% endif %} {% endif %}
@ -45,14 +50,14 @@
{{link_label}} {{link_label}}
</a> </a>
{% else %} {% 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}} {{link_label}}
</a> </a>
{% endif %} {% endif %}
{% else %} {% else %}
<div class="relative"> <div class="relative">
{% set button_id = header_label ~ "-menu-btn" | slugify %} {% 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> <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> <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> </button>
@ -62,16 +67,16 @@
{% endif %} {% endif %}
{% endfor %} {% endfor %}
<a href="https://threefold.info/mycelium/docs/" <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 Docs
</a> </a>
</nav> </nav>
<div class="hidden md:inline-block md:order-last"> <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"> {# <ul class="list-none inline-flex mt-5 mr-4 mx-auto">
<li class="ml-4"> <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 <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
width="18" width="18"
@ -91,7 +96,7 @@
<a <a
href="javascript:;" href="javascript:;"
onclick="ml_account('webforms', '3562741', 'n7q9l7', 'show')" onclick="ml_account('webforms', '3562741', 'n7q9l7', 'show')"
class="text-black" class=""
> >
<svg <svg
aria-hidden="true" aria-hidden="true"
@ -111,7 +116,19 @@
</a> </a>
</li> </li>
</ul> #} </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> </div>
</div> </div>
@ -165,18 +182,18 @@
{% set link_path = header_label | split(pat="%22") | safe%} {% set link_path = header_label | split(pat="%22") | safe%}
{% if header_label is containing("http") %} {% if header_label is containing("http") %}
{% if header_label is not containing("threefold") %} {% 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}} {{link_label}}
</a> </a>
{% endif %} {% endif %}
{% else %} {% 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}} {{link_label}}
</a> </a>
{% endif %} {% endif %}
{% else %} {% else %}
{% set button_id = header_label ~ "-mobile-menu-btn" | slugify %} {% 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 }} {{ 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> <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> </button>
@ -200,11 +217,11 @@
{% include "partials/socialLinks.html" %} {% include "partials/socialLinks.html" %}
</div> #} </div> #}
<a href="https://threefold.info/mycelium/docs/" <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 Docs
</a> </a>
<div class="rounded-full border-2 my-4 border-gray-400 py-2 mx-4"> <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> </div>
</nav> </nav>
</div> </div>
@ -230,4 +247,88 @@
color: #c7c7c7 !important; 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> </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 class="mx-auto container lg:max-w-7xl px-4">
<div> <div>
<h2 class="fade-in lg:text-5xl text-4xl font-medium tracking-tight l">{{ title }} <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> <p class="my-2 text-base font-light">{{ description }}</p>
{% endif %} {% endif %}
{% if link %} {% 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 %} {% endif %}
{% if caller %} {% if caller %}
<div class="mt-4"> <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="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="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"> <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 }} {{ title }}
</h1> </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> </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> {{ description }} <br><br> <b>{{ highlight }}</b>
</p> </p>
<div class="mt-10 flex items-center gap-x-6"> <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="lg:py-24 py-12 relative isolate">
<div class="px-4 lg:px-8 lg:pb-24"> <div class="px-4 lg:px-8 lg:pb-24">
<p class="text-base font-light tracking-wide">{{ subtitle_1 }}</p> <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 }} {{ title }}
</h1> </h1>
<h2 class="text-balance lg:text-4xl text-3xl font-normal tracking-tight">{{ subtitle }}</h2> <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 }} {{ 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 }} {{ description_2 }}
</p> </p>
{% if button %} {% if button %}

4
templates/shortcodes/left_header.html
View File

@ -12,14 +12,14 @@
<div class="mx-auto"> <div class="mx-auto">
<p class="text-base font-light tracking-wide">{{ subtitle }}</p> <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> <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> <p class="mt-6 max-w-3xl text-lg font-light">{{ description }}</p>
{% if description2 %} {% if description2 %}
<p class="mt-6 text-lg font-light">{{ description2 }}</p> <p class="mt-6 text-lg font-light">{{ description2 }}</p>
{% endif %} {% endif %}
{% if description3 %} {% 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> {{ description3 }} <a href="{{ button_link }}" class="font-semibold" target="_blanks"><u>{{ button_text }}</u></a>
</p> </p>
{% endif %} {% endif %}

6
templates/shortcodes/text_center.html
View File

@ -8,9 +8,9 @@
<div class="relative isolate px-4 lg:px-8"> <div class="relative isolate px-4 lg:px-8">
<div class="mx-auto max-w-4xl"> <div class="mx-auto max-w-4xl">
<div class="text-left lg:text-center"> <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> <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 text-black">{{ subtitle }}</h3> <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 text-black sm:text-xl/8">{{ description }}</p> <p class="mt-8 lg:text-lg font-light sm:text-xl/8">{{ description }}</p>
</div> </div>
</div> </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_src = image_src | default(value="") %}
{% set image_alt = image_alt | 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="relative isolate">
<div class="mx-auto mt-10 lg:mt-0 lg:flex lg:items-center lg:gap-x-15 "> <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"> <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_src = image_src | default(value="") %}
{% set image_alt = image_alt | 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="relative isolate">
<div class="mx-auto mt-10 lg:mt-0 lg:flex lg:items-center lg:gap-x-15 "> <div class="mx-auto mt-10 lg:mt-0 lg:flex lg:items-center lg:gap-x-15 ">