{% extends "base.html" %}
{% block head %}
  {{ super() }}
  {% for keyword in article.keywords %}
    <meta name="keywords" contents="{{keyword}}" />
  {% endfor %}

  {% for description in article.description %}
    <meta name="description" contents="{{description}}" />
  {% endfor %}

  {% for tag in article.tags %}
    <meta name="tags" contents="{{tag}}" />
  {% endfor %}
{% endblock %}

{% block extrahead %}
<style>

h1 {
    font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
    padding: 80px 50px;
    text-align: center;
    text-transform: uppercase;
    text-rendering: optimizeLegibility;
    color: #202020;
    letter-spacing: .1em;
    text-shadow:
        -1px -1px 1px #111,
        2px 2px 1px #eaeaea;
}

#main {
    text-align: justify;
    text-justify: inter-word;
}
#main h1 {
    padding: 10px;
}

.post-headline {
    padding: 15px;
}
</style>
{% if article.image %}
<style>
#illustration {
    max-width: 800px;
    align: center;
    margin: auto;
}
</style>
{% endif %}
{% endblock %}

{% block title %}{{ article.title }} - {{ SITENAME }}{% endblock %}

{% block content %}
<div id="main" class="posts">
<h1 class="post-title">{{ article.title }}</h1>
<span class="post-date">{{ article.locale_date | capitalize }}, dans <a class="no-color" href="{{ article.category.url }}">{{ article.category }}</a></span>
<img id="illustration" src="{{ article.image}}" />

<div class="post article">
    {% if article.headline %}
    <h2 class="post-headline">{{ article.headline }}</h2>
    {% endif %}
    <h1>🌟</h1>
    {{ article.content }}
    {% if article.image and article.image_link and article.image_author and article.image_license %}
    <em>L'image d'illustration utilisée est un travail de <a href="{{ article.image_link }}">{{ article.image_author}}</a> proposé sous license {{ article.image_license }}. Merci !</em>
    {% endif %}
  </div>
</div>
{% endblock %}