blog: Put posts on cards

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>

diff --git a/src/templates/blog/index.html b/src/templates/blog/index.html
index 99478c8e7e89d5c4f9f1e396ecb286b86f4442df..f17e82401b87d75238c41e7399aa3ba5803508ce 100644 (file)
--- a/src/templates/blog/index.html
+++ b/src/templates/blog/index.html
@@ -89,15 +89,9 @@
                        {% end %}
 
                        {% module BlogList(posts, latest=latest_post) %}
-               </div>
-       </section>
 
                        {# Show links to older years... #}
-       <section class="section">
-               <div class="container">
-                       <div class="block">
-                               {% module BlogHistoryNavigation() %}
-                       </div>
+                       {% module BlogHistoryNavigation() %}
                </div>
        </section>
 {% end block %}

diff --git a/src/templates/blog/modules/list.html b/src/templates/blog/modules/list.html
index 2b83ccc4d2bae8d7d1316ba8aaaec4ee91a01fbd..0553f5b2ac27af2bfb45f60b9c94e7bcd85f1f2f 100644 (file)
--- a/src/templates/blog/modules/list.html
+++ b/src/templates/blog/modules/list.html
@@ -2,75 +2,77 @@
        {# Highlight the latest post #}
        {% set highlighted = (post == latest) %}
 
-       <article class="media">
-               <div class="media-content">
-                       {% if highlighted %}
-                               <p class="heading has-text-primary">
-                                       {{ _("Latest Post") }}
-                               </p>
-                       {% else %}
-                               {% module BlogTag(post) %}
-                       {% end %}
-
-                       <div class="columns">
-                               <div class="column">
-                                       <p class="title {% if highlighted %}is-3{% else %}is-4{% end %}">
-                                               <a {% if "lightningwirelabs.com" in post.tags %}class="has-text-lwl"{% end %} href="/blog/{{ post.slug }}">
-                                                       {{ post.title }}
-                                               </a>
+       <div class="block">
+               <div class="card">
+                       <div class="card-content">
+                               {% if highlighted %}
+                                       <p class="heading has-text-primary">
+                                               {{ _("Latest Post") }}
                                        </p>
-                               </div>
+                               {% else %}
+                                       {% module BlogTag(post) %}
+                               {% end %}
 
-                               {% if not highlighted and post.published_at %}
-                                       <div class="column is-narrow has-text-grey">
-                                               <small>
-                                                       {{ locale.format_date(post.published_at, shorter=True, relative=False) }}
-                                               </small>
+                               <div class="columns">
+                                       <div class="column">
+                                               <p class="title {% if highlighted %}is-3{% else %}is-4{% end %}">
+                                                       <a {% if "lightningwirelabs.com" in post.tags %}class="has-text-lwl"{% end %} href="/blog/{{ post.slug }}">
+                                                               {{ post.title }}
+                                                       </a>
+                                               </p>
                                        </div>
-                               {% end %}
-                       </div>
 
-                       <div class="content">
-                               {% module Markdown(post.excerpt) %}
-                       </div>
+                                       {% if not highlighted and post.published_at %}
+                                               <div class="column is-narrow has-text-grey">
+                                                       <small>
+                                                               {{ locale.format_date(post.published_at, shorter=True, relative=False) }}
+                                                       </small>
+                                               </div>
+                                       {% end %}
+                               </div>
+
+                               <div class="content">
+                                       {% module Markdown(post.excerpt) %}
+                               </div>
 
-                       <div class="level is-mobile">
-                               <div class="level-left">
-                                       <div class="level-item">
-                                               <small>
-                                                       {% if "lightningwirelabs.com" in post.tags %}
-                                                               <span class="has-text-lwl">
-                                                                       {{ _("by Lightning Wire Labs") }}
-                                                               </span>
-                                                       {% elif show_author and post.author %}
-                                                               <span class="icon-text">
-                                                                       <span class="icon">
-                                                                               {% module Avatar(post.author, size=24) %}
+                               <div class="level is-mobile">
+                                       <div class="level-left">
+                                               <div class="level-item">
+                                                       <small>
+                                                               {% if "lightningwirelabs.com" in post.tags %}
+                                                                       <span class="has-text-lwl">
+                                                                               {{ _("by Lightning Wire Labs") }}
                                                                        </span>
+                                                               {% elif show_author and post.author %}
+                                                                       <span class="icon-text">
+                                                                               <span class="icon">
+                                                                                       {% module Avatar(post.author, size=24) %}
+                                                                               </span>
 
-                                                                       <a href="/users/{{ post.author.uid }}">
-                                                                               {{ post.author }}
-                                                                       </a>
-                                                               </span>
+                                                                               <a href="/users/{{ post.author.uid }}">
+                                                                                       {{ post.author }}
+                                                                               </a>
+                                                                       </span>
+                                                               {% end %}
+                                                       </small>
+                                               </div>
+
+                                               {% if highlighted %}
+                                                       {% if post.published_at %}
+                                                               <div class="level-item">
+                                                                       <small>
+                                                                               {{ locale.format_date(post.published_at, shorter=True, relative=True) }}
+                                                                       </small>
+                                                               </div>
                                                        {% end %}
-                                               </small>
-                                       </div>
 
-                                       {% if highlighted %}
-                                               {% if post.published_at %}
                                                        <div class="level-item">
-                                                               <small>
-                                                                       {{ locale.format_date(post.published_at, shorter=True, relative=True) }}
-                                                               </small>
+                                                               {% module BlogTag(post) %}
                                                        </div>
                                                {% end %}
-
-                                               <div class="level-item">
-                                                       {% module BlogTag(post) %}
-                                               </div>
-                                       {% end %}
+                                       </div>
                                </div>
                        </div>
                </div>
-       </article>
+       </div>
 {% end %}