{% extends "blog.html" %}

{% macro render_tags(tags, base_url) -%}
    <div class="blogging-tags-grid">
        {% for tag in tags %}
        <code style="color: var(--md-typeset-color)">#{{ tag }}</code>
        {% endfor %}
    </div>
    {{ caller() }}
{% endmacro %}

{% if render_blog is not defined %}
{% macro render_blog(title, description, time, url, pg) -%}
<a href="{{ url }}">
    <div class="blog-override-post">
        <h3 class="blog-post-title">{{ title }}</h3>
        {% if show_tags and "tags" in pg.meta %}
            {% call render_tags(pg.meta["tags"], index_url) %}
            {% endcall %}
        {% endif %}
        <p class="blog-post-description">{{ description }}</p>
        <div class="blog-post-extra">
            {{ ("Updated" if is_revision else "Published") + " at: " + time }}
        </div>
    </div>
</a>
{{ caller() }}
{%- endmacro %}
{% endif %}


{% block style %}
{{ super() }}
<style>
    .blog-override-post {
        padding: 30px 60px 30px 0;
        margin-top: 10px;
        border: 1px solid transparent;
        cursor: default;
    }

    .blog-override-post .blog-post-title {
        color: var(--md-typeset-a-color);
        margin-top: 0;
    }

    .blog-post-description {
        color: var(--md-typeset-color);
    }

    .blog-override-post:first-of-type {
        margin-top: 0;
    }

    .blog-override-post:hover {
        border: 1px solid #e8e8e877;
        box-shadow: 3px 4px 10px #e8e8e8;
    }

    .blog-override-post,
    .blog-override-post>* {
        transition: all 0.3s ease-in-out;
    }

    .blog-override-post:hover>* {
        transform: translateX(30px);
    }

    .blog-post-description,
    .blog-post-extra {
        opacity: 0.8;
    }

    .blog-override-post:hover .blog-post-description,
    .blog-override-post:hover .blog-post-extra {
        opacity: 1;
    }

    @media only screen and (max-width: 1000px) {
        .blog-override-post,
        .blog-override-post>* {
            transition: none;
        }

        .blog-override-post:hover>* {
            transform: none;
        }

        .blog-override-post {
            padding: 30px 0 30px 0;
            border: none;
            cursor: pointer;
        }

        .blog-override-post:hover {
            border: none;
            box-shadow: none;
        }

        .blog-post-description,
        .blog-post-extra,
        .blog-override-post:hover .blog-post-description,
        .blog-override-post:hover .blog-post-extra {
            opacity: 1;
        }
    }
</style>
{% endblock %}