{% extends "base.html" %}
{% block title_row %}{% endblock %}
{% block title_ruler %}{% endblock %}

{% block media %}
    <style>
        @media(min-width: 800px) {
            #content {
                width: 98%;
                margin-left: 0;
            }
        }
        @media(max-width: 799px) {
            #content {
                width: 100%;
                margin-left: 0;
            }
        }
    </style>
    {% block three_col_media %}{% endblock %}
{% endblock %}

{% block js_media %}
    <script type="text/javascript">
        $(document).ready(function () {
            $('.left-sidebar-item').on('click', function() {
                var url = $(this).attr('data-href');
                if (url === '#') return;
                window.location.href = url;
            });
            $('.blog-box').on('click', function() {
                var $description = $(this).children('.blog-description');
                var max_height = $description.css('max-height');
                if (max_height !== 'fit-content') {
                    $description.css('max-height', 'fit-content');
                    $(this).css('cursor', 'auto');
                    $(this).removeClass('pre-expand-blog');
                }
            })
            $('.blog-box').each(function() {
                if ($(this).prop('scrollHeight') > $(this).height() ) {
                    $(this).addClass('pre-expand-blog');
                    $(this).css('cursor', 'pointer');
                }
            });
        });
    </script>
    {% block three_col_js %}{% endblock %}
{% endblock %}

{% macro make_tab_item(name, fa, url, text) %}
    <div class="left-sidebar-item {% if page_type == name %}active{% endif %}" data-href="{{ url }}" id="{{ name }}-tab">
        <span class="sidebar-icon"><i class="{{ fa }}"></i></span>
        <span>{{ text }}</span>
    </div>
{% endmacro %}

{% block body %}
    {% block before_posts %}{% endblock %}
    <div id="three-col-container">
        {% block left_sidebar %}{% endblock %}
        <div class="middle-content">
            {% block middle_title %}{% endblock %}
            {% block middle_content %}{% endblock %}
        </div>
        {% block right_sidebar %}{% endblock %}
    </div>
    {% block after_posts %}{% endblock %}
{% endblock %}

{% block bodyend %}
    {{ super() }}
    {% if REQUIRE_JAX %}
        {% include "mathjax-load.html" %}
    {% endif %}
    {% include "comments/math.html" %}
{% endblock %}
