update sass

content/download/index.md

@@ -20,7 +20,7 @@ extra:
 ) }}
 
 <div class="lg:max-w-7xl container mx-auto lg:pb-24 pb-12">
-<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 my-12">
+<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 m mt-10 y-12">
 {{ 
     feature_card(
         title="Download for iOS & MacOS", 
@@ -79,43 +79,51 @@ extra:
 <br>
 
 {{ accordion(
+    id_accordion="accordion1"
     question="What is Mycelium?",
     description="Mycelium is an end-to-end encrypted IPv6 overlay network written in Rust. Each node joining the network receives an IP in the 400::/7 range, facilitating secure and private communications."
 ) }}
 
 {{ accordion(
+    id_accordion="accordion2"
     question="Is mycelium ready to scale to the world?",
     description="No, Mycelium is not yet fully scalable to a global level. Currently, each network can support around 100,000 users, but multiple networks can be deployed to expand capacity. We anticipate resolving these scalability challenges by 2025."
 ) }}
 
 {{ accordion(
+    id_accordion="accordion3"
     question="How do I install Mycelium?",
-    description="The Mycelium app supports iOS, macOS, Android and Windows. For Linux, a binary is available. Installation guides are available for both local machines and virtual machines running on the TFGrid. Note that Windows users need to have wintun.dll in the same directory as the Mycelium executable. Click here for more info."
+    description="The Mycelium app supports iOS, macOS, Android and Windows. For Linux, a binary is available. Installation guides are available for both local machines and virtual machines running on the TFGrid. Note that Windows users need to have wintun.dll in the same directory as the Mycelium executable."
 ) }}
 
 {{ accordion(
+    id_accordion="accordion4"
     question="How can I find and use my Mycelium address?",
     description="Upon using the Mycelium app, you're assigned a unique Mycelium address. To copy this address, click the button located to the right of the displayed address in the app interface."
 ) }}
 
 {{ accordion(
+    id_accordion="accordion5"
     question="Can I deploy workloads on the TFGrid using Mycelium?",
     description="Yes, after installing Mycelium, you can deploy workloads on the TFGrid and connect to them using the Mycelium network. Detailed deployment guides are available in the documentation."
 ) }}
 
 {{ accordion(
+    id_accordion="accordion6"
     question="Is there an API available for Mycelium?",
     description="Yes, Mycelium offers an API for administrative operations, peer management, and message subsystem operations. Comprehensive API documentation can be found in the official Mycelium GitHub repository"
     )
     }}
 
 {{ accordion(
+    id_accordion="accordion7"
     question="What should I do if I encounter issues during installation or usage?",
     description="If you face any challenges, refer to the troubleshooting section in the Mycelium documentation. Additionally, ensure that all prerequisites are met, such as having wintun.dll in the correct directory for Windows installations."
     )
     }}
 
 {{ accordion(
+    id_accordion="accordion8"
     question="How does Mycelium handle routing within its network?",
     description="Mycelium incorporates core principles of the Babel routing protocol, enabling efficient and dynamic routing within its encrypted IPv6 overlay network."
     )

content/home/index.md

@@ -67,11 +67,11 @@ extra:
 
 <div class="lg:max-w-7xl container mx-auto py-12 lg:pb-24 px-4">
 <div class="mx-auto grid grid-cols-1 gap-x-6 gap-y-10 text-base sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-2 lg:gap-x-8 lg:gap-y-8">
-<div class="relative ">
+<div class="relative my-4 ">
 
 ######  **PRODUCTIVITY & COMMUNICATION**
 
-<div class="mt-2">
+<div class="mt-1">
 
 - Secure remote work collaboration.
 - Private file sharing between trusted nodes.
@@ -82,11 +82,11 @@ extra:
 </div>
 </div>
 
-<div class="relative ">
+<div class="relative my-4 ">
 
 ######  **INFRASTRUCTURE**
 
-<div class="mt-2">
+<div class="mt-1">
 
 - Private cloud computing resources.
 - Secure IoT device networks.
@@ -97,11 +97,11 @@ extra:
 </div>
 </div>
 
-<div class="relative ">
+<div class="relative my-4 ">
 
 ######  **SERVICES**
 
-<div class="mt-2">
+<div class="mt-1">
 
 - Self-hosted web services.
 - Private file sharing between trusted nodes.
@@ -112,11 +112,11 @@ extra:
 </div>
 </div>
 
-<div class="relative ">
+<div class="relative my-4">
 
 ###### **MEDIA & CONTENT**
 
-<div class="mt-2">
+<div class="mt-1">
 
 - Private media streaming.
 - Personal cloud storage.
@@ -154,7 +154,7 @@ extra:
 ) }}
 
 <div class="lg:max-w-7xl container mx-auto lg:pb-24 pb-12">
-<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 my-12">
+<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mt-10 my-12">
 
 {{ 
    feature_card(
@@ -201,7 +201,7 @@ extra:
 ) }}
 
 <div class="lg:max-w-7xl container mx-auto lg:pb-24 pb-12">
-<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 my-12">
+<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mt-10 my-12">
 {{ 
     feature_card(
         title="Decentralization", 
@@ -250,43 +250,51 @@ extra:
 <br>
 
 {{ accordion(
+    id_accordion="accordion1"
     question="What is Mycelium?",
     description="Mycelium is an end-to-end encrypted IPv6 overlay network written in Rust. Each node joining the network receives an IP in the 400::/7 range, facilitating secure and private communications."
 ) }}
 
 {{ accordion(
+    id_accordion="accordion2"
     question="Is mycelium ready to scale to the world?",
     description="No, Mycelium is not yet fully scalable to a global level. Currently, each network can support around 100,000 users, but multiple networks can be deployed to expand capacity. We anticipate resolving these scalability challenges by 2025."
 ) }}
 
 {{ accordion(
+    id_accordion="accordion3"
     question="How do I install Mycelium?",
-    description="The Mycelium app supports iOS, macOS, Android and Windows. For Linux, a binary is available. Installation guides are available for both local machines and virtual machines running on the TFGrid. Note that Windows users need to have wintun.dll in the same directory as the Mycelium executable. Click here for more info."
+    description="The Mycelium app supports iOS, macOS, Android and Windows. For Linux, a binary is available. Installation guides are available for both local machines and virtual machines running on the TFGrid. Note that Windows users need to have wintun.dll in the same directory as the Mycelium executable."
 ) }}
 
 {{ accordion(
+    id_accordion="accordion4"
     question="How can I find and use my Mycelium address?",
     description="Upon using the Mycelium app, you're assigned a unique Mycelium address. To copy this address, click the button located to the right of the displayed address in the app interface."
 ) }}
 
 {{ accordion(
+    id_accordion="accordion5"
     question="Can I deploy workloads on the TFGrid using Mycelium?",
     description="Yes, after installing Mycelium, you can deploy workloads on the TFGrid and connect to them using the Mycelium network. Detailed deployment guides are available in the documentation."
 ) }}
 
 {{ accordion(
+    id_accordion="accordion6"
     question="Is there an API available for Mycelium?",
     description="Yes, Mycelium offers an API for administrative operations, peer management, and message subsystem operations. Comprehensive API documentation can be found in the official Mycelium GitHub repository"
     )
     }}
 
 {{ accordion(
+    id_accordion="accordion7"
     question="What should I do if I encounter issues during installation or usage?",
     description="If you face any challenges, refer to the troubleshooting section in the Mycelium documentation. Additionally, ensure that all prerequisites are met, such as having wintun.dll in the correct directory for Windows installations."
     )
     }}
 
 {{ accordion(
+    id_accordion="accordion8"
     question="How does Mycelium handle routing within its network?",
     description="Mycelium incorporates core principles of the Babel routing protocol, enabling efficient and dynamic routing within its encrypted IPv6 overlay network."
     )

css/index.css

@@ -3,6 +3,17 @@
 @import "code.css";
 /*! purgecss end ignore */
 
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+  /* .btn-primary {
+      @apply py-1.5 px-3 text-center bg-blue-700 rounded-md text-white;
+  } */
+}
+
 @import "tailwindcss/base";
 @import "layout.css";
 @import "tailwindcss/components";
@@ -110,20 +121,6 @@ body.dark-mode .d_menu {
   background-color: rgba(255, 255, 255, 0.75);
 }
 
-.bg-dark-gradient {
-  background: rgba(16,16,16,1);
-  background: radial-gradient(circle, rgba(16,16,16,1) 0%, rgb(24, 24, 24) 50%, rgba(16,16,16,1) 100%);
-}
-
-.bg-black1 {
-  background-color: rgba(16,16,16,1);
-}
-
-.bg-transparent {
-  background-color: transparent;
-}
-
-
 
 /* Custom css allowing image styling in markdown */
 img[src*="#mx-auto"] {
@@ -337,18 +334,18 @@ background-color:#5596f5 !important;
 
 @layer components {
   h1 {
-    @apply text-4xl lg:text-6xl font-normal;
+    @apply text-4xl font-semibold tracking-tight lg:text-6xl;
     font-family: "Inter", sans-serif !important;
   }
   h2 {
-    @apply text-3xl lg:text-4xl my-4 font-normal leading-none;
+    @apply  lg:text-5xl text-4xl font-medium tracking-tight leading-none;
     font-family: "Inter", sans-serif !important;
   }
   h2 strong {
     @apply font-semibold;
   }
   h3 {
-    @apply text-2xl lg:text-3xl my-4 font-extralight;
+    @apply lg:text-4xl text-3xl font-normal tracking-tight;
     font-family: "Inter", sans-serif !important;
   }
   h3 strong {
@@ -648,7 +645,6 @@ header {
 .post-content-text h2 {
   font-family: "Inter", sans-serif;
   line-height: 1.5;
-  font-size: 2.25rem;
   font-weight: 700;
 }
 .container-fluid {
@@ -662,12 +658,8 @@ header {
 .zola-anchor {
   display: none;
 }
-@media (min-width: 1024px){
+
-  h2 {
+
-    font-size: 3.5rem;
-  } 
-  
-}
 
 @media (max-width: 1024px) {
 

templates/shortcodes/accordion.html

@@ -1,56 +1,43 @@
-
+<div class="rounded-lg shadow-lg overflow-hidden my-2 border border-gray-200">
-<script src="https://cdn.tailwindcss.com"></script>
+            <input type="checkbox" id="{{ id_accordion }}" class="peer hidden">
-    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
+            <label for="{{ id_accordion }}" class="accordion flex items-center justify-between p-4 cursor-pointer transition-colors">
-    <script>
+                <span class="text-lg font-semibold">{{ question }}</span>
-        tailwind.config = {
+                <svg class="w-6 h-6 transition-transform peer-checked:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            theme: {
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
-                extend: {
+                </svg>
-                    fontFamily: {
+            </label>
-                        inter: ['Inter', 'sans-serif'],
+            <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 %}
-    </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>
-            <!-- </div>                                                                                              
+            </div>
-    </div> -->
+        </div>
-            <!-- End: Accordion component -->
+
+        <style>
+
+            body .accordion:hover {
+                background-color: rgb(240, 240, 240) !important;
+             }
+
+            body.dark-mode .accordion:hover {
+               background-color: #2e2e2e !important;
+            }
+        </style>
+
+        
+
+   
+
+     
+
+     
+
+
+     
+   
 
-        <!-- </div>
-    </main> -->
 
 
 

templates/shortcodes/cta.html

@@ -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>

templates/shortcodes/desciption_blockquote.html

@@ -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">

templates/shortcodes/hero.html

@@ -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 class="fade-in">{{ subtitle }}</h2>
-                  </h2>
         <p class="mt-8 text-pretty lg:text-xl text-lg  font-light lgl:text-xl">
           {{ description }} <br><br> <b>{{ highlight }}</b>
         </p>

templates/shortcodes/hero_bottom_img.html

@@ -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>
   

templates/shortcodes/hero_features.html

@@ -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>

templates/shortcodes/hero_right_img.html

@@ -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">

templates/shortcodes/left_header.html

@@ -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>
+      <h2 class="fade-in my-4">{{ title }}</h2>
-      <h3 class="mx-auto fade-in text-left lg:text-3xl text-2xl leading-snug font-light tracking-tight ">{{ subtitle_2 }}</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>

templates/shortcodes/text_center.html

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

templates/shortcodes/text_left_img.html

@@ -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>

templates/shortcodes/text_right_img.html

@@ -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>