diff --git a/article-img.twig b/article-img.twig
new file mode 100644
index 0000000000000000000000000000000000000000..0bc5876c970125874cd52b2da8b8b30fde1f0482
--- /dev/null
+++ b/article-img.twig
@@ -0,0 +1 @@
+<img style="max-width:300px;max-height:200px;" src="{{assets_url}}/img/blog/{{img}}">
diff --git a/base.twig b/base.twig
index 01bd5801a2a1222ed21b1b0a770ce0950138da29..d612b26321bb9dee0e18c1982d8b2888b5e0948c 100644
--- a/base.twig
+++ b/base.twig
@@ -38,6 +38,7 @@
<div class="collapse navbar-collapse flex-grow-0 ml-auto" id="navbarsExample03">
<ul class="navbar-nav mr-auto">
+ {% set tags = get_all_tags() %}
{% for page in pages if page.title %}
{% if parentPage and not (page.id starts with parentPage) %}
{% set parentPage = null %}
@@ -55,6 +56,13 @@
<li class="{% if page.id == current_page.id %} active{% endif %} dropdown show nav-link">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{ page.title }}</a>
<ul class="dropdown-menu">
+ {% if page.title == 'Blog' %}
+ <li class="nav-link"><a href="{{base_url}}/blog">Tous les articles</a></li>
+ {% for tag in tags|sort %}
+ <li class="nav-link"><a href="{{base_url}}/blog/?tag={{ tag }}">{{ tag }}</a></li>
+ {% endfor %}
+ </ul>
+ {% endif %}
{% elseif (pageDepth == 2) and parentPage %}
<li class="nav-link"><a href="{{ page.url }}">{{ page.title }}</a></li>
{% endif %}
@@ -70,11 +78,11 @@
</header>
<div id="main" role="main">
- <div class="container">
+ <section class="content wrap">
{% block content %}
{{ content }}
{% endblock %}
- </div>
+ </section>
</div>
<footer id="bottom">
diff --git a/blog-index.twig b/blog-index.twig
index d70298633ed0504ce464cc3341f743c4188b2cf0..e2685838797d96f2d307a6ec82ecf8d6ef1f8d01 100644
--- a/blog-index.twig
+++ b/blog-index.twig
@@ -1,7 +1,40 @@
-{% for page in pages("blog")|sort_by("time")|reverse if not page.hidden %}
-<div class="post">
- <h3><a href="{{ page.url }}">{{ page.title }}</a></h3>
- <p class="date">{{ page.date_formatted }}</p>
- <p class="excerpt">{{ page.description }}</p>
-</div>
-{% endfor %}
+{% extends "base.twig" %}
+{% block content %}
+ {% set tag = url_param('tag', 'string') %}
+ <h1 style="text-align:center" >
+ {% if tag %}
+ {{tag}}
+ {% else %}
+ Tous les articles
+ {% endif %}
+ </h1>
+ <ul class="items">
+ {% for page in pages("blog", depth=null)|sort_by("time")|reverse if not page.hidden %}
+ {% if not tag or tag in page.meta.tags %}
+ <li>
+ <article class="wrap">
+ <div class="row">
+ <div class="col-md-6 col-sd-12">
+ <a href="{{ page.url }}" title="{{ page.title}}">
+ {% set img = page.meta.img %}
+ {% include "article-img.twig" %}
+ </a>
+ <div style="font-size:small;padding-top:15px">
+ Posté le <time datetime="{{page.time}}">{{page.date_formatted}}</time> par {{page.author}}.
+ </p>
+ </div>
+ </div>
+ <div class="col-md-6 col-sd-12">
+ <h2 style="padding:0px">
+ <a href="{{page.url}}" title="{{page.title}}">{{page.title}}</a>
+ </h2>
+ <div class="contents">
+ {{ page.description }}
+ </div>
+ </div>
+ </article>
+ </li>
+ {% endif %}
+ {% endfor %}
+ </ul>
+{% endblock %}
diff --git a/blog-post.twig b/blog-post.twig
new file mode 100644
index 0000000000000000000000000000000000000000..bcdb5552c4256f3b6ffd098a8b88e1d7527b4ea4
--- /dev/null
+++ b/blog-post.twig
@@ -0,0 +1,37 @@
+{% extends "base.twig" %}
+{% block content %}
+ {% set tag = url_param('tag', 'string') %}
+ {{page.raw_content}}
+
+ <div class="row" style="padding:70px">
+ <div class="col-md-5 col-sd-12">
+ {% set img = meta.img %}
+ {% include "article-img.twig" %}
+ </div>
+ <div class="col-md-7 col-sd-12">
+ <h2>
+ {{meta.title}}
+ </h2>
+ </div>
+ </div>
+ <article>
+ {{content}}
+ </article>
+
+ <section class="footnote">
+ <!-- Unfortunately, CSS means everything's got to be inline. -->
+ <p></p>
+ <ul style="list-style:none;box-sizing:border-box">
+ {% if 'blog' in previous_page.url %}
+ <li style="float:left;padding:15px"><a href="{{previous_page.url}}">Article précédent</a></li>
+ {% endif %}
+ {% for tag in meta.tags %}
+ <li style="float:left;padding:15px"><a href="{{base_url}}/blog?tag={{tag}}">Tous les articles de la catégorie {{tag}}</a></li>
+ {% endfor %}
+ {% if next_page.url != meta.url %}
+ <li style="float:left;padding:15px"><a href="{{next_page.url}}">Article suivant</a></li>
+ {% endif %}
+ </ul>
+ </section>
+ </section>
+ {% endblock %}
diff --git a/css/style.css b/css/style.css
index 58b560500d70d66bc8dcab2bab712ee0279ac6a0..0fb7d6745eb475c51b8480623306aafaae9f7b29 100644
--- a/css/style.css
+++ b/css/style.css
@@ -463,3 +463,45 @@ img.picture {
padding: 0 35px 20px 0;
font-size: 14px;
}
+
+#top #logo:hover, #top ul a:hover, #top ul .active a, .posts .items li h2 a:hover, p a:hover {
+ color: #41b171;
+}
+.items > li {
+ padding: 50px 0 50px;
+ border-top: 1px solid;
+ #color: #97c9ae;
+ #background: #3c4552;
+}
+
+.items {
+ list-style: none;
+}
+
+.items h2 a:hover {
+ color: #41b171;
+}
+.items h2 a {
+ display: block;
+ padding-bottom: 12px;
+ color: #fff;
+ color: #3d5145;
+ text-decoration: none;
+}
+
+.content ul, .content ol, .items li ul {
+ padding: 20px 30px;
+}
+
+.wrap {
+ min-width: 280px;
+ max-width: 1024px;
+ width: 80%;
+ margin: 0 auto;
+}
+
+.footnote {
+ padding: 20px 0 40px;
+ border-top: 1px solid;
+ margin: 20px 15px;
+}