---
layout: default
route: blog
breadcrumb:
- home
- blog
---

{% include global/navbar.html id="Blog" %}

<main class="bd-main">
  <div class="bd-side-background"></div>
  <div class="bd-main-container container">
    <div class="bd-duo">
      <div class="bd-lead">
        <div class="bd-breadcrumb">
          <nav class="breadcrumb" aria-label="breadcrumbs">
            <ul>
              <li>
                {% assign link = site.data.links.by_id['home'] %}
                <a href="{{ site.url }}{{ link.path }}">{{ link.name }}</a>
              </li>
              <li>
                {% assign link = site.data.links.by_id['blog'] %}
                <a href="{{ site.url }}{{ link.path }}">{{ link.name }}</a>
              </li>
              <li class="is-active">
                <a href="{{ page.url }}">{{ page.name }}</a>
              </li>
            </ul>
          </nav>

          {% if page.previous.url or page.next.url %}
            <nav class="bd-prev-next">
              {% if page.previous.url %}
                <a href="{{ site.url }}{{ page.previous.url }}">
                  ←
                </a>
              {% else %}
                <span>
                  ←
                </span>
              {% endif %}

              {% if page.next.url %}
                <a href="{{ site.url }}{{ page.next.url }}">
                  →
                </a>
              {% else %}
                <span>
                  →
                </span>
              {% endif %}
            </nav>
          {% endif %}
        </div>

        <header class="bd-header">
          <div class="bd-header-titles">
            <h1 class="title">
              {{ page.title }}
            </h1>
            <p class="subtitle is-4">
              {{ page.date | date_to_string }}
            </p>
          </div>

          <div class="bd-header-carbon">
            {% include elements/carbon.html %}
          </div>
        </header>

        <div class="bd-content">
          <div class="columns">
            <div class="column is-offset-2 is-8">
              <div class="content is-medium">
                {{ content }}
              </div>
            </div>
          </div>
        </div>

        <nav class="bd-prev-next-bis">
          {% if page.previous.url %}
            <a class="bd-prev-next-bis-previous" href="{{ page.previous.url }}">
              ← {{ page.previous.title }}
            </a>
          {% endif %}

          {% if page.next.url %}
            <a class="bd-prev-next-bis-next" href="{{ page.next.url }}">
              {{ page.next.title }} →
            </a>
          {% endif %}
        </nav>
      </div>
    </div>
  </div>
</main>