diff options
author | Egor Tensin <Egor.Tensin@gmail.com> | 2022-10-28 08:37:22 +0200 |
---|---|---|
committer | Egor Tensin <Egor.Tensin@gmail.com> | 2022-10-28 11:11:57 +0200 |
commit | cc2273f7af3a56e2b7198290d4c337e146a4213a (patch) | |
tree | eee77d02967b53806c0dc41a65f6d6bfa8832640 | |
parent | posts: redesign feed again (diff) | |
download | jekyll-theme-cc2273f7af3a56e2b7198290d4c337e146a4213a.tar.gz jekyll-theme-cc2273f7af3a56e2b7198290d4c337e146a4213a.zip |
posts: narrower feed on mobile
-rw-r--r-- | _includes/jekyll-theme/flex-header.html | 4 | ||||
-rw-r--r-- | _includes/jekyll-theme/posts/date.html | 4 | ||||
-rw-r--r-- | _includes/jekyll-theme/posts/header.html | 8 | ||||
-rw-r--r-- | _layouts/post.html | 2 | ||||
-rw-r--r-- | assets/css/jekyll-theme/posts.css | 8 |
5 files changed, 19 insertions, 7 deletions
diff --git a/_includes/jekyll-theme/flex-header.html b/_includes/jekyll-theme/flex-header.html index 6048991..418fa2b 100644 --- a/_includes/jekyll-theme/flex-header.html +++ b/_includes/jekyll-theme/flex-header.html @@ -1,11 +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> + <div class="flex-header-left text-muted font-size-90">{{ include.left }}</div> {% 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> + <div class="flex-header-right text-muted font-size-90">{{ include.right }}</div> {% endif %} </div> diff --git a/_includes/jekyll-theme/posts/date.html b/_includes/jekyll-theme/posts/date.html index 4d36bd3..de7c4de 100644 --- a/_includes/jekyll-theme/posts/date.html +++ b/_includes/jekyll-theme/posts/date.html @@ -1,5 +1,5 @@ {% assign fmt = include.fmt %} {% unless fmt %} - {% assign fmt = "%F" %} + {% assign fmt = '%Y<span class="hide-on-mobile">-</span>%m<span class="hide-on-mobile">-</span>%d' %} {% endunless %} -<span class="glyphicon glyphicon-time"></span> <span{% if include.monospace %} class="text-monospace"{% endif %}>{{ include.date | date: fmt }}</span> +<span class="hide-on-mobile"><span class="glyphicon glyphicon-time"></span> </span><span{% if include.monospace %} class="text-monospace"{% endif %}>{{ include.date | date: fmt }}</span> diff --git a/_includes/jekyll-theme/posts/header.html b/_includes/jekyll-theme/posts/header.html index d170ae9..4d648e7 100644 --- a/_includes/jekyll-theme/posts/header.html +++ b/_includes/jekyll-theme/posts/header.html @@ -1,11 +1,15 @@ {% assign header_date = null %} {% if include.date %} - {% capture header_date %}{%- include jekyll-theme/posts/date.html date=include.date monospace=true -%}{% endcapture %} + {% capture header_date %}<p>{%- include jekyll-theme/posts/date.html date=include.date monospace=true -%}</p>{% endcapture %} {% endif %} {% assign header_category = null %} {% if include.category %} - {% capture header_category %}{%- include jekyll-theme/categories/label.html category=include.category monospace=true -%}{% endcapture %} + {% capture header_category %} + <p class="hide-on-mobile"> + {%- include jekyll-theme/categories/label.html category=include.category monospace=true -%} + </p> + {% endcapture %} {% endif %} {% capture header_title %}<h5 class="text-monospace">{{ include.title }}</h5>{% endcapture %} diff --git a/_layouts/post.html b/_layouts/post.html index dcf667a..e5d6197 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -8,7 +8,7 @@ layout: default {% capture category %}{%- include jekyll-theme/categories/label.html link=true category=page.category monospace=true -%} {% endcapture %} {% endif %} -{% capture date %}{{ category }}{{ date }}{% endcapture %} +{% capture date %}<p>{{ category }}{{ date }}</p>{% endcapture %} {% capture title %}<h1>{{ page.title }}</h1>{% endcapture %} diff --git a/assets/css/jekyll-theme/posts.css b/assets/css/jekyll-theme/posts.css index 1e0fc47..25d75ba 100644 --- a/assets/css/jekyll-theme/posts.css +++ b/assets/css/jekyll-theme/posts.css @@ -4,6 +4,14 @@ align-items: baseline; column-gap: 1.5em; } +@media(max-width: 480px) { + .flex-header { + column-gap: 1em; + } + .feed-entry .hide-on-mobile { + display: none; + } +} .flex-header-left, .flex-header-right { flex: none; |