From fdfed03411884c7c6da48f08e38f75c9ab2f35f7 Mon Sep 17 00:00:00 2001
From: Egor Tensin <Egor.Tensin@gmail.com>
Date: Mon, 8 Nov 2021 09:05:51 +0300
Subject: put post dates beside the headers

---
 _includes/posts/posts.html | 18 +++++++++++++-----
 _layouts/post.html         | 18 +++++++++++++-----
 assets/css/common/misc.css | 13 +++++++++++++
 3 files changed, 39 insertions(+), 10 deletions(-)

diff --git a/_includes/posts/posts.html b/_includes/posts/posts.html
index 39dd858..c20ad69 100644
--- a/_includes/posts/posts.html
+++ b/_includes/posts/posts.html
@@ -3,11 +3,19 @@
   <hr/>
 {% else %}
   {% for post in paginator.posts %}
-    <h2><a href="{{ post.url | relative_url }}">{{ post.title }}</a></h2>
-    <p class="text-muted">
-      <span class="glyphicon glyphicon-time"></span>&nbsp;Posted on {{ post.date | date: '%-d %B %Y' }}
-      {%- if post.category %} in <span class="glyphicon glyphicon-folder-open"></span>&nbsp;<a class="category" href="{{ '/' | relative_url }}{{ post.category | slugify: 'pretty' }}/">{{ post.category }}</a>{% endif %}
-    </p>
+    <div class="row post-header">
+      <div class="col-xs-12 col-sm-8">
+        <h2><a href="{{ post.url | relative_url }}">{{ post.title }}</a></h2>
+      </div>
+      <div class="col-xs-12 col-sm-4 post-date">
+        <p class="text-muted">
+          {% if post.category %}
+            <span class="glyphicon glyphicon-folder-open"></span>&nbsp;<a class="category" href="{{ '/' | relative_url }}{{ post.category | slugify: 'pretty' }}/">{{ post.category }}</a>
+          {% endif %}
+          <span class="glyphicon glyphicon-time"></span>&nbsp;{{ post.date | date: '%-d&nbsp;%B&nbsp;%Y' }}
+        </p>
+      </div>
+    </div>
     {{ post.excerpt | markdownify }}
     <hr/>
   {% endfor %}
diff --git a/_layouts/post.html b/_layouts/post.html
index 6c4737d..8ec7626 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -1,10 +1,18 @@
 ---
 layout: default
 ---
-<h1>{{ page.title }}</h1>
-<p class="text-muted">
-  <span class="glyphicon glyphicon-time"></span>&nbsp;Posted on {{ page.date | date: '%-d %B %Y' }}
-  {%- if page.category %} in <span class="glyphicon glyphicon-folder-open"></span>&nbsp;<a class="category" href="{{ '/' | relative_url }}{{ page.category | slugify: 'pretty' }}/">{{ page.category }}</a>{% endif %}
-</p>
+<div class="row post-header">
+  <div class="col-xs-12 col-sm-8">
+    <h1>{{ page.title }}</h1>
+  </div>
+  <div class="col-xs-12 col-sm-4 post-date">
+    <p class="text-muted">
+      {% if page.category %}
+        <span class="glyphicon glyphicon-folder-open"></span>&nbsp;<a class="category" href="{{ '/' | relative_url }}{{ page.category | slugify: 'pretty' }}/">{{ page.category }}</a>
+      {% endif %}
+      <span class="glyphicon glyphicon-time"></span>&nbsp;{{ page.date | date: '%-d&nbsp;%B&nbsp;%Y' }}
+    </p>
+  </div>
+</div>
 {{ content }}
 <hr/>
diff --git a/assets/css/common/misc.css b/assets/css/common/misc.css
index 492a186..f5a1e95 100644
--- a/assets/css/common/misc.css
+++ b/assets/css/common/misc.css
@@ -39,3 +39,16 @@ pre code {
 .text-muted a.category {
   color: inherit;
 }
+
+/* This is a relatively popular workaround to align side-by-side columns.
+ * I use it for post headers. */
+.post-header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+}
+@media (min-width: 768px) {
+  .post-date {
+    text-align: right;
+  }
+}
-- 
cgit v1.2.3