From decfc9fe169a1e2ba8461aa239c1c6d723f3f0c5 Mon Sep 17 00:00:00 2001 From: Egor Tensin Date: Sat, 16 Apr 2022 11:11:09 +0300 Subject: posts: date always beneath the header on my phone --- assets/css/jekyll-theme/posts.css | 30 +++++++++++++++++------------- 1 file changed, 17 insertions(+), 13 deletions(-) (limited to 'assets') diff --git a/assets/css/jekyll-theme/posts.css b/assets/css/jekyll-theme/posts.css index b9b5b41..1395c05 100644 --- a/assets/css/jekyll-theme/posts.css +++ b/assets/css/jekyll-theme/posts.css @@ -1,22 +1,26 @@ -/* 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; - justify-content: space-between; - column-gap: 1em; +/* I don't like how on my phone, sometimes the date is wrapped, and sometimes + * it isn't. So on xs devices, the date is always beneath the header. */ +@media (min-width: 768px) { + .post-header { + display: flex; + align-items: baseline; + justify-content: space-between; + column-gap: 1em; + } +} +.post-date { + flex: none; } .post-date a.category { margin-right: .5em; } -/* On the sidebar, don't shrink the date part, shrink the header. */ +/* On the sidebar, the date is always beside the header. */ .list-group-item .post-header { - flex-wrap: nowrap; -} -.list-group-item .post-date { - flex-shrink: 0; + display: flex; + align-items: baseline; + justify-content: space-between; + column-gap: 1em; } /* Don't use an actual
, it's margins are too big, use a border instead. */ -- cgit v1.2.3