Add category page and make categories in block clickable

_sass/_base.scss

@@ -11,6 +11,10 @@
   box-sizing: border-box;
 }
 
+:root {
+  scroll-padding-top: 100px;
+}
+
 html,
 body {
   height: 100%;

_sass/_blog.scss

@@ -7,15 +7,16 @@
     margin: 1rem;
     border: 1px solid #ddd;
 
-    a {
+    .post-link {
       display: flex;
       flex-direction: column;
 
       @media screen and (min-width: 560px) {
         flex-direction: row;
       }
 
-      div:first-child {
+
+      .post-image {
         flex: none;
 
         @media screen and (min-width: 560px) {
@@ -37,7 +38,7 @@
         }
       }
 
-      div:last-child {
+      .post-content {
         flex: 1 1 0%;
         padding: .5rem 1rem;
 
@@ -54,6 +55,11 @@
             color: #88ba30;
           }
         }
+
+        .category-link {
+          text-decoration: none;
+          color: white;
+        }
       }
     }
   }

_sass/_categories.scss

@@ -0,0 +1,9 @@
+
+
+.categories-head {
+  margin: 20px;
+}
+
+.categories-container {
+  margin-bottom: 30px;
+}

blog.html

@@ -9,29 +9,33 @@
 <h2>Le blog</h2>
 
 <ul class="blogroll">
-    {% for post in paginator.posts %}
-      <li>
-        <a href="{{ post.url | relative_url }}">
-          <div>
-            {% if post.image %}
-            <img src="{{ post.image }}" alt="{{ post.title }}">
-            {% endif %}
-          </div>
-          <div>
-            <h2>{{ post.title }}</h2>
-            <ul class="post-categories">
-              {% for category in post.categories %}
-                  <li>{{ category }}</li>
-              {% endfor %}
-            </ul>
-            <p class="post-meta">
-              <span class="published">Publié le <time datetime="{{ post.date }}">{{ post.date | date: "%d/%m/%Y" }}</time></span>
-              par <span class="author">{{ post.author }}</span>
-            </p>
-          </div>
-        </a>
-      </li>
-    {% endfor %}
+  {% for post in paginator.posts %}
+  <li>
+    <a href="{{ post.url | relative_url }}">
+      <div class="post-link">
+
+        <div class="post-image">
+          {% if post.image %}
+          <img src="{{ post.image }}" alt="{{ post.title }}">
+          {% endif %}
+        </div>
+        <div class="post-content">
+          <h2>{{ post.title }}</h2>
+          <ul class="post-categories">
+            {% for category in post.categories %}
+            <li><a class="category-link" href="/categories/#{{category|slugify}}">{{ category }}</a></li>
+            {% endfor %}
+          </ul>
+          <p class="post-meta">
+            <span class="published">Publié le <time datetime="{{ post.date }}">{{ post.date | date: "%d/%m/%Y"
+                }}</time></span>
+            par <span class="author">{{ post.author }}</span>
+          </p>
+        </div>
+      </div>
+    </a>
+  </li>
+  {% endfor %}
 </ul>
 
 {% if paginator.total_pages > 1 %}
@@ -73,4 +77,4 @@ <h2>{{ post.title }}</h2>
   {% endif %}
 
 </ul>
-{% endif %}
+{% endif %}

categories.html

@@ -0,0 +1,22 @@
+---
+layout: default
+permalink: /categories/
+title: Categories
+---
+
+
+<div>
+  <h1>Catégories</h1>
+{% for category in site.categories %}
+  <div class="categories-container"  >
+    {% capture category_name %}{{ category | first }}{% endcapture %}
+    <h3 class="categories-head" id="{{ category_name | slugify }}" >{{ category_name }}</h3>
+    <a name="{{ category_name }}"></a>
+    {% for post in site.categories[category_name] %}
+    <article class="archive-item">
+      <h4><a href="{{ site.baseurl }}{{ post.url }}">{{post.title}}</a></h4>
+    </article>
+    {% endfor %}
+  </div>
+{% endfor %}
+</div>