www_mycelium/templates/shortcodes/cloud_header.html
2025-02-12 06:59:33 +00:00

57 lines
1.8 KiB
HTML

{% set base = config.base_url %}
<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">
{% if 'www_threefold_io' in base %}
{% set path = base ~ '/' ~ 'images/cloud_header_seprated.png' %}
<img class="mx-auto sm:w-1/2 lg:w-full" src="{{path}}" alt="TF Cloud" />
{% else %}
<img class="mx-auto sm:w-1/2 lg:w-full" src="/images/cloud_header_seprated.png" alt="TF Cloud" />
{% endif %}
</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>