posts: narrower feed on mobile

5 files changed, 19 insertions, 7 deletions

diff --git a/_includes/jekyll-theme/flex-header.html b/_includes/jekyll-theme/flex-header.html
index 6048991..418fa2b 100644
--- a/_includes/jekyll-theme/flex-header.html
+++ b/_includes/jekyll-theme/flex-header.html
@@ -1,11 +1,11 @@
 <div class="flex-header" style="flex-wrap: wrap;">
   <div class="flex-header">
     {% if include.left %}
-      <p class="flex-header-left text-muted font-size-90">{{ include.left }}</p>
+      <div class="flex-header-left text-muted font-size-90">{{ include.left }}</div>
     {% endif %}
     <div class="flex-header-title">{{ include.title }}</div>
   </div>
   {% if include.right %}
-    <p class="flex-header-right text-muted font-size-90">{{ include.right }}</p>
+    <div class="flex-header-right text-muted font-size-90">{{ include.right }}</div>
   {% endif %}
 </div>
diff --git a/_includes/jekyll-theme/posts/date.html b/_includes/jekyll-theme/posts/date.html
index 4d36bd3..de7c4de 100644
--- a/_includes/jekyll-theme/posts/date.html
+++ b/_includes/jekyll-theme/posts/date.html
@@ -1,5 +1,5 @@
 {% assign fmt = include.fmt %}
 {% unless fmt %}
-  {% assign fmt = "%F" %}
+  {% assign fmt = '%Y<span class="hide-on-mobile">-</span>%m<span class="hide-on-mobile">-</span>%d' %}
 {% endunless %}
-<span class="glyphicon glyphicon-time"></span>&nbsp;<span{% if include.monospace %} class="text-monospace"{% endif %}>{{ include.date | date: fmt }}</span>
+<span class="hide-on-mobile"><span class="glyphicon glyphicon-time"></span>&nbsp;</span><span{% if include.monospace %} class="text-monospace"{% endif %}>{{ include.date | date: fmt }}</span>
diff --git a/_includes/jekyll-theme/posts/header.html b/_includes/jekyll-theme/posts/header.html
index d170ae9..4d648e7 100644
--- a/_includes/jekyll-theme/posts/header.html
+++ b/_includes/jekyll-theme/posts/header.html
@@ -1,11 +1,15 @@
 {% assign header_date = null %}
 {% if include.date %}
-  {% capture header_date %}{%- include jekyll-theme/posts/date.html date=include.date monospace=true -%}{% endcapture %}
+  {% capture header_date %}<p>{%- include jekyll-theme/posts/date.html date=include.date monospace=true -%}</p>{% endcapture %}
 {% endif %}
 
 {% assign header_category = null %}
 {% if include.category %}
-  {% capture header_category %}{%- include jekyll-theme/categories/label.html category=include.category monospace=true -%}{% endcapture %}
+  {% capture header_category %}
+    <p class="hide-on-mobile">
+      {%- include jekyll-theme/categories/label.html category=include.category monospace=true -%}
+    </p>
+  {% endcapture %}
 {% endif %}
 
 {% capture header_title %}<h5 class="text-monospace">{{ include.title }}</h5>{% endcapture %}
diff --git a/_layouts/post.html b/_layouts/post.html
index dcf667a..e5d6197 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -8,7 +8,7 @@ layout: default
   {% capture category %}{%- include jekyll-theme/categories/label.html link=true category=page.category monospace=true -%}&nbsp;{% endcapture %}
 {% endif %}
 
-{% capture date %}{{ category }}{{ date }}{% endcapture %}
+{% capture date %}<p>{{ category }}{{ date }}</p>{% endcapture %}
 
 {% capture title %}<h1>{{ page.title }}</h1>{% endcapture %}
 
diff --git a/assets/css/jekyll-theme/posts.css b/assets/css/jekyll-theme/posts.css
index 1e0fc47..25d75ba 100644
--- a/assets/css/jekyll-theme/posts.css
+++ b/assets/css/jekyll-theme/posts.css
@@ -4,6 +4,14 @@
   align-items: baseline;
   column-gap: 1.5em;
 }
+@media(max-width: 480px) {
+  .flex-header {
+    column-gap: 1em;
+  }
+  .feed-entry .hide-on-mobile {
+    display: none;
+  }
+}
 
 .flex-header-left, .flex-header-right {
   flex: none;