{% extends "juice/templates/index.html" %}

{% block hero %}
<section class="text-center" style="width:60%;">
    <h1 class="heading-text white-text" style="font-size: 50px">
        {{ section.title }}
    </h1>
    <h3 class="title-text white-text">
        {{ section.description }}
    </h3>
</section>
<img class="hero-image" style="width:40%;margin-right:2em;border-radius:12px;" src="{{ get_url(path="moneropunks.jpg") }}">

<style>
    h1 {
      font-size: 3em;
    }
    h2 {
      font-size: 2.5em;
      padding: 0;
      margin: .5em 0 .5em 0;
    }
    h3 {
      font-size: 1.5em;
      padding: 1em 0 .25em 0;
      margin: 1em 0 .25em 0;
    }
    .hero section {
        padding: 0 5rem;
    }
    @media screen and (max-width: 768px) {
        .hero section {
            padding: 0 2rem;
        }

        .hero-image {
            display: none
        }
    }
    .price {
      font-size: 1.5em;
    }
    main {
      padding: 0;
    }
</style>
{% endblock hero %}

{% block content %}
<!-- content here when i think of it -->
{% endblock content %}

{% block toc %}
{% if section.toc %}
{% set toc = section.toc %}
{% elif page.toc %}
{% set toc = page.toc %}
{% endif %}
{% if toc %}
<div class="toc">
    <div class="toc-sticky">
        {% for h in toc %}
        <div class="toc-item">
            <a class="subtext" href="{{h.permalink | safe}}">{{ h.title }}</a>
        </div>
        {% if h.children %}
        {% for h2 in h.children %}
        <div class="toc-item-child">
            <a class="subtext" href="{{h2.permalink | safe}}"><small>- {{ h2.title }}</small></a>
            {% if h2.children %}
            {% for h3 in h2.children %}
            <div class="toc-item-child">
                <a class="subtext" href="{{h3.permalink | safe}}"><small>- {{ h3.title }}</small></a>
            </div>
            {% endfor %}
            {% endif %}
        </div>
        {% endfor %}
        {% endif %}
        {% endfor %}
    </div>
</div>
{% endif %}
{% endblock toc %}

{% block footer %}
<footer>
    <small class="subtext">
        by <a href="https://lzahq.tech" target="_blank">@lza_menace</a> - 2021
    </small>
</footer>
{% endblock footer %}