test

.github/workflows/tf_update_dev.yml

@@ -0,0 +1,46 @@
+name: www2.threefold_io
+on: 
+  push:
+    branches: [ development ]
+
+jobs:
+  deploy:
+    name: Deploy
+    runs-on: ubuntu-latest
+    steps:
+    - name: pushing latest change on www2.threefold.io
+      uses: appleboy/ssh-action@master
+      with:
+        host: dev.threefold.io
+        username: webuser
+        key: ${{ secrets.TF_SECRET }}
+        port: 34022
+        script: |
+          cd websites/www2/www_threefold_io/
+          git log -1
+          git fetch
+          git reset --hard origin/development
+          sed -i "s/https:\/\/www.threefold.io/https:\/\/dev.threefold.io/g" config.toml
+          ./build.sh
+          
+  wait:
+    needs: deploy
+    name: Wait for Website Update
+    runs-on: ubuntu-latest
+    steps:
+    - name: Wait Period
+      id: wait-deploy
+      run: |
+        echo "Sleeping for 30"
+        sleep 30
+        
+  checklinks:
+    needs: wait
+    name: Check for Broken Links
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check for Broken Links
+        id: link-report
+        uses: docker://ghcr.io/threefoldfoundation/website-link-checker:latest
+        with:
+          args: 'https://www2.threefold.io -w 404'

.github/workflows/tf_update_prod.yml

@@ -0,0 +1,46 @@
+name: www.threefold_io
+on: 
+  push:
+    branches: [ master ]
+
+jobs:
+  deploy:
+    name: Deploy
+    runs-on: ubuntu-latest
+    steps:
+    - name: pushing latest change on www.threefold.io
+      uses: appleboy/ssh-action@master
+      with:
+        host: www.threefold.io
+        username: root
+        key: ${{ secrets.TF_SECRET }}
+        port: 22
+        script: |
+          cd /opt/www_threefold_io/
+          git log -1
+          git fetch
+          git reset --hard origin/master
+          sed -i "s/https:\/\/dev.threefold.io/https:\/\/www.threefold.io/g" config.toml
+          ./build.sh
+          
+  wait:
+    needs: deploy
+    name: Wait for Website Update
+    runs-on: ubuntu-latest
+    steps:
+    - name: Wait Period
+      id: wait-deploy
+      run: |
+        echo "Sleeping for 30"
+        sleep 30
+        
+  checklinks:
+    needs: wait
+    name: Check for Broken Links
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check for Broken Links
+        id: link-report
+        uses: docker://ghcr.io/threefoldfoundation/website-link-checker:latest
+        with:
+          args: 'https://www.threefold.io -w 404'

.github/workflows/update_dev2.yml

@@ -0,0 +1,46 @@
+name: www3.threefold_io
+on: 
+  push:
+    branches: [ development_sasha ]
+
+jobs:
+  deploy:
+    name: Deploy
+    runs-on: ubuntu-latest
+    steps:
+    - name: pushing latest change on www3.threefold.io
+      uses: appleboy/ssh-action@master
+      with:
+        host: www3.threefold.io
+        username: webuser
+        key: ${{ secrets.TF_SECRET }}
+        port: 34022
+        script: |
+          cd websites/tmp/www_threefold_io/
+          git log -1
+          git restore .
+          git pull
+          sed -i "s/https:\/\/dev.threefold.io/https:\/\/dev2.threefold.io/g" config.toml
+          bash build.sh
+          
+  wait:
+    needs: deploy
+    name: Wait for Website Update
+    runs-on: ubuntu-latest
+    steps:
+    - name: Wait Period
+      id: wait-deploy
+      run: |
+        echo "Sleeping for 30"
+        sleep 30
+        
+  checklinks:
+    needs: wait
+    name: Check for Broken Links
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check for Broken Links
+        id: link-report
+        uses: docker://ghcr.io/threefoldfoundation/website-link-checker:latest
+        with:
+          args: 'https://www3.threefold.io -w 404'

.github/workflows/update_www3.yml

@@ -0,0 +1,46 @@
+name: www3.threefold_io
+on: 
+  push:
+    branches: [ 3.10.0 ]
+
+jobs:
+  deploy:
+    name: Deploy
+    runs-on: ubuntu-latest
+    steps:
+    - name: pushing latest change on www3.threefold.io
+      uses: appleboy/ssh-action@master
+      with:
+        host: www3.threefold.io
+        username: webuser
+        key: ${{ secrets.TF_SECRET }}
+        port: 34022
+        script: |
+          cd websites/www3/www_threefold_io/
+          git log -1
+          git restore .
+          git pull
+          sed -i "s/https:\/\/www.threefold.io/https:\/\/www3.threefold.io/g" config.toml
+          bash build.sh
+          
+  wait:
+    needs: deploy
+    name: Wait for Website Update
+    runs-on: ubuntu-latest
+    steps:
+    - name: Wait Period
+      id: wait-deploy
+      run: |
+        echo "Sleeping for 30"
+        sleep 30
+        
+  checklinks:
+    needs: wait
+    name: Check for Broken Links
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check for Broken Links
+        id: link-report
+        uses: docker://ghcr.io/threefoldfoundation/website-link-checker:latest
+        with:
+          args: 'https://www3.threefold.io -w 404'

build.sh

@@ -1,46 +1,47 @@
-echo "Starting build..."
+#!/bin/bash
 
-SOURCE=${BASH_SOURCE[0]}
+set -e
-DIR_OF_THIS_SCRIPT="$( dirname "$SOURCE" )"
+echo "🧹 Cleaning build folders..."
-ABS_DIR_OF_SCRIPT="$( realpath $DIR_OF_THIS_SCRIPT )"
+rm -rf public static/css
 
-# TODO: Check if current version is latest to avoid redundant installation
+echo "⬇️ Downloading TailwindCSS CLI..."
-if [[ -f "tailwindcss" ]]
+if [[ -f "tailwindcss" ]]; then
-then
   rm tailwindcss
 fi
 
-# checks os and architecture for correct release
+ASSET="tailwindcss-linux-x64"
-# https://stackoverflow.com/a/8597411 
-echo "Installing & building tailwind..."
-ASSET="tailwindcss"
-
-if [[ "$OSTYPE" == "linux-gnu"* ]]; then
-    ASSET="$ASSET-linux"
-elif [[ "$OSTYPE" == "darwin"* ]]; then
-    ASSET="$ASSET-macos"
-fi
-if [[ "$(uname -m)" == "x86_64"* ]]; then
-    ASSET="$ASSET-x64"
-elif [[ "$(uname -m)" == "arm64"* ]]; then
-    ASSET="$ASSET-arm64"
-fi
-
 curl -sLO "https://github.com/tailwindlabs/tailwindcss/releases/download/v3.4.17/${ASSET}"
-chmod +x $ASSET
+mv ${ASSET} tailwindcss
-mv $ASSET tailwindcss
+chmod +x tailwindcss
 
-
+# Ensure correct config
-# initialized and configures tailwind if not configured
+if [[ ! -f "tailwind.config.js" ]]; then
-echo "Initializing tailwind..."
+  echo "⚙️ Creating tailwind.config.js"
-if [[ ! -f "tailwind.config.js" ]]
+  echo "module.exports = {
-then
+  content: ['./templates/**/*.html'],
-    ./tailwindcss init
+  theme: { extend: {} },
-    sed -i '' "s|  content: \\[\\],|  content: \\['./templates/**/*.html'\\],|g" tailwind.config.js
+  plugins: [],
+}" > tailwind.config.js
 fi
 
-# compiles tailwind css for prod & builds project
+# Build Tailwind CSS
-echo "Compiling tailwindcss and building zola project..."
+echo "🎨 Building Tailwind CSS..."
-rm -rf public static/css
+./tailwindcss -i css/index.css -o static/css/index.css --minify
-./tailwindcss -i css/index.css -o ./static/css/index.css --minify
+
-zola --root $ABS_DIR_OF_SCRIPT build
+if [[ ! -f "static/css/index.css" ]]; then
+  echo "❌ Tailwind CSS not generated."
+  exit 1
+fi
+
+echo "✅ Tailwind CSS built at static/css/index.css"
+
+# Build Zola site
+echo "🏗  Building site with Zola..."
+zola build
+
+# Final check
+if [[ -f "public/css/index.css" ]]; then
+  echo "✅ CSS successfully copied to public/"
+else
+  echo "❌ CSS NOT copied to public/. Check Zola static settings."
+fi

config.toml

@@ -1,5 +1,5 @@
 # The URL the site will be built for
-base_url = "https://www2.mycelium.threefold.io/"
+base_url = "https://www3.mycelium.threefold.io/"
 # Change this to your own URL! Please note this variable **must** be uncommented .
 
 title = "Mycelium"

content/_index.md

@@ -5,8 +5,8 @@ description: "Mycelium is a decentralized networking and storage solution design
 #updated: 2021-02-20T14:40:00-06:00
 draft: false
 extra:
-  author: Mycelium
+  author: ThreeFold
-  imgPath: home/mycel2.png
+  imgPath: home/tf.png
 ---
 
 

content/home/index.md

@@ -3,7 +3,7 @@ title: "Mycelium"
 description: "Mycelium is a decentralized networking and storage solution designed to integrate seamlessly with AI workloads, content delivery, and messaging." 
 insert_anchor_links: "left"
 extra:
- author: Mycelium
+ author: ThreeFold
  imgPath: home/mycel2.png
 ---
 

css/code.css

@@ -1,94 +0,0 @@
-code.language-html,
-code.language-css,
-code.language-md,
-code.language-cmd,
-code.language-bash,
-code.language-text,
-code.language-js,
-span.o,
-span.nx {
-  color: rgb(255, 255, 255);
-  line-height: 1.4;
-}
-span.c {
-  color: hsl(120, 100%, 20%);
-}
-
-.active {
-  color: #2E83FF;
-}
-
-span.p,
-span.s1,
-span.s2,
-span.nt {
-  color: hsl(40, 100%, 30%);
-}
-
-span.gs,
-span.gh,
-span.ge {
-  color: hsl(208, 100%, 50%);
-}
-
-span.gs {
-  font-weight: bold;
-}
-
-span.ge {
-  font-style: italic;
-}
-
-pre,
-code {
-  @apply font-mono;
-}
-
-code {
-  background-color: hsl(0, 0%, 98%);
-  border-radius: 3px;
-  color: hsl(120, 100%, 20%);
-  font-size: 85%;
-}
-
-pre {
-  margin: 0;
-  margin: 0;
-  padding: 1rem;
-  overflow: scroll;
-}
-
-pre code {
-  background-color: transparent;
-  color: inherit;
-  font-size: 100%;
-  padding: 0;
-}
-
-.highlight {
-  background-color: transparent;
-  border-radius: 3px;
-  margin: 0 0 0.5rem;
-  padding: 0;
-
-  & pre {
-    margin-bottom: 0;
-    overflow-x: auto;
-  }
-
-  & .lineno {
-    color: hsla(0, 0%, 67%, 0.72);
-    display: inline-block; /* Ensures the null space also isn't selectable */
-    padding: 0 0.75rem 0 0.25rem;
-    /* Make sure numbers aren't selectable */
-  }
-}
-
-/* TODO: dark theme for future
-@media (prefers-color-scheme: dark) {
-  code {
-    color: #fff;
-    background: hsl(200, 63%, 15%);
-  }
-}
-*/

css/index.css

@@ -1,10 +1,7 @@
-/*! purgecss start ignore */
+
-/* @import "nav.css"; */
-@import "code.css";
-/*! purgecss end ignore */
 
 @import "tailwindcss/base";
-
+@import "layout.css";
 @import "tailwindcss/components";
 @import "admonition.css";
 @import "tailwindcss/utilities";
@@ -74,10 +71,6 @@ body.dark-mode .icon {
   fill: #ffffff !important;
 }
 
-body.dark-mode .card {
-  background-color: rgba(82, 82, 82, 50%) !important;
-}
-
 body.dark-mode .dropdown a{
   @apply
   px-0
@@ -110,6 +103,20 @@ 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"] {
@@ -202,18 +209,63 @@ a img:hover{
   text-white
 }
 
-.footer-cust a{
+.subtitle {
+  background-color:#58CF77 !important;
+  color: #fff !important;
+  text-transform: uppercase;
+  /* font-weight: 600 !important;  */
+}
 
+.green{
+
+  background-color:#58CF77 !important;
+  color: #fff !important;
+
+}
+
+.green:hover {
+background-color:#7ad993 !important;
+}
+.green a{
+   color: #fff !important;
+}
+
+.green:hover {
+background-color:#7ad993 !important;
+}
+
+.green_text{
+color: #58CF77 ;
+}
+
+
+  .blue_b{
+
+  background-color:#2E83FF !important;
+  color: #fff !important;
+
+}
+.blue_b a{
+   color: #fff !important;
+}
+
+.blue_b:hover {
+background-color:#5596f5 !important;
+}
+
+
+.footer-cust a{
+  color: #999; 
   cursor: pointer;
 }
 
 .footer-cust a:hover {
-  color: #a3a3a3; 
+  color: #c7c7c7; 
 }
 
-/* .footer-cust h6{
+.footer-cust h6{
   margin-bottom: 15px;
-} */
+}
 
 .logo_size{
   width:200px
@@ -278,18 +330,18 @@ a img:hover{
 
 @layer components {
   h1 {
-    @apply text-4xl font-semibold tracking-tight lg:text-6xl;
+    @apply text-4xl lg:text-6xl font-normal;
     font-family: "Inter", sans-serif !important;
   }
   h2 {
-    @apply  lg:text-5xl text-4xl font-medium tracking-tight leading-none;
+    @apply text-3xl lg:text-4xl my-4 font-normal leading-none;
     font-family: "Inter", sans-serif !important;
   }
   h2 strong {
     @apply font-semibold;
   }
   h3 {
-    @apply lg:text-4xl text-3xl font-normal tracking-tight;
+    @apply text-2xl lg:text-3xl my-4 font-extralight;
     font-family: "Inter", sans-serif !important;
   }
   h3 strong {
@@ -406,6 +458,11 @@ a img:hover{
     font-family: "Inter", sans-serif;
   }
 
+
+/* button:hover :is(:where(a)) {
+  color: #5e5e5e;
+} */
+
 button :is(:where(p)) {
   color: #ddd;
   font-weight: 400;
@@ -584,6 +641,7 @@ header {
 .post-content-text h2 {
   font-family: "Inter", sans-serif;
   line-height: 1.5;
+  font-size: 2.25rem;
   font-weight: 700;
 }
 .container-fluid {
@@ -597,8 +655,12 @@ header {
 .zola-anchor {
   display: none;
 }
+@media (min-width: 1024px){
+  h2 {
+    font-size: 3.5rem;
+  } 
   
-
+}
 
 @media (max-width: 1024px) {
 

css/index.css.bak

@@ -0,0 +1,743 @@
+
+
+@import "tailwindcss/base";
+@import "layout.css";
+@import "tailwindcss/components";
+@import "admonition.css";
+@import "tailwindcss/utilities";
+@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,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');
+
+/* Defaul lightMode */
+body {
+  background-color: #ffffff;
+  color: #000000;
+}
+
+body .semigray {
+  
+  color: #424242 !important;
+}
+
+body .semigray2 {
+  
+  color: #424242 !important;
+}
+
+body .nav a {
+  color: #333333 !important;
+}
+
+body .dropdown a{
+  @apply
+  px-0
+  text-black
+}
+
+body .dropdown{
+  background-color: rgb(255 255 255 / 100%);
+  color: #121212;
+}
+
+body .d_menu {
+  background-color: #e5e5e5;
+}
+
+body .icon {
+  
+  fill: #424242 !important;
+}
+
+/* Dark Mode */
+body.dark-mode {
+  background-color: #121212;
+  color: #ffffff;
+}
+
+body.dark-mode .nav a {
+  color: #ffffff !important;
+}
+
+body.dark-mode .semigray {
+  color: #e5e7eb !important;
+}
+
+body.dark-mode .semigray2 {
+  color: #d1d5db !important;
+}
+
+body.dark-mode .icon {
+  fill: #ffffff !important;
+}
+
+body.dark-mode .dropdown a{
+  @apply
+  px-0
+  text-white
+}
+
+body.dark-mode .dropdown{
+  background-color: rgb(0 0 0 / 50%);
+  color: #fff;
+}
+
+body.dark-mode .d_menu {
+  background-color: rgba(34 34 34);
+}
+
+
+
+
+
+/* Custom CSS for header partial */
+.backdrop-blur {
+  -webkit-backdrop-filter: blur(40px);
+}
+
+* {
+  font-family: "Inter", sans-serif;
+}
+
+.bg-semi-white {
+  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"] {
+  margin: auto;
+}
+
+img[src*="#small"] {
+  width: 68px;
+}
+
+img[src*="#medium"] {
+  width: 400px;
+  margin: auto;
+}
+
+img[src*="#logo"] {
+  max-width: min(250px, 100%);
+  margin: auto;
+}
+
+img[src*="#icon"] {
+  width: 200px;
+  margin: auto;
+}
+
+img[src*="#social"] {
+  width: 60px;
+  margin: auto;
+}
+
+img[src*="#semilarge"] {
+  width: 500px;
+  margin: auto;
+}
+
+img[src*="#large"] {
+  width: 700px;
+  margin: auto;
+}
+
+img[src*="#tft_img"] {
+  width: 100px;
+  margin: auto;
+}
+
+img[src*="#absolute"] {
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+a img:hover{
+  opacity: 0.5 !important;
+  cursor: pointer;
+}
+
+/* new theme */
+
+.dropdown { 
+
+  background-color: rgb(0 0 0 / 50%);
+  @apply
+  lg:text-lg
+  px-6
+  py-1
+  lg:mr-5
+  my-3
+  shadow
+  border-black
+  capitalize 
+  leading-6 
+  border-transparent 
+  flex 
+  flex-col
+  border-2 
+  w-full 
+  items-start
+  rounded 
+  transition  
+  hover:border-stone-700 
+  /* hover:bg-stone-100  */
+  p-2 
+  text-left
+  text-white
+}
+
+.dropdown a{
+  @apply
+  px-0
+  text-white
+}
+
+.subtitle {
+  background-color:#58CF77 !important;
+  color: #fff !important;
+  text-transform: uppercase;
+  /* font-weight: 600 !important;  */
+}
+
+.green{
+
+  background-color:#58CF77 !important;
+  color: #fff !important;
+
+}
+
+.green:hover {
+background-color:#7ad993 !important;
+}
+.green a{
+   color: #fff !important;
+}
+
+.green:hover {
+background-color:#7ad993 !important;
+}
+
+.green_text{
+color: #58CF77 ;
+}
+
+
+  .blue_b{
+
+  background-color:#2E83FF !important;
+  color: #fff !important;
+
+}
+.blue_b a{
+   color: #fff !important;
+}
+
+.blue_b:hover {
+background-color:#5596f5 !important;
+}
+
+
+.footer-cust a{
+  color: #999; 
+  cursor: pointer;
+}
+
+.footer-cust a:hover {
+  color: #c7c7c7; 
+}
+
+.footer-cust h6{
+  margin-bottom: 15px;
+}
+
+.logo_size{
+  width:200px
+}
+
+
+.nav p > a {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  align-items: flex-start;
+  text-align: left;
+  line-height: 1.5rem;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+  border-radius: 0.25rem;
+  border-width: 2px;
+  border-color: transparent;
+  padding: 0.5rem;
+  margin-top: 0.75rem;
+  margin-bottom: 0.75rem;
+  display: inline-block;
+  border-width: 2px;
+  border-color: rgb(0 0 0 / var(--tw-border-opacity));
+  padding-left: 3rem;
+  padding-right: 3rem;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  text-transform: capitalize;
+  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+}
+
+.nav p > a:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(231 229 228 / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(245 245 244 / var(--tw-bg-opacity));
+}
+
+.big_header{
+  font-size: 6rem !important;
+  font-weight: 500 !important;
+}
+
+.mycard{
+  height: 300px !important;
+}
+
+
+.mypartners{
+  height: 300px !important;
+
+}
+
+.key_card{
+
+  height: 250px;
+
+}
+
+
+@layer components {
+  h1 {
+    @apply text-4xl lg:text-6xl font-normal;
+    font-family: "Inter", sans-serif !important;
+  }
+  h2 {
+    @apply text-3xl lg:text-4xl my-4 font-normal leading-none;
+    font-family: "Inter", sans-serif !important;
+  }
+  h2 strong {
+    @apply font-semibold;
+  }
+  h3 {
+    @apply text-2xl lg:text-3xl my-4 font-extralight;
+    font-family: "Inter", sans-serif !important;
+  }
+  h3 strong {
+    @apply font-normal;
+  }
+  h4 {
+    @apply text-xl lg:text-2xl font-normal tracking-wider;
+    font-family: "Inter", sans-serif !important;
+    
+  }
+  h5 {
+    @apply text-lg my-1 tracking-normal font-medium;
+    font-family: "Inter", sans-serif !important;
+   
+  }
+  h6 {
+    @apply text-md not-italic font-normal my-1;
+    font-family: "Inter", sans-serif !important;
+  }
+  p {
+    @apply text-lg;
+   
+    font-family: "Inter", sans-serif !important;
+  }
+  blockquote {
+    @apply border-l-4 border-gray-400 mx-2 my-2 p-2;
+  }
+  li {
+    @apply text-base lg:text-base font-normal;
+  }
+  li li {
+    @apply text-sm lg:text-sm font-light;
+  }
+  button {
+    @apply 
+    inline-block
+    md:text-md
+    text-sm
+    lg:mr-3
+    py-1
+    my-2
+    border
+    rounded
+    shadow
+    border-gray-400
+    capitalize
+    bg-gray-200
+  }
+  .my-header h4{
+    color:#9f9f9f;
+
+  }
+
+  h3 a{
+    color:#ffffff;
+
+  }
+
+  h3 a:hover{
+    color:#b6b6b6;
+
+  }
+  
+ 
+ 
+
+
+  .article h2{
+    font-size: 2.25rem;
+    font-family: "Inter", sans-serif;
+    line-height: 1.5;
+    font-weight: 700;
+    color:#e2e2e2;
+  }
+  
+  .article h1{
+    font-family: "Inter", sans-serif;
+  }
+
+  }
+  .article p{
+    font-size: 1.125rem;
+    font-family: "Inter", sans-serif;
+    line-height: 1.7;
+    color:#e2e2e2
+  }
+  
+  .post-content-text a, .article a{
+    color: #a5a5a5;
+  }
+  
+  .post-content-text a:hover, .article a:hover{
+    color: #c6c9c8;
+  }
+
+  .article li{
+    font-size: 1.125rem;
+    font-family: "Inter", sans-serif;
+    line-height: 1.7;
+    color:#e2e2e2
+  }
+
+  .article h3{
+    font-weight: 400;
+   
+  }
+
+  .article h4{
+    color: #fff !important;
+   
+  }
+
+  .main-title {
+    font-family: "Inter", sans-serif;
+  }
+
+
+/* button:hover :is(:where(a)) {
+  color: #5e5e5e;
+} */
+
+button :is(:where(p)) {
+  color: #ddd;
+  font-weight: 400;
+}
+
+button a {
+  line-height: 1.3;
+  @apply
+  text-black
+  px-8
+}
+
+.long-text a{
+  padding-left: 2rem;
+  padding-right: 2rem;
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+}
+
+a {
+  border-width: 0px;
+}
+
+header {
+  font-family: "Inter", sans-serif;
+}
+
+.nav_btn {
+  margin: 0 !important;
+  border: none !important;
+  box-shadow: none !important;
+}
+
+.quicklinks {
+  box-sizing: border-box;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: auto;
+  margin: 0 auto;
+  border-radius: 10px;
+  margin-top: 30px;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-bottom: 20px;
+}
+.quicklinks img {
+  height: auto;
+  max-width: 200px;
+  display: inline-block;
+  padding: 10px;
+  -webkit-filter: grayscale(100%);
+  filter: grayscale(100%);
+  position: relative;
+  
+  -webkit-transition: all 0.2s ease;
+  transition: all 0.2s ease;
+  opacity: 0.5;
+}
+
+.quicklinks img:hover {
+  opacity: 1;
+  -webkit-transition: all 0.2s ease;
+  transition: all 0.2s ease;
+  -webkit-filter: grayscale(0%);
+  filter: grayscale(0%);
+}
+
+
+.banner {
+  width: 100%;
+  margin: 0;
+  padding: 120px 0;
+  text-align: center;
+  position: relative;
+  display: block;
+  color: #fff !important;
+  letter-spacing: 0.5px;
+  overflow: hidden;
+  background: #00838d;
+  transition: 1.5s;
+}
+
+.header {
+  height: auto;
+  background: none;
+  padding: 200px 0;
+}
+
+.banner h2,
+.header h1 {
+  margin: auto;
+  color: #fff;
+  position: relative;
+  transition: 0.3s;
+  z-index: 1;
+  white-space: nowrap;
+}
+
+.header h1 {
+  color: #000;
+  transition: none;
+}
+
+.banner h2 svg {
+  font-size: 40px;
+  margin-left: 15px;
+  position: absolute;
+  top: 55%;
+  transform: translateY(-50%) scale(0.5);
+  opacity: 0;
+  transition: 0.3s;
+}
+
+.banner .back {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-position: center;
+  background-size: cover;
+  filter: grayscale(1) contrast(1.4);
+  opacity: 0.25;
+  transition: 1.5s;
+}
+
+.header .back {
+  filter: none;
+  opacity: 1;
+  background-position: center;
+
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+
+.banner:hover {
+  background: #4b3a92;
+}
+
+.header:hover {
+  background: none;
+}
+
+.banner:hover h2 svg {
+  transform: translateY(-50%) scale(1);
+  opacity: 1;
+}
+
+.banner:hover h2 {
+  padding-right: 40px;
+}
+
+.header:hover h1 {
+  padding-right: 0;
+}
+
+.banner:hover .back {
+  transform: scale(1.03);
+}
+
+.header:hover .back {
+  transform: none;
+}
+
+.my-test{
+  font-family: "Inter", sans-serif;
+} 
+.post-content-text .my-test  {
+  font-family: "Inter", sans-serif;
+  line-height: 1.7;
+}
+
+.post-content-text h2 {
+  font-family: "Inter", sans-serif;
+  line-height: 1.5;
+  font-size: 2.25rem;
+  font-weight: 700;
+}
+.container-fluid {
+  width: 100%;
+  /* padding-right: 15px;
+  padding-left: 15px; */
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.zola-anchor {
+  display: none;
+}
+@media (min-width: 1024px){
+  h2 {
+    font-size: 3.5rem;
+  } 
+  
+}
+
+@media (max-width: 1024px) {
+
+  .mycard{
+    height: auto !important;
+  }
+
+}
+
+@media (max-width: 640px) {
+  .banner h2 {
+    font: 600 7vw/10vw;
+  }
+
+  .header h1 {
+    font-size: 35px;
+  }
+
+  .banner h2 svg {
+    font-size: 30px;
+  }
+  .arrow img{
+    -moz-transform:rotate(90deg);
+   -webkit-transform:rotate(90deg);
+   -ms-transform:rotate(90deg);
+   transform: rotate(90deg);   
+   }
+
+   .mycard{
+    height: auto !important;
+  }
+}
+
+@media (max-width: 480px) {
+  .banner,
+  .header {
+    padding: 80px 0;
+  }
+
+  .article h2{
+    font-size: 1.5rem;
+  }
+
+  img[src*="#medium"] {
+    width: 250px;
+    margin: auto;
+  }
+
+  img[src*="#sm_none"] {
+    display: none;
+  }
+
+  .big_header{
+    font-size: 4rem !important;
+   
+  }
+
+  .mytest{
+    height: auto;
+  }
+
+  .card_h {
+         height: auto !important;
+  }
+
+  .mycard{
+    height: auto !important;
+  }
+
+  .key_card{
+    height: auto;
+  }
+
+  .mypartners{
+    height: auto;
+  
+  }
+  
+}
+

templates/partials/head.html

@@ -5,6 +5,13 @@
 {% set zolaVer = '0.13.0' %}
 <head>
     <link rel="icon" type="image/x-icon" href="{{ get_url(path='images/icons/favicon.png')}}">
+    <!-- Primary CSS link with Zola URL function -->
+    <link rel="stylesheet" href="{{ get_url(path='css/index.css', trailing_slash=false, cachebust=true) | safe }}">
+    
+    <!-- Fallback CSS links in case the Zola URL function doesn't work in production -->
+    <link rel="stylesheet" href="/css/index.css">
+    <link rel="stylesheet" href="https://www3.mycelium.threefold.io/css/index.css">
+    <link rel="stylesheet" href="/index.css">
     {% block title %}
     <title>{{ config.title }}</title>
     <meta property="og:type" content="website">
@@ -99,7 +106,7 @@
     <!-- Windows 8.1 and up, IE 11 -->
     <!-- **** CONCLUSION, favicons **** -->
     <!-- CSS/SCSS -->
-    <link rel="stylesheet" href="{{ get_url(path='css/index.css', trailing_slash=false, cachebust=true) | safe }}">
+    
     <style>
     .space-x-10>:not([hidden])~:not([hidden]){
       margin-left: calc(1.5rem*calc(1 - var(--tw-space-x-reverse)))!important;
@@ -127,27 +134,5 @@
   }
     </style>
     <script type="text/javascript" src="https://platform-api.sharethis.com/js/sharethis.js#property=62556aac80366d0019fc1af2&product=sop" async="async"></script>
-    <!-- MailerLite Universal -->
-    <script>
-    (function (m, a, i, l, e, r) {
-      m['MailerLiteObject'] = e; function f() {
-        var c = { a: arguments, q: [] }; var r = this.push(c); return "number" != typeof r ? r : f.bind(c.q);
-      }
-      f.q = f.q || []; m[e] = m[e] || f.bind(f.q); m[e].q = m[e].q || f.q; r = a.createElement(i);
-      var _ = a.getElementsByTagName(i)[0]; r.async = 1; r.src = l + '?v' + (~~(new Date().getTime() / 1000000));
-      _.parentNode.insertBefore(r, _);
-    })(window, document, 'script', 'https://static.mailerlite.com/js/universal.js', 'ml');
 
-    var ml_account = ml('accounts', '1778010', 'x2d3d9f8n1', 'load');
-  </script>
-  <!-- End MailerLite Universal -->
-  <!-- RSS feed -->
-  {% block rss %}
-  <link
-      rel="alternate"
-      type="application/rss+xml"
-      title="RSS"
-      href="{{ get_url(path='atom.xml', trailing_slash=false) }}"
-  >
-  {% endblock %}
 </head>

templates/partials/header.html

@@ -259,7 +259,7 @@
 }
 
 .active{
-  color: rgb(144 143 143) !important
+  color: rgb(100, 100, 100) !important;
 }
 .nav_btn:hover {
   color: #c7c7c7 !important;