blog

{% load i18n %}

{% load static %}

{% block stylesheets %}

{{ block.super }}

{#<link href="{% static "blog/stylesheet.css" %}" rel="stylesheet" media="screen, projection" />#}

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">

    <!-- Compiled and minified JavaScript -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>

{% endblock %}

{% block title %}{% trans "Maarten's blog" %}{% endblock title %}

{% block description %}{% blocktrans %}The always coherently put together, yet

fuzzy blog of whatever sprouts in my mind.{% endblocktrans %}

{% endblock description %}

{% block main %}

{% with color="brown" accent_color="yellow" %}

<div class="section {{ color }} z-depth-3">

    <div class="container">

        <div class="white-text">

            <h3>{% trans "Blog" %}</h3>

            <p>

                {% blocktrans %}Welcome to my blog. Here, I write

                about things that interest me. Politics, coding,

                studying, life, or anything else I fancy rambling

                about. If you're in luck, I may've written it in a

                language that you understand better than English.

                {% endblocktrans %}

            </p>

        </div>

    </div>

</div>

<div class="fixed-action-btn">

    <a href="{% url 'blog-feed' %}" id="feed-fab" class="btn-floating waves-effect waves-light btn-large orange accent-4">

    <i class="large material-icons">rss_feed</i>

    </a>

</div>

<div class="container row">

    <div class="col s12 m6">

        <h1 id="weekly" class="{{ color }}-text">Weekly</h1>

        {% include "blog/weekly.html" %}

    </div>

    <div class="container col s12 m6">

        {% for title, date, blog_text, link in posts %}

            <h1 class="{{ color}}-text">{{ title }}</h2>

            <span class="grey-text">{{ date|date:"DATE_FORMAT" }}</span>

            <p class="hide-on-small-only">{{ blog_text|safe|truncatewords_html:100 }}</p>

            <a class="btn black-text waves-effect {{accent_color}} accent-4" href="{{link}}">

                📚 {% trans "Read on"%}

            </a>

            <hr />

        {% endfor %}

    </div>

</div>

{% if introduce_feed %}

    <div class="orange accent-4 tap-target" data-target="feed-fab">

        <div class="white-text tap-target-content">

            <h5>{% trans "Never miss an update again." %}</h5>

            <p>{% blocktrans %}Getting info on updates to blog posts, major website changes, and other important

                news items is now easy and convenient with RSS.

                {% endblocktrans %}</p>

        </div>

    </div>

    <script>

	    var elem = document.querySelector('.tap-target');

		console.log(elem);

		var instance = M.TapTarget.init(elem, null);

		console.log(instance);

		instance.open();

    </script>

{% endif %}

<a class="waves-effect waves-light btn" onclick="$('.tap-target').tapTarget('open')">Open tap target</a>

{% endwith %}

{% endblock main %}