aboutsummaryrefslogtreecommitdiffstatshomepage
diff options
context:
space:
mode:
-rw-r--r--assets/css/jekyll-theme/posts.css30
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. */