diff options
author | Egor Tensin <Egor.Tensin@gmail.com> | 2022-05-13 15:25:32 +0200 |
---|---|---|
committer | Egor Tensin <Egor.Tensin@gmail.com> | 2022-05-13 15:25:32 +0200 |
commit | e60844768650368614befa70527a1efb53b053f9 (patch) | |
tree | f1ac029c0dce3d0f7eb312ec75a773eea106a113 | |
parent | posts: more zing to the side font (diff) | |
download | jekyll-theme-e60844768650368614befa70527a1efb53b053f9.tar.gz jekyll-theme-e60844768650368614befa70527a1efb53b053f9.zip |
posts: clarify CSS
-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; |