blog

{% load i18n %}

{% load static %}

{% block stylesheets %}

    {{ block.super }}

    <style>

    img {

    width: 80%;

     display: block;

  margin-left: auto;

  margin-right: auto;

    }

    video {

    width: 80%;

    } 

    </style>

{% 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 header %}

<header>                                                                                                                                                                                         

    <label for="nav-drawer-toggle">≡</label>

    <h1>{% trans "Notepad of a student" %}</h1>  

</header>

{% endblock header %}

{% block nav %}

<input id="nav-drawer-toggle" type="checkbox" />

<nav>

    <label for="nav-drawer-toggle"><!--🡨-->🡠</label>

    <h2>{% trans "Navigation" %}</h2>

    <a class="nav-link" href="{% url 'about-index' %}">{% trans "Front page" %}</a>

    <hr>

    {% for post in posts %}

    {% if post.article %}

        <a class="nav-link" href="{% url 'blog-post' post.article.language_code post.article.slug %}">

            {{ post.title }}

        </a>

    {% else %}

        {% for article in post.articles %}

        <a class="nav-link" href="{% url 'blog-post' article.language_code article.slug %}">

            {% if article.language_code == "nl-be" %}

            ({% translate "Flemish" %})

            {% elif article.language_code == "fr-be" %}

            ({% translate "Belgian French" %})

            {% endif %}

            {{ article.title }}

        </a>

        {% endfor %}

    {% endif %}

    <hr class="half">

    {% endfor %}

  </nav>

{% endblock nav %}

{% block main %}

<section class="emphasis">

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

    <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>

</section>

<div class="fab" style="padding: 0.5em; font-size: 2em;">

    <a href="{% url 'blog-feed' %}" id="feed-fab"> 

    <!--<b>RSS</b>-->

    <img src="{% get_media_prefix %}blog/path.png">

    </a>

</div>

<section>

    {% for post in posts %}

        <div class="card">

            <h3>{{ post.title }}</h3>

            <h4>{{ post.published|date:"DATE_FORMAT" }}</h4>

            {% if post.article %}

                {# No need for surrounding <p> tags #}

                {{ post.article.text|safe|truncatewords_html:100 }}

                {# Pandoc automatically makes those #}

                <a class="btn outline" href="{% url 'blog-post' post.article.language_code post.article.slug %}">

                    📚 {% translate "Read on" %}</a>

            {% else %}

                {% get_current_language as CUR_LANG %}

                {% get_language_info for CUR_LANG as lang %}

                {{ CUR_LANG.name_translated }}

                <p>{% blocktranslate with cur_lang=lang.name_translated %}This blog

               post is not available in {{ cur_lang }}.{% endblocktranslate %}

                    {% blocktranslate count counter=post.articles|length %}

                    However, it is available in 

                    {% plural %}

                    If you want, you can choose to read it in one of these

                    languages: <br>

                    {% endblocktranslate %}

                    {% for article in post.articles %}

                        {% if article.language_code == "nl-be" %}

                        {% translate "Flemish" %}:

                        {% elif article.language_code == "fr-be" %}

                        {% translate "Belgian French" %}:

                        {% else %}

                        {% get_language_info for article.language_code as lang %}

                        {{ lang.name_translated }}: 

                        {% endif %}

                        <a href="{% url 'blog-post' article.language_code article.slug %}">

                            {{ article.title }}

                        </a>

                        {% if not forloop.last %}<br>{% endif %}

                    {% endfor %}

                </p>

            {% endif %}

        </div>

    {% endfor %}

    {% comment %}

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

        <div class="card">

            <h3>{{ title }}</h3>

            <h4>{{ date|date:"DATE_FORMAT" }}</h4>

        <a class="btn outline" href="{{link}}">📚 {% translate "Read on" %}</a>

        </div>

    {% endfor %}

    {% endcomment %}

</div>

{% endblock main %}

{% load humanize %}

{% load i18n %}

{% load static %}

{% block stylesheets %}

{{ block.super }}

<style>

pre {

    border-style: dashed;

    padding: 1em;

    display: inline-block;

}

span.bu {

    color: #FF9800;

}

span.im {

    color: #FF9800;

    font-weight: bold;

}

span.op {

    color: #33691E;

}

span.fl {

    color: #0e84b5;

}

span.dv {

    color: #00BCD4;

}

span.cf {

    color: #E91E63;

    font-weight: bold;

}

@font-face {

  font-family: 'Merriweather';

  font-style: italic;

  font-weight: 400;

  src: url({% get_static_prefix %}fonts/merriweather-400-italic.woff2) format('woff2');

  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;

}

@font-face {

  font-family: 'Merriweather';

  font-style: normal;

  font-weight: 400;

  src: url({% get_static_prefix %}fonts/merriweather-400-regular.woff2) format('woff2');

  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;

}

@font-face {

  font-family: 'Merriweather';

  font-style: normal;

  font-weight: 700;

  src: url({% get_static_prefix %}fonts/merriweather-700-regular.woff2) format('woff2');

  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;

}

body {

    background-color: #0d1521; /*#0d47a1; /* Material blue P900 */

}

/*

header {

    background-color: #3e2723;

}*/

section.article {

    /*background-color: #efebe9;/*rgb(210, 188, 157);*/

    font-family: Merriweather, serif;

    /*color: var(--light-black);*/

}

/*section.article @media (prefers-color-scheme: dark) {

        background-color: var(--P100);

        background-color: red;

    }*/

.comment {

    margin-left: 0.2em;

    padding-left: 0.5em;

    padding-bottom: 0.5em;

    border-left-style: solid;

    border-color: var(--primary);

}

.recently-posted {

    background-color: var(--P100);

}

span.small-detail {

    font-size: smaller;

    color: grey;

}

</style>

{% endblock stylesheets %}

{% block description %}

{{ article.text|safe|truncatewords_html:10 }}

{% block title %}📚 {{ navbar_title }}{% endblock title %}

{% block header %}

<header>

    <label for="nav-drawer-toggle">≡</label>

    <h1>{{ navbar_title }}</h1>

</header>

{% endblock header %}

{% block nav %}

<input id="nav-drawer-toggle" type="checkbox">

<nav>

    <label for="nav-drawer-toggle">🡠</label>

    <h2>{% translate "Table of contents" %}</h2>

    <a class="nav-link" href="{% url "blog-index" %}">{% translate "Blog index" %}</a>

    <a class="nav-link" href="{% url "about-index" %}">{% translate "Main page" %}</a>

    <hr class="half">

    {% for header, slug in article.headings %}

    <a class="nav-link" href="#{{ slug }}">{{ header }}</a>

    {% endfor %}

</nav>

{% endblock nav %}

{% block main %}

<section class="article">

    <!--<article style="font-family:serif;">-->

    {#{{ article.text|safe }}#}

    {#{% include "/tmp/blog-file.djhtml" %}#}

    {% include djhtml_file %}

    <!--</article>-->

</section>

{% if comment_response %}

<div class="snackbar">

    {{ comment_response }}

</div>

{% endif %}

<section class="reagoj">

    <h2>{% translate "Comments" %}</h2>

    <form method="POST" action="#reagoj">

        {% csrf_token %}

        <input type="hidden" name="reaction_to" value="">

        <input type="hidden" name="post" value="{{ article.post.id }}">

        <input type="text" id="name-root" name="name" maxlength="64" required>

        <label for="name-root">{% translate "Your name" %}</label><br>

        <textarea placeholder="{% translate "Your comment" %}" rows="2" cols="30" name="text" id="text-{{ comment.id }}" maxlength="10000" required></textarea><br>

        <input type="submit" value="{% translate "Submit" %}">

    </form>

    <hr>

    {% for root_comment in root_comments %}

        {% include "blog/comment.djhtml" with comment=root_comment %}

    {% endfor %}

</section>

{% comment %}

<h5 class="white-text">{% trans "This article in other languages" %}</h5>

{% get_language_info for 'nl' as LANG %}

<a {% if dutch_link %} href="{{dutch_link}}" {% endif %}

   class="btn fill

   {% if not dutch_link %}disabled{% endif %}">

    🇧🇪 {{ LANG.name_translated}} 🇳🇱

</a>

{% get_current_language as lang %}

{% get_language_info for 'fr' as LANG %}

<a {% if french_link %} href="{{french_link}}" {% endif %}

   class="btn fill

   {% if not french_link %}disabled{% endif %}">

    🇧🇪 {{ LANG.name_translated}} 🇫🇷

</a>

{% get_language_info for 'en' as LANG %}

<a {% if english_link %} href="{{english_link}}" {% endif %}

   class="btn fill

   {% if not english_link %}disabled{% endif %}">

    🇬🇧 {{ LANG.name_translated}} 🇺🇸

</a>

{% get_language_info for 'de' as LANG %}

<a {% if german_link %} href="{{german_link}}" {% endif %}

   class="btn fill

   {% if not german_link %}disabled{% endif %}">

    🇧🇪 {{ LANG.name_translated}} 🇩🇪

</a>

{% get_language_info for 'es' as LANG %}

<a {% if spanish_link %} href="{{spanish_link}}" {% endif %}

   class="btn

   {% if not spanish_link %}disabled{% endif %}">

    🇪🇸 {{ LANG.name_translated}} 🇲🇽

</a>

{% endcomment %}

{% comment %}

<a href="{% url 'blog-post' post_slug %}" class="btn {{accent_color}} accent-4 black-text tooltipped" data-position="bottom" data-delay="50" data-tooltip="{% trans "Multilingual link. Links to the version in the viewer's preferred language." %}">🏳️‍🌈 {% trans "All available languages" %}</a>

    {# TODO: Change to rainbow flag when possible #}

{% endcomment %}

    </div>

</div>

{% endblock main %}