{% extends "mobile-layout.html" %} {% macro sentence_case(text) %} {{
text[0]|upper}}{{text[1:] }} {% endmacro %} {% block header %}
<script src="{{url_for('static', filename='article.js')}}"></script>

<style>
    #projectdiv {
        background-color: #ffffff10;
        opacity: 100%;
    }

    article {
        margin-bottom: 10rem;
    }
    .articles{
        margin-top: 0;
    }

    .article-detail-container {
        margin-left: 0;
        margin-right: 0;
    }
</style>

<script>
    $(document).ready(function () {
        if ("{{toastMessage|safe}}" != "") {
            vt.success("{{toastMessage|safe}}", { position: 'top-right' });
        }
    });
</script>

{% endblock header %} {% block content %}
<script>
    $(document).ready(function () {
        $('[data-toggle="tooltip"]').tooltip();
    });
</script>

<div class="articles">
    <article class="article-detail-container">
        <a class="back-article-link" href="{{ url_for('main_bp.blog') }}">
            <button class="back-article"> <img src="{{url_for('static', filename='icons/back-grey.svg')}}">
                Back</button>
        </a>
        <h1 class="article-header-font">
            {{blog.title}}
        </h1>
        <img style="width:100%" src="{{url_for('static', filename='article_png/article-large.png')}}">
        <div>
            <p class="article-body-font">
                {% for paragraph in blog.get_paragraphs() %}
                {{paragraph}}
                <br>
                {% endfor %}
            </p>
        </div>
    </article>
</div>

{% endblock content %}