From e1b74cab416e734f87e74e8a5ae17c0623250b21 Mon Sep 17 00:00:00 2001
From: ehab-hassan <hassane@codescalers.com>
Date: Wed, 5 Oct 2022 16:46:51 +0200
Subject: [PATCH] fix tft mobile

---
 content/tft/index.md                 | 59 +++++++---------------------
 css/index.css                        |  7 ++++
 templates/shortcodes/tft_header.html |  4 +-
 templates/shortcodes/tft_links.html  |  4 +-
 4 files changed, 25 insertions(+), 49 deletions(-)

diff --git a/content/tft/index.md b/content/tft/index.md
index 111fcee10..6a2b3420d 100644
--- a/content/tft/index.md
+++ b/content/tft/index.md
@@ -5,25 +5,15 @@ page_template: "tft_header.html"
 insert_anchor_links: "left"
 ---
 
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
-
 <!-- section 1 (be the Internet) -->
 
-{% row(style="center narrow") %}
+{% row(style="center mtop narrow") %}
 
 ## Decentralizing <br>**the Internet Economy**
 
 ThreeFold creates an entirely new decentralized Internet economy that allows anyone to join the world’s fastest growing market – the Internet.
 
-{% end %}
-
-{% row(style="center narrow") %}
+<br>
 
 <button>[Learn About TFT](https://library.threefold.me/info/threefold#/tokens/threefold__tokens_home)</button>
 <button>[Get TFT](https://library.threefold.me/info/threefold#/tokens/threefold__how_to_buy)</button>
@@ -32,6 +22,7 @@ ThreeFold creates an entirely new decentralized Internet economy that allows any
 {% end %}
 
 
+
 {% tft_header() %}
 
 ## **DECENTRALIZING <br>THE INTERNET ECONOMY**
@@ -42,10 +33,7 @@ ThreeFold creates an entirely new decentralized Internet economy that allows any
 
 <!-- section 2 (Meeting Emerging Demand) -->
 
-{% row(style="center ") %}
-
-<br>
-<br>
+{% row(style="center mtop ") %}
 
 ## Meeting **Emerging Demand**
 
@@ -54,7 +42,7 @@ Data has become the most valuable commodity on earth, the Internet infrastructur
 
 {% end %}
 
-{% row(style="center") %}
+{% row(style="center mbottom") %}
 
 ![Image](tft_125zb.png#medium)
 
@@ -77,12 +65,6 @@ That is a number with 21 zeroes!
 {% end %}
 
 
-<br>
-
-<br>
-
-
-
 <!-- section 3 (world of farmers) -->
 
 {% row(style="center between margin") %}
@@ -98,7 +80,7 @@ While many projects have created bits and pieces of what a decentralized Interne
 
 ![Image](tft_table.png#mx-auto)
 
-<button>[How ThreeFold Compares With The Industry ](/blog/2021/10/post-7)</button>
+<button class="long-text text-xs lg:text-xl">[How ThreeFold Compares With The Industry ](/blog/2021/10/post-7)</button>
 
 
 {% end %}
@@ -120,16 +102,11 @@ TFT is a utility token that allows people to hold current and future Internet ca
 
 {% end %}
 
-<br>
-
-<br>
-
-<br>
 
 
 <!-- section 5 (OPEN NETWORK) -->
 
-{% row(style="center narrow") %}
+{% row(style="center narrow mtop") %}
 
 
 ## Open **Network**
@@ -138,7 +115,9 @@ TFT is a utility token that allows people to hold current and future Internet ca
 
 {% end %}
 
-{% row(style="center") %}
+<br>
+
+{% row(style="center mbottom") %}
 
 <!-- | Proof-Of-Capacity     |  |Proof-Of-Utilization  |
 | ----------- | ----------- | ----------- |
@@ -204,7 +183,7 @@ TFT is minted only when new Internet capacity is added to the ThreeFold Grid. A
 
 {% row(style="margin reverse") %}
 
-## Burn and Farm **Equilibrium**
+## Burn and Farm <br>**Equilibrium**
 
 Burning permanently removes TFT from the circulating supply when the ThreeFold Grid gets used. It ensures a positive impact on pricing while ensuring rewards for all current and future nodes.
 
@@ -220,7 +199,7 @@ Burning permanently removes TFT from the circulating supply when the ThreeFold G
 
 <!-- section 9 (partners) -->
 
-{% row(style="center") %}
+{% row(style="center mtop") %}
 
 ## Join the **Movement**
 
@@ -234,25 +213,15 @@ Get TFT today and participate in the realization of a truly decentralized world.
 
 {% end %}
 
-{% row(style="lean") %}
+{% row(style="lean mbottom") %}
 
 ![Image](tft_join_internet.png#mx-auto)
 
-
-
 {% end %}
 
-
-<br>
-
-<br>
-
-<br>
-
-
 <!-- section 10 (partners) -->
 
-{% row(style="center") %}
+{% row(style="center margin") %}
 
 ## **Believers in TFT**
 
diff --git a/css/index.css b/css/index.css
index e299dd14e..e841c90be 100644
--- a/css/index.css
+++ b/css/index.css
@@ -217,6 +217,13 @@ button a {
   px-12
 }
 
+.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;
 }
diff --git a/templates/shortcodes/tft_header.html b/templates/shortcodes/tft_header.html
index b56fc2f67..d1c9b1304 100644
--- a/templates/shortcodes/tft_header.html
+++ b/templates/shortcodes/tft_header.html
@@ -1,8 +1,8 @@
 {% block content %}
 
 <div
-    class="relative pt-12 flex flex-col sm:grid sm:grid-cols-2 sm:gap-10 xl:flex xl:flex-row md:py-2 lg:py-2 lg:items-center text-center mx-auto justify-center">
-    <a class="center" href="https://coinmarketcap.com/currencies/threefold/" target="_blank">
+    class="relative lg:pb-24 pb-10 flex flex-col sm:grid sm:grid-cols-2 sm:gap-10 xl:flex xl:flex-row md:py-2 lg:py-2 lg:items-center text-center mx-auto justify-center">
+    <a class="center pb-4" href="https://coinmarketcap.com/currencies/threefold/" target="_blank">
         {% set link = page.permalink ~ "cointelegraph_logo.png"%}
         <img class="logo_size mx-auto" src="{{link}}" alt="cointelegraph">
     </a>
diff --git a/templates/shortcodes/tft_links.html b/templates/shortcodes/tft_links.html
index 1756513e9..05d79da88 100644
--- a/templates/shortcodes/tft_links.html
+++ b/templates/shortcodes/tft_links.html
@@ -9,13 +9,13 @@
     href="https://library.threefold.me/info/threefold#/tokens/threefold__tft_stellar_dex"
     target="_blank">
     {% set link = page.permalink ~ "stellar_logo.png"%}
-    <img class="py-2 mr-2 px-5 border-2 border-black" src="{{link}}" alt="stellar">
+    <img class="py-2 mr-2 my-2 px-5 border-2 border-black" src="{{link}}" alt="stellar">
 </a>
     <a class="center"
         href="https://pancakeswap.finance/swap?exactField=output&exactAmount=100&outputCurrency=0x8f0FB159380176D324542b3a7933F0C2Fd0c2bbf&inputCurrency=0xe9e7cea3dedca5984780bafc599bd69add087d56?use=v2"
         target="_blank">
         {% set link = page.permalink ~ "pancack_button.png"%}
-        <img class="py-2 mr-2 px-5 border-2 border-black" src="{{link}}" alt="pancakeswap">
+        <img class="py-2 mr-2 my-2 px-5 border-2 border-black" src="{{link}}" alt="pancakeswap">
     </a>
     <a class="center" href="https://app.1inch.io/#/56/swap/BNB/TFT" target="_blank">
         {% set link = page.permalink ~ "iinch_button.png"%}