diff options
| -rw-r--r-- | _includes/posts/posts.html | 18 | ||||
| -rw-r--r-- | _layouts/post.html | 18 | ||||
| -rw-r--r-- | 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> Posted on {{ post.date | date: '%-d %B %Y' }} - {%- if post.category %} in <span class="glyphicon glyphicon-folder-open"></span> <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> <a class="category" href="{{ '/' | relative_url }}{{ post.category | slugify: 'pretty' }}/">{{ post.category }}</a> + {% endif %} + <span class="glyphicon glyphicon-time"></span> {{ post.date | date: '%-d %B %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> Posted on {{ page.date | date: '%-d %B %Y' }} - {%- if page.category %} in <span class="glyphicon glyphicon-folder-open"></span> <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> <a class="category" href="{{ '/' | relative_url }}{{ page.category | slugify: 'pretty' }}/">{{ page.category }}</a> + {% endif %} + <span class="glyphicon glyphicon-time"></span> {{ page.date | date: '%-d %B %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; + } +} |