add active class

content/buildold/index.md

@@ -0,0 +1,190 @@
+---
+title: "Build"
+template: "page.html"
+insert_anchor_links: "left"
+---
+
+{% row(style="center mbottom narrow") %}
+
+## Limitless **Possibilities**
+
+Today's centralized Internet cannot keep up with the demands of our digital world. ThreeFold's decentralized and autonomous infrastructure benefits a wide range of current and emerging workloads.
+
+<br>
+
+![Image](possibilities.png#mx-auto)
+
+{% end %}
+
+<!-- section 1  -->
+
+{% row(style="center margin narrow") %}
+
+![](developet_tft.jpg#medium)
+
+
+## The Next Generation of <br> **Cloud Computing**
+
+Deploy any workload with unprecedented security, scalability, and efficiency, on a fully comprehensive peer-to-peer digital infrastructure. Discover a cloud like no other.
+
+<br>
+
+<button>[Dashboard](https://dashboard.grid.tf)</button>
+<button>[Playground](https://play.grid.tf)</button>
+<button>[Manual](https://library.threefold.me/info/manual/#/manual__manual3_home_new)
+<button>[Grid Chat](https://t.me/threefoldtesting)</button>
+
+{% end %}
+
+<!-- section 2  -->
+
+{% row(style="center mbottom") %}
+
+![storage](storage.jpg#medium)
+
+### **Storage**
+
+Plug in standard tools and protocols to the most resilient and versatile storage system ever created, or access raw disk on the location of your choice.
+
+<button> [Learn More](https://library.threefold.me/info/threefold#/technology/qsss/threefold__qsss_home) </button>
+
+|||
+
+![compute](compute.jpg#medium)
+
+### **Compute**
+
+Native support for containers and virtual machines. Migrate existing applications effortlessly or build from scratch in a cutting-edge computing environment.
+
+<button>[Learn More](https://library.threefold.me/info/manual/#/manual__weblets_home)</button>
+
+|||
+
+![network](network.jpg#medium)
+
+### **Network**
+
+Private overlay networks and global end-to-end encryption minimize attack surface. Handle inbound traffic with uniquely secure web gateways.
+
+
+<button>[Learn More](https://library.threefold.me/info/manual/#/cloud/threefold__planetary_network)</button>
+
+{% end %}
+
+<!-- section 3  -->
+
+{% row(style="center mtop narrow") %}
+
+## Designed for <br> **Demanding Workloads**
+
+{% end %}
+
+{% row(style="center between") %}
+
+![Image](capacity.png#medium)
+
+<br/>
+
+### **Edge Capacity**
+
+Achieve low latencies and bandwidth efficiency by reserving capacity locally.
+
+|||
+
+![Image](secure.png#medium)
+
+<br/>
+
+### **Secure**
+
+Open-source system built from the ground-up for a fully transparent and auditable stack.
+
+|||
+
+![Image](scalable.png#medium)
+
+<br/>
+
+### **Scalable**
+
+An autonomous infrastructure that grows naturally with demand, where and when it is needed.
+
+|||
+
+![Image](effecient.png#medium)
+
+<br/>
+
+### **Efficient**
+
+A carefully designed collection of lightweight components that minimize overheads.
+
+{% end %}
+
+<!-- section 4 -->
+
+{% row(style="center mbottom narrow") %}
+
+<button>[Learn More](https://library.threefold.me/info/threefold#/cloud/threefold__cloud_home)</button>
+
+{% end %}
+
+{% row(style="center mtop narrow") %}
+
+## Explore **What's Possible**
+
+Build in a truly decentralized environment on the ThreeFold Grid. A sandbox of limitless possibilities awaits for the open source builders of a decentralized tomorrow.
+
+{% end %}
+
+{% row(style="center mtop between") %}
+
+[![virtual machine](virtual_machine.png#mx-auto)](https://library.threefold.me/info/manual/#/manual__weblets_vm)
+
+|||
+
+[![kubernetes](kubernetes.png#mx-auto)](https://library.threefold.me/info/manual/#/manual__weblets_k8s)
+
+|||
+
+[![terraform](terraform.png#mx-auto)](https://library.threefold.me/info/manual/#/manual__manual3_iac_home)
+
+{% end %}
+
+{% row(style="center mbottom between") %}
+
+[![weblets](weblets.png#mx-auto)](https://library.threefold.me/info/manual/#/manual__weblets_home)
+
+|||
+
+[![quantum safe storage](qss.png#mx-auto)](https://library.threefold.me/info/manual/#/technology/qsss/threefold__qsss_home)
+
+|||
+
+[![planetary network](planetary_network.png#mx-auto)](https://library.threefold.me/info/manual/#/cloud/threefold__planetary_network)
+
+{% end %}
+
+<!-- section 5 -->
+
+{% cloud_stats() %}
+
+## A Global **Edge Infrastructure**
+
+{% end %}
+
+<!-- section 6 -->
+
+{% row(style="center margin narrow") %}
+
+## Learn **More**
+
+Dive into more resources and join the open-source movement building a better digital future.
+
+<br>
+
+<button>[Developer Resources](/developer)</button>
+<button>[Manual](https://manual.grid.tf)</button>
+<button>[Grid Chat](https://t.me/threefoldtesting)</button>
+
+{% end %}

css/code.css

@@ -14,6 +14,10 @@ span.c {
   color: hsl(120, 100%, 20%);
 }
 
+.active {
+  color: #3d7200;
+}
+
 span.p,
 span.s1,
 span.s2,

templates/partials/header.html

@@ -34,16 +34,24 @@
                 {% if '<a' in header_label %}
                     {% set link_label = header_label | striptags %}
                     {% set link_path = header_label | split(pat="%22") | safe%}
+                    {% set current = get_url(path=link_path[1]) ~ "/" %}
                     {% if header_label is containing("http") %}
                         {% if header_label is not containing("threefold") %}
                         <a href="{{link_path[1]}}" target="_blank" class="text-lg leading-6 font-medium text-gray-900 hover:text-gray-500 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
                             {{link_label}}
                         </a>
                         {% endif %}
+
+                    {% elif current == current_url %}
+                    <a href="{{ get_url(path=link_path[1])}}" class="text-lg leading-6 font-medium active hover:text-gray-500 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
+                      {{ link_label }}
+                    </a>
+
                     {% else %}
                     <a href="{{ get_url(path=link_path[1])}}" class="text-lg leading-6 font-medium text-gray-900 hover:text-gray-500 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
-                      {{link_label}}
+                      {{ link_label }}
                     </a>
+   
                     {% endif %}
                 {% else %}
                     <div class="relative">