styled blog/index.html

diff --git a/src/templates/blog/index.html b/src/templates/blog/index.html
index d11f7f036eda4a2fdc82b73d842886bced775b43..7ad55b3606f2055d8fbe0d2a487539182c782dfc 100644 (file)
--- a/src/templates/blog/index.html
+++ b/src/templates/blog/index.html
@@ -7,17 +7,57 @@
 {% end %}
 
 {% block container %}
-       <div class="header">
+       <!--<div class="header">
                <div class="container">
                        <h1>{{ _("IPFire Blog") }}</h1>
                </div>
-       </div>
+       </div>-->
 
-       <div class="container">
-               <section>
-                       {% module BlogList(posts, relative=True) %}
-               </section>
+       <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>
+                                       </ul>
+                               </nav>
+                               <h1 class="title is-1">
+                                       {{ _("IPFire Blog") }}
+                               </h1>
+                               <p class="subtitle">
 
-               {% module BlogHistoryNavigation() %}
-       </div>
+                               </p>
+                       </div>
+               </div>
+       </section>
+
+       <section class="section">
+               <div class="container">
+                       <div class="columns">
+                               <div class="column is-8">
+                                       {% if latest_post %}
+                                               <div class="notification has-background-primary-light">
+                                                       <a class="title is-4 has-text-primary" href="/blog/{{ latest_post.slug }}">
+                                                               {{ latest_post.title }}
+                                                       </a>
+                                                       <br>
+                                                       {{ latest_post.excerpt }}
+                                                       <a class="has-text-primary" href="/blog/{{ latest_post.slug }}">Read more</a>
+                                               </div>
+                                       {% end %}
+
+                                       {% module BlogList(posts, relative=True) %}
+                               </div>
+
+                               <div class="column is-4">
+                                       {% module BlogHistoryNavigation() %}
+                               </div>
+                       </div>
+               </div>
+       </section>
 {% end block %}