i like this blogpost header more

Gemfile

@@ -23,6 +23,7 @@ group :development do
   gem 'adsf'
   gem 'highline'
   gem 'terminal-notifier-guard'
+  gem 'terminal-notifier'
 end
 
 group :production do

Gemfile.lock

@@ -84,6 +84,7 @@ GEM
     sass (3.4.23)
     shellany (0.0.1)
     slop (3.6.0)
+    terminal-notifier (1.7.1)
     terminal-notifier-guard (1.7.0)
     therubyracer (0.12.3)
       libv8 (~> 3.16.14.15)
@@ -112,6 +113,7 @@ DEPENDENCIES
   kramdown
   nanoc (= 4.7.4)
   sass
+  terminal-notifier
   terminal-notifier-guard
   therubyracer
   w3c_validators

content/assets/stylesheets/includes/blogpost.scss

@@ -33,8 +33,41 @@ dl {
   }
 }
 
-.blogwidth{
-  width: 75%;
-  margin:auto;
-  word-wrap: normal;
+.blog-heading {
+  display: flex;
+  flex-direction: column;
+
+  .titlewrap {
+    position: relative;
+    margin: auto;
+
+    .title {
+      font-size: 4rem;
+      font-weight: bolder;
+    }
+
+    .subtitle {
+      position: absolute;
+    }
+
+    .details {
+      right: 0;
+      position: absolute;
+      margin-top: -1.1rem;
+      line-height: 1;
+      text-align: right;
+    }
+  }
+
+  &::after {
+    content: '';
+    width: 80px;
+    height: 1px;
+    margin-top: 30px;
+    margin-right: auto;
+    margin-left: auto;
+    margin-bottom: 30px;
+    display: block;
+    background: $zeus-orange;
+  }
 }

layouts/blogpost.erb

@@ -1,22 +1,20 @@
-<div class="heading">
+<div class="blog-heading">
+  <div class="titlewrap">
     <h1 class="title is-1 has-text-centered">
       <%= item[:title] %>
     </h1>
     <% if item[:author] %>
     <h2 class="subtitle is-3 has-text-centered">
-    <% if item[:lang] == :en %>
-    by
-    <% else %>
-    door
-    <% end %>
-    <%= item[:author] %>
+      door <%= item[:author] %>
     </h2>
     <% end %>
-  <p class="has-text-centered">
-    <small>Geschreven op <%= item[:created_at] %></small><br>
+    <div class="details">
+      <small>
+        Geschreven op <%= item[:created_at] %><br>
         Leestijd: <%= reading_time @item %>
-  </p>
-  <hr>
+      </small>
+    </div>
+  </div>
 </div>
 
 <div class="columns">