aboutsummaryrefslogtreecommitdiffstatshomepage
diff options
context:
space:
mode:
-rw-r--r--_includes/posts/posts.html18
-rw-r--r--_layouts/post.html18
-rw-r--r--assets/css/common/misc.css13
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;
+ }
+}