style: 💄 Improve posts grouped by tag (#113)

Author: mattboll

site/layouts/tags/li.html

@@ -0,0 +1,35 @@
+{{ $baseurl := .Site.BaseURL }}
+
+<div>
+  {{ if .Truncated }}
+    <a aria-label="En savoir plus sur {{ .Title }}" href="{{ .Permalink }}">
+  {{ end }}
+  {{ with .Resources.GetMatch .Params.cover }}
+    {{ with .Fill "336x200 Center webp q100" }}
+    <div class="img-container" style="background-image: url('{{ .RelPermalink }}')"></div>
+    {{ end }}
+  {{ end }}
+  {{ if .Truncated }}
+    </a>
+  {{ end }}
+  <div>
+    <h2>
+      {{ if .Truncated }}
+      <a aria-label="En savoir plus sur {{ .Title }}" href="{{ .Permalink }}">{{ .Title }}</a>
+      {{ else }}
+      {{ .Title }}
+      {{ end }}
+    </h2>
+    <ul class="tags">
+      {{ range $index, $tag := .Params.tags }}
+      <li><a aria-label="Tag {{ $tag }}" href="/tags/{{ $tag | urlize }}/">{{ $tag }}</a></li>
+      {{ end }}
+    </ul>
+    <p>{{ .Summary | truncate 100 }}</p>
+    {{ if .Truncated }}
+    <a aria-label="Voir tous les articles" class="read-more" href="{{ .Permalink }}">En savoir plus
+      {{ partial "arrow_right.html" . }}
+    </a>
+    {{ end }}
+  </div>
+</div>

site/layouts/tags/list.html

@@ -0,0 +1,35 @@
+{{ define "main" }}
+
+<section id="blogs">
+    <div class="wrapper">
+        <h1>
+            Blog
+        </h1>
+    </div>
+
+    <section id="articles">
+        <div class="wrapper">
+            {{ range $index, $page := .Paginator.Pages }}
+            {{ .Render "li" }}
+            {{ end }}
+        </div>
+        {{ if or (.Paginator.HasPrev) (.Paginator.HasNext) }}
+        <div class="pagination">
+            {{ if .Paginator.HasPrev }}
+            <a href="{{ .Paginator.Prev.URL }}" class="previous-page">
+                <div class="arrow">{{ partial "arrow_left.html" . }}</div>
+                Page précédente
+            </a>
+            {{ end }}
+            {{ if .Paginator.HasNext }}
+            <a href="{{ .Paginator.Next.URL }}" class="next-page">
+                Page suivante
+                <div class="arrow">{{ partial "arrow_right.html" . }}</div>
+            </a>
+            {{ end }}
+        </div>
+        {{ end }}
+    </section>
+
+</section>
+{{end}}