{% extends "base.html" %}

 {% block header %}
 
 {{ __tera_context }}
 
<header>
  <section class='hero has-text-centered is-large is-info has-bg-img'>
      <div class="hero-head mx-5">
        <div class="level mt-4">
          <div class="level-left">
            
            <p class="level-item subtitle is-size-5-desktop is-size-7-mobile">
              Image d'illustration Clint__Budd - CC BY 2.0
            </p>
            
          </div>
          <div class="level-right mt-3 is-hidden-touch">
            <div class="level-item">
              
              <div class="tags colums is-vcentered">
              
                <span class="tag is-info is-light is-large mr-4"><a href="https://blog.chosto.me/%20categories/fiction">Fiction</a></span>
                
                <span class="tag is-info is-light is-large mr-4"><a href="https://blog.chosto.me/%20categories/num%C3%A9rique">Numérique</a></span>
                
              </div>
              
            </div>
        </div>

      </div>
      <div class="hero-body  container has-text-centered">
        <p class="title is-size-1-desktop is-size-3-mobile is-uppercase">Imaginer un numérique souhaitable</p>
        
      </div>
      
      
      <div class="hero-foot mb-5 mx-5 content">
        <div class="level">
          <div class="level-left">
            <div class="level-item has-text-left">
              <time datetime="2023-01-20T00:00:00Z">
                <p class="mb-2 subtitle is-size-5-desktop is-size-7-mobile">📅&nbsp;&nbsp;Article publié le <strong>20 janvier 2023</strong></p>
              </time>
            </div>
          </div>
          <div class="level-right">
            <div class="level-item has-text-right">
              <div>
                <p class="mb-2 subtitle is-size-5-desktop is-size-7-mobile">🕑&nbsp;&nbsp;Environ <strong>13 minutes</strong> de lecture
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      
    </div>
  </section>
</header>
{% endblock %}

{% block content %}
<section class="hero has-text-centered is-large is-info">
<h1 class="title is-1">
  {{ page.title }}
</h1>
<h2 class="title is-2">
La génèse
</h2>
<p class="subtitle"><strong>{{ page.date }}</strong></p>
</section>
<div class="content">
{{ page.content | safe }}
</div>

<aside class="container level my-5">
        <div class="level-left">
          {% if page.higher %}
          <div class="level-item">
            <a class="button is-link is-light is-medium has-text-weight-bold" href="{{ page.higher.permalink }}">{{ page.higher.title }}</a>
          </div>
           {% endif %}
        </div>
        <div class="level-right">
         {% if page.lower %}
          <div class="level-item">
            <a class="button is-link is-light is-medium has-text-weight-bold" href="{{ page.lower.permalink }}">{{ page.lower.title }}</a>
          </div>
           {% endif %}
        </div>
</aside>
{% endblock content %}