{% extends "mobile-layout.html" %} {% macro sentence_case(text) %} {{
    text[0]|upper}}{{text[1:] }} {% endmacro %} {% block header %}
    <script src="{{url_for('static', filename='infiniteScroll.js')}}"></script>
    <script src="{{url_for('static', filename='searchSort.js')}}"></script>
    
    <style>
        #projectdiv {
            background-color: #ffffff10;
            opacity: 100%;
        }

        article:last-of-type{
            margin-bottom: 10rem;
        }

        .article{
            width: unset;
        }
        .articles{
            margin-top: 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">
        {% for blog in blogs %}
        <article class="article">
            <!-- <img src="{{url_for('static', filename='article_png/article-thumb.png')}}"> -->
            <div>
                <h1 class="article-header-font">
                    {{blog.title}}
                </h1>
                <p class="article-preview-font">
                    {{blog.full_text()}}
                </p>
                <a href="{{ url_for('main_bp.blog', slug = blog.slug) }}">
                    <button class="view-article">View Article</button>
                </a>
            </div>
        </article>
        {% endfor %}
    </div>
    
    {% endblock content %}