posts: redesign feed again

Put dates on the left, this looks nicer.

10 files changed, 61 insertions, 52 deletions

diff --git a/_includes/jekyll-theme/categories/all.html b/_includes/jekyll-theme/categories/all.html
index d1c6285..c8d4720 100644
--- a/_includes/jekyll-theme/categories/all.html
+++ b/_includes/jekyll-theme/categories/all.html
@@ -4,20 +4,16 @@
   {% assign categories = site.categories | sort %}
   {% for category in categories %}
     {% assign category_name = category[0] %}
-    <h2>{% include jekyll-theme/categories/label.html category=category_name %}</h2>
+    <h2>{% include jekyll-theme/categories/label.html link=true category=category_name monospace=true %}</h2>
     {% for post in category[1] %}
-      <a href="{{ post.url | relative_url }}" class="feed-entry">
-        {% include jekyll-theme/posts/header.html feed=true title=post.title date=post.date %}
-      </a>
+      {% include jekyll-theme/posts/header.html url=post.url title=post.title date=post.date %}
     {% endfor %}
   {% endfor %}
   {% assign uncategorized = site.posts | where_exp: "post","post.categories.size == 0" %}
   {% if uncategorized.size != 0 %}
-    <h2>{% include jekyll-theme/categories/label.html category="Other" feed=true %}</h2>
+    <h2>{% include jekyll-theme/categories/label.html category="Other" monospace=true %}</h2>
     {% for post in uncategorized %}
-      <a href="{{ post.url | relative_url }}" class="feed-entry">
-        {% include jekyll-theme/posts/header.html feed=true title=post.title date=post.date %}
-      </a>
+      {% include jekyll-theme/posts/header.html url=post.url title=post.title date=post.date %}
     {% endfor %}
   {% endif %}
 {% endif %}
diff --git a/_includes/jekyll-theme/categories/category.html b/_includes/jekyll-theme/categories/category.html
index a33fd76..e14a981 100644
--- a/_includes/jekyll-theme/categories/category.html
+++ b/_includes/jekyll-theme/categories/category.html
@@ -1,9 +1,7 @@
-<h1>{% include jekyll-theme/categories/label.html category=include.category feed=true %}</h1>
+<h1>{% include jekyll-theme/categories/label.html category=include.category monospace=true %}</h1>
 {% if site.categories[include.category].size > 0 %}
   {% for post in site.categories[include.category] %}
-    <a href="{{ post.url | relative_url }}" class="feed-entry">
-      {% include jekyll-theme/posts/header.html feed=true title=post.title date=post.date %}
-    </a>
+    {% include jekyll-theme/posts/header.html url=post.url title=post.title date=post.date %}
   {% endfor %}
 {% endif %}
 {% if include.archive_link %}
diff --git a/_includes/jekyll-theme/categories/label.html b/_includes/jekyll-theme/categories/label.html
index 4345df2..f556de1 100644
--- a/_includes/jekyll-theme/categories/label.html
+++ b/_includes/jekyll-theme/categories/label.html
@@ -1,6 +1,9 @@
+{%- capture url -%}{{ '/' | relative_url }}{{ include.category | slugify: 'pretty' }}{%- endcapture -%}
+{%- assign label = include.category | downcase -%}
+
 <span class="glyphicon glyphicon-folder-open"></span>&nbsp;
-{%- if include.feed -%}
-  <span class="category text-monospace">{{ include.category | downcase }}</span>
+{%- if include.link -%}
+  <a class="category{% if include.monospace %} text-monospace{% endif %}" href="{{ url }}/">{{ label }}</a>
 {%- else -%}
-  <a class="category text-monospace" href="{{ '/' | relative_url }}{{ include.category | slugify: 'pretty' }}/">{{ include.category | downcase }}</a>
+  <span class="category{% if include.monospace %} text-monospace{% endif %}">{{ label }}</span>
 {%- endif -%}
diff --git a/_includes/jekyll-theme/flex-header.html b/_includes/jekyll-theme/flex-header.html
new file mode 100644
index 0000000..6048991
--- /dev/null
+++ b/_includes/jekyll-theme/flex-header.html
@@ -0,0 +1,11 @@
+<div class="flex-header" style="flex-wrap: wrap;">
+  <div class="flex-header">
+    {% if include.left %}
+      <p class="flex-header-left text-muted font-size-90">{{ include.left }}</p>
+    {% endif %}
+    <div class="flex-header-title">{{ include.title }}</div>
+  </div>
+  {% if include.right %}
+    <p class="flex-header-right text-muted font-size-90">{{ include.right }}</p>
+  {% endif %}
+</div>
diff --git a/_includes/jekyll-theme/posts/date.html b/_includes/jekyll-theme/posts/date.html
new file mode 100644
index 0000000..4d36bd3
--- /dev/null
+++ b/_includes/jekyll-theme/posts/date.html
@@ -0,0 +1,5 @@
+{% assign fmt = include.fmt %}
+{% unless fmt %}
+  {% assign fmt = "%F" %}
+{% endunless %}
+<span class="glyphicon glyphicon-time"></span>&nbsp;<span{% if include.monospace %} class="text-monospace"{% endif %}>{{ include.date | date: fmt }}</span>
diff --git a/_includes/jekyll-theme/posts/feed.html b/_includes/jekyll-theme/posts/feed.html
index 1fff024..5d45cd3 100644
--- a/_includes/jekyll-theme/posts/feed.html
+++ b/_includes/jekyll-theme/posts/feed.html
@@ -2,9 +2,7 @@
   <p class="h3">Sorry, no posts have been added yet.</p>
 {% else %}
   {% for post in paginator.posts %}
-    <a href="{{ post.url | relative_url }}" class="feed-entry">
-      {% include jekyll-theme/posts/header.html feed=true title=post.title date=post.date category=post.category %}
-    </a>
+    {% include jekyll-theme/posts/header.html url=post.url date=post.date title=post.title category=post.category %}
   {% endfor %}
   {% include jekyll-theme/posts/paginator.html %}
 {% endif %}
diff --git a/_includes/jekyll-theme/posts/header.html b/_includes/jekyll-theme/posts/header.html
index 9acea37..d170ae9 100644
--- a/_includes/jekyll-theme/posts/header.html
+++ b/_includes/jekyll-theme/posts/header.html
@@ -1,22 +1,15 @@
-<div class="post-header">
-  {% if include.feed %}
-    <h5 class="text-monospace">{{ include.title }}</h5>
-  {% else %}
-    <h1><span class="font-size-90">{{ include.title }}</span></h1>
-  {% endif %}
+{% assign header_date = null %}
+{% if include.date %}
+  {% capture header_date %}{%- include jekyll-theme/posts/date.html date=include.date monospace=true -%}{% endcapture %}
+{% endif %}
 
-  <div class="post-date">
-    <p class="text-muted font-size-90">
-      {%- comment -%}
-        Collapse the Liquid whitespace here, so that no extra spaces
-        between <span>s are introduced.
-      {%- endcomment -%}
-      {%- if include.category -%}
-        {% include jekyll-theme/categories/label.html category=include.category feed=include.feed %}
-      {%- endif -%}
-      {%- if include.date -%}
-        <span class="glyphicon glyphicon-time"></span>&nbsp;<span class="text-monospace">{{ include.date | date: '%d-%b-%Y' }}</span>
-      {%- endif -%}
-    </p>
-  </div>
-</div>
+{% assign header_category = null %}
+{% if include.category %}
+  {% capture header_category %}{%- include jekyll-theme/categories/label.html category=include.category monospace=true -%}{% endcapture %}
+{% endif %}
+
+{% capture header_title %}<h5 class="text-monospace">{{ include.title }}</h5>{% endcapture %}
+
+<a href="{{ include.url | relative_url }}" class="feed-entry">
+  {% include jekyll-theme/flex-header.html left=header_date title=header_title right=header_category %}
+</a>
diff --git a/_includes/jekyll-theme/sidebar/latest-posts.html b/_includes/jekyll-theme/sidebar/latest-posts.html
index 17251e3..5ba1cac 100644
--- a/_includes/jekyll-theme/sidebar/latest-posts.html
+++ b/_includes/jekyll-theme/sidebar/latest-posts.html
@@ -8,9 +8,9 @@
   </div>
   {% for post in site.posts limit: 5 %}
   <a class="list-group-item" href="{{ post.url | relative_url }}">
-    <h5 class="list-group-item-heading post-header">
+    <h5 class="list-group-item-heading flex-header">
       <span>{{ post.title }}</span>
-      <small class="post-date"><span class="glyphicon glyphicon-time"></span>&nbsp;{{ post.date | date: '%-d %b %Y' }}</small>
+      <small class="flex-header-right">{% include jekyll-theme/posts/date.html date=post.date fmt='%-d %b %Y' %}</small>
     </h5>
   </a>
   {% endfor %}
diff --git a/_layouts/post.html b/_layouts/post.html
index 674b810..dcf667a 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -1,6 +1,17 @@
 ---
 layout: default
 ---
-{% include jekyll-theme/posts/header.html title=page.title date=page.date category=page.category %}
+{% capture date %}{%- include jekyll-theme/posts/date.html date=page.date monospace=true -%}{% endcapture %}
+
+{% assign category = "" %}
+{% if page.category %}
+  {% capture category %}{%- include jekyll-theme/categories/label.html link=true category=page.category monospace=true -%}&nbsp;{% endcapture %}
+{% endif %}
+
+{% capture date %}{{ category }}{{ date }}{% endcapture %}
+
+{% capture title %}<h1>{{ page.title }}</h1>{% endcapture %}
+
+{% include jekyll-theme/flex-header.html title=title right=date %}
 {{ content }}
 {% include jekyll-theme/sidebar/sep.html %}
diff --git a/assets/css/jekyll-theme/posts.css b/assets/css/jekyll-theme/posts.css
index af3674a..1e0fc47 100644
--- a/assets/css/jekyll-theme/posts.css
+++ b/assets/css/jekyll-theme/posts.css
@@ -1,23 +1,17 @@
 /* Wrap the post date to the next line if necessary. */
-.post-header {
+.flex-header {
   display: flex;
-  flex-wrap: wrap;
   align-items: baseline;
-  justify-content: space-between;
   column-gap: 1.5em;
 }
-.list-group-item .post-header {
-  flex-wrap: nowrap;
-}
 
-.post-date {
+.flex-header-left, .flex-header-right {
   flex: none;
+}
+.flex-header-right {
   /* Right-align the post date if on the next line. */
   margin-left: auto;
 }
-.post-date .category {
-  margin-right: 1em;
-}
 
 /* Add some margin after the last .feed-entry. */
 .feed-entry {