From a768a7fa84577a5975fa782dd81cdab066dcff12 Mon Sep 17 00:00:00 2001 From: Egor Tensin Date: Fri, 28 Oct 2022 07:39:20 +0200 Subject: posts: redesign feed again Put dates on the left, this looks nicer. --- _includes/jekyll-theme/categories/all.html | 12 +++----- _includes/jekyll-theme/categories/category.html | 6 ++-- _includes/jekyll-theme/categories/label.html | 9 ++++-- _includes/jekyll-theme/flex-header.html | 11 ++++++++ _includes/jekyll-theme/posts/date.html | 5 ++++ _includes/jekyll-theme/posts/feed.html | 4 +-- _includes/jekyll-theme/posts/header.html | 35 ++++++++++-------------- _includes/jekyll-theme/sidebar/latest-posts.html | 4 +-- _layouts/post.html | 13 ++++++++- assets/css/jekyll-theme/posts.css | 14 +++------- 10 files changed, 61 insertions(+), 52 deletions(-) create mode 100644 _includes/jekyll-theme/flex-header.html create mode 100644 _includes/jekyll-theme/posts/date.html 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] %} -

{% include jekyll-theme/categories/label.html category=category_name %}

+

{% include jekyll-theme/categories/label.html link=true category=category_name monospace=true %}

{% for post in category[1] %} - - {% include jekyll-theme/posts/header.html feed=true title=post.title date=post.date %} - + {% 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 %} -

{% include jekyll-theme/categories/label.html category="Other" feed=true %}

+

{% include jekyll-theme/categories/label.html category="Other" monospace=true %}

{% for post in uncategorized %} - - {% include jekyll-theme/posts/header.html feed=true title=post.title date=post.date %} - + {% 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 @@ -

{% include jekyll-theme/categories/label.html category=include.category feed=true %}

+

{% include jekyll-theme/categories/label.html category=include.category monospace=true %}

{% if site.categories[include.category].size > 0 %} {% for post in site.categories[include.category] %} - - {% include jekyll-theme/posts/header.html feed=true title=post.title date=post.date %} - + {% 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 -%} +   -{%- if include.feed -%} - {{ include.category | downcase }} +{%- if include.link -%} + {{ label }} {%- else -%} - {{ include.category | downcase }} + {{ label }} {%- 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 @@ +
+
+ {% if include.left %} +

{{ include.left }}

+ {% endif %} +
{{ include.title }}
+
+ {% if include.right %} +

{{ include.right }}

+ {% endif %} +
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 %} + {{ include.date | date: fmt }} 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 @@

Sorry, no posts have been added yet.

{% else %} {% for post in paginator.posts %} - - {% include jekyll-theme/posts/header.html feed=true title=post.title date=post.date category=post.category %} - + {% 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 @@ -
- {% if include.feed %} -
{{ include.title }}
- {% else %} -

{{ include.title }}

- {% endif %} +{% assign header_date = null %} +{% if include.date %} + {% capture header_date %}{%- include jekyll-theme/posts/date.html date=include.date monospace=true -%}{% endcapture %} +{% endif %} -
-

- {%- comment -%} - Collapse the Liquid whitespace here, so that no extra spaces - between s are introduced. - {%- endcomment -%} - {%- if include.category -%} - {% include jekyll-theme/categories/label.html category=include.category feed=include.feed %} - {%- endif -%} - {%- if include.date -%} -  {{ include.date | date: '%d-%b-%Y' }} - {%- endif -%} -

-
-
+{% 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 %}
{{ include.title }}
{% endcapture %} + + + {% include jekyll-theme/flex-header.html left=header_date title=header_title right=header_category %} + 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 @@ {% for post in site.posts limit: 5 %} -
+
{{ post.title }} -  {{ post.date | date: '%-d %b %Y' }} + {% include jekyll-theme/posts/date.html date=post.date fmt='%-d %b %Y' %}
{% 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 -%} {% endcapture %} +{% endif %} + +{% capture date %}{{ category }}{{ date }}{% endcapture %} + +{% capture title %}

{{ page.title }}

{% 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 { -- cgit v1.2.3