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