blog: Move buttons to the top on posts page

This should hopefully be more inviting for people to click them instead
of hiding them at the end of the page where nobody ever gets to anyways.

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

diff --git a/src/templates/blog/post.html b/src/templates/blog/post.html
index 1bc4f96e3565b52f5371935750ece30b67d4e793..c1597ae30f5f262b01e5fdf97c7d17754947f5f6 100644 (file)
--- a/src/templates/blog/post.html
+++ b/src/templates/blog/post.html
@@ -84,33 +84,46 @@
                <div class="container">
                        <div class="columns">
                                <div class="column is-three-fifths">
-                                       <section class="section">
-                                               <div class="block">
-                                                       <div class="content">
-                                                               {% raw post.html %}
-                                                       </div>
-                                               </div>
+                                       <div class="buttons are-medium">
+                                               {% if "lightningwirelabs.com" in post.tags and post.link %}
+                                                       <a class="button is-lwl is-fullwidth" href="{{ post.link }}">
+                                                               <span class="icon-text">
+                                                                       <span class="icon">
+                                                                               <i class="fas fa-external-link-alt"></i>
+                                                                       </span>
+                                                                       <span>{{ _("Go to Lightning Wire Labs") }}</span>
+                                                               </span>
+                                                       </a>
+                                               {% end %}
 
-                                               <div class="buttons">
-                                                       {% if "lightningwirelabs.com" in post.tags and post.link %}
-                                                               <a class="button is-lwl" href="{{ post.link }}">
-                                                                       Go to Lightning Wire Labs <span class="fas fa-external-link-alt ml-2"></span>
-                                                               </a>
-                                                       {% end %}
+                                               {% if post.release or "donate" in post.tags %}
+                                                       <a class="button is-primary is-fullwidth" href="/donate">
+                                                               <span class="icon-text">
+                                                                       <span class="icon">
+                                                                               <i class="fas fa-heart"></i>
+                                                                       </span>
+                                                                       <span>{{ _("Donate") }}</span>
+                                                               </span>
+                                                       </a>
+                                               {% end %}
 
-                                                       {% if post.release %}
-                                                               <a class="button is-dark" href="/download/{{ post.release.slug }}">
-                                                                       {{ _("Download") }}
-                                                               </a>
-                                                       {% end %}
+                                               {% if post.release %}
+                                                       <a class="button is-dark is-fullwidth" href="/download/{{ post.release.slug }}">
+                                                               <span class="icon-text">
+                                                                       <span class="icon">
+                                                                               <i class="fas fa-download"></i>
+                                                                       </span>
+                                                                       <span>{{ _("Download %s") % post.release }}</span>
+                                                               </span>
+                                                       </a>
+                                               {% end %}
+                                       </div>
 
-                                                       {% if post.release or "donate" in post.tags %}
-                                                               <a class="button is-primary" href="https://www.ipfire.org/donate">
-                                                                       {{ _("Donate") }}
-                                                               </a>
-                                                       {% end %}
+                                       <div class="block">
+                                               <div class="content">
+                                                       {% raw post.html %}
                                                </div>
-                                       </section>
+                                       </div>
                                </div>
                        </div>
                </div>