post.html: styled posts

diff --git a/src/templates/blog/post.html b/src/templates/blog/post.html
index 1cafa2d0180f13709bf3a92e897d28aee8477e0b..bcb0ee5777614b3490148c7a1c5fe072fc0da62b 100644 (file)
--- a/src/templates/blog/post.html
+++ b/src/templates/blog/post.html
@@ -35,7 +35,7 @@
 {% end block %}
 
 {% block container %}
-       <div class="header">
+       <!--<div class="header">
                <div class="container">
                        <h1>{{ post.title }}</h1>
 
@@ -62,37 +62,95 @@
                                {% end %}
                        </p>
                </div>
-       </div>
+       </div>-->
 
-       <div class="container">
-               <section class="blog-post {% if "lightningwirelabs.com" in post.tags %}lightning-wire-labs{% end %}">
-                       <div class="row">
-                               <div class="col-12 col-lg-9">
-                                       <div class="blog-content">
-                                               {% raw post.html %}
-                                       </div>
-
-                                       <div class="btn-toolbar justify-content-center my-5">
-                                               {% if "lightningwirelabs.com" in post.tags and post.link %}
-                                                       <a class="btn btn-lwl" href="{{ post.link }}">
-                                                               Go to Lightning Wire Labs <span class="fas fa-external-link-alt ml-2"></span>
-                                                       </a>
-                                               {% end %}
+       <section class="hero has-background-primary-light">
+               <div class="hero-body">
+                       <div class="container">
+                               <nav class="breadcrumb is-medium" aria-label="breadcrumbs">
+                                       <ul>
+                                               <li>
+                                                       <a href="/">Home</a>
+                                               </li>
+                                               <li>
+                                                       <a href="/blog">Blog</a>
+                                               </li>
+                                               <li class="is-active">
+                                                       <a href="#" aria-current="page">{{ post.title }}</a>
+                                               </li>
+                                       </ul>
+                               </nav>
+                               <h1 class="title is-1">
+                                       {{ post.title }}
+                               </h1>
+                               <p class="subtitle">
 
-                                               {% if post.release %}
-                                                       <a class="btn btn-primary" href="/download/{{ post.release.slug }}">
-                                                               {{ _("Download") }}
-                                                       </a>
-                                               {% end %}
+                                       {{ _("by") }}
+
+                                       {% if isinstance(post.author, accounts.Account) %}
+                                               <a href="/blog/authors/{{ post.author.uid }}">{{ post.author.name }}</a>,
+                                       {% else %}
+                                               <strong>{{ post.author }}</strong>,
+                                       {% end %}
 
-                                               {% if post.release or "donate" in post.tags %}
-                                                       <a class="btn btn-outline-primary ml-2" href="/donate">
-                                                               {{ _("Donate") }}
-                                                       </a>
+                                       {% if post.is_published() %}
+                                               {% if post.updated_at and post.updated_at > post.published_at %}
+                                                       {{ locale.format_date(post.published_at, shorter=True, relative=False) }},
+                                                       {{ _("Updated %s") % locale.format_date(post.updated_at, shorter=True) }}
+                                               {% else %}
+                                                       {{ locale.format_date(post.published_at, shorter=True, relative=False) }}
                                                {% end %}
-                                       </div>
-                               </div>
+                                       {% elif post.published_at %}
+                                               <span class="text-danger">{{ _("Scheduled to be published %s") % locale.format_date(post.published_at, relative=False) }}</span>
+                                       {% else %}
+                                               {{ _("Not published") }}
+                                       {% end %}
+
+                               </p>
                        </div>
-               </section>
+               </div>
+       </section>
+
+
+
+
+
+       <div class="container">
+               <div class="columns">
+                       <div class="column is-three-fifths">
+                               <section class="section {% if "lightningwirelabs.com" in post.tags %}lightning-wire-labs{% end %}">
+
+                                                       <div class="content">
+                                                               {% raw post.html %}
+                                                       </div>
+
+                                                       <div class="btn-toolbar justify-content-center my-5">
+                                                               {% if "lightningwirelabs.com" in post.tags and post.link %}
+                                                                       <a class="button is-lwl" href="{{ post.link }}">
+                                                                               <p class="has-text-centered has-text-weight-bold is-uppercase">
+                                                                                       Go to Lightning Wire Labs <span class="fas fa-external-link-alt ml-2"></span>
+                                                                               </p>
+                                                                       </a>
+                                                               {% end %}
+
+                                                               {% if post.release %}
+                                                                       <a class="button is-primary" href="/download/{{ post.release.slug }}">
+                                                                               <p class="has-text-centered has-text-weight-bold is-uppercase">
+                                                                                       {{ _("Download") }}
+                                                                               </p>
+                                                                       </a>
+                                                               {% end %}
+
+                                                               {% if post.release or "donate" in post.tags %}
+                                                                       <a class="button is-primary" href="https://www.ipfire.org/donate">
+                                                                               <p class="has-text-centered has-text-weight-bold is-uppercase">
+                                                                                       {{ _("Donate") }}
+                                                                               </p>
+                                                                       </a>
+                                                               {% end %}
+                                                       </div>
+                               </section>
+                       </div>
+               </div>
        </div>
 {% end block %}