diff options
| -rw-r--r-- | assets/css/jekyll-theme/posts.css | 30 |
1 files changed, 17 insertions, 13 deletions
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 <hr>, it's margins are too big, use a border instead. */ |