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

update sass

Browse Source
This commit is contained in:
Ehab Hassan
2025-05-25 11:43:04 +03:00
parent a81efb8d0b
commit 8a3fb4800b
57 changed files with 98 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
templates/shortcodes/accordion.html
View File

@@ -1,56 +1,43 @@
<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
inter: ['Inter', 'sans-serif'],
},
},
},
};
</script>
<div x-data="{ expanded: false }" class="py-2">
<h2>
<button
id="faqs-title-01"
type="button"
class="flex items-center justify-between w-full text-left font-semibold py-2 px-4 border-1 border-gray-50 rounded-lg"
@click="expanded = !expanded"
:aria-expanded="expanded"
aria-controls="faqs-text-01"
>
<span class="">{{ question }}</span>
<svg class="shrink-0 ml-8" fill="gray" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
<rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
</svg>
</button>
</h2>
<div
id="faqs-text-01"
role="region"
aria-labelledby="faqs-title-01"
class="grid text-sm overflow-hidden transition-all duration-300 ease-in-out"
:class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
>
<div class="overflow-hidden">
{% if description %}
<p class="py-3 px-4 text-base font-light">
{{ description }}
</p>
{% endif %}
</div>
</div>
<div class="rounded-lg shadow-lg overflow-hidden my-2 border border-gray-200">
<input type="checkbox" id="{{ id_accordion }}" class="peer hidden">
<label for="{{ id_accordion }}" class="accordion flex items-center justify-between p-4 cursor-pointer transition-colors">
<span class="text-lg font-semibold">{{ question }}</span>
<svg class="w-6 h-6 transition-transform peer-checked:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</label>
<div class="max-h-0 overflow-hidden transition-all duration-300 peer-checked:max-h-screen">
<div class="p-4">
{% if description %}
<p class="semigray font-normal leading-relaxed">{{ description }} </p>
{% endif %}
</div>
<!-- </div>
</div> -->
<!-- End: Accordion component -->
</div>
</div>
<style>
body .accordion:hover {
background-color: rgb(240, 240, 240) !important;
}
body.dark-mode .accordion:hover {
background-color: #2e2e2e !important;
}
</style>
<!-- </div>
</main> -->

2
templates/shortcodes/cta.html
View File

@@ -12,7 +12,7 @@
<div class="mx-auto max-w-7xl py-12 sm:px-6 lg:px-8">
<div class="relative isolate overflow-hidden bg-black px-6 pt-16 shadow-2xl sm:rounded-3xl sm:px-16 md:pt-24 lg:flex lg:gap-x-20 lg:px-24 lg:pt-0">
<div class="mx-auto max-w-md text-center lg:mx-0 lg:flex-auto lg:py-32 lg:text-left">
<h2 class="text-4xl font-normal tracking-tight text-balance text-white lg:text-5xl">{{ title }}</h2>
<h2 class=" text-white">{{ title }}</h2>
<p class="mt-6 text-lg lg:text-xl text-pretty font-light text-gray-300">{{ description }}</p>
<div class="mt-10 flex items-center justify-center gap-x-6 lg:justify-start">
<a href="{{ button_link }}" class="rounded-2xl bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-xs hover:bg-gray-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">{{ button_text }}</a>

2
templates/shortcodes/desciption_blockquote.html
View File

@@ -9,7 +9,7 @@
<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 }}
<h2 class="fade-in my-2">{{ title }}
</h2>
</div>
<div class="relative grid lg:grid-cols-12 lg:gap-8">

5
templates/shortcodes/hero.html
View File

@@ -13,11 +13,10 @@
<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 lg:text-6xl">
<h1>
{{ title }}
</h1>
<h2 class="fade-in text-balance lg:text-4xl text-3xl font-normal tracking-tight ">{{ subtitle }}
</h2>
<h2 class="fade-in">{{ subtitle }}</h2>
<p class="mt-8 text-pretty lg:text-xl text-lg font-light lgl:text-xl">
{{ description }} <br><br> <b>{{ highlight }}</b>
</p>

49
templates/shortcodes/hero_bottom_img.html
View File

@@ -2,7 +2,7 @@
<div class="mx-auto max-w-7xl">
<div class="mx-auto max-w-4xl text-left lg:text-center">
<p class="text-base/7 font-light tracking-wide">{{ subtitle }}</p>
<h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight "> {{ title }}</h2>
<h2 class="fade-in my-2"> {{ title }}</h2>
<p class="mt-6 text-lg font-light lg:text-xl">{{ description }}</p>
</div>
</div>
@@ -11,51 +11,6 @@
<img src="{{ image_src }}" alt="{{ image_alt }}" width="900">
</div>
</div>
<!-- <div class="mx-auto mt-10 max-w-7xl px-6 lg:px-8">
<dl class="mx-auto grid max-w-2xl grid-cols-1 gap-x-6 gap-y-4 text-base/7 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-3 lg:gap-x-8 lg:gap-y-10">
<div class="relative lg:pl-9">
<dt class="inline font-semibold ">
✓ Quantum Safe Storage Functionality
</dt>
<dd class="font-light">Mycelium’s quantum safe storage enables flexible, scalable, and efficient data distribution across a decentralized network, ensuring redundancy and security.</dd>
</div>
<div class="relative lg:pl-9">
<dt class="inline font-semibold ">
✓ Entry and Exit Points for AI Workloads
</dt>
<dd class="font-light">Seamlessly connect AI applications to Mycelium, providing optimized nd secured data pipelines for training, inference, and real-time processing.</dd>
</div>
<div class="relative lg:pl-9">
<dt class="inline font-semibold ">
✓ Data Storage and Retrieval Mechanisms
</dt>
<dd class="font-light">Users can choose between storing data locally for quick access or utilizing the distributed grid for enhanced scalability and resilience.</dd>
</div>
<div class="relative lg:pl-9">
<dt class="inline font-semibold ">
✓ Integrated Name Services (DNS)
</dt>
<dd class="font-light">The Integrated DNS system efficiently finds the shortest path between users and websites, automatically balancing loads and identifying alternative routes in case of internet issues.</dd>
</div>
<div class="relative lg:pl-9">
<dt class="inline font-semibold ">
✓ Frontend/Backend Integration
</dt>
<dd class="font-light"> Mycelium provides seamless integration with existing applications, enabling developers to leverage decentralized storage across both frontend and backend architectures.</dd>
</div>
<div class="relative lg:pl-9">
<dt class="inline font-semibold ">
✓ CDN (Content Delivery Network)
</dt>
<dd class="font-light">Mycelium accelerates data distribution by acting as a decentralized CDN, ensuring fast, secure, and efficient content delivery across global nodes with minimal latency.</dd>
</div>
</dl>
</div> -->
</div>

2
templates/shortcodes/hero_features.html
View File

@@ -2,7 +2,7 @@
<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>
<h2 class="fade-in lg:text-5xl text-4xl font-normal tracking-tight">{{ title }}</h2>
<h2 class="fade-in my-2">{{ title }}</h2>
<p class="text-left mt-4 text-pretty lg:text-lg text-md font-light fade-in max-w-3xl">
{{ description }}
</p>

4
templates/shortcodes/hero_right_img.html
View File

@@ -15,10 +15,10 @@
alt="{{ image_alt }}">
</div>
<div class="mx-auto max-w-xl lg:mx-0 lg:flex-auto lg:order-1">
<h1 class="mt-2 text-4xl font-semibold tracking-tight lg:text-6xl">
<h1 class="mt-2">
{{ title }}
</h1>
<h2 class="text-balance lg:text-4xl text-3xl font-normal tracking-tight">{{ subtitle }}</h2>
<h3 class="">{{ subtitle }}</h3>
<p class="mt-6 text-md font-light semigray lg:text-lg">
{{ description_1 }}
<p class="mt-2 text-md font-light semigray lg:text-lg">

4
templates/shortcodes/left_header.html
View File

@@ -11,8 +11,8 @@
<div class="mx-auto">
<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 ">{{ subtitle_2 }}</h2>
<h2 class="fade-in my-4">{{ title }}</h2>
<h3 class="mx-auto fade-in">{{ 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>

4
templates/shortcodes/text_center.html
View File

@@ -8,8 +8,8 @@
<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 ">{{ title }}</h2>
<h3 class="fade-in text-balance lg:text-3xl text-2xl font-normal tracking-tight ">{{ subtitle }}</h3>
<h2 class="fade-in my-4">{{ title }}</h2>
<h3 class="fade-in">{{ subtitle }}</h3>
<p class="mt-8 lg:text-lg font-light sm:text-xl/8">{{ description }}</p>
</div>
</div>

2
templates/shortcodes/text_left_img.html
View File

@@ -17,7 +17,7 @@
</div>
<div class="mx-auto max-w-xl lg:mx-6 lg:flex-auto">
<p class="text-base mt-4 font-light tracking-wide">{{ subheader }}</p>
<h2 class="fade-in lg:text-5xl text-4xl font-medium tracking-tight ">{{ title }}</h2>
<h2 class="fade-in my-4">{{ title }}</h2>
<h3 class="font-light lg:text-3xl text-xl">
{{ subtitle }}
</h3>

2
templates/shortcodes/text_right_img.html
View File

@@ -18,7 +18,7 @@
</div>
<div class="mx-auto max-w-xl lg:mx-6 lg:flex-auto">
<p class="text-base font-light tracking-wide mt-4">{{ subheader }}</p>
<h2 class="fade-in lg:text-5xl text-4xl font-medium tracking-tight ">{{ title }}</h2>
<h2 class="fade-in my-4">{{ title }}</h2>
<h3 class="font-light lg:text-3xl text-xl">
{{ subtitle }}
</h3>