diff options
| -rw-r--r-- | assets/css/jekyll-theme/posts.css | 26 |
1 files changed, 16 insertions, 10 deletions
diff --git a/assets/css/jekyll-theme/posts.css b/assets/css/jekyll-theme/posts.css index 348ca42..b24cbb7 100644 --- a/assets/css/jekyll-theme/posts.css +++ b/assets/css/jekyll-theme/posts.css @@ -1,5 +1,8 @@ -/* 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. */ +/* On the sidebar, the date is always beside the header. + * On smaller devices, the date is always beneath the header. + * On the post page, the date is beside the header or wraps to the next line on + * larger devices. + * In the feed, the date is always beside the header on larger devices. */ @media (min-width: 768px) { .post-header { display: flex; @@ -7,22 +10,25 @@ justify-content: space-between; column-gap: 1em; } + :not(.feed-entry) > .post-header { + flex-wrap: wrap; + } } -.post-date { - flex: none; -} -.post-date .category { - margin-right: .5em; -} - -/* On the sidebar, the date is always beside the header. */ .list-group-item .post-header { display: flex; + flex-wrap: nowrap; align-items: baseline; justify-content: space-between; column-gap: 1em; } +.post-date { + flex: none; +} +.post-date .category { + margin-right: .5em; +} + .feed-entry { /* The entire feed entry is a link now. */ display: block; |