zola migrate
This commit is contained in:
samaradel
65
templates/shortcodes/admonition.html
Normal file
65
templates/shortcodes/admonition.html
Normal file
@@ -0,0 +1,65 @@
|
||||
<!-- admonition shortcode for adding admonition in md-->
|
||||
|
||||
{% set classes = "" %}
|
||||
|
||||
{% set first_line = body | split(pat="\n") | first %}
|
||||
{% set parsed_first_line = first_line | split(pat=" ") %}
|
||||
{% set admonition = parsed_first_line | first %}
|
||||
{% set style = "" %}
|
||||
|
||||
{% set content = body | split(pat="\n") | slice(start=2) | join(sep="\n") %}
|
||||
|
||||
<!-- sets admonition type depending on qualifiers and modifiers
|
||||
hides content if doesn't adhere to admonition formatting -->
|
||||
{% if admonition == "!!!" %}
|
||||
{% set classes = "admonition" %}
|
||||
{% elif admonition == "???" %}
|
||||
{% set style = "collapsible closed" %}
|
||||
{% set classes = "admonition" %}
|
||||
{% elif admonition == "???+" %}
|
||||
{% set style = "collapsible open" %}
|
||||
{% set classes = "admonition" %}
|
||||
{% else %}
|
||||
{% set classes = "hidden" %}
|
||||
{% endif %}
|
||||
|
||||
{% if "inline end" in first_line %}
|
||||
{% set classes = classes ~ " inline end" %}
|
||||
{% set parsed_first_line = parsed_first_line | slice(end=-2)%}
|
||||
{% elif "inline" in first_line %}
|
||||
{% set classes = classes ~ " inline" %}
|
||||
{% set parsed_first_line = parsed_first_line | slice(end=-1)%}
|
||||
{% endif %}
|
||||
|
||||
{% if classes != "hidden"%}
|
||||
{% if parsed_first_line[1] %}
|
||||
{% set classes = classes ~ " " ~ parsed_first_line[1] %}
|
||||
{% endif %}
|
||||
{% if parsed_first_line[2] %}
|
||||
{% if not parsed_first_line[2] == '""' %}
|
||||
{% set title = parsed_first_line | slice(start=2) | join(sep=" ") %}
|
||||
{% endif %}
|
||||
{% else %}
|
||||
{% if parsed_first_line[1] %}
|
||||
{% set title = parsed_first_line[1] | title %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
|
||||
{% if "collapsible" in style %}
|
||||
<details class="{{classes}}"
|
||||
{% if "open" in style %} {{ "open='open'" }} {% endif %}>
|
||||
{% if title %}
|
||||
<summary class="admonition-title">{{ title | trim_start_matches(pat='"') | trim_end_matches(pat='"') }}</summary>
|
||||
<p>{{ content }}</p>
|
||||
{% endif %}
|
||||
</details>
|
||||
{% else %}
|
||||
<div class="{{classes}}">
|
||||
{% if title %}
|
||||
<div class="admonition-title">{{ title | trim_start_matches(pat='"') | trim_end_matches(pat='"') }}</div>
|
||||
{% endif %}
|
||||
<p>{{ content }}</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
5
templates/shortcodes/button.html
Normal file
5
templates/shortcodes/button.html
Normal file
@@ -0,0 +1,5 @@
|
||||
|
||||
{% set path = body | split(pat="href=") | slice(start=1) | first | split(pat=">") | first | trim_start_matches(pat='"') | trim_end_matches(pat='"') %}
|
||||
<button class="leading-6 border-transparent flex flex-col border-2 w-full items-start rounded transition hover:first:text-gray-500 hover:border-stone-200 hover:bg-stone-100 p-2 text-left">
|
||||
{{ body | trim_start_matches(pat="<p>") | safe}}
|
||||
</button>
|
||||
49
templates/shortcodes/cloud_header.html
Normal file
49
templates/shortcodes/cloud_header.html
Normal file
@@ -0,0 +1,49 @@
|
||||
<div class="flex flex-wrap text-center mx-4 lg:pt-4 mt-10 lg:mx-10 lg:mt-4 pb-10">
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 mx-auto items-center">
|
||||
<div class="w-full mb-4 border-b border-gray-600">
|
||||
<div class="arrow_up"></div>
|
||||
<a href="https://library.threefold.me/info/manual/#/technology/qsss/threefold__qsss_home" target="_blank"
|
||||
class="text-5xl font-extrabold uppercase">Store</a>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<img class="mx-auto sm:w-1/2 lg:w-full" src="/images/cloud_header_seprated.png" alt="TF Cloud" />
|
||||
</div>
|
||||
<div class="w-full mb-4 border-b border-gray-600">
|
||||
<a href="https://library.threefold.me/info/manual/#/manual__weblets_home" target="_blank"
|
||||
class="text-5xl font-extrabold uppercase">Build</a>
|
||||
<div class="arrow_down"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.arrow_up,
|
||||
.arrow_down {
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-width: 0 12.5px 30px 12.5px;
|
||||
border-color: transparent transparent #000000 transparent;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.arrow_down {
|
||||
margin-left: 10px;
|
||||
|
||||
border-width: 35px 12.5px 0 12.5px;
|
||||
border-color: #000000 transparent transparent transparent;
|
||||
}
|
||||
|
||||
a {
|
||||
font-family: "Orbitron", sans-serif !important;
|
||||
color: black;
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 1px;
|
||||
border-width: 0;
|
||||
color: gray;
|
||||
background-color: gray;
|
||||
}
|
||||
</style>
|
||||
173
templates/shortcodes/cloud_stats.html
Normal file
173
templates/shortcodes/cloud_stats.html
Normal file
@@ -0,0 +1,173 @@
|
||||
{% set data = load_data(url="https://explorer.threefold.io/api/stats", required=false, format="json") %}
|
||||
{% if data %}
|
||||
{% set capacity = data.hru + data.sru / 1000 %}
|
||||
{% set nodes = data.onlinenodes %}
|
||||
{% set countries = data.countries %}
|
||||
{% set cores = data.cru %}
|
||||
{% endif %}
|
||||
|
||||
{% if data %}
|
||||
<div class="lg:py-20 py-10 sm:pt-16">
|
||||
<div class="mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="lg:max-w-xl mx-auto text-center">
|
||||
<h2 class="
|
||||
|
||||
lg:text-6xl
|
||||
text-center
|
||||
uppercase
|
||||
my-2
|
||||
leading-none
|
||||
font-bold font-heading
|
||||
|
||||
">
|
||||
A GLOBAL EDGE INFRASTRUCTURE
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-10 pb-12 sm:pb-16">
|
||||
<div class="relative">
|
||||
<div class="absolute inset-0 h-1/2"></div>
|
||||
<div class="relative mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-8xl mx-auto">
|
||||
<dl class="rounded-lg bg-white sm:grid sm:grid-cols-4">
|
||||
<div class="
|
||||
flex flex-col
|
||||
border-b border-gray-400
|
||||
p-6
|
||||
text-center
|
||||
sm:border-0 sm:border-r
|
||||
">
|
||||
<dt class="
|
||||
order-2
|
||||
mt-2
|
||||
text-2xl
|
||||
leading-6
|
||||
font-medium
|
||||
text-gray-900
|
||||
uppercase
|
||||
" id="item-1">
|
||||
Nodes
|
||||
</dt>
|
||||
<dd class="
|
||||
order-1
|
||||
text-5xl
|
||||
leading-none
|
||||
font-extrabold
|
||||
text-black
|
||||
mb-4
|
||||
" aria-describedby="item-1">
|
||||
{{ nodes }}
|
||||
</dd>
|
||||
</div>
|
||||
<div class="
|
||||
flex flex-col
|
||||
border-t border-b border-gray-400
|
||||
p-6
|
||||
text-center
|
||||
sm:border-0 sm:border-l sm:border-r
|
||||
">
|
||||
<dt class="
|
||||
order-2
|
||||
mt-2
|
||||
text-2xl
|
||||
leading-6
|
||||
font-medium
|
||||
text-gray-900
|
||||
uppercase
|
||||
">
|
||||
Capacity
|
||||
</dt>
|
||||
<dd class="
|
||||
order-1
|
||||
text-5xl
|
||||
leading-none
|
||||
font-extrabold
|
||||
text-black
|
||||
mb-4
|
||||
">
|
||||
{{ capacity / 1000000 | round(precision=2) }}PB
|
||||
</dd>
|
||||
</div>
|
||||
<div class="
|
||||
flex flex-col
|
||||
border-t border-gray-400
|
||||
p-6
|
||||
text-center
|
||||
sm:border-0 sm:border-l
|
||||
">
|
||||
<dt class="
|
||||
order-2
|
||||
mt-2
|
||||
text-2xl
|
||||
leading-6
|
||||
font-medium
|
||||
text-gray-900
|
||||
uppercase
|
||||
">
|
||||
Cores
|
||||
</dt>
|
||||
<dd class="
|
||||
order-1
|
||||
text-5xl
|
||||
leading-none
|
||||
font-extrabold
|
||||
text-black
|
||||
mb-4
|
||||
">
|
||||
{{ cores | num_format }}
|
||||
</dd>
|
||||
</div>
|
||||
<div class="
|
||||
flex flex-col
|
||||
border-t border-gray-400
|
||||
p-6
|
||||
text-center
|
||||
sm:border-0 sm:border-l
|
||||
">
|
||||
<dt class="
|
||||
order-2
|
||||
mt-2
|
||||
text-2xl
|
||||
leading-6
|
||||
font-medium
|
||||
text-gray-900
|
||||
uppercase
|
||||
">
|
||||
Countries
|
||||
</dt>
|
||||
<dd class="
|
||||
order-1
|
||||
text-5xl
|
||||
leading-none
|
||||
font-extrabold
|
||||
text-black
|
||||
mb-4
|
||||
">
|
||||
{{ countries }}
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="block text-center mt-5">
|
||||
<a target="_blank" href="https://explorer.threefold.io/all" class="
|
||||
inline-block
|
||||
bg-white
|
||||
text-lg
|
||||
learn-button
|
||||
hover:bg-gray-400
|
||||
bo
|
||||
px-12
|
||||
py-1
|
||||
mr-5
|
||||
mb-4
|
||||
border-2
|
||||
shadow
|
||||
border-black
|
||||
">Explore Capacity</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
115
templates/shortcodes/dev_resourses.html
Normal file
115
templates/shortcodes/dev_resourses.html
Normal file
@@ -0,0 +1,115 @@
|
||||
<div class="my-5 lg:my-40 lg:mx-40 mx-4">
|
||||
<div class="w-full text-center">
|
||||
<h2 class="lg:text-6xl uppercase font-normal leading-tight">
|
||||
WHERE WOULD YOU LIKE TO START?
|
||||
</h2>
|
||||
<div class="max-w-4xl mb-10 py-2 text-xl mx-auto leading-tight tracking-wide">ThreeFold's open-source
|
||||
infrastructure has been built from the ground up on the Linux Kernel to create a fully decentralized
|
||||
Internet and Cloud. From a stateless operating system to new compute, storage and networking primitives, the
|
||||
next-generation Internet is here.
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid sm:grid-cols-1 gap-4 lg:grid-cols-2 text-center lg:px-40">
|
||||
<div class="
|
||||
mx-auto
|
||||
my-4
|
||||
rounded
|
||||
overflow-hidden
|
||||
transition
|
||||
duration-500
|
||||
bg-gray-100
|
||||
">
|
||||
<a href="/developer/os">
|
||||
<img src="/images/operating_system.png" />
|
||||
<div class="font-bold text-xl py-5 mx-4 text-black">
|
||||
Operating System
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="
|
||||
mx-auto
|
||||
my-4
|
||||
rounded
|
||||
overflow-hidden
|
||||
transition
|
||||
duration-500
|
||||
bg-gray-100
|
||||
">
|
||||
<a href="/developer/automation">
|
||||
<img src="/images/automation.png" />
|
||||
<div class="font-bold text-xl py-5 mx-4 text-black">
|
||||
Autonomous Components
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="
|
||||
mx-auto
|
||||
my-4
|
||||
rounded
|
||||
overflow-hidden
|
||||
transition
|
||||
duration-500
|
||||
bg-gray-100
|
||||
">
|
||||
<a href="/developer/tooling">
|
||||
<img src="/images/tooling.png" />
|
||||
<div class="font-bold text-xl py-5 mx-4 text-black">
|
||||
Developer tooling
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="
|
||||
mx-auto
|
||||
my-4
|
||||
rounded
|
||||
overflow-hidden
|
||||
transition
|
||||
duration-500
|
||||
bg-gray-100
|
||||
">
|
||||
<a href="/developer/qsfs">
|
||||
<img src="/images/qsfs.png" />
|
||||
<div class="font-bold text-xl py-5 mx-4 text-black">
|
||||
Quantum-Safe Storage
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="
|
||||
mx-auto
|
||||
my-4
|
||||
rounded
|
||||
overflow-hidden
|
||||
transition
|
||||
duration-500
|
||||
bg-gray-100
|
||||
">
|
||||
<a href="/developer/blockchain">
|
||||
<img src="/images/blockchain.png" />
|
||||
<div class="font-bold text-xl py-5 mx-4 text-black">
|
||||
ThreeFold Blockchain
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="
|
||||
mx-auto
|
||||
my-4
|
||||
rounded
|
||||
overflow-hidden
|
||||
transition
|
||||
duration-500
|
||||
bg-gray-100
|
||||
">
|
||||
<a href="/developer/planetarynw">
|
||||
<img src="/images/planetary_network.jpg" />
|
||||
<div class="font-bold text-xl py-5 mx-4 text-black">
|
||||
Planetary Network
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
74
templates/shortcodes/featured_stories.html
Normal file
74
templates/shortcodes/featured_stories.html
Normal file
@@ -0,0 +1,74 @@
|
||||
<div class="relative pt-16 px-4 sm:px-6 lg:py-28 lg:pb-28 lg:px-8">
|
||||
<div class="absolute inset-0">
|
||||
<div class="bg-white h-1/3 sm:h-2/3"></div>
|
||||
</div>
|
||||
<div class="relative max-w-7xl mx-auto">
|
||||
<div class="text-center">
|
||||
<h2 class="
|
||||
lg:text-6xl
|
||||
leading-tight
|
||||
font-normal font-heading
|
||||
uppercase
|
||||
sm:leading-10
|
||||
lg:pb-10
|
||||
">
|
||||
Featured Stories
|
||||
</h2>
|
||||
</div>
|
||||
<div class="mt-12 grid gap-5 max-w-lg mx-auto lg:grid-cols-3 lg:max-w-none">
|
||||
<div class="flex flex-col rounded-lg shadow-lg overflow-hidden">
|
||||
<div class="flex-shrink-0">
|
||||
<img class="h-48 w-full object-cover" src="/images/the_threefold_movement.png" alt="" />
|
||||
</div>
|
||||
<div class="flex-1 bg-white p-6 flex flex-col justify-between">
|
||||
<div class="flex-1">
|
||||
<a href="https://threefold.io/blog/post/the_threefold_movement/" class="block">
|
||||
<h3 class="mt-2 text-2xl leading-7 font-semibold text-gray-900">
|
||||
Into the Fold – The ThreeFold Movement
|
||||
</h3>
|
||||
<div class="mt-3 leading-6 text-gray-500 text-lg">It's not by mistake that you're here,
|
||||
reading this post. You can feel that a global shift is happening. And you want to do
|
||||
something about it.</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col rounded-lg shadow-lg overflow-hidden">
|
||||
<div class="flex-shrink-0">
|
||||
<img class="h-48 w-full object-cover" src="/images/new_internet.jpg" alt="" />
|
||||
</div>
|
||||
<div class="flex-1 bg-white p-6 flex flex-col justify-between">
|
||||
<div class="flex-1">
|
||||
<a href="https://threefold.io/blog/post/the_threefold_movement/" class="block">
|
||||
<h3 class="mt-2 text-2xl leading-7 font-semibold text-gray-900">
|
||||
Building a New Internet From the Ground Up – Part 1: Introduction
|
||||
</h3>
|
||||
<div class="mt-3 leading-6 text-gray-500 text-lg">The first episode in an approachable
|
||||
series on the inner workings of the ThreeFold Grid. Explore our technology stack and
|
||||
what makes ThreeFold special.</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col rounded-lg shadow-lg overflow-hidden">
|
||||
<div class="flex-shrink-0">
|
||||
<img class="h-48 w-full object-cover" src="/images/tft_vedio.jpg" alt="" />
|
||||
</div>
|
||||
<div class="flex-1 bg-white p-6 flex flex-col justify-between">
|
||||
<div class="flex-1">
|
||||
<a href="https://threefold.io/blog/post/the_threefold_movement/" class="block">
|
||||
<h3 class="mt-2 text-2xl leading-7 font-semibold text-gray-900">
|
||||
ThreeFold Explained in 2 Minutes
|
||||
</h3>
|
||||
<div class="mt-3 leading-6 text-gray-500 text-lg">We make sovereignty a reality and
|
||||
opportunities universal. Our technology ensures data ownership and a democratized
|
||||
Internet. Discover how.</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
92
templates/shortcodes/grid_stats.html
Normal file
92
templates/shortcodes/grid_stats.html
Normal file
@@ -0,0 +1,92 @@
|
||||
{% set styles = "background-image: url('images/grid_map.png');" %}
|
||||
{% set data = load_data(url="https://explorer.threefold.io/api/stats", required=false, format="json") %}
|
||||
{% if data %}
|
||||
{% set capacity = data.hru + data.sru / 1000 %}
|
||||
{% set nodes = data.onlinenodes %}
|
||||
{% set countries = data.countries %}
|
||||
{% set cores = data.cru %}
|
||||
{% endif %}
|
||||
|
||||
|
||||
{% if data %}
|
||||
<section class="px-2 h-auto bg-center bg-cover bg-no-repeat" style="{{styles}}">
|
||||
<div class="flex flex-wrap lg:p-12 text-center -mx-auto">
|
||||
<div class="text-center rounded lg:px-6 mt-10 lg:mt-0 mx-auto">
|
||||
{{body | markdown | safe }}
|
||||
|
||||
<div class="my-10 grid lg:grid-cols-3 lg:gap-8">
|
||||
<div class="..."></div>
|
||||
|
||||
<!-- capacity -->
|
||||
<div class="leading-none font-extrabold text-5xl">
|
||||
{{ capacity / 1000000 | round(precision=2) }}PB
|
||||
<span class="block text-3xl uppercase">capacity</span>
|
||||
</div>
|
||||
<div class="..."></div>
|
||||
|
||||
<!-- Nodes -->
|
||||
<div class="
|
||||
mx-auto
|
||||
rounded-full
|
||||
h-32
|
||||
w-32
|
||||
lg:h-60 lg:w-60
|
||||
inline-flex
|
||||
items-center
|
||||
justify-center
|
||||
bg-green
|
||||
my-4
|
||||
">
|
||||
<div class="leading-none font-extrabold md:text-6xl">
|
||||
{{ nodes }}
|
||||
<span class="block md:text-2xl uppercase">nodes</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hidden md:block"></div>
|
||||
|
||||
<!-- countries -->
|
||||
<div class="
|
||||
mx-auto
|
||||
rounded-full
|
||||
h-32
|
||||
w-32
|
||||
lg:h-60 lg:w-60
|
||||
inline-flex
|
||||
items-center
|
||||
justify-center
|
||||
bg-pink
|
||||
">
|
||||
<div class="leading-none font-extrabold md:text-6xl">
|
||||
{{ countries }}
|
||||
<span class="block md:text-2xl uppercase">countries</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="..."></div>
|
||||
|
||||
<!-- cores -->
|
||||
<div class="leading-none font-extrabold text-5xl">
|
||||
{{ cores | num_format }}
|
||||
<span class="block text-2xl uppercase">cores</span>
|
||||
</div>
|
||||
<button><a href="https://explorer.threefold.io/all" target="_blank">Explore ThreeFold Grid Capacity</a></button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endif %}
|
||||
<style>
|
||||
dd {
|
||||
display: inline-block;
|
||||
margin: auto;
|
||||
border-radius: 50%;
|
||||
line-height: 100px;
|
||||
}
|
||||
|
||||
.bg-green {
|
||||
background-color: #70dfc9;
|
||||
}
|
||||
|
||||
.bg-pink {
|
||||
background-color: #ea1ff7;
|
||||
}
|
||||
</style>
|
||||
209
templates/shortcodes/jobs.html
Normal file
209
templates/shortcodes/jobs.html
Normal file
@@ -0,0 +1,209 @@
|
||||
<div class="container-fluid sm:pxi-0 mx-auto py-5 overflow-visible">
|
||||
<div class="bg-white">
|
||||
<div class="max-w-screen-xl mx-auto py-10 px-4 sm:px-6 lg:px-8">
|
||||
<div class="
|
||||
mt-12
|
||||
space-y-4
|
||||
sm:mt-8
|
||||
sm:space-y-0
|
||||
sm:grid sm:grid-cols-2
|
||||
sm:gap-6
|
||||
lg:max-w-4xl
|
||||
lg:mx-auto
|
||||
xl:max-w-none
|
||||
xl:mx-0
|
||||
xl:grid-cols-4
|
||||
">
|
||||
<div class="
|
||||
border border-gray-200
|
||||
rounded-lg
|
||||
shadow-sm
|
||||
divide-y divide-gray-200
|
||||
">
|
||||
<div class="p-6">
|
||||
<h2 class="
|
||||
text-xl
|
||||
leading-8
|
||||
font-extrabold
|
||||
text-gray-900
|
||||
">
|
||||
ThreeFold Grid Operations Lead
|
||||
</h2>
|
||||
<p class="mb-8 text-gray-600 leading-relaxed">
|
||||
The ThreeFold Grid will eventually connect millions of nodes. You'll be in charge of finding
|
||||
the best ways to operate such a network.
|
||||
</p>
|
||||
<button class="
|
||||
inline-block
|
||||
bg-white
|
||||
text-lg
|
||||
learn-button
|
||||
hover:bg-gray-400
|
||||
px-12
|
||||
py-1
|
||||
mr-5
|
||||
my-4
|
||||
border-2
|
||||
shadow
|
||||
border-black
|
||||
">
|
||||
<a href="/careers/grid-operations-manager">See Position</a>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="
|
||||
border border-gray-200
|
||||
rounded-lg
|
||||
shadow-sm
|
||||
divide-y divide-gray-200
|
||||
">
|
||||
<div class="p-6">
|
||||
<h2 class="
|
||||
text-xl
|
||||
leading-8
|
||||
font-extrabold
|
||||
text-gray-900
|
||||
">
|
||||
ThreeFold Grid Developer Lead
|
||||
</h2>
|
||||
<p class="mb-8 text-gray-600 leading-relaxed">
|
||||
Take ownership of the ongoing development and documentation of the tech components that
|
||||
constitute the ThreeFold Grid.
|
||||
</p>
|
||||
<button class="
|
||||
inline-block
|
||||
bg-white
|
||||
text-lg
|
||||
learn-button
|
||||
hover:bg-gray-400
|
||||
px-12
|
||||
py-1
|
||||
mr-5
|
||||
my-4
|
||||
border-2
|
||||
shadow
|
||||
border-black
|
||||
">
|
||||
<a href="/careers/grid-development-manager">See Position</a>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="
|
||||
border border-gray-200
|
||||
rounded-lg
|
||||
shadow-sm
|
||||
divide-y divide-gray-200
|
||||
">
|
||||
<div class="p-6">
|
||||
<h2 class="
|
||||
text-xl
|
||||
leading-8
|
||||
font-extrabold
|
||||
text-gray-900
|
||||
">
|
||||
Master Technical Architect
|
||||
</h2>
|
||||
<p class="mb-8 text-gray-600 leading-relaxed">
|
||||
Take the lead on the architectural design of the Digital Twin tech and ecosystem defining a
|
||||
new paradigm for the tech industry.
|
||||
</p>
|
||||
<button class="
|
||||
inline-block
|
||||
bg-white
|
||||
text-lg
|
||||
learn-button
|
||||
hover:bg-gray-400
|
||||
px-12
|
||||
py-1
|
||||
mr-5
|
||||
my-4
|
||||
border-2
|
||||
shadow
|
||||
border-black
|
||||
">
|
||||
<a href="/careers/master-architect-dt">See Position</a>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="
|
||||
border border-gray-200
|
||||
rounded-lg
|
||||
shadow-sm
|
||||
divide-y divide-gray-200
|
||||
">
|
||||
<div class="p-6">
|
||||
<h2 class="
|
||||
text-xl
|
||||
leading-8
|
||||
font-extrabold
|
||||
text-gray-900
|
||||
">
|
||||
Quality Assurance Engineer
|
||||
</h2>
|
||||
<p class="mb-8 text-gray-600 leading-relaxed">
|
||||
ThreeFold is developing infrastructures and products like never before. Join the testing
|
||||
team and ensure optimum tech releases.
|
||||
</p>
|
||||
<button class="
|
||||
inline-block
|
||||
bg-white
|
||||
text-lg
|
||||
learn-button
|
||||
hover:bg-gray-400
|
||||
px-12
|
||||
py-1
|
||||
mr-5
|
||||
my-4
|
||||
border-2
|
||||
shadow
|
||||
border-black
|
||||
">
|
||||
<a href="/careers/qa-engineer">See Position</a>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="
|
||||
border border-gray-200
|
||||
rounded-lg
|
||||
shadow-sm
|
||||
divide-y divide-gray-200
|
||||
">
|
||||
<div class="p-6">
|
||||
<h2 class="
|
||||
text-xl
|
||||
leading-8
|
||||
font-extrabold
|
||||
text-gray-900
|
||||
">
|
||||
Senior Developer
|
||||
</h2>
|
||||
<p class="mb-8 text-gray-600 leading-relaxed">
|
||||
Join the core developer team working on our operating system Zero-OS, Digital Twin,
|
||||
blockchain layers or other products we are building.
|
||||
</p>
|
||||
<button class="
|
||||
inline-block
|
||||
bg-white
|
||||
text-lg
|
||||
learn-button
|
||||
hover:bg-gray-400
|
||||
px-12
|
||||
py-1
|
||||
mr-5
|
||||
my-4
|
||||
border-2
|
||||
shadow
|
||||
border-black
|
||||
">
|
||||
<a href="/careers/senior-developer">See Position</a>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
44
templates/shortcodes/menu.html
Normal file
44
templates/shortcodes/menu.html
Normal file
@@ -0,0 +1,44 @@
|
||||
<!-- row shortcode
|
||||
Shortcode used in markdown for the creation of mobile compatible vertical rows
|
||||
Divides markdown into columns by splitting content using column identifier "|||"
|
||||
Creates equal width blocks in a flex row.
|
||||
|
||||
Parameters:
|
||||
- style:
|
||||
- lean: if style is lean, the row doesn't have outer margins
|
||||
- bgPath: if bgPath is passed, the row has a full width background
|
||||
-->
|
||||
|
||||
{% set columns = body | safe | markdown | split(pat="|||") %}
|
||||
|
||||
<!-- aligns columns depending on col number-->
|
||||
|
||||
{% set classes = "relative flex flex-col lg:flex-row items-baseline -mx-8 sm:-mx-12 lg:-mx-12 xl:-mx-8" %}
|
||||
{% set column_classes = "flex-1 m-2 lg:m-4 my-header" %}
|
||||
|
||||
<!-- makes row full screen width and adds background img -->
|
||||
|
||||
<div class="{{classes}}">
|
||||
{% for column in columns%}
|
||||
<!-- Hides empty columns if displayed vertically in small screen -->
|
||||
{% if column | as_str | length < 10 %}
|
||||
<div class="hidden md:block flex-1 md:mb-0 md:mx-8 sm:flex-1">
|
||||
{{column | split(pat="{% button() %}") | slice(end=1)}}
|
||||
{% for button in column | split(pat="{% button() %}") | slice(start=1) | join(sep="") | split(pat="{%% end %%}") | slice(end=-1) %}
|
||||
{% set body = button %}
|
||||
{% include "shortcodes/button.html" %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="{{column_classes}}">
|
||||
{{column | split(pat="{% button() %}") | slice(end=1) | first | safe}}
|
||||
<hr class="border-t-2 mt-2">
|
||||
<br/>
|
||||
{% for button in column | split(pat="{% button() %}") | slice(start=1) | join(sep="") | split(pat="{%% end %%}") | slice(end=-1) %}
|
||||
{% set body = button %}
|
||||
{% include "shortcodes/button.html" %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
3
templates/shortcodes/mermaid.html
Normal file
3
templates/shortcodes/mermaid.html
Normal file
@@ -0,0 +1,3 @@
|
||||
<div class="mermaid">
|
||||
{{ body }}
|
||||
</div>
|
||||
105
templates/shortcodes/row.html
Normal file
105
templates/shortcodes/row.html
Normal file
@@ -0,0 +1,105 @@
|
||||
<!-- row shortcode
|
||||
Shortcode used in markdown for the creation of mobile compatible vertical rows
|
||||
Divides markdown into columns by splitting content using column identifier "|||"
|
||||
Creates equal width blocks in a flex row.
|
||||
|
||||
Parameters:
|
||||
- style:
|
||||
- lean: if style is lean, the row doesn't have outer margins
|
||||
- bgPath: if bgPath is passed, the row has a full width background
|
||||
-->
|
||||
|
||||
{% set columns = body | safe | markdown | split(pat="|||") %}
|
||||
{% set row_class = "relative pt-12 flex flex-col sm:grid sm:grid-cols-2 sm:gap-10 xl:flex xl:flex-row"%}
|
||||
|
||||
<!-- aligns columns depending on col number-->
|
||||
{% if 2 < columns | length %}
|
||||
{% set row_class = row_class ~ " lg:items-start" %}
|
||||
{% else %}
|
||||
{% set row_class = row_class ~ " lg:items-center" %}
|
||||
{% endif %}
|
||||
|
||||
{% set col_class = "flex-1 mb-8 md:mb-0 md:mx-8" %}
|
||||
|
||||
{% if style %}
|
||||
|
||||
{% if "center" in style %}
|
||||
{% set row_class = row_class ~ " text-center mx-auto justify-center" %}
|
||||
{% set col_class = col_class ~ " flex-1 m-4 lg:m-0" %}
|
||||
{% endif %}
|
||||
|
||||
{% if "text-white" in style %}
|
||||
{% set row_class = row_class ~ " text-white" %}
|
||||
{% endif %}
|
||||
|
||||
<!-- makes row with margins -->
|
||||
{% if "margin" in style %}
|
||||
{% set row_class = row_class ~ " lg:py-28 sm:p-12 md:p-16 lg:p-20" %}
|
||||
{% set col_class = col_class ~ " flex-1 m-4 lg:m-0" %}
|
||||
{% endif %}
|
||||
|
||||
<!-- makes row full screen width, strips margins -->
|
||||
{% if "lean" in style %}
|
||||
{% set row_class = "relative flex flex-col lg:flex-row items-baseline -mx-8 sm:-mx-12 md:-mx-16 lg:-mx-20" %}
|
||||
{% set col_class = "flex-1 m-4 lg:m-0" %}
|
||||
{% endif %}
|
||||
|
||||
<!-- makes row semi-full screen width, strips margins -->
|
||||
{% if "between" in style %}
|
||||
{% set row_class = row_class ~ " lg:max-w-6xl" %}
|
||||
{% elif "moderate" in style %}
|
||||
{% set row_class = row_class ~ " lg:m-20" %}
|
||||
{% endif %}
|
||||
|
||||
<!-- makes row full screen width, strips margins -->
|
||||
{% if "narrow" in style %}
|
||||
{% set row_class = row_class ~ " lg:max-w-3xl" %}
|
||||
{% elif "moderate" in style %}
|
||||
{% set row_class = row_class ~ " lg:m-20" %}
|
||||
{% endif %}
|
||||
|
||||
{% endif %}
|
||||
|
||||
<!-- makes row full screen width and adds background img -->
|
||||
{% set styles = "" %}
|
||||
{% if bgPath %}
|
||||
{% set styles = "background: url('" ~ bgPath ~ "'); background-size: cover" %}
|
||||
{% set row_class = row_class ~ "w-screen -mx-8 sm:-mx-12 md:-mx-16 lg:-mx-20" %}
|
||||
{% endif %}
|
||||
{% if bgColor %}
|
||||
{% set styles = "background-color: " ~ bgColor ~ "; background-size: cover" %}
|
||||
{% set row_class = row_class ~ "w-screen -mx-8 sm:-mx-12 md:-mx-16 lg:-mx-20" %}
|
||||
{% endif %}
|
||||
{% if gradient %}
|
||||
{% set styles = "background: " ~ gradient ~ "; background-size: cover" %}
|
||||
{% set row_class = row_class ~ "w-screen -mx-8 sm:-mx-12 md:-mx-16 lg:-mx-20" %}
|
||||
{% endif %}
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="{{row_class}}" style="{{styles}}">
|
||||
{% for column in columns%}
|
||||
|
||||
<!-- Hides empty columns if displayed vertically in small screen -->
|
||||
{% if column | as_str | length < 10 %}
|
||||
<div class="hidden md:block flex-1 md:mb-0 md:mx-8 sm:flex-1">
|
||||
{{ column | safe }}
|
||||
</div>
|
||||
|
||||
{% else %}
|
||||
<div class="{{col_class}}">
|
||||
<!-- handles mermaid markdown content display -->
|
||||
{% if "{% mermaid() %}" in column %}
|
||||
{% set mermaid_section = column | safe | markdown | split(pat="{% mermaid() %}") %}
|
||||
{% set mermaid_content = mermaid_section[1] | striptags | replace(from="–", to="--")%}
|
||||
<div class="mermaid">
|
||||
{{mermaid_content | safe }}
|
||||
</div>
|
||||
{% else %}
|
||||
{{ column | safe }}
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
277
templates/shortcodes/team_sec.html
Normal file
277
templates/shortcodes/team_sec.html
Normal file
@@ -0,0 +1,277 @@
|
||||
<div class="lg:my-32 flex flex-col mt-5 p-auto lg:px-40">
|
||||
<h2 class="flex py-2 mx-auto uppercase font-normal lg:text-6xl">
|
||||
THE TEAM
|
||||
</h2>
|
||||
<div class="lg:max-w-4xl text-xl text-center mb-8 mx-auto leading-relaxed">Spread across the world, our team has
|
||||
built some of the world’s best Internet storage and cloud automation technologies since the ‘90s. With a strong
|
||||
vision for the future, we’re now on a mission to create a peer-to-peer Internet that can host all of humanity’s
|
||||
digital workloads via smart contract, removing all forms of centralization from global IT systems.</div>
|
||||
<div class="flex overflow-x-scroll pb-10 scrollable">
|
||||
<div class="flex flex-nowrap ml-10 mt-10">
|
||||
<div class="inline-block px-3">
|
||||
<div class="
|
||||
box
|
||||
max-w-xs
|
||||
overflow-hidden
|
||||
rounded-full
|
||||
shadow-md
|
||||
hover:shadow-xl
|
||||
transition-shadow
|
||||
duration-300
|
||||
ease-in-out
|
||||
">
|
||||
<a href="/people/kristof-de-spiegeleer/" title="Kristof De Spiegeleer">
|
||||
<img src="/images/people/kristof_de_spiegeleer.jpeg"
|
||||
class="rounded-full mx-auto mt-3" alt="Kristof De Spiegeleer" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="inline-block px-3">
|
||||
<div class="
|
||||
box
|
||||
max-w-xs
|
||||
overflow-hidden
|
||||
rounded-full
|
||||
shadow-md
|
||||
hover:shadow-xl
|
||||
transition-shadow
|
||||
duration-300
|
||||
ease-in-out
|
||||
">
|
||||
<a href="/people/adnanfatayerji/" title="Adnan Fatayerji">
|
||||
<img src="/images/people/adnan_fatayerji.jpg"
|
||||
class="rounded-full mx-auto mt-3" alt="Adnan Fatayerji" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="inline-block px-3">
|
||||
<div class="
|
||||
box
|
||||
max-w-xs
|
||||
overflow-hidden
|
||||
rounded-full
|
||||
shadow-md
|
||||
hover:shadow-xl
|
||||
transition-shadow
|
||||
duration-300
|
||||
ease-in-out
|
||||
">
|
||||
<a href="/people/andreashartl/" title="Andreas Hartl">
|
||||
<img src="/images/people/andreas_hartl.jpeg"
|
||||
class="rounded-full mx-auto mt-3" alt="Andreas Hartl" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="inline-block px-3">
|
||||
<div class="
|
||||
box
|
||||
max-w-xs
|
||||
overflow-hidden
|
||||
rounded-full
|
||||
shadow-md
|
||||
hover:shadow-xl
|
||||
transition-shadow
|
||||
duration-300
|
||||
ease-in-out
|
||||
">
|
||||
<a href="/people/christopher-hutton/" title="Christopher Hutton">
|
||||
<img src="/images/people/christhoper_hutton.jpeg"
|
||||
class="rounded-full mx-auto mt-3" alt="Christopher Hutton" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="inline-block px-3">
|
||||
<div class="
|
||||
box
|
||||
max-w-xs
|
||||
overflow-hidden
|
||||
rounded-full
|
||||
shadow-md
|
||||
hover:shadow-xl
|
||||
transition-shadow
|
||||
duration-300
|
||||
ease-in-out
|
||||
">
|
||||
<a href="/people/ewald-weizenbauer/" title="Ewald Weizenbauer">
|
||||
<img src="/images/people/ewald_weizenbauer.jpg"
|
||||
class="rounded-full mx-auto mt-3" alt="Ewald Weizenbauer" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="inline-block px-3">
|
||||
<div class="
|
||||
box
|
||||
max-w-xs
|
||||
overflow-hidden
|
||||
rounded-full
|
||||
shadow-md
|
||||
hover:shadow-xl
|
||||
transition-shadow
|
||||
duration-300
|
||||
ease-in-out
|
||||
">
|
||||
<a href="/people/jan-de-landtsheer/" title="Jan De Landtsheer">
|
||||
<img src="/images/people/jan_de_landtsheer.jpeg"
|
||||
class="rounded-full mx-auto mt-3" alt="Jan De Landtsheer" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="inline-block px-3">
|
||||
<div class="
|
||||
box
|
||||
max-w-xs
|
||||
overflow-hidden
|
||||
rounded-full
|
||||
shadow-md
|
||||
hover:shadow-xl
|
||||
transition-shadow
|
||||
duration-300
|
||||
ease-in-out
|
||||
">
|
||||
<a href="/people/libor-voncina/" title="Libor Voncina">
|
||||
<img src="/images/people/libor_voncina.jpeg"
|
||||
class="rounded-full mx-auto mt-3" alt="Libor Voncina" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="inline-block px-3">
|
||||
<div class="
|
||||
box
|
||||
max-w-xs
|
||||
overflow-hidden
|
||||
rounded-full
|
||||
shadow-md
|
||||
hover:shadow-xl
|
||||
transition-shadow
|
||||
duration-300
|
||||
ease-in-out
|
||||
">
|
||||
<a href="/people/owen-kemp/" title="Owen Kemp">
|
||||
<img src="/images/people/owen_kemp.jpeg"
|
||||
class="rounded-full mx-auto mt-3" alt="Owen Kemp" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="inline-block px-3">
|
||||
<div class="
|
||||
box
|
||||
max-w-xs
|
||||
overflow-hidden
|
||||
rounded-full
|
||||
shadow-md
|
||||
hover:shadow-xl
|
||||
transition-shadow
|
||||
duration-300
|
||||
ease-in-out
|
||||
">
|
||||
<a href="/people/peter-van-der-henst/" title="Peter van der Henst">
|
||||
<img src="/images/people/peter_van_der_henst.png"
|
||||
class="rounded-full mx-auto mt-3" alt="Peter van der Henst" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="inline-block px-3">
|
||||
<div class="
|
||||
box
|
||||
max-w-xs
|
||||
overflow-hidden
|
||||
rounded-full
|
||||
shadow-md
|
||||
hover:shadow-xl
|
||||
transition-shadow
|
||||
duration-300
|
||||
ease-in-out
|
||||
">
|
||||
<a href="/people/rajinder-singh-grewal/" title="Rajinder Singh Grewal">
|
||||
<img src="/images/people/rajinder_singh_grewal.jpeg"
|
||||
class="rounded-full mx-auto mt-3" alt="Rajinder Singh Grewal" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="inline-block px-3">
|
||||
<div class="
|
||||
box
|
||||
max-w-xs
|
||||
overflow-hidden
|
||||
rounded-full
|
||||
shadow-md
|
||||
hover:shadow-xl
|
||||
transition-shadow
|
||||
duration-300
|
||||
ease-in-out
|
||||
">
|
||||
<a href="/people/sabrina-sadik/" title="Sabrina Sadik">
|
||||
<img src="/images/people/sabrina_sadik.jpg"
|
||||
class="rounded-full mx-auto mt-3" alt="Sabrina Sadik" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="inline-block px-3">
|
||||
<div class="
|
||||
box
|
||||
max-w-xs
|
||||
overflow-hidden
|
||||
rounded-full
|
||||
shadow-md
|
||||
hover:shadow-xl
|
||||
transition-shadow
|
||||
duration-300
|
||||
ease-in-out
|
||||
">
|
||||
<a href="/people/sam-taggart/" title="Sam Taggart">
|
||||
<img src="/images/people/sam_taggart.jpg"
|
||||
class="rounded-full mx-auto mt-3" alt="Sam Taggart" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.scrollable::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.scrollable::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.scrollable::-webkit-scrollbar-thumb {
|
||||
background: linear-gradient(45deg, #70dfc9, #ee7bf7);
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
/* #70dfc9, #ee7bf7 */
|
||||
.box {
|
||||
position: relative;
|
||||
height: 150px;
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.box::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-radius: 50%;
|
||||
padding: 10px;
|
||||
background: linear-gradient(45deg, #70dfc9, #ee7bf7);
|
||||
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
||||
-webkit-mask-composite: destination-out;
|
||||
mask-composite: exclude;
|
||||
}
|
||||
|
||||
.box img {
|
||||
filter: grayscale(100%);
|
||||
height: 130px;
|
||||
width: 130px;
|
||||
}
|
||||
|
||||
.box img:hover {
|
||||
filter: grayscale(0);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user