update token page

content/header/index.md

@@ -11,6 +11,7 @@ extra:
 - [Deploy]("/deploy")
 - [Host]("/host")
 - [Utilization]("/utilization")
+- [TFT]("/tft")
 - [News]("/newsroom")
 - [Blog]("/blog")
 - [People]("/people")

content/tft/index.md

@@ -0,0 +1,211 @@
+---
+title: "TFT"
+description: "About a decade ago, a group of passionate Internet & Cloud veterans came together to build a system." # quotation marks to allow colons where used
+template: "page.html"
+insert_anchor_links: "left"
+extra:
+  author: Your name here
+  imgPath: tfy/tft_header.png
+---
+
+<!-- section 1 (header) -->
+<div class="container mx-auto">
+
+{% row(style="header") %} 
+
+<h1 class="leading-none font-semibold"> All Transactions Use One Token: <span class="blue">TFT</span></h1>
+
+#### <span class="blue">No Intermediaries</span>
+
+<br>
+
+Whether you are hosting the cloud or deploying solutions on the Grid you will earn or use TFT. 
+
+
+<br>
+
+<button class="green">[Get A Node](https://marketplace.3node.global/?sl=en)</button> 
+<button class="blue_b">[How To Buy TFT](https://manual.grid.tf/documentation/threefold_token/buy_sell_tft/buy_sell_tft.html)</button>
+
+|||
+
+![Image](tft_header.png#mx-auto)
+
+{% end %}
+
+</div>
+
+
+
+<!-- section 2 arming Process -->
+
+
+<div style="background-color:#F6F6F6">
+
+<div class="container mx-auto">
+
+
+{% row( style="mtop semiNarrow") %}
+
+### **<span class="green_text font-semibold">EARN TFT**</span>
+
+## **The Farming Process**
+
+#### <span class="blue">Host The Cloud </span> And Become A ThreeFold Farmer.
+
+{% end %}
+
+<br>
+
+{% row( style="center semiNarrow") %}
+
+![Image](step1.png#mx-auto)
+
+<br>
+
+**Set up and connect a node to the ThreeFold Grid.**
+
+|||
+
+<div class="arrow">
+
+![Image](arrow_right2.png#mx-auto)
+
+</div>
+
+|||
+
+![Image](step2.png#mx-auto)
+
+<br>
+
+**Your node and its capacity is verified by the ThreeFold blockchain.**
+
+|||
+
+<div class="arrow">
+
+![Image](arrow_right2.png#mx-auto)
+
+</div>
+
+|||
+
+![Image](step3.png#mx-auto)
+
+<br>
+
+**Earn TFT for the uptime and capacity you provide to the Grid.**
+
+{% end %}
+
+<br>
+
+{% row( style="mbottom center semiNarrow") %}
+
+<button class="green">[Dive Deeoper](https://manual.grid.tf/documentation/farmers/farmers.html)</button> 
+
+{% end %}
+
+</div>
+
+</div>
+
+
+
+
+<!-- section 3 Utilization Process -->
+
+<div class="container mx-auto">
+
+{% row( style="mtop semiNarrow") %}
+
+### **<span class="green_text font-semibold">USE TFT**</span>
+
+## **The Utilization Process**
+
+#### <span class="blue">Access  </span> ThreeFold Grid Capacity and <span class="blue">Build</span>
+
+{% end %}
+
+<br>
+
+{% row( style="center narrow") %}
+
+![Image](step3.png#mx-auto)
+
+<br>
+
+**Users pay utilization fees (using TFT) to use compute, storage and network capacity.**
+
+|||
+
+<div class="arrow">
+
+![Image](arrow_right2.png#mx-auto)
+
+</div>
+
+|||
+
+![Image](capacity_2.png#mx-auto)
+
+<br>
+
+**They can then use this capacity to build or deploy on top of the ThreeFold Grid.**
+
+
+{% end %}
+
+<br>
+
+{% row( style="mbottom center semiNarrow") %}
+
+<button class="green">[Dive Deeoper](https://manual.grid.tf/knowledge_base/cloud/cloud_toc.html)</button> 
+
+{% end %}
+
+</div>
+
+
+
+
+
+
+<style>
+
+.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;
+}
+ 
+</style>

css/index.css

@@ -8,9 +8,7 @@
 @import "tailwindcss/components";
 @import "admonition.css";
 @import "tailwindcss/utilities";
-@import url("https://fonts.googleapis.com/css2?family=Ubuntu&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap");
+@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');
 
 /* Custom CSS for header partial */
 .backdrop-blur {
@@ -93,9 +91,7 @@ a img:hover{
   width:200px
 }
 
-h1 {
-  line-height: 3rem;
-}
+
 .blue{
   color:#2E83FF
 }
@@ -154,10 +150,12 @@ h1 {
   h1 {
     @apply text-4xl lg:text-6xl font-normal;
     color: #2b2b2b;
+    font-family: "Lato", sans-serif !important;
   }
   h2 {
     @apply text-3xl lg:text-4xl my-4 font-normal leading-none;
     color: #2b2b2b;
+    font-family: "Lato", sans-serif !important;
   }
   h2 strong {
     @apply font-semibold;
@@ -165,22 +163,27 @@ h1 {
   h3 {
     @apply text-2xl lg:text-3xl my-4 font-extralight;
     color: #2b2b2b;
+    font-family: "Lato", sans-serif !important;
   }
   h3 strong {
     @apply font-normal;
   }
   h4 {
     @apply text-xl lg:text-2xl font-normal;
+    font-family: "Lato", sans-serif !important;
   }
   h5 {
     @apply text-lg my-1 tracking-normal font-semibold;
+    font-family: "Lato", sans-serif !important;
   }
   h6 {
     @apply text-md not-italic font-normal my-1;
+    font-family: "Lato", sans-serif !important;
   }
   p {
     @apply text-lg;
     color: #3d3d3d;
+    font-family: "Lato", sans-serif !important;
   }
   blockquote {
     @apply border-l-4 border-gray-400 mx-2 my-2 p-2;
@@ -226,20 +229,20 @@ h1 {
 
   .article h2{
     font-size: 2.25rem;
-    font-family: Lato,sans-serif!important;
+    font-family: "Lato", sans-serif;
     line-height: 1.5;
     font-weight: 700;
     color:#333;
   }
   
   .article h1{
-    font-family: Lato,sans-serif!important;
+    font-family: "Lato", sans-serif;
   }
 
   }
   .article p{
     font-size: 1.125rem;
-    font-family: Lato,sans-serif!important;
+    font-family: "Lato", sans-serif;
     line-height: 1.7;
     color:#333
   }
@@ -256,7 +259,7 @@ h1 {
     font-size: 1rem;
   }
   .main-title {
-    font-family: Lato,sans-serif!important;
+    font-family: "Lato", sans-serif;
   }
 
 
@@ -288,7 +291,7 @@ a {
 }
 
 header {
-  font-family: "Work Sans";
+  font-family: "Lato", sans-serif;
 }
 
 .nav_btn {
@@ -432,15 +435,15 @@ header {
 }
 
 .my-test{
-  font-family: "Work Sans", sans-serif !important;
+  font-family: "Lato", sans-serif;
 } 
 .post-content-text .my-test  {
-  font-family: "Work Sans", sans-serif !important;
+  font-family: "Lato", sans-serif;
   line-height: 1.7;
 }
 
 .post-content-text h2 {
-  font-family: Lato,sans-serif!important;
+  font-family: "Lato", sans-serif;
   line-height: 1.5;
   font-size: 2.25rem;
   font-weight: 700;
@@ -473,6 +476,12 @@ header {
   .banner h2 svg {
     font-size: 30px;
   }
+  .arrow img{
+    -moz-transform:rotate(90deg);
+   -webkit-transform:rotate(90deg);
+   -ms-transform:rotate(90deg);
+   transform: rotate(90deg);   
+   }
 }
 
 @media (max-width: 480px) {

templates/_default/base.html

@@ -45,7 +45,7 @@
   <div id="content" class="px-4 lg:px-0 pt-12 overflow-hidden">
     {% block content %}{% endblock %}
   </div>
-  <div class="p-8">
+  <div class="px-4 md:px-8">
     {% include "partials/footer.html" %}
   </div>
   <script type="text/javascript" src="{{ get_url(path='js/custom.js')}}"></script>

templates/partials/footer.html

@@ -8,9 +8,9 @@
 
 <html>
     <head /><body>
-        <div class="mt-6 border-t border-gray-200 pt-2"></div>
+        <div class="mt-20 border-t border-gray-200"></div>
         <footer class="bg-white">
-          <div class="max-w-screen-2xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
+          <div class="max-w-screen-2xl mx-auto py-12 px-4 sm:px-6">
             <div class="xl:flex xl:gap-4">
               <div class="space-y-8 lg:max-w-sm xl:max-w-sm lg:mr-8 lg:mb-8 xl:col-span-1">
                 <img class="w-16 h-auto sm:w-15" src="{{ get_url(path=logoPath)}}" alt="ThreeFold Logo" />
@@ -25,7 +25,7 @@
             </div>
               
               </div>
-              <div  class="mt-12 mx-auto border-t border-gray-200 pt-8">
+              <div  class="mt-6 mx-auto border-t border-gray-200 pt-8">
                 <p data-v-14efe4a7="" class="text-base leading-6 text-gray-400 text-center">
                 © <span id="year"></span> ThreeFold, All rights reserved.
                 <a target="_blank" href="https://library.threefold.me/info/legal/#/legal__terms_conditions_websites" class="leading-6 text-gray-500 hover:text-gray-900">Terms &amp; Conditions |